@oneplatformdev/ui 0.0.1-beta.87 → 0.0.1-beta.88

package/Dropzone/Dropzone.d.ts

@@ -1,5 +1,9 @@
-import { DropzoneProps } from './Dropzone.types';
+import { DropzoneProps, DropzoneValueItem } from './Dropzone.types';
+import { Dispatch, SetStateAction } from 'react';
 
+export interface DropzoneControl {
+    setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;
+}
 /**
  * Dropzone component - A drag-and-drop file upload area with image previews, error handling, and localization.
  *
@@ -19,4 +23,4 @@ import { DropzoneProps } from './Dropzone.types';
  * @param {React.Ref<HTMLDivElement>} ref - Ref for the root dropzone container.
  * @returns {JSX.Element} The rendered Dropzone component.
  */
-export declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<DropzoneControl>>;

package/Dropzone/Dropzone.mjs

@@ -1,56 +1,57 @@
 import { jsxs as r, jsx as i, Fragment as U } from "react/jsx-runtime";
-import { forwardRef as j, useState as g } from "react";
-import { useDropzone as O } from "react-dropzone";
-import { Card as X } from "../Card/Card.mjs";
-import { X as Y } from "lucide-react";
+import { X as j } from "lucide-react";
+import { forwardRef as H, useState as w, useImperativeHandle as O } from "react";
+import { useDropzone as X } from "react-dropzone";
 import { cn as f } from "@oneplatformdev/utils";
+import { Card as Y } from "../Card/Card.mjs";
 import { F as q, D as G } from "../DropzoneFilePreview-Dhtv8F4u.js";
-import { DefaultFileIcon as H, isFile as u, extractName as J } from "./DropzoneUtils.mjs";
-import { DropzoneSinglePickPreview as K } from "./DropzoneSinglePickPreview.mjs";
-const Q = j(
+import { DropzoneSinglePickPreview as J } from "./DropzoneSinglePickPreview.mjs";
+import { DefaultFileIcon as K, isFile as g, extractName as Q } from "./DropzoneUtils.mjs";
+const R = H(
   ({
     acceptTypes: y = G,
     maxSizeMB: F,
-    maxFiles: h = 1,
+    maxFiles: v = 1,
     onErrors: a,
     hideErrors: D = !1,
     disabled: p = !1,
     classNames: o,
     value: z = [],
     onChangeValue: s,
-    className: E,
-    labelDropzonePrompt: I = "Drop files here or click to select",
+    className: I,
+    labelDropzonePrompt: E = "Drop files here or click to select",
     labelDropzoneSubPrompt: b = "",
-    labelOrClickToSelect: R = "Click to select files",
+    labelOrClickToSelect: Z = "Click to select files",
     labelSelectedFiles: S = "Selected Files",
     labelUploadErrors: N = "Upload Errors",
     labelFileTooLarge: W = "File is too large",
     labelInvalidFileType: k = "Invalid file type",
     singlePick: c = !1,
-    ...T
-  }, _) => {
-    const [n, v] = g(z), [m, A] = g([]), B = (e, l) => {
-      A(l), a == null || a(l);
-      const t = c ? e.slice(0, 1) : [...n, ...e].slice(0, h);
-      v(t), s == null || s(t);
-    }, w = (e, l) => {
+    ...B
+  }, T) => {
+    const [n, x] = w(z), [m, _] = w([]), A = (e, l) => {
+      _(l), a == null || a(l);
+      const t = c ? e.slice(0, 1) : [...n, ...e].slice(0, v);
+      x(t), s == null || s(t);
+    }, u = (e, l) => {
       if (p) return;
       e.stopPropagation();
-      const t = n.filter((d, x) => x !== l);
-      v(t), s == null || s(t);
-    }, { getRootProps: L, getInputProps: M, isDragActive: P } = O({
-      onDrop: B,
+      const t = n.filter((d, h) => h !== l);
+      x(t), s == null || s(t);
+    }, { getRootProps: L, getInputProps: M, isDragActive: P } = X({
+      onDrop: A,
       accept: y.reduce((e, l) => (e[l] = [], e), {}),
       maxSize: F * 1024 * 1024,
-      maxFiles: c ? 1 : h,
+      maxFiles: c ? 1 : v,
       disabled: p
     });
-    return /* @__PURE__ */ r(
-      X,
+    return O(T, () => ({
+      setItems: x
+    }), []), /* @__PURE__ */ r(
+      Y,
       {
         ...L(),
-        ...T,
-        ref: _,
+        ...B,
         className: f(
           "border-dashed p-2 text-center flex flex-col items-center justify-center cursor-pointer",
           p && "border-[#E4E4E7] pointer-events-none",
@@ -58,7 +59,7 @@ const Q = j(
           P && "bg-gray-100",
           c && "!shadow-none",
           c && n.length > 0 && "!p-0 !shadow-none",
-          E
+          I
         ),
         children: [
           /* @__PURE__ */ i("input", { ...M() }),
@@ -70,9 +71,9 @@ const Q = j(
                 o == null ? void 0 : o.idleWrapper
               ),
               children: [
-                /* @__PURE__ */ i(H, {}),
+                /* @__PURE__ */ i(K, {}),
                 !p && /* @__PURE__ */ r(U, { children: [
-                  /* @__PURE__ */ i("span", { className: "font-medium text-md text-foreground max-w-[200px]", children: I }),
+                  /* @__PURE__ */ i("span", { className: "font-medium text-md text-foreground max-w-[200px]", children: E }),
                   /* @__PURE__ */ i("span", { className: "font-normal text-xs text-foreground max-w-[250px]", children: b })
                 ] })
               ]
@@ -95,11 +96,11 @@ const Q = j(
               ] }, d)) })
             ] }, l)) })
           ] }),
-          c && n.length > 0 && /* @__PURE__ */ i(
-            K,
+          !!(c && n.length) && /* @__PURE__ */ i(
+            J,
             {
               item: n[0],
-              onRemoveClick: (e) => w(e, 0),
+              onRemoveClick: (e) => u(e, 0),
               disabled: p
             }
           ),
@@ -109,7 +110,7 @@ const Q = j(
               ":"
             ] }),
             /* @__PURE__ */ i("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: n.map((e, l) => {
-              const t = u(e) ? e.name : J(e), d = u(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
+              const t = g(e) ? e.name : Q(e), d = g(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
               return /* @__PURE__ */ r(
                 "li",
                 {
@@ -121,8 +122,8 @@ const Q = j(
                         "div",
                         {
                           className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm",
-                          onClick: (x) => w(x, l),
-                          children: /* @__PURE__ */ i(Y, { size: 16, strokeWidth: 1, color: "black" })
+                          onClick: (h) => u(h, l),
+                          children: /* @__PURE__ */ i(j, { size: 16, strokeWidth: 1, color: "black" })
                         }
                       )
                     ] }),
@@ -145,7 +146,7 @@ const Q = j(
     );
   }
 );
-Q.displayName = "Dropzone";
+R.displayName = "Dropzone";
 export {
-  Q as Dropzone
+  R as Dropzone
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.0.1-beta.87",
+  "version": "0.0.1-beta.88",
   "description": "UI React Components.",
   "author": "One Platform Development Team",
   "keywords": [