smarthr-ui 99.3.0 → 99.3.2

package/lib/components/Textarea/Textarea.cjs

@@ -46,12 +46,12 @@ const classNameGenerator = index.tv({
         'aria-[invalid]:shr-border-danger',
     ],
 });
-const calculateIdealRows = (element, maxRows, lineHeightNormal) => {
-    if (!element) {
+const calculateIdealRows = (node, maxRows, lineHeightNormal) => {
+    if (!node) {
         return 0;
     }
     // 現在の入力値に応じた行数
-    const currentInputValueRows = Math.floor(element.scrollHeight / (themes_createFontSize.defaultHtmlFontSize * lineHeightNormal));
+    const currentInputValueRows = Math.floor(node.scrollHeight / (themes_createFontSize.defaultHtmlFontSize * lineHeightNormal));
     return currentInputValueRows < maxRows ? currentInputValueRows : maxRows;
 };
 const Textarea = React.forwardRef(({ maxLetters, ...rest }, ref) => maxLetters ? (jsxRuntime.jsx(MaxLettersTextarea, { ...rest, externalRef: ref, maxLetters: maxLetters })) : (jsxRuntime.jsx(ActualTextarea, { ...rest, externalRef: ref })));
@@ -98,6 +98,10 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
         };
         return {
             updateCount,
+            cancelDebounce: () => {
+                updateSrMessage.cancel();
+                actualUpdateCount.cancel();
+            },
             handleChange: (e) => {
                 updateCount(e.target.value);
                 latest.onChange?.(e);
@@ -106,12 +110,13 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
     }, [latest]);
     React.useEffect(() => {
         functions.updateCount(value ?? '');
+        return functions.cancelDebounce;
     }, [value, functions]);
-    return (jsxRuntime.jsxs("span", { className: "shr-relative", children: [jsxRuntime.jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, onChange: functions.handleChange, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { id: maxLettersNoticeId, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsxRuntime.jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
+    return (jsxRuntime.jsxs("span", { className: "shr-relative", children: [jsxRuntime.jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError, onChange: functions.handleChange }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { id: maxLettersNoticeId, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsxRuntime.jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
 };
 const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRows = Infinity, rows = 2, error, onChange, externalRef, ...rest }) => {
     const theme = hooks_useTheme.useTheme();
-    const textareaRef = React.useRef(null);
+    const innerRef = React.useRef(null);
     const [interimRows, setInterimRows] = React.useState(rows);
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
     const latest = hooks_useLatest.useLatest({
@@ -123,16 +128,17 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
         rows,
     });
     const functions = React.useMemo(() => ({
-        callbackRef: (element) => {
-            textareaRef.current = element;
-            if (element) {
+        callbackRef: (node) => {
+            // TODO: useMergeRefs, useOnceCallbackが実装されたら適用する
+            innerRef.current = node;
+            if (node) {
                 // autoFocus時に、フォーカスを当てる
                 if (latest.autoFocus) {
-                    element.focus();
+                    node.focus();
                 }
                 // autoResize時に、初期値での高さを指定
                 if (latest.autoResize) {
-                    setInterimRows(calculateIdealRows(element, latest.maxRows, latest.theme.leading.NORMAL));
+                    setInterimRows(calculateIdealRows(node, latest.maxRows, latest.theme.leading.NORMAL));
                 }
             }
         },
@@ -148,8 +154,8 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
             latest.onChange?.(e);
         },
     }), [latest]);
-    React.useImperativeHandle(externalRef, () => textareaRef.current);
-    return (jsxRuntime.jsx("textarea", { ...rest, "data-smarthr-ui-input": "true", onChange: functions.handleChange, ref: functions.callbackRef, "aria-invalid": error || undefined, rows: interimRows, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
+    React.useImperativeHandle(externalRef, () => innerRef.current, []);
+    return (jsxRuntime.jsx("textarea", { ...rest, ref: functions.callbackRef, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", rows: interimRows, onChange: functions.handleChange, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
 };
 
 exports.Textarea = Textarea;

package/lib/components/Textarea/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FC,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  startTransition,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype BaseProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'textarea'>, keyof BaseProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Textarea-textarea',\n    'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n    'contrast-more:shr-border-high-contrast',\n    'placeholder:shr-text-grey',\n    'focus-visible:shr-focus-indicator',\n    'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n    'aria-[invalid]:shr-border-danger',\n  ],\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ maxLetters, ...rest }, ref) =>\n  maxLetters ? (\n    <MaxLettersTextarea {...rest} externalRef={ref} maxLetters={maxLetters} />\n  ) : (\n    <ActualTextarea {...rest} externalRef={ref} />\n  ),\n)\n\ntype LocalTextareaProps = ComponentProps<typeof Textarea> & {\n  externalRef?: Ref<HTMLTextAreaElement>\n}\n\nconst MaxLettersTextarea: FC<\n  Omit<LocalTextareaProps, 'maxLetters'> & {\n    maxLetters: number\n  }\n> = ({ maxLetters, error, value, defaultValue, onChange, id, ...rest }) => {\n  const maxLettersId = useId()\n  const textareaId = id || `${maxLettersId}-textarea`\n  const maxLettersNoticeId = `${maxLettersId}-notice`\n\n  const counterSpanRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(() => {\n    const currentValue = defaultValue || value\n    return currentValue ? getStringLength(currentValue) : 0\n  })\n  const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n  const countError = count > maxLetters\n\n  const latest = useLatest({\n    onChange,\n  })\n\n  const functions = useMemo(() => {\n    // counter spanのテキスト変更を監視してスクリーンリーダーメッセージを更新\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const updateSrMessage = debounce(() => {\n      startTransition(() => {\n        if (counterSpanRef.current) {\n          setSrCounterMessage(counterSpanRef.current.textContent || '')\n        }\n      })\n    }, 1000)\n    const actualUpdateCount = debounce((newValue: TextareaValue) => {\n      startTransition(() => {\n        setCount(getStringLength(newValue))\n      })\n    }, 200)\n\n    // 初回レンダリング時はスクリーンリーダー向けメッセージなどを更新したくないためskipする\n    // (実際のユーザー操作による変更でのみ更新すれば良い)\n    // useEffectでupdateCountが必ず呼びだされる\n    let firstCallUpdateCount = true\n    const updateCount = (newValue: TextareaValue) => {\n      if (firstCallUpdateCount) {\n        firstCallUpdateCount = false\n        return\n      }\n\n      actualUpdateCount(newValue)\n      updateSrMessage()\n    }\n\n    return {\n      updateCount,\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        updateCount(e.target.value)\n        latest.onChange?.(e)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    functions.updateCount(value ?? '')\n  }, [value, functions])\n\n  return (\n    <span className=\"shr-relative\">\n      <ActualTextarea\n        {...rest}\n        id={textareaId}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={functions.handleChange}\n        aria-describedby={`${maxLettersNoticeId} ${maxLettersId}`}\n        error={error || countError}\n      />\n      <VisuallyHiddenText id={maxLettersNoticeId}>\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters }}\n        />\n      </VisuallyHiddenText>\n      <VisuallyHiddenText as=\"output\" role=\"status\" htmlFor={textareaId}>\n        {srCounterMessage}\n      </VisuallyHiddenText>\n      <span\n        ref={counterSpanRef}\n        id={maxLettersId}\n        aria-hidden={true}\n        data-error={countError || undefined}\n        className=\"smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger\"\n      >\n        {count > maxLetters ? (\n          <Localizer\n            id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n            defaultText=\"{exceededLetters}文字オーバー\"\n            values={{ exceededLetters: count - maxLetters }}\n          />\n        ) : (\n          <Localizer\n            id=\"smarthr-ui/Textarea/availableLetters\"\n            defaultText=\"あと{availableLetters}文字\"\n            values={{ availableLetters: maxLetters - count }}\n          />\n        )}\n      </span>\n    </span>\n  )\n}\n\nconst ActualTextarea: FC<Omit<LocalTextareaProps, 'maxLetters'>> = ({\n  autoFocus,\n  width,\n  className,\n  autoResize = false,\n  maxRows = Infinity,\n  rows = 2,\n  error,\n  onChange,\n  externalRef,\n  ...rest\n}) => {\n  const theme = useTheme()\n\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null)\n  const [interimRows, setInterimRows] = useState(rows)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const latest = useLatest({\n    onChange,\n    autoFocus,\n    autoResize,\n    maxRows,\n    theme,\n    rows,\n  })\n\n  const functions = useMemo(\n    () => ({\n      callbackRef: (element: HTMLTextAreaElement | null) => {\n        textareaRef.current = element\n        if (element) {\n          // autoFocus時に、フォーカスを当てる\n          if (latest.autoFocus) {\n            element.focus()\n          }\n          // autoResize時に、初期値での高さを指定\n          if (latest.autoResize) {\n            setInterimRows(calculateIdealRows(element, latest.maxRows, latest.theme.leading.NORMAL))\n          }\n        }\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = latest.rows\n\n        if (latest.autoResize) {\n          const currentRows = calculateIdealRows(\n            e.target,\n            latest.maxRows,\n            latest.theme.leading.NORMAL,\n          )\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        latest.onChange?.(e)\n      },\n    }),\n    [latest],\n  )\n\n  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n    externalRef,\n    () => textareaRef.current,\n  )\n\n  return (\n    <textarea\n      {...rest}\n      data-smarthr-ui-input=\"true\"\n      onChange={functions.handleChange}\n      ref={functions.callbackRef}\n      aria-invalid={error || undefined}\n      rows={interimRows}\n      className={actualClassName}\n      style={{ width: typeof width === 'number' ? `${width}px` : width }}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;;;;;;;;AAQC;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAYP;AAKE;AACA;AACA;AAEA;;AAEE;AACA;AACF;;AAGA;;;AAIC;AAED;;;AAGE;;AAEI;;;AAGF;;AAEF;;AAEI;AACF;;;;;;AAOF;;;;;;AAOE;AACF;;;AAIE;AACE;AACA;;;AAGN;;AAGE;AACF;AAEA;AA4CF;AAEA;AAYE;AAEA;;AAGA;;;;;;;;AASC;AAED;AAEI;AACE;;;AAGE;;;;AAIA;AACE;;;;AAIN;;;AAIE;;;AAOE;;;AAIF;;AAEH;;;AAqBL;;"}
+{"version":3,"file":"Textarea.cjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FC,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  startTransition,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype BaseProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'textarea'>, keyof BaseProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Textarea-textarea',\n    'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n    'contrast-more:shr-border-high-contrast',\n    'placeholder:shr-text-grey',\n    'focus-visible:shr-focus-indicator',\n    'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n    'aria-[invalid]:shr-border-danger',\n  ],\n})\n\nconst calculateIdealRows = (\n  node: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!node) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    node.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ maxLetters, ...rest }, ref) =>\n  maxLetters ? (\n    <MaxLettersTextarea {...rest} externalRef={ref} maxLetters={maxLetters} />\n  ) : (\n    <ActualTextarea {...rest} externalRef={ref} />\n  ),\n)\n\ntype LocalTextareaProps = ComponentProps<typeof Textarea> & {\n  externalRef?: Ref<HTMLTextAreaElement>\n}\n\nconst MaxLettersTextarea: FC<\n  Omit<LocalTextareaProps, 'maxLetters'> & {\n    maxLetters: number\n  }\n> = ({ maxLetters, error, value, defaultValue, onChange, id, ...rest }) => {\n  const maxLettersId = useId()\n  const textareaId = id || `${maxLettersId}-textarea`\n  const maxLettersNoticeId = `${maxLettersId}-notice`\n\n  const counterSpanRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(() => {\n    const currentValue = defaultValue || value\n    return currentValue ? getStringLength(currentValue) : 0\n  })\n  const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n  const countError = count > maxLetters\n\n  const latest = useLatest({\n    onChange,\n  })\n\n  const functions = useMemo(() => {\n    // counter spanのテキスト変更を監視してスクリーンリーダーメッセージを更新\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const updateSrMessage = debounce(() => {\n      startTransition(() => {\n        if (counterSpanRef.current) {\n          setSrCounterMessage(counterSpanRef.current.textContent || '')\n        }\n      })\n    }, 1000)\n    const actualUpdateCount = debounce((newValue: TextareaValue) => {\n      startTransition(() => {\n        setCount(getStringLength(newValue))\n      })\n    }, 200)\n\n    // 初回レンダリング時はスクリーンリーダー向けメッセージなどを更新したくないためskipする\n    // (実際のユーザー操作による変更でのみ更新すれば良い)\n    // useEffectでupdateCountが必ず呼びだされる\n    let firstCallUpdateCount = true\n    const updateCount = (newValue: TextareaValue) => {\n      if (firstCallUpdateCount) {\n        firstCallUpdateCount = false\n        return\n      }\n\n      actualUpdateCount(newValue)\n      updateSrMessage()\n    }\n\n    return {\n      updateCount,\n      cancelDebounce: () => {\n        updateSrMessage.cancel()\n        actualUpdateCount.cancel()\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        updateCount(e.target.value)\n        latest.onChange?.(e)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    functions.updateCount(value ?? '')\n    return functions.cancelDebounce\n  }, [value, functions])\n\n  return (\n    <span className=\"shr-relative\">\n      <ActualTextarea\n        {...rest}\n        id={textareaId}\n        value={value}\n        defaultValue={defaultValue}\n        aria-describedby={`${maxLettersNoticeId} ${maxLettersId}`}\n        error={error || countError}\n        onChange={functions.handleChange}\n      />\n      <VisuallyHiddenText id={maxLettersNoticeId}>\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters }}\n        />\n      </VisuallyHiddenText>\n      <VisuallyHiddenText as=\"output\" role=\"status\" htmlFor={textareaId}>\n        {srCounterMessage}\n      </VisuallyHiddenText>\n      <span\n        ref={counterSpanRef}\n        id={maxLettersId}\n        aria-hidden={true}\n        data-error={countError || undefined}\n        className=\"smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger\"\n      >\n        {count > maxLetters ? (\n          <Localizer\n            id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n            defaultText=\"{exceededLetters}文字オーバー\"\n            values={{ exceededLetters: count - maxLetters }}\n          />\n        ) : (\n          <Localizer\n            id=\"smarthr-ui/Textarea/availableLetters\"\n            defaultText=\"あと{availableLetters}文字\"\n            values={{ availableLetters: maxLetters - count }}\n          />\n        )}\n      </span>\n    </span>\n  )\n}\n\nconst ActualTextarea: FC<Omit<LocalTextareaProps, 'maxLetters'>> = ({\n  autoFocus,\n  width,\n  className,\n  autoResize = false,\n  maxRows = Infinity,\n  rows = 2,\n  error,\n  onChange,\n  externalRef,\n  ...rest\n}) => {\n  const theme = useTheme()\n\n  const innerRef = useRef<HTMLTextAreaElement | null>(null)\n  const [interimRows, setInterimRows] = useState(rows)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const latest = useLatest({\n    onChange,\n    autoFocus,\n    autoResize,\n    maxRows,\n    theme,\n    rows,\n  })\n\n  const functions = useMemo(\n    () => ({\n      callbackRef: (node: HTMLTextAreaElement | null) => {\n        // TODO: useMergeRefs, useOnceCallbackが実装されたら適用する\n        innerRef.current = node\n\n        if (node) {\n          // autoFocus時に、フォーカスを当てる\n          if (latest.autoFocus) {\n            node.focus()\n          }\n          // autoResize時に、初期値での高さを指定\n          if (latest.autoResize) {\n            setInterimRows(calculateIdealRows(node, latest.maxRows, latest.theme.leading.NORMAL))\n          }\n        }\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = latest.rows\n\n        if (latest.autoResize) {\n          const currentRows = calculateIdealRows(\n            e.target,\n            latest.maxRows,\n            latest.theme.leading.NORMAL,\n          )\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        latest.onChange?.(e)\n      },\n    }),\n    [latest],\n  )\n\n  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n    externalRef,\n    () => innerRef.current,\n    [],\n  )\n\n  return (\n    <textarea\n      {...rest}\n      ref={functions.callbackRef}\n      aria-invalid={error || undefined}\n      data-smarthr-ui-input=\"true\"\n      rows={interimRows}\n      onChange={functions.handleChange}\n      className={actualClassName}\n      style={{ width: typeof width === 'number' ? `${width}px` : width }}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;;;;;;;;AAQC;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAYP;AAKE;AACA;AACA;AAEA;;AAEE;AACA;AACF;;AAGA;;;AAIC;AAED;;;AAGE;;AAEI;;;AAGF;;AAEF;;AAEI;AACF;;;;;;AAOF;;;;;;AAOE;AACF;;;;;;;AAQE;AACE;AACA;;;AAGN;;AAGE;;AAEF;AAEA;AA4CF;AAEA;AAYE;AAEA;;AAGA;;;;;;;;AASC;AAED;AAEI;;AAEE;;;AAIE;;;;AAIA;AACE;;;;AAIN;;;AAIE;;;AAOE;;;AAIF;;AAEH;AAIH;;AAkBF;;"}

package/lib/components/Textarea/Textarea.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useState, useMemo, useEffect, useImperativeHandle, startTransition } from 'react';
+import { forwardRef, useId, useRef, useState, useMemo, startTransition, useEffect, useImperativeHandle } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useLatest } from '../../hooks/useLatest.js';
 import { useTheme } from '../../hooks/useTheme.js';
@@ -44,12 +44,12 @@ const classNameGenerator = ce({
         'aria-[invalid]:shr-border-danger',
     ],
 });
-const calculateIdealRows = (element, maxRows, lineHeightNormal) => {
-    if (!element) {
+const calculateIdealRows = (node, maxRows, lineHeightNormal) => {
+    if (!node) {
         return 0;
     }
     // 現在の入力値に応じた行数
-    const currentInputValueRows = Math.floor(element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal));
+    const currentInputValueRows = Math.floor(node.scrollHeight / (defaultHtmlFontSize * lineHeightNormal));
     return currentInputValueRows < maxRows ? currentInputValueRows : maxRows;
 };
 const Textarea = forwardRef(({ maxLetters, ...rest }, ref) => maxLetters ? (jsx(MaxLettersTextarea, { ...rest, externalRef: ref, maxLetters: maxLetters })) : (jsx(ActualTextarea, { ...rest, externalRef: ref })));
@@ -96,6 +96,10 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
         };
         return {
             updateCount,
+            cancelDebounce: () => {
+                updateSrMessage.cancel();
+                actualUpdateCount.cancel();
+            },
             handleChange: (e) => {
                 updateCount(e.target.value);
                 latest.onChange?.(e);
@@ -104,12 +108,13 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
     }, [latest]);
     useEffect(() => {
         functions.updateCount(value ?? '');
+        return functions.cancelDebounce;
     }, [value, functions]);
-    return (jsxs("span", { className: "shr-relative", children: [jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, onChange: functions.handleChange, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError }), jsx(VisuallyHiddenText, { id: maxLettersNoticeId, children: jsx(Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsx(VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsx(Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsx(Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
+    return (jsxs("span", { className: "shr-relative", children: [jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError, onChange: functions.handleChange }), jsx(VisuallyHiddenText, { id: maxLettersNoticeId, children: jsx(Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsx(VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsx(Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsx(Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
 };
 const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRows = Infinity, rows = 2, error, onChange, externalRef, ...rest }) => {
     const theme = useTheme();
-    const textareaRef = useRef(null);
+    const innerRef = useRef(null);
     const [interimRows, setInterimRows] = useState(rows);
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
     const latest = useLatest({
@@ -121,16 +126,17 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
         rows,
     });
     const functions = useMemo(() => ({
-        callbackRef: (element) => {
-            textareaRef.current = element;
-            if (element) {
+        callbackRef: (node) => {
+            // TODO: useMergeRefs, useOnceCallbackが実装されたら適用する
+            innerRef.current = node;
+            if (node) {
                 // autoFocus時に、フォーカスを当てる
                 if (latest.autoFocus) {
-                    element.focus();
+                    node.focus();
                 }
                 // autoResize時に、初期値での高さを指定
                 if (latest.autoResize) {
-                    setInterimRows(calculateIdealRows(element, latest.maxRows, latest.theme.leading.NORMAL));
+                    setInterimRows(calculateIdealRows(node, latest.maxRows, latest.theme.leading.NORMAL));
                 }
             }
         },
@@ -146,8 +152,8 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
             latest.onChange?.(e);
         },
     }), [latest]);
-    useImperativeHandle(externalRef, () => textareaRef.current);
-    return (jsx("textarea", { ...rest, "data-smarthr-ui-input": "true", onChange: functions.handleChange, ref: functions.callbackRef, "aria-invalid": error || undefined, rows: interimRows, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
+    useImperativeHandle(externalRef, () => innerRef.current, []);
+    return (jsx("textarea", { ...rest, ref: functions.callbackRef, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", rows: interimRows, onChange: functions.handleChange, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
 };
 
 export { Textarea };

package/lib/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FC,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  startTransition,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype BaseProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'textarea'>, keyof BaseProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Textarea-textarea',\n    'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n    'contrast-more:shr-border-high-contrast',\n    'placeholder:shr-text-grey',\n    'focus-visible:shr-focus-indicator',\n    'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n    'aria-[invalid]:shr-border-danger',\n  ],\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ maxLetters, ...rest }, ref) =>\n  maxLetters ? (\n    <MaxLettersTextarea {...rest} externalRef={ref} maxLetters={maxLetters} />\n  ) : (\n    <ActualTextarea {...rest} externalRef={ref} />\n  ),\n)\n\ntype LocalTextareaProps = ComponentProps<typeof Textarea> & {\n  externalRef?: Ref<HTMLTextAreaElement>\n}\n\nconst MaxLettersTextarea: FC<\n  Omit<LocalTextareaProps, 'maxLetters'> & {\n    maxLetters: number\n  }\n> = ({ maxLetters, error, value, defaultValue, onChange, id, ...rest }) => {\n  const maxLettersId = useId()\n  const textareaId = id || `${maxLettersId}-textarea`\n  const maxLettersNoticeId = `${maxLettersId}-notice`\n\n  const counterSpanRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(() => {\n    const currentValue = defaultValue || value\n    return currentValue ? getStringLength(currentValue) : 0\n  })\n  const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n  const countError = count > maxLetters\n\n  const latest = useLatest({\n    onChange,\n  })\n\n  const functions = useMemo(() => {\n    // counter spanのテキスト変更を監視してスクリーンリーダーメッセージを更新\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const updateSrMessage = debounce(() => {\n      startTransition(() => {\n        if (counterSpanRef.current) {\n          setSrCounterMessage(counterSpanRef.current.textContent || '')\n        }\n      })\n    }, 1000)\n    const actualUpdateCount = debounce((newValue: TextareaValue) => {\n      startTransition(() => {\n        setCount(getStringLength(newValue))\n      })\n    }, 200)\n\n    // 初回レンダリング時はスクリーンリーダー向けメッセージなどを更新したくないためskipする\n    // (実際のユーザー操作による変更でのみ更新すれば良い)\n    // useEffectでupdateCountが必ず呼びだされる\n    let firstCallUpdateCount = true\n    const updateCount = (newValue: TextareaValue) => {\n      if (firstCallUpdateCount) {\n        firstCallUpdateCount = false\n        return\n      }\n\n      actualUpdateCount(newValue)\n      updateSrMessage()\n    }\n\n    return {\n      updateCount,\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        updateCount(e.target.value)\n        latest.onChange?.(e)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    functions.updateCount(value ?? '')\n  }, [value, functions])\n\n  return (\n    <span className=\"shr-relative\">\n      <ActualTextarea\n        {...rest}\n        id={textareaId}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={functions.handleChange}\n        aria-describedby={`${maxLettersNoticeId} ${maxLettersId}`}\n        error={error || countError}\n      />\n      <VisuallyHiddenText id={maxLettersNoticeId}>\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters }}\n        />\n      </VisuallyHiddenText>\n      <VisuallyHiddenText as=\"output\" role=\"status\" htmlFor={textareaId}>\n        {srCounterMessage}\n      </VisuallyHiddenText>\n      <span\n        ref={counterSpanRef}\n        id={maxLettersId}\n        aria-hidden={true}\n        data-error={countError || undefined}\n        className=\"smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger\"\n      >\n        {count > maxLetters ? (\n          <Localizer\n            id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n            defaultText=\"{exceededLetters}文字オーバー\"\n            values={{ exceededLetters: count - maxLetters }}\n          />\n        ) : (\n          <Localizer\n            id=\"smarthr-ui/Textarea/availableLetters\"\n            defaultText=\"あと{availableLetters}文字\"\n            values={{ availableLetters: maxLetters - count }}\n          />\n        )}\n      </span>\n    </span>\n  )\n}\n\nconst ActualTextarea: FC<Omit<LocalTextareaProps, 'maxLetters'>> = ({\n  autoFocus,\n  width,\n  className,\n  autoResize = false,\n  maxRows = Infinity,\n  rows = 2,\n  error,\n  onChange,\n  externalRef,\n  ...rest\n}) => {\n  const theme = useTheme()\n\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null)\n  const [interimRows, setInterimRows] = useState(rows)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const latest = useLatest({\n    onChange,\n    autoFocus,\n    autoResize,\n    maxRows,\n    theme,\n    rows,\n  })\n\n  const functions = useMemo(\n    () => ({\n      callbackRef: (element: HTMLTextAreaElement | null) => {\n        textareaRef.current = element\n        if (element) {\n          // autoFocus時に、フォーカスを当てる\n          if (latest.autoFocus) {\n            element.focus()\n          }\n          // autoResize時に、初期値での高さを指定\n          if (latest.autoResize) {\n            setInterimRows(calculateIdealRows(element, latest.maxRows, latest.theme.leading.NORMAL))\n          }\n        }\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = latest.rows\n\n        if (latest.autoResize) {\n          const currentRows = calculateIdealRows(\n            e.target,\n            latest.maxRows,\n            latest.theme.leading.NORMAL,\n          )\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        latest.onChange?.(e)\n      },\n    }),\n    [latest],\n  )\n\n  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n    externalRef,\n    () => textareaRef.current,\n  )\n\n  return (\n    <textarea\n      {...rest}\n      data-smarthr-ui-input=\"true\"\n      onChange={functions.handleChange}\n      ref={functions.callbackRef}\n      aria-invalid={error || undefined}\n      rows={interimRows}\n      className={actualClassName}\n      style={{ width: typeof width === 'number' ? `${width}px` : width }}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkDA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;;;;;;;;AAQC;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAYP;AAKE;AACA;AACA;AAEA;;AAEE;AACA;AACF;;AAGA;;;AAIC;AAED;;;AAGE;;AAEI;;;AAGF;;AAEF;;AAEI;AACF;;;;;;AAOF;;;;;;AAOE;AACF;;;AAIE;AACE;AACA;;;AAGN;;AAGE;AACF;AAEA;AA4CF;AAEA;AAYE;AAEA;;AAGA;;;;;;;;AASC;AAED;AAEI;AACE;;;AAGE;;;;AAIA;AACE;;;;AAIN;;;AAIE;;;AAOE;;;AAIF;;AAEH;;;AAqBL;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FC,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  startTransition,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype BaseProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'textarea'>, keyof BaseProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Textarea-textarea',\n    'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n    'contrast-more:shr-border-high-contrast',\n    'placeholder:shr-text-grey',\n    'focus-visible:shr-focus-indicator',\n    'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n    'aria-[invalid]:shr-border-danger',\n  ],\n})\n\nconst calculateIdealRows = (\n  node: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!node) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    node.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ maxLetters, ...rest }, ref) =>\n  maxLetters ? (\n    <MaxLettersTextarea {...rest} externalRef={ref} maxLetters={maxLetters} />\n  ) : (\n    <ActualTextarea {...rest} externalRef={ref} />\n  ),\n)\n\ntype LocalTextareaProps = ComponentProps<typeof Textarea> & {\n  externalRef?: Ref<HTMLTextAreaElement>\n}\n\nconst MaxLettersTextarea: FC<\n  Omit<LocalTextareaProps, 'maxLetters'> & {\n    maxLetters: number\n  }\n> = ({ maxLetters, error, value, defaultValue, onChange, id, ...rest }) => {\n  const maxLettersId = useId()\n  const textareaId = id || `${maxLettersId}-textarea`\n  const maxLettersNoticeId = `${maxLettersId}-notice`\n\n  const counterSpanRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(() => {\n    const currentValue = defaultValue || value\n    return currentValue ? getStringLength(currentValue) : 0\n  })\n  const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n  const countError = count > maxLetters\n\n  const latest = useLatest({\n    onChange,\n  })\n\n  const functions = useMemo(() => {\n    // counter spanのテキスト変更を監視してスクリーンリーダーメッセージを更新\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const updateSrMessage = debounce(() => {\n      startTransition(() => {\n        if (counterSpanRef.current) {\n          setSrCounterMessage(counterSpanRef.current.textContent || '')\n        }\n      })\n    }, 1000)\n    const actualUpdateCount = debounce((newValue: TextareaValue) => {\n      startTransition(() => {\n        setCount(getStringLength(newValue))\n      })\n    }, 200)\n\n    // 初回レンダリング時はスクリーンリーダー向けメッセージなどを更新したくないためskipする\n    // (実際のユーザー操作による変更でのみ更新すれば良い)\n    // useEffectでupdateCountが必ず呼びだされる\n    let firstCallUpdateCount = true\n    const updateCount = (newValue: TextareaValue) => {\n      if (firstCallUpdateCount) {\n        firstCallUpdateCount = false\n        return\n      }\n\n      actualUpdateCount(newValue)\n      updateSrMessage()\n    }\n\n    return {\n      updateCount,\n      cancelDebounce: () => {\n        updateSrMessage.cancel()\n        actualUpdateCount.cancel()\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        updateCount(e.target.value)\n        latest.onChange?.(e)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    functions.updateCount(value ?? '')\n    return functions.cancelDebounce\n  }, [value, functions])\n\n  return (\n    <span className=\"shr-relative\">\n      <ActualTextarea\n        {...rest}\n        id={textareaId}\n        value={value}\n        defaultValue={defaultValue}\n        aria-describedby={`${maxLettersNoticeId} ${maxLettersId}`}\n        error={error || countError}\n        onChange={functions.handleChange}\n      />\n      <VisuallyHiddenText id={maxLettersNoticeId}>\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters }}\n        />\n      </VisuallyHiddenText>\n      <VisuallyHiddenText as=\"output\" role=\"status\" htmlFor={textareaId}>\n        {srCounterMessage}\n      </VisuallyHiddenText>\n      <span\n        ref={counterSpanRef}\n        id={maxLettersId}\n        aria-hidden={true}\n        data-error={countError || undefined}\n        className=\"smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger\"\n      >\n        {count > maxLetters ? (\n          <Localizer\n            id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n            defaultText=\"{exceededLetters}文字オーバー\"\n            values={{ exceededLetters: count - maxLetters }}\n          />\n        ) : (\n          <Localizer\n            id=\"smarthr-ui/Textarea/availableLetters\"\n            defaultText=\"あと{availableLetters}文字\"\n            values={{ availableLetters: maxLetters - count }}\n          />\n        )}\n      </span>\n    </span>\n  )\n}\n\nconst ActualTextarea: FC<Omit<LocalTextareaProps, 'maxLetters'>> = ({\n  autoFocus,\n  width,\n  className,\n  autoResize = false,\n  maxRows = Infinity,\n  rows = 2,\n  error,\n  onChange,\n  externalRef,\n  ...rest\n}) => {\n  const theme = useTheme()\n\n  const innerRef = useRef<HTMLTextAreaElement | null>(null)\n  const [interimRows, setInterimRows] = useState(rows)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const latest = useLatest({\n    onChange,\n    autoFocus,\n    autoResize,\n    maxRows,\n    theme,\n    rows,\n  })\n\n  const functions = useMemo(\n    () => ({\n      callbackRef: (node: HTMLTextAreaElement | null) => {\n        // TODO: useMergeRefs, useOnceCallbackが実装されたら適用する\n        innerRef.current = node\n\n        if (node) {\n          // autoFocus時に、フォーカスを当てる\n          if (latest.autoFocus) {\n            node.focus()\n          }\n          // autoResize時に、初期値での高さを指定\n          if (latest.autoResize) {\n            setInterimRows(calculateIdealRows(node, latest.maxRows, latest.theme.leading.NORMAL))\n          }\n        }\n      },\n      handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = latest.rows\n\n        if (latest.autoResize) {\n          const currentRows = calculateIdealRows(\n            e.target,\n            latest.maxRows,\n            latest.theme.leading.NORMAL,\n          )\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        latest.onChange?.(e)\n      },\n    }),\n    [latest],\n  )\n\n  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n    externalRef,\n    () => innerRef.current,\n    [],\n  )\n\n  return (\n    <textarea\n      {...rest}\n      ref={functions.callbackRef}\n      aria-invalid={error || undefined}\n      data-smarthr-ui-input=\"true\"\n      rows={interimRows}\n      onChange={functions.handleChange}\n      className={actualClassName}\n      style={{ width: typeof width === 'number' ? `${width}px` : width }}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkDA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;;;;;;;;AAQC;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAYP;AAKE;AACA;AACA;AAEA;;AAEE;AACA;AACF;;AAGA;;;AAIC;AAED;;;AAGE;;AAEI;;;AAGF;;AAEF;;AAEI;AACF;;;;;;AAOF;;;;;;AAOE;AACF;;;;;;;AAQE;AACE;AACA;;;AAGN;;AAGE;;AAEF;AAEA;AA4CF;AAEA;AAYE;AAEA;;AAGA;;;;;;;;AASC;AAED;AAEI;;AAEE;;;AAIE;;;;AAIA;AACE;;;;AAIN;;;AAIE;;;AAOE;;;AAIF;;AAEH;AAIH;;AAkBF;;"}

package/lib/components/Tooltip/TooltipPortal.cjs

@@ -52,6 +52,7 @@ const TooltipPortal = ({ messageId, message, isVisible, parentRect, isIcon }) =>
         window.addEventListener('resize', debouncedAction);
         return () => {
             window.removeEventListener('resize', debouncedAction);
+            debouncedAction.cancel();
         };
     }, [parentRect, theme]);
     return (jsxRuntime.jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: CLASS_NAMES.container, style: isVisible ? style : undefined, children: jsxRuntime.jsx(components_Tooltip_ControlledTooltip.ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: CLASS_NAMES.balloon, children: jsxRuntime.jsx("div", { id: messageId, className: CLASS_NAMES.balloonText, children: message }) }) }));

package/lib/components/Tooltip/TooltipPortal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.cjs","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useCallback, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { container, balloon, balloonText } = classNameGenerator()\n\n  return {\n    container: container(),\n    balloon: balloon(),\n    balloonText: balloonText(),\n  }\n})()\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  const portalRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!element || !parentRect) {\n        return\n      }\n\n      const action = () => {\n        const vertical = calculateVertical(element.offsetHeight, parentRect)\n        const horizontal = calculateHorizontal(element.offsetWidth, parentRect, theme)\n\n        setStyle({\n          insetBlockStart: vertical.insetBlockStart,\n          insetInlineStart: horizontal.insetInlineStart,\n          insetInlineEnd: horizontal.insetInlineEnd,\n          maxWidth: horizontal.maxWidth,\n          maxHeight: vertical.maxHeight,\n        })\n        setActualVertical(vertical.alignment)\n        setActualHorizontal(horizontal.alignment)\n      }\n      const debouncedAction = debounce(action, 100)\n\n      action()\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n      }\n    },\n    [parentRect, theme],\n  )\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={CLASS_NAMES.container}\n      style={isVisible ? style : undefined}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={CLASS_NAMES.balloon}\n      >\n        <div id={messageId} className={CLASS_NAMES.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  const leftSpacing = triggerAlignCenter - portalHalfWidth\n  const rightSpacingEdge = document.body.clientWidth - SPACING\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (leftSpacing > SPACING && triggerAlignCenter + portalHalfWidth < rightSpacingEdge) {\n    const insetInlineStart = `${leftSpacing}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${rightSpacingEdge - parentRect.right - scrollX}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;;;;;;;AAQA;AAEA;AACA;AAKO;AACL;;;;AAKA;AAEI;;;;;AAME;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAIF;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;AAGA;;;;AAKE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;;;AAQF;;AAEA;AACA;;AAEJ;;"}
+{"version":3,"file":"TooltipPortal.cjs","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useCallback, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { container, balloon, balloonText } = classNameGenerator()\n\n  return {\n    container: container(),\n    balloon: balloon(),\n    balloonText: balloonText(),\n  }\n})()\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  const portalRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!element || !parentRect) {\n        return\n      }\n\n      const action = () => {\n        const vertical = calculateVertical(element.offsetHeight, parentRect)\n        const horizontal = calculateHorizontal(element.offsetWidth, parentRect, theme)\n\n        setStyle({\n          insetBlockStart: vertical.insetBlockStart,\n          insetInlineStart: horizontal.insetInlineStart,\n          insetInlineEnd: horizontal.insetInlineEnd,\n          maxWidth: horizontal.maxWidth,\n          maxHeight: vertical.maxHeight,\n        })\n        setActualVertical(vertical.alignment)\n        setActualHorizontal(horizontal.alignment)\n      }\n      const debouncedAction = debounce(action, 100)\n\n      action()\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n        debouncedAction.cancel()\n      }\n    },\n    [parentRect, theme],\n  )\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={CLASS_NAMES.container}\n      style={isVisible ? style : undefined}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={CLASS_NAMES.balloon}\n      >\n        <div id={messageId} className={CLASS_NAMES.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  const leftSpacing = triggerAlignCenter - portalHalfWidth\n  const rightSpacingEdge = document.body.clientWidth - SPACING\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (leftSpacing > SPACING && triggerAlignCenter + portalHalfWidth < rightSpacingEdge) {\n    const insetInlineStart = `${leftSpacing}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${rightSpacingEdge - parentRect.right - scrollX}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;;;;;;;AAQA;AAEA;AACA;AAKO;AACL;;;;AAKA;AAEI;;;;;AAME;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;;AAEF;AACF;AAIF;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;AAGA;;;;AAKE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;;;AAQF;;AAEA;AACA;;AAEJ;;"}

package/lib/components/Tooltip/TooltipPortal.js

@@ -50,6 +50,7 @@ const TooltipPortal = ({ messageId, message, isVisible, parentRect, isIcon }) =>
         window.addEventListener('resize', debouncedAction);
         return () => {
             window.removeEventListener('resize', debouncedAction);
+            debouncedAction.cancel();
         };
     }, [parentRect, theme]);
     return (jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: CLASS_NAMES.container, style: isVisible ? style : undefined, children: jsx(ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: CLASS_NAMES.balloon, children: jsx("div", { id: messageId, className: CLASS_NAMES.balloonText, children: message }) }) }));

package/lib/components/Tooltip/TooltipPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.js","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useCallback, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { container, balloon, balloonText } = classNameGenerator()\n\n  return {\n    container: container(),\n    balloon: balloon(),\n    balloonText: balloonText(),\n  }\n})()\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  const portalRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!element || !parentRect) {\n        return\n      }\n\n      const action = () => {\n        const vertical = calculateVertical(element.offsetHeight, parentRect)\n        const horizontal = calculateHorizontal(element.offsetWidth, parentRect, theme)\n\n        setStyle({\n          insetBlockStart: vertical.insetBlockStart,\n          insetInlineStart: horizontal.insetInlineStart,\n          insetInlineEnd: horizontal.insetInlineEnd,\n          maxWidth: horizontal.maxWidth,\n          maxHeight: vertical.maxHeight,\n        })\n        setActualVertical(vertical.alignment)\n        setActualHorizontal(horizontal.alignment)\n      }\n      const debouncedAction = debounce(action, 100)\n\n      action()\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n      }\n    },\n    [parentRect, theme],\n  )\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={CLASS_NAMES.container}\n      style={isVisible ? style : undefined}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={CLASS_NAMES.balloon}\n      >\n        <div id={messageId} className={CLASS_NAMES.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  const leftSpacing = triggerAlignCenter - portalHalfWidth\n  const rightSpacingEdge = document.body.clientWidth - SPACING\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (leftSpacing > SPACING && triggerAlignCenter + portalHalfWidth < rightSpacingEdge) {\n    const insetInlineStart = `${leftSpacing}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${rightSpacingEdge - parentRect.right - scrollX}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;;;;;;;AAQA;AAEA;AACA;AAKO;AACL;;;;AAKA;AAEI;;;;;AAME;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAIF;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;AAGA;;;;AAKE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;;;AAQF;;AAEA;AACA;;AAEJ;;"}
+{"version":3,"file":"TooltipPortal.js","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useCallback, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { container, balloon, balloonText } = classNameGenerator()\n\n  return {\n    container: container(),\n    balloon: balloon(),\n    balloonText: balloonText(),\n  }\n})()\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  const portalRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!element || !parentRect) {\n        return\n      }\n\n      const action = () => {\n        const vertical = calculateVertical(element.offsetHeight, parentRect)\n        const horizontal = calculateHorizontal(element.offsetWidth, parentRect, theme)\n\n        setStyle({\n          insetBlockStart: vertical.insetBlockStart,\n          insetInlineStart: horizontal.insetInlineStart,\n          insetInlineEnd: horizontal.insetInlineEnd,\n          maxWidth: horizontal.maxWidth,\n          maxHeight: vertical.maxHeight,\n        })\n        setActualVertical(vertical.alignment)\n        setActualHorizontal(horizontal.alignment)\n      }\n      const debouncedAction = debounce(action, 100)\n\n      action()\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n        debouncedAction.cancel()\n      }\n    },\n    [parentRect, theme],\n  )\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={CLASS_NAMES.container}\n      style={isVisible ? style : undefined}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={CLASS_NAMES.balloon}\n      >\n        <div id={messageId} className={CLASS_NAMES.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  const leftSpacing = triggerAlignCenter - portalHalfWidth\n  const rightSpacingEdge = document.body.clientWidth - SPACING\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (leftSpacing > SPACING && triggerAlignCenter + portalHalfWidth < rightSpacingEdge) {\n    const insetInlineStart = `${leftSpacing}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${rightSpacingEdge - parentRect.right - scrollX}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;;;;;;;AAQA;AAEA;AACA;AAKO;AACL;;;;AAKA;AAEI;;;;;AAME;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;;AAEF;AACF;AAIF;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;AAGA;;;;AAKE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;;;AAQF;;AAEA;AACA;;AAEJ;;"}

package/lib/hooks/useClick.cjs

@@ -1,21 +1,24 @@
 'use strict';
 
 var React = require('react');
+var hooks_useLatest = require('./useLatest.cjs');
 
+// TODO: useOuterClickと統合する
 function useClick(innerRefs, innerCallback, outerCallback) {
+    const latest = hooks_useLatest.useLatest({ innerRefs, innerCallback, outerCallback });
     React.useEffect(() => {
         const handleClick = (e) => {
-            if (innerRefs.some((target) => isEventIncludedParent(e, target.current))) {
-                innerCallback(e);
+            if (latest.innerRefs.some((target) => isEventIncludedParent(e, target.current))) {
+                latest.innerCallback(e);
                 return;
             }
-            outerCallback(e);
+            latest.outerCallback(e);
         };
         window.addEventListener('click', handleClick);
         return () => {
             window.removeEventListener('click', handleClick);
         };
-    }, [innerRefs, innerCallback, outerCallback]);
+    }, [latest]);
 }
 function isEventIncludedParent(e, parent) {
     if (!parent)

package/lib/hooks/useClick.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useClick.cjs","sources":["../../src/hooks/useClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nexport function useClick(\n  innerRefs: Array<RefObject<HTMLElement>>,\n  innerCallback: (e: MouseEvent) => void,\n  outerCallback: (e: MouseEvent) => void,\n) {\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (innerRefs.some((target) => isEventIncludedParent(e, target.current))) {\n        innerCallback(e)\n\n        return\n      }\n\n      outerCallback(e)\n    }\n\n    window.addEventListener('click', handleClick)\n\n    return () => {\n      window.removeEventListener('click', handleClick)\n    }\n  }, [innerRefs, innerCallback, outerCallback])\n}\n\nfunction isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return path.includes(parent)\n}\n"],"names":["useEffect"],"mappings":";;;;SAEgB,QAAQ,CACtB,SAAwC,EACxC,aAAsC,EACtC,aAAsC,EAAA;IAEtCA,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,WAAW,GAAG,CAAC,CAAa,KAAI;AACpC,YAAA,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;gBACxE,aAAa,CAAC,CAAC,CAAC;gBAEhB;YACF;YAEA,aAAa,CAAC,CAAC,CAAC;AAClB,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAE7C,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAClD,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AAC/C;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC9B;;;;"}
+{"version":3,"file":"useClick.cjs","sources":["../../src/hooks/useClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nimport { useLatest } from './useLatest'\n\n// TODO: useOuterClickと統合する\nexport function useClick(\n  innerRefs: Array<RefObject<HTMLElement>>,\n  innerCallback: (e: MouseEvent) => void,\n  outerCallback: (e: MouseEvent) => void,\n) {\n  const latest = useLatest({ innerRefs, innerCallback, outerCallback })\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (latest.innerRefs.some((target) => isEventIncludedParent(e, target.current))) {\n        latest.innerCallback(e)\n\n        return\n      }\n\n      latest.outerCallback(e)\n    }\n\n    window.addEventListener('click', handleClick)\n\n    return () => {\n      window.removeEventListener('click', handleClick)\n    }\n  }, [latest])\n}\n\nfunction isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return path.includes(parent)\n}\n"],"names":["useLatest","useEffect"],"mappings":";;;;;AAIA;SACgB,QAAQ,CACtB,SAAwC,EACxC,aAAsC,EACtC,aAAsC,EAAA;AAEtC,IAAA,MAAM,MAAM,GAAGA,yBAAS,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;IAErEC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,WAAW,GAAG,CAAC,CAAa,KAAI;YACpC,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AAC/E,gBAAA,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;gBAEvB;YACF;AAEA,YAAA,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AACzB,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAE7C,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAClD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC9B;;;;"}

package/lib/hooks/useClick.js

@@ -1,19 +1,22 @@
 import { useEffect } from 'react';
+import { useLatest } from './useLatest.js';
 
+// TODO: useOuterClickと統合する
 function useClick(innerRefs, innerCallback, outerCallback) {
+    const latest = useLatest({ innerRefs, innerCallback, outerCallback });
     useEffect(() => {
         const handleClick = (e) => {
-            if (innerRefs.some((target) => isEventIncludedParent(e, target.current))) {
-                innerCallback(e);
+            if (latest.innerRefs.some((target) => isEventIncludedParent(e, target.current))) {
+                latest.innerCallback(e);
                 return;
             }
-            outerCallback(e);
+            latest.outerCallback(e);
         };
         window.addEventListener('click', handleClick);
         return () => {
             window.removeEventListener('click', handleClick);
         };
-    }, [innerRefs, innerCallback, outerCallback]);
+    }, [latest]);
 }
 function isEventIncludedParent(e, parent) {
     if (!parent)

package/lib/hooks/useClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClick.js","sources":["../../src/hooks/useClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nexport function useClick(\n  innerRefs: Array<RefObject<HTMLElement>>,\n  innerCallback: (e: MouseEvent) => void,\n  outerCallback: (e: MouseEvent) => void,\n) {\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (innerRefs.some((target) => isEventIncludedParent(e, target.current))) {\n        innerCallback(e)\n\n        return\n      }\n\n      outerCallback(e)\n    }\n\n    window.addEventListener('click', handleClick)\n\n    return () => {\n      window.removeEventListener('click', handleClick)\n    }\n  }, [innerRefs, innerCallback, outerCallback])\n}\n\nfunction isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return path.includes(parent)\n}\n"],"names":[],"mappings":";;SAEgB,QAAQ,CACtB,SAAwC,EACxC,aAAsC,EACtC,aAAsC,EAAA;IAEtC,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,WAAW,GAAG,CAAC,CAAa,KAAI;AACpC,YAAA,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;gBACxE,aAAa,CAAC,CAAC,CAAC;gBAEhB;YACF;YAEA,aAAa,CAAC,CAAC,CAAC;AAClB,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAE7C,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAClD,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AAC/C;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC9B;;;;"}
+{"version":3,"file":"useClick.js","sources":["../../src/hooks/useClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nimport { useLatest } from './useLatest'\n\n// TODO: useOuterClickと統合する\nexport function useClick(\n  innerRefs: Array<RefObject<HTMLElement>>,\n  innerCallback: (e: MouseEvent) => void,\n  outerCallback: (e: MouseEvent) => void,\n) {\n  const latest = useLatest({ innerRefs, innerCallback, outerCallback })\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (latest.innerRefs.some((target) => isEventIncludedParent(e, target.current))) {\n        latest.innerCallback(e)\n\n        return\n      }\n\n      latest.outerCallback(e)\n    }\n\n    window.addEventListener('click', handleClick)\n\n    return () => {\n      window.removeEventListener('click', handleClick)\n    }\n  }, [latest])\n}\n\nfunction isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return path.includes(parent)\n}\n"],"names":[],"mappings":";;;AAIA;SACgB,QAAQ,CACtB,SAAwC,EACxC,aAAsC,EACtC,aAAsC,EAAA;AAEtC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;IAErE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,WAAW,GAAG,CAAC,CAAa,KAAI;YACpC,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AAC/E,gBAAA,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;gBAEvB;YACF;AAEA,YAAA,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AACzB,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAE7C,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAClD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC9B;;;;"}

package/lib/hooks/useOuterClick.cjs

@@ -1,22 +1,21 @@
 'use strict';
 
 var React = require('react');
+var hooks_useLatest = require('./useLatest.cjs');
 
 function useOuterClick(targets, callback) {
-    // callbackをrefに保存（毎レンダリング時に最新の値を設定）
-    const callbackRef = React.useRef(callback);
-    callbackRef.current = callback;
+    const latest = hooks_useLatest.useLatest({ targets, callback });
     React.useEffect(() => {
         const handleOuterClick = (e) => {
-            if (targets.every((target) => isEventExcludedParent(e, target.current))) {
-                callbackRef.current(e);
+            if (latest.targets.every((target) => isEventExcludedParent(e, target.current))) {
+                latest.callback(e);
             }
         };
         window.addEventListener('click', handleOuterClick);
         return () => {
             window.removeEventListener('click', handleOuterClick);
         };
-    }, [targets]);
+    }, [latest]);
 }
 function isEventExcludedParent(e, parent) {
     if (!parent)

package/lib/hooks/useOuterClick.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useOuterClick.cjs","sources":["../../src/hooks/useOuterClick.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react'\n\nexport function useOuterClick(\n  targets: Array<RefObject<HTMLElement>>,\n  callback: (e: MouseEvent) => void,\n) {\n  // callbackをrefに保存（毎レンダリング時に最新の値を設定）\n  const callbackRef = useRef(callback)\n  callbackRef.current = callback\n\n  useEffect(() => {\n    const handleOuterClick = (e: MouseEvent) => {\n      if (targets.every((target) => isEventExcludedParent(e, target.current))) {\n        callbackRef.current(e)\n      }\n    }\n\n    window.addEventListener('click', handleOuterClick)\n\n    return () => {\n      window.removeEventListener('click', handleOuterClick)\n    }\n  }, [targets])\n}\n\nfunction isEventExcludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return !path.includes(parent)\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;AAEM,SAAU,aAAa,CAC3B,OAAsC,EACtC,QAAiC,EAAA;;AAGjC,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;IAE9BC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;AACzC,YAAA,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AACvE,gBAAA,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;YACxB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AAElD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AACvD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AACf;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC/B;;;;"}
+{"version":3,"file":"useOuterClick.cjs","sources":["../../src/hooks/useOuterClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nimport { useLatest } from './useLatest'\n\nexport function useOuterClick(\n  targets: Array<RefObject<HTMLElement>>,\n  callback: (e: MouseEvent) => void,\n) {\n  const latest = useLatest({ targets, callback })\n\n  useEffect(() => {\n    const handleOuterClick = (e: MouseEvent) => {\n      if (latest.targets.every((target) => isEventExcludedParent(e, target.current))) {\n        latest.callback(e)\n      }\n    }\n\n    window.addEventListener('click', handleOuterClick)\n\n    return () => {\n      window.removeEventListener('click', handleOuterClick)\n    }\n  }, [latest])\n}\n\nfunction isEventExcludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return !path.includes(parent)\n}\n"],"names":["useLatest","useEffect"],"mappings":";;;;;AAIM,SAAU,aAAa,CAC3B,OAAsC,EACtC,QAAiC,EAAA;IAEjC,MAAM,MAAM,GAAGA,yBAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;IAE/CC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;YACzC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AAC9E,gBAAA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AAElD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AACvD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC/B;;;;"}

package/lib/hooks/useOuterClick.js

@@ -1,20 +1,19 @@
-import { useRef, useEffect } from 'react';
+import { useEffect } from 'react';
+import { useLatest } from './useLatest.js';
 
 function useOuterClick(targets, callback) {
-    // callbackをrefに保存（毎レンダリング時に最新の値を設定）
-    const callbackRef = useRef(callback);
-    callbackRef.current = callback;
+    const latest = useLatest({ targets, callback });
     useEffect(() => {
         const handleOuterClick = (e) => {
-            if (targets.every((target) => isEventExcludedParent(e, target.current))) {
-                callbackRef.current(e);
+            if (latest.targets.every((target) => isEventExcludedParent(e, target.current))) {
+                latest.callback(e);
             }
         };
         window.addEventListener('click', handleOuterClick);
         return () => {
             window.removeEventListener('click', handleOuterClick);
         };
-    }, [targets]);
+    }, [latest]);
 }
 function isEventExcludedParent(e, parent) {
     if (!parent)

package/lib/hooks/useOuterClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOuterClick.js","sources":["../../src/hooks/useOuterClick.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react'\n\nexport function useOuterClick(\n  targets: Array<RefObject<HTMLElement>>,\n  callback: (e: MouseEvent) => void,\n) {\n  // callbackをrefに保存（毎レンダリング時に最新の値を設定）\n  const callbackRef = useRef(callback)\n  callbackRef.current = callback\n\n  useEffect(() => {\n    const handleOuterClick = (e: MouseEvent) => {\n      if (targets.every((target) => isEventExcludedParent(e, target.current))) {\n        callbackRef.current(e)\n      }\n    }\n\n    window.addEventListener('click', handleOuterClick)\n\n    return () => {\n      window.removeEventListener('click', handleOuterClick)\n    }\n  }, [targets])\n}\n\nfunction isEventExcludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return !path.includes(parent)\n}\n"],"names":[],"mappings":";;AAEM,SAAU,aAAa,CAC3B,OAAsC,EACtC,QAAiC,EAAA;;AAGjC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;AACzC,YAAA,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AACvE,gBAAA,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;YACxB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AAElD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AACvD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AACf;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC/B;;;;"}
+{"version":3,"file":"useOuterClick.js","sources":["../../src/hooks/useOuterClick.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\nimport { useLatest } from './useLatest'\n\nexport function useOuterClick(\n  targets: Array<RefObject<HTMLElement>>,\n  callback: (e: MouseEvent) => void,\n) {\n  const latest = useLatest({ targets, callback })\n\n  useEffect(() => {\n    const handleOuterClick = (e: MouseEvent) => {\n      if (latest.targets.every((target) => isEventExcludedParent(e, target.current))) {\n        latest.callback(e)\n      }\n    }\n\n    window.addEventListener('click', handleOuterClick)\n\n    return () => {\n      window.removeEventListener('click', handleOuterClick)\n    }\n  }, [latest])\n}\n\nfunction isEventExcludedParent(e: MouseEvent, parent: Element | null): boolean {\n  if (!parent) return false\n\n  const path = e.composedPath()\n\n  if (path.length === 0) return false\n\n  return !path.includes(parent)\n}\n"],"names":[],"mappings":";;;AAIM,SAAU,aAAa,CAC3B,OAAsC,EACtC,QAAiC,EAAA;IAEjC,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;IAE/C,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;YACzC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,qBAAqB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE;AAC9E,gBAAA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AAElD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AACvD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;AAEA,SAAS,qBAAqB,CAAC,CAAa,EAAE,MAAsB,EAAA;AAClE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE;AAE7B,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAEnC,IAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC/B;;;;"}

package/lib/hooks/usePortal.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var hooks_useEnhancedEffect = require('./useEnhancedEffect.cjs');
+var hooks_useLatest = require('./useLatest.cjs');
 
 const ParentContext = React.createContext({
     seqs: [],
@@ -11,7 +12,7 @@ const ParentContext = React.createContext({
 let portalSeq = 0;
 function usePortal({ rootId } = {}) {
     const [portalRoot, setPortalRoot] = React.useState(null);
-    const currentSeq = React.useMemo(() => ++portalSeq, []);
+    const [currentSeq] = React.useState(() => ++portalSeq);
     const parent = React.useContext(ParentContext);
     const calculatedSeqs = React.useMemo(() => {
         const parentSeqs = parent.seqs.concat(currentSeq);
@@ -20,6 +21,25 @@ function usePortal({ rootId } = {}) {
             portalChildOf: parentSeqs.join(','),
         };
     }, [currentSeq, parent.seqs]);
+    const latest = hooks_useLatest.useLatest({ currentSeq, portalRoot, calculatedSeqs });
+    const functions = React.useMemo(() => {
+        const PortalParentProvider = ({ children }) => {
+            const value = {
+                seqs: latest.calculatedSeqs.parentSeqs,
+            };
+            return jsxRuntime.jsx(ParentContext.Provider, { value: value, children: children });
+        };
+        return {
+            PortalParentProvider,
+            isChildPortal: (element) => _isChildPortal(element, new RegExp(`(^|,)${latest.currentSeq}(,|$)`)),
+            createPortal: (children) => {
+                if (latest.portalRoot === null) {
+                    return null;
+                }
+                return ReactDOM.createPortal(children, latest.portalRoot);
+            },
+        };
+    }, [latest]);
     hooks_useEnhancedEffect.useEnhancedEffect(() => {
         // Next.jsのhydration error回避のため、初回レンダリング時にdivを作成する
         setPortalRoot((current) => {
@@ -40,24 +60,11 @@ function usePortal({ rootId } = {}) {
             portalRoot.remove();
         };
     }, [portalRoot, calculatedSeqs.portalChildOf]);
-    const isChildPortal = React.useCallback((element) => _isChildPortal(element, new RegExp(`(^|,)${currentSeq}(,|$)`)), [currentSeq]);
-    const PortalParentProvider = React.useCallback(({ children }) => {
-        const value = {
-            seqs: calculatedSeqs.parentSeqs,
-        };
-        return jsxRuntime.jsx(ParentContext.Provider, { value: value, children: children });
-    }, [calculatedSeqs.parentSeqs]);
-    const wrappedCreatePortal = React.useCallback((children) => {
-        if (portalRoot === null) {
-            return null;
-        }
-        return ReactDOM.createPortal(children, portalRoot);
-    }, [portalRoot]);
     return {
         portalRoot,
-        isChildPortal,
-        PortalParentProvider,
-        createPortal: wrappedCreatePortal,
+        isChildPortal: functions.isChildPortal,
+        createPortal: functions.createPortal,
+        PortalParentProvider: functions.PortalParentProvider,
     };
 }
 function _isChildPortal(element, seqRegex) {