@mbao01/common 0.0.34 → 0.0.36

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

@@ -1,10 +1,13 @@
 /// <reference types="react" />
-import type { FileUploaderProps } from "./types";
+import type { FileUploaderInputProps, FileUploaderProps } from "./types";
 export declare const FileUploader: {
     ({ className, dropzoneOptions, value, onValueChange, reSelect, orientation, children, dir, ...props }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Input: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: {
+        ({ className, children, ...props }: FileUploaderInputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Item: import("react").ForwardRefExoticComponent<{
         index: number;
     } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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,14 +7,17 @@ export type FileUploaderProps = {
     dropzoneOptions: DropzoneOptions;
     orientation?: "horizontal" | "vertical";
 } & React.HTMLAttributes<HTMLDivElement>;
+export type FileUploaderInputProps = React.InputHTMLAttributes<HTMLInputElement>;
 export type DirectionOptions = "rtl" | "ltr" | undefined;
 export type FileUploaderContextType = {
     dropzoneState: DropzoneState;
     isLOF: boolean;
     isFileTooBig: boolean;
     removeFileFromSet: (index: number) => void;
+    removeAll: () => void;
     activeIndex: number;
     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.34",
+  "version": "0.0.36",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -145,5 +145,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "cc3e285416d8c9184e0bf597400550d08847001e"
+  "gitHead": "56575cccb960383ac1b9397068161bbd1b25a477"
 }

package/src/components/FileUploader/FileUploader.tsx

@@ -4,7 +4,11 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { useDropzone, FileRejection } from "react-dropzone";
 import { toast } from "sonner";
 import { TrashIcon } from "@radix-ui/react-icons";
-import type { DirectionOptions, FileUploaderProps } from "./types";
+import type {
+  DirectionOptions,
+  FileUploaderInputProps,
+  FileUploaderProps,
+} from "./types";
 import { cn } from "../../utilities";
 import { FileUploaderContext } from "./FileUploaderContext";
 import { useFileUpload } from "./useFileUpload";
@@ -20,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);
@@ -44,6 +49,10 @@ export const FileUploader = ({
     [value, onValueChange]
   );
 
+  const removeAll = useCallback(() => {
+    onValueChange(null);
+  }, [onValueChange]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       e.preventDefault();
@@ -123,6 +132,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") {
@@ -169,10 +188,12 @@ export const FileUploader = ({
         isLOF,
         isFileTooBig,
         removeFileFromSet,
+        removeAll,
         activeIndex,
         setActiveIndex,
         orientation,
         direction,
+        hiddenInputRef,
       }}
     >
       <div
@@ -262,15 +283,16 @@ const FileUploaderItem = forwardRef<
 
 FileUploaderItem.displayName = "FileUploaderItem";
 
-const FileUploaderInput = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+const FileUploaderInput = ({
+  className,
+  children,
+  ...props
+}: FileUploaderInputProps) => {
+  const { dropzoneState, isFileTooBig, isLOF, hiddenInputRef } =
+    useFileUpload();
   const rootProps = isLOF ? {} : dropzoneState.getRootProps();
   return (
     <div
-      ref={ref}
       {...props}
       className={`relative w-full ${
         isLOF ? "opacity-50 cursor-not-allowed " : "cursor-pointer "
@@ -293,14 +315,20 @@ const FileUploaderInput = forwardRef<
         {children}
       </div>
       <input
-        ref={dropzoneState.inputRef}
+        {...props}
+        ref={hiddenInputRef}
+        type="file"
+        style={{ opacity: 0, display: "none" }}
+      />
+      <input
         disabled={isLOF}
+        ref={dropzoneState.inputRef}
         {...dropzoneState.getInputProps()}
         className={`${isLOF ? "cursor-not-allowed" : ""}`}
       />
     </div>
   );
-});
+};
 
 FileUploaderInput.displayName = "FileInput";
 

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,6 +9,9 @@ export type FileUploaderProps = {
   orientation?: "horizontal" | "vertical";
 } & React.HTMLAttributes<HTMLDivElement>;
 
+export type FileUploaderInputProps =
+  React.InputHTMLAttributes<HTMLInputElement>;
+
 export type DirectionOptions = "rtl" | "ltr" | undefined;
 
 export type FileUploaderContextType = {
@@ -16,8 +19,10 @@ export type FileUploaderContextType = {
   isLOF: boolean;
   isFileTooBig: boolean;
   removeFileFromSet: (index: number) => void;
+  removeAll: () => void;
   activeIndex: number;
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  hiddenInputRef: Ref<HTMLInputElement>;
 };