smarthr-ui 99.3.1 → 99.3.2

package/lib/components/Input/Input.cjs

@@ -16,20 +16,18 @@ const backgroundColor = {
     BORDER: 'border',
     ACTION_BACKGROUND: 'action-background',
 };
-const wrapperClassNameGenerator = index.tv({
-    base: [
-        'smarthr-ui-Input',
-        'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
-        'contrast-more:shr-border-high-contrast',
-        'focus-within:shr-focus-indicator',
-        'has-[[aria-invalid]]:shr-border-danger',
-        'has-[:disabled]:[&&&]:shr-border-default/50',
-        'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
-        'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
-    ],
-});
-const innerClassNameGenerator = index.tv({
+const classNameGenerator = index.tv({
     slots: {
+        wrapper: [
+            'smarthr-ui-Input',
+            'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
+            'contrast-more:shr-border-high-contrast',
+            'focus-within:shr-focus-indicator',
+            'has-[[aria-invalid]]:shr-border-danger',
+            'has-[:disabled]:[&&&]:shr-border-default/50',
+            'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
+            'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
+        ],
         input: [
             'smarthr-ui-Input-input',
             'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',
@@ -68,9 +66,9 @@ const Input = React.forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, cl
         handleDelegateClick: () => innerRef.current?.focus(),
     }), [latest]);
     const classNames = React.useMemo(() => {
-        const { input, affix } = innerClassNameGenerator();
+        const { wrapper, input, affix } = classNameGenerator();
         return {
-            wrapper: wrapperClassNameGenerator({ className }),
+            wrapper: wrapper({ className }),
             input: input(),
             prefix: affix({ className: 'smarthr-ui-Input-prefix' }),
             suffix: affix({ className: 'smarthr-ui-Input-suffix' }),
@@ -83,7 +81,7 @@ const Input = React.forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, cl
             backgroundColor: styleColor,
             maxWidth: styleMaxWidth,
             width: styleMaxWidth ? '100%' : undefined,
-        }, children: [prefix && jsxRuntime.jsx("span", { className: classNames.prefix, children: prefix }), jsxRuntime.jsx("input", { ...rest, type: type, "data-smarthr-ui-input": "true", max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, disabled: disabled, readOnly: readOnly, ref: functions.handleInnerRef, "aria-invalid": error || undefined, className: classNames.input }), suffix && jsxRuntime.jsx("span", { className: classNames.suffix, children: suffix })] }));
+        }, children: [prefix && jsxRuntime.jsx("span", { className: classNames.prefix, children: prefix }), jsxRuntime.jsx("input", { ...rest, ref: functions.handleInnerRef, type: type, disabled: disabled, readOnly: readOnly, max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, className: classNames.input }), suffix && jsxRuntime.jsx("span", { className: classNames.suffix, children: suffix })] }));
 });
 const disableWheel = (e) => {
     // wheel イベントに preventDefault はないため

package/lib/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Input',\n    'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n    'contrast-more:shr-border-high-contrast',\n    'focus-within:shr-focus-indicator',\n    'has-[[aria-invalid]]:shr-border-danger',\n    'has-[:disabled]:[&&&]:shr-border-default/50',\n    'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n    'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n  ],\n})\nconst innerClassNameGenerator = tv({\n  slots: {\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { input, affix } = innerClassNameGenerator()\n\n      return {\n        wrapper: wrapperClassNameGenerator({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          type={type}\n          data-smarthr-ui-input=\"true\"\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={functions.handleInnerRef}\n          aria-invalid={error || undefined}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;;;;;;;;;AASC;AACF;AACD;AACE;AACE;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-Input',\n      'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n      'has-[:disabled]:[&&&]:shr-border-default/50',\n      'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n      'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n    ],\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, input, affix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          ref={functions.handleInnerRef}\n          type={type}\n          disabled={disabled}\n          readOnly={readOnly}\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          aria-invalid={error || undefined}\n          data-smarthr-ui-input=\"true\"\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACE;;;;;;;;;AASC;AACD;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;;"}

package/lib/components/Input/Input.js

@@ -14,20 +14,18 @@ const backgroundColor = {
     BORDER: 'border',
     ACTION_BACKGROUND: 'action-background',
 };
-const wrapperClassNameGenerator = ce({
-    base: [
-        'smarthr-ui-Input',
-        'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
-        'contrast-more:shr-border-high-contrast',
-        'focus-within:shr-focus-indicator',
-        'has-[[aria-invalid]]:shr-border-danger',
-        'has-[:disabled]:[&&&]:shr-border-default/50',
-        'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
-        'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
-    ],
-});
-const innerClassNameGenerator = ce({
+const classNameGenerator = ce({
     slots: {
+        wrapper: [
+            'smarthr-ui-Input',
+            'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
+            'contrast-more:shr-border-high-contrast',
+            'focus-within:shr-focus-indicator',
+            'has-[[aria-invalid]]:shr-border-danger',
+            'has-[:disabled]:[&&&]:shr-border-default/50',
+            'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
+            'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
+        ],
         input: [
             'smarthr-ui-Input-input',
             'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',
@@ -66,9 +64,9 @@ const Input = forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, classNam
         handleDelegateClick: () => innerRef.current?.focus(),
     }), [latest]);
     const classNames = useMemo(() => {
-        const { input, affix } = innerClassNameGenerator();
+        const { wrapper, input, affix } = classNameGenerator();
         return {
-            wrapper: wrapperClassNameGenerator({ className }),
+            wrapper: wrapper({ className }),
             input: input(),
             prefix: affix({ className: 'smarthr-ui-Input-prefix' }),
             suffix: affix({ className: 'smarthr-ui-Input-suffix' }),
@@ -81,7 +79,7 @@ const Input = forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, classNam
             backgroundColor: styleColor,
             maxWidth: styleMaxWidth,
             width: styleMaxWidth ? '100%' : undefined,
-        }, children: [prefix && jsx("span", { className: classNames.prefix, children: prefix }), jsx("input", { ...rest, type: type, "data-smarthr-ui-input": "true", max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, disabled: disabled, readOnly: readOnly, ref: functions.handleInnerRef, "aria-invalid": error || undefined, className: classNames.input }), suffix && jsx("span", { className: classNames.suffix, children: suffix })] }));
+        }, children: [prefix && jsx("span", { className: classNames.prefix, children: prefix }), jsx("input", { ...rest, ref: functions.handleInnerRef, type: type, disabled: disabled, readOnly: readOnly, max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, className: classNames.input }), suffix && jsx("span", { className: classNames.suffix, children: suffix })] }));
 });
 const disableWheel = (e) => {
     // wheel イベントに preventDefault はないため

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Input',\n    'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n    'contrast-more:shr-border-high-contrast',\n    'focus-within:shr-focus-indicator',\n    'has-[[aria-invalid]]:shr-border-danger',\n    'has-[:disabled]:[&&&]:shr-border-default/50',\n    'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n    'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n  ],\n})\nconst innerClassNameGenerator = tv({\n  slots: {\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { input, affix } = innerClassNameGenerator()\n\n      return {\n        wrapper: wrapperClassNameGenerator({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          type={type}\n          data-smarthr-ui-input=\"true\"\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={functions.handleInnerRef}\n          aria-invalid={error || undefined}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;;;;;;;;;AASC;AACF;AACD;AACE;AACE;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-Input',\n      'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n      'has-[:disabled]:[&&&]:shr-border-default/50',\n      'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n      'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n    ],\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, input, affix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          ref={functions.handleInnerRef}\n          type={type}\n          disabled={disabled}\n          readOnly={readOnly}\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          aria-invalid={error || undefined}\n          data-smarthr-ui-input=\"true\"\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACE;;;;;;;;;AASC;AACD;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;"}

package/lib/components/InputFile/InputFileMultiplyAppendable.cjs

@@ -34,12 +34,13 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
     }, [size, className]);
     // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ
     const isUpdatingFilesRef = React.useRef(false);
-    const inputRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => inputRef.current, []);
+    const innerRef = React.useRef(null);
+    // TODO: useMergeRefsが実装されたら修正
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     const latest = hooks_useLatest.useLatest({ onChange, files, previewFile });
     const functions = React.useMemo(() => {
         const updateFiles = (newFiles) => {
-            if (!inputRef.current) {
+            if (!innerRef.current) {
                 return;
             }
             latest.onChange?.(newFiles);
@@ -48,7 +49,7 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
                 buff.items.add(file);
             });
             isUpdatingFilesRef.current = true;
-            inputRef.current.files = buff.files;
+            innerRef.current.files = buff.files;
             isUpdatingFilesRef.current = false;
             setFiles(newFiles);
         };
@@ -62,13 +63,13 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
                 updateFiles([...latest.files, ...newFiles]);
             },
             handleDelete: (e) => {
-                if (!inputRef.current) {
+                if (!innerRef.current) {
                     return;
                 }
                 const index = parseInt(e.currentTarget.value, 10);
                 const newFiles = latest.files.filter((_, i) => index !== i);
                 // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット
-                inputRef.current.value = '';
+                innerRef.current.value = '';
                 updateFiles(newFiles);
             },
             handleClosePreview: () => {
@@ -87,7 +88,7 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
             },
         };
     }, [latest]);
