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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,10 +49,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.0.0-beta.3",
-    "@charcoal-ui/styled": "^3.0.0-beta.3",
-    "@charcoal-ui/theme": "^3.0.0-beta.3",
-    "@charcoal-ui/utils": "^3.0.0-beta.3",
+    "@charcoal-ui/icons": "^3.0.0-beta.4",
+    "@charcoal-ui/styled": "^3.0.0-beta.4",
+    "@charcoal-ui/theme": "^3.0.0-beta.4",
+    "@charcoal-ui/utils": "^3.0.0-beta.4",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "3d302a3e0becea0868d0f020c233ba68fa1d0974"
+  "gitHead": "47ec80abac2b87e78417a06db4943b3cb0408b78"
 }

package/src/_lib/compat.ts

@@ -10,3 +10,22 @@ import * as React from 'react'
  * `Type alias 'Interpolation' circularly references itself. ts(2456)`
  */
 export type Story<P> = React.ComponentType<P> & { args?: P }
+
+/**
+ * react-ariaの`useTextField()`は、<textarea>をサポートするにも関わらず、
+ * `React.KeyboardEvent<HTMLInputElement>`しか想定していないイベントハンドラがいくつかある
+ * ↓ が直るまで、以下のイベントハンドラの型は信用しない（本当は`Element`ではなく`HTMLTextAreaElement`とかにしたい）
+ *
+ * @see https://github.com/adobe/react-spectrum/issues/4662
+ */
+export interface ReactAreaUseTextFieldCompat<E = Element> {
+  readonly onCopy?: React.ClipboardEventHandler<E>
+  readonly onPaste?: React.ClipboardEventHandler<E>
+  readonly onCut?: React.ClipboardEventHandler<E>
+  readonly onCompositionStart?: React.CompositionEventHandler<E>
+  readonly onCompositionEnd?: React.CompositionEventHandler<E>
+  readonly onCompositionUpdate?: React.CompositionEventHandler<E>
+  readonly onSelect?: React.ReactEventHandler<E>
+  readonly onBeforeInput?: React.FormEventHandler<E>
+  readonly onInput?: React.FormEventHandler<E>
+}

package/src/_lib/index.ts

@@ -33,3 +33,26 @@ export function unreachable(value?: never): never {
       : `unreachable (${JSON.stringify(value)})`
   )
 }
+
+/**
+ * 複数のrefをマージする。
+ *
+ * forwardRefで受け取ったrefと、コンポーネント内で定義したrefを同じ要素につけたいケースなどで使う
+ */
+export function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref !== null) {
+        ;(ref as React.MutableRefObject<T | null>).current = value
+      }
+    }
+  }
+}
+
+export function countCodePointsInString(string: string) {
+  // [...string] とするとproduction buildで動かなくなる
+  // cf. https://twitter.com/f_subal/status/1497214727511891972
+  return Array.from(string).length
+}

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

