mada-design-system 0.5.11 → 0.5.12

package/index.es10.js

@@ -1,162 +1,198 @@
-import { jsxs as o, jsx as e, Fragment as O } from "react/jsx-runtime";
-import { useVirtualizer as T } from "./index.es112.js";
-import h, { useCallback as _, useMemo as $, useEffect as A } from "react";
-import { useToggle as D } from "./index.es103.js";
-import { strings as z } from "./index.es97.js";
-import G from "./index.es3.js";
-import { ShouldRender as y } from "./index.es14.js";
-import { Badge as q } from "./index.es20.js";
-import { Button as L } from "./index.es22.js";
-import { Checkbox as H } from "./index.es25.js";
-import { Command as J, CommandInput as K, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as X } from "./index.es27.js";
-import { Popover as Y, PopoverTrigger as Z, PopoverContent as B } from "./index.es59.js";
-import { selectVariants as V } from "./index.es64.js";
-import { debounce as ee, cn as re } from "./index.es85.js";
-import ae from "./index.es101.js";
-function be({
-  placeholder: l,
-  options: r,
-  selectedValues: a,
-  onChange: c,
-  disabled: g,
-  size: s = "default",
-  dataTestId: d = "",
-  rounded: u = "default",
-  variant: x = "outline",
-  colors: v = "default",
-  isLoading: n = !1,
-  className: f,
-  checkboxSize: b = "default",
-  threshold: N = 1,
-  showSelectButton: i,
-  selectButtonTitle: j
+import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { useSensor as O, useSensors as V, DndContext as _, closestCenter as q, DragOverlay as J, MouseSensor as K, TouchSensor as Q } from "./index.es106.js";
+import { SortableContext as U, useSortable as X, arrayMove as Y } from "./index.es107.js";
+import { useState as A } from "react";
+import { createPortal as W } from "react-dom";
+import { cn as j } from "./index.es86.js";
+import { strings as Z } from "./index.es98.js";
+import E from "./index.es3.js";
+import { Button as y } from "./index.es23.js";
+import { Separator as M } from "./index.es66.js";
+import { Stack as ee } from "./index.es43.js";
+import re from "./index.es108.js";
+import te from "./index.es109.js";
+import se from "./index.es110.js";
+import ie from "./index.es111.js";
+function De({
+  configs: s,
+  isEditMode: o,
+  componentMap: p,
+  onConfigChange: g,
+  onOrderChange: v,
+  onSave: c,
+  onCancel: D,
+  onReset: z,
+  onAdd: C,
+  isSidePanelShown: I,
+  isSaving: u
 }) {
-  var I;
-  const [C, S] = D(!1), [R, w] = h.useState(""), [F, E] = h.useState(""), [k, p] = h.useState(a), M = _(() => ee((t) => w(t), 300), []), P = $(() => r.filter((t) => t.label.toLowerCase().includes(R.toLowerCase())), [r, R]), m = C && i ? k : a;
-  return A(() => {
-    p(a);
-  }, [a]), /* @__PURE__ */ o(
-    Y,
-    {
-      open: C,
-      onOpenChange: () => {
-        S(), C || (E(""), w(""), i && p(a));
-      },
-      children: [
-        /* @__PURE__ */ e(Z, { asChild: !0, disabled: g, "data-testid": d, children: /* @__PURE__ */ o("button", { className: re(V({ variant: x, colors: v, size: s, rounded: u }), f), children: [
-          /* @__PURE__ */ e("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: l }),
-          (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ e(O, { children: m.length > N ? /* @__PURE__ */ e("label", { className: "ms-auto flex size-space-05 shrink-0 items-center justify-center rounded-full  bg-inverted text-caption-01 text-inverted-foreground", children: m.length }) : (I = r == null ? void 0 : r.filter((t) => m.includes(t.value))) == null ? void 0 : I.map((t) => /* @__PURE__ */ e(q, { colors: "gray", variant: "ghost", size: "sm", className: "ms-auto", children: t.label }, t.value)) }),
-          n ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(
-            ae,
-            {
-              className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
-              "aria-hidden": !0
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ e(
-          B,
-          {
-            className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)] p-space-00   max-md:max-w-[var(--radix-popper-available-width)]",
-            align: "start",
-            children: /* @__PURE__ */ o(J, { className: "w-full", shouldFilter: !1, children: [
-              /* @__PURE__ */ o("div", { className: "p-space-02", children: [
-                /* @__PURE__ */ e(y, { shouldRender: (r == null ? void 0 : r.length) > 7, children: /* @__PURE__ */ e(
-                  K,
-                  {
-                    placeholder: l,
-                    value: F,
-                    onValueChange: (t) => {
-                      E(t), M()(t);
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ o(Q, { children: [
-                  /* @__PURE__ */ e(U, { className: "my-auto text-center", children: z.Shared.NoDataFound }),
-                  /* @__PURE__ */ e(
-                    te,
-                    {
-                      options: P,
-                      dataTestId: d,
-                      selectedValues: i ? k : a,
-                      onChange: i ? p : c,
-                      checkboxSize: b
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ e(y, { shouldRender: !!(a != null && a.length) || i, children: /* @__PURE__ */ o("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: [
-                /* @__PURE__ */ e(
-                  L,
-                  {
-                    colors: "neutral",
-                    variant: "text",
-                    size: "sm",
-                    onClick: () => {
-                      c([]), p([]), i || S();
-                    },
-                    className: "flex-1",
-                    children: z.Shared.reset
-                  }
-                ),
-                /* @__PURE__ */ e(y, { shouldRender: i, children: /* @__PURE__ */ e(
-                  L,
-                  {
-                    type: "button",
-                    colors: "primary",
-                    size: "sm",
-                    onClick: () => {
-                      c(k), S();
-                    },
-                    className: "flex-1",
-                    children: j ?? z.Shared.Select
-                  }
-                ) })
-              ] }) })
-            ] })
-          }
-        )
-      ]
+  const [d, w] = A(null), [S, k] = A(null), $ = O(K, {
+    activationConstraint: {
+      distance: 5
     }
-  );
-}
-function te({
-  options: l,
-  selectedValues: r,
-  dataTestId: a,
-  onChange: c,
-  checkboxSize: g
-}) {
-  var u;
-  const s = h.useRef(null), d = T({
-    count: l.length,
-    getScrollElement: () => s.current,
-    estimateSize: () => 36,
-    // Adjust based on your row height
-    overscan: 10
-    // Improves scroll performance
-  });
-  return /* @__PURE__ */ e(W, { ref: s, className: "overflow-auto", children: (u = d.getVirtualItems()) == null ? void 0 : u.map((x, v) => {
-    const n = l[x.index], f = r == null ? void 0 : r.includes(n.value);
-    return /* @__PURE__ */ o(
-      X,
+  }), B = O(Q, {
+    activationConstraint: {
+      delay: 100,
+      tolerance: 5
+    }
+  }), H = V($, B), P = (e) => {
+    w(e.active.id);
+  }, R = (e) => {
+    const { over: t } = e;
+    k(t ? t.id : null);
+  }, F = (e) => {
+    const { active: t, over: i } = e;
+    if (w(null), k(null), !i || t.id === i.id)
+      return;
+    if (i.id.toString().startsWith("placeholder-")) {
+      const l = parseInt(i.id.toString().split("-")[1]), h = s.find((m) => m.alias === t.id);
+      if (h && h.size === "half") {
+        const m = s.findIndex((L) => L.alias === t.id), N = [...s];
+        N.splice(l + 1, 0, ...N.splice(m, 1)), v(N);
+      }
+      return;
+    }
+    const a = s.findIndex((l) => l.alias === t.id), n = s.findIndex((l) => l.alias === i.id), b = Y(s, a, n);
+    v(b);
+  }, x = s.filter((e) => (e == null ? void 0 : e.isVisible) && p[e.alias]), G = Array(x.length).fill(0).map((e, t) => `placeholder-${t}`);
+  return /* @__PURE__ */ f(T, { children: [
+    u && W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: j(
+            "fixed inset-0 z-[60000] bg-black transition-all duration-200",
+            u ? "opacity-50" : "pointer-events-none opacity-0"
+          )
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ f(
+      _,
       {
-        "data-testid": `${a}-${v}`,
-        className: "flex gap-space-02",
-        onSelect: () => {
-          const b = f ? r.filter((N) => N !== n.value) : [...r, n.value];
-          c(b);
-        },
+        sensors: H,
+        collisionDetection: q,
+        onDragStart: P,
+        onDragEnd: F,
+        onDragOver: R,
         children: [
-          n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ e("span", { children: n.label }),
-          /* @__PURE__ */ e(H, { className: "ms-auto", checked: f, size: g })
+          /* @__PURE__ */ r(U, { items: [...s.map((e) => e.alias), ...G], children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 items-center justify-center gap-space-04 px-space-04 pt-space-04 sm:grid-cols-2 sm:items-stretch sm:justify-stretch sm:px-space-06 xl:px-space-04", children: (() => {
+            let e = 0;
+            const t = [], i = s.find((a) => a.alias === d);
+            for (let a = 0; a < x.length; a++) {
+              const n = x[a], b = p[n.alias];
+              if (!b)
+                continue;
+              t.push(
+                /* @__PURE__ */ r(
+                  b,
+                  {
+                    config: n,
+                    isEditMode: o,
+                    onConfigChange: g,
+                    isOver: n.alias === S,
+                    isDragging: n.alias === d
+                  },
+                  n.alias
+                )
+              );
+              const l = n.size === "full" ? 2 : 1;
+              if (e += l, o && n.size === "half" && e % 2 === 1) {
+                const h = x[a + 1];
+                if (!h || h.size === "full") {
+                  const m = `placeholder-${a}`;
+                  t.push(
+                    /* @__PURE__ */ r(
+                      ae,
+                      {
+                        id: m,
+                        isEditMode: o,
+                        activeId: d,
+                        overId: S,
+                        draggedWidgetSize: i == null ? void 0 : i.size
+                      },
+                      m
+                    )
+                  ), e += 1;
+                }
+              }
+            }
+            return t;
+          })() }) }),
+          /* @__PURE__ */ r(J, { children: d && (() => {
+            const e = s.find((i) => i.alias === d);
+            if (!e)
+              return null;
+            const t = p[e.alias];
+            return t ? /* @__PURE__ */ r(
+              t,
+              {
+                config: e,
+                isEditMode: o,
+                onConfigChange: g,
+                isDragOverlay: !0,
+                isOver: e.alias === S,
+                isDragging: e.alias === d
+              },
+              e.alias
+            ) : null;
+          })() })
         ]
-      },
-      n.value
-    );
-  }) });
+      }
+    ),
+    W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: `fixed bottom-4 left-0 right-0 flex justify-center transition-all duration-300 ${o ? "z-[50000] opacity-100" : "pointer-events-none opacity-0"}
+                    ${I ? "hidden xl:flex" : ""}
+                    `,
+          children: /* @__PURE__ */ f(
+            "div",
+            {
+              className: `flex transform items-center gap-space-04 rounded-full border-t bg-background-brand p-space-02 shadow-card-shadow transition-all duration-300 ${o ? "translate-y-[-10px]" : "translate-y-full"}`,
+              children: [
+                /* @__PURE__ */ f(ee, { gap: 4, alignItems: "center", children: [
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: D, children: /* @__PURE__ */ r(re, {}) }),
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: z, children: /* @__PURE__ */ r(te, {}) }),
+                  /* @__PURE__ */ r(M, { orientation: "vertical", className: "h-space-06" })
+                ] }),
+                /* @__PURE__ */ r(y, { variant: "outline", colors: "primary", size: "icon-sm", className: "xl:hidden", onClick: C, children: /* @__PURE__ */ r(se, {}) }),
+                /* @__PURE__ */ f(y, { variant: "default", onClick: c, size: "sm", colors: "primary", className: "gap-space-02", disabled: u, children: [
+                  /* @__PURE__ */ r(ie, { className: "size-space-05" }),
+                  Z.DragAndDrop.SaveCustomization,
+                  u && /* @__PURE__ */ r(E, {})
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
 }
+const ae = ({ id: s, isEditMode: o, activeId: p, overId: g, draggedWidgetSize: v }) => {
+  const c = v === "half", { attributes: D, listeners: z, isOver: C, setNodeRef: I } = X({
+    id: s,
+    disabled: !o || !c
+  });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: I,
+      ...c ? D : {},
+      ...c ? z : {},
+      className: j(
+        "hidden sm:block",
+        "h-[440px] rounded-3 border-2 border-dashed transition-all duration-200",
+        C || g === s ? "border-primary" : "border-border",
+        !c && p ? "cursor-not-allowed" : "cursor-default"
+      )
+    }
+  );
+};
 export {
-  be as MultiSelect
+  De as DraggableGrid
 };