@charcoal-ui/react 2.8.0 → 2.10.0

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, useCallback, useContext } from 'react'
+import React, {
+  ChangeEvent,
+  forwardRef,
+  memo,
+  useCallback,
+  useContext,
+} from 'react'
 import styled, { css } from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -11,71 +17,81 @@ export type MultiSelectProps = React.PropsWithChildren<{
   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,
+      forceChecked = false,
+      disabled = false,
+      onChange,
+      variant = 'default',
+      className,
+      children,
     },
-    [onChange, parentOnChange, value]
-  )
+    ref
+  ) {
+    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 })
+      },
+      [onChange, parentOnChange, value]
+    )
+
+    return (
+      <MultiSelectRoot aria-disabled={isDisabled} className={className}>
+        <MultiSelectInput
+          {...{
+            name,
+            value,
+            hasError,
+          }}
+          checked={isSelected}
+          disabled={isDisabled}
+          onChange={handleChange}
+          overlay={variant === 'overlay'}
+          aria-invalid={hasError}
+          ref={ref}
+        />
+        <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>
+    )
+  }
+)
 
-  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;

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

@@ -32,6 +32,7 @@ interface Props {
   childDisabled: boolean
   forceChecked: boolean
   readonly: boolean
+  className?: string
 }
 
 const Template: Story<Partial<Props>> = ({
@@ -41,6 +42,7 @@ const Template: Story<Partial<Props>> = ({
   parentDisabled,
   childDisabled,
   readonly,
+  className,
 }) => (
   <div
     css={css`
@@ -66,6 +68,7 @@ const Template: Story<Partial<Props>> = ({
             value={option}
             disabled={childDisabled}
             forceChecked={forceChecked}
+            className={className}
           >
             {name}({option})を選ぶ
           </Radio>

package/src/components/Radio/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react'
+import React, { forwardRef, memo, useCallback, useContext } from 'react'
 import styled from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -8,14 +8,13 @@ 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, forceChecked = false, disabled = false, children, className },
+  ref
+) {
   const {
     name,
     selected,
@@ -43,7 +42,7 @@ export default function Radio({
   )
 
   return (
-    <RadioRoot aria-disabled={isDisabled || isReadonly}>
+    <RadioRoot aria-disabled={isDisabled || isReadonly} className={className}>
       <RadioInput
         name={name}
         value={value}
@@ -51,11 +50,14 @@ export default function Radio({
         hasError={hasError}
         onChange={handleChange}
         disabled={isDisabled || isReadonly}
+        ref={ref}
       />
       {children != null && <RadioLabel>{children}</RadioLabel>}
     </RadioRoot>
   )
-}
+})
+
+export default memo(Radio)
 
 const RadioRoot = styled.label`
   display: grid;
@@ -82,6 +84,8 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) =>
       theme((o) => [
         o.borderRadius('oval'),

package/src/components/SegmentedControl/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useMemo, useRef } from 'react'
+import React, { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
 import { useRadioGroupState } from 'react-stately'
 import {
   AriaRadioGroupProps,
@@ -24,6 +24,7 @@ export type SegmentedControlProps = {
   readonly disabled?: boolean
   readonly readonly?: boolean
   readonly required?: boolean
+  readonly className?: string
 
   readonly value?: string
   readonly defaultValue?: string
@@ -54,7 +55,11 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     }, [props.data])
 
     return (
-      <SegmentedControlRoot ref={ref} {...radioGroupProps}>
+      <SegmentedControlRoot
+        ref={ref}
+        {...radioGroupProps}
+        className={props.className}
+      >
         <RadioProvider value={state}>
           {segmentedControlItems.map((item) => (
             <Segmented
@@ -76,13 +81,18 @@ export default memo(SegmentedControl)
 type RadioProps = {
   value: string
   disabled?: boolean
+  children?: ReactNode
 }
 
-const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
+const Segmented = (props: RadioProps) => {
   const state = useRadioContext()
   const ref = useRef<HTMLInputElement>(null)
   const ariaRadioProps = useMemo<AriaRadioProps>(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children,
+    }),
     [props]
   )
 
@@ -99,7 +109,7 @@ const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
     >
       <SegmentedInput {...inputProps} ref={ref} />
       <RadioLabel>
-        <SegmentedLabelInner>{children}</SegmentedLabelInner>
+        <SegmentedLabelInner>{props.children}</SegmentedLabelInner>
       </RadioLabel>
     </SegmentedRoot>
   )

package/src/components/Switch/index.tsx

@@ -1,10 +1,11 @@
 import { useSwitch } from '@react-aria/switch'
 import type { AriaSwitchProps } from '@react-types/switch'
-import React, { useRef, useMemo } from 'react'
+import React, { useMemo, memo, forwardRef } from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
 import { theme } from '../../styled'
 import { disabledSelector } from '@charcoal-ui/utils'
+import { useObjectRef } from '@react-aria/utils'
 
 export type SwitchProps = {
   name: string
@@ -23,37 +24,41 @@ export type SwitchProps = {
     }
 )
 
-export default function SwitchCheckbox(props: SwitchProps) {
-  const { disabled, className } = props
-
-  const ariaSwitchProps: AriaSwitchProps = useMemo(
-    () => ({
-      ...props,
-
-      // children がいない場合は aria-label をつけないといけない
-      'aria-label': 'children' in props ? undefined : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked,
-    }),
-    [props]
-  )
-
-  const state = useToggleState(ariaSwitchProps)
-  const ref = useRef<HTMLInputElement>(null)
-  const {
-    inputProps: { className: _className, type: _type, ...rest },
-  } = useSwitch(ariaSwitchProps, state, ref)
-
-  return (
-    <Label className={className} aria-disabled={disabled}>
-      <SwitchInput {...rest} ref={ref} />
-      {'children' in props ? (
-        // eslint-disable-next-line react/destructuring-assignment
-        <LabelInner>{props.children}</LabelInner>
-      ) : undefined}
-    </Label>
-  )
-}
+const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchProps>(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props
+
+    const ariaSwitchProps: AriaSwitchProps = useMemo(
+      () => ({
+        ...props,
+
+        // children がいない場合は aria-label をつけないといけない
+        'aria-label': 'children' in props ? undefined : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked,
+      }),
+      [props]
+    )
+
+    const state = useToggleState(ariaSwitchProps)
+    const ref = useObjectRef<HTMLInputElement>(external)
+    const {
+      inputProps: { className: _className, type: _type, ...rest },
+    } = useSwitch(ariaSwitchProps, state, ref)
+
+    return (
+      <Label className={className} aria-disabled={disabled}>
+        <SwitchInput {...rest} ref={ref} />
+        {'children' in props ? (
+          // eslint-disable-next-line react/destructuring-assignment
+          <LabelInner>{props.children}</LabelInner>
+        ) : undefined}
+      </Label>
+    )
+  }
+)
+
+export default memo(SwitchCheckbox)
 
 const Label = styled.label`
   display: inline-grid;

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

@@ -102,7 +102,7 @@ export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
 )
 
 const PrefixIconWrap = styled.div`
-  color: ${({ theme }) => theme.color.text4};
+  color: ${({ theme }) => theme.color.text3};
   margin-top: 2px;
   margin-right: 4px;
 `

package/src/components/TextField/index.tsx

@@ -349,6 +349,7 @@ const PrefixContainer = styled.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `
 
 const SuffixContainer = styled.span`