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

package/src/components/Radio/index.tsx

@@ -1,4 +1,4 @@
-import { 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'
@@ -7,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)
 
@@ -44,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;
@@ -69,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'] {
@@ -82,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) {
@@ -131,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
@@ -146,7 +146,7 @@ interface RadioGroupContext {
   selected?: string
   disabled: boolean
   readonly: boolean
-  hasError: boolean
+  invalid: boolean
   onChange: (next: string) => void
 }
 
@@ -155,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> ?'
@@ -171,7 +171,7 @@ export function RadioGroup({
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   children,
 }: RadioGroupProps) {
   const handleChange = useCallback(
@@ -188,7 +188,7 @@ export function RadioGroup({
         selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
-        hasError: hasError ?? false,
+        invalid: invalid ?? false,
         onChange: handleChange,
       }}
     >
@@ -196,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/index.tsx

@@ -25,6 +25,7 @@ export type SegmentedControlProps = {
   readonly disabled?: boolean
   readonly readonly?: boolean
   readonly required?: boolean
+  readonly className?: string
 
   readonly value?: string
   readonly defaultValue?: string
@@ -55,7 +56,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

package/src/components/Switch/index.tsx

@@ -1,11 +1,12 @@
 import { useSwitch } from '@react-aria/switch'
 import type { AriaSwitchProps } from '@react-types/switch'
-import { useRef, useMemo } from 'react'
+import { useMemo, memo, forwardRef } from 'react'
 import * as React 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
@@ -24,37 +25,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/TextArea/TextArea.story.tsx

@@ -0,0 +1,61 @@
+import { action } from '@storybook/addon-actions'
+import styled from 'styled-components'
+import { Story } from '../../_lib/compat'
+import Clickable from '../Clickable'
+import TextArea, { TextAreaProps } from '.'
+import { px } from '@charcoal-ui/utils'
+
+export default {
+  title: 'TextArea',
+  component: TextArea,
+  argTypes: {},
+  args: {
+    showLabel: false,
+    label: 'Label',
+    assistiveText: '',
+    disabled: false,
+    required: false,
+    invalid: false,
+  },
+}
+
+const Container = styled.div`
+  display: grid;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
+const Template: Story<Partial<TextAreaProps>> = (args) => (
+  <Container>
+    <TextArea
+      label="Label"
+      requiredText="*必須"
+      subLabel={
+        <Clickable onClick={action('label-click')}>Text Link</Clickable>
+      }
+      placeholder="Text Area"
+      {...args}
+    />
+  </Container>
+)
+
+export const Default = Template.bind({})
+
+export const HasLabel = Template.bind({})
+HasLabel.args = {
+  showLabel: true,
+  assistiveText: 'Assistive text',
+  required: true,
+}
+
+export const HasCount = Template.bind({})
+HasCount.args = {
+  showCount: true,
+  maxLength: 100,
+}
+
+export const AutoHeight: Story<Partial<TextAreaProps>> = (args) => (
+  <TextArea label="Label" placeholder="TextArea" {...args} />
+)
+AutoHeight.args = {
+  autoHeight: true,
+}

package/src/components/TextArea/index.tsx

@@ -0,0 +1,246 @@
+import { useTextField } from '@react-aria/textfield'
+import { useVisuallyHidden } from '@react-aria/visually-hidden'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import styled, { css } from 'styled-components'
+import FieldLabel, { FieldLabelProps } from '../FieldLabel'
+import { countCodePointsInString, mergeRefs } from '../../_lib'
+import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
+import { theme } from '../../styled'
+
+type DOMProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  // react-ariaのhookは、onChangeが`(v: string) => void`想定
+  | 'onChange'
+  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる
+  | keyof ReactAreaUseTextFieldCompat
+>
+
+export interface TextAreaProps
+  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,
+    DOMProps,
+    ReactAreaUseTextFieldCompat {
+  readonly autoHeight?: boolean
+  readonly rows?: number
+
+  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない
+  readonly defaultValue?: string
+  readonly value?: string
+  readonly onChange?: (value: string) => void
+
+  // react-ariaの型定義のせいでHTMLTextAreaElementにできない
+  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void
+  readonly onFocus?: (event: React.FocusEvent<Element>) => void
+  readonly onBlur?: (event: React.FocusEvent<Element>) => void
+
+  readonly showCount?: boolean
+  readonly showLabel?: boolean
+  readonly assistiveText?: string
+  readonly invalid?: boolean
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextAreaInner({ onChange, ...props }, forwardRef) {
+    const {
+      className,
+      showCount = false,
+      showLabel = false,
+      label,
+      requiredText,
+      subLabel,
+      disabled = false,
+      required,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      autoHeight = false,
+      rows: initialRows = 4,
+    } = props
+
+    const { visuallyHiddenProps } = useVisuallyHidden()
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const ariaRef = useRef<HTMLTextAreaElement>(null)
+    const [count, setCount] = useState(
+      countCodePointsInString(props.value ?? '')
+    )
+    const [rows, setRows] = useState(initialRows)
+
+    const syncHeight = useCallback(
+      (textarea: HTMLTextAreaElement) => {
+        const rows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
+        setRows(initialRows <= rows ? rows : initialRows)
+      },
+      [initialRows]
+    )
+
+    const nonControlled = props.value === undefined
+    const handleChange = useCallback(
+      (value: string) => {
+        const count = countCodePointsInString(value)
+        if (maxLength !== undefined && count > maxLength) {
+          return
+        }
+        if (nonControlled) {
+          setCount(count)
+        }
+        if (autoHeight && textareaRef.current !== null) {
+          syncHeight(textareaRef.current)
+        }
+        onChange?.(value)
+      },
+      [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+    )
+
+    useEffect(() => {
+      setCount(countCodePointsInString(props.value ?? ''))
+    }, [props.value])
+
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } =
+      useTextField(
+        {
+          inputElementType: 'textarea',
+          isDisabled: disabled,
+          isRequired: required,
+          validationState: invalid ? 'invalid' : 'valid',
+          description: !invalid && assistiveText,
+          errorMessage: invalid && assistiveText,
+          onChange: handleChange,
+          ...props,
+        },
+        ariaRef
+      )
+
+    useEffect(() => {
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current)
+      }
+    }, [autoHeight, syncHeight])
+
+    return (
+      <TextFieldRoot className={className} isDisabled={disabled}>
+        <TextFieldLabel
+          label={label}
+          requiredText={requiredText}
+          required={required}
+          subLabel={subLabel}
+          {...labelProps}
+          {...(!showLabel ? visuallyHiddenProps : {})}
+        />
+        <StyledTextareaContainer
+          invalid={invalid}
+          rows={showCount ? rows + 1 : rows}
+        >
+          <StyledTextarea
+            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
+            rows={rows}
+            noBottomPadding={showCount}
+            {...inputProps}
+          />
+          {showCount && (
+            <MultiLineCounter>
+              {maxLength !== undefined ? `${count}/${maxLength}` : count}
+            </MultiLineCounter>
+          )}
+        </StyledTextareaContainer>
+        {assistiveText != null && assistiveText.length !== 0 && (
+          <AssistiveText
+            invalid={invalid}
+            {...(invalid ? errorMessageProps : descriptionProps)}
+          >
+            {assistiveText}
+          </AssistiveText>
+        )}
+      </TextFieldRoot>
+    )
+  }
+)
+
+export default TextArea
+
+const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`
+
+const TextFieldLabel = styled(FieldLabel)`
+  ${theme((o) => o.margin.bottom(8))}
+`
+
+const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
+  position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) =>
+    theme((o) => [
+      o.bg.surface3.hover,
+      p.invalid && o.outline.assertive,
+      o.font.text2,
+      o.borderRadius(4),
+    ])}
+
+  &:focus-within {
+    ${(p) =>
+      theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}
+  }
+
+  ${({ rows }) => css`
+    height: calc(22px * ${rows} + 18px);
+  `};
+`
+
+const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => (p.noBottomPadding ? 0 : '')};
+
+  ${({ rows = 1 }) => css`
+    height: calc(22px / 0.875 * ${rows});
+  `};
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+
+  &::placeholder {
+    ${theme((o) => o.font.text3)}
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`
+
+const MultiLineCounter = styled.span`
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`
+
+const AssistiveText = styled.p<{ invalid: boolean }>`
+  ${(p) =>
+    theme((o) => [
+      o.typography(14),
+      o.margin.top(8),
+      o.margin.bottom(0),
+      o.font[p.invalid ? 'assertive' : 'text1'],
+    ])}
+`

package/src/components/TextField/{index.story.tsx → TextField.story.tsx}

@@ -2,11 +2,7 @@ import { action } from '@storybook/addon-actions'
 import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
-import TextField, {
-  MultiLineTextFieldProps,
-  SingleLineTextFieldProps,
-  TextFieldProps,
-} from '.'
+import TextField, { TextFieldProps } from '.'
 import { px } from '@charcoal-ui/utils'
 import IconButton from '../IconButton'
 
@@ -37,19 +33,8 @@ const Template: Story<Partial<TextFieldProps>> = (args) => (
       subLabel={
         <Clickable onClick={action('label-click')}>Text Link</Clickable>
       }
-      placeholder="Single Line"
-      {...(args as Partial<SingleLineTextFieldProps>)}
-      multiline={false}
-    />
-    <TextField
-      label="Label"
-      requiredText="*必須"
-      subLabel={
-        <Clickable onClick={action('label-click')}>Text Link</Clickable>
-      }
-      placeholder="Multi Line"
-      {...(args as Partial<MultiLineTextFieldProps>)}
-      multiline
+      placeholder="TextField"
+      {...args}
     />
   </Container>
 )
@@ -69,7 +54,7 @@ HasCount.args = {
   maxLength: 100,
 }
 
-export const HasAffix: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+export const HasAffix: Story<Partial<TextFieldProps>> = (args) => (
   <TextField label="Label" placeholder="path/to/your/file" {...args} />
 )
 HasAffix.args = {
@@ -79,14 +64,7 @@ HasAffix.args = {
   suffix: '.png',
 }
 
-export const AutoHeight: Story<Partial<MultiLineTextFieldProps>> = (args) => (
-  <TextField label="Label" placeholder="Multi Line" {...args} multiline />
-)
-AutoHeight.args = {
-  autoHeight: true,
-}
-
-export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+export const PrefixIcon: Story<Partial<TextFieldProps>> = (args) => (
   <TextField
     label="Label"
     placeholder="Icon prefix"
@@ -101,7 +79,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;
 `