@wrdagency/blockout 1.0.36 → 1.0.37

package/dist/components/dashboard/grid.js

@@ -1,13 +1,81 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { cn as v } from "../../utils/css.js";
-import { noop as E } from "../../utils/noop.js";
+import { jsxs as l, jsx as r, Fragment as _ } from "react/jsx-runtime";
+import { unique as D } from "../../utils/array.js";
+import { cn as P } from "../../utils/css.js";
+import { noop as j } from "../../utils/noop.js";
+import { titleCase as $ } from "../../utils/string.js";
 import * as e from "react";
-import { useRef as f, useState as H, useEffect as C } from "react";
-import { w as _ } from "../../SSRBase.es-BUXS72ra.js";
-import { o as y } from "../../SquaresFour.es-iDUIyl5P.js";
-import { B as b } from "../../style-nHUEFY3u.js";
-import { DASHBOARD_CONTEXT as F } from "./context.js";
-const S = /* @__PURE__ */ new Map([
+import { useRef as G, useState as f, useEffect as X } from "react";
+import { w as v } from "../../SSRBase.es-BUXS72ra.js";
+import { B as u, j as I } from "../../style-nHUEFY3u.js";
+import { Dialog as J } from "../dialog/index.js";
+import { DASHBOARD_CONTEXT as K } from "./context.js";
+const Q = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M78,36a42,42,0,1,0,42,42A42,42,0,0,0,78,36Zm0,60A18,18,0,1,1,96,78,18,18,0,0,1,78,96Zm100,24a42,42,0,1,0-42-42A42,42,0,0,0,178,120Zm0-60a18,18,0,1,1-18,18A18,18,0,0,1,178,60ZM78,136a42,42,0,1,0,42,42A42,42,0,0,0,78,136Zm0,60a18,18,0,1,1,18-18A18,18,0,0,1,78,196Zm100-60a42,42,0,1,0,42,42A42,42,0,0,0,178,136Zm0,60a18,18,0,1,1,18-18A18,18,0,0,1,178,196Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "path",
+      {
+        d: "M112,80A32,32,0,1,1,80,48,32,32,0,0,1,112,80Zm64,32a32,32,0,1,0-32-32A32,32,0,0,0,176,112ZM80,144a32,32,0,1,0,32,32A32,32,0,0,0,80,144Zm96,0a32,32,0,1,0,32,32A32,32,0,0,0,176,144Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e.createElement("path", { d: "M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm96-64a40,40,0,1,0,40,40A40,40,0,0,0,176,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,176,200Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M120,80A40,40,0,1,1,80,40,40,40,0,0,1,120,80Zm56,40a40,40,0,1,0-40-40A40,40,0,0,0,176,120ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm96,0a40,40,0,1,0,40,40A40,40,0,0,0,176,136Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,42a38,38,0,1,0,38,38A38,38,0,0,0,80,42Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,80,106Zm96,12a38,38,0,1,0-38-38A38,38,0,0,0,176,118Zm0-64a26,26,0,1,1-26,26A26,26,0,0,1,176,54ZM80,138a38,38,0,1,0,38,38A38,38,0,0,0,80,138Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,80,202Zm96-64a38,38,0,1,0,38,38A38,38,0,0,0,176,138Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,176,202Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm96-64a40,40,0,1,0,40,40A40,40,0,0,0,176,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,176,200Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,44a36,36,0,1,0,36,36A36,36,0,0,0,80,44Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,80,108Zm96,8a36,36,0,1,0-36-36A36,36,0,0,0,176,116Zm0-64a28,28,0,1,1-28,28A28,28,0,0,1,176,52ZM80,140a36,36,0,1,0,36,36A36,36,0,0,0,80,140Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,80,204Zm96-64a36,36,0,1,0,36,36A36,36,0,0,0,176,140Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,176,204Z" }))
+  ]
+]), F = e.forwardRef((n, o) => /* @__PURE__ */ e.createElement(v, { ref: o, ...n, weights: Q }));
+F.displayName = "CirclesFourIcon";
+const U = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M78,36a42,42,0,1,0,42,42A42,42,0,0,0,78,36Zm0,60A18,18,0,1,1,96,78,18,18,0,0,1,78,96Zm100,24a42,42,0,1,0-42-42A42,42,0,0,0,178,120Zm0-60a18,18,0,1,1-18,18A18,18,0,0,1,178,60ZM78,136a42,42,0,1,0,42,42A42,42,0,0,0,78,136Zm0,60a18,18,0,1,1,18-18A18,18,0,0,1,78,196Zm142-18a12,12,0,0,1-12,12H190v18a12,12,0,0,1-24,0V190H148a12,12,0,0,1,0-24h18V148a12,12,0,0,1,24,0v18h18A12,12,0,0,1,220,178Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "path",
+      {
+        d: "M112,80A32,32,0,1,1,80,48,32,32,0,0,1,112,80Zm64-32a32,32,0,1,0,32,32A32,32,0,0,0,176,48ZM80,144a32,32,0,1,0,32,32A32,32,0,0,0,80,144Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e.createElement("path", { d: "M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm136-24a8,8,0,0,1-8,8H184v24a8,8,0,0,1-16,0V184H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v24h24A8,8,0,0,1,216,176Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M120,80A40,40,0,1,1,80,40,40,40,0,0,1,120,80Zm56,40a40,40,0,1,0-40-40A40,40,0,0,0,176,120ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm128,32H184V144a8,8,0,0,0-16,0v24H144a8,8,0,0,0,0,16h24v24a8,8,0,0,0,16,0V184h24a8,8,0,0,0,0-16Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,42a38,38,0,1,0,38,38A38,38,0,0,0,80,42Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,80,106Zm96,12a38,38,0,1,0-38-38A38,38,0,0,0,176,118Zm0-64a26,26,0,1,1-26,26A26,26,0,0,1,176,54ZM80,138a38,38,0,1,0,38,38A38,38,0,0,0,80,138Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,80,202Zm134-26a6,6,0,0,1-6,6H182v26a6,6,0,0,1-12,0V182H144a6,6,0,0,1,0-12h26V144a6,6,0,0,1,12,0v26h26A6,6,0,0,1,214,176Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm136-24a8,8,0,0,1-8,8H184v24a8,8,0,0,1-16,0V184H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v24h24A8,8,0,0,1,216,176Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M80,44a36,36,0,1,0,36,36A36,36,0,0,0,80,44Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,80,108Zm96,8a36,36,0,1,0-36-36A36,36,0,0,0,176,116Zm0-64a28,28,0,1,1-28,28A28,28,0,0,1,176,52ZM80,140a36,36,0,1,0,36,36A36,36,0,0,0,80,140Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,80,204Zm132-28a4,4,0,0,1-4,4H180v28a4,4,0,0,1-8,0V180H144a4,4,0,0,1,0-8h28V144a4,4,0,0,1,8,0v28h28A4,4,0,0,1,212,176Z" }))
+  ]
+]), b = e.forwardRef((n, o) => /* @__PURE__ */ e.createElement(v, { ref: o, ...n, weights: U }));
+b.displayName = "CirclesThreePlusIcon";
+const Y = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M222.14,69.17,186.83,33.86A19.86,19.86,0,0,0,172.69,28H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V83.31A19.86,19.86,0,0,0,222.14,69.17ZM164,204H92V160h72Zm40,0H188V156a20,20,0,0,0-20-20H88a20,20,0,0,0-20,20v48H52V52H171l33,33ZM164,84a12,12,0,0,1-12,12H96a12,12,0,0,1,0-24h56A12,12,0,0,1,164,84Z" }))
@@ -38,15 +106,15 @@ const S = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216.49,74.83,181.17,39.51A11.93,11.93,0,0,0,172.69,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V83.31A11.93,11.93,0,0,0,216.49,74.83ZM172,212H84V152a4,4,0,0,1,4-4h80a4,4,0,0,1,4,4Zm40-4a4,4,0,0,1-4,4H180V152a12,12,0,0,0-12-12H88a12,12,0,0,0-12,12v60H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H172.69a4,4,0,0,1,2.82,1.17l35.32,35.32A4,4,0,0,1,212,83.31ZM156,72a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h56A4,4,0,0,1,156,72Z" }))
   ]
