smarthr-ui 99.3.0 → 99.3.2

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    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;;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    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;;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    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;;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    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;;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,

package/lib/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}

package/lib/components/Pagination/Pagination.js

@@ -9,7 +9,8 @@ import 'react-intl';
 import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
-import { range } from '../../libs/lodash.js';
+import '../../_virtual/index.js';
+import range from '../../_virtual/index2.js';
 import '../Layout/Stack/Stack.js';
 import { Cluster } from '../Layout/Cluster/Cluster.js';
 import { Reel } from '../Layout/Reel/Reel.js';

package/lib/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}

package/lib/components/Panel/Groupbox/Groupbox.cjs

@@ -29,6 +29,7 @@ const classNameGenerator = index.tv({
             left: 'shr-rounded-l-l',
         },
     },
+    // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する
     defaultVariants: {
         bgColor: 'COLUMN',
         rounded: false,

package/lib/components/Panel/Groupbox/Groupbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Groupbox.cjs","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Panel"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,4BAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}
+{"version":3,"file":"Groupbox.cjs","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Panel"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;;AAED,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,4BAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}

package/lib/components/Panel/Groupbox/Groupbox.js

@@ -27,6 +27,7 @@ const classNameGenerator = ce({
             left: 'shr-rounded-l-l',
         },
     },
+    // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する
     defaultVariants: {
         bgColor: 'COLUMN',
         rounded: false,

package/lib/components/Panel/Groupbox/Groupbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Groupbox.js","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,KAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}
+{"version":3,"file":"Groupbox.js","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;;AAED,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,KAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}

package/lib/components/Scroller/Scroller.cjs

@@ -56,7 +56,9 @@ const classNameGenerator = index.tv({
 });
 const Scroller = React.forwardRef(({ as: Component = 'div', direction = 'vertical', styleType = 'auto', className, children, ...rest }, ref) => {
     const wrapperRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => wrapperRef.current);
+    // as が切り替わると DOM 要素が変わるため、Component を依存配列に含める
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useImperativeHandle(ref, () => wrapperRef.current, [Component]);
     const [tabIndex, setTabIndex] = React.useState(undefined);
     const actualClassName = React.useMemo(() => classNameGenerator({
         direction,

package/lib/components/Scroller/Scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scroller.cjs","sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps | 'tabIndex'>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Scroller',\n  variants: {\n    direction: {\n      horizontal: '',\n      vertical: '',\n      both: '',\n    },\n    styleType: {\n      auto: '',\n      scroll: '',\n    },\n  },\n  compoundVariants: [\n    {\n      direction: 'vertical',\n      styleType: 'auto',\n      className: 'shr-overflow-y-auto shr-overflow-x-hidden',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'auto',\n      className: 'shr-overflow-x-auto shr-overflow-y-hidden',\n    },\n    {\n      direction: 'both',\n      styleType: 'auto',\n      className: 'shr-overflow-auto',\n    },\n    {\n      direction: 'vertical',\n      styleType: 'scroll',\n      className: 'shr-overflow-x-hidden shr-overflow-y-scroll',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'scroll',\n      className: 'shr-overflow-y-hidden shr-overflow-x-scroll',\n    },\n    {\n      direction: 'both',\n      styleType: 'scroll',\n      className: 'shr-overflow-scroll',\n    },\n  ],\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      as: Component = 'div',\n      direction = 'vertical',\n      styleType = 'auto',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => wrapperRef.current!)\n\n    const [tabIndex, setTabIndex] = useState<0 | undefined>(undefined)\n\n    const actualClassName = useMemo(\n      () =>\n        classNameGenerator({\n          direction,\n          styleType,\n          className,\n        }),\n      [direction, styleType, className],\n    )\n\n    useEffect(() => {\n      const refCurrent = wrapperRef.current\n      if (!refCurrent) return\n\n      const autoTabIndex = () => {\n        let nextTabIndex: 0 | undefined = undefined\n\n        switch (direction) {\n          case 'vertical':\n            nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined\n            break\n          case 'horizontal':\n            nextTabIndex = refCurrent.scrollWidth > refCurrent.clientWidth ? 0 : undefined\n            break\n          case 'both':\n            nextTabIndex =\n              refCurrent.scrollHeight > refCurrent.clientHeight ||\n              refCurrent.scrollWidth > refCurrent.clientWidth\n                ? 0\n                : undefined\n            break\n        }\n\n        setTabIndex(nextTabIndex)\n      }\n\n      autoTabIndex()\n\n      const resizeObserver = new ResizeObserver(autoTabIndex)\n      resizeObserver.observe(refCurrent)\n\n      return () => {\n        resizeObserver.unobserve(refCurrent)\n      }\n    }, [direction])\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Component {...rest} ref={wrapperRef} className={actualClassName} tabIndex={tabIndex}>\n        {children}\n      </Component>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAwBA;AACE;AACA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACF;AACF;AAEM;AAYH;;;;;;;;;AAiBE;AACA;;;;;AAMI;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;AAMV;AAEA;AAEA;AACA;AAEA;AACE;AACF;AACF;AAEA;;;AAQE;;AAGF;AACF;;"}
+{"version":3,"file":"Scroller.cjs","sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps | 'tabIndex'>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Scroller',\n  variants: {\n    direction: {\n      horizontal: '',\n      vertical: '',\n      both: '',\n    },\n    styleType: {\n      auto: '',\n      scroll: '',\n    },\n  },\n  compoundVariants: [\n    {\n      direction: 'vertical',\n      styleType: 'auto',\n      className: 'shr-overflow-y-auto shr-overflow-x-hidden',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'auto',\n      className: 'shr-overflow-x-auto shr-overflow-y-hidden',\n    },\n    {\n      direction: 'both',\n      styleType: 'auto',\n      className: 'shr-overflow-auto',\n    },\n    {\n      direction: 'vertical',\n      styleType: 'scroll',\n      className: 'shr-overflow-x-hidden shr-overflow-y-scroll',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'scroll',\n      className: 'shr-overflow-y-hidden shr-overflow-x-scroll',\n    },\n    {\n      direction: 'both',\n      styleType: 'scroll',\n      className: 'shr-overflow-scroll',\n    },\n  ],\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      as: Component = 'div',\n      direction = 'vertical',\n      styleType = 'auto',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // as が切り替わると DOM 要素が変わるため、Component を依存配列に含める\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useImperativeHandle(ref, () => wrapperRef.current!, [Component])\n\n    const [tabIndex, setTabIndex] = useState<0 | undefined>(undefined)\n\n    const actualClassName = useMemo(\n      () =>\n        classNameGenerator({\n          direction,\n          styleType,\n          className,\n        }),\n      [direction, styleType, className],\n    )\n\n    useEffect(() => {\n      const refCurrent = wrapperRef.current\n      if (!refCurrent) return\n\n      const autoTabIndex = () => {\n        let nextTabIndex: 0 | undefined = undefined\n\n        switch (direction) {\n          case 'vertical':\n            nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined\n            break\n          case 'horizontal':\n            nextTabIndex = refCurrent.scrollWidth > refCurrent.clientWidth ? 0 : undefined\n            break\n          case 'both':\n            nextTabIndex =\n              refCurrent.scrollHeight > refCurrent.clientHeight ||\n              refCurrent.scrollWidth > refCurrent.clientWidth\n                ? 0\n                : undefined\n            break\n        }\n\n        setTabIndex(nextTabIndex)\n      }\n\n      autoTabIndex()\n\n      const resizeObserver = new ResizeObserver(autoTabIndex)\n      resizeObserver.observe(refCurrent)\n\n      return () => {\n        resizeObserver.unobserve(refCurrent)\n      }\n    }, [direction])\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Component {...rest} ref={wrapperRef} className={actualClassName} tabIndex={tabIndex}>\n        {children}\n      </Component>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAwBA;AACE;AACA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACF;AACF;AAEM;AAYH;;;AAIA;;;;;;;;AAeE;AACA;;;;;AAMI;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;AAMV;AAEA;AAEA;AACA;AAEA;AACE;AACF;AACF;AAEA;;;AAQE;;AAGF;AACF;;"}

package/lib/components/Scroller/Scroller.js

@@ -54,7 +54,9 @@ const classNameGenerator = ce({
 });
 const Scroller = forwardRef(({ as: Component = 'div', direction = 'vertical', styleType = 'auto', className, children, ...rest }, ref) => {
     const wrapperRef = useRef(null);
-    useImperativeHandle(ref, () => wrapperRef.current);
+    // as が切り替わると DOM 要素が変わるため、Component を依存配列に含める
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useImperativeHandle(ref, () => wrapperRef.current, [Component]);
     const [tabIndex, setTabIndex] = useState(undefined);
     const actualClassName = useMemo(() => classNameGenerator({
         direction,