@mbao01/common 0.0.34 → 0.0.35

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

@@ -7,12 +7,14 @@ 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";

package/package.json

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

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";
@@ -44,6 +48,10 @@ export const FileUploader = ({
     [value, onValueChange]
   );
 
+  const removeAll = useCallback(() => {
+    onValueChange(null);
+  }, [onValueChange]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       e.preventDefault();
@@ -169,6 +177,7 @@ export const FileUploader = ({
         isLOF,
         isFileTooBig,
         removeFileFromSet,
+        removeAll,
         activeIndex,
         setActiveIndex,
         orientation,
@@ -262,15 +271,15 @@ const FileUploaderItem = forwardRef<
 
 FileUploaderItem.displayName = "FileUploaderItem";
 
-const FileUploaderInput = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
+const FileUploaderInput = ({
+  className,
+  children,
+  ...props
+}: FileUploaderInputProps) => {
   const { dropzoneState, isFileTooBig, isLOF } = 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 +302,15 @@ const FileUploaderInput = forwardRef<
         {children}
       </div>
       <input
-        ref={dropzoneState.inputRef}
+        {...props}
         disabled={isLOF}
+        ref={dropzoneState.inputRef}
         {...dropzoneState.getInputProps()}
         className={`${isLOF ? "cursor-not-allowed" : ""}`}
       />
     </div>
   );
-});
+};
 
 FileUploaderInput.displayName = "FileInput";
 

package/src/components/FileUploader/types.ts

@@ -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,6 +19,7 @@ export type FileUploaderContextType = {
   isLOF: boolean;
   isFileTooBig: boolean;
   removeFileFromSet: (index: number) => void;
+  removeAll: () => void;
   activeIndex: number;
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";