@charcoal-ui/react 5.11.0-beta.1 → 5.11.0-beta.3

package/src/components/TextArea/index.tsx

@@ -5,6 +5,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -16,9 +17,24 @@ import { useId } from '@react-aria/utils'
 import { AssistiveText } from '../TextField/AssistiveText'
 import { useClassNames } from '../../_lib/useClassNames'
 
+/**
+ * `TextArea` を `imperativeRef` から操作するためのハンドル
+ */
+export type TextAreaImperativeHandle = {
+  /**
+   * textarea の値を更新し、文字数や高さなどの内部状態を同期する
+   */
+  setValue: (value: string) => void
+  /**
+   * textarea の現在の値をもとに、文字数や高さなどの内部状態を同期する
+   */
+  sync: () => void
+}
+
 export type TextAreaProps = {
   value?: string
   onChange?: (value: string) => void
+  imperativeRef?: React.Ref<TextAreaImperativeHandle>
 
   showCount?: boolean
   showLabel?: boolean
@@ -57,20 +73,29 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       invalid,
       getCount = countCodePointsInString,
       defaultValue,
+      imperativeRef,
       ...props
     },
     forwardRef,
   ) {
-    const { visuallyHiddenProps } = useVisuallyHidden()
-    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const [rows, setRows] = useState(initialRows)
     const [count, setCount] = useState(
       getCount(value ?? defaultValue?.toString() ?? ''),
     )
-    const [rows, setRows] = useState(initialRows)
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const containerRef = useRef(null)
+    useFocusWithClick(containerRef, textareaRef)
+    const { visuallyHiddenProps } = useVisuallyHidden()
+
+    const isUncontrolled = value === undefined
     const isEnableAutoHeight = useMemo(
       () => autoHeight || (maxRows && maxRows >= 0),
       [autoHeight, maxRows],
     )
+    const classNames = useClassNames('charcoal-text-area-root', className)
+    const showAssistiveText =
+      assistiveText != null && assistiveText.length !== 0
 
     const syncHeight = useCallback(
       (textarea: HTMLTextAreaElement) => {
@@ -79,64 +104,89 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         const hasValidMaxRows = maxRows !== undefined && maxRows >= 1
         const nextRows = initialRows <= currentRows ? currentRows : initialRows
 
-        if (!hasValidMaxRows || maxRows <= initialRows) {
+        if (!hasValidMaxRows) {
           setRows(nextRows)
           return
         }
 
-        setRows(nextRows <= maxRows ? nextRows : maxRows)
+        setRows(Math.min(nextRows, maxRows))
       },
       [initialRows, maxRows],
     )
 
-    const nonControlled = value === undefined
+    const syncTextAreaState = useCallback(
+      (textarea: HTMLTextAreaElement) => {
+        const count = getCount(textarea.value)
+
+        if (isUncontrolled) {
+          setCount(count)
+        }
+
+        if (isEnableAutoHeight) {
+          syncHeight(textarea)
+        }
+
+        return count
+      },
+      [getCount, isEnableAutoHeight, isUncontrolled, syncHeight],
+    )
+
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const value = e.target.value
+        const value = e.currentTarget.value
         const count = getCount(value)
         if (maxLength !== undefined && count > maxLength) {
           return
         }
-        if (nonControlled) {
-          setCount(count)
-        }
-        if (isEnableAutoHeight && textareaRef.current !== null) {
-          syncHeight(textareaRef.current)
-        }
+
+        syncTextAreaState(e.currentTarget)
         onChange?.(value)
       },
-      [
-        isEnableAutoHeight,
-        getCount,
-        maxLength,
-        nonControlled,
-        onChange,
-        syncHeight,
-      ],
+      [getCount, maxLength, onChange, syncTextAreaState],
     )
 
-    useEffect(() => {
-      setCount(getCount(value ?? defaultValue?.toString() ?? ''))
-    }, [getCount, value, defaultValue])
-
-    useEffect(() => {
-      if (isEnableAutoHeight && textareaRef.current !== null) {
-        syncHeight(textareaRef.current)
-      }
-    }, [isEnableAutoHeight, syncHeight])
-
-    const containerRef = useRef(null)
-
-    useFocusWithClick(containerRef, textareaRef)
+    useImperativeHandle(
+      imperativeRef,
+      () => ({
+        setValue: (value: string) => {
+          if (textareaRef.current === null) {
+            return
+          }
+
+          textareaRef.current.value = value
+          syncTextAreaState(textareaRef.current)
+        },
+        sync: () => {
+          if (textareaRef.current !== null) {
+            syncTextAreaState(textareaRef.current)
+          }
+        },
+      }),
+      [syncTextAreaState],
+    )
 
     const textAreaId = useId(props.id)
     const describedbyId = useId()
     const labelledbyId = useId()
 
-    const classNames = useClassNames('charcoal-text-area-root', className)
+    useEffect(() => {
+      // 制御コンポーネントの時の挙動
+      if (!isUncontrolled) {
+        setCount(getCount(value))
+      }
 
-    const showAssistiveText =
-      assistiveText != null && assistiveText.length !== 0
+      //　autoHeight同期(valueが変更された時にsyncHeightしたい)
+      if (isEnableAutoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current)
+      }
+    }, [
+      isUncontrolled,
+      value,
+      getCount,
+      isEnableAutoHeight,
+      textareaRef,
+      syncHeight,
+    ])
 
     return (
       <div className={classNames} aria-disabled={disabled}>

package/src/components/TextField/__snapshots__/index.css.snap

@@ -51,6 +51,12 @@
   margin-left: 4px;
 }
 