-]), h = e.forwardRef((r, i) => /* @__PURE__ */ e.createElement(_, { ref: i, ...r, weights: S }));
-h.displayName = "FloppyDiskIcon";
-const j = ({
-  layout: r,
-  onLayoutChange: i = E,
-  className: u,
-  children: p
+]), k = e.forwardRef((n, o) => /* @__PURE__ */ e.createElement(v, { ref: o, ...n, weights: Y }));
+k.displayName = "FloppyDiskIcon";
+const d0 = ({
+  layout: n,
+  onLayoutChange: o = j,
+  className: N,
+  children: y
 }) => {
-  const t = f(null), [o, d] = H(!1), [m, g] = H({
+  const c = G(null), [A, g] = f(!1), [R, H] = f(!1), [h, S] = f({
     rowCount: 1,
     columnCount: 4,
     columnWidth: 0,
@@ -57,67 +125,142 @@ const j = ({
       width: 0,
       height: 0
     }
-  }), V = () => {
-    d((a) => !a);
+  }), x = () => {
+    g(!0);
+  }, W = () => {
+    g(!1), H(!1);
+  }, L = () => {
+    H(!0);
+  }, O = (t) => {
+    const Z = n.filter((a) => !a.hidden), M = Math.max(1, h.columnCount - 2 + 1), d = (a, i) => Z.some((s) => {
+      const z = a < s.column + s.width && a + 2 > s.column, B = i < s.row + s.height && i + 2 > s.row;
+      return z && B;
+    }), p = Math.max(
+      h.rowCount,
+      ...Z.map((a) => a.row + a.height - 1)
+    );
+    let E = 1, w = 1, V = !1;
+    for (let a = 1; a <= p; a += 1) {
+      for (let i = 1; i <= M; i += 1)
+        if (!d(i, a)) {
+          E = i, w = a, V = !0;
+          break;
+        }
+      if (V)
+        break;
+    }
+    V || (w = p + 1, E = 1), o(
+      n.map(
+        (a) => a.id === t.id ? {
+          ...a,
+          hidden: !1,
+          column: E,
+          row: w,
+          width: 2,
+          height: 2
+        } : a
+      )
+    );
   };
-  return C(() => {
-    const a = () => {
-      const s = window.getComputedStyle(t.current).gridTemplateColumns.split(" ").length, A = parseFloat(
-        window.getComputedStyle(t.current).gridTemplateColumns.split(" ")[0]
-      ), w = window.getComputedStyle(t.current).gridTemplateRows.split(" ").length, Z = parseFloat(
-        window.getComputedStyle(t.current).gridAutoRows
-      ), l = t.current.getBoundingClientRect(), M = {
-        x: l.x,
-        y: l.y,
-        width: l.width,
-        height: l.height
+  X(() => {
+    const t = () => {
+      const m = window.getComputedStyle(c.current).gridTemplateColumns.split(" ").length, C = parseFloat(
+        window.getComputedStyle(c.current).gridTemplateColumns.split(" ")[0]
+      ), Z = window.getComputedStyle(c.current).gridTemplateRows.split(" ").length, M = parseFloat(
+        window.getComputedStyle(c.current).gridAutoRows
+      ), d = c.current.getBoundingClientRect(), p = {
+        x: d.x,
+        y: d.y,
+        width: d.width,
+        height: d.height
       };
-      g({ rowCount: w, columnCount: s, columnWidth: A, rowHeight: Z, bounds: M });
+      S({ rowCount: Z, columnCount: m, columnWidth: C, rowHeight: M, bounds: p });
     };
-    return a(), window.addEventListener("resize", a), () => {
-      window.removeEventListener("resize", a);
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
     };
-  }, [r]), /* @__PURE__ */ n(
-    F,
+  }, [n]);
+  const T = n.filter((t) => !t.hidden).length === 0, q = n.map((t) => t.category).filter(D);
+  return /* @__PURE__ */ l(
+    K,
     {
       value: {
-        layout: r,
-        setLayout: i,
-        isEditing: o,
-        setIsEditing: d,
-        ...m
+        layout: n,
+        setLayout: o,
+        isEditing: A,
+        setIsEditing: g,
+        ...h
       },
-      children: /* @__PURE__ */ c(
-        "div",
-        {
-          className: v(
-            "component-dashboard",
-            o && "component-dashboard--editing",
-            u
-          ),
-          children: [
-            /* @__PURE__ */ c("div", { className: "component-dashboard__grid", ref: t, children: [
-              p,
-              o && /* @__PURE__ */ n("div", { className: "component-dashboard__grid__overlay", children: [...Array(m.rowCount * m.columnCount)].map(
-                (a, s) => /* @__PURE__ */ n(
-                  "div",
-                  {
-                    className: "component-dashboard__grid__overlay__cell"
-                  },
-                  s
-                )
-              ) })
-            ] }),
-            /* @__PURE__ */ n("div", { className: "component-dashboard__footer", children: /* @__PURE__ */ c(b, { onClick: V, variant: "quiet", children: [
-              o ? /* @__PURE__ */ n(h, {}) : /* @__PURE__ */ n(y, {}),
-              o ? "Save Changes" : "Customise"
-            ] }) })
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: P(
+              "component-dashboard",
+              A && "component-dashboard--editing",
+              N
+            ),
+            children: [
+              /* @__PURE__ */ l("div", { className: "component-dashboard__grid", ref: c, children: [
+                y,
+                (A || T) && /* @__PURE__ */ r("div", { className: "component-dashboard__grid__overlay", children: [...Array(h.rowCount * h.columnCount)].map(
+                  (t, m) => /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: "component-dashboard__grid__overlay__cell"
+                    },
+                    m
+                  )
+                ) })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "component-dashboard__footer", children: A ? /* @__PURE__ */ l(_, { children: [
+                /* @__PURE__ */ l(u, { onClick: L, variant: "quiet", children: [
+                  /* @__PURE__ */ r(b, {}),
+                  "Add Widget"
+                ] }),
+                /* @__PURE__ */ l(u, { onClick: W, variant: "neutral", children: [
+                  /* @__PURE__ */ r(k, {}),
+                  "Save Changes"
+                ] })
+              ] }) : /* @__PURE__ */ r(_, { children: /* @__PURE__ */ l(u, { onClick: x, variant: "quiet", children: [
+                /* @__PURE__ */ r(F, {}),
+                "Customise"
+              ] }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          J,
+          {
+            title: "Add a Widget",
+            open: R,
+            onOpenChange: H,
+            className: "component-dashboard-picker",
+            align: "top",
+            edgeless: !0,
+            children: q.map((t) => /* @__PURE__ */ l("div", { className: "component-dashboard-picker__category", children: [
+              /* @__PURE__ */ r("div", { className: "component-dashboard-picker__category__title", children: $(t) }),
+              /* @__PURE__ */ r("div", { className: "component-dashboard-picker__category__items", children: n.filter((m) => m.category === t).map((m) => /* @__PURE__ */ l(
+                u,
+                {
+                  className: "component-dashboard-picker__item",
+                  onClick: () => O(m),
+                  disabled: !m.hidden,
+                  wide: !0,
+                  variant: "quiet",
+                  children: [
+                    /* @__PURE__ */ r(I, {}),
+                    m.name
+                  ]
+                }
+              )) })
+            ] }, t))
+          }
+        )
+      ]
     }
   );
 };
 export {
-  j as Grid
+  d0 as Grid
 };