@charcoal-ui/react 4.0.0-beta.3 → 4.0.0-beta.5

package/src/components/TextArea/index.tsx

@@ -1,70 +1,56 @@
-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 { FieldLabelProps } from '../FieldLabel'
+import FieldLabel from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
-import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
-import { AssistiveText, TextFieldLabel } from '../TextField'
+import { AssistiveText } from '../TextField'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
-import { mergeProps } from '@react-aria/utils'
-
-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
-}
+import { useId } from '@react-aria/utils'
+
+export type TextAreaProps = {
+  value?: string
+  onChange?: (value: string) => void
+
+  showCount?: boolean
+  showLabel?: boolean
+  assistiveText?: string
+  invalid?: boolean
+
+  label?: string
+  requiredText?: string
+  disabled?: boolean
+  subLabel?: React.ReactNode
+  autoHeight?: boolean
+
+  getCount?: (value: string) => number
+} & Omit<React.ComponentPropsWithoutRef<'textarea'>, 'onChange'>
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  function TextAreaInner({ onChange, ...props }, forwardRef) {
-    const {
+  function TextAreaInner(
+    {
+      onChange,
       className,
+      value,
       showCount = false,
       showLabel = false,
-      label,
+      label = '',
       requiredText,
       subLabel,
       disabled = false,
       required,
-      invalid = false,
       assistiveText,
       maxLength,
       autoHeight = false,
       rows: initialRows = 4,
-      ...restProps
-    } = props
-
+      getCount = countCodePointsInString,
+      ...props
+    },
+    forwardRef
+  ) {
     const { visuallyHiddenProps } = useVisuallyHidden()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const ariaRef = useRef<HTMLTextAreaElement>(null)
-    const [count, setCount] = useState(
-      countCodePointsInString(props.value ?? '')
-    )
+    const textAreaRef = useRef<HTMLTextAreaElement>(null)
+    const [count, setCount] = useState(getCount(value ?? ''))
     const [rows, setRows] = useState(initialRows)
 
     const syncHeight = useCallback(
@@ -75,10 +61,11 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       [initialRows]
     )
 
-    const nonControlled = props.value === undefined
+    const nonControlled = value === undefined
     const handleChange = useCallback(
-      (value: string) => {
-        const count = countCodePointsInString(value)
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value
+        const count = getCount(value)
         if (maxLength !== undefined && count > maxLength) {
           return
         }
@@ -90,31 +77,12 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         }
         onChange?.(value)
       },
-      [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+      [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]
     )
 
     useEffect(() => {
-      setCount(countCodePointsInString(props.value ?? ''))
-    }, [props.value])
-
-    const {
-      inputProps: ariaInputProps,
-      labelProps,
-      descriptionProps,
-      errorMessageProps,
-    } = useTextField(
-      {
-        inputElementType: 'textarea',
-        isDisabled: disabled,
-        isRequired: required,
-        validationState: invalid ? 'invalid' : 'valid',
-        description: !invalid && assistiveText,
-        errorMessage: invalid && assistiveText,
-        onChange: handleChange,
-        ...props,
-      },
-      ariaRef
-    )
+      setCount(getCount(value ?? ''))
+    }, [getCount, value])
 
     useEffect(() => {
       if (autoHeight && textareaRef.current !== null) {
@@ -124,31 +92,44 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     const containerRef = useRef(null)
 
-    useFocusWithClick(containerRef, ariaRef)
+    useFocusWithClick(containerRef, textAreaRef)
 
-    const inputProps = mergeProps(restProps, ariaInputProps)
+    const textAreaId = useId(props.id)
+    const describedbyId = useId()
+    const labelledbyId = useId()
+
+    const showAssistiveText =
+      assistiveText != null && assistiveText.length !== 0
 
     return (
       <TextFieldRoot className={className} isDisabled={disabled}>
-        <TextFieldLabel
+        <FieldLabel
+          htmlFor={textAreaId}
+          id={labelledbyId}
           label={label}
-          requiredText={requiredText}
           required={required}
+          requiredText={requiredText}
           subLabel={subLabel}
-          {...labelProps}
           {...(!showLabel ? visuallyHiddenProps : {})}
         />
         <StyledTextareaContainer
+          aria-disabled={disabled === true ? 'true' : undefined}
+          invalid={props.invalid === true}
           ref={containerRef}
-          invalid={invalid}
           rows={showCount ? rows + 1 : rows}
-          aria-disabled={disabled === true ? 'true' : undefined}
         >
           <StyledTextarea
-            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
-            rows={rows}
+            aria-describedby={showAssistiveText ? describedbyId : undefined}
+            aria-invalid={props.invalid}
+            aria-labelledby={labelledbyId}
+            id={textAreaId}
+            maxLength={maxLength}
             noBottomPadding={showCount}
-            {...inputProps}
+            onChange={handleChange}
+            ref={mergeRefs(forwardRef, textAreaRef)}
+            rows={rows}
+            value={value}
+            {...props}
           />
           {showCount && (
             <MultiLineCounter>
@@ -156,11 +137,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             </MultiLineCounter>
           )}
         </StyledTextareaContainer>
-        {assistiveText != null && assistiveText.length !== 0 && (
-          <AssistiveText
-            invalid={invalid}
-            {...(invalid ? errorMessageProps : descriptionProps)}
-          >
+        {showAssistiveText && (
+          <AssistiveText invalid={props.invalid === true} id={describedbyId}>
             {assistiveText}
           </AssistiveText>
         )}
@@ -172,8 +150,9 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 export default TextArea
 
 const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `

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

@@ -1,83 +1,94 @@
 import styled from 'styled-components'
 import Clickable from '../Clickable'
 import TextField from '.'
-import { px } from '@charcoal-ui/utils'
-import IconButton from '../IconButton'
-import { useCallback, useState } from 'react'
+import { useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TextField',
   component: TextField,
-  argTypes: {},
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof TextField>
+
+export const Default: StoryObj<typeof TextField> = {
   args: {
     showLabel: false,
     assistiveText: '',
     disabled: false,
     required: false,
     invalid: false,
+    readOnly: false,
     label: 'Label',
     requiredText: '*必須',
     subLabel: <Clickable>Text Link</Clickable>,
     placeholder: 'TextField',
   },
-  render: function Render(args) {
-    return (
-      <Container>
-        <TextField {...args} />
-      </Container>
-    )
+  render(args) {
+    return <TextField {...args} />
   },
-} as Meta<typeof TextField>
+}
 
-const Container = styled.div`
-  display: grid;
-  gap: ${({ theme }) => px(theme.spacing[24])};
-`
+export const Label: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField showLabel label="Label" />
+  },
+}
 
-export const Default = {}
+export const Placeholder: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" placeholder="Placeholder" />
+  },
+}
 
-export const Number: StoryObj<typeof TextField> = {
-  render: function Render(args) {
-    const [count, setCount] = useState(0)
+export const RequiredText: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" showLabel required requiredText="*必須" />
+  },
+}
+
+export const AssistiveText: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" assistiveText="説明が入ります" />
+  },
+}
+
+export const SubLabel: StoryObj<typeof TextField> = {
+  render() {
     return (
-      <Container>
-        <TextField
-          {...args}
-          type="number"
-          value={count.toString()}
-          onChange={(value) => setCount(parseInt(value))}
-          onWheel={(e) => {
-            e.currentTarget.blur()
-            e.stopPropagation()
-          }}
-        />
-      </Container>
+      <TextField label="Label" subLabel={<Clickable>Text Link</Clickable>} />
     )
   },
 }
 
-export const HasLabel = {
-  args: {
-    showLabel: true,
-    assistiveText: 'Assistive text',
-    required: true,
+export const ShowCount = {
+  render() {
+    return <TextField label="Label" showCount maxLength={100} />
   },
 }
 
-export const HasCount = {
-  args: {
-    showCount: true,
-    maxLength: 100,
+export const Disabled: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" disabled />
   },
 }
 
-export const HasAffix: StoryObj<typeof TextField> = {
-  args: {
-    showCount: true,
-    maxLength: 200,
-    prefix: '/home/john/',
-    suffix: '.png',
+export const Invalid: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" invalid assistiveText="エラーメッセージ" />
+  },
+}
+
+export const ReadOnly: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" readOnly value="読み取り専用" />
+  },
+}
+
+export const Affix: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" prefix="/home/john/" suffix=".png" />
   },
 }
 
@@ -87,35 +98,34 @@ const PrefixIconWrap = styled.div`
   color: ${({ theme }) => theme.color.text3};
 `
 
-export const PrefixIcon: StoryObj<typeof TextField> = {
-  render: function Render(args) {
-    const [value, setValue] = useState('')
-    const handleChange = useCallback((value: string) => {
-      setValue(value)
-    }, [])
-    const handleClear = useCallback(() => {
-      setValue('')
-    }, [])
+export const Prefix: StoryObj<typeof TextField> = {
+  render() {
     return (
       <TextField
-        {...args}
         label="Label"
-        placeholder="作品を検索"
-        value={value}
-        onChange={handleChange}
         prefix={
           <PrefixIconWrap>
             <pixiv-icon name="16/Search" />
           </PrefixIconWrap>
         }
-        suffix={
-          <IconButton
-            variant="Overlay"
-            icon={'16/Remove'}
-            size="XS"
-            onClick={handleClear}
-          />
-        }
+      />
+    )
+  },
+}
+
+export const Number: StoryObj<typeof TextField> = {
+  render: function Render(args) {
+    const [count, setCount] = useState(0)
+    return (
+      <TextField
+        {...args}
+        type="number"
+        value={count.toString()}
+        onChange={(value) => setCount(parseInt(value))}
+        onWheel={(e) => {
+          e.currentTarget.blur()
+          e.stopPropagation()
+        }}
       />
     )
   },