@devalok/shilp-sutra 0.1.0

package/dist/primitives/react-menubar.js

@@ -0,0 +1,355 @@
+import * as u from "react";
+import { createCollection as re } from "./_internal/react-collection.js";
+import { useDirection as ae } from "./_internal/react-direction.js";
+import { composeEventHandlers as h } from "./_internal/primitive.js";
+import { useComposedRefs as oe } from "./_internal/react-compose-refs.js";
+import { createContextScope as ne } from "./_internal/react-context.js";
+import { useId as S } from "./_internal/react-id.js";
+import { Group as te, Root as ue, Portal as se, RadioGroup as ie, Sub as ce, CheckboxItem as pe, ItemIndicator as le, Content as de, createMenuScope as be, Item as me, Label as fe, RadioItem as ve, Separator as Me, SubContent as ge, SubTrigger as he, Anchor as Re, Arrow as _e } from "./react-menu.js";
+import { Root as Ie, Item as Se, createRovingFocusGroupScope as O } from "./react-roving-focus.js";
+import { Primitive as T } from "./_internal/react-primitive.js";
+import { useControllableState as G } from "./_internal/react-use-controllable-state.js";
+import { jsx as t } from "react/jsx-runtime";
+var _ = "Menubar", [C, Ce, xe] = re(_), [D] = ne(_, [
+  xe,
+  O
+]), l = be(), k = O(), [we, A] = D(_), K = u.forwardRef(
+  (e, o) => {
+    const {
+      __scopeMenubar: r,
+      value: a,
+      onValueChange: n,
+      defaultValue: g,
+      loop: d = !0,
+      dir: c,
+      ...s
+    } = e, m = ae(c), i = k(r), [v, b] = G({
+      prop: a,
+      onChange: n,
+      defaultProp: g ?? "",
+      caller: _
+    }), [M, p] = u.useState(null);
+    return /* @__PURE__ */ t(
+      we,
+      {
+        scope: r,
+        value: v,
+        onMenuOpen: u.useCallback(
+          (f) => {
+            b(f), p(f);
+          },
+          [b]
+        ),
+        onMenuClose: u.useCallback(() => b(""), [b]),
+        onMenuToggle: u.useCallback(
+          (f) => {
+            b((y) => y ? "" : f), p(f);
+          },
+          [b]
+        ),
+        dir: m,
+        loop: d,
+        children: /* @__PURE__ */ t(C.Provider, { scope: r, children: /* @__PURE__ */ t(C.Slot, { scope: r, children: /* @__PURE__ */ t(
+          Ie,
+          {
+            asChild: !0,
+            ...i,
+            orientation: "horizontal",
+            loop: d,
+            dir: m,
+            currentTabStopId: M,
+            onCurrentTabStopIdChange: p,
+            children: /* @__PURE__ */ t(T.div, { role: "menubar", ...s, ref: o })
+          }
+        ) }) })
+      }
+    );
+  }
+);
+K.displayName = _;
+var N = "MenubarMenu", [Ae, F] = D(N), L = (e) => {
+  const { __scopeMenubar: o, value: r, ...a } = e, n = S(), g = r || n || "LEGACY_REACT_AUTO_VALUE", d = A(N, o), c = l(o), s = u.useRef(null), m = u.useRef(!1), i = d.value === g;
+  return u.useEffect(() => {
+    i || (m.current = !1);
+  }, [i]), /* @__PURE__ */ t(
+    Ae,
+    {
+      scope: o,
+      value: g,
+      triggerId: S(),
+      triggerRef: s,
+      contentId: S(),
+      wasKeyboardTriggerOpenRef: m,
+      children: /* @__PURE__ */ t(
+        ue,
+        {
+          ...c,
+          open: i,
+          onOpenChange: (v) => {
+            v || d.onMenuClose();
+          },
+          modal: !1,
+          dir: d.dir,
+          ...a
+        }
+      )
+    }
+  );
+};
+L.displayName = N;
+var x = "MenubarTrigger", B = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, disabled: a = !1, ...n } = e, g = k(r), d = l(r), c = A(x, r), s = F(x, r), m = u.useRef(null), i = oe(o, m, s.triggerRef), [v, b] = u.useState(!1), M = c.value === s.value;
+    return /* @__PURE__ */ t(C.ItemSlot, { scope: r, value: s.value, disabled: a, children: /* @__PURE__ */ t(
+      Se,
+      {
+        asChild: !0,
+        ...g,
+        focusable: !a,
+        tabStopId: s.value,
+        children: /* @__PURE__ */ t(Re, { asChild: !0, ...d, children: /* @__PURE__ */ t(
+          T.button,
+          {
+            type: "button",
+            role: "menuitem",
+            id: s.triggerId,
+            "aria-haspopup": "menu",
+            "aria-expanded": M,
+            "aria-controls": M ? s.contentId : void 0,
+            "data-highlighted": v ? "" : void 0,
+            "data-state": M ? "open" : "closed",
+            "data-disabled": a ? "" : void 0,
+            disabled: a,
+            ...n,
+            ref: i,
+            onPointerDown: h(e.onPointerDown, (p) => {
+              !a && p.button === 0 && p.ctrlKey === !1 && (c.onMenuOpen(s.value), M || p.preventDefault());
+            }),
+            onPointerEnter: h(e.onPointerEnter, () => {
+              var f;
+              !!c.value && !M && (c.onMenuOpen(s.value), (f = m.current) == null || f.focus());
+            }),
+            onKeyDown: h(e.onKeyDown, (p) => {
+              a || (["Enter", " "].includes(p.key) && c.onMenuToggle(s.value), p.key === "ArrowDown" && c.onMenuOpen(s.value), ["Enter", " ", "ArrowDown"].includes(p.key) && (s.wasKeyboardTriggerOpenRef.current = !0, p.preventDefault()));
+            }),
+            onFocus: h(e.onFocus, () => b(!0)),
+            onBlur: h(e.onBlur, () => b(!1))
+          }
+        ) })
+      }
+    ) });
+  }
+);
+B.displayName = x;
+var Ne = "MenubarPortal", U = (e) => {
+  const { __scopeMenubar: o, ...r } = e, a = l(o);
+  return /* @__PURE__ */ t(se, { ...a, ...r });
+};
+U.displayName = Ne;
+var w = "MenubarContent", V = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, align: a = "start", ...n } = e, g = l(r), d = A(w, r), c = F(w, r), s = Ce(r), m = u.useRef(!1);
+    return /* @__PURE__ */ t(
+      de,
+      {
+        id: c.contentId,
+        "aria-labelledby": c.triggerId,
+        "data-radix-menubar-content": "",
+        ...g,
+        ...n,
+        ref: o,
+        align: a,
+        onCloseAutoFocus: h(e.onCloseAutoFocus, (i) => {
+          var b;
+          !!!d.value && !m.current && ((b = c.triggerRef.current) == null || b.focus()), m.current = !1, i.preventDefault();
+        }),
+        onFocusOutside: h(e.onFocusOutside, (i) => {
+          const v = i.target;
+          s().some((M) => {
+            var p;
+            return (p = M.ref.current) == null ? void 0 : p.contains(v);
+          }) && i.preventDefault();
+        }),
+        onInteractOutside: h(e.onInteractOutside, () => {
+          m.current = !0;
+        }),
+        onEntryFocus: (i) => {
+          c.wasKeyboardTriggerOpenRef.current || i.preventDefault();
+        },
+        onKeyDown: h(
+          e.onKeyDown,
+          (i) => {
+            if (["ArrowRight", "ArrowLeft"].includes(i.key)) {
+              const v = i.target, b = v.hasAttribute("data-radix-menubar-subtrigger"), M = v.closest("[data-radix-menubar-content]") !== i.currentTarget, f = (d.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === i.key;
+              if (!f && b || M && f) return;
+              let R = s().filter((I) => !I.disabled).map((I) => I.value);
+              f && R.reverse();
+              const P = R.indexOf(c.value);
+              R = d.loop ? Ue(R, P + 1) : R.slice(P + 1);
+              const [E] = R;
+              E && d.onMenuOpen(E);
+            }
+          },
+          { checkForDefaultPrevented: !1 }
+        ),
+        style: {
+          ...e.style,
+          "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    );
+  }
+);
+V.displayName = w;
+var ye = "MenubarGroup", H = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(te, { ...n, ...a, ref: o });
+  }
+);
+H.displayName = ye;
+var Pe = "MenubarLabel", $ = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(fe, { ...n, ...a, ref: o });
+  }
+);
+$.displayName = Pe;
+var Ee = "MenubarItem", j = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(me, { ...n, ...a, ref: o });
+  }
+);
+j.displayName = Ee;
+var Oe = "MenubarCheckboxItem", z = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(pe, { ...n, ...a, ref: o });
+  }
+);
+z.displayName = Oe;
+var Te = "MenubarRadioGroup", W = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(ie, { ...n, ...a, ref: o });
+  }
+);
+W.displayName = Te;
+var Ge = "MenubarRadioItem", X = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(ve, { ...n, ...a, ref: o });
+  }
+);
+X.displayName = Ge;
+var De = "MenubarItemIndicator", Y = u.forwardRef((e, o) => {
+  const { __scopeMenubar: r, ...a } = e, n = l(r);
+  return /* @__PURE__ */ t(le, { ...n, ...a, ref: o });
+});
+Y.displayName = De;
+var ke = "MenubarSeparator", q = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(Me, { ...n, ...a, ref: o });
+  }
+);
+q.displayName = ke;
+var Ke = "MenubarArrow", Fe = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(_e, { ...n, ...a, ref: o });
+  }
+);
+Fe.displayName = Ke;
+var J = "MenubarSub", Q = (e) => {
+  const { __scopeMenubar: o, children: r, open: a, onOpenChange: n, defaultOpen: g } = e, d = l(o), [c, s] = G({
+    prop: a,
+    defaultProp: g ?? !1,
+    onChange: n,
+    caller: J
+  });
+  return /* @__PURE__ */ t(ce, { ...d, open: c, onOpenChange: s, children: r });
+};
+Q.displayName = J;
+var Le = "MenubarSubTrigger", Z = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(
+      he,
+      {
+        "data-radix-menubar-subtrigger": "",
+        ...n,
+        ...a,
+        ref: o
+      }
+    );
+  }
+);
+Z.displayName = Le;
+var Be = "MenubarSubContent", ee = u.forwardRef(
+  (e, o) => {
+    const { __scopeMenubar: r, ...a } = e, n = l(r);
+    return /* @__PURE__ */ t(
+      ge,
+      {
+        ...n,
+        "data-radix-menubar-content": "",
+        ...a,
+        ref: o,
+        style: {
+          ...e.style,
+          "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    );
+  }
+);
+ee.displayName = Be;
+function Ue(e, o) {
+  return e.map((r, a) => e[(o + a) % e.length]);
+}
+var er = K, rr = L, ar = B, or = U, nr = V, tr = H, ur = $, sr = j, ir = z, cr = W, pr = X, lr = Y, dr = q, br = Q, mr = Z, fr = ee;
+export {
+  ir as CheckboxItem,
+  nr as Content,
+  tr as Group,
+  sr as Item,
+  lr as ItemIndicator,
+  ur as Label,
+  rr as Menu,
+  K as Menubar,
+  Fe as MenubarArrow,
+  z as MenubarCheckboxItem,
+  V as MenubarContent,
+  H as MenubarGroup,
+  j as MenubarItem,
+  Y as MenubarItemIndicator,
+  $ as MenubarLabel,
+  L as MenubarMenu,
+  U as MenubarPortal,
+  W as MenubarRadioGroup,
+  X as MenubarRadioItem,
+  q as MenubarSeparator,
+  Q as MenubarSub,
+  ee as MenubarSubContent,
+  Z as MenubarSubTrigger,
+  B as MenubarTrigger,
+  or as Portal,
+  cr as RadioGroup,
+  pr as RadioItem,
+  er as Root,
+  dr as Separator,
+  br as Sub,
+  fr as SubContent,
+  mr as SubTrigger,
+  ar as Trigger
+};