@charcoal-ui/react 5.10.0 → 5.11.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.10.0",
+  "version": "5.11.0-beta.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
     "react-compiler-runtime": "1.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.10.0",
-    "@charcoal-ui/theme": "5.10.0",
-    "@charcoal-ui/icons": "5.10.0",
-    "@charcoal-ui/utils": "5.10.0"
+    "@charcoal-ui/foundation": "5.11.0-beta.0",
+    "@charcoal-ui/icons": "5.11.0-beta.0",
+    "@charcoal-ui/theme": "5.11.0-beta.0",
+    "@charcoal-ui/utils": "5.11.0-beta.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

package/src/components/TextArea/TextArea.story.tsx

@@ -94,3 +94,29 @@ export const AutoHeight: StoryObj<typeof TextArea> = {
     return <TextArea autoHeight label="Label" />
   },
 }
+
+export const AutoHeightAndRows: StoryObj<typeof TextArea> = {
+  render: function Render() {
+    return <TextArea rows={3} autoHeight label="label" />
+  },
+}
+
+export const MaxRows: StoryObj<typeof TextArea> = {
+  render: function Render() {
+    return <TextArea maxRows={6} label="label" showCount />
+  },
+}
+
+export const MaxRowsAndRows: StoryObj<typeof TextArea> = {
+  render: function Render() {
+    return <TextArea rows={3} maxRows={6} label="label" showCount />
+  },
+}
+
+export const DefaultValue: StoryObj<typeof TextArea> = {
+  render: function Render() {
+    return (
+      <TextArea label="Label" defaultValue={'テスト用テキスト'} showCount />
+    )
+  },
+}

package/src/components/TextArea/index.tsx

@@ -1,7 +1,14 @@
 import './index.css'
 
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import FieldLabel from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
@@ -24,6 +31,8 @@ export type TextAreaProps = {
   subLabel?: React.ReactNode
   autoHeight?: boolean
 
+  maxRows?: number
+
   getCount?: (value: string) => number
 } & Omit<React.ComponentPropsWithoutRef<'textarea'>, 'onChange'>
 
@@ -44,23 +53,40 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       maxLength,
       autoHeight = false,
       rows: initialRows = 4,
+      maxRows,
       invalid,
       getCount = countCodePointsInString,
+      defaultValue,
       ...props
     },
     forwardRef,
   ) {
     const { visuallyHiddenProps } = useVisuallyHidden()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const [count, setCount] = useState(getCount(value ?? ''))
+    const [count, setCount] = useState(
+      getCount(value ?? defaultValue?.toString() ?? ''),
+    )
     const [rows, setRows] = useState(initialRows)
+    const isEnableAutoHeight = useMemo(
+      () => autoHeight || (maxRows && maxRows >= 0),
+      [autoHeight, maxRows],
+    )
 
     const syncHeight = useCallback(
       (textarea: HTMLTextAreaElement) => {
-        const rows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
-        setRows(initialRows <= rows ? rows : initialRows)
+        const currentRows =
+          (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
+        const hasValidMaxRows = maxRows !== undefined && maxRows >= 1
+        const nextRows = initialRows <= currentRows ? currentRows : initialRows
+
+        if (!hasValidMaxRows || maxRows <= initialRows) {
+          setRows(nextRows)
+          return
+        }
+
+        setRows(nextRows <= maxRows ? nextRows : maxRows)
       },
-      [initialRows],
+      [initialRows, maxRows],
     )
 
     const nonControlled = value === undefined
@@ -74,23 +100,30 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         if (nonControlled) {
           setCount(count)
         }
-        if (autoHeight && textareaRef.current !== null) {
+        if (isEnableAutoHeight && textareaRef.current !== null) {
           syncHeight(textareaRef.current)
         }
         onChange?.(value)
       },
-      [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight],
+      [
+        isEnableAutoHeight,
+        getCount,
+        maxLength,
+        nonControlled,
+        onChange,
+        syncHeight,
+      ],
     )
 
     useEffect(() => {
-      setCount(getCount(value ?? ''))
-    }, [getCount, value])
+      setCount(getCount(value ?? defaultValue?.toString() ?? ''))
+    }, [getCount, value, defaultValue])
 
     useEffect(() => {
-      if (autoHeight && textareaRef.current !== null) {
+      if (isEnableAutoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current)
       }
-    }, [autoHeight, syncHeight])
+    }, [isEnableAutoHeight, syncHeight])
 
     const containerRef = useRef(null)
 
@@ -138,6 +171,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             rows={rows}
             value={value}
             disabled={disabled}
+            defaultValue={defaultValue}
             {...props}
           />
           {showCount && (