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

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

@@ -1,109 +1,40 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as f, forwardRef as i, useContext as p } from "react";
-import n from "./als-react-ts-ui230.js";
-import { TabsRoot as d } from "./als-react-ts-ui231.js";
-import { TabsList as L } from "./als-react-ts-ui232.js";
-import { TabsTab as N } from "./als-react-ts-ui233.js";
-import { TabsIndicator as A } from "./als-react-ts-ui234.js";
-import { TabsPanel as S } from "./als-react-ts-ui235.js";
-const c = f({
-  size: "md"
-}), u = () => p(c), C = i(
-  ({
-    value: s,
-    defaultValue: o = 0,
-    onValueChange: t,
-    orientation: a = "horizontal",
-    size: e = "md",
-    className: r,
-    children: m
-  }, b) => {
-    const T = [
-      n.root,
-      n[`root--${a}`],
-      r
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ l(c.Provider, { value: { size: e }, children: /* @__PURE__ */ l(
-      d,
-      {
-        ref: b,
-        value: s,
-        defaultValue: o,
-        onValueChange: t,
-        orientation: a,
-        className: T,
-        children: m
-      }
-    ) });
-  }
-);
-C.displayName = "ALSTabs.Root";
-const j = i(
-  ({ activateOnFocus: s = !1, loopFocus: o = !0, className: t, children: a }, e) => {
-    const r = [n.list, t].filter(Boolean).join(" ");
-    return /* @__PURE__ */ l(
-      L,
-      {
-        ref: e,
-        activateOnFocus: s,
-        loopFocus: o,
-        className: r,
-        children: a
-      }
-    );
-  }
-);
-j.displayName = "ALSTabs.List";
-const x = i(
-  ({ value: s, disabled: o = !1, className: t, children: a }, e) => {
-    const { size: r } = u(), m = [n.tab, n[`tab--${r}`], t].filter(Boolean).join(" ");
-    return /* @__PURE__ */ l(
-      N,
-      {
-        ref: e,
-        value: s,
-        disabled: o,
-        className: m,
-        children: a
-      }
-    );
-  }
-);
-x.displayName = "ALSTabs.Tab";
-const y = i(
-  ({ className: s, renderBeforeHydration: o = !1 }, t) => {
-    const a = [n.indicator, s].filter(Boolean).join(" ");
-    return /* @__PURE__ */ l(
-      A,
-      {
-        ref: t,
-        renderBeforeHydration: o,
-        className: a
-      }
-    );
-  }
-);
-y.displayName = "ALSTabs.Indicator";
-const B = i(
-  ({ value: s, keepMounted: o = !1, className: t, children: a }, e) => {
-    const r = [n.panel, t].filter(Boolean).join(" ");
-    return /* @__PURE__ */ l(
-      S,
-      {
-        ref: e,
-        value: s,
-        keepMounted: o,
-        className: r,
-        children: a
-      }
-    );
-  }
-);
-B.displayName = "ALSTabs.Panel";
+import * as e from "react";
+import { useId as a } from "./als-react-ts-ui325.js";
+import { ContextMenuRootContext as d } from "./als-react-ts-ui464.js";
+import { MenuRootContext as p } from "./als-react-ts-ui465.js";
+import { jsx as o } from "react/jsx-runtime";
+import { MenuRoot as x } from "./als-react-ts-ui198.js";
+function P(r) {
+  const [t, u] = e.useState({
+    getBoundingClientRect() {
+      return DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      });
+    }
+  }), 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
+      })
+    })
+  });
+}
 export {
-  y as ALSTabsIndicator,
-  j as ALSTabsList,
-  B as ALSTabsPanel,
-  C as ALSTabsRoot,
-  x as ALSTabsTab
+  P as ContextMenuRoot
 };

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

@@ -1,31 +1,112 @@
-import * as n from "react";
-function d({
-  controlled: o,
-  default: s,
-  name: t,
-  state: i = "value"
-}) {
+import * as c from "react";
+import { ownerDocument as x } from "./als-react-ts-ui372.js";
+import { useTimeout as C } from "./als-react-ts-ui195.js";
+import { useContextMenuRootContext as k } from "./als-react-ts-ui464.js";
+import { useMenuRootContext as A } from "./als-react-ts-ui465.js";
+import { useRenderElement as _ } from "./als-react-ts-ui189.js";
+import { createChangeEventDetails as O } from "./als-react-ts-ui246.js";
+import { pressableTriggerOpenStateMapping as B } from "./als-react-ts-ui244.js";
+import { findRootOwnerId as I } from "./als-react-ts-ui466.js";
+import { getTarget as v, contains as l } from "./als-react-ts-ui331.js";
+import { stopEvent as W } from "./als-react-ts-ui295.js";
+import { cancelOpen as G, triggerPress as V } from "./als-react-ts-ui248.js";
+const w = 500, j = /* @__PURE__ */ c.forwardRef(function(m, D) {
   const {
-    current: e
-  } = n.useRef(o !== void 0), [l, c] = n.useState(s), u = e ? o : l;
-  if (process.env.NODE_ENV !== "production") {
-    n.useEffect(() => {
-      e !== (o !== void 0) && console.error([`Base UI: A component is changing the ${e ? "" : "un"}controlled ${i} state of ${t} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${t} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
-`));
-    }, [i, t, o]);
-    const {
-      current: r
-    } = n.useRef(s);
-    n.useEffect(() => {
-      !e && JSON.stringify(r) !== JSON.stringify(s) && console.error([`Base UI: A component is changing the default ${i} state of an uncontrolled ${t} after being initialized. To suppress this warning opt to use a controlled ${t}.`].join(`
-`));
-    }, [JSON.stringify(s)]);
+    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;
+    });
   }
-  const f = n.useCallback((r) => {
-    e || c(r);
-  }, []);
-  return [u, f];
-}
+  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);
+    };
+  }, [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" && (j.displayName = "ContextMenuTrigger");
 export {
-  d as useControlled
+  j as ContextMenuTrigger
 };

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

@@ -1,9 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "./als-react-ts-ui71.js";
-function e(t) {
-  return /* @__PURE__ */ o("div", { className: r.root });
-}
+import { ALSFormRow as o, ALSFormGroup as r, ALSFormActions as m, ALSFormDescription as t, ALSFormError as A, ALSFormTextarea as F, ALSFormControl as L, ALSFormLabel as e, ALSFormField as S, ALSFormRoot as i } from "./als-react-ts-ui71.js";
+const a = {
+  Root: i,
+  Field: S,
+  Label: e,
+  Control: L,
+  Textarea: F,
+  Error: A,
+  Description: t,
+  Actions: m,
+  Group: r,
+  Row: o
+};
 export {
-  e as ALSForm,
-  e as default
+  a as ALSForm
 };

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

@@ -1,29 +1,40 @@
 import * as a from "react";
-import { useRefWithInit as c } from "./als-react-ts-ui184.js";
-const n = a[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)], r = (
-  // React 17 doesn't have useInsertionEffect.
-  n && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
-  n !== a.useLayoutEffect ? n : (e) => e()
-);
-function f(e) {
-  const t = c(o).current;
-  return t.next = e, r(t.effect), t.trampoline;
-}
-function o() {
-  const e = {
-    next: void 0,
-    callback: l,
-    trampoline: (...t) => e.callback?.(...t),
-    effect: () => {
-      e.callback = e.next;
-    }
-  };
-  return e;
-}
-function l() {
-  if (process.env.NODE_ENV !== "production")
-    throw new Error("Base UI: Cannot call an event handler while rendering.");
-}
+import { useMenuRootContext as m } from "./als-react-ts-ui465.js";
+import { useRenderElement as d } from "./als-react-ts-ui189.js";
+import { popupStateMapping as f } from "./als-react-ts-ui244.js";
+import { transitionStatusMapping as l } from "./als-react-ts-ui245.js";
+import { useContextMenuRootContext as M } from "./als-react-ts-ui464.js";
+import { triggerHover as S } from "./als-react-ts-ui248.js";
+const R = {
+  ...f,
+  ...l
+}, g = /* @__PURE__ */ a.forwardRef(function(e, o) {
+  const {
+    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: R,
+    props: [{
+      role: "presentation",
+      hidden: !i,
+      style: {
+        pointerEvents: u === S ? "none" : void 0,
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      }
+    }, p]
+  });
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "MenuBackdrop");
 export {
-  f as useStableCallback
+  g as MenuBackdrop
 };

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

@@ -1,6 +1,145 @@
-import * as o from "react";
-const t = () => {
-}, e = typeof document < "u" ? o.useLayoutEffect : t;
+import * as d from "react";
+import { inertValue as Q } from "./als-react-ts-ui256.js";
+import { MenuPositionerContext as X } from "./als-react-ts-ui468.js";
+import { useMenuRootContext as Y } from "./als-react-ts-ui465.js";
+import { useAnchorPositioning as Z } from "./als-react-ts-ui364.js";
+import { useRenderElement as $ } from "./als-react-ts-ui189.js";
+import { popupStateMapping as ee } from "./als-react-ts-ui244.js";
+import { CompositeList as te } from "./als-react-ts-ui284.js";
+import { InternalBackdrop as ne } from "./als-react-ts-ui257.js";
+import { useMenuPortalContext as oe } from "./als-react-ts-ui467.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as re } from "./als-react-ts-ui260.js";
+import { useContextMenuRootContext as se } from "./als-react-ts-ui464.js";
+import { createChangeEventDetails as x } from "./als-react-ts-ui246.js";
+import { jsxs as ie, jsx as I } from "react/jsx-runtime";
+import { FloatingNode as ae } from "./als-react-ts-ui356.js";
+import { triggerHover as de, siblingOpen as g } from "./als-react-ts-ui248.js";
+const le = /* @__PURE__ */ d.forwardRef(function(c, C) {
+  const {
+    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
+      }
+    };
+  }, [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" && (le.displayName = "MenuPositioner");
 export {
-  e as useIsoLayoutEffect
+  le as MenuPositioner
 };

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

@@ -1,11 +1,87 @@
-let n;
-process.env.NODE_ENV !== "production" && (n = /* @__PURE__ */ new Set());
-function s(...o) {
-  if (process.env.NODE_ENV !== "production") {
-    const e = o.join(" ");
-    n.has(e) || (n.add(e), console.warn(`Base UI: ${e}`));
-  }
-}
+import * as a from "react";
+import { useMenuRootContext as O } from "./als-react-ts-ui465.js";
+import { useMenuPositionerContext as D } from "./als-react-ts-ui468.js";
+import { useRenderElement as I } from "./als-react-ts-ui189.js";
+import { popupStateMapping as N } from "./als-react-ts-ui244.js";
+import { transitionStatusMapping as w } from "./als-react-ts-ui245.js";
+import { useOpenChangeComplete as G } from "./als-react-ts-ui253.js";
+import { createChangeEventDetails as K } from "./als-react-ts-ui246.js";
+import { useToolbarRootContext as _ } from "./als-react-ts-ui368.js";
+import { COMPOSITE_KEYS as j } from "./als-react-ts-ui254.js";
+import { getDisabledMountTransitionStyles as k } from "./als-react-ts-ui366.js";
+import { jsx as A } from "react/jsx-runtime";
+import { useHoverFloatingInteraction as H } from "./als-react-ts-ui369.js";
+import { FloatingFocusManager as V } from "./als-react-ts-ui255.js";
+import { outsidePress as Y } from "./als-react-ts-ui248.js";
+const q = {
+  ...N,
+  ...w
+}, z = /* @__PURE__ */ a.forwardRef(function(u, g) {
+  const {
+    render: J,
+    className: L,
+    finalFocus: i,
+    ...S
+  } = u, {
+    store: e
+  } = O(), {
+    side: p,
+    align: c
+  } = D(), y = _(!0) != null, n = e.useState("open"), r = e.useState("transitionStatus"), b = e.useState("popupProps"), x = e.useState("mounted"), m = e.useState("instantType"), C = e.useState("activeTriggerElement"), t = e.useState("parent"), E = e.useState("lastOpenChangeReason"), R = e.useState("rootId"), l = e.useState("floatingRootContext"), s = e.useState("floatingTreeRoot"), F = e.useState("closeDelay"), T = e.useState("activeTriggerElement");
+  G({
+    open: n,
+    ref: e.context.popupRef,
+    onComplete() {
+      n && e.context.onOpenChangeComplete?.(!0);
+    }
+  }), a.useEffect(() => {
+    function o(d) {
+      e.setOpen(!1, K(d.reason, d.domEvent));
+    }
+    return s.events.on("close", o), () => {
+      s.events.off("close", o);
+    };
+  }, [s.events, e]);
+  const v = e.useState("hoverEnabled"), M = e.useState("disabled");
+  H(l, {
+    enabled: v && !M && t.type !== "context-menu" && t.type !== "menubar",
+    closeDelay: F
+  });
+  const h = a.useMemo(() => ({
+    transitionStatus: r,
+    side: p,
+    align: c,
+    open: n,
+    nested: t.type === "menu",
+    instant: m
+  }), [r, p, c, n, t.type, m]), P = I("div", u, {
+    state: h,
+    ref: [g, e.context.popupRef],
+    stateAttributesMapping: q,
+    props: [b, {
+      onKeyDown(o) {
+        y && j.has(o.key) && o.stopPropagation();
+      }
+    }, k(r), S, {
+      "data-rootownerid": R
+    }]
+  });
+  let f = t.type === void 0 || t.type === "context-menu";
+  return (C || t.type === "menubar" && E !== Y) && (f = !0), /* @__PURE__ */ A(V, {
+    context: l,
+    modal: !1,
+    disabled: !x,
+    returnFocus: i === void 0 ? f : i,
+    initialFocus: t.type !== "menu",
+    restoreFocus: !0,
+    externalTree: t.type !== "menubar" ? s : void 0,
+    previousFocusableElement: T,
+    nextFocusableElement: t.type === void 0 ? e.context.triggerFocusTargetRef : void 0,
+    beforeContentFocusGuardRef: t.type === void 0 ? e.context.beforeContentFocusGuardRef : void 0,
+    children: P
+  });
+});
+process.env.NODE_ENV !== "production" && (z.displayName = "MenuPopup");
 export {
-  s as warn
+  z as MenuPopup
 };