@mbao01/common 0.0.35 → 0.0.37

package/dist/types/components/FileUploader/FileUploader.d.ts

@@ -5,7 +5,7 @@ export declare const FileUploader: {
     displayName: string;
     Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Input: {
-        ({ className, children, ...props }: FileUploaderInputProps): import("react/jsx-runtime").JSX.Element;
+        ({ classes, children, ...props }: FileUploaderInputProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: import("react").ForwardRefExoticComponent<{

package/dist/types/components/FileUploader/types.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from "react";
+import type { Dispatch, Ref, SetStateAction } from "react";
 import type { DropzoneState, DropzoneOptions } from "react-dropzone";
 export type FileUploaderProps = {
     value: File[] | null;
@@ -7,7 +7,14 @@ export type FileUploaderProps = {
     dropzoneOptions: DropzoneOptions;
     orientation?: "horizontal" | "vertical";
 } & React.HTMLAttributes<HTMLDivElement>;
-export type FileUploaderInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type FileUploaderInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
+    classes?: Partial<{
+        all: string;
+        accepted: string;
+        rejected: string;
+        default: string;
+    }>;
+};
 export type DirectionOptions = "rtl" | "ltr" | undefined;
 export type FileUploaderContextType = {
     dropzoneState: DropzoneState;
@@ -19,4 +26,5 @@ export type FileUploaderContextType = {
     setActiveIndex: Dispatch<SetStateAction<number>>;
     orientation: "horizontal" | "vertical";
     direction: DirectionOptions;
+    hiddenInputRef: Ref<HTMLInputElement>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -145,5 +145,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "4e024b19d151c05b6c1580f461e348f5376c33b9"
+  "gitHead": "dc6e10ed230647d7e4626895c8d9b6a6808daab5"
 }

package/src/components/FileUploader/FileUploader.tsx

@@ -24,6 +24,7 @@ export const FileUploader = ({
   dir,
   ...props
 }: FileUploaderProps) => {
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
   const [isFileTooBig, setIsFileTooBig] = useState(false);
   const [isLOF, setIsLOF] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -54,54 +55,67 @@ export const FileUploader = ({
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!value) return;
-
-      const moveNext = () => {
-        const nextIndex = activeIndex + 1;
-        setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex);
-      };
-
-      const movePrev = () => {
-        const nextIndex = activeIndex - 1;
-        setActiveIndex(nextIndex < 0 ? value.length - 1 : nextIndex);
-      };
-
-      const prevKey =
-        orientation === "horizontal"
-          ? direction === "ltr"
-            ? "ArrowLeft"
-            : "ArrowRight"
-          : "ArrowUp";
-
-      const nextKey =
-        orientation === "horizontal"
-          ? direction === "ltr"
-            ? "ArrowRight"
-            : "ArrowLeft"
-          : "ArrowDown";
-
-      if (e.key === nextKey) {
-        moveNext();
-      } else if (e.key === prevKey) {
-        movePrev();
-      } else if (e.key === "Enter" || e.key === "Space") {
-        if (activeIndex === -1) {
-          dropzoneState.inputRef.current?.click();
-        }
-      } else if (e.key === "Delete" || e.key === "Backspace") {
-        if (activeIndex !== -1) {
-          removeFileFromSet(activeIndex);
-          if (value.length - 1 === 0) {
-            setActiveIndex(-1);
-            return;
-          }
+      const files = value ?? [];
+      const KEY_LIST = [
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Enter",
+        "Space",
+        "Delete",
+        "Backspace",
+        "Escape",
+      ];
+
+      if (KEY_LIST.includes(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const moveNext = () => {
+          const nextIndex = activeIndex + 1;
+          setActiveIndex(nextIndex > files.length - 1 ? 0 : nextIndex);
+        };
+
+        const movePrev = () => {
+          const nextIndex = activeIndex - 1;
+          setActiveIndex(nextIndex < 0 ? files.length - 1 : nextIndex);
+        };
+
+        const prevKey =
+          orientation === "horizontal"
+            ? direction === "ltr"
+              ? "ArrowLeft"
+              : "ArrowRight"
+            : "ArrowUp";
+
+        const nextKey =
+          orientation === "horizontal"
+            ? direction === "ltr"
+              ? "ArrowRight"
+              : "ArrowLeft"
+            : "ArrowDown";
+
+        if (e.key === nextKey) {
+          moveNext();
+        } else if (e.key === prevKey) {
           movePrev();
+        } else if (e.key === "Enter" || e.key === "Space") {
+          if (activeIndex === -1) {
+            dropzoneState.inputRef.current?.click();
+          }
+        } else if (e.key === "Delete" || e.key === "Backspace") {
+          if (activeIndex !== -1) {
+            removeFileFromSet(activeIndex);
+            if (files.length - 1 === 0) {
+              setActiveIndex(-1);
+              return;
+            }
+            movePrev();
+          }
+        } else if (e.key === "Escape") {
+          setActiveIndex(-1);
         }
-      } else if (e.key === "Escape") {
-        setActiveIndex(-1);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -131,6 +145,16 @@ export const FileUploader = ({
 
       onValueChange(newValues);
 
+      if (hiddenInputRef.current) {
+        // Note the specific way we need to munge the file into the hidden input
+        // https://stackoverflow.com/a/68182158/1068446
+        const dataTransfer = new DataTransfer();
+        newValues.forEach((v) => {
+          dataTransfer.items.add(v);
+        });
+        hiddenInputRef.current.files = dataTransfer.files;
+      }
+
       if (rejectedFiles.length > 0) {
         for (const rejectedFile of rejectedFiles) {
           if (rejectedFile.errors[0]?.code === "file-too-large") {
@@ -182,20 +206,17 @@ export const FileUploader = ({
         setActiveIndex,
         orientation,
         direction,
+        hiddenInputRef,
       }}
     >
       <div
-        tabIndex={0}
         onKeyDownCapture={handleKeyDown}
-        className={cn(
-          "grid w-full focus:outline-none overflow-hidden ",
-          className,
-          {
-            "gap-2": value && value.length > 0,
-          }
-        )}
+        className={cn("grid w-full overflow-hidden", className, {
+          "gap-2": value && value.length > 0,
+        })}
         dir={dir}
         {...props}
+        tabIndex={-1}
       >
         {children}
       </div>
@@ -245,9 +266,9 @@ const FileUploaderItem = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "h-6 p-1 justify-between cursor-pointer relative",
-        className,
-        isSelected ? "bg-muted" : ""
+        "h-6 p-1 justify-between cursor-pointer relative rounded",
+        { "bg-base-300": isSelected },
+        className
       )}
       {...props}
     >
@@ -263,7 +284,12 @@ const FileUploaderItem = forwardRef<
         onClick={() => removeFileFromSet(index)}
       >
         <span className="sr-only">remove item {index}</span>
-        <TrashIcon className="w-4 h-4 hover:stroke-destructive duration-200 ease-in-out" />
+        <TrashIcon
+          className={cn(
+            "w-4 h-4 shrink-0 hover:stroke-destructive duration-200 ease-in-out",
+            { "text-error": isSelected }
+          )}
+        />
       </button>
     </div>
   );
@@ -272,41 +298,43 @@ const FileUploaderItem = forwardRef<
 FileUploaderItem.displayName = "FileUploaderItem";
 
 const FileUploaderInput = ({
-  className,
+  classes,
   children,
   ...props
 }: FileUploaderInputProps) => {
-  const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+  const { dropzoneState, isFileTooBig, isLOF, hiddenInputRef } =
+    useFileUpload();
   const rootProps = isLOF ? {} : dropzoneState.getRootProps();
   return (
-    <div
-      {...props}
-      className={`relative w-full ${
-        isLOF ? "opacity-50 cursor-not-allowed " : "cursor-pointer "
-      }`}
-    >
+    <div {...props} className="relative w-full">
       <div
         className={cn(
-          `w-full rounded-lg duration-300 ease-in-out
-         ${
-           dropzoneState.isDragAccept
-             ? "border-green-500"
-             : dropzoneState.isDragReject || isFileTooBig
-               ? "border-red-500"
-               : "border-gray-300"
-         }`,
-          className
+          classes?.all,
+          "w-full rounded-lg duration-300 ease-in-out",
+          isLOF ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+          dropzoneState.isDragAccept
+            ? classes?.accepted
+            : dropzoneState.isDragReject || isFileTooBig
+              ? classes?.rejected
+              : classes?.default
         )}
         {...rootProps}
       >
         {children}
       </div>
       <input
+        ref={hiddenInputRef}
         {...props}
-        disabled={isLOF}
+        type="file"
+        tabIndex={-1}
+        className="hidden opacity-0"
+      />
+      <input
         ref={dropzoneState.inputRef}
+        disabled={isLOF}
         {...dropzoneState.getInputProps()}
-        className={`${isLOF ? "cursor-not-allowed" : ""}`}
+        tabIndex={-1}
+        className={cn({ "cursor-not-allowed": isLOF })}
       />
     </div>
   );

package/src/components/FileUploader/types.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from "react";
+import type { Dispatch, Ref, SetStateAction } from "react";
 import type { DropzoneState, DropzoneOptions } from "react-dropzone";
 
 export type FileUploaderProps = {
@@ -9,8 +9,17 @@ export type FileUploaderProps = {
   orientation?: "horizontal" | "vertical";
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export type FileUploaderInputProps =
-  React.InputHTMLAttributes<HTMLInputElement>;
+export type FileUploaderInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "className"
+> & {
+  classes?: Partial<{
+    all: string;
+    accepted: string;
+    rejected: string;
+    default: string;
+  }>;
+};
 
 export type DirectionOptions = "rtl" | "ltr" | undefined;
 
@@ -24,4 +33,5 @@ export type FileUploaderContextType = {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  hiddenInputRef: Ref<HTMLInputElement>;
 };