-    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsxRuntime.jsx(components_Panel_Groupbox_Groupbox.Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsx(components_InputFile_parts.FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: functions.handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsxRuntime.jsx(components_InputFile_parts.StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(components_InputFile_parts.LabelRender, { id: labelId, label: label })] }), previewable && (jsxRuntime.jsx(components_InputFile_FilePreviewDialog.FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
+    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsxRuntime.jsx(components_Panel_Groupbox_Groupbox.Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsx(components_InputFile_parts.FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: innerRef, type: "file", disabled: disabled, multiple: true, "aria-invalid": error || undefined, "aria-labelledby": labelId, "data-smarthr-ui-input": "true", onChange: functions.handleChange, className: classNames.input }), jsxRuntime.jsx(components_InputFile_parts.StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(components_InputFile_parts.LabelRender, { id: labelId, label: label })] }), previewable && (jsxRuntime.jsx(components_InputFile_FilePreviewDialog.FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
 });
 
 exports.InputFileMultiplyAppendable = InputFileMultiplyAppendable;

package/lib/components/InputFile/InputFileMultiplyAppendable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileMultiplyAppendable.cjs","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<\n  HTMLInputElement,\n  Omit<LowerProps, 'multiple'>\n>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        latest.onChange?.(newFiles)\n\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesRef.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesRef.current = false\n\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          // Safari において、input.files への直接代入時はonChangeを発火させない\n          if (isUpdatingFilesRef.current) {\n            return\n          }\n\n          const newFiles = Array.from(e.target.files ?? [])\n\n          updateFiles([...latest.files, ...newFiles])\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!inputRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n          inputRef.current.value = ''\n\n          updateFiles(newFiles)\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={functions.handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AAEO;;;AAUH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;AACA;AAMA;AAEA;AACE;AACE;;;AAIA;AAEA;AACA;AACE;AACF;AAEA;;AAEA;;AAGF;;AAGE;;AAEE;;;AAIA;;;AAIF;AACE;;;AAIA;AACA;;AAGA;;;;;;;AAQA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA6CF;;"}
+{"version":3,"file":"InputFileMultiplyAppendable.cjs","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<\n  HTMLInputElement,\n  Omit<LowerProps, 'multiple'>\n>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const innerRef = useRef<HTMLInputElement>(null)\n\n    // TODO: useMergeRefsが実装されたら修正\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        if (!innerRef.current) {\n          return\n        }\n\n        latest.onChange?.(newFiles)\n\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesRef.current = true\n        innerRef.current.files = buff.files\n        isUpdatingFilesRef.current = false\n\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          // Safari において、input.files への直接代入時はonChangeを発火させない\n          if (isUpdatingFilesRef.current) {\n            return\n          }\n\n          const newFiles = Array.from(e.target.files ?? [])\n\n          updateFiles([...latest.files, ...newFiles])\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!innerRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n          innerRef.current.value = ''\n\n          updateFiles(newFiles)\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            ref={innerRef}\n            type=\"file\"\n            disabled={disabled}\n            multiple\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            data-smarthr-ui-input=\"true\"\n            onChange={functions.handleChange}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AAEO;;;AAUH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;;AAGA;AAMA;AAEA;AACE;AACE;;;AAIA;AAEA;AACA;AACE;AACF;AAEA;;AAEA;;AAGF;;AAGE;;AAEE;;;AAIA;;;AAIF;AACE;;;AAIA;AACA;;AAGA;;;;;;;AAQA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA6CF;;"}

