@bioturing/components 0.17.1 → 0.19.0

package/dist/components/DragDrop/droppable.js

@@ -1,48 +1,80 @@
 "use client";
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { useDroppable as z } from "./hooks.js";
-import { ArrowsOutCardinalIcon as N } from "@bioturing/assets";
-import { useRender as b } from "@base-ui-components/react/use-render";
-import { useCls as C } from "../utils/antdUtils.js";
-import { clsx as D } from "../utils/cn.js";
-const g = ({
-  id: o,
-  children: n,
-  className: s,
-  disabled: i = !1,
-  placeholder: d = "Drop items here",
-  icon: l = /* @__PURE__ */ r(N, { size: 24 }),
-  render: t,
+import { jsxs as P, jsx as n } from "react/jsx-runtime";
+import { memo as W, useCallback as x, useMemo as b } from "react";
+import { useDroppable as h } from "./hooks.js";
+import { ArrowsOutCardinalIcon as y } from "@bioturing/assets";
+import { useRender as B } from "@base-ui-components/react/use-render";
+import { Value as F } from "./value.js";
+import { uniqWith as G, isEqual as H } from "es-toolkit";
+import { useCls as J } from "../utils/antdUtils.js";
+import { clsx as K } from "../utils/cn.js";
+const Q = ({
+  id: d,
+  children: m,
+  className: D,
+  disabled: E = !1,
+  placeholder: i = "Drop items here",
+  icon: f = /* @__PURE__ */ n(y, { size: 24 }),
+  render: O,
   onDrop: c,
-  validate: m,
-  ...p
+  validate: R,
+  multiple: s,
+  value: r,
+  onChange: o,
+  renderValueLabel: p,
+  renderValueIcon: a,
+  ...j
 }) => {
-  const e = C(), { isOver: a, setNodeRef: f, attributes: u, listeners: h } = z({
-    id: o,
-    disabled: i,
-    onDrop: c,
-    validate: m
-  }), v = /* @__PURE__ */ x("div", { className: e("drop-zone-content"), children: [
-    /* @__PURE__ */ r("div", { className: e("drop-zone-icon"), children: l }),
-    /* @__PURE__ */ r("div", { className: e("drop-zone-text"), children: d })
-  ] });
-  return b({
-    render: t || /* @__PURE__ */ r("div", { className: D(e("drop-zone"), s) }),
-    ref: f,
+  const e = J(), q = x(
+    (t) => {
+      c && c(t), o && o(
+        s ? G([...r, t.data], H) : t.data
+      );
+    },
+    [c, o, s, r]
+  ), { isOver: k, setNodeRef: w, attributes: A, listeners: I } = h({
+    id: d,
+    disabled: E,
+    onDrop: q,
+    validate: R
+  }), z = b(
+    () => ({ value: r, onChange: o, multiple: s, renderValueLabel: p, renderValueIcon: a }),
+    [r, o, s, p, a]
+  ), N = b(
+    () => m || /* @__PURE__ */ P("div", { className: e("drop-zone-content"), children: [
+      /* @__PURE__ */ n("div", { className: e("drop-zone-icon"), children: f }),
+      /* @__PURE__ */ n("div", { className: e("drop-zone-text"), children: i })
+    ] }),
+    [m, e, f, i]
+  ), M = x(
+    ({ className: t, ...l }) => !s && r || s && r.length ? /* @__PURE__ */ n(
+      F,
+      {
+        ...z,
+        className: t,
+        ...l
+      }
+    ) : /* @__PURE__ */ n("div", { className: K(e("drop-zone"), t), ...l, children: N }),
+    [r, s, z, N, e]
+  );
+  return B({
+    render: O ?? M,
+    ref: w,
     props: {
-      children: n || v,
-      className: s,
-      ...u,
-      ...h,
-      ...p
+      className: D,
+      ...A,
+      ...I,
+      ...j
     },
     state: {
-      isOver: a,
-      id: o
+      isOver: k,
+      value: r,
+      onChange: o,
+      id: d
     }
   });
-};
+}, L = W(Q);
 export {
-  g as Droppable
+  L as Droppable
 };
 //# sourceMappingURL=droppable.js.map

package/dist/components/DragDrop/droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"droppable.js","sources":["../../../src/components/DragDrop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps } from \"./types\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nexport const Droppable = <T extends Data = Data>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon size={24} />,\n  render,\n  onDrop,\n  validate,\n  ...rest\n}: DragDropDroppableProps<T>) => {\n  const cls = useCls();\n  const { isOver, setNodeRef, attributes, listeners, valid } = useDroppable({\n    id,\n    disabled,\n    onDrop,\n    validate,\n  });\n\n  // Default content when no children are provided\n  const defaultContent = (\n    <div className={cls(\"drop-zone-content\")}>\n      <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n      <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n    </div>\n  );\n\n  const renderedElement = useRender({\n    render: render ? (\n      render\n    ) : (\n      <div className={clsx(cls(\"drop-zone\"), className)} />\n    ),\n    ref: setNodeRef,\n    props: {\n      children: children || defaultContent,\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n"],"names":["Droppable","id","children","className","disabled","placeholder","icon","jsx","ArrowsOutCardinalIcon","render","onDrop","validate","rest","cls","useCls","isOver","setNodeRef","attributes","listeners","useDroppable","defaultContent","jsxs","useRender","clsx"],"mappings":";;;;;;;AAYO,MAAMA,IAAY,CAAwB;AAAA,EAC/C,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO,gBAAAC,EAACC,GAAsB,EAAA,MAAM,GAAI,CAAA;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAiC;AAC/B,QAAMC,IAAMC,EAAO,GACb,EAAE,QAAAC,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAiB,IAAIC,EAAa;AAAA,IACxE,IAAAlB;AAAA,IACA,UAAAG;AAAA,IACA,QAAAM;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAGKS,IACH,gBAAAC,EAAA,OAAA,EAAI,WAAWR,EAAI,mBAAmB,GACrC,UAAA;AAAA,IAAA,gBAAAN,EAAC,OAAI,EAAA,WAAWM,EAAI,gBAAgB,GAAI,UAAKP,GAAA;AAAA,sBAC5C,OAAI,EAAA,WAAWO,EAAI,gBAAgB,GAAI,UAAYR,EAAA,CAAA;AAAA,EAAA,GACtD;AAuBK,SApBiBiB,EAAU;AAAA,IAChC,QAAQb,KAGL,gBAAAF,EAAA,OAAA,EAAI,WAAWgB,EAAKV,EAAI,WAAW,GAAGV,CAAS,EAAG,CAAA;AAAA,IAErD,KAAKa;AAAA,IACL,OAAO;AAAA,MACL,UAAUd,KAAYkB;AAAA,MACtB,WAAAjB;AAAA,MACA,GAAGc;AAAA,MACH,GAAGC;AAAA,MACH,GAAGN;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAG;AAAA,MACA,IAAAd;AAAA,IAAA;AAAA,EACF,CACD;AAGH;"}
+{"version":3,"file":"droppable.js","sources":["../../../src/components/DragDrop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon size={24} />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({ value, onChange, multiple, renderValueLabel, renderValueIcon }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) =>\n      (!multiple && value) || (multiple && (value as T[]).length) ? (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      ) : (\n        <div className={clsx(cls(\"drop-zone\"), className as string)} {...props}>\n          {dropzoneContent}\n        </div>\n      ),\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","jsx","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","defaultRender","props","Value","clsx","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO,gBAAAC,EAACC,GAAsB,EAAA,MAAM,GAAI,CAAA;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAO,GACbC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIZ,KACFA,EAAOY,CAAI,GAETR,KAECA;AAAA,QADCF,IAEAW,EAAS,CAAC,GAAIV,GAAeS,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAFtC;AAAA,IAKN;AAAA,IACA,CAACZ,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,EAAE,QAAAY,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAT;AAAA,EAAA,CACD,GAGKmB,IAAaC;AAAA,IACjB,OAAO,EAAE,OAAAlB,GAAO,UAAAC,GAAU,UAAAF,GAAU,kBAAAG,GAAkB,iBAAAC,EAAgB;AAAA,IACtE,CAACH,GAAOC,GAAUF,GAAUG,GAAkBC,CAAe;AAAA,EAC/D,GAGMgB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAX,EAAC,OAAI,EAAA,WAAWW,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM6B,IAAgBb;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGgC,EACd,MAAA,CAACvB,KAAYC,KAAWD,KAAaC,EAAc,SAClD,gBAAAN;AAAA,MAAC6B;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGgC;AAAA,MAAA;AAAA,IAGN,IAAA,gBAAA5B,EAAC,OAAI,EAAA,WAAW8B,EAAKnB,EAAI,WAAW,GAAGf,CAAmB,GAAI,GAAGgC,GAC9D,UACHH,EAAA,CAAA;AAAA,IAEJ,CAACnB,GAAOD,GAAUkB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBoB,EAAU;AAAA,IAChC,QAAQ7B,KAAUyB;AAAA,IAClB,KAAKR;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,IAAAb;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEasC,IAAYC,EAAKxC,CAAc;"}

package/dist/components/DragDrop/hooks.js

@@ -1,49 +1,55 @@
-import { useState as C, useRef as R, useCallback as u, useEffect as J } from "react";
-import { useDragDropContext as A } from "./context.js";
-function z({
+import { useState as R, useRef as N, useCallback as u, useEffect as A } from "react";
+import { useDragDropContext as z } from "./context.js";
+function k({
   id: c,
-  data: t,
+  data: r,
   disabled: n = !1,
-  onDragStart: h,
+  onDragStart: y,
   onDragEnd: E
 }) {
-  const [g, i] = C(!1), x = R(null), r = R(null), y = u((a) => {
+  const [g, i] = R(!1), x = N(null), e = N(null), I = u((a) => {
     x.current = a;
   }, []), {
     setActive: o,
     onDragStart: m,
     onDragEnd: v,
     setIsDragging: p
-  } = A(), d = h || m, f = E || v, I = u(
+  } = z(), d = y || m, l = E || v, S = u(
     (a) => {
-      var D, N, O, T;
+      var D, O, T, j;
       if (n) return;
       i(!0), p(!0);
-      const l = { data: t, id: c };
-      o(l), d && d({ active: l });
-      const e = JSON.stringify({ id: c, data: t });
-      (D = a.dataTransfer) == null || D.setData("application/json", e), (N = a.dataTransfer) == null || N.setData("text/plain", e);
+      const f = { data: r, id: c };
+      o(f), d && d({ active: f });
+      let t;
+      try {
+        t = JSON.stringify({ id: c, data: r });
+      } catch (h) {
+        console.error("Error serializing data:", h);
+        return;
+      }
+      (D = a.dataTransfer) == null || D.setData("application/json", t), (O = a.dataTransfer) == null || O.setData("text/plain", t);
       const s = x.current;
       if (s) {
-        const j = s.getBoundingClientRect();
-        r.current = s.cloneNode(!0), r.current.style.maxWidth = "400px", r.current.style.position = "absolute", r.current.style.pointerEvents = "none", r.current.style.top = "-99px", r.current.style.left = "-99px", r.current.style.zIndex = "-1", (O = s.parentElement) == null || O.appendChild(r.current), (T = a.dataTransfer) == null || T.setDragImage(
-          r.current,
-          a.clientX - j.left,
-          a.clientY - j.top
+        const h = s.getBoundingClientRect();
+        e.current = s.cloneNode(!0), e.current.style.maxWidth = "400px", e.current.style.position = "absolute", e.current.style.pointerEvents = "none", e.current.style.top = "-99px", e.current.style.left = "-99px", e.current.style.zIndex = "-1", (T = s.parentElement) == null || T.appendChild(e.current), (j = a.dataTransfer) == null || j.setDragImage(
+          e.current,
+          a.clientX - h.left,
+          a.clientY - h.top
         );
       }
     },
-    [c, t, n, d, o, p]
-  ), S = u(
+    [c, r, n, d, o, p]
+  ), C = u(
     (a) => {
-      var l;
-      n || (i(!1), p(!1), (l = r.current) == null || l.remove(), f && f({ active: { data: t, id: c }, over: null }));
+      var f;
+      n || (i(!1), p(!1), (f = e.current) == null || f.remove(), l && l({ active: { data: r, id: c }, over: null }));
     },
-    [c, t, n, f, p]
+    [c, r, n, l, p]
   );
   return {
     isDragging: g,
-    setNodeRef: y,
+    setNodeRef: I,
     attributes: {
       draggable: !n,
       role: "button",
@@ -53,49 +59,49 @@ function z({
       "data-disabled": n ? !0 : void 0
     },
     listeners: {
-      onDragStart: I,
-      onDragEnd: S
+      onDragStart: S,
+      onDragEnd: C
     }
   };
 }
 function B({
   id: c,
-  disabled: t = !1,
+  disabled: r = !1,
   validate: n = () => !0,
-  onDrop: h
+  onDrop: y
 }) {
-  const [E, g] = C(!1), [i, x] = C(void 0), r = R(null), y = u((e) => {
-    r.current = e;
+  const [E, g] = R(!1), [i, x] = R(void 0), e = N(null), I = u((t) => {
+    e.current = t;
   }, []), {
     active: o,
     setActive: m,
     onDragEnd: v,
     onDrop: p,
     isDragging: d
-  } = A(), f = h || p;
-  J(() => {
+  } = z(), l = y || p;
+  A(() => {
     o && n && x(n(o));
   }, [o, n]);
-  const I = u(
-    (e) => {
-      t || (e.preventDefault(), g(!0));
+  const S = u(
+    (t) => {
+      r || (t.preventDefault(), g(!0));
     },
-    [t]
-  ), S = u(
-    (e) => {
-      t || (e.preventDefault(), e.dataTransfer.dropEffect = "move");
+    [r]
+  ), C = u(
+    (t) => {
+      r || (t.preventDefault(), t.dataTransfer.dropEffect = "move");
     },
-    [t]
+    [r]
   ), a = u(
-    (e) => {
-      t || e.currentTarget === e.target && g(!1);
+    (t) => {
+      r || t.currentTarget === t.target && g(!1);
     },
-    [t]
-  ), l = u(
-    (e) => {
-      if (!t && (e.preventDefault(), !!i))
+    [r]
+  ), f = u(
+    (t) => {
+      if (!r && (t.preventDefault(), !!i))
         try {
-          const s = e.dataTransfer.getData("application/json");
+          const s = t.dataTransfer.getData("application/json");
           let D;
           if (s)
             D = JSON.parse(s);
@@ -103,7 +109,7 @@ function B({
             D = o;
           else
             return;
-          f && f(D), v && o && v({
+          l && l(D), v && o && v({
             active: D,
             over: { id: c }
           }), g(!1), m(null);
@@ -111,29 +117,29 @@ function B({
           console.error("Error processing drop:", s);
         }
     },
-    [t, c, o, f, v, m, i]
+    [r, c, o, l, v, m, i]
   );
   return {
     isOver: E,
-    setNodeRef: y,
+    setNodeRef: I,
     attributes: {
       "data-droppable": !0,
       "data-over": E ? !0 : void 0,
-      "data-disabled": t ? !0 : void 0,
+      "data-disabled": r ? !0 : void 0,
       "data-dragging": d ? !0 : void 0,
-      "data-valid": i === !0 ? !0 : void 0
+      "data-valid": i ? !0 : void 0
     },
     valid: i,
     listeners: {
-      onDragEnter: I,
-      onDragOver: S,
+      onDragEnter: S,
+      onDragOver: C,
       onDragLeave: a,
-      onDrop: l
+      onDrop: f
     }
   };
 }
 export {
-  z as useDraggable,
+  k as useDraggable,
   B as useDroppable
 };
 //# sourceMappingURL=hooks.js.map

package/dist/components/DragDrop/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/DragDrop/hooks.ts"],"sourcesContent":["import { useCallback, useRef, useState, useEffect } from \"react\";\n\nimport {\n  DraggableInfo,\n  type Data,\n  type UseDraggableProps,\n  type UseDroppableProps,\n} from \"./types\";\nimport { useDragDropContext } from \"./context\";\n\n/**\n * Hook for making an element draggable using HTML5 drag and drop API\n */\nexport function useDraggable<T extends Data = Data>({\n  id,\n  data,\n  disabled = false,\n  onDragStart: onDragStartProp,\n  onDragEnd: onDragEndProp,\n}: UseDraggableProps<T>) {\n  const [isDragging, setIsDragging] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n  const thumbnailNodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    setActive,\n    onDragStart: onDragStartContext,\n    onDragEnd: onDragEndContext,\n    setIsDragging: setIsDraggingContext,\n  } = useDragDropContext();\n\n  const onDragStart = onDragStartProp || onDragStartContext;\n  const onDragEnd = onDragEndProp || onDragEndContext;\n\n  const handleDragStart = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(true);\n      setIsDraggingContext(true);\n\n      // Update the active item in context\n      const dragItem = { data, id };\n      setActive(dragItem);\n\n      // Call the onDragStart callback if available\n      if (onDragStart) {\n        onDragStart({ active: dragItem });\n      }\n\n      // Set data transfer\n      const dataPayload = JSON.stringify({ id, data });\n      e.dataTransfer?.setData(\"application/json\", dataPayload);\n\n      // For Firefox compatibility\n      e.dataTransfer?.setData(\"text/plain\", dataPayload);\n\n      // Set drag image (optional)\n      const node = nodeRef.current;\n      if (node) {\n        const nodeRect = node.getBoundingClientRect();\n\n        thumbnailNodeRef.current = node.cloneNode(true) as HTMLElement;\n        thumbnailNodeRef.current.style.maxWidth = \"400px\";\n        thumbnailNodeRef.current.style.position = \"absolute\";\n        thumbnailNodeRef.current.style.pointerEvents = \"none\";\n        thumbnailNodeRef.current.style.top = \"-99px\";\n        thumbnailNodeRef.current.style.left = \"-99px\";\n        thumbnailNodeRef.current.style.zIndex = \"-1\";\n\n        node.parentElement?.appendChild(thumbnailNodeRef.current);\n\n        // Use the node itself as the drag image\n        e.dataTransfer?.setDragImage(\n          thumbnailNodeRef.current,\n          e.clientX - nodeRect.left,\n          e.clientY - nodeRect.top\n        );\n      }\n    },\n    [id, data, disabled, onDragStart, setActive, setIsDraggingContext]\n  );\n\n  const handleDragEnd = useCallback(\n    (_e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(false);\n      setIsDraggingContext(false);\n      thumbnailNodeRef.current?.remove();\n\n      if (onDragEnd) {\n        onDragEnd({ active: { data, id }, over: null });\n      }\n    },\n    [id, data, disabled, onDragEnd, setIsDraggingContext]\n  );\n\n  return {\n    isDragging,\n    setNodeRef,\n    attributes: {\n      draggable: !disabled,\n      role: \"button\",\n      \"aria-pressed\": isDragging,\n      tabIndex: disabled ? -1 : 0,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n    },\n    listeners: {\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n    },\n  };\n}\n\n/**\n * Hook for making an element a drop target using HTML5 drag and drop API\n */\nexport function useDroppable<T extends Data = Data>({\n  id,\n  disabled = false,\n  validate = () => true,\n  onDrop: onDropProp,\n}: UseDroppableProps<T>) {\n  const [isOver, setIsOver] = useState(false);\n  const [valid, setValid] = useState(undefined);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    active,\n    setActive,\n    onDragEnd,\n    onDrop: onDropContext,\n    isDragging,\n  } = useDragDropContext<T>();\n\n  const onDrop = onDropProp || onDropContext;\n\n  useEffect(() => {\n    if (active && validate) {\n      setValid(validate(active));\n    }\n  }, [active, validate]);\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      setIsOver(true);\n    },\n    [disabled]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault(); // Necessary to allow dropping\n      e.dataTransfer.dropEffect = \"move\";\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      // Only set isOver to false if we're leaving this element (not a child)\n      if (e.currentTarget === e.target) {\n        setIsOver(false);\n      }\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      if (!valid) return;\n\n      try {\n        // Try to get data from dataTransfer\n        const jsonData = e.dataTransfer.getData(\"application/json\");\n        let draggedItem: DraggableInfo<T>;\n\n        if (jsonData) {\n          draggedItem = JSON.parse(jsonData);\n        } else if (active) {\n          // Fall back to active item from context if dataTransfer is not available\n          draggedItem = active;\n        } else {\n          return; // No item to drop\n        }\n\n        // Call the component's onDrop handler if provided\n        if (onDrop) {\n          onDrop(draggedItem);\n        }\n\n        // Call the onDragEnd callback from context if available\n        if (onDragEnd && active) {\n          onDragEnd({\n            active: draggedItem,\n            over: { id },\n          });\n        }\n\n        setIsOver(false);\n\n        // Reset the active item in context\n        setActive(null);\n      } catch (error) {\n        console.error(\"Error processing drop:\", error);\n      }\n    },\n    [disabled, id, active, onDrop, onDragEnd, setActive, valid]\n  );\n\n  return {\n    isOver,\n    setNodeRef,\n    attributes: {\n      \"data-droppable\": true,\n      \"data-over\": isOver ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-valid\": valid === true ? true : undefined,\n    },\n    valid,\n    listeners: {\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDrop: handleDrop,\n    },\n  };\n}\n"],"names":["useDraggable","id","data","disabled","onDragStartProp","onDragEndProp","isDragging","setIsDragging","useState","nodeRef","useRef","thumbnailNodeRef","setNodeRef","useCallback","node","setActive","onDragStartContext","onDragEndContext","setIsDraggingContext","useDragDropContext","onDragStart","onDragEnd","handleDragStart","e","dragItem","dataPayload","_a","_b","nodeRect","_c","_d","handleDragEnd","_e","useDroppable","validate","onDropProp","isOver","setIsOver","valid","setValid","active","onDropContext","onDrop","useEffect","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","jsonData","draggedItem","error"],"mappings":"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"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/DragDrop/hooks.ts"],"sourcesContent":["import { useCallback, useRef, useState, useEffect } from \"react\";\n\nimport {\n  DraggableInfo,\n  type Data,\n  type UseDraggableProps,\n  type UseDroppableProps,\n} from \"./types\";\nimport { useDragDropContext } from \"./context\";\n\n/**\n * Hook for making an element draggable using HTML5 drag and drop API\n */\nexport function useDraggable<T extends Data = Data>({\n  id,\n  data,\n  disabled = false,\n  onDragStart: onDragStartProp,\n  onDragEnd: onDragEndProp,\n}: UseDraggableProps<T>) {\n  const [isDragging, setIsDragging] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n  const thumbnailNodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    setActive,\n    onDragStart: onDragStartContext,\n    onDragEnd: onDragEndContext,\n    setIsDragging: setIsDraggingContext,\n  } = useDragDropContext();\n\n  const onDragStart = onDragStartProp || onDragStartContext;\n  const onDragEnd = onDragEndProp || onDragEndContext;\n\n  const handleDragStart = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(true);\n      setIsDraggingContext(true);\n\n      // Update the active item in context\n      const dragItem = { data, id };\n      setActive(dragItem);\n\n      // Call the onDragStart callback if available\n      if (onDragStart) {\n        onDragStart({ active: dragItem });\n      }\n\n      // Set data transfer\n      let dataPayload: string;\n      try {\n        dataPayload = JSON.stringify({ id, data });\n      } catch (error) {\n        console.error(\"Error serializing data:\", error);\n        return;\n      }\n      e.dataTransfer?.setData(\"application/json\", dataPayload);\n\n      // For Firefox compatibility\n      e.dataTransfer?.setData(\"text/plain\", dataPayload);\n\n      // Set drag image (optional)\n      const node = nodeRef.current;\n      if (node) {\n        const nodeRect = node.getBoundingClientRect();\n\n        thumbnailNodeRef.current = node.cloneNode(true) as HTMLElement;\n        thumbnailNodeRef.current.style.maxWidth = \"400px\";\n        thumbnailNodeRef.current.style.position = \"absolute\";\n        thumbnailNodeRef.current.style.pointerEvents = \"none\";\n        thumbnailNodeRef.current.style.top = \"-99px\";\n        thumbnailNodeRef.current.style.left = \"-99px\";\n        thumbnailNodeRef.current.style.zIndex = \"-1\";\n\n        node.parentElement?.appendChild(thumbnailNodeRef.current);\n\n        // Use the node itself as the drag image\n        e.dataTransfer?.setDragImage(\n          thumbnailNodeRef.current,\n          e.clientX - nodeRect.left,\n          e.clientY - nodeRect.top\n        );\n      }\n    },\n    [id, data, disabled, onDragStart, setActive, setIsDraggingContext]\n  );\n\n  const handleDragEnd = useCallback(\n    (_e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(false);\n      setIsDraggingContext(false);\n      thumbnailNodeRef.current?.remove();\n\n      if (onDragEnd) {\n        onDragEnd({ active: { data, id }, over: null });\n      }\n    },\n    [id, data, disabled, onDragEnd, setIsDraggingContext]\n  );\n\n  return {\n    isDragging,\n    setNodeRef,\n    attributes: {\n      draggable: !disabled,\n      role: \"button\",\n      \"aria-pressed\": isDragging,\n      tabIndex: disabled ? -1 : 0,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n    },\n    listeners: {\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n    },\n  };\n}\n\n/**\n * Hook for making an element a drop target using HTML5 drag and drop API\n */\nexport function useDroppable<T extends Data = Data>({\n  id,\n  disabled = false,\n  validate = () => true,\n  onDrop: onDropProp,\n}: UseDroppableProps<T>) {\n  const [isOver, setIsOver] = useState(false);\n  const [valid, setValid] = useState(undefined);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    active,\n    setActive,\n    onDragEnd,\n    onDrop: onDropContext,\n    isDragging,\n  } = useDragDropContext<T>();\n\n  const onDrop = onDropProp || onDropContext;\n\n  useEffect(() => {\n    if (active && validate) {\n      setValid(validate(active));\n    }\n  }, [active, validate]);\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      setIsOver(true);\n    },\n    [disabled]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault(); // Necessary to allow dropping\n      e.dataTransfer.dropEffect = \"move\";\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      // Only set isOver to false if we're leaving this element (not a child)\n      if (e.currentTarget === e.target) {\n        setIsOver(false);\n      }\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      if (!valid) return;\n\n      try {\n        // Try to get data from dataTransfer\n        const jsonData = e.dataTransfer.getData(\"application/json\");\n        let draggedItem: DraggableInfo<T>;\n\n        if (jsonData) {\n          draggedItem = JSON.parse(jsonData);\n        } else if (active) {\n          // Fall back to active item from context if dataTransfer is not available\n          draggedItem = active;\n        } else {\n          return; // No item to drop\n        }\n\n        // Call the component's onDrop handler if provided\n        if (onDrop) {\n          onDrop(draggedItem);\n        }\n\n        // Call the onDragEnd callback from context if available\n        if (onDragEnd && active) {\n          onDragEnd({\n            active: draggedItem,\n            over: { id },\n          });\n        }\n\n        setIsOver(false);\n\n        // Reset the active item in context\n        setActive(null);\n      } catch (error) {\n        console.error(\"Error processing drop:\", error);\n      }\n    },\n    [disabled, id, active, onDrop, onDragEnd, setActive, valid]\n  );\n\n  return {\n    isOver,\n    setNodeRef,\n    attributes: {\n      \"data-droppable\": true,\n      \"data-over\": isOver ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-valid\": valid ? true : undefined,\n    },\n    valid,\n    listeners: {\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDrop: handleDrop,\n    },\n  };\n}\n"],"names":["useDraggable","id","data","disabled","onDragStartProp","onDragEndProp","isDragging","setIsDragging","useState","nodeRef","useRef","thumbnailNodeRef","setNodeRef","useCallback","node","setActive","onDragStartContext","onDragEndContext","setIsDraggingContext","useDragDropContext","onDragStart","onDragEnd","handleDragStart","e","dragItem","dataPayload","error","_a","_b","nodeRect","_c","_d","handleDragEnd","_e","useDroppable","validate","onDropProp","isOver","setIsOver","valid","setValid","active","onDropContext","onDrop","useEffect","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","jsonData","draggedItem"],"mappings":"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"}

package/dist/components/DragDrop/index.js

@@ -3,32 +3,33 @@ import { jsx as r } from "react/jsx-runtime";
 import { useState as o } from "react";
 import { Draggable as f } from "./draggable.js";
 import { Droppable as u } from "./droppable.js";
-import { DragDropContext as d } from "./context.js";
+import { Value as d } from "./value.js";
+import { DragDropContext as v } from "./context.js";
 import './style.css';/* empty css          */
-import { useCls as v } from "../utils/antdUtils.js";
-import { clsx as x } from "../utils/cn.js";
-function b({
+import { useCls as x } from "../utils/antdUtils.js";
+import { clsx as b } from "../utils/cn.js";
+function S({
   children: t,
   // These callbacks are passed to child components via context
-  onDragEnd: n,
-  onDragStart: e,
+  onDragEnd: e,
+  onDragStart: n,
   onDrop: a,
-  className: s
+  className: i
 }) {
-  const i = v(), [c, g] = o(null), [m, p] = o(!1), D = {
-    active: c,
+  const s = x(), [m, c] = o(null), [g, p] = o(!1), D = {
+    active: m,
     setActive: (l) => {
-      g(l);
+      c(l);
     },
-    isDragging: m,
+    isDragging: g,
     setIsDragging: p,
-    onDragStart: e,
-    onDragEnd: n,
+    onDragStart: n,
+    onDragEnd: e,
     onDrop: a
   };
-  return /* @__PURE__ */ r(d.Provider, { value: D, children: /* @__PURE__ */ r("div", { className: x(i("drag-container"), s), children: t }) });
+  return /* @__PURE__ */ r(v.Provider, { value: D, children: /* @__PURE__ */ r("div", { className: b(s("drag-container"), i), children: t }) });
 }
-const O = Object.assign(b, {
+const P = Object.assign(S, {
   /**
    * Item that can be dragged
    */
@@ -36,10 +37,14 @@ const O = Object.assign(b, {
   /**
    * Zone where items can be dropped
    */
-  Droppable: u
+  Droppable: u,
+  /**
+   * Value component to display the value of the dragged item
+   */
+  Value: d
 });
 export {
-  O as DragDrop,
-  b as DragDropRoot
+  P as DragDrop,
+  S as DragDropRoot
 };
 //# sourceMappingURL=index.js.map

package/dist/components/DragDrop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/DragDrop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEndEvent,\n  type DragStartEvent,\n  type Data as DragData,\n  type UniqueIdentifier,\n  type DragDropDraggableProps,\n  type DragDropDroppableProps,\n  type DragDropProps,\n} from \"./types\";\nimport { useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Draggable } from \"./draggable\";\nimport { Droppable } from \"./droppable\";\nimport { DragDropContext } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n/**\n * The root component for the drag and drop functionality\n */\nexport function DragDropRoot<T extends DragData = DragData>({\n  children,\n  // These callbacks are passed to child components via context\n  onDragEnd: _onDragEnd,\n  onDragStart: _onDragStart,\n  onDrop: _onDrop,\n  className,\n}: DragDropProps<T>) {\n  const cls = useCls();\n  const [active, setActive] = useState<{\n    data: T;\n    id: UniqueIdentifier;\n  } | null>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  // These functions are now handled directly in the Item and DropZone components\n\n  // Create context value for child components\n  const contextValue = {\n    active,\n    setActive: (item: { data: unknown; id: UniqueIdentifier } | null) => {\n      setActive(item as { data: T; id: UniqueIdentifier } | null);\n    },\n    isDragging,\n    setIsDragging,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onDrop: _onDrop,\n  };\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      <div className={clsx(cls(\"drag-container\"), className)}>{children}</div>\n    </DragDropContext.Provider>\n  );\n}\n\n/**\n * Drag component with subcomponents\n */\nexport const DragDrop = Object.assign(DragDropRoot, {\n  /**\n   * Item that can be dragged\n   */\n  Draggable,\n\n  /**\n   * Zone where items can be dropped\n   */\n  Droppable,\n});\n\nexport type {\n  DragEndEvent,\n  DragStartEvent,\n  DragDropDraggableProps,\n  DragDropDroppableProps,\n  DragData,\n  DragDropProps,\n};\n"],"names":["DragDropRoot","children","_onDragEnd","_onDragStart","_onDrop","className","cls","useCls","active","setActive","useState","isDragging","setIsDragging","contextValue","item","DragDropContext","jsx","clsx","DragDrop","Draggable","Droppable"],"mappings":";;;;;;;;;AAuBO,SAASA,EAA4C;AAAA,EAC1D,UAAAC;AAAA;AAAA,EAEA,WAAWC;AAAA,EACX,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAQC,CAAS,IAAIC,EAGlB,IAAI,GAER,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAK5CG,IAAe;AAAA,IACnB,QAAAL;AAAA,IACA,WAAW,CAACM,MAAyD;AACnE,MAAAL,EAAUK,CAAgD;AAAA,IAC5D;AAAA,IACA,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,aAAaT;AAAA,IACb,WAAWD;AAAA,IACX,QAAQE;AAAA,EACV;AAEA,2BACGW,EAAgB,UAAhB,EAAyB,OAAOF,GAC/B,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWC,EAAKX,EAAI,gBAAgB,GAAGD,CAAS,GAAI,UAAAJ,EAAS,CAAA,GACpE;AAEJ;AAKa,MAAAiB,IAAW,OAAO,OAAOlB,GAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,WAAAmB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAAC;AACF,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/DragDrop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEndEvent,\n  type DragStartEvent,\n  type Data as DragData,\n  type UniqueIdentifier,\n  type DragDropDraggableProps,\n  type DragDropDroppableProps,\n  type DragDropProps,\n} from \"./types\";\nimport { useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Draggable } from \"./draggable\";\nimport { Droppable } from \"./droppable\";\nimport { Value } from \"./value\";\nimport { DragDropContext } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n/**\n * The root component for the drag and drop functionality\n */\nexport function DragDropRoot<T extends DragData = DragData>({\n  children,\n  // These callbacks are passed to child components via context\n  onDragEnd: _onDragEnd,\n  onDragStart: _onDragStart,\n  onDrop: _onDrop,\n  className,\n}: DragDropProps<T>) {\n  const cls = useCls();\n  const [active, setActive] = useState<{\n    data: T;\n    id: UniqueIdentifier;\n  } | null>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  // These functions are now handled directly in the Item and DropZone components\n\n  // Create context value for child components\n  const contextValue = {\n    active,\n    setActive: (item: { data: unknown; id: UniqueIdentifier } | null) => {\n      setActive(item as { data: T; id: UniqueIdentifier } | null);\n    },\n    isDragging,\n    setIsDragging,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onDrop: _onDrop,\n  };\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      <div className={clsx(cls(\"drag-container\"), className)}>{children}</div>\n    </DragDropContext.Provider>\n  );\n}\n\n/**\n * Drag component with subcomponents\n */\nexport const DragDrop = Object.assign(DragDropRoot, {\n  /**\n   * Item that can be dragged\n   */\n  Draggable,\n\n  /**\n   * Zone where items can be dropped\n   */\n  Droppable,\n\n  /**\n   * Value component to display the value of the dragged item\n   */\n  Value,\n});\n\nexport type {\n  DragEndEvent,\n  DragStartEvent,\n  DragDropDraggableProps,\n  DragDropDroppableProps,\n  DragData,\n  DragDropProps,\n};\n"],"names":["DragDropRoot","children","_onDragEnd","_onDragStart","_onDrop","className","cls","useCls","active","setActive","useState","isDragging","setIsDragging","contextValue","item","DragDropContext","jsx","clsx","DragDrop","Draggable","Droppable","Value"],"mappings":";;;;;;;;;;AAwBO,SAASA,EAA4C;AAAA,EAC1D,UAAAC;AAAA;AAAA,EAEA,WAAWC;AAAA,EACX,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAQC,CAAS,IAAIC,EAGlB,IAAI,GAER,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAK5CG,IAAe;AAAA,IACnB,QAAAL;AAAA,IACA,WAAW,CAACM,MAAyD;AACnE,MAAAL,EAAUK,CAAgD;AAAA,IAC5D;AAAA,IACA,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,aAAaT;AAAA,IACb,WAAWD;AAAA,IACX,QAAQE;AAAA,EACV;AAEA,2BACGW,EAAgB,UAAhB,EAAyB,OAAOF,GAC/B,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWC,EAAKX,EAAI,gBAAgB,GAAGD,CAAS,GAAI,UAAAJ,EAAS,CAAA,GACpE;AAEJ;AAKa,MAAAiB,IAAW,OAAO,OAAOlB,GAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,WAAAmB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAAC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAAC;AACF,CAAC;"}

package/dist/components/DragDrop/style.css

@@ -1 +1 @@
-.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}
+.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.5rem}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}.ds-dropzone-value-multiple .ds-tag{max-width:50%;margin:0}

package/dist/components/DragDrop/value.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as e, Fragment as u, jsxs as S } from "react/jsx-runtime";
+import { FileIcon as h, XIcon as j } from "@bioturing/assets";
+import { isEqual as w } from "es-toolkit";
+import { memo as E, forwardRef as F, useCallback as c, cloneElement as M } from "react";
+import { Stack as T } from "../Stack/index.js";
+import { Tag as q } from "../Tag/component.js";
+import { useCls as y } from "../utils/antdUtils.js";
+import { Truncate as B } from "../Truncate/component.js";
+import { IconButton as X } from "../IconButton/component.js";
+function A({
+  value: o,
+  onChange: l,
+  multiple: s,
+  renderValueLabel: a,
+  renderValueIcon: p,
+  className: b,
+  style: z,
+  ...I
+}, N) {
+  const n = y(), i = c(
+    (r) => {
+      const t = a(r);
+      return typeof t == "string" ? /* @__PURE__ */ e(B, { position: "middle", className: n("dropzone-value-label"), children: t }) : /* @__PURE__ */ e("span", { className: n("dropzone-value-label"), children: t });
+    },
+    [n, a]
+  ), m = c(
+    (r) => M(p(r) || /* @__PURE__ */ e(h, {}), {
+      className: n("dropzone-value-icon")
+    }),
+    [n, p]
+  ), d = c(
+    (r) => {
+      l(
+        o.filter((t) => !w(t, r))
+      );
+    },
+    [l, o]
+  ), k = c(() => /* @__PURE__ */ e(u, { children: (o || []).map((r, t) => {
+    const R = i(r);
+    return /* @__PURE__ */ e(
+      q,
+      {
+        icon: m(r),
+        size: "large",
+        closable: !0,
+        onClose: () => d(r),
+        children: R
+      },
+      t
+    );
+  }) }), [i, o, m, d]), f = c(() => {
+    l == null || l(null);
+  }, [l]), x = c(() => {
+    const r = i(o);
+    return /* @__PURE__ */ S(u, { children: [
+      m(o),
+      r,
+      /* @__PURE__ */ e(X, { size: "small", onClick: f, children: /* @__PURE__ */ e(j, {}) })
+    ] });
+  }, [o, i, m, f]);
+  return /* @__PURE__ */ e(
+    T,
+    {
+      ref: N,
+      gap: s ? 4 : 8,
+      align: "center",
+      wrap: s,
+      className: n(
+        "dropzone-value",
+        s && "dropzone-value-multiple",
+        b
+      ),
+      style: z,
+      ...I,
+      children: s ? k() : x()
+    }
+  );
+}
+const U = E(F(A));
+export {
+  U as Value
+};
+//# sourceMappingURL=value.js.map

package/dist/components/DragDrop/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sources":["../../../src/components/DragDrop/value.tsx"],"sourcesContent":["\"use client\";\nimport { FileIcon, XIcon } from \"@bioturing/assets\";\nimport { isEqual } from \"es-toolkit\";\nimport React, {\n  cloneElement,\n  forwardRef,\n  memo,\n  useCallback,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n} from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { Stack } from \"../Stack\";\nimport { Tag } from \"../Tag\";\nimport { Truncate } from \"../Truncate\";\nimport { useCls } from \"../utils\";\nimport { DragDropValueProps, type Data } from \"./types\";\n\nfunction ValueInner<T extends Data, M extends boolean>(\n  {\n    value,\n    onChange,\n    multiple,\n    renderValueLabel,\n    renderValueIcon,\n    className,\n    style,\n    ...rest\n  }: DragDropValueProps<T, M> & ComponentPropsWithoutRef<\"div\">,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const cls = useCls();\n\n  const renderLabel = useCallback(\n    (value: T) => {\n      const label = renderValueLabel(value);\n      return typeof label === \"string\" ? (\n        <Truncate position=\"middle\" className={cls(\"dropzone-value-label\")}>\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, renderValueLabel]\n  );\n\n  const renderedValueIcon = useCallback(\n    (value: T) => {\n      return cloneElement(renderValueIcon(value) || <FileIcon />, {\n        className: cls(\"dropzone-value-icon\"),\n      });\n    },\n    [cls, renderValueIcon]\n  );\n\n  const handleResetMultiple = useCallback(\n    (singleValue: T) => {\n      (onChange as (value: T[]) => void)(\n        (value as T[]).filter((v) => !isEqual(v, singleValue))\n      );\n    },\n    [onChange, value]\n  );\n\n  const renderMultiple = useCallback(() => {\n    return (\n      <>\n        {((value as T[]) || []).map((singleValue, index) => {\n          const label = renderLabel(singleValue);\n          return (\n            <Tag\n              key={index}\n              icon={renderedValueIcon(singleValue)}\n              size=\"large\"\n              closable\n              onClose={() => handleResetMultiple(singleValue)}\n            >\n              {label}\n            </Tag>\n          );\n        })}\n      </>\n    );\n  }, [renderLabel, value, renderedValueIcon, handleResetMultiple]);\n\n  const handleResetSingle = useCallback(() => {\n    onChange?.(null);\n  }, [onChange]);\n\n  const renderSingle = useCallback(() => {\n    const label = renderLabel(value as T);\n    return (\n      <>\n        {renderedValueIcon(value as T)}\n        {label}\n        <IconButton size=\"small\" onClick={handleResetSingle}>\n          <XIcon />\n        </IconButton>\n      </>\n    );\n  }, [value, renderLabel, renderedValueIcon, handleResetSingle]);\n\n  return (\n    <Stack\n      ref={ref}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple}\n      className={cls(\n        \"dropzone-value\",\n        multiple && \"dropzone-value-multiple\",\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple() : renderSingle()}\n    </Stack>\n  );\n}\n\nexport const Value = memo(forwardRef(ValueInner)) as <\n  T extends Data,\n  M extends boolean\n>(\n  props: DragDropValueProps<T, M> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof ValueInner>;\n"],"names":["ValueInner","value","onChange","multiple","renderValueLabel","renderValueIcon","className","style","rest","ref","cls","useCls","renderLabel","useCallback","label","Truncate","jsx","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","renderMultiple","index","Tag","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","Stack","Value","memo","forwardRef"],"mappings":";;;;;;;;;;AAkBA,SAASA,EACP;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAMC,EAAO,GAEbC,IAAcC;AAAA,IAClB,CAACZ,MAAa;AACN,YAAAa,IAAQV,EAAiBH,CAAK;AACpC,aAAO,OAAOa,KAAU,6BACrBC,GAAS,EAAA,UAAS,UAAS,WAAWL,EAAI,sBAAsB,GAC9D,UAAAI,GACH,IAEC,gBAAAE,EAAA,QAAA,EAAK,WAAWN,EAAI,sBAAsB,GAAI,UAAMI,GAAA;AAAA,IAEzD;AAAA,IACA,CAACJ,GAAKN,CAAgB;AAAA,EACxB,GAEMa,IAAoBJ;AAAA,IACxB,CAACZ,MACQiB,EAAab,EAAgBJ,CAAK,KAAK,gBAAAe,EAACG,KAAS,GAAI;AAAA,MAC1D,WAAWT,EAAI,qBAAqB;AAAA,IAAA,CACrC;AAAA,IAEH,CAACA,GAAKL,CAAe;AAAA,EACvB,GAEMe,IAAsBP;AAAA,IAC1B,CAACQ,MAAmB;AACjB,MAAAnB;AAAA,QACED,EAAc,OAAO,CAACqB,MAAM,CAACC,EAAQD,GAAGD,CAAW,CAAC;AAAA,MACvD;AAAA,IACF;AAAA,IACA,CAACnB,GAAUD,CAAK;AAAA,EAClB,GAEMuB,IAAiBX,EAAY,6BAG1B,WAAiBZ,KAAA,CAAA,GAAI,IAAI,CAACoB,GAAaI,MAAU;AAC5C,UAAAX,IAAQF,EAAYS,CAAW;AAEnC,WAAA,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEC,MAAMT,EAAkBI,CAAW;AAAA,QACnC,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAS,MAAMD,EAAoBC,CAAW;AAAA,QAE7C,UAAAP;AAAA,MAAA;AAAA,MANIW;AAAA,IAOP;AAAA,EAEH,CAAA,GACH,GAED,CAACb,GAAaX,GAAOgB,GAAmBG,CAAmB,CAAC,GAEzDO,IAAoBd,EAAY,MAAM;AAC1C,IAAAX,KAAA,QAAAA,EAAW;AAAA,EAAI,GACd,CAACA,CAAQ,CAAC,GAEP0B,IAAef,EAAY,MAAM;AAC/B,UAAAC,IAAQF,EAAYX,CAAU;AACpC,WAEK,gBAAA4B,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAAb,EAAkBhB,CAAU;AAAA,MAC5Ba;AAAA,MACD,gBAAAE,EAACe,KAAW,MAAK,SAAQ,SAASJ,GAChC,UAAA,gBAAAX,EAACgB,IAAM,CAAA,EACT,CAAA;AAAA,IAAA,GACF;AAAA,KAED,CAAC/B,GAAOW,GAAaK,GAAmBU,CAAiB,CAAC;AAG3D,SAAA,gBAAAX;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,KAAAxB;AAAA,MACA,KAAKN,IAAW,IAAI;AAAA,MACpB,OAAM;AAAA,MACN,MAAMA;AAAA,MACN,WAAWO;AAAA,QACT;AAAA,QACAP,KAAY;AAAA,QACZG;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAL,IAAWqB,EAAe,IAAII,EAAa;AAAA,IAAA;AAAA,EAC9C;AAEJ;AAEO,MAAMM,IAAQC,EAAKC,EAAWpC,CAAU,CAAC;"}