@charcoal-ui/react 4.0.0-beta.0 → 4.0.0-beta.11

package/src/components/TextArea/index.css

@@ -0,0 +1,78 @@
+.charcoal-text-area-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+}
+
+.charcoal-text-area-root[aria-disabled='true'] {
+  opacity: 0.32;
+}
+
+.charcoal-text-area-container {
+  position: relative;
+  overflow: hidden;
+
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
+}
+
+.charcoal-text-area-container[aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-container:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-text-area-container:not(aria-disabled='true'):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-text-area-container[aria-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+  box-sizing: border-box;
+
+  /* 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) calc(8px / 0.875);
+  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+}
+.charcoal-text-area-textarea[data-no-bottom-padding='true'] {
+  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
+  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+}
+
+.charcoal-text-area-textarea::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-text-area-counter {
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
+}

package/src/components/TextArea/index.tsx

@@ -1,70 +1,58 @@
-import { useTextField } from '@react-aria/textfield'
+import './index.css'
+
 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 { 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'
+import { AssistiveText } from '../TextField/AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
+
+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
-
+      invalid,
+      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 [count, setCount] = useState(getCount(value ?? ''))
     const [rows, setRows] = useState(initialRows)
 
     const syncHeight = useCallback(
@@ -75,10 +63,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 +79,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,127 +94,66 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     const containerRef = useRef(null)
 
-    useFocusWithClick(containerRef, ariaRef)
+    useFocusWithClick(containerRef, textareaRef)
+
+    const textAreaId = useId(props.id)
+    const describedbyId = useId()
+    const labelledbyId = useId()
+
+    const classNames = useClassNames('charcoal-text-area-root', className)
 
-    const inputProps = mergeProps(restProps, ariaInputProps)
+    const showAssistiveText =
+      assistiveText != null && assistiveText.length !== 0
 
     return (
-      <TextFieldRoot className={className} isDisabled={disabled}>
-        <TextFieldLabel
+      <div className={classNames} aria-disabled={disabled}>
+        <FieldLabel
+          htmlFor={textAreaId}
+          id={labelledbyId}
           label={label}
-          requiredText={requiredText}
           required={required}
+          requiredText={requiredText}
           subLabel={subLabel}
-          {...labelProps}
           {...(!showLabel ? visuallyHiddenProps : {})}
         />
-        <StyledTextareaContainer
-          ref={containerRef}
-          invalid={invalid}
-          rows={showCount ? rows + 1 : rows}
+        <div
+          className="charcoal-text-area-container"
           aria-disabled={disabled === true ? 'true' : undefined}
+          aria-invalid={invalid === true}
+          ref={containerRef}
+          style={{
+            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+          }}
         >
-          <StyledTextarea
-            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
+          <textarea
+            className="charcoal-text-area-textarea"
+            aria-describedby={showAssistiveText ? describedbyId : undefined}
+            aria-invalid={invalid}
+            aria-labelledby={labelledbyId}
+            id={textAreaId}
+            maxLength={maxLength}
+            data-no-bottom-padding={showCount}
+            onChange={handleChange}
+            ref={mergeRefs(forwardRef, textareaRef)}
             rows={rows}
-            noBottomPadding={showCount}
-            {...inputProps}
+            value={value}
+            disabled={disabled}
+            {...props}
           />
           {showCount && (
-            <MultiLineCounter>
+            <span className="charcoal-text-area-counter">
               {maxLength !== undefined ? `${count}/${maxLength}` : count}
-            </MultiLineCounter>
+            </span>
           )}
-        </StyledTextareaContainer>
-        {assistiveText != null && assistiveText.length !== 0 && (
-          <AssistiveText
-            invalid={invalid}
-            {...(invalid ? errorMessageProps : descriptionProps)}
-          >
+        </div>
+        {showAssistiveText && (
+          <AssistiveText data-invalid={invalid === true} id={describedbyId}>
             {assistiveText}
           </AssistiveText>
         )}
-      </TextFieldRoot>
+      </div>
     )
   }
 )
 
 export default TextArea
-
-const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
-  display: flex;
-  flex-direction: column;
-
-  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
-`
-
-const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
-  position: relative;
-  overflow: hidden;
-
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-
-  ${({ rows }) => css`
-    height: calc(22px * ${rows} + 18px);
-  `};
-
-  :not([aria-disabled]):hover,
-  [aria-disabled='false']:hover {
-    background-color: var(--charcoal-surface3-hover);
-  }
-  :focus-within {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};
-  }
-
-  ${(p) =>
-    p.invalid &&
-    css`
-      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-    `}
-`
-
-const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-
-  /* 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) calc(8px / 0.875)
-    ${(p) => (p.noBottomPadding ? 0 : '')};
-
-  ${({ rows = 1, noBottomPadding }) => css`
-    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
-  `};
-
-  /* Display box-shadow for iOS Safari */
-  appearance: none;
-
-  background: none;
-
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
-`
-
-const MultiLineCounter = styled.span`
-  position: absolute;
-  bottom: 9px;
-  right: 8px;
-
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-`

package/src/components/TextField/AssistiveText/index.css

@@ -0,0 +1,10 @@
+.charcoal-text-field-assistive-text {
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  color: var(--charcoal-text2);
+}
+
+.charcoal-text-field-assistive-text[data-invalid='true'] {
+  color: var(--charcoal-assertive);
+}

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

@@ -0,0 +1,6 @@
+import { createDivComponent } from '../../../_lib/createDivComponent'
+import './index.css'
+
+export const AssistiveText = createDivComponent(
+  'charcoal-text-field-assistive-text'
+)

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

@@ -1,122 +1,131 @@
-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',
+  title: 'react/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>
+}
+
+export const Label: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField showLabel label="Label" />
+  },
+}
 
-const Container = styled.div`
-  display: grid;
-  gap: ${({ theme }) => px(theme.spacing[24])};
-`
+export const Placeholder: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" placeholder="Placeholder" />
+  },
+}
 
-export const Default = {}
+export const RequiredText: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" showLabel required requiredText="*必須" />
+  },
+}
 
-export const Number: StoryObj<typeof TextField> = {
-  render: function Render(args) {
-    const [count, setCount] = useState(0)
+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="エラーメッセージ" />
   },
 }
 
-const PrefixIconWrap = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.color.text3};
-`
+export const ReadOnly: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" readOnly value="読み取り専用" />
+  },
+}
 
-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 Affix: StoryObj<typeof TextField> = {
+  render() {
+    return <TextField label="Label" prefix="/home/john/" suffix=".png" />
+  },
+}
+
+export const Prefix: StoryObj<typeof TextField> = {
+  render() {
     return (
       <TextField
-        {...args}
         label="Label"
-        placeholder="作品を検索"
-        value={value}
-        onChange={handleChange}
         prefix={
-          <PrefixIconWrap>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'var(--charcoal-text3)',
+            }}
+          >
             <pixiv-icon name="16/Search" />
-          </PrefixIconWrap>
-        }
-        suffix={
-          <IconButton
-            variant="Overlay"
-            icon={'16/Remove'}
-            size="XS"
-            onClick={handleClear}
-          />
+          </div>
         }
       />
     )
   },
 }
+
+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()
+        }}
+      />
+    )
+  },
+}