package/lib/components/InputFile/InputFileMultiplyAppendable.js

@@ -32,12 +32,13 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
     }, [size, className]);
     // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ
     const isUpdatingFilesRef = useRef(false);
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current, []);
+    const innerRef = useRef(null);
+    // TODO: useMergeRefsが実装されたら修正
+    useImperativeHandle(ref, () => innerRef.current, []);
     const latest = useLatest({ onChange, files, previewFile });
     const functions = useMemo(() => {
         const updateFiles = (newFiles) => {
-            if (!inputRef.current) {
+            if (!innerRef.current) {
                 return;
             }
             latest.onChange?.(newFiles);
@@ -46,7 +47,7 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
                 buff.items.add(file);
             });
             isUpdatingFilesRef.current = true;
-            inputRef.current.files = buff.files;
+            innerRef.current.files = buff.files;
             isUpdatingFilesRef.current = false;
             setFiles(newFiles);
         };
@@ -60,13 +61,13 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
                 updateFiles([...latest.files, ...newFiles]);
             },
             handleDelete: (e) => {
-                if (!inputRef.current) {
+                if (!innerRef.current) {
                     return;
                 }
                 const index = parseInt(e.currentTarget.value, 10);
                 const newFiles = latest.files.filter((_, i) => index !== i);
                 // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット
-                inputRef.current.value = '';
+                innerRef.current.value = '';
                 updateFiles(newFiles);
             },
             handleClosePreview: () => {
@@ -85,7 +86,7 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
             },
         };
     }, [latest]);