@@ -12,6 +12,7 @@ type Props = {
   defaultChecked: boolean
   disabled: boolean
   readonly: boolean
+  className?: string
 }
 
 export const Labelled: Story<Props> = (props) => {

package/src/components/Checkbox/index.tsx

@@ -21,6 +21,7 @@ type CheckboxLabelProps =
 export type CheckboxProps = CheckboxLabelProps & {
   readonly id?: string
   readonly name?: string
+  readonly className?: string
 
   readonly checked?: boolean
   readonly defaultChecked?: boolean
@@ -53,7 +54,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
 
     return (
-      <InputRoot aria-disabled={isDisabled}>
+      <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
           <CheckboxInput type="checkbox" {...inputProps} />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import MenuItem, { MenuItemProps } from './MenuItem'
 import { MenuListContext } from './MenuList/MenuListContext'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { theme } from '../../styled'
 import Icon from '../Icon'
 

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Story } from '../../../_lib/compat'
 import Icon from '../../Icon'
 import Switch from '../../Switch'

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import styled from 'styled-components'
 import { theme } from '../../../styled'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import ListItem, { CustomJSXElement, ListItemProps } from '../ListItem'
 import { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'
 

package/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
 import { handleFocusByKeyBoard } from './handleFocusByKeyBoard'
 import { MenuListContext } from '../../MenuList/MenuListContext'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import MenuItem from '../MenuItem'
 import { Divider } from '../Divider'

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { action } from '@storybook/addon-actions'
 import { Story } from '../../../_lib/compat'
 import MenuList, { MenuListProps } from '.'

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import styled from 'styled-components'
 import { MenuListContext } from './MenuListContext'
 import { getValuesRecursive } from './internals/getValuesRecursive'

package/src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import MenuItem from '../../MenuItem'
 import { MenuListChildren } from '..'
 import MenuItemGroup from '../../MenuItemGroup'

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

@@ -1,4 +1,4 @@
-import React, { useRef, CSSProperties, useState } from 'react'
+import { useRef, CSSProperties, useState } from 'react'
 import { Story } from '../../../_lib/compat'
 import Popover, { PopoverProps } from '.'
 import Button from '../../Button'

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

@@ -1,4 +1,4 @@
-import React, { RefObject, useRef } from 'react'
+import { RefObject, useRef } from 'react'
 import { ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'

package/src/components/DropdownSelector/index.tsx

@@ -56,22 +56,24 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         </DropdownButtonText>
         <DropdownButtonIcon name="16/Menu" />
       </DropdownButton>
-      <DropdownPopover
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        triggerRef={triggerRef}
-        value={props.value}
-      >
-        <MenuList
+      {isOpen && (
+        <DropdownPopover
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          triggerRef={triggerRef}
           value={props.value}
-          onChange={(v) => {
-            props.onChange(v)
-            setIsOpen(false)
-          }}
         >
-          {props.children}
-        </MenuList>
-      </DropdownPopover>
+          <MenuList
+            value={props.value}
+            onChange={(v) => {
+              props.onChange(v)
+              setIsOpen(false)
+            }}
+          >
+            {props.children}
+          </MenuList>
+        </DropdownPopover>
+      )}
       {props.assistiveText !== undefined && (
         <AssertiveText invalid={props.invalid}>
           {props.assistiveText}

package/src/components/DropdownSelector/utils/findPreviewRecursive.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
+import * as React from 'react'
 
 /**
  * DropdownSelectorの選択中の要素をレンダリングするため、

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

@@ -21,9 +21,15 @@ export function Basic() {
   const size = number('size', 48)
   const padding = number('padding', 16)
   const transparent = boolean('transparent', false)
+  const className = text('className', 'basic')
 
   return (
-    <LoadingSpinner size={size} padding={padding} transparent={transparent} />
+    <LoadingSpinner
+      size={size}
+      padding={padding}
+      transparent={transparent}
+      className={className}
+    />
   )
 }
 

package/src/components/LoadingSpinner/index.tsx

@@ -1,19 +1,35 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useRef, memo } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { theme } from '../../styled'
 
-export default function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false,
-}) {
-  return (
-    <LoadingSpinnerRoot size={size} padding={padding} transparent={transparent}>
-      <LoadingSpinnerIcon />
-    </LoadingSpinnerRoot>
-  )
+export type LoadingSpinnerProps = {
+  readonly size?: number
+  readonly padding?: number
+  readonly transparent?: boolean
+  readonly className?: string
 }
 
+const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
+  function LoadingSpinnerInner(
+    { size = 48, padding = 16, transparent = false, className },
+    ref
+  ) {
+    return (
+      <LoadingSpinnerRoot
+        size={size}
+        padding={padding}
+        transparent={transparent}
+        className={className}
+        ref={ref}
+      >
+        <LoadingSpinnerIcon />
+      </LoadingSpinnerRoot>
+    )
+  }
+)
+
+export default memo(LoadingSpinner)
+
 const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   size: number
   padding: number

package/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react'
+import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import {
   AriaModalOverlayProps,
@@ -18,6 +18,7 @@ import { useMedia } from '@charcoal-ui/styled'
 import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
+import { useObjectRef } from '@react-aria/utils'
 
 type BottomSheet = boolean | 'full'
 type Size = 'S' | 'M' | 'L'
@@ -31,6 +32,7 @@ export type ModalProps = AriaModalOverlayProps &
     bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
+    className?: string
 
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
@@ -56,31 +58,32 @@ const DEFAULT_Z_INDEX = 10
  *
  * <OverlayProvider>
  *   <App>
- *     <Modal isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+ *     <Modal title="Title" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
  *       <ModalHeader />
- *       <ModalBody>...</ModalBody>
- *       <ModalButtons>...</ModalButtons>
+ *       <ModalBody>
+ *         ...
+ *         <ModalButtons>...</ModalButtons>
+ *       </ModalBody>
  *     </Modal>
  *   </App>
  * </OverlayProvider>
  * ```
  */
-export default function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}: ModalProps) {
+const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
+  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },
+  external
+) {
   const {
     title,
     size = 'M',
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false,
   } = props
 
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useObjectRef<HTMLDivElement>(external)
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
   const { modalProps } = useModalOverlay(
@@ -146,6 +149,7 @@ export default function Modal({
                   style={transitionEnabled ? { transform } : {}}
                   size={size}
                   bottomSheet={bottomSheet}
+                  className={className}
                 >
                   <ModalContext.Provider
                     value={{ titleProps, title, close: onClose, showDismiss }}
@@ -166,7 +170,9 @@ export default function Modal({
         </Overlay>
       )
   )
-}
+})
+
+export default memo(Modal)
 
 const ModalContext = React.createContext<{
   titleProps: React.HTMLAttributes<HTMLElement>

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

@@ -55,6 +55,7 @@ type Props = {
   readonly?: boolean
   invalid?: boolean
   variant?: 'default' | 'overlay'
+  className?: string
 }
 
 const StyledMultiSelectGroup = styled(MultiSelectGroup)`
@@ -72,6 +73,7 @@ const Template: Story<Props> = ({
   readonly,
   invalid,
   variant,
+  className,
 }) => {
   return (
     <StyledMultiSelectGroup
@@ -83,11 +85,15 @@ const Template: Story<Props> = ({
         readonly,
         invalid,
       }}
-      className={''}
       selected={selected ? ['選択肢1', '選択肢3'] : []}
     >
       {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect value={`選択肢${idx}`} variant={variant} key={idx}>
+        <MultiSelect
+          value={`選択肢${idx}`}
+          variant={variant}
+          key={idx}
+          className={className}
+        >
           選択肢{idx}
         </MultiSelect>
       ))}
@@ -114,10 +120,11 @@ type PlaygroundProps = {
   disabled?: boolean
   readonly?: 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 (
@@ -127,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>
       ))}

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,4 @@
-import { 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'
@@ -11,70 +11,80 @@ export type MultiSelectProps = React.PropsWithChildren<{
   value: string
   disabled?: boolean
   variant?: 'default' | 'overlay'
+  className?: string
   onChange?: (payload: { value: string; selected: boolean }) => void
 }>
 
-export default function MultiSelect({
-  value,
-  disabled = false,
-  onChange,
-  variant = 'default',
-  children,
-}: MultiSelectProps) {
-  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 })
+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,
-          invalid,
-        }}
-        checked={isSelected}
-        disabled={isDisabled}
-        onChange={handleChange}
-        overlay={variant === 'overlay'}
-        aria-invalid={invalid}
-      />
-      <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>
-  )
-}
+export default memo(MultiSelect)
 
 const MultiSelectRoot = styled.label`
   display: grid;

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

@@ -16,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`
@@ -57,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

@@ -111,7 +111,7 @@ function TestComponent({
   onChange = jest.fn(),
   radioGroupDisabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   option1Disabled = false,
   option2Disabled = false,
 }: {
@@ -119,7 +119,7 @@ function TestComponent({
   onChange?: () => void
   radioGroupDisabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
   option1Disabled?: boolean
   option2Disabled?: boolean
 }) {
@@ -132,7 +132,7 @@ function TestComponent({
         onChange={onChange}
         disabled={radioGroupDisabled}
         readonly={readonly}
-        hasError={hasError}
+        invalid={invalid}
       >
         <Radio value="option1" disabled={option1Disabled}>
           option1を選ぶ