+.charcoal-text-field-input-root {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .charcoal-text-field-input {
   border: none;
   box-sizing: border-box;

package/src/components/TextField/index.css

@@ -52,6 +52,12 @@
   margin-left: 4px;
 }
 
+.charcoal-text-field-input-root {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .charcoal-text-field-input {
   border: none;
   box-sizing: border-box;

package/src/components/TextField/index.tsx

@@ -109,21 +109,23 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           ref={containerRef}
         >
           {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
-          <input
-            className="charcoal-text-field-input"
-            aria-describedby={showAssistiveText ? describedbyId : undefined}
-            aria-invalid={invalid}
-            aria-labelledby={labelledbyId}
-            id={inputId}
-            data-invalid={invalid === true}
-            maxLength={maxLength}
-            onChange={handleChange}
-            disabled={disabled}
-            ref={mergeRefs(forwardRef, inputRef)}
-            type={type}
-            value={value}
-            {...props}
-          />
+          <div className="charcoal-text-field-input-root">
+            <input
+              className="charcoal-text-field-input"
+              aria-describedby={showAssistiveText ? describedbyId : undefined}
+              aria-invalid={invalid}
+              aria-labelledby={labelledbyId}
+              id={inputId}
+              data-invalid={invalid === true}
+              maxLength={maxLength}
+              onChange={handleChange}
+              disabled={disabled}
+              ref={mergeRefs(forwardRef, inputRef)}
+              type={type}
+              value={value}
+              {...props}
+            />
+          </div>
           {(suffix || showCount) && (
             <div className="charcoal-text-field-suffix">
               {suffix}

package/src/core/themeHelper.test.tsx

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { useLocalStorage } from './themeHelper'
+
+describe('themeHelper', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('does not enter an update loop when localStorage contains JSON', () => {
+    localStorage.setItem('theme', JSON.stringify({ mode: 'dark' }))
+
+    const { result } = renderHook(() =>
+      useLocalStorage<{ mode: string }>('theme'),
+    )
+
+    expect(result.current[0]).toEqual({ mode: 'dark' })
+    expect(result.current[2]).toBe(true)
+  })
+})

package/src/core/themeHelper.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 export const LOCAL_STORAGE_KEY = 'charcoal-theme'
 export const DEFAULT_ROOT_ATTRIBUTE = 'theme'
@@ -29,6 +29,9 @@ export const themeSetter =
     }
   }
 
+// デフォルト引数で生成すると毎レンダー新しい関数になり、effect が再実行される
+const defaultThemeSetter = themeSetter()
+
 /**
  * `<html data-theme="dark">` にマッチするセレクタを生成する
  */
@@ -51,7 +54,7 @@ export function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {
  */
 export function useThemeSetter({
   key = LOCAL_STORAGE_KEY,
-  setter = themeSetter(),
+  setter = defaultThemeSetter,
 }: { key?: string; setter?: (theme: string | undefined) => void } = {}) {
   const [theme, , system] = useTheme(key)
 
@@ -93,29 +96,33 @@ export function useLocalStorage<T>(key: string, defaultValue?: () => T) {
   const [state, setState] = useState<T>()
   const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])
 
+  const fetch = useCallback(() => {
+    const raw = localStorage.getItem(key)
+    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
+    setReady(true)
+  }, [defaultValueMemo, key])
+
+  const handleStorage = useCallback(
+    (e: StorageEvent) => {
+      if (e.storageArea !== localStorage) {
+        return
+      }
+      if (e.key !== key) {
+        return
+      }
+      fetch()
+    },
+    [fetch, key],
+  )
+
+  // JSON は deserialize のたびに新しい object になるため、入力変更時だけ再取得する
   useEffect(() => {
     fetch()
     window.addEventListener('storage', handleStorage)
     return () => {
       window.removeEventListener('storage', handleStorage)
     }
-  })
-
-  const handleStorage = (e: StorageEvent) => {
-    if (e.storageArea !== localStorage) {
-      return
-    }
-    if (e.key !== key) {
-      return
-    }
-    fetch()
-  }
-
-  const fetch = () => {
-    const raw = localStorage.getItem(key)
-    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
-    setReady(true)
-  }
+  }, [fetch, handleStorage])
 
   const set = (value: T | undefined) => {
     if (value === undefined) {

package/src/index.ts

@@ -38,7 +38,11 @@ export {
   default as TextField,
   type TextFieldProps,
 } from './components/TextField'
-export { default as TextArea, type TextAreaProps } from './components/TextArea'
+export {
+  default as TextArea,
+  type TextAreaImperativeHandle,
+  type TextAreaProps,
+} from './components/TextArea'
 export { default as Icon, type IconProps } from './components/Icon'
 export {
   default as Modal,
@@ -91,3 +95,4 @@ export {
   default as UnstablePagination,
   type PaginationProps,
 } from './components/Pagination'
+import './components/FocusRing/index.css'