-    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsx(Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsx(FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: functions.handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] }), previewable && (jsx(FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
+    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsx(Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsx(FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, ref: innerRef, type: "file", disabled: disabled, multiple: true, "aria-invalid": error || undefined, "aria-labelledby": labelId, "data-smarthr-ui-input": "true", onChange: functions.handleChange, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] }), previewable && (jsx(FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
 });
 
 export { InputFileMultiplyAppendable };

package/lib/components/InputFile/InputFileMultiplyAppendable.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileMultiplyAppendable.js","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<\n  HTMLInputElement,\n  Omit<LowerProps, 'multiple'>\n>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        latest.onChange?.(newFiles)\n\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesRef.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesRef.current = false\n\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          // Safari において、input.files への直接代入時はonChangeを発火させない\n          if (isUpdatingFilesRef.current) {\n            return\n          }\n\n          const newFiles = Array.from(e.target.files ?? [])\n\n          updateFiles([...latest.files, ...newFiles])\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!inputRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n          inputRef.current.value = ''\n\n          updateFiles(newFiles)\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={functions.handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAEO;;;AAUH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;AACA;AAMA;AAEA;AACE;AACE;;;AAIA;AAEA;AACA;AACE;AACF;AAEA;;AAEA;;AAGF;;AAGE;;AAEE;;;AAIA;;;AAIF;AACE;;;AAIA;AACA;;AAGA;;;;;;;AAQA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA6CF;;"}
+{"version":3,"file":"InputFileMultiplyAppendable.js","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<\n  HTMLInputElement,\n  Omit<LowerProps, 'multiple'>\n>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const innerRef = useRef<HTMLInputElement>(null)\n\n    // TODO: useMergeRefsが実装されたら修正\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        if (!innerRef.current) {\n          return\n        }\n\n        latest.onChange?.(newFiles)\n\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesRef.current = true\n        innerRef.current.files = buff.files\n        isUpdatingFilesRef.current = false\n\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          // Safari において、input.files への直接代入時はonChangeを発火させない\n          if (isUpdatingFilesRef.current) {\n            return\n          }\n\n          const newFiles = Array.from(e.target.files ?? [])\n\n          updateFiles([...latest.files, ...newFiles])\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!innerRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n          innerRef.current.value = ''\n\n          updateFiles(newFiles)\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            ref={innerRef}\n            type=\"file\"\n            disabled={disabled}\n            multiple\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            data-smarthr-ui-input=\"true\"\n            onChange={functions.handleChange}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAEO;;;AAUH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;;AAGA;AAMA;AAEA;AACE;AACE;;;AAIA;AAEA;AACA;AACE;AACF;AAEA;;AAEA;;AAGF;;AAGE;;AAEE;;;AAIA;;;AAIF;AACE;;;AAIA;AACA;;AAGA;;;;;;;AAQA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA6CF;;"}

package/lib/components/InputFile/InputFileNative.cjs

@@ -34,8 +34,9 @@ const InputFileNative = React.forwardRef(({ className, size, label, hasFileList
     }, [size, className]);
     // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ
     const isUpdatingFilesRef = React.useRef(false);
-    const inputRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => inputRef.current, []);
+    const innerRef = React.useRef(null);
+    // TODO: useMergeRefsが実装されたら修正
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     const latest = hooks_useLatest.useLatest({ onChange, files, previewFile });
     const functions = React.useMemo(() => {
         const updateFiles = (newFiles) => {
@@ -49,7 +50,7 @@ const InputFileNative = React.forwardRef(({ className, size, label, hasFileList
                 }
             },
             handleDelete: (e) => {
-                if (!inputRef.current) {
+                if (!innerRef.current) {
                     return;
                 }
                 const index = parseInt(e.currentTarget.value, 10);
@@ -60,7 +61,7 @@ const InputFileNative = React.forwardRef(({ className, size, label, hasFileList
                     buff.items.add(file);
                 });
                 isUpdatingFilesRef.current = true;
-                inputRef.current.files = buff.files;
+                innerRef.current.files = buff.files;
                 isUpdatingFilesRef.current = false;
             },
             handleClosePreview: () => {
@@ -79,7 +80,7 @@ const InputFileNative = React.forwardRef(({ className, size, label, hasFileList
             },
         };
     }, [latest]);
-    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsxRuntime.jsx(components_Panel_Groupbox_Groupbox.Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsx(components_InputFile_parts.FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, "data-smarthr-ui-input": "true", type: "file", onChange: functions.handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsxRuntime.jsx(components_InputFile_parts.StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(components_InputFile_parts.LabelRender, { id: labelId, label: label })] }), previewable && (jsxRuntime.jsx(components_InputFile_FilePreviewDialog.FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
+    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsxRuntime.jsx(components_Panel_Groupbox_Groupbox.Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsx(components_InputFile_parts.FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: innerRef, type: "file", disabled: disabled, "aria-invalid": error || undefined, "aria-labelledby": labelId, "data-smarthr-ui-input": "true", onChange: functions.handleChange, className: classNames.input }), jsxRuntime.jsx(components_InputFile_parts.StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(components_InputFile_parts.LabelRender, { id: labelId, label: label })] }), previewable && (jsxRuntime.jsx(components_InputFile_FilePreviewDialog.FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
 });
 
 exports.InputFileNative = InputFileNative;

package/lib/components/InputFile/InputFileNative.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileNative.cjs","sources":["../../../src/components/InputFile/InputFileNative.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\ntype Props = Omit<LowerProps, 'multiple'> & {\n  multiple?: boolean\n}\n\nexport const InputFileNative = forwardRef<HTMLInputElement, Props>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        latest.onChange?.(newFiles)\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          if (!isUpdatingFilesRef.current) {\n            updateFiles(Array.from(e.target.files ?? []))\n          }\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!inputRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          updateFiles(newFiles)\n\n          const buff = new DataTransfer()\n\n          newFiles.forEach((file) => {\n            buff.items.add(file)\n          })\n\n          isUpdatingFilesRef.current = true\n          inputRef.current.files = buff.files\n          isUpdatingFilesRef.current = false\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={functions.handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AAMO;;;AAOH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;AACA;AAMA;AAEA;AACE;AACE;;AAEF;;AAGE;AACE;AACE;;;AAGJ;AACE;;;AAIA;AACA;;AAIA;AAEA;AACE;AACF;AAEA;;AAEA;;;;;;AAMA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA4CF;;"}
+{"version":3,"file":"InputFileNative.cjs","sources":["../../../src/components/InputFile/InputFileNative.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\ntype Props = Omit<LowerProps, 'multiple'> & {\n  multiple?: boolean\n}\n\nexport const InputFileNative = forwardRef<HTMLInputElement, Props>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const innerRef = useRef<HTMLInputElement>(null)\n\n    // TODO: useMergeRefsが実装されたら修正\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        latest.onChange?.(newFiles)\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          if (!isUpdatingFilesRef.current) {\n            updateFiles(Array.from(e.target.files ?? []))\n          }\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!innerRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          updateFiles(newFiles)\n\n          const buff = new DataTransfer()\n\n          newFiles.forEach((file) => {\n            buff.items.add(file)\n          })\n\n          isUpdatingFilesRef.current = true\n          innerRef.current.files = buff.files\n          isUpdatingFilesRef.current = false\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            ref={innerRef}\n            type=\"file\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            data-smarthr-ui-input=\"true\"\n            onChange={functions.handleChange}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AAMO;;;AAOH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;;AAGA;AAMA;AAEA;AACE;AACE;;AAEF;;AAGE;AACE;AACE;;;AAGJ;AACE;;;AAIA;AACA;;AAIA;AAEA;AACE;AACF;AAEA;;AAEA;;;;;;AAMA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA4CF;;"}

package/lib/components/InputFile/InputFileNative.js

@@ -32,8 +32,9 @@ const InputFileNative = forwardRef(({ className, size, label, hasFileList = true
     }, [size, className]);
     // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ
     const isUpdatingFilesRef = useRef(false);
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current, []);
+    const innerRef = useRef(null);
+    // TODO: useMergeRefsが実装されたら修正
+    useImperativeHandle(ref, () => innerRef.current, []);
     const latest = useLatest({ onChange, files, previewFile });
     const functions = useMemo(() => {
         const updateFiles = (newFiles) => {
@@ -47,7 +48,7 @@ const InputFileNative = forwardRef(({ className, size, label, hasFileList = true
                 }
             },
             handleDelete: (e) => {
-                if (!inputRef.current) {
+                if (!innerRef.current) {
                     return;
                 }
                 const index = parseInt(e.currentTarget.value, 10);
@@ -58,7 +59,7 @@ const InputFileNative = forwardRef(({ className, size, label, hasFileList = true
                     buff.items.add(file);
                 });
                 isUpdatingFilesRef.current = true;
-                inputRef.current.files = buff.files;
+                innerRef.current.files = buff.files;
                 isUpdatingFilesRef.current = false;
             },
             handleClosePreview: () => {
@@ -77,7 +78,7 @@ const InputFileNative = forwardRef(({ className, size, label, hasFileList = true
             },
         };
     }, [latest]);
-    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsx(Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsx(FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, "data-smarthr-ui-input": "true", type: "file", onChange: functions.handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] }), previewable && (jsx(FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
+    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [hasFileList && !disabled && files.length > 0 && (jsx(Groupbox, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsx(FileListItem, { file: file, index: index, previewable: !!previewable, handleDeleteClick: functions.handleDelete, handlePreviewClick: setPreviewFile, className: classNames.fileItem }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, ref: innerRef, type: "file", disabled: disabled, "aria-invalid": error || undefined, "aria-labelledby": labelId, "data-smarthr-ui-input": "true", onChange: functions.handleChange, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] }), previewable && (jsx(FilePreviewDialog, { file: previewFile, handleClose: functions.handleClosePreview, handleDownload: functions.handleDownload, searchable: previewable?.searchable }))] }));
 });
 
 export { InputFileNative };

package/lib/components/InputFile/InputFileNative.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileNative.js","sources":["../../../src/components/InputFile/InputFileNative.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\ntype Props = Omit<LowerProps, 'multiple'> & {\n  multiple?: boolean\n}\n\nexport const InputFileNative = forwardRef<HTMLInputElement, Props>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        latest.onChange?.(newFiles)\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          if (!isUpdatingFilesRef.current) {\n            updateFiles(Array.from(e.target.files ?? []))\n          }\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!inputRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          updateFiles(newFiles)\n\n          const buff = new DataTransfer()\n\n          newFiles.forEach((file) => {\n            buff.items.add(file)\n          })\n\n          isUpdatingFilesRef.current = true\n          inputRef.current.files = buff.files\n          isUpdatingFilesRef.current = false\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={functions.handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAMO;;;AAOH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;AACA;AAMA;AAEA;AACE;AACE;;AAEF;;AAGE;AACE;AACE;;;AAGJ;AACE;;;AAIA;AACA;;AAIA;AAEA;AACE;AACF;AAEA;;AAEA;;;;;;AAMA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA4CF;;"}
+{"version":3,"file":"InputFileNative.js","sources":["../../../src/components/InputFile/InputFileNative.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Stack } from '../Layout'\nimport { Groupbox } from '../Panel'\n\nimport { FilePreviewDialog } from './FilePreviewDialog'\nimport { FileListItem, LabelRender, StyledFaFolderOpenIcon } from './parts'\nimport { classNameGenerator } from './style'\n\nimport type { LowerProps } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\ntype Props = Omit<LowerProps, 'multiple'> & {\n  multiple?: boolean\n}\n\nexport const InputFileNative = forwardRef<HTMLInputElement, Props>(\n  (\n    { className, size, label, hasFileList = true, previewable, onChange, disabled, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const [previewFile, setPreviewFile] = useState<File | null>(null)\n    const labelId = useId()\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesRef = useRef(false)\n\n    const innerRef = useRef<HTMLInputElement>(null)\n\n    // TODO: useMergeRefsが実装されたら修正\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ onChange, files, previewFile })\n\n    const functions = useMemo(() => {\n      const updateFiles = (newFiles: File[]) => {\n        latest.onChange?.(newFiles)\n        setFiles(newFiles)\n      }\n\n      return {\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          if (!isUpdatingFilesRef.current) {\n            updateFiles(Array.from(e.target.files ?? []))\n          }\n        },\n        handleDelete: (e: MouseEvent<HTMLButtonElement>) => {\n          if (!innerRef.current) {\n            return\n          }\n\n          const index = parseInt(e.currentTarget.value, 10)\n          const newFiles = latest.files.filter((_, i) => index !== i)\n\n          updateFiles(newFiles)\n\n          const buff = new DataTransfer()\n\n          newFiles.forEach((file) => {\n            buff.items.add(file)\n          })\n\n          isUpdatingFilesRef.current = true\n          innerRef.current.files = buff.files\n          isUpdatingFilesRef.current = false\n        },\n        handleClosePreview: () => {\n          setPreviewFile(null)\n        },\n        handleDownload: () => {\n          const file = latest.previewFile\n          if (!file) return\n\n          const url = URL.createObjectURL(file)\n          const a = document.createElement('a')\n          a.href = url\n          a.download = file.name\n          a.click()\n          URL.revokeObjectURL(url)\n        },\n      }\n    }, [latest])\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {hasFileList && !disabled && files.length > 0 && (\n          <Groupbox as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                file={file}\n                index={index}\n                previewable={!!previewable}\n                handleDeleteClick={functions.handleDelete}\n                handlePreviewClick={setPreviewFile}\n                className={classNames.fileItem}\n              />\n            ))}\n          </Groupbox>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            ref={innerRef}\n            type=\"file\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            data-smarthr-ui-input=\"true\"\n            onChange={functions.handleChange}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n        {previewable && (\n          <FilePreviewDialog\n            file={previewFile}\n            handleClose={functions.handleClosePreview}\n            handleDownload={functions.handleDownload}\n            searchable={previewable?.searchable}\n          />\n        )}\n      </Stack>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAMO;;;AAOH;AAEA;AACE;;AAGE;AACA;;;;;;AAMJ;;AAGA;AAEA;;AAGA;AAMA;AAEA;AACE;AACE;;AAEF;;AAGE;AACE;AACE;;;AAGJ;AACE;;;AAIA;AACA;;AAIA;AAEA;AACE;AACF;AAEA;;AAEA;;;;;;AAMA;AACA;;;;AAIA;AACA;;AAEA;;;AAGN;;AA4CF;;"}

package/lib/components/Layout/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Layout/Container/Container.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../../hooks/useEnvironment'\nimport { paddingBlock, paddingInline } from '../../../tailwind'\n\nimport type { Gap } from '../../../types'\n\ntype BaseProps = PropsWithChildren<\n  Omit<VariantProps<typeof classNameGenerator>, 'paddingBlock' | 'paddingInline'> & {\n    padding?: Gap | SeparatePadding\n  }\n>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n  /** 画面幅が狭い時のブロック方向パディング */\n  narrowModeBlock?: Gap\n  /** 画面幅が狭い時のインライン方向パディング */\n  narrowModeInline?: Gap\n}\n\nconst classNameGenerator = tv({\n  base: 'shr-mx-auto shr-w-full',\n  variants: {\n    size: {\n      NARROW: 'shr-max-w-col6',\n      DEFAULT: 'shr-max-w-col8',\n      WIDE: 'shr-max-w-col9',\n      FULL: '',\n    },\n    paddingBlock,\n    paddingInline,\n  },\n  compoundVariants: [\n    {\n      paddingInline: [0.25, 'X3S'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.25])*2)]',\n    },\n    {\n      paddingInline: [0.5, 'XXS'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.5])*2)]',\n    },\n    {\n      paddingInline: 0.75,\n      className: 'shr-w-[calc(100%-theme(spacing[0.75])*2)]',\n    },\n    {\n      paddingInline: [1, 'XS'],\n      className: 'shr-w-[calc(100%-theme(spacing[1])*2)]',\n    },\n    {\n      paddingInline: 1.25,\n      className: 'shr-w-[calc(100%-theme(spacing[1.25])*2)]',\n    },\n    {\n      paddingInline: [1.5, 'S'],\n      className: 'shr-w-[calc(100%-theme(spacing[1.5])*2)]',\n    },\n    {\n      paddingInline: [2, 'M'],\n      className: 'shr-w-[calc(100%-theme(spacing[2])*2)]',\n    },\n    {\n      paddingInline: [2.5, 'L'],\n      className: 'shr-w-[calc(100%-theme(spacing[2.5])*2)]',\n    },\n    {\n      paddingInline: [3, 'XL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3])*2)]',\n    },\n    {\n      paddingInline: [3.5, 'XXL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3.5])*2)]',\n    },\n    {\n      paddingInline: [4, 'X3L'],\n      className: 'shr-w-[calc(100%-theme(spacing[4])*2)]',\n    },\n    {\n      paddingInline: 8,\n      className: 'shr-w-[calc(100%-theme(spacing[8])*2)]',\n    },\n  ],\n})\n\nconst DEFAULT_PADDING = {\n  block: 2,\n  inline: 2,\n  narrowModeBlock: 1.5,\n  narrowModeInline: 1,\n} as const\n\nexport const Container: FC<Props> = ({\n  size = 'DEFAULT',\n  padding = DEFAULT_PADDING,\n  className,\n  ...rest\n}) => {\n  const { mobile } = useEnvironment()\n  const actualClassName = useMemo(() => {\n    const actualPadding =\n      padding instanceof Object\n        ? padding\n        : { block: padding, inline: padding, narrowModeBlock: padding, narrowModeInline: padding }\n    return classNameGenerator({\n      size,\n      paddingBlock: mobile ? actualPadding.narrowModeBlock : actualPadding.block,\n      paddingInline: mobile ? actualPadding.narrowModeInline : actualPadding.inline,\n      className,\n    })\n  }, [size, className, padding, mobile])\n  return <div {...rest} className={actualClassName} />\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACD;;;AAGF;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AAED;AACE;AACA;AACA;AACA;;;AASA;AACA;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAEH;AACF;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Layout/Container/Container.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../../hooks/useEnvironment'\nimport { paddingBlock, paddingInline } from '../../../tailwind'\n\nimport type { Gap } from '../../../types'\n\ntype BaseProps = PropsWithChildren<\n  Omit<VariantProps<typeof classNameGenerator>, 'paddingBlock' | 'paddingInline'> & {\n    padding?: Gap | SeparatePadding\n  }\n>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n  /** 画面幅が狭い時のブロック方向パディング */\n  narrowModeBlock?: Gap\n  /** 画面幅が狭い時のインライン方向パディング */\n  narrowModeInline?: Gap\n}\n\nconst classNameGenerator = tv({\n  base: 'shr-mx-auto shr-w-full',\n  variants: {\n    size: {\n      NARROW: 'shr-max-w-col6',\n      DEFAULT: 'shr-max-w-col8',\n      WIDE: 'shr-max-w-col9',\n      FULL: '',\n    },\n    paddingBlock,\n    paddingInline,\n  },\n  compoundVariants: [\n    {\n      paddingInline: [0.25, 'X3S'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.25])*2)]',\n    },\n    {\n      paddingInline: [0.5, 'XXS'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.5])*2)]',\n    },\n    {\n      paddingInline: 0.75,\n      className: 'shr-w-[calc(100%-theme(spacing[0.75])*2)]',\n    },\n    {\n      paddingInline: [1, 'XS'],\n      className: 'shr-w-[calc(100%-theme(spacing[1])*2)]',\n    },\n    {\n      paddingInline: 1.25,\n      className: 'shr-w-[calc(100%-theme(spacing[1.25])*2)]',\n    },\n    {\n      paddingInline: [1.5, 'S'],\n      className: 'shr-w-[calc(100%-theme(spacing[1.5])*2)]',\n    },\n    {\n      paddingInline: [2, 'M'],\n      className: 'shr-w-[calc(100%-theme(spacing[2])*2)]',\n    },\n    {\n      paddingInline: [2.5, 'L'],\n      className: 'shr-w-[calc(100%-theme(spacing[2.5])*2)]',\n    },\n    {\n      paddingInline: [3, 'XL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3])*2)]',\n    },\n    {\n      paddingInline: [3.5, 'XXL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3.5])*2)]',\n    },\n    {\n      paddingInline: [4, 'X3L'],\n      className: 'shr-w-[calc(100%-theme(spacing[4])*2)]',\n    },\n    {\n      paddingInline: 8,\n      className: 'shr-w-[calc(100%-theme(spacing[8])*2)]',\n    },\n  ],\n})\n\nconst DEFAULT_PADDING = {\n  block: 2,\n  inline: 2,\n  narrowModeBlock: 1.5,\n  narrowModeInline: 1,\n} as const\n\nexport const Container: FC<Props> = ({\n  size = 'DEFAULT',\n  padding = DEFAULT_PADDING,\n  className,\n  ...rest\n}) => {\n  const { mobile } = useEnvironment()\n  const actualClassName = useMemo(() => {\n    const actualPadding =\n      padding instanceof Object\n        ? padding\n        : { block: padding, inline: padding, narrowModeBlock: padding, narrowModeInline: padding }\n    return classNameGenerator({\n      size,\n      paddingBlock: mobile ? actualPadding.narrowModeBlock : actualPadding.block,\n      paddingInline: mobile ? actualPadding.narrowModeInline : actualPadding.inline,\n      className,\n    })\n  }, [size, className, padding, mobile])\n\n  return <div {...rest} className={actualClassName} />\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACD;;;AAGF;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AAED;AACE;AACA;AACA;AACA;;;AASA;AACA;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAGH;AACF;;"}

package/lib/components/Layout/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/Layout/Container/Container.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../../hooks/useEnvironment'\nimport { paddingBlock, paddingInline } from '../../../tailwind'\n\nimport type { Gap } from '../../../types'\n\ntype BaseProps = PropsWithChildren<\n  Omit<VariantProps<typeof classNameGenerator>, 'paddingBlock' | 'paddingInline'> & {\n    padding?: Gap | SeparatePadding\n  }\n>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n  /** 画面幅が狭い時のブロック方向パディング */\n  narrowModeBlock?: Gap\n  /** 画面幅が狭い時のインライン方向パディング */\n  narrowModeInline?: Gap\n}\n\nconst classNameGenerator = tv({\n  base: 'shr-mx-auto shr-w-full',\n  variants: {\n    size: {\n      NARROW: 'shr-max-w-col6',\n      DEFAULT: 'shr-max-w-col8',\n      WIDE: 'shr-max-w-col9',\n      FULL: '',\n    },\n    paddingBlock,\n    paddingInline,\n  },\n  compoundVariants: [\n    {\n      paddingInline: [0.25, 'X3S'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.25])*2)]',\n    },\n    {\n      paddingInline: [0.5, 'XXS'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.5])*2)]',\n    },\n    {\n      paddingInline: 0.75,\n      className: 'shr-w-[calc(100%-theme(spacing[0.75])*2)]',\n    },\n    {\n      paddingInline: [1, 'XS'],\n      className: 'shr-w-[calc(100%-theme(spacing[1])*2)]',\n    },\n    {\n      paddingInline: 1.25,\n      className: 'shr-w-[calc(100%-theme(spacing[1.25])*2)]',\n    },\n    {\n      paddingInline: [1.5, 'S'],\n      className: 'shr-w-[calc(100%-theme(spacing[1.5])*2)]',\n    },\n    {\n      paddingInline: [2, 'M'],\n      className: 'shr-w-[calc(100%-theme(spacing[2])*2)]',\n    },\n    {\n      paddingInline: [2.5, 'L'],\n      className: 'shr-w-[calc(100%-theme(spacing[2.5])*2)]',\n    },\n    {\n      paddingInline: [3, 'XL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3])*2)]',\n    },\n    {\n      paddingInline: [3.5, 'XXL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3.5])*2)]',\n    },\n    {\n      paddingInline: [4, 'X3L'],\n      className: 'shr-w-[calc(100%-theme(spacing[4])*2)]',\n    },\n    {\n      paddingInline: 8,\n      className: 'shr-w-[calc(100%-theme(spacing[8])*2)]',\n    },\n  ],\n})\n\nconst DEFAULT_PADDING = {\n  block: 2,\n  inline: 2,\n  narrowModeBlock: 1.5,\n  narrowModeInline: 1,\n} as const\n\nexport const Container: FC<Props> = ({\n  size = 'DEFAULT',\n  padding = DEFAULT_PADDING,\n  className,\n  ...rest\n}) => {\n  const { mobile } = useEnvironment()\n  const actualClassName = useMemo(() => {\n    const actualPadding =\n      padding instanceof Object\n        ? padding\n        : { block: padding, inline: padding, narrowModeBlock: padding, narrowModeInline: padding }\n    return classNameGenerator({\n      size,\n      paddingBlock: mobile ? actualPadding.narrowModeBlock : actualPadding.block,\n      paddingInline: mobile ? actualPadding.narrowModeInline : actualPadding.inline,\n      className,\n    })\n  }, [size, className, padding, mobile])\n  return <div {...rest} className={actualClassName} />\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACD;;;AAGF;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AAED;AACE;AACA;AACA;AACA;;;AASA;AACA;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAEH;AACF;;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/Layout/Container/Container.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../../hooks/useEnvironment'\nimport { paddingBlock, paddingInline } from '../../../tailwind'\n\nimport type { Gap } from '../../../types'\n\ntype BaseProps = PropsWithChildren<\n  Omit<VariantProps<typeof classNameGenerator>, 'paddingBlock' | 'paddingInline'> & {\n    padding?: Gap | SeparatePadding\n  }\n>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n  /** 画面幅が狭い時のブロック方向パディング */\n  narrowModeBlock?: Gap\n  /** 画面幅が狭い時のインライン方向パディング */\n  narrowModeInline?: Gap\n}\n\nconst classNameGenerator = tv({\n  base: 'shr-mx-auto shr-w-full',\n  variants: {\n    size: {\n      NARROW: 'shr-max-w-col6',\n      DEFAULT: 'shr-max-w-col8',\n      WIDE: 'shr-max-w-col9',\n      FULL: '',\n    },\n    paddingBlock,\n    paddingInline,\n  },\n  compoundVariants: [\n    {\n      paddingInline: [0.25, 'X3S'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.25])*2)]',\n    },\n    {\n      paddingInline: [0.5, 'XXS'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.5])*2)]',\n    },\n    {\n      paddingInline: 0.75,\n      className: 'shr-w-[calc(100%-theme(spacing[0.75])*2)]',\n    },\n    {\n      paddingInline: [1, 'XS'],\n      className: 'shr-w-[calc(100%-theme(spacing[1])*2)]',\n    },\n    {\n      paddingInline: 1.25,\n      className: 'shr-w-[calc(100%-theme(spacing[1.25])*2)]',\n    },\n    {\n      paddingInline: [1.5, 'S'],\n      className: 'shr-w-[calc(100%-theme(spacing[1.5])*2)]',\n    },\n    {\n      paddingInline: [2, 'M'],\n      className: 'shr-w-[calc(100%-theme(spacing[2])*2)]',\n    },\n    {\n      paddingInline: [2.5, 'L'],\n      className: 'shr-w-[calc(100%-theme(spacing[2.5])*2)]',\n    },\n    {\n      paddingInline: [3, 'XL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3])*2)]',\n    },\n    {\n      paddingInline: [3.5, 'XXL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3.5])*2)]',\n    },\n    {\n      paddingInline: [4, 'X3L'],\n      className: 'shr-w-[calc(100%-theme(spacing[4])*2)]',\n    },\n    {\n      paddingInline: 8,\n      className: 'shr-w-[calc(100%-theme(spacing[8])*2)]',\n    },\n  ],\n})\n\nconst DEFAULT_PADDING = {\n  block: 2,\n  inline: 2,\n  narrowModeBlock: 1.5,\n  narrowModeInline: 1,\n} as const\n\nexport const Container: FC<Props> = ({\n  size = 'DEFAULT',\n  padding = DEFAULT_PADDING,\n  className,\n  ...rest\n}) => {\n  const { mobile } = useEnvironment()\n  const actualClassName = useMemo(() => {\n    const actualPadding =\n      padding instanceof Object\n        ? padding\n        : { block: padding, inline: padding, narrowModeBlock: padding, narrowModeInline: padding }\n    return classNameGenerator({\n      size,\n      paddingBlock: mobile ? actualPadding.narrowModeBlock : actualPadding.block,\n      paddingInline: mobile ? actualPadding.narrowModeInline : actualPadding.inline,\n      className,\n    })\n  }, [size, className, padding, mobile])\n\n  return <div {...rest} className={actualClassName} />\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACD;;;AAGF;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AAED;AACE;AACA;AACA;AACA;;;AASA;AACA;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAGH;AACF;;"}

package/lib/components/Pagination/Pagination.cjs

@@ -11,7 +11,8 @@ require('react-intl');
 require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
-var libs_lodash = require('../../libs/lodash.cjs');
+require('../../_virtual/index.cjs');
+var index$1 = require('../../_virtual/index2.cjs');
 require('../Layout/Stack/Stack.cjs');
 var components_Layout_Cluster_Cluster = require('../Layout/Cluster/Cluster.cjs');
 var components_Layout_Reel_Reel = require('../Layout/Reel/Reel.cjs');
@@ -107,7 +108,7 @@ const ItemButtons = React.memo(({ total, current, padding, withoutNumbers, hrefT
             return [];
         }
         const actualPadding = padding ?? 4;
-        return libs_lodash.range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1);
+        return index$1(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1);
     }, [current, total, padding, withoutNumbers]);
     const prevAttrs = {
         disabled: current === 1,