feat(InputFile): multipleでファイルを追加していけるように変更

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx

@@ -79,7 +79,6 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
         parentRef,
       }}
     >
-      {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
       <div {...props} className={styles} ref={parentRef} role="presentation" />
     </AccordionPanelContext.Provider>
   )

packages/smarthr-ui/src/components/InputFile/InputFile.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import React, {
   ComponentPropsWithRef,
   ReactNode,
@@ -86,6 +87,7 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
       hasFileList = true,
       onChange,
       disabled = false,
+      multiple,
       error,
       decorators,
       ...props
@@ -129,15 +131,30 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
       [decorators],
     )
 
-    const updateFiles = useCallback(
+    const updateInputValue = useCallback(
       (newFiles: File[]) => {
-        if (onChange) {
-          onChange(newFiles)
+        if (!inputRef.current) {
+          return
         }
+        const buff = new DataTransfer()
+        newFiles.forEach((file) => {
+          buff.items.add(file)
+        })
+
+        isUpdatingFilesDirectly.current = true
+        inputRef.current.files = buff.files
+        isUpdatingFilesDirectly.current = false
+      },
+      [inputRef],
+    )
 
+    const updateFiles = useCallback(
+      (newFiles: File[]) => {
+        onChange?.(newFiles)
+        updateInputValue(newFiles)
         setFiles(newFiles)
       },
-      [setFiles, onChange],
+      [setFiles, onChange, updateInputValue],
     )
 
     const handleChange = useCallback(
@@ -146,9 +163,16 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
           return
         }
 
-        updateFiles(Array.from(e.target.files ?? []))
+        const newFiles = Array.from(e.target.files ?? [])
+
+        if (multiple) {
+          // multipleの場合、すでに選択済みのファイルと結合する
+          updateFiles([...files, ...newFiles])
+        } else {
+          updateFiles(newFiles)
+        }
       },
-      [isUpdatingFilesDirectly, updateFiles],
+      [files, isUpdatingFilesDirectly, updateFiles, multiple],
     )
 
     const handleDelete = useCallback(
@@ -161,26 +185,16 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
         const newFiles = files.filter((_, i) => index !== i)
 
         updateFiles(newFiles)
-
-        const buff = new DataTransfer()
-
-        newFiles.forEach((file) => {
-          buff.items.add(file)
-        })
-
-        isUpdatingFilesDirectly.current = true
-        inputRef.current.files = buff.files
-        isUpdatingFilesDirectly.current = false
       },
-      [files, isUpdatingFilesDirectly, inputRef, updateFiles],
+      [files, inputRef, updateFiles],
     )
 
     return (
       <Stack align="flex-start" className={wrapperStyle}>
         {!disabled && hasFileList && files.length > 0 && (
           <BaseColumn as="ul" padding={BASE_COLUMN_PADDING} className={fileListStyle}>
             {files.map((file, index) => (
-              <li key={index} className={fileItemStyle}>
+              <li key={`${file.name}-${index}`} className={fileItemStyle}>
                 <span className="smarthr-ui-InputFile-fileName">{file.name}</span>
                 <Button
                   variant="text"
@@ -196,8 +210,10 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
           </BaseColumn>
         )}
         <span className={inputWrapperStyle}>
+          {}
           <input
             {...props}
+            multiple
             data-smarthr-ui-input="true"
             type="file"
             onChange={handleChange}