@charcoal-ui/react 4.3.0 → 4.4.1

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

@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import {
+  MultiSelectGroup,
+  default as MultiSelect,
+  MultiSelectGroupProps,
+} from '.'
+import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+const StyledMultiSelectGroup = (props: MultiSelectGroupProps) => {
+  return (
+    <MultiSelectGroup
+      style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '8px' }}
+      {...props}
+    />
+  )
+}
+
+export default {
+  title: 'react/MultiSelect',
+  component: MultiSelect,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'inline-radio',
+        options: ['default', 'overlay'],
+      },
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+} as Meta<typeof MultiSelect>
+
+export const Basic: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={['選択肢1', '選択肢3']}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+}
+
+export const Invalid: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+        invalid
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+}
+
+export const Overlay: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+  args: {
+    variant: 'overlay',
+  },
+}
+
+export const Playground: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const [selected, setSelected] = useState<string[]>([])
+
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={setSelected}
+        selected={selected}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+}

package/src/components/MultiSelect/index.test.tsx

@@ -0,0 +1,255 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { default as MultiSelect, MultiSelectGroup } from '.'
+
+describe('MultiSelect', () => {
+  describe('in development mode', () => {
+    beforeEach(() => {
+      process.env.NODE_ENV = 'development'
+    })
+
+    describe('when `<MultiSelect />` is used without `<MultiSelectGroup />`', () => {
+      beforeEach(() => {
+        // eslint-disable-next-line no-console
+        console.error = vi.fn()
+
+        render(<MultiSelect value="a" />)
+      })
+
+      it('emits error message', () => {
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Perhaps you forgot to wrap with <MultiSelectGroup>/u
+          )
+        )
+      })
+    })
+  })
+
+  describe('none of the options selected', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+    let option3: HTMLInputElement
+    let allOptions: HTMLInputElement[]
+    let parent: HTMLDivElement
+    const childOnChange = vi.fn()
+    const parentOnChange = vi.fn()
+
+    beforeEach(() => {
+      render(
+        <TestComponent
+          selected={[]}
+          childOnChange={childOnChange}
+          parentOnChange={parentOnChange}
+        />
+      )
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+      option3 = screen.getByDisplayValue('option3')
+      allOptions = [option1, option2, option3]
+      parent = screen.getByTestId('SelectGroup')
+    })
+
+    it('options have correct name', () => {
+      allOptions.forEach((element) => expect(element.name).toBe('defaultName'))
+    })
+
+    it('parent have correct aria-label', () => {
+      expect(parent.getAttribute('aria-label')).toBe('defaultAriaLabel')
+    })
+
+    it('none of the options are selected', () => {
+      allOptions.forEach((element) => expect(element.checked).toBeFalsy())
+    })
+
+    describe('selecting option1', () => {
+      it('childOnChange is called', () => {
+        fireEvent.click(option1)
+        expect(childOnChange).toHaveBeenCalledWith({
+          value: 'option1',
+          selected: true,
+        })
+      })
+
+      it('parentOnChange is called', () => {
+        fireEvent.click(option1)
+        expect(parentOnChange).toHaveBeenCalledWith(['option1'])
+      })
+    })
+  })
+
+  describe('option2 is selected', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+    let option3: HTMLInputElement
+    const childOnChange = vi.fn()
+    const parentOnChange = vi.fn()
+
+    beforeEach(() => {
+      render(
+        <TestComponent
+          selected={['option2']}
+          childOnChange={childOnChange}
+          parentOnChange={parentOnChange}
+        />
+      )
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+      option3 = screen.getByDisplayValue('option3')
+    })
+
+    it('only option2 is selected', () => {
+      expect(option2.checked).toBeTruthy()
+      ;[option1, option3].forEach((element) =>
+        expect(element.checked).toBeFalsy()
+      )
+    })
+
+    describe('selecting option1', () => {
+      it('parentOnChange is called', () => {
+        fireEvent.click(option1)
+        expect(parentOnChange).toHaveBeenCalledWith(['option2', 'option1'])
+      })
+    })
+
+    describe('de-selecting option2', () => {
+      it('childOnChange is called', () => {
+        fireEvent.click(option2)
+        expect(childOnChange).toHaveBeenCalledWith({
+          value: 'option2',
+          selected: false,
+        })
+      })
+
+      it('parentOnChange is called', () => {
+        fireEvent.click(option2)
+        expect(parentOnChange).toHaveBeenCalledWith([])
+      })
+    })
+  })
+
+  describe('the group is disabled', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+    let option3: HTMLInputElement
+    let allOptions: HTMLInputElement[]
+
+    beforeEach(() => {
+      render(<TestComponent selected={['option1']} parentDisabled={true} />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+      option3 = screen.getByDisplayValue('option3')
+      allOptions = [option1, option2, option3]
+    })
+
+    it('all the options are disabled', () => {
+      allOptions.forEach((element) => expect(element.disabled).toBeTruthy())
+    })
+  })
+
+  describe('the group is readonly', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+    let option3: HTMLInputElement
+    let allOptions: HTMLInputElement[]
+
+    beforeEach(() => {
+      render(<TestComponent selected={['option1']} readonly={true} />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+      option3 = screen.getByDisplayValue('option3')
+      allOptions = [option1, option2, option3]
+    })
+
+    it('all the options are disabled', () => {
+      allOptions.forEach((element) => expect(element.disabled).toBeTruthy())
+    })
+  })
+
+  describe('the group has error', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+    let option3: HTMLInputElement
+    let allOptions: HTMLInputElement[]
+
+    beforeEach(() => {
+      render(<TestComponent selected={['option1']} invalid={true} />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+      option3 = screen.getByDisplayValue('option3')
+      allOptions = [option1, option2, option3]
+    })
+
+    it('all the options have `aria-invalid="true"`', () => {
+      allOptions.forEach((element) =>
+        expect(element.getAttribute('aria-invalid')).toBeTruthy()
+      )
+    })
+  })
+
+  describe('option1 is disabled', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+
+    beforeEach(() => {
+      render(<TestComponent selected={[]} firstOptionDisabled={true} />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+    })
+
+    it('only option1 is disabled', () => {
+      expect(option1.disabled).toBeTruthy()
+      expect(option2.disabled).toBeFalsy()
+    })
+  })
+})
+
+const TestComponent = ({
+  selected,
+  parentOnChange = () => {
+    return
+  },
+  childOnChange,
+  parentDisabled = false,
+  readonly = false,
+  invalid = false,
+  firstOptionDisabled = false,
+}: {
+  selected: string[]
+  parentOnChange?: (selected: string[]) => void
+  childOnChange?: (payload: { value: string; selected: boolean }) => void
+  parentDisabled?: boolean
+  readonly?: boolean
+  invalid?: boolean
+  firstOptionDisabled?: boolean
+}) => {
+  return (
+    <MultiSelectGroup
+      name="defaultName"
+      label="defaultAriaLabel"
+      disabled={parentDisabled}
+      onChange={parentOnChange}
+      {...{ selected, readonly, invalid }}
+    >
+      <MultiSelect
+        value="option1"
+        disabled={firstOptionDisabled}
+        onChange={childOnChange}
+      >
+        Option 1
+      </MultiSelect>
+      <MultiSelect value="option2" onChange={childOnChange}>
+        Option 2
+      </MultiSelect>
+      <MultiSelect value="option3" onChange={childOnChange}>
+        Option 3
+      </MultiSelect>
+    </MultiSelectGroup>
+  )
+}

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,153 @@
+import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'
+import * as React from 'react'
+import warning from 'warning'
+
+import { MultiSelectGroupContext } from './context'
+import Icon from '../Icon'
+import { useClassNames } from '../../_lib/useClassNames'
+import './index.css'
+
+export type MultiSelectProps = React.PropsWithChildren<{
+  value: string
+  disabled?: boolean
+  variant?: 'default' | 'overlay'
+  className?: string
+  onChange?: (payload: { value: string; selected: boolean }) => void
+}>
+
+const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
+  function MultiSelectInner(
+    {
+      value,
+      disabled = false,
+      onChange,
+      variant = 'default',
+      className,
+      children,
+    },
+    ref
+  ) {
+    const {
+      name,
+      selected,
+      disabled: parentDisabled,
+      readonly,
+      invalid,
+      onChange: parentOnChange,
+    } = useContext(MultiSelectGroupContext)
+
+    warning(
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      name !== undefined,
+      `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+    )
+
+    const isSelected = selected.includes(value)
+    const isDisabled = disabled || parentDisabled || readonly
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        if (!(event.currentTarget instanceof HTMLInputElement)) {
+          return
+        }
+        if (onChange) onChange({ value, selected: event.currentTarget.checked })
+        parentOnChange({ value, selected: event.currentTarget.checked })
+      },
+      [onChange, parentOnChange, value]
+    )
+    const classNames = useClassNames('charcoal-multi-select', className)
+    return (
+      <label aria-disabled={isDisabled} className={classNames}>
+        <input
+          className="charcoal-multi-select-input"
+          name={name}
+          value={value}
+          type="checkbox"
+          checked={isSelected}
+          disabled={isDisabled}
+          onChange={handleChange}
+          data-overlay={variant === 'overlay'}
+          aria-invalid={invalid}
+          ref={ref}
+        />
+        <div
+          className="charcoal-multi-select-overlay"
+          data-overlay={variant === 'overlay'}
+          aria-invalid={invalid}
+          aria-hidden={true}
+        >
+          <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+        </div>
+        {Boolean(children) && (
+          <div className="charcoal-multi-select-label">{children}</div>
+        )}
+      </label>
+    )
+  }
+)
+
+export default memo(MultiSelect)
+
+export type MultiSelectGroupProps = React.PropsWithChildren<{
+  className?: string
+  style?: React.CSSProperties
+  name: string
+  label: string
+  selected: string[]
+  onChange: (selected: string[]) => void
+  disabled?: boolean
+  readonly?: boolean
+  invalid?: boolean
+}>
+
+export function MultiSelectGroup({
+  className,
+  style,
+  name,
+  label,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  invalid = false,
+  children,
+}: MultiSelectGroupProps) {
+  const handleChange = useCallback(
+    (payload: { value: string; selected: boolean }) => {
+      const index = selected.indexOf(payload.value)
+
+      if (payload.selected) {
+        if (index < 0) {
+          onChange([...selected, payload.value])
+        }
+      } else {
+        if (index >= 0) {
+          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])
+        }
+      }
+    },
+    [onChange, selected]
+  )
+
+  return (
+    <MultiSelectGroupContext.Provider
+      value={{
+        name,
+        selected: Array.from(new Set(selected)),
+        disabled,
+        readonly,
+        invalid,
+        onChange: handleChange,
+      }}
+    >
+      <div
+        className={className}
+        style={style}
+        aria-label={label}
+        data-testid="SelectGroup"
+      >
+        {children}
+      </div>
+    </MultiSelectGroupContext.Provider>
+  )
+}