From b8bf8054684d35c9ae2927e51901c235f462c745 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Fri, 26 Apr 2024 07:56:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Textarea=E3=82=92span=E3=81=A7=E3=83=A9?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=81=99=E3=82=8B=E3=81=93=E3=81=A8=E3=81=A7?=
 =?UTF-8?q?Stack=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=81=AA=E3=81=A9=E3=81=A7=E3=83=A9=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E5=A0=B4=E5=90=88=E3=80=81=E6=84=8F=E5=9B=B3?=
 =?UTF-8?q?=E3=81=97=E3=81=AA=E3=81=84=E4=BD=99=E7=99=BD=E3=81=8C=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.stories.tsx |  4 +-
 src/components/Textarea/Textarea.tsx         | 72 +++++++++++---------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
index cef43f7010..e7e4884472 100644
--- a/src/components/Textarea/Textarea.stories.tsx
+++ b/src/components/Textarea/Textarea.stories.tsx
@@ -81,8 +81,8 @@ const Template: StoryFn = () => {
             value={value}
             onChange={onChangeValue}
             decorators={{
-              beforeMaxLengthCount: (txt) => `entry maxLetters(${txt})`,
-              afterMaxLengthCount: (txt) => ` characters(${txt})`,
+              beforeMaxLetterCount: (txt) => `entry limit(${txt})`,
+              afterMaxLetterCount: (txt) => ` characters(${txt})`,
             }}
           />
         </FormControl>
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 4cf1525e2e..bd87587af1 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -31,7 +31,7 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<'beforeMaxLengthCount' | 'afterMaxLengthCount'>
+  decorators?: DecoratorsType<'beforeMaxLetterCount' | 'afterMaxLetterCount'>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -52,8 +52,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_MAXLETTER_COUNT = 'あと'
+const TEXT_AFTER_MAXLETTER_COUNT = '文字'
 
 const textarea = tv({
   slots: {
@@ -107,15 +107,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const currentValue = props.defaultValue || props.value
     const [interimRows, setInterimRows] = useState(rows)
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
-    const beforeMaxLengthCount = useMemo(
+    const beforeMaxLetterCount = useMemo(
       () =>
-        decorators?.beforeMaxLengthCount?.(TEXT_BEFORE_MAXlENGTH_COUNT) ||
-        TEXT_BEFORE_MAXlENGTH_COUNT,
+        decorators?.beforeMaxLetterCount?.(TEXT_BEFORE_MAXLETTER_COUNT) ||
+        TEXT_BEFORE_MAXLETTER_COUNT,
       [decorators],
     )
-    const afterMaxLengthCount = useMemo(
+    const afterMaxLetterCount = useMemo(
       () =>
-        decorators?.afterMaxLengthCount?.(TEXT_AFTER_MAXlENGTH_COUNT) || TEXT_AFTER_MAXlENGTH_COUNT,
+        decorators?.afterMaxLetterCount?.(TEXT_AFTER_MAXLETTER_COUNT) || TEXT_AFTER_MAXLETTER_COUNT,
       [decorators],
     )
 
@@ -130,9 +130,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) {
@@ -171,26 +177,30 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       }
     }, [className, count, error, maxLetters, width])
 
-    return (
-      <>
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
-        <textarea
-          {...props}
-          {...textareaStyleProps}
-          {...(maxLetters ? { onKeyUp: handleKeyup } : {})}
-          ref={textareaRef}
-          aria-invalid={error || undefined}
-          rows={interimRows}
-          onInput={handleInput}
-        />
-        {maxLetters && (
-          <span className={counterStyle}>
-            {beforeMaxLengthCount}
-            <span className={counterTextStyle}>{maxLetters - count}</span>
-            {afterMaxLengthCount}
-          </span>
-        )}
-      </>
+    const body = (
+      // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
+      <textarea
+        {...props}
+        {...textareaStyleProps}
+        onKeyUp={onKeyUp}
+        ref={textareaRef}
+        aria-invalid={error || undefined}
+        rows={interimRows}
+        onInput={handleInput}
+      />
+    )
+
+    return maxLetters ? (
+      <span>
+        {body}
+        <span className={counterStyle}>
+          {beforeMaxLetterCount}
+          <span className={counterTextStyle}>{maxLetters - count}</span>
+          {afterMaxLetterCount}
+        </span>
+      </span>
+    ) : (
+      body
     )
   },
 )