@wrdagency/blockout 0.1.10 → 1.0.1

package/dist/item-C5GtZF5t.js

@@ -0,0 +1,470 @@
+import { jsx as h, jsxs as U } from "react/jsx-runtime";
+import { ActionMenuItem as pe } from "./components/menu/items/action.js";
+import { SeparatorMenuItem as be } from "./components/menu/items/spacer.js";
+import { e as ve } from "./CaretRight.es-vnr78BGI.js";
+import { EmptyIcon as he } from "./components/menu/icon.js";
+import { ToggleMenuItem as _e } from "./components/menu/items/toggle.js";
+import { u as Me, b as z, M as Se, c as se } from "./VIIRIBF3-DylpToFV.js";
+import { u as we, M as ge } from "./2NBKRL7C-Cug3TzgR.js";
+import { c as ye, u as Pe, a as Ee, b as Oe } from "./MR26YJYP-yD1_RvCA.js";
+import { c as Ae, b as xe } from "./4CMBR7SL-xNGezbCB.js";
+import { a as Fe } from "./S43UC3DV-erT1ucAd.js";
+import { m as Ce, o as Ie, p as He, t as De, c as ke, s as ne, e as oe, b as Ne, d as Ve, a as H } from "./YV4JVR4I-BXEaRiAN.js";
+import { P as Re, Q as B, S as V, R as x, a5 as Le, m as F, o as b, T as Te, c as G, _ as K, i as J, q as ae, e as q, l as ue, n as X, f as Y, a as Z, a6 as Be, a4 as Ke, t as $e, W as je, a0 as We } from "./LMDWO4NN-DdLnHzru.js";
+import { u as ie } from "./T7VMP3TM-C-Aesx9K.js";
+import { u as Ue } from "./WMYDSCNQ-D43V-JUe.js";
+import { c as qe, R as ze } from "./G7GW6PWC-Crp1Jn-8.js";
+import { useState as ce, useEffect as le, useRef as me, createRef as Qe, useMemo as Ge } from "react";
+import { i as Je } from "./KFH4SEIX-D-fCkpQv.js";
+import { u as Xe } from "./5JTVDSTH-CIreO5bC.js";
+import { a as Q } from "./PFRGBC2K-DUhGSIey.js";
+function Ye(t = {}) {
+  var o = t, {
+    combobox: n,
+    parent: e,
+    menubar: v
+  } = o, i = Re(o, [
+    "combobox",
+    "parent",
+    "menubar"
+  ]);
+  const s = !!v && !e, r = Ce(
+    i.store,
+    He(e, ["values"]),
+    Ie(n, [
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    ])
+  );
+  De(i, r);
+  const p = r.getState(), m = Ae(B(x({}, i), {
+    store: r,
+    orientation: V(
+      i.orientation,
+      p.orientation,
+      "vertical"
+    )
+  })), a = ye(B(x({}, i), {
+    store: r,
+    placement: V(
+      i.placement,
+      p.placement,
+      "bottom-start"
+    ),
+    timeout: V(
+      i.timeout,
+      p.timeout,
+      s ? 0 : 150
+    ),
+    hideTimeout: V(i.hideTimeout, p.hideTimeout, 0)
+  })), _ = B(x(x({}, m.getState()), a.getState()), {
+    initialFocus: V(p.initialFocus, "container"),
+    values: V(
+      i.values,
+      p.values,
+      i.defaultValues,
+      {}
+    )
+  }), d = ke(_, m, a, r);
+  return ne(
+    d,
+    () => oe(d, ["mounted"], (u) => {
+      u.mounted || d.setState("activeId", null);
+    })
+  ), ne(
+    d,
+    () => oe(e, ["orientation"], (u) => {
+      d.setState(
+        "placement",
+        u.orientation === "vertical" ? "right-start" : "bottom-start"
+      );
+    })
+  ), B(x(x(x({}, m), a), d), {
+    combobox: n,
+    parent: e,
+    menubar: v,
+    hideAll: () => {
+      a.hide(), e == null || e.hideAll();
+    },
+    setInitialFocus: (u) => d.setState("initialFocus", u),
+    setValues: (u) => d.setState("values", u),
+    setValue: (u, E) => {
+      u !== "__proto__" && u !== "constructor" && (Array.isArray(u) || d.setState("values", (f) => {
+        const S = f[u], y = Le(E, S);
+        return y === S ? f : B(x({}, f), {
+          [u]: y !== void 0 && y
+        });
+      }));
+    }
+  });
+}
+function Ze(t, o, n) {
+  return Te(o, [n.combobox, n.parent, n.menubar]), Ve(t, n, "values", "setValues"), Object.assign(
+    Pe(
+      xe(t, o, n),
+      o,
+      n
+    ),
+    {
+      combobox: n.combobox,
+      parent: n.parent,
+      menubar: n.menubar
+    }
+  );
+}
+function de(t = {}) {
+  const o = Me(), n = we(), e = Fe();
+  t = F(b({}, t), {
+    parent: t.parent !== void 0 ? t.parent : o,
+    menubar: t.menubar !== void 0 ? t.menubar : n,
+    combobox: t.combobox !== void 0 ? t.combobox : e
+  });
+  const [v, i] = Ne(Ye, t);
+  return Ze(v, i, t);
+}
+var et = "div";
+function tt(t) {
+  var o = t, { store: n } = o, e = K(o, ["store"]);
+  const [v, i] = ce(void 0), s = e["aria-label"], r = H(n, "disclosureElement"), p = H(n, "contentElement");
+  return le(() => {
+    const m = r;
+    if (!m) return;
+    const a = p;
+    if (!a) return;
+    s || a.hasAttribute("aria-label") ? i(void 0) : m.id && i(m.id);
+  }, [s, r, p]), v;
+}
+var fe = G(
+  function(o) {
+    var n = o, { store: e, alwaysVisible: v, composite: i } = n, s = K(n, ["store", "alwaysVisible", "composite"]);
+    const r = z();
+    e = e || r, J(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
+    );
+    const p = e.parent, m = e.menubar, a = !!p, _ = ae(s.id), d = s.onKeyDown, u = e.useState(
+      (l) => l.placement.split("-")[0]
+    ), E = e.useState(
+      (l) => l.orientation === "both" ? void 0 : l.orientation
+    ), f = E !== "vertical", S = H(
+      m,
+      (l) => !!l && l.orientation !== "vertical"
+    ), y = q((l) => {
+      if (d == null || d(l), !l.defaultPrevented) {
+        if (a || m && !f) {
+          const w = {
+            ArrowRight: () => u === "left" && !f,
+            ArrowLeft: () => u === "right" && !f,
+            ArrowUp: () => u === "bottom" && f,
+            ArrowDown: () => u === "top" && f
+          }[l.key];
+          if (w != null && w())
+            return l.stopPropagation(), l.preventDefault(), e == null ? void 0 : e.hide();
+        }
+        if (m) {
+          const w = {
+            ArrowRight: () => {
+              if (S)
+                return m.next();
+            },
+            ArrowLeft: () => {
+              if (S)
+                return m.previous();
+            },
+            ArrowDown: () => {
+              if (!S)
+                return m.next();
+            },
+            ArrowUp: () => {
+              if (!S)
+                return m.previous();
+            }
+          }[l.key], A = w == null ? void 0 : w();
+          A !== void 0 && (l.stopPropagation(), l.preventDefault(), m.move(A));
+        }
+      }
+    });
+    s = ue(
+      s,
+      (l) => /* @__PURE__ */ h(Se, { value: e, children: l }),
+      [e]
+    );
+    const R = tt(b({ store: e }, s)), L = e.useState("mounted"), C = Je(L, s.hidden, v), D = C ? F(b({}, s.style), { display: "none" }) : s.style;
+    s = F(b({
+      id: _,
+      "aria-labelledby": R,
+      hidden: C
+    }, s), {
+      ref: X(_ ? e.setContentElement : null, s.ref),
+      style: D,
+      onKeyDown: y
+    });
+    const O = !!e.combobox;
+    return i = i ?? !O, i && (s = b({
+      role: "menu",
+      "aria-orientation": E
+    }, s)), s = Xe(b({ store: e, composite: i }, s)), s = ie(b({ store: e, typeahead: !O }, s)), s;
+  }
+);
+Y(function(o) {
+  const n = fe(o);
+  return Z(et, n);
+});
+var nt = "div", ot = G(function(o) {
+  var n = o, {
+    store: e,
+    modal: v = !1,
+    portal: i = !!v,
+    hideOnEscape: s = !0,
+    autoFocusOnShow: r = !0,
+    hideOnHoverOutside: p,
+    alwaysVisible: m
+  } = n, a = K(n, [
+    "store",
+    "modal",
+    "portal",
+    "hideOnEscape",
+    "autoFocusOnShow",
+    "hideOnHoverOutside",
+    "alwaysVisible"
+  ]);
+  const _ = z();
+  e = e || _, J(
+    e,
+    process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component."
+  );
+  const d = me(null), u = e.parent, E = e.menubar, f = !!u, S = !!E && !f;
+  a = F(b({}, a), {
+    ref: X(d, a.ref)
+  });
+  const y = fe(b({
+    store: e,
+    alwaysVisible: m
+  }, a)), { "aria-labelledby": R } = y;
+  a = K(y, ["aria-labelledby"]);
+  const [C, D] = ce(), O = e.useState("autoFocusOnShow"), l = e.useState("initialFocus"), k = e.useState("baseElement"), w = e.useState("renderedItems");
+  le(() => {
+    let P = !1;
+    return D((M) => {
+      var j, ee, te;
+      if (P || !O) return;
+      if ((j = M == null ? void 0 : M.current) != null && j.isConnected) return M;
+      const W = Qe();
+      switch (l) {
+        // TODO: Refactor
+        case "first":
+          W.current = ((ee = w.find((T) => !T.disabled && T.element)) == null ? void 0 : ee.element) || null;
+          break;
+        case "last":
+          W.current = ((te = [...w].reverse().find((T) => !T.disabled && T.element)) == null ? void 0 : te.element) || null;
+          break;
+        default:
+          W.current = k;
+      }
+      return W;
+    }), () => {
+      P = !0;
+    };
+  }, [e, O, l, w, k]);
+  const A = f ? !1 : v, c = !!r, g = !!C || !!a.initialFocus || !!A, N = H(
+    e.combobox || e,
+    "contentElement"
+  ), I = H(
+    (u == null ? void 0 : u.combobox) || u,
+    "contentElement"
+  ), $ = Ge(() => {
+    if (!I || !N) return;
+    const P = N.getAttribute("role"), M = I.getAttribute("role");
+    if (!((M === "menu" || M === "menubar") && P === "menu"))
+      return I;
+  }, [N, I]);
+  return $ !== void 0 && (a = b({
+    preserveTabOrderAnchor: $
+  }, a)), a = Ee(F(b({
+    store: e,
+    alwaysVisible: m,
+    initialFocus: C,
+    autoFocusOnShow: c ? g && r : O || !!A
+  }, a), {
+    hideOnEscape(P) {
+      return Ke(s, P) ? !1 : (e == null || e.hideAll(), !0);
+    },
+    hideOnHoverOutside(P) {
+      const M = e == null ? void 0 : e.getState().disclosureElement;
+      return (typeof p == "function" ? p(P) : p ?? (f ? !0 : S ? M ? !Q(M) : !0 : !1)) ? P.defaultPrevented || !f || !M || (Be(M, "mouseout", P), !Q(M)) ? !0 : (requestAnimationFrame(() => {
+        Q(M) || e == null || e.hide();
+      }), !1) : !1;
+    },
+    modal: A,
+    portal: i,
+    backdrop: f ? !1 : a.backdrop
+  })), a = b({
+    "aria-labelledby": R
+  }, a), a;
+}), rt = qe(
+  Y(function(o) {
+    const n = ot(o);
+    return Z(nt, n);
+  }),
+  z
+);
+function st(t = {}) {
+  const o = de(t);
+  return /* @__PURE__ */ h(se, { value: o, children: t.children });
+}
+var at = "button";
+function ut(t, o) {
+  return {
+    ArrowDown: o === "bottom" || o === "top" ? "first" : !1,
+    ArrowUp: o === "bottom" || o === "top" ? "last" : !1,
+    ArrowRight: o === "right" ? "first" : !1,
+    ArrowLeft: o === "left" ? "first" : !1
+  }[t.key];
+}
+function re(t, o) {
+  return !!(t != null && t.some((n) => !n.element || n.element === o ? !1 : n.element.getAttribute("aria-expanded") === "true"));
+}
+var it = G(
+  function(o) {
+    var n = o, {
+      store: e,
+      focusable: v,
+      accessibleWhenDisabled: i,
+      showOnHover: s
+    } = n, r = K(n, [
+      "store",
+      "focusable",
+      "accessibleWhenDisabled",
+      "showOnHover"
+    ]);
+    const p = z();
+    e = e || p, J(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuButton must receive a `store` prop or be wrapped in a MenuProvider component."
+    );
+    const m = me(null), a = e.parent, _ = e.menubar, d = !!a, u = !!_ && !d, E = $e(r), f = () => {
+      const c = m.current;
+      c && (e == null || e.setDisclosureElement(c), e == null || e.setAnchorElement(c), e == null || e.show());
+    }, S = r.onFocus, y = q((c) => {
+      if (S == null || S(c), E || c.defaultPrevented || (e == null || e.setAutoFocusOnShow(!1), e == null || e.setActiveId(null), !_) || !u) return;
+      const { items: g } = _.getState();
+      re(g, c.currentTarget) && f();
+    }), R = H(
+      e,
+      (c) => c.placement.split("-")[0]
+    ), L = r.onKeyDown, C = q((c) => {
+      if (L == null || L(c), E || c.defaultPrevented) return;
+      const g = ut(c, R);
+      g && (c.preventDefault(), f(), e == null || e.setAutoFocusOnShow(!0), e == null || e.setInitialFocus(g));
+    }), D = r.onClick, O = q((c) => {
+      if (D == null || D(c), c.defaultPrevented || !e) return;
+      const g = !c.detail, { open: N } = e.getState();
+      (!N || g) && ((!d || g) && e.setAutoFocusOnShow(!0), e.setInitialFocus(g ? "first" : "container")), d && f();
+    });
+    r = ue(
+      r,
+      (c) => /* @__PURE__ */ h(se, { value: e, children: c }),
+      [e]
+    ), d && (r = F(b({}, r), {
+      render: /* @__PURE__ */ h(ze.div, { render: r.render })
+    }));
+    const l = ae(r.id), k = H(
+      (a == null ? void 0 : a.combobox) || a,
+      "contentElement"
+    ), w = d || u ? je(k, "menuitem") : void 0, A = e.useState("contentElement");
+    return r = F(b({
+      id: l,
+      role: w,
+      "aria-haspopup": We(A, "menu")
+    }, r), {
+      ref: X(m, r.ref),
+      onFocus: y,
+      onKeyDown: C,
+      onClick: O
+    }), r = Oe(F(b({
+      store: e,
+      focusable: v,
+      accessibleWhenDisabled: i
+    }, r), {
+      showOnHover: (c) => {
+        if (!(() => {
+          if (typeof s == "function") return s(c);
+          if (s != null) return s;
+          if (d) return !0;
+          if (!_) return !1;
+          const { items: $ } = _.getState();
+          return u && re($);
+        })()) return !1;
+        const I = u ? _ : a;
+        return I && I.setActiveId(c.currentTarget.id), !0;
+      }
+    })), r = Ue(b({
+      store: e,
+      toggleOnClick: !d,
+      focusable: v,
+      accessibleWhenDisabled: i
+    }, r)), r = ie(b({
+      store: e,
+      typeahead: u
+    }, r)), r;
+  }
+), ct = Y(function(o) {
+  const n = it(o);
+  return Z(at, n);
+});
+const lt = ({ item: t }) => {
+  const o = t.icon || he, n = de();
+  return /* @__PURE__ */ U(st, { store: n, children: [
+    /* @__PURE__ */ U(
+      ct,
+      {
+        className: "component-menu__item component-menu__item--submenu",
+        render: /* @__PURE__ */ h(ge, {}),
+        disabled: t.disabled,
+        children: [
+          /* @__PURE__ */ h(o, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
+          /* @__PURE__ */ U("div", { className: "component-menu__item__text", children: [
+            /* @__PURE__ */ U("div", { className: "component-menu__item__text__header", children: [
+              /* @__PURE__ */ h("div", { className: "component-menu__item__label", children: t.label }),
+              /* @__PURE__ */ h(ve, { className: "component-menu__item__icon component-menu__item__icon--submenu-indicator" })
+            ] }),
+            /* @__PURE__ */ h("p", { className: "component-menu__item__description", children: t.description })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ h(
+      rt,
+      {
+        gutter: 12,
+        shift: 0,
+        wrapperProps: {
+          className: "component-menu__menu-wrapper"
+        },
+        className: "component-menu",
+        children: t.children.map((e, v) => /* @__PURE__ */ h(mt, { item: e }, v))
+      }
+    )
+  ] });
+}, mt = ({ item: t }) => {
+  switch (t.type) {
+    case "action":
+      return /* @__PURE__ */ h(pe, { item: t });
+    case "toggle":
+      return /* @__PURE__ */ h(_e, { item: t });
+    case "submenu":
+      return /* @__PURE__ */ h(lt, { item: t });
+    case "separator":
+      return /* @__PURE__ */ h(be, {});
+  }
+};
+export {
+  st as M,
+  lt as S,
+  ct as a,
+  rt as b,
+  mt as c
+};