@charcoal-ui/react 3.9.1 → 3.10.0

package/src/components/DropdownSelector/index.story.tsx

@@ -1,93 +1,210 @@
 import { useState } from 'react'
-import DropdownSelector, { DropdownSelectorProps } from '.'
+import DropdownSelector from '.'
 import { Divider } from './Divider'
 import MenuItemGroup from './MenuItemGroup'
 import DropdownMenuItem from './DropdownMenuItem'
 import Modal from '../Modal'
 import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing'
-import styled from 'styled-components'
-import Button from '../Button'
 import { Meta, StoryObj } from '@storybook/react'
+import TextField from '../TextField'
+import TextArea from '../TextArea'
+import Button from '../Button'
 
 export default {
   title: 'DropdownSelector',
   component: DropdownSelector,
 } as Meta<typeof DropdownSelector>
 
-const baseProps: DropdownSelectorProps = {
-  label: 'Label',
-  value: '',
-  placeholder: 'placeholder',
-  onChange: () => {
-    //
+export const Default: StoryObj<typeof DropdownSelector> = {
+  render: function Render(args) {
+    const [selected, setSelected] = useState('')
+
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          {...args}
+          onChange={setSelected}
+          value={args.value ? args.value : selected}
+          placeholder="Placeholder"
+          label="Label"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
   },
-  children: <DropdownMenuItem value="item" />,
 }
 
-export const Playground: StoryObj<typeof DropdownSelector> = {
-  args: {
-    ...baseProps,
+export const Label: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          onChange={setSelected}
+          label="Label"
+          showLabel
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
   },
-  render: (props) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [selected, setSelected] = useState('50')
+}
 
+export const Disabled: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
     return (
       <div style={{ width: 288 }}>
-        <Button></Button>
         <DropdownSelector
-          {...props}
-          onChange={(value) => {
-            setSelected(value)
-          }}
           value={selected}
-          label="label"
+          disabled
+          onChange={setSelected}
+          label="Label"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
+export const DisabledItem: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('2')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector value={selected} onChange={setSelected} label="Label">
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2" disabled>
+            Option 2 (disabled)
+          </DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+          <DropdownMenuItem value="4">Option 4</DropdownMenuItem>
+          <DropdownMenuItem value="5">Option 5</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
+export const Invalid: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          invalid
+          onChange={setSelected}
+          label="Label"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
+export const AssistiveText: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          onChange={setSelected}
+          label="Label"
+          assistiveText="assistiveText"
         >
-          {[...(Array(100) as undefined[])].map((_, i) => {
-            return (
-              <DropdownMenuItem key={i} value={i.toString()}>
-                {i}
-              </DropdownMenuItem>
-            )
-          })}
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
         </DropdownSelector>
       </div>
     )
   },
 }
 
-function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
-  const [selected, setSelected] = useState('10')
-  return (
-    <DropdownSelector
-      {...props}
-      onChange={(value) => {
-        setSelected(value)
-      }}
-      value={selected}
-      label="label"
-    >
-      <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-      <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-      <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
-    </DropdownSelector>
-  )
+export const InvalidAssistiveText: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          onChange={setSelected}
+          label="Label"
+          invalid
+          assistiveText="assistiveText"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
+export const RequiredText: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          invalid
+          onChange={setSelected}
+          label="Label"
+          showLabel
+          required
+          requiredText="required"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
 }
 
