@als-tp/als-react-ts-ui 0.5.0 → 0.5.2

package/dist/als-react-ts-ui166.js

@@ -1,29 +1,35 @@
-import * as u from "react";
-import { useIsoLayoutEffect as p } from "./als-react-ts-ui193.js";
-import { useRenderElement as i } from "./als-react-ts-ui189.js";
-import { useBaseUiId as a } from "./als-react-ts-ui249.js";
-import { useMenuGroupRootContext as m } from "./als-react-ts-ui469.js";
-const d = /* @__PURE__ */ u.forwardRef(function(r, t) {
-  const {
-    className: c,
-    render: l,
-    id: n,
-    ...s
-  } = r, e = a(n), {
-    setLabelId: o
-  } = m();
-  return p(() => (o(e), () => {
-    o(void 0);
-  }), [o, e]), i("div", r, {
-    ref: t,
-    props: {
-      id: e,
-      role: "presentation",
-      ...s
-    }
-  });
-});
-process.env.NODE_ENV !== "production" && (d.displayName = "MenuGroupLabel");
+const o = "_trigger_d816n_2", r = "_backdrop_d816n_9", t = "_positioner_d816n_17", _ = "_popup_d816n_23", n = "_arrow_d816n_49", e = "_item_d816n_59", c = "_separator_d816n_89", d = "_group_d816n_96", a = "_groupLabel_d816n_100", i = "_radioGroup_d816n_110", p = "_radioItem_d816n_114", s = "_radioItemIndicator_d816n_139", u = "_checkboxItem_d816n_152", g = "_checkboxItemIndicator_d816n_177", m = "_submenuTrigger_d816n_191", I = {
+  trigger: o,
+  backdrop: r,
+  positioner: t,
+  popup: _,
+  arrow: n,
+  item: e,
+  separator: c,
+  group: d,
+  groupLabel: a,
+  radioGroup: i,
+  radioItem: p,
+  radioItemIndicator: s,
+  checkboxItem: u,
+  checkboxItemIndicator: g,
+  submenuTrigger: m
+};
 export {
-  d as MenuGroupLabel
+  n as arrow,
+  r as backdrop,
+  u as checkboxItem,
+  g as checkboxItemIndicator,
+  I as default,
+  d as group,
+  a as groupLabel,
+  e as item,
+  _ as popup,
+  t as positioner,
+  i as radioGroup,
+  p as radioItem,
+  s as radioItemIndicator,
+  c as separator,
+  m as submenuTrigger,
+  o as trigger
 };

package/dist/als-react-ts-ui167.js

@@ -1,45 +1,40 @@
-import * as o from "react";
-import { useControlled as v } from "./als-react-ts-ui282.js";
-import { useStableCallback as l } from "./als-react-ts-ui192.js";
-import { MenuRadioGroupContext as V } from "./als-react-ts-ui473.js";
-import { useRenderElement as G } from "./als-react-ts-ui189.js";
-import { jsx as b } from "react/jsx-runtime";
-const g = /* @__PURE__ */ o.memo(/* @__PURE__ */ o.forwardRef(function(r, s) {
-  const {
-    render: x,
-    className: N,
-    value: d,
-    defaultValue: i,
-    onValueChange: m,
-    disabled: e = !1,
-    ...p
-  } = r, [a, c] = v({
-    controlled: d,
-    default: i,
-    name: "MenuRadioGroup"
-  }), f = l(m), n = l((t, u) => {
-    f?.(t, u), !u.isCanceled && c(t);
-  }), R = o.useMemo(() => ({
-    disabled: e
-  }), [e]), C = G("div", r, {
-    state: R,
-    ref: s,
-    props: {
-      role: "group",
-      "aria-disabled": e || void 0,
-      ...p
+import * as e from "react";
+import { useId as a } from "./als-react-ts-ui335.js";
+import { ContextMenuRootContext as d } from "./als-react-ts-ui463.js";
+import { MenuRootContext as p } from "./als-react-ts-ui464.js";
+import { jsx as o } from "react/jsx-runtime";
+import { MenuRoot as x } from "./als-react-ts-ui186.js";
+function P(r) {
+  const [t, u] = e.useState({
+    getBoundingClientRect() {
+      return DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      });
     }
-  }), M = o.useMemo(() => ({
-    value: a,
-    setValue: n,
-    disabled: e
-  }), [a, n, e]);
-  return /* @__PURE__ */ b(V.Provider, {
-    value: M,
-    children: C
+  }), i = e.useRef(null), s = e.useRef(null), c = e.useRef(null), f = e.useRef(null), l = e.useRef(!0), R = e.useRef(null), n = a(), m = e.useMemo(() => ({
+    anchor: t,
+    setAnchor: u,
+    actionsRef: c,
+    backdropRef: i,
+    internalBackdropRef: s,
+    positionerRef: f,
+    allowMouseUpTriggerRef: l,
+    initialCursorPointRef: R,
+    rootId: n
+  }), [t, n]);
+  return /* @__PURE__ */ o(d.Provider, {
+    value: m,
+    children: /* @__PURE__ */ o(p.Provider, {
+      value: void 0,
+      children: /* @__PURE__ */ o(x, {
+        ...r
+      })
+    })
   });
-}));
-process.env.NODE_ENV !== "production" && (g.displayName = "MenuRadioGroup");
+}
 export {
-  g as MenuRadioGroup
+  P as ContextMenuRoot
 };

package/dist/als-react-ts-ui168.js

@@ -1,75 +1,112 @@
-import * as a from "react";
-import { useStableCallback as S } from "./als-react-ts-ui192.js";
-import { useMenuRootContext as V } from "./als-react-ts-ui465.js";
-import { useRenderElement as A } from "./als-react-ts-ui189.js";
-import { useBaseUiId as D } from "./als-react-ts-ui249.js";
-import { useMenuRadioGroupContext as O } from "./als-react-ts-ui473.js";
-import { MenuRadioItemContext as U } from "./als-react-ts-ui474.js";
-import { itemMapping as B } from "./als-react-ts-ui472.js";
-import { useCompositeListItem as G } from "./als-react-ts-ui290.js";
-import { useMenuItem as L, REGULAR_ITEM as _ } from "./als-react-ts-ui470.js";
-import { useMenuPositionerContext as j } from "./als-react-ts-ui468.js";
-import { createChangeEventDetails as w } from "./als-react-ts-ui246.js";
-import { jsx as y } from "react/jsx-runtime";
-import { itemPress as T } from "./als-react-ts-ui248.js";
-const q = /* @__PURE__ */ a.forwardRef(function(s, d) {
+import * as c from "react";
+import { ownerDocument as x } from "./als-react-ts-ui372.js";
+import { useTimeout as C } from "./als-react-ts-ui226.js";
+import { useContextMenuRootContext as k } from "./als-react-ts-ui463.js";
+import { useMenuRootContext as A } from "./als-react-ts-ui464.js";
+import { useRenderElement as _ } from "./als-react-ts-ui220.js";
+import { createChangeEventDetails as O } from "./als-react-ts-ui273.js";
+import { pressableTriggerOpenStateMapping as B } from "./als-react-ts-ui271.js";
+import { findRootOwnerId as I } from "./als-react-ts-ui465.js";
+import { getTarget as v, contains as l } from "./als-react-ts-ui330.js";
+import { stopEvent as W } from "./als-react-ts-ui305.js";
+import { cancelOpen as G, triggerPress as V } from "./als-react-ts-ui275.js";
+const w = 500, j = /* @__PURE__ */ c.forwardRef(function(m, D) {
   const {
-    render: F,
-    className: H,
-    id: l,
-    label: u,
-    nativeButton: c = !1,
-    disabled: p = !1,
-    closeOnClick: f = !1,
-    value: r,
-    ...M
-  } = s, n = G({
-    label: u
-  }), v = j(!0), C = D(l), {
-    store: e
-  } = V(), t = e.useState("isActive", n.index), I = e.useState("itemProps"), {
-    value: R,
-    setValue: b,
-    disabled: P
-  } = O(), o = P || p, i = R === r, {
-    getItemProps: h,
-    itemRef: x
-  } = L({
-    closeOnClick: f,
-    disabled: o,
-    highlighted: t,
-    id: C,
-    store: e,
-    nativeButton: c,
-    nodeId: v?.nodeId,
-    itemMetadata: _
-  }), m = a.useMemo(() => ({
-    disabled: o,
-    highlighted: t,
-    checked: i
-  }), [o, t, i]), g = S((k) => {
-    const N = {
-      ...w(T, k.nativeEvent),
-      preventUnmountOnClose: () => {
+    render: z,
+    className: F,
+    ...P
+  } = m, {
+    setAnchor: S,
+    actionsRef: p,
+    internalBackdropRef: h,
+    backdropRef: d,
+    positionerRef: b,
+    allowMouseUpTriggerRef: f,
+    initialCursorPointRef: L,
+    rootId: g
+  } = k(!1), {
+    store: y
+  } = A(!1), R = y.useState("open"), s = c.useRef(null), o = c.useRef(null), i = C(), T = C(), a = c.useRef(!1);
+  function M(e, t, n) {
+    const r = n.type.startsWith("touch");
+    L.current = {
+      x: e,
+      y: t
+    }, S({
+      getBoundingClientRect() {
+        return DOMRect.fromRect({
+          width: r ? 10 : 0,
+          height: r ? 10 : 0,
+          x: e,
+          y: t
+        });
       }
+    }), a.current = !1, p.current?.setOpen(!0, O(V, n)), T.start(w, () => {
+      a.current = !0;
+    });
+  }
+  function N(e) {
+    f.current = !0, W(e), M(e.clientX, e.clientY, e.nativeEvent), x(s.current).addEventListener("mouseup", (n) => {
+      if (f.current = !1, !a.current)
+        return;
+      T.clear(), a.current = !1;
+      const r = v(n);
+      l(b.current, r) || g && r && I(r) === g || p.current?.setOpen(!1, O(G, n));
+    }, {
+      once: !0
+    });
+  }
+  function Y(e) {
+    if (f.current = !1, e.touches.length === 1) {
+      e.stopPropagation();
+      const t = e.touches[0];
+      o.current = {
+        x: t.clientX,
+        y: t.clientY
+      }, i.start(w, () => {
+        o.current && M(o.current.x, o.current.y, e.nativeEvent);
+      });
+    }
+  }
+  function U(e) {
+    if (i.isStarted() && o.current && e.touches.length === 1) {
+      const t = e.touches[0], n = 10, r = Math.abs(t.clientX - o.current.x), u = Math.abs(t.clientY - o.current.y);
+      (r > n || u > n) && i.clear();
+    }
+  }
+  function E() {
+    i.clear(), o.current = null;
+  }
+  c.useEffect(() => {
+    function e(n) {
+      const u = v(n);
+      (l(s.current, u) || l(h.current, u) || l(d.current, u)) && n.preventDefault();
+    }
+    const t = x(s.current);
+    return t.addEventListener("contextmenu", e), () => {
+      t.removeEventListener("contextmenu", e);
     };
-    b(r, N);
-  }), E = A("div", s, {
-    state: m,
-    stateAttributesMapping: B,
-    props: [I, {
-      role: "menuitemradio",
-      "aria-checked": i,
-      onClick: g
-    }, M, h],
-    ref: [x, d, n.ref]
-  });
-  return /* @__PURE__ */ y(U.Provider, {
-    value: m,
-    children: E
+  }, [d, h]);
+  const X = c.useMemo(() => ({
+    open: R
+  }), [R]);
+  return _("div", m, {
+    state: X,
+    ref: [s, D],
+    props: [{
+      onContextMenu: N,
+      onTouchStart: Y,
+      onTouchMove: U,
+      onTouchEnd: E,
+      onTouchCancel: E,
+      style: {
+        WebkitTouchCallout: "none"
+      }
+    }, P],
+    stateAttributesMapping: B
   });
 });
-process.env.NODE_ENV !== "production" && (q.displayName = "MenuRadioItem");
+process.env.NODE_ENV !== "production" && (j.displayName = "ContextMenuTrigger");
 export {
-  q as MenuRadioItem
+  j as ContextMenuTrigger
 };

package/dist/als-react-ts-ui169.js

@@ -1,44 +1,40 @@
-import * as t from "react";
-import { useMenuRadioItemContext as m } from "./als-react-ts-ui474.js";
-import { useRenderElement as p } from "./als-react-ts-ui189.js";
-import { itemMapping as u } from "./als-react-ts-ui472.js";
-import { useTransitionStatus as l } from "./als-react-ts-ui344.js";
-import { useOpenChangeComplete as h } from "./als-react-ts-ui253.js";
-const f = /* @__PURE__ */ t.forwardRef(function(o, d) {
+import * as a from "react";
+import { useMenuRootContext as m } from "./als-react-ts-ui464.js";
+import { useRenderElement as d } from "./als-react-ts-ui220.js";
+import { popupStateMapping as f } from "./als-react-ts-ui271.js";
+import { transitionStatusMapping as l } from "./als-react-ts-ui272.js";
+import { useContextMenuRootContext as M } from "./als-react-ts-ui463.js";
+import { triggerHover as S } from "./als-react-ts-ui275.js";
+const R = {
+  ...f,
+  ...l
+}, g = /* @__PURE__ */ a.forwardRef(function(e, o) {
   const {
-    render: M,
-    className: R,
-    keepMounted: r = !1,
-    ...s
-  } = o, e = m(), n = t.useRef(null), {
-    transitionStatus: i,
-    setMounted: a
-  } = l(e.checked);
-  h({
-    open: e.checked,
-    ref: n,
-    onComplete() {
-      e.checked || a(!1);
-    }
-  });
-  const c = t.useMemo(() => ({
-    checked: e.checked,
-    disabled: e.disabled,
-    highlighted: e.highlighted,
-    transitionStatus: i
-  }), [e.checked, e.disabled, e.highlighted, i]);
-  return p("span", o, {
+    className: x,
+    render: C,
+    ...p
+  } = e, {
+    store: t
+  } = m(), n = t.useState("open"), i = t.useState("mounted"), s = t.useState("transitionStatus"), u = t.useState("lastOpenChangeReason"), r = M(), c = a.useMemo(() => ({
+    open: n,
+    transitionStatus: s
+  }), [n, s]);
+  return d("div", e, {
+    ref: r?.backdropRef ? [o, r.backdropRef] : o,
     state: c,
-    stateAttributesMapping: u,
-    ref: [d, n],
-    props: {
-      "aria-hidden": !0,
-      ...s
-    },
-    enabled: r || e.checked
+    stateAttributesMapping: R,
+    props: [{
+      role: "presentation",
+      hidden: !i,
+      style: {
+        pointerEvents: u === S ? "none" : void 0,
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      }
+    }, p]
   });
 });
-process.env.NODE_ENV !== "production" && (f.displayName = "MenuRadioItemIndicator");
+process.env.NODE_ENV !== "production" && (g.displayName = "MenuBackdrop");
 export {
-  f as MenuRadioItemIndicator
+  g as MenuBackdrop
 };

package/dist/als-react-ts-ui170.js

@@ -1,78 +1,145 @@
-import * as c from "react";
-import { useStableCallback as A } from "./als-react-ts-ui192.js";
-import { useControlled as O } from "./als-react-ts-ui282.js";
-import { MenuCheckboxItemContext as S } from "./als-react-ts-ui471.js";
-import { useMenuItem as U, REGULAR_ITEM as B } from "./als-react-ts-ui470.js";
-import { useCompositeListItem as D } from "./als-react-ts-ui290.js";
-import { useMenuRootContext as L } from "./als-react-ts-ui465.js";
-import { useRenderElement as _ } from "./als-react-ts-ui189.js";
-import { useBaseUiId as j } from "./als-react-ts-ui249.js";
-import { itemMapping as w } from "./als-react-ts-ui472.js";
-import { useMenuPositionerContext as y } from "./als-react-ts-ui468.js";
-import { createChangeEventDetails as G } from "./als-react-ts-ui246.js";
-import { jsx as T } from "react/jsx-runtime";
-import { itemPress as V } from "./als-react-ts-ui248.js";
-const q = /* @__PURE__ */ c.forwardRef(function(r, a) {
+import * as d from "react";
+import { inertValue as Q } from "./als-react-ts-ui283.js";
+import { MenuPositionerContext as X } from "./als-react-ts-ui467.js";
+import { useMenuRootContext as Y } from "./als-react-ts-ui464.js";
+import { useAnchorPositioning as Z } from "./als-react-ts-ui360.js";
+import { useRenderElement as $ } from "./als-react-ts-ui220.js";
+import { popupStateMapping as ee } from "./als-react-ts-ui271.js";
+import { CompositeList as te } from "./als-react-ts-ui294.js";
+import { InternalBackdrop as ne } from "./als-react-ts-ui284.js";
+import { useMenuPortalContext as oe } from "./als-react-ts-ui466.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as re } from "./als-react-ts-ui287.js";
+import { useContextMenuRootContext as se } from "./als-react-ts-ui463.js";
+import { createChangeEventDetails as x } from "./als-react-ts-ui273.js";
+import { jsxs as ie, jsx as I } from "react/jsx-runtime";
+import { FloatingNode as ae } from "./als-react-ts-ui352.js";
+import { triggerHover as de, siblingOpen as g } from "./als-react-ts-ui275.js";
+const le = /* @__PURE__ */ d.forwardRef(function(c, C) {
   const {
-    render: F,
-    className: H,
-    id: d,
-    label: l,
-    nativeButton: u = !1,
-    disabled: t = !1,
-    closeOnClick: p = !1,
-    checked: f,
-    defaultChecked: C,
-    onCheckedChange: h,
-    ...k
-  } = r, s = D({
-    label: l
-  }), x = y(!0), I = j(d), {
-    store: o
-  } = L(), n = o.useState("isActive", s.index), M = o.useState("itemProps"), [e, b] = O({
-    controlled: f,
-    default: C ?? !1,
-    name: "MenuCheckboxItem",
-    state: "checked"
-  }), {
-    getItemProps: v,
-    itemRef: P
-  } = U({
-    closeOnClick: p,
-    disabled: t,
-    highlighted: n,
-    id: I,
-    store: o,
-    nativeButton: u,
-    nodeId: x?.nodeId,
-    itemMetadata: B
-  }), i = c.useMemo(() => ({
-    disabled: t,
-    highlighted: n,
-    checked: e
-  }), [t, n, e]), g = A((R) => {
-    const m = {
-      ...G(V, R.nativeEvent),
-      preventUnmountOnClose: () => {
+    anchor: v,
+    positionMethod: M = "absolute",
+    className: ce,
+    render: pe,
+    side: y,
+    align: E,
+    sideOffset: b = 0,
+    alignOffset: w = 0,
+    collisionBoundary: A = "clipping-ancestors",
+    collisionPadding: k = 5,
+    arrowPadding: D = 5,
+    sticky: H = !1,
+    disableAnchorTracking: T = !1,
+    collisionAvoidance: B = re,
+    ...L
+  } = c, {
+    store: e
+  } = Y(), V = oe(), U = se(!0), n = e.useState("parent"), _ = e.useState("floatingRootContext"), s = e.useState("floatingTreeRoot"), p = e.useState("mounted"), i = e.useState("open"), j = e.useState("modal"), u = e.useState("activeTriggerElement"), F = e.useState("lastOpenChangeReason"), a = e.useState("floatingNodeId"), O = e.useState("floatingParentNodeId");
+  let P = v, S = b, N = w, m = E;
+  n.type === "context-menu" && (P = v ?? n.context?.anchor, m = m ?? "start", !y && m !== "center" && (N = c.alignOffset ?? 2, S = c.sideOffset ?? -5));
+  let l = y, f = m;
+  n.type === "menu" ? (l = l ?? "inline-end", f = f ?? "start") : n.type === "menubar" && (l = l ?? "bottom", f = f ?? "start");
+  const R = n.type === "context-menu", t = Z({
+    anchor: P,
+    floatingRootContext: _,
+    positionMethod: U ? "fixed" : M,
+    mounted: p,
+    side: l,
+    sideOffset: S,
+    align: f,
+    alignOffset: N,
+    arrowPadding: R ? 0 : D,
+    collisionBoundary: A,
+    collisionPadding: k,
+    sticky: H,
+    nodeId: a,
+    keepMounted: V,
+    disableAnchorTracking: T,
+    collisionAvoidance: B,
+    shiftCrossAxis: R,
+    externalTree: s
+  }), W = d.useMemo(() => {
+    const r = {};
+    return i || (r.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !p,
+      style: {
+        ...t.positionerStyles,
+        ...r
       }
     };
-    h?.(!e, m), !m.isCanceled && b((N) => !N);
-  }), E = _("div", r, {
-    state: i,
-    stateAttributesMapping: w,
-    props: [M, {
-      role: "menuitemcheckbox",
-      "aria-checked": e,
-      onClick: g
-    }, k, v],
-    ref: [P, a, s.ref]
-  });
-  return /* @__PURE__ */ T(S.Provider, {
-    value: i,
-    children: E
+  }, [i, p, t.positionerStyles]);
+  d.useEffect(() => {
+    function r(o) {
+      o.open ? (o.parentNodeId === a && e.set("hoverEnabled", !1), o.nodeId !== a && o.parentNodeId === e.select("floatingParentNodeId") && e.setOpen(!1, x(g))) : o.parentNodeId === a && o.reason !== g && e.set("hoverEnabled", !0);
+    }
+    return s.events.on("menuopenchange", r), () => {
+      s.events.off("menuopenchange", r);
+    };
+  }, [e, s.events, a]), d.useEffect(() => {
+    if (e.select("floatingParentNodeId") == null)
+      return;
+    function r(o) {
+      if (o.open || o.nodeId !== e.select("floatingParentNodeId"))
+        return;
+      const K = o.reason ?? g;
+      e.setOpen(!1, x(K));
+    }
+    return s.events.on("menuopenchange", r), () => {
+      s.events.off("menuopenchange", r);
+    };
+  }, [s.events, e]), d.useEffect(() => {
+    function r(o) {
+      !i || o.nodeId !== e.select("floatingParentNodeId") || o.target && u && u !== o.target && e.setOpen(!1, x(g));
+    }
+    return s.events.on("itemhover", r), () => {
+      s.events.off("itemhover", r);
+    };
+  }, [s.events, i, u, e]), d.useEffect(() => {
+    const r = {
+      open: i,
+      nodeId: a,
+      parentNodeId: O,
+      reason: e.select("lastOpenChangeReason")
+    };
+    s.events.emit("menuopenchange", r);
+  }, [s.events, i, e, a, O]);
+  const q = d.useMemo(() => ({
+    open: i,
+    side: t.side,
+    align: t.align,
+    anchorHidden: t.anchorHidden,
+    nested: n.type === "menu"
+  }), [i, t.side, t.align, t.anchorHidden, n.type]), z = d.useMemo(() => ({
+    side: t.side,
+    align: t.align,
+    arrowRef: t.arrowRef,
+    arrowUncentered: t.arrowUncentered,
+    arrowStyles: t.arrowStyles,
+    nodeId: t.context.nodeId
+  }), [t.side, t.align, t.arrowRef, t.arrowUncentered, t.arrowStyles, t.context.nodeId]), G = $("div", c, {
+    state: q,
+    stateAttributesMapping: ee,
+    ref: [C, e.useStateSetter("positionerElement")],
+    props: [W, L]
+  }), J = p && n.type !== "menu" && (n.type !== "menubar" && j && F !== de || n.type === "menubar" && n.context.modal);
+  let h = null;
+  return n.type === "menubar" ? h = n.context.contentElement : n.type === void 0 && (h = u), /* @__PURE__ */ ie(X.Provider, {
+    value: z,
+    children: [J && /* @__PURE__ */ I(ne, {
+      ref: n.type === "context-menu" || n.type === "nested-context-menu" ? n.context.internalBackdropRef : null,
+      inert: Q(!i),
+      cutout: h
+    }), /* @__PURE__ */ I(ae, {
+      id: a,
+      children: /* @__PURE__ */ I(te, {
+        elementsRef: e.context.itemDomElements,
+        labelsRef: e.context.itemLabels,
+        children: G
+      })
+    })]
   });
 });
-process.env.NODE_ENV !== "production" && (q.displayName = "MenuCheckboxItem");
+process.env.NODE_ENV !== "production" && (le.displayName = "MenuPositioner");
 export {
-  q as MenuCheckboxItem
+  le as MenuPositioner
 };