Merge pull request #237 from commitd/stuarthendren/select

feat(select): fixes select behaviour when multiple instances

Author: stuarthendren

src/components/Menu/Menu.stories.tsx

@@ -208,3 +208,36 @@ export const Nested = () => {
     </Menu>
   )
 }
+
+/* A `MenuCheckboxItem` are items with an indicated boolean state */
+export const MultipleMenus = () => {
+  const [checked, setChecked] = useState(true)
+  const [color, setColor] = React.useState('blue')
+  return (
+    <>
+      <Menu>
+        <MenuTrigger>
+          <Button>Trigger</Button>
+        </MenuTrigger>
+        <MenuContent>
+          <MenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+            Cut
+          </MenuCheckboxItem>
+          <MenuCheckboxItem checked={false}>Paste</MenuCheckboxItem>
+        </MenuContent>
+      </Menu>
+      <Menu>
+        <MenuTrigger>
+          <Button>Trigger</Button>
+        </MenuTrigger>
+        <MenuContent>
+          <MenuRadioGroup value={color} onValueChange={setColor}>
+            <MenuRadioItem value="red">Red</MenuRadioItem>
+            <MenuRadioItem value="green">Green</MenuRadioItem>
+            <MenuRadioItem value="blue">Blue</MenuRadioItem>
+          </MenuRadioGroup>
+        </MenuContent>
+      </Menu>
+    </>
+  )
+}

src/components/Select/Select.stories.tsx

@@ -37,6 +37,10 @@ export const Placeholder = Template.bind({})
 Placeholder.args = {
   placeholder: '--Select an option--',
 }
+export const Header = Template.bind({})
+Header.args = {
+  header: '--Select an option--',
+}
 export const Disabled = Template.bind({})
 Disabled.args = {
   disabled: true,
@@ -72,7 +76,7 @@ export const ConfirmDialogSelect = () => (
   <Box variant="fullscreen">
     <ConfirmDialog>
       <ConfirmDialogContent description="This is a test" title="Test Select">
-        <Select label="Label" placeholder="Placeholder">
+        <Select label="Label" placeholder="Placeholder" header="Pick a number">
           <SelectItem value="one">One</SelectItem>
           <SelectItem value="two">Two</SelectItem>
           <SelectItem value="three">Three</SelectItem>
@@ -81,6 +85,15 @@ export const ConfirmDialogSelect = () => (
           <SelectItem value="six">Six</SelectItem>
           <SelectItem value="seven">Seven</SelectItem>
         </Select>
+        <Select label="Label" placeholder="Placeholder">
+          <SelectItem value="one">A</SelectItem>
+          <SelectItem value="two">B</SelectItem>
+          <SelectItem value="three">C</SelectItem>
+          <SelectItem value="four">D</SelectItem>
+          <SelectItem value="five">E</SelectItem>
+          <SelectItem value="six">F</SelectItem>
+          <SelectItem value="seven">G</SelectItem>
+        </Select>
         <ConfirmDialogActions confirm="Confirm" onConfirm={action('Confirm')} />
       </ConfirmDialogContent>
       <ConfirmDialogTrigger>

src/components/Select/Select.tsx

@@ -1,11 +1,19 @@
 import { useLabelContext } from '@radix-ui/react-label'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
-import React, { ComponentProps, ElementRef, forwardRef } from 'react'
+import React, {
+  ComponentProps,
+  ElementRef,
+  forwardRef,
+  useMemo,
+  Children,
+  isValidElement,
+} from 'react'
 import type { CSSProps, VariantProps } from '../../stitches.config'
 import { styled } from '../../stitches.config'
 import { ChevronDown } from '../Icons'
 import { inputStyles } from '../Input/Input'
 import { Label } from '../Label'
+import { useId } from '@radix-ui/react-id'
 import {
   Menu,
   MenuContent,
@@ -20,6 +28,7 @@ const DEFAULT_TAG = 'input'
 const StyledSelect = styled(DEFAULT_TAG, inputStyles, {
   cursor: 'pointer',
   textAlign: 'left',
+  pointerEvents: 'none',
 })
 export const SelectItem = MenuRadioItem
 
@@ -54,6 +63,8 @@ type SelectProps = CSSProps &
     defaultValue?: string
     /** Supply a starting placeholder value for uncontrolled instance */
     placeholder?: string
+    /** Supply a header for the select menu  */
+    header?: string
     /** Called on Select change with new value */
     onValueChange?: (value: string) => void
   } & ComponentProps<typeof DEFAULT_TAG>
@@ -71,12 +82,13 @@ export const Select = forwardRef<ElementRef<typeof StyledSelect>, SelectProps>(
   (
     {
       label,
-      id,
+      id: idProp,
       value,
       onValueChange,
       defaultValue,
       children,
       placeholder,
+      header,
       disabled,
       ...props
     },
@@ -87,8 +99,25 @@ export const Select = forwardRef<ElementRef<typeof StyledSelect>, SelectProps>(
       defaultProp: defaultValue || placeholder,
       onChange: onValueChange,
     })
+
+    const id = useId(idProp)
     const labelId = useLabelContext()
 
+    const valueToText = useMemo<Record<string, string>>(() => {
+      const mapped: Record<string, string> = {}
+      Children.forEach(Children.toArray(children), (child) => {
+        if (
+          isValidElement(child) &&
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          typeof child?.props?.children === 'string'
+        ) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+          mapped[child.props.value] = child.props.children
+        }
+      })
+      return mapped
+    }, [children])
+
     return (
       <>
         {label && (
@@ -105,15 +134,16 @@ export const Select = forwardRef<ElementRef<typeof StyledSelect>, SelectProps>(
                 disabled={disabled}
                 {...props}
                 ref={ref}
-                value={internalValue}
+                placeholder={placeholder}
+                value={internalValue && valueToText[internalValue]}
                 // Just there to suppress warning
                 onChange={() => null}
               />
               <ChevronDown />
             </Root>
           </MenuTrigger>
           <MenuContent align="start" sideOffset={4} alignOffset={4}>
-            {placeholder && <MenuItem disabled>{placeholder}</MenuItem>}
+            {header && <MenuItem disabled>{header}</MenuItem>}
             <MenuRadioGroup value={internalValue} onValueChange={setValue}>
               {children}
             </MenuRadioGroup>