-export const Basic: StoryObj<typeof DropdownSelector> = {
-  args: {
-    ...baseProps,
+export const SubLabel: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          value={selected}
+          invalid
+          onChange={setSelected}
+          label="Label"
+          showLabel
+          subLabel="SubLabel"
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
   },
-  render: (props) => (
-    <div style={{ width: 288 }}>
-      <PlaygroundDropdownSelector {...props} />
-    </div>
-  ),
 }
 
 export const LongNames: StoryObj<typeof DropdownSelector> = {
   render: function Render(args) {
-    const [selected, setSelected] = useState('10')
+    const [selected, setSelected] = useState('1')
     return (
       <div
         style={{
@@ -102,13 +219,13 @@ export const LongNames: StoryObj<typeof DropdownSelector> = {
           value={selected}
           label="label"
         >
-          <DropdownMenuItem value={'10'}>
+          <DropdownMenuItem value={'1'}>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
           </DropdownMenuItem>
-          <DropdownMenuItem value={'20'}>
+          <DropdownMenuItem value={'2'}>
             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </DropdownMenuItem>
-          <DropdownMenuItem value={'30'}>
+          <DropdownMenuItem value={'3'}>
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat.
           </DropdownMenuItem>
@@ -118,17 +235,11 @@ export const LongNames: StoryObj<typeof DropdownSelector> = {
   },
 }
 
-const DummyBox = styled.div`
-  border: solid 1px ${({ theme }) => theme.border.default.color};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 256px;
-`
-
 export const InModal: StoryObj<typeof DropdownSelector> = {
   render: function Render() {
     const [open, setOpen] = useState(true)
+    const [selected1, setSelected1] = useState('1')
+    const [selected2, setSelected2] = useState('2')
     return (
       <div
         style={{
@@ -149,14 +260,57 @@ export const InModal: StoryObj<typeof DropdownSelector> = {
           <ModalBody>
             <div
               style={{
-                padding: '16px',
+                padding: 16,
+                display: 'grid',
+                gap: 40,
               }}
             >
-              <DummyBox>256px</DummyBox>
-              <PlaygroundDropdownSelector />
-              <DummyBox>256px</DummyBox>
-              <PlaygroundDropdownSelector />
-              <DummyBox>256px</DummyBox>
+              <DropdownSelector
+                value={selected1}
+                onChange={setSelected1}
+                label="DropdownSelector1"
+                showLabel
+                required
+                requiredText="required"
+                placeholder="placeholder"
+                assistiveText="assistiveText"
+              >
+                <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+                <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+                <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+              </DropdownSelector>
+
+              <TextField
+                label="TextField"
+                showLabel
+                required
+                requiredText="required"
+                placeholder="placeholder"
+                assistiveText="assistiveText"
+              />
+              <TextArea
+                label="TextArea"
+                showLabel
+                required
+                requiredText="required"
+                placeholder="placeholder"
+                assistiveText="assistiveText"
+              />
+
+              <DropdownSelector
+                value={selected2}
+                onChange={setSelected2}
+                label="DropdownSelector2"
+                showLabel
+                required
+                requiredText="required"
+                placeholder="placeholder"
+                assistiveText="assistiveText"
+              >
+                <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+                <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+                <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+              </DropdownSelector>
             </div>
           </ModalBody>
         </Modal>
@@ -167,9 +321,19 @@ export const InModal: StoryObj<typeof DropdownSelector> = {
 
 export const InFormTag: StoryObj<typeof DropdownSelector> = {
   render: function Render(props) {
-    const [selected, setSelected] = useState('')
+    const [selected, setSelected] = useState('1')
     return (
-      <form style={{ width: 288 }}>
+      <form
+        style={{ width: 288, display: 'flex' }}
+        onSubmit={(e) => {
+          const target = e.target as HTMLFormElement
+          const select = target.elements.namedItem(
+            'exampleOption'
+          ) as HTMLSelectElement
+          alert(`selected value: Option ${select.value}`)
+          e.preventDefault()
+        }}
+      >
         <DropdownSelector
           {...props}
           onChange={(value) => {
@@ -177,20 +341,29 @@ export const InFormTag: StoryObj<typeof DropdownSelector> = {
           }}
           value={selected}
           label="label"
+          name="exampleOption"
         >
-          <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-          <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-          <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
         </DropdownSelector>
+        <Button
+          variant="Primary"
+          type="submit"
+          style={{
+            marginLeft: 16,
+          }}
+        >
+          submit
+        </Button>
       </form>
     )
   },
 }
 
 export const CustomChildren: StoryObj<typeof DropdownSelector> = {
-  args: { ...baseProps },
   render: function Render(props) {
-    const [selected, setSelected] = useState('10')
+    const [selected, setSelected] = useState('bold')
     return (
       <div style={{ width: 288 }}>
         <DropdownSelector
@@ -201,34 +374,23 @@ export const CustomChildren: StoryObj<typeof DropdownSelector> = {
           value={selected}
           label="label"
         >
-          <DropdownMenuItem value={'10'}>
+          <DropdownMenuItem value={'normal'}>Normal</DropdownMenuItem>
+          <DropdownMenuItem value={'bold'}>
             <div
               style={{
-                color: 'pink',
                 fontWeight: 'bold',
               }}
             >
-              Apple
+              Bold
             </div>
           </DropdownMenuItem>
-          <DropdownMenuItem value={'20'}>
+          <DropdownMenuItem value={'italic'}>
             <div
               style={{
-                color: 'yellowgreen',
                 fontStyle: 'italic',
               }}
             >
-              Banana
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem value={'30'}>
-            <div
-              style={{
-                color: 'orange',
-                fontSize: '24px',
-              }}
-            >
-              Orange
+              Italic
             </div>
           </DropdownMenuItem>
         </DropdownSelector>
@@ -237,10 +399,9 @@ export const CustomChildren: StoryObj<typeof DropdownSelector> = {
   },
 }
 
-export const SectionList: StoryObj<typeof DropdownSelector> = {
-  args: { ...baseProps },
+export const Section: StoryObj<typeof DropdownSelector> = {
   render: function Render(props) {
-    const [selected, setSelected] = useState('10')
+    const [selected, setSelected] = useState('banana')
     return (
       <div style={{ width: 288 }}>
         <DropdownSelector
@@ -252,15 +413,15 @@ export const SectionList: StoryObj<typeof DropdownSelector> = {
           label="label"
         >
           <MenuItemGroup text="fruits">
-            <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-            <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-            <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+            <DropdownMenuItem value={'apple'}>Apple</DropdownMenuItem>
+            <DropdownMenuItem value={'banana'}>Banana</DropdownMenuItem>
+            <DropdownMenuItem value={'orange'}>Orange</DropdownMenuItem>
           </MenuItemGroup>
           <Divider />
           <MenuItemGroup text="vehicle">
-            <DropdownMenuItem value={'40'}>bicycle</DropdownMenuItem>
-            <DropdownMenuItem value={'50'}>car</DropdownMenuItem>
-            <DropdownMenuItem value={'60'}>train</DropdownMenuItem>
+            <DropdownMenuItem value={'bicycle'}>bicycle</DropdownMenuItem>
+            <DropdownMenuItem value={'car'}>car</DropdownMenuItem>
+            <DropdownMenuItem value={'train'}>train</DropdownMenuItem>
           </MenuItemGroup>
         </DropdownSelector>
       </div>

package/src/components/DropdownSelector/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useRef } from 'react'
+import { ReactNode, useState, useRef, useMemo } from 'react'
 import styled, { css } from 'styled-components'
 import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
@@ -7,6 +7,8 @@ import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
 import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+import { getValuesRecursive } from './MenuList/internals/getValuesRecursive'
+import { useVisuallyHidden } from '@react-aria/visually-hidden'
 
 export type DropdownSelectorProps = {
   label: string
@@ -19,6 +21,10 @@ export type DropdownSelectorProps = {
   required?: boolean
   requiredText?: string
   subLabel?: ReactNode
+  /**
+   * the name of hidden `<select />`
+   */
+  name?: string
   children: MenuListChildren
   onChange: (value: string) => void
 }
@@ -30,6 +36,15 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
   const [isOpen, setIsOpen] = useState(false)
   const preview = findPreviewRecursive(props.children, props.value)
 
+  const isPlaceholder = useMemo(
+    () => props.placeholder !== undefined && preview === undefined,
+    [preview, props.placeholder]
+  )
+
+  const propsArray = getValuesRecursive(props.children)
+
+  const { visuallyHiddenProps } = useVisuallyHidden()
+
   return (
     <DropdownSelectorRoot aria-disabled={props.disabled}>
       {props.showLabel === true && (
@@ -40,6 +55,21 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
           subLabel={props.subLabel}
         />
       )}
+      <div {...visuallyHiddenProps} aria-hidden="true">
+        <select name={props.name} value={props.value} tabIndex={-1}>
+          {propsArray.map((itemProps) => {
+            return (
+              <option
+                key={itemProps.value}
+                value={itemProps.value}
+                disabled={itemProps.disabled}
+              >
+                {itemProps.value}
+              </option>
+            )
+          })}
+        </select>
+      </div>
       <DropdownButton
         invalid={props.invalid}
         disabled={props.disabled}
@@ -51,10 +81,8 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         type="button"
         $active={isOpen}
       >
-        <DropdownButtonText>
-          {props.placeholder !== undefined && preview === undefined
-            ? props.placeholder
-            : preview}
+        <DropdownButtonText $isText3={isPlaceholder}>
+          {isPlaceholder ? props.placeholder : preview}
         </DropdownButtonText>
         <DropdownButtonIcon name="16/Menu" />
       </DropdownButton>
@@ -151,12 +179,12 @@ const DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`
     `}
 `
 
-const DropdownButtonText = styled.span`
+const DropdownButtonText = styled.span<{ $isText3: boolean }>`
   text-align: left;
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-${(p) => (p.$isText3 ? 'text3' : 'text2')});
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx

@@ -7,6 +7,7 @@ export default {
   args: {
     once: false,
   },
+  tags: ['skip-test'],
 } as Meta<typeof LoadingSpinnerIcon>
 
 export const Icon: StoryObj<typeof LoadingSpinnerIcon> = {}

package/src/components/LoadingSpinner/index.story.tsx

@@ -10,6 +10,7 @@ export default {
     transparent: false,
     className: 'basic',
   },
+  tags: ['skip-test'],
 } as Meta<typeof LoadingSpinner>
 
 export const Default: StoryObj<typeof LoadingSpinner> = {}