From a8769319b7af73c321cb02ffbc49c51b3d403e1c Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 7 May 2024 08:47:47 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix!:=20Textarea=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AEmaxLength=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E3=82=92maxLetters=E5=B1=9E=E6=80=A7=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Textarea/Textarea.stories.tsx  | 16 ++--
 .../src/components/Textarea/Textarea.tsx      | 88 ++++++++++++-------
 2 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
index 676a061c4a..dc2fc14f24 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
@@ -46,14 +46,18 @@ const Template: StoryFn = () => {
       </li>
       <li>
         <FormControl title="最大文字数 (defaultValue)">
-          <Textarea name="max_length_with_default_value" maxLength={140} defaultValue="message👌" />
+          <Textarea
+            name="max_length_with_default_value"
+            maxLetters={140}
+            defaultValue="message👌"
+          />
         </FormControl>
       </li>
       <li>
         <FormControl title="最大文字数 (value)">
           <Textarea
             name="max_length_with_value"
-            maxLength={140}
+            maxLetters={140}
             value={value}
             onChange={onChangeValue}
           />
@@ -63,7 +67,7 @@ const Template: StoryFn = () => {
         <FormControl title="最大文字数 (value)">
           <Textarea
             name="max_length_with_value_over"
-            maxLength={4}
+            maxLetters={4}
             value={value}
             onChange={onChangeValue}
           />
@@ -73,12 +77,12 @@ const Template: StoryFn = () => {
         <FormControl title="最大文字数 (decorators)">
           <Textarea
             name="max_length_with_value_and_decorators"
-            maxLength={140}
+            maxLetters={140}
             value={value}
             onChange={onChangeValue}
             decorators={{
-              beforeMaxLengthCount: (txt) => `entry limit(${txt})`,
-              afterMaxLengthCount: (txt) => ` characters(${txt})`,
+              beforeMaxLettersCount: (txt) => `entry limit(${txt})`,
+              afterMaxLettersCount: (txt) => ` characters(${txt})`,
             }}
           />
         </FormControl>
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index e4c4a83d05..63b93e2058 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -10,6 +10,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { useId } from '../../hooks/useId'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 
@@ -28,8 +29,10 @@ type Props = {
   maxRows?: number
   /** 行数の初期値。省略した場合は2 */
   rows?: number
+  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
+  maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<'beforeMaxLengthCount' | 'afterMaxLengthCount'>
+  decorators?: DecoratorsType<'beforeMaxLettersCount' | 'afterMaxLettersCount'>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -50,8 +53,8 @@ const getStringLength = (value: string | number | readonly string[]) => {
   return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length
 }
 
-const TEXT_BEFORE_MAXlENGTH_COUNT = 'あと'
-const TEXT_AFTER_MAXlENGTH_COUNT = '文字'
+const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
+const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
 
 const textarea = tv({
   slots: {
@@ -87,7 +90,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
   (
     {
       autoFocus,
-      maxLength,
+      maxLetters,
       width,
       className,
       autoResize = false,
@@ -100,20 +103,24 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     },
     ref,
   ) => {
+    const maxLettersId = useId()
+    const actuaMaxLettersId = maxLetters ? maxLettersId : undefined
+
     const { lineHeight } = useTheme()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const currentValue = props.defaultValue || props.value
     const [interimRows, setInterimRows] = useState(rows)
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
-    const beforeMaxLengthCount = useMemo(
+    const beforeMaxLettersCount = useMemo(
       () =>
-        decorators?.beforeMaxLengthCount?.(TEXT_BEFORE_MAXlENGTH_COUNT) ||
-        TEXT_BEFORE_MAXlENGTH_COUNT,
+        decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
+        TEXT_BEFORE_MAXLETTERS_COUNT,
       [decorators],
     )
-    const afterMaxLengthCount = useMemo(
+    const afterMaxLettersCount = useMemo(
       () =>
-        decorators?.afterMaxLengthCount?.(TEXT_AFTER_MAXlENGTH_COUNT) || TEXT_AFTER_MAXlENGTH_COUNT,
+        decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
+        TEXT_AFTER_MAXLETTERS_COUNT,
       [decorators],
     )
 
@@ -128,9 +135,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       }
     }, [autoFocus])
 
-    const handleKeyup = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      setCount(getStringLength(event.currentTarget.value))
-    }, [])
+    const onKeyUp = useMemo(
+      () =>
+        maxLetters
+          ? (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+              setCount(getStringLength(event.currentTarget.value))
+            }
+          : undefined,
+      [maxLetters],
+    )
     const handleInput = useCallback(
       (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (!autoResize) {
@@ -165,30 +178,37 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           style: { width: typeof width === 'number' ? `${width}px` : width },
         },
         counterStyle: counter(),
-        counterTextStyle: counterText({ error: !!(maxLength && maxLength - count <= 0) }),
+        counterTextStyle: counterText({ error: !!(maxLetters && maxLetters - count <= 0) }),
       }
-    }, [className, count, error, maxLength, width])
-
-    return (
-      <>
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
-        <textarea
-          {...props}
-          {...textareaStyleProps}
-          {...(maxLength ? { onKeyUp: handleKeyup } : {})}
-          ref={textareaRef}
-          aria-invalid={error || undefined}
-          rows={interimRows}
-          onInput={handleInput}
-        />
-        {maxLength && (
-          <span className={counterStyle}>
-            {beforeMaxLengthCount}
-            <span className={counterTextStyle}>{maxLength - count}</span>
-            {afterMaxLengthCount}
+    }, [className, count, error, maxLetters, width])
+
+    const body = (
+      // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
+      <textarea
+        {...props}
+        {...textareaStyleProps}
+        aria-labelledby={actuaMaxLettersId}
+        onKeyUp={onKeyUp}
+        ref={textareaRef}
+        aria-invalid={error || undefined}
+        rows={interimRows}
+        onInput={handleInput}
+      />
+    )
+
+    return maxLetters ? (
+      <span>
+        {body}
+        <span className={counterStyle} id={actuaMaxLettersId}>
+          {beforeMaxLettersCount}
+          <span className={counterTextStyle}>
+            {maxLetters - count}/{maxLetters}
           </span>
-        )}
-      </>
+          {afterMaxLettersCount}
+        </span>
+      </span>
+    ) : (
+      body
     )
   },
 )

From 6e8b2ed0b131a658c15c24509e4adcc6043cf58d Mon Sep 17 00:00:00 2001
From: Mizoue Atsushi <at.mizoue@gmail.com>
Date: Tue, 7 May 2024 09:17:08 +0900
Subject: [PATCH 2/4] Update
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx

Co-authored-by: oti <oti@users.noreply.github.com>
---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 63b93e2058..2964bfba7f 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -104,7 +104,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     ref,
   ) => {
     const maxLettersId = useId()
-    const actuaMaxLettersId = maxLetters ? maxLettersId : undefined
+    const actualMaxLettersId = maxLetters ? maxLettersId : undefined
 
     const { lineHeight } = useTheme()
     const textareaRef = useRef<HTMLTextAreaElement>(null)

From 64c2a4311c31e003f53159edeebd68e76b508a4f Mon Sep 17 00:00:00 2001
From: Mizoue Atsushi <at.mizoue@gmail.com>
Date: Tue, 7 May 2024 09:17:13 +0900
Subject: [PATCH 3/4] Update
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx

Co-authored-by: oti <oti@users.noreply.github.com>
---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 2964bfba7f..19ddd4acc8 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -187,7 +187,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       <textarea
         {...props}
         {...textareaStyleProps}
-        aria-labelledby={actuaMaxLettersId}
+        aria-describedby={actualMaxLettersId}
         onKeyUp={onKeyUp}
         ref={textareaRef}
         aria-invalid={error || undefined}

From b1eba83888d550db2cf250679396225605cefc7e Mon Sep 17 00:00:00 2001
From: Mizoue Atsushi <at.mizoue@gmail.com>
Date: Tue, 7 May 2024 09:17:21 +0900
Subject: [PATCH 4/4] Update
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx

Co-authored-by: oti <oti@users.noreply.github.com>
---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 19ddd4acc8..9a082f08e5 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -199,7 +199,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     return maxLetters ? (
       <span>
         {body}
-        <span className={counterStyle} id={actuaMaxLettersId}>
+        <span className={counterStyle} id={actualMaxLettersId}>
           {beforeMaxLettersCount}
           <span className={counterTextStyle}>
             {maxLetters - count}/{maxLetters}