@charcoal-ui/react 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
@@ -12,7 +12,7 @@ export default {
         type: 'text',
       },
     },
-    ariaLabel: {
+    label: {
       control: {
         type: 'text',
       },
@@ -22,11 +22,6 @@ export default {
         type: 'boolean',
       },
     },
-    firstOptionForceChecked: {
-      control: {
-        type: 'boolean',
-      },
-    },
     disabled: {
       control: {
         type: 'boolean',
@@ -37,7 +32,7 @@ export default {
         type: 'boolean',
       },
     },
-    hasError: {
+    invalid: {
       control: {
         type: 'boolean',
       },
@@ -53,14 +48,14 @@ export default {
 
 type Props = {
   name: string
-  ariaLabel: string
+  label: string
   selected: boolean
-  firstOptionForceChecked: boolean
   onChange: (selected: string[]) => void
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
   variant?: 'default' | 'overlay'
+  className?: string
 }
 
 const StyledMultiSelectGroup = styled(MultiSelectGroup)`
@@ -71,34 +66,33 @@ const StyledMultiSelectGroup = styled(MultiSelectGroup)`
 
 const Template: Story<Props> = ({
   name,
-  ariaLabel,
+  label,
   selected,
-  firstOptionForceChecked,
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   variant,
+  className,
 }) => {
   return (
     <StyledMultiSelectGroup
       {...{
         name,
-        ariaLabel,
+        label,
         onChange,
         disabled,
         readonly,
-        hasError,
+        invalid,
       }}
-      className={''}
       selected={selected ? ['選択肢1', '選択肢3'] : []}
     >
       {[1, 2, 3, 4].map((idx) => (
         <MultiSelect
           value={`選択肢${idx}`}
-          forceChecked={firstOptionForceChecked && idx === 1}
           variant={variant}
           key={idx}
+          className={className}
         >
           選択肢{idx}
         </MultiSelect>
@@ -110,12 +104,11 @@ const Template: Story<Props> = ({
 export const Default = Template.bind({})
 Default.args = {
   name: '',
-  ariaLabel: '',
+  label: '',
   selected: true,
-  firstOptionForceChecked: false,
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   variant: 'default',
   // eslint-disable-next-line no-console
   onChange: (selected) => console.log(selected),
@@ -123,14 +116,15 @@ Default.args = {
 
 type PlaygroundProps = {
   name: string
-  ariaLabel: string
+  label: string
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
+  className?: string
   variant?: 'default' | 'overlay'
 }
 
-export const Playground: Story<PlaygroundProps> = (props) => {
+export const Playground: Story<PlaygroundProps> = ({ className, ...props }) => {
   const [selected, setSelected] = useState<string[]>([])
 
   return (
@@ -140,7 +134,12 @@ export const Playground: Story<PlaygroundProps> = (props) => {
       onChange={setSelected}
     >
       {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect value={`選択肢${idx}`} variant={props.variant} key={idx}>
+        <MultiSelect
+          value={`選択肢${idx}`}
+          variant={props.variant}
+          key={idx}
+          className={className}
+        >
           選択肢{idx}
         </MultiSelect>
       ))}
@@ -149,9 +148,9 @@ export const Playground: Story<PlaygroundProps> = (props) => {
 }
 Playground.args = {
   name: 'defaultName',
-  ariaLabel: '',
+  label: '',
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   variant: 'default',
 }

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

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import { default as MultiSelect, MultiSelectGroup } from '.'
 import { light } from '@charcoal-ui/theme'
@@ -184,7 +183,7 @@ describe('MultiSelect', () => {
     let allOptions: HTMLInputElement[]
 
     beforeEach(() => {
-      render(<TestComponent selected={['option1']} hasError={true} />)
+      render(<TestComponent selected={['option1']} invalid={true} />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -199,20 +198,6 @@ describe('MultiSelect', () => {
     })
   })
 
-  describe('option1 is force checked', () => {
-    let option1: HTMLInputElement
-
-    beforeEach(() => {
-      render(<TestComponent selected={[]} firstOptionForceChecked={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-    })
-
-    it('option1 is force checked', () => {
-      expect(option1.checked).toBeTruthy()
-    })
-  })
-
   describe('option1 is disabled', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
@@ -239,8 +224,7 @@ const TestComponent = ({
   childOnChange,
   parentDisabled = false,
   readonly = false,
-  hasError = false,
-  firstOptionForceChecked = false,
+  invalid = false,
   firstOptionDisabled = false,
 }: {
   selected: string[]
@@ -248,23 +232,21 @@ const TestComponent = ({
   childOnChange?: (payload: { value: string; selected: boolean }) => void
   parentDisabled?: boolean
   readonly?: boolean
-  hasError?: boolean
-  firstOptionForceChecked?: boolean
+  invalid?: boolean
   firstOptionDisabled?: boolean
 }) => {
   return (
     <ThemeProvider theme={light}>
       <MultiSelectGroup
         name="defaultName"
-        ariaLabel="defaultAriaLabel"
+        label="defaultAriaLabel"
         disabled={parentDisabled}
         onChange={parentOnChange}
-        {...{ selected, readonly, hasError }}
+        {...{ selected, readonly, invalid }}
       >
         <MultiSelect
           value="option1"
           disabled={firstOptionDisabled}
-          forceChecked={firstOptionForceChecked}
           onChange={childOnChange}
         >
           Option 1

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useCallback, useContext } from 'react'
+import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -8,74 +9,82 @@ import { MultiSelectGroupContext } from './context'
 
 export type MultiSelectProps = React.PropsWithChildren<{
   value: string
-  forceChecked?: boolean
   disabled?: boolean
   variant?: 'default' | 'overlay'
+  className?: string
   onChange?: (payload: { value: string; selected: boolean }) => void
 }>
 
-export default function MultiSelect({
-  value,
-  forceChecked = false,
-  disabled = false,
-  onChange,
-  variant = 'default',
-  children,
-}: MultiSelectProps) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    hasError,
-    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) || forceChecked
-  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 })
+const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
+  function MultiSelectInner(
+    {
+      value,
+      disabled = false,
+      onChange,
+      variant = 'default',
+      className,
+      children,
     },
-    [onChange, parentOnChange, value]
-  )
+    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]
+    )
+
+    return (
+      <MultiSelectRoot aria-disabled={isDisabled} className={className}>
+        <MultiSelectInput
+          {...{
+            name,
+            value,
+            invalid,
+          }}
+          checked={isSelected}
+          disabled={isDisabled}
+          onChange={handleChange}
+          overlay={variant === 'overlay'}
+          aria-invalid={invalid}
+          ref={ref}
+        />
+        <MultiSelectInputOverlay
+          overlay={variant === 'overlay'}
+          invalid={invalid}
+          aria-hidden={true}
+        >
+          <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+        </MultiSelectInputOverlay>
+        {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}
+      </MultiSelectRoot>
+    )
+  }
+)
 
-  return (
-    <MultiSelectRoot aria-disabled={isDisabled}>
-      <MultiSelectInput
-        {...{
-          name,
-          value,
-          hasError,
-        }}
-        checked={isSelected}
-        disabled={isDisabled}
-        onChange={handleChange}
-        overlay={variant === 'overlay'}
-        aria-invalid={hasError}
-      />
-      <MultiSelectInputOverlay
-        overlay={variant === 'overlay'}
-        hasError={hasError}
-        aria-hidden={true}
-      >
-        <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
-      </MultiSelectInputOverlay>
-      {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}
-    </MultiSelectRoot>
-  )
-}
+export default memo(MultiSelect)
 
 const MultiSelectRoot = styled.label`
   display: grid;
@@ -97,7 +106,7 @@ const MultiSelectLabel = styled.div`
 `
 
 const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
-  hasError: boolean
+  invalid: boolean
   overlay: boolean
 }>`
   &[type='checkbox'] {
@@ -111,11 +120,11 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
       ${theme((o) => o.bg.brand.hover.press)}
     }
 
-    ${({ hasError, overlay }) =>
+    ${({ invalid, overlay }) =>
       theme((o) => [
         o.bg.text3.hover.press,
         o.borderRadius('oval'),
-        hasError && !overlay && o.outline.assertive,
+        invalid && !overlay && o.outline.assertive,
         overlay && o.bg.surface4,
       ])};
   }
@@ -123,7 +132,7 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
 
 const MultiSelectInputOverlay = styled.div<{
   overlay: boolean
-  hasError: boolean
+  invalid: boolean
 }>`
   position: absolute;
   top: -2px;
@@ -133,13 +142,13 @@ const MultiSelectInputOverlay = styled.div<{
   align-items: center;
   justify-content: center;
 
-  ${({ hasError, overlay }) =>
+  ${({ invalid, overlay }) =>
     theme((o) => [
       o.width.px(24),
       o.height.px(24),
       o.borderRadius('oval'),
       o.font.text5,
-      hasError && overlay && o.outline.assertive,
+      invalid && overlay && o.outline.assertive,
     ])}
 
   ${({ overlay }) =>
@@ -154,23 +163,23 @@ const MultiSelectInputOverlay = styled.div<{
 export type MultiSelectGroupProps = React.PropsWithChildren<{
   className?: string
   name: string
-  ariaLabel: string
+  label: string
   selected: string[]
   onChange: (selected: string[]) => void
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
 }>
 
 export function MultiSelectGroup({
   className,
   name,
-  ariaLabel,
+  label,
   selected,
   onChange,
   disabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   children,
 }: MultiSelectGroupProps) {
   const handleChange = useCallback(
@@ -197,15 +206,11 @@ export function MultiSelectGroup({
         selected: Array.from(new Set(selected)),
         disabled,
         readonly,
-        hasError,
+        invalid,
         onChange: handleChange,
       }}
     >
-      <div
-        className={className}
-        aria-label={ariaLabel}
-        data-testid="SelectGroup"
-      >
+      <div className={className} aria-label={label} data-testid="SelectGroup">
         {children}
       </div>
     </MultiSelectGroupContext.Provider>

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import { css } from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Radio, { RadioGroup } from '.'
@@ -17,30 +16,29 @@ export default {
     },
   },
   args: {
-    hasError: false,
+    invalid: false,
     parentDisabled: false,
     childDisabled: false,
-    forceChecked: false,
     readonly: false,
   },
 }
 
 interface Props {
   value?: string
-  hasError: boolean
+  invalid: boolean
   parentDisabled: boolean
   childDisabled: boolean
-  forceChecked: boolean
   readonly: boolean
+  className?: string
 }
 
 const Template: Story<Partial<Props>> = ({
   value,
-  forceChecked,
-  hasError,
+  invalid,
   parentDisabled,
   childDisabled,
   readonly,
+  className,
 }) => (
   <div
     css={css`
@@ -58,14 +56,14 @@ const Template: Story<Partial<Props>> = ({
         onChange={action('onChange')}
         disabled={parentDisabled}
         readonly={readonly}
-        hasError={hasError}
+        invalid={invalid}
       >
         {options.map((option) => (
           <Radio
             key={option}
             value={option}
             disabled={childDisabled}
-            forceChecked={forceChecked}
+            className={className}
           >
             {name}({option})を選ぶ
           </Radio>

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

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import Radio, { RadioGroup } from '.'
 import { light } from '@charcoal-ui/theme'
@@ -112,7 +111,7 @@ function TestComponent({
   onChange = jest.fn(),
   radioGroupDisabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   option1Disabled = false,
   option2Disabled = false,
 }: {
@@ -120,7 +119,7 @@ function TestComponent({
   onChange?: () => void
   radioGroupDisabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
   option1Disabled?: boolean
   option2Disabled?: boolean
 }) {
@@ -133,7 +132,7 @@ function TestComponent({
         onChange={onChange}
         disabled={radioGroupDisabled}
         readonly={readonly}
-        hasError={hasError}
+        invalid={invalid}
       >
         <Radio value="option1" disabled={option1Disabled}>
           option1を選ぶ

package/src/components/Radio/index.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext } from 'react'
+import { memo, forwardRef, useCallback, useContext } from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -6,22 +7,20 @@ import { px } from '@charcoal-ui/utils'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
-  forceChecked?: boolean
   disabled?: boolean
+  className?: string
 }>
 
-export default function Radio({
-  value,
-  forceChecked = false,
-  disabled = false,
-  children,
-}: RadioProps) {
+const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
+  { value, disabled = false, children, className },
+  ref
+) {
   const {
     name,
     selected,
     disabled: isParentDisabled,
     readonly,
-    hasError,
+    invalid,
     onChange,
   } = useContext(RadioGroupContext)
 
@@ -43,19 +42,22 @@ export default function Radio({
   )
 
   return (
-    <RadioRoot aria-disabled={isDisabled || isReadonly}>
+    <RadioRoot aria-disabled={isDisabled || isReadonly} className={className}>
       <RadioInput
         name={name}
         value={value}
-        checked={forceChecked || isSelected}
-        hasError={hasError}
+        checked={isSelected}
+        invalid={invalid}
         onChange={handleChange}
         disabled={isDisabled || isReadonly}
+        ref={ref}
       />
       {children != null && <RadioLabel>{children}</RadioLabel>}
     </RadioRoot>
   )
-}
+})
+
+export default memo(Radio)
 
 const RadioRoot = styled.label`
   display: grid;
@@ -68,7 +70,7 @@ const RadioRoot = styled.label`
 `
 
 export const RadioInput = styled.input.attrs({ type: 'radio' })<{
-  hasError?: boolean
+  invalid?: boolean
 }>`
   /** Make prior to browser default style */
   &[type='radio'] {
@@ -81,14 +83,13 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
 
     width: 20px;
     height: 20px;
-
     cursor: pointer;
 
-    ${({ hasError = false }) =>
+    ${({ invalid = false }) =>
       theme((o) => [
         o.borderRadius('oval'),
         o.bg.surface1.hover.press,
-        hasError && o.outline.assertive,
+        invalid && o.outline.assertive,
       ])};
 
     &:not(:checked) {
@@ -130,7 +131,7 @@ export type RadioGroupProps = React.PropsWithChildren<{
   onChange(next: string): void
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
 }>
 
 // TODO: use (or polyfill) flex gap
@@ -145,7 +146,7 @@ interface RadioGroupContext {
   selected?: string
   disabled: boolean
   readonly: boolean
-  hasError: boolean
+  invalid: boolean
   onChange: (next: string) => void
 }
 
@@ -154,7 +155,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
   selected: undefined,
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   onChange() {
     throw new Error(
       'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'
@@ -170,7 +171,7 @@ export function RadioGroup({
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   children,
 }: RadioGroupProps) {
   const handleChange = useCallback(
@@ -187,7 +188,7 @@ export function RadioGroup({
         selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
-        hasError: hasError ?? false,
+        invalid: invalid ?? false,
         onChange: handleChange,
       }}
     >
@@ -195,7 +196,7 @@ export function RadioGroup({
         role="radiogroup"
         aria-orientation="vertical"
         aria-label={label}
-        aria-invalid={hasError}
+        aria-invalid={invalid}
         className={className}
       >
         {children}

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react'
+import { createContext, useContext } from 'react'
+import * as React from 'react'
 import { RadioGroupState } from 'react-stately'
 
 const RadioContext = createContext<RadioGroupState | null>(null)