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

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

@@ -1,6 +1,265 @@
-function t(n, o) {
-  return typeof n == "function" ? n(o) : n;
-}
+import * as r from "react";
+import * as K from "react-dom";
+import { isTabbable as Ae } from "./als-react-ts-ui358.js";
+import { useStableCallback as U } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as Y } from "./als-react-ts-ui267.js";
+import { useTimeout as Fe } from "./als-react-ts-ui297.js";
+import { useAnimationFrame as V } from "./als-react-ts-ui346.js";
+import { useValueAsRef as De } from "./als-react-ts-ui318.js";
+import { useNavigationMenuItemContext as Se } from "./als-react-ts-ui517.js";
+import { useNavigationMenuRootContext as He, useNavigationMenuTreeContext as ke } from "./als-react-ts-ui513.js";
+import { createChangeEventDetails as C } from "./als-react-ts-ui229.js";
+import { ownerVisuallyHidden as Ve, PATIENT_CLICK_THRESHOLD as ze } from "./als-react-ts-ui243.js";
+import { FocusGuard as Z } from "./als-react-ts-ui360.js";
+import { pressableTriggerOpenStateMapping as _e } from "./als-react-ts-ui227.js";
+import { isOutsideMenuEvent as We } from "./als-react-ts-ui518.js";
+import { useAnimationsFinished as Be } from "./als-react-ts-ui319.js";
+import { NavigationMenuPopupCssVars as c } from "./als-react-ts-ui519.js";
+import { NavigationMenuPositionerCssVars as M } from "./als-react-ts-ui520.js";
+import { CompositeItem as $e } from "./als-react-ts-ui487.js";
+import { getCssDimensions as J } from "./als-react-ts-ui424.js";
+import { NAVIGATION_MENU_TRIGGER_IDENTIFIER as Le } from "./als-react-ts-ui515.js";
+import { useNavigationMenuDismissContext as Ge } from "./als-react-ts-ui516.js";
+import { jsxs as Q, jsx as I } from "react/jsx-runtime";
+import { useFloatingTree as qe } from "./als-react-ts-ui364.js";
+import { useFloatingRootContext as je } from "./als-react-ts-ui372.js";
+import { useHover as Ke } from "./als-react-ts-ui378.js";
+import { safePolygon as Ue } from "./als-react-ts-ui383.js";
+import { useClick as Ye } from "./als-react-ts-ui245.js";
+import { useInteractions as Ze } from "./als-react-ts-ui246.js";
+import { useButton as Je } from "./als-react-ts-ui230.js";
+import { EMPTY_ARRAY as Qe } from "./als-react-ts-ui304.js";
+import { isOutsideEvent as X, getPreviousTabbable as Xe, getNextTabbable as et } from "./als-react-ts-ui366.js";
+import { contains as tt } from "./als-react-ts-ui312.js";
+import { focusOut as ee, triggerHover as te, triggerPress as ot, listNavigation as rt } from "./als-react-ts-ui231.js";
+import { stopEvent as nt } from "./als-react-ts-ui280.js";
+const oe = {
+  width: 0,
+  height: 0
+}, it = /* @__PURE__ */ r.forwardRef(function(re, ne) {
+  const {
+    className: ie,
+    render: se,
+    nativeButton: ue = !0,
+    disabled: ae,
+    ...ce
+  } = re, {
+    value: v,
+    setValue: f,
+    mounted: b,
+    open: u,
+    positionerElement: s,
+    setActivationDirection: z,
+    setFloatingRootContext: _,
+    popupElement: t,
+    viewportElement: w,
+    rootRef: W,
+    beforeOutsideRef: O,
+    afterOutsideRef: fe,
+    afterInsideRef: x,
+    beforeInsideRef: pe,
+    prevTriggerElementRef: N,
+    delay: le,
+    closeDelay: me,
+    orientation: y,
+    setViewportInert: ge,
+    nested: de
+  } = He(), {
+    value: g
+  } = Se(), he = ke(), ve = qe(), be = Ge(), E = Fe(), A = V(), F = V(), D = V(), [a, ye] = r.useState(null), [Ee, B] = r.useState(!0), [S, $] = r.useState(""), R = r.useRef(!1), p = r.useRef(oe), T = r.useRef(null), n = u && v === g, L = De(n), G = s ? !0 : !v, Re = Be(t);
+  r.useEffect(() => {
+    T.current?.abort();
+  }, [n]);
+  function Te() {
+    t && (t.style.setProperty(c.popupWidth, "auto"), t.style.setProperty(c.popupHeight, "auto"));
+  }
+  const l = U((e, o) => {
+    if (!t || !s)
+      return;
+    t.style.removeProperty(c.popupWidth), t.style.removeProperty(c.popupHeight), s.style.removeProperty(M.positionerWidth), s.style.removeProperty(M.positionerHeight);
+    const {
+      width: i,
+      height: m
+    } = J(t), h = i || p.current.width, k = m || p.current.height;
+    (o === 0 || e === 0) && (e = h, o = k), t.style.setProperty(c.popupWidth, `${e}px`), t.style.setProperty(c.popupHeight, `${o}px`), s.style.setProperty(M.positionerWidth, `${h}px`), s.style.setProperty(M.positionerHeight, `${k}px`), F.request(() => {
+      t.style.setProperty(c.popupWidth, `${h}px`), t.style.setProperty(c.popupHeight, `${k}px`), D.request(() => {
+        T.current = new AbortController(), Re(Te, T.current.signal);
+      });
+    });
+  });
+  r.useEffect(() => {
+    u || (E.clear(), F.cancel(), D.cancel());
+  }, [E, u, F, D]), r.useEffect(() => {
+    b || (p.current = oe);
+  }, [b]), r.useEffect(() => {
+    if (!t || typeof ResizeObserver != "function")
+      return;
+    const e = new ResizeObserver(() => {
+      p.current = {
+        width: t.offsetWidth,
+        height: t.offsetHeight
+      };
+    });
+    return e.observe(t), () => {
+      e.disconnect();
+    };
+  }, [t]), r.useEffect(() => {
+    if (!t || !n || typeof MutationObserver != "function")
+      return;
+    const e = new MutationObserver(() => {
+      T.current?.abort(), l(p.current.width, p.current.height);
+    });
+    return e.observe(t, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), () => {
+      e.disconnect();
+    };
+  }, [t, s, n, l]), r.useEffect(() => (n && u && t && R.current && (R.current = !1, A.request(() => {
+    O.current?.focus();
+  })), () => {
+    A.cancel();
+  }), [O, A, l, n, u, t]), Y(() => {
+    L.current && u && t && l(0, 0);
+  }, [L, u, t, l]);
+  function Pe(e, o) {
+    const i = o.reason === te;
+    if (!G || S === "touch" && i || !e && v !== g)
+      return;
+    function m() {
+      i && (B(!0), E.clear(), E.start(ze, () => {
+        B(!1);
+      })), e ? f(g, o) : (f(null, o), $(""));
+    }
+    i ? K.flushSync(m) : m();
+  }
+  const d = je({
+    open: u,
+    onOpenChange: Pe,
+    elements: {
+      reference: a,
+      floating: s || w
+    }
+  }), Ce = Ke(d, {
+    move: !1,
+    handleClose: Ue({
+      blockPointerEvents: S !== "touch"
+    }),
+    restMs: b && s ? 0 : le,
+    delay: {
+      close: me
+    }
+  }), Me = Ye(d, {
+    enabled: G,
+    stickIfOpen: Ee,
+    toggle: n
+  });
+  Y(() => {
+    n && (_(d), N.current = a);
+  }, [n, d, _, N, a]);
+  const {
+    getReferenceProps: Ie
+  } = Ze([Ce, Me]);
+  function q(e) {
+    K.flushSync(() => {
+      const o = N.current?.getBoundingClientRect();
+      if (b && o && a) {
+        const i = a.getBoundingClientRect(), m = i.left > o.left, h = i.top > o.top;
+        y === "horizontal" && i.left !== o.left ? z(m ? "right" : "left") : y === "vertical" && i.top !== o.top && z(h ? "down" : "up");
+      }
+      e.type !== "click" && (d.context.dataRef.current.openEvent = void 0), !(S === "touch" && e.type !== "click") && v != null && f(g, C(e.type === "mouseenter" ? te : ot, e.nativeEvent));
+    });
+  }
+  const H = U((e) => {
+    if (!t || !s) {
+      q(e);
+      return;
+    }
+    const {
+      width: o,
+      height: i
+    } = J(t);
+    q(e), l(o, i);
+  }), we = r.useMemo(() => ({
+    open: n
+  }), [n]);
+  function j(e) {
+    $(e.pointerType);
+  }
+  const Oe = {
+    tabIndex: 0,
+    onMouseEnter: H,
+    onClick: H,
+    onPointerEnter: j,
+    onPointerDown: j,
+    "aria-expanded": n,
+    "aria-controls": n ? t?.id : void 0,
+    [Le]: "",
+    onFocus() {
+      n && ge(!1);
+    },
+    onMouseMove() {
+      R.current = !1;
+    },
+    onKeyDown(e) {
+      if (R.current = !0, de)
+        return;
+      const o = y === "horizontal" && e.key === "ArrowDown", i = y === "vertical" && e.key === "ArrowRight";
+      (o || i) && (f(g, C(rt, e.nativeEvent)), H(e), nt(e));
+    },
+    onBlur(e) {
+      s && t && We({
+        currentTarget: e.currentTarget,
+        relatedTarget: e.relatedTarget
+      }, {
+        popupElement: t,
+        rootRef: W,
+        tree: ve,
+        nodeId: he
+      }) && f(null, C(ee, e.nativeEvent));
+    }
+  }, {
+    getButtonProps: xe,
+    buttonRef: Ne
+  } = Je({
+    disabled: ae,
+    focusableWhenDisabled: !0,
+    native: ue
+  }), P = s || w;
+  return /* @__PURE__ */ Q(r.Fragment, {
+    children: [/* @__PURE__ */ I($e, {
+      tag: "button",
+      render: se,
+      className: ie,
+      state: we,
+      stateAttributesMapping: _e,
+      refs: [ne, ye, Ne],
+      props: [Ie, be?.reference || Qe, Oe, ce, xe]
+    }), n && /* @__PURE__ */ Q(r.Fragment, {
+      children: [/* @__PURE__ */ I(Z, {
+        ref: O,
+        onFocus: (e) => {
+          P && X(e, P) ? pe.current?.focus() : Xe(a)?.focus();
+        }
+      }), /* @__PURE__ */ I("span", {
+        "aria-owns": w?.id,
+        style: Ve
+      }), /* @__PURE__ */ I(Z, {
+        ref: fe,
+        onFocus: (e) => {
+          if (P && X(e, P))
+            (x.current && Ae(x.current) ? x.current : a)?.focus();
+          else {
+            const o = et(a);
+            o?.focus(), tt(W.current, o) || f(null, C(ee, e.nativeEvent));
+          }
+        }
+      })]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (it.displayName = "NavigationMenuTrigger");
 export {
-  t as resolveClassName
+  it as NavigationMenuTrigger
 };

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

@@ -1,6 +1,32 @@
-function e(n, o) {
-  return typeof n == "function" ? n(o) : n;
-}
+import * as n from "react";
+import { useRenderElement as p } from "./als-react-ts-ui226.js";
+import { useNavigationMenuRootContext as u } from "./als-react-ts-ui513.js";
+import { triggerOpenStateMapping as c } from "./als-react-ts-ui227.js";
+import { useNavigationMenuItemContext as f } from "./als-react-ts-ui517.js";
+const l = /* @__PURE__ */ n.forwardRef(function(e, o) {
+  const {
+    className: v,
+    render: N,
+    ...i
+  } = e, {
+    value: a
+  } = f(), {
+    open: r,
+    value: s
+  } = u(), t = r && s === a, m = n.useMemo(() => ({
+    open: t
+  }), [t]);
+  return p("span", e, {
+    state: m,
+    ref: o,
+    props: [{
+      "aria-hidden": !0,
+      children: "▼"
+    }, i],
+    stateAttributesMapping: c
+  });
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "NavigationMenuIcon");
 export {
-  e as resolveStyle
+  l as NavigationMenuIcon
 };

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

@@ -1,8 +1,85 @@
-function e() {
-}
-const t = Object.freeze([]), c = Object.freeze({});
+import * as o from "react";
+import * as P from "react-dom";
+import { inertValue as w } from "./als-react-ts-ui239.js";
+import { useNavigationMenuRootContext as A, useNavigationMenuTreeContext as F } from "./als-react-ts-ui513.js";
+import { useNavigationMenuItemContext as O } from "./als-react-ts-ui517.js";
+import { useTransitionStatus as V } from "./als-react-ts-ui342.js";
+import { useOpenChangeComplete as y } from "./als-react-ts-ui236.js";
+import { transitionStatusMapping as j } from "./als-react-ts-ui228.js";
+import { CompositeRoot as k } from "./als-react-ts-ui448.js";
+import { popupStateMapping as B } from "./als-react-ts-ui227.js";
+import { jsx as l } from "react/jsx-runtime";
+import { FloatingNode as _ } from "./als-react-ts-ui364.js";
+import { contains as q, getTarget as z } from "./als-react-ts-ui312.js";
+const G = {
+  ...B,
+  ...j,
+  activationDirection(n) {
+    return n ? {
+      "data-activation-direction": n
+    } : null;
+  }
+}, H = /* @__PURE__ */ o.forwardRef(function(f, d) {
+  const {
+    className: g,
+    render: C,
+    ...v
+  } = f, {
+    mounted: M,
+    viewportElement: N,
+    value: R,
+    activationDirection: a,
+    currentContentRef: i,
+    viewportTargetElement: b
+  } = A(), {
+    value: h
+  } = O(), T = F(), e = M && R === h, s = o.useRef(null), [x, u] = o.useState(!1), {
+    mounted: p,
+    setMounted: E,
+    transitionStatus: c
+  } = V(e);
+  y({
+    ref: s,
+    open: e,
+    onComplete() {
+      e || E(!1);
+    }
+  });
+  const S = o.useMemo(() => ({
+    open: e,
+    transitionStatus: c,
+    activationDirection: a
+  }), [e, c, a]), D = o.useCallback((t) => {
+    t && (i.current = t);
+  }, [i]), m = {
+    onFocus(t) {
+      z(t.nativeEvent)?.hasAttribute("data-base-ui-focus-guard") || u(!0);
+    },
+    onBlur(t) {
+      q(t.currentTarget, t.relatedTarget) || u(!1);
+    }
+  }, I = !e && p ? {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0
+    },
+    inert: w(!x),
+    ...m
+  } : m, r = b || N;
+  return !r || !(r !== null && p) ? null : /* @__PURE__ */ P.createPortal(/* @__PURE__ */ l(_, {
+    id: T,
+    children: /* @__PURE__ */ l(k, {
+      render: C,
+      className: g,
+      state: S,
+      refs: [d, s, D],
+      props: [I, v],
+      stateAttributesMapping: G
+    })
+  }), r);
+});
+process.env.NODE_ENV !== "production" && (H.displayName = "NavigationMenuContent");
 export {
-  t as EMPTY_ARRAY,
-  c as EMPTY_OBJECT,
-  e as NOOP
+  H as NavigationMenuContent
 };

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

@@ -1,82 +1,53 @@
-import { mergeObjects as a } from "./als-react-ts-ui208.js";
-const i = {};
-function g(t, n, e, r, c) {
-  let f = {
-    ...o(t, i)
-  };
-  return n && (f = u(f, n)), e && (f = u(f, e)), r && (f = u(f, r)), c && (f = u(f, c)), f;
-}
-function h(t) {
-  if (t.length === 0)
-    return i;
-  if (t.length === 1)
-    return o(t[0], i);
-  let n = {
-    ...o(t[0], i)
-  };
-  for (let e = 1; e < t.length; e += 1)
-    n = u(n, t[e]);
-  return n;
-}
-function u(t, n) {
-  return l(n) ? n(t) : s(t, n);
-}
-function s(t, n) {
-  if (!n)
-    return t;
-  for (const e in n) {
-    const r = n[e];
-    switch (e) {
-      case "style": {
-        t[e] = a(t.style, r);
-        break;
+import * as r from "react";
+import { useNavigationMenuRootContext as N, useNavigationMenuTreeContext as E } from "./als-react-ts-ui513.js";
+import { isOutsideMenuEvent as M } from "./als-react-ts-ui518.js";
+import { CompositeItem as k } from "./als-react-ts-ui487.js";
+import { createChangeEventDetails as a } from "./als-react-ts-ui229.js";
+import { jsx as C } from "react/jsx-runtime";
+import { useFloatingTree as T } from "./als-react-ts-ui364.js";
+import { focusOut as x, linkPress as O } from "./als-react-ts-ui231.js";
+const P = /* @__PURE__ */ r.forwardRef(function(i, s) {
+  const {
+    className: u,
+    render: m,
+    active: t = !1,
+    closeOnClick: l = !1,
+    ...f
+  } = i, {
+    setValue: o,
+    popupElement: n,
+    positionerElement: p,
+    rootRef: c
+  } = N(), d = E(), g = T(), v = r.useMemo(() => ({
+    active: t
+  }), [t]);
+  return /* @__PURE__ */ C(k, {
+    tag: "a",
+    render: m,
+    className: u,
+    state: v,
+    refs: [s],
+    props: [{
+      "aria-current": t ? "page" : void 0,
+      tabIndex: void 0,
+      onClick(e) {
+        l && o(null, a(O, e.nativeEvent));
+      },
+      onBlur(e) {
+        p && n && M({
+          currentTarget: e.currentTarget,
+          relatedTarget: e.relatedTarget
+        }, {
+          popupElement: n,
+          rootRef: c,
+          tree: g,
+          nodeId: d
+        }) && o(null, a(x, e.nativeEvent));
       }
-      case "className": {
-        t[e] = I(t.className, r);
-        break;
-      }
-      default:
-        b(e, r) ? t[e] = E(t[e], r) : t[e] = r;
-    }
-  }
-  return t;
-}
-function b(t, n) {
-  const e = t.charCodeAt(0), r = t.charCodeAt(1), c = t.charCodeAt(2);
-  return e === 111 && r === 110 && c >= 65 && c <= 90 && (typeof n == "function" || typeof n > "u");
-}
-function l(t) {
-  return typeof t == "function";
-}
-function o(t, n) {
-  return l(t) ? t(n) : t ?? i;
-}
-function E(t, n) {
-  return n ? t ? (e) => {
-    if (v(e)) {
-      const c = e;
-      y(c);
-      const f = n(c);
-      return c.baseUIHandlerPrevented || t?.(c), f;
-    }
-    const r = n(e);
-    return t?.(e), r;
-  } : n : t;
-}
-function y(t) {
-  return t.preventBaseUIHandler = () => {
-    t.baseUIHandlerPrevented = !0;
-  }, t;
-}
-function I(t, n) {
-  return n ? t ? n + " " + t : n : t;
-}
-function v(t) {
-  return t != null && typeof t == "object" && "nativeEvent" in t;
-}
+    }, f]
+  });
+});
+process.env.NODE_ENV !== "production" && (P.displayName = "NavigationMenuLink");
 export {
-  y as makeEventPreventable,
-  I as mergeClassNames,
-  g as mergeProps,
-  h as mergePropsN
+  P as NavigationMenuLink
 };

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

@@ -1,6 +1,119 @@
-let e = /* @__PURE__ */ (function(d) {
-  return d.index = "data-index", d.disabled = "data-disabled", d.open = "data-open", d;
-})({});
+import * as n from "react";
+import * as z from "react-dom";
+import { useTimeout as k } from "./als-react-ts-ui297.js";
+import { getEmptyRootContext as H } from "./als-react-ts-ui385.js";
+import { useRenderElement as V } from "./als-react-ts-ui226.js";
+import { useNavigationMenuRootContext as W, useNavigationMenuTreeContext as j } from "./als-react-ts-ui513.js";
+import { useNavigationMenuPortalContext as B } from "./als-react-ts-ui521.js";
+import { useAnchorPositioning as U } from "./als-react-ts-ui391.js";
+import { NavigationMenuPositionerContext as X } from "./als-react-ts-ui522.js";
+import { popupStateMapping as Y } from "./als-react-ts-ui227.js";
+import { POPUP_COLLISION_AVOIDANCE as q, DROPDOWN_COLLISION_AVOIDANCE as G } from "./als-react-ts-ui243.js";
+import { adaptiveOrigin as J } from "./als-react-ts-ui392.js";
+import { getDisabledMountTransitionStyles as K } from "./als-react-ts-ui393.js";
+import { jsx as Q } from "react/jsx-runtime";
+import { getWindow as Z } from "./als-react-ts-ui320.js";
+import { isOutsideEvent as $, enableFocusInside as ee, disableFocusInside as te } from "./als-react-ts-ui366.js";
+const oe = H(), ne = /* @__PURE__ */ n.forwardRef(function(a, m) {
+  const {
+    open: i,
+    mounted: r,
+    positionerElement: e,
+    setPositionerElement: l,
+    floatingRootContext: u,
+    nested: p,
+    transitionStatus: g
+  } = W(), {
+    className: se,
+    render: re,
+    anchor: v,
+    positionMethod: E = "absolute",
+    side: O = "bottom",
+    align: N = "center",
+    sideOffset: M = 0,
+    alignOffset: P = 0,
+    collisionBoundary: R = "clipping-ancestors",
+    collisionPadding: h = 5,
+    collisionAvoidance: y = p ? q : G,
+    arrowPadding: C = 5,
+    sticky: S = !1,
+    disableAnchorTracking: I = !1,
+    ...L
+  } = a, T = B(), x = j(), c = k(), [d, f] = n.useState(!1), A = n.useRef(null), b = n.useRef(null);
+  n.useEffect(() => {
+    if (!e)
+      return;
+    function t(s) {
+      e && $(s) && (s.type === "focusin" ? ee : te)(e);
+    }
+    return e.addEventListener("focusin", t, !0), e.addEventListener("focusout", t, !0), () => {
+      e.removeEventListener("focusin", t, !0), e.removeEventListener("focusout", t, !0);
+    };
+  }, [e]);
+  const D = (u || oe).useState("domReferenceElement"), o = U({
+    anchor: v ?? D ?? b,
+    positionMethod: E,
+    mounted: r,
+    side: O,
+    sideOffset: M,
+    align: N,
+    alignOffset: P,
+    arrowPadding: C,
+    collisionBoundary: R,
+    collisionPadding: h,
+    sticky: S,
+    disableAnchorTracking: I,
+    keepMounted: T,
+    floatingRootContext: u,
+    collisionAvoidance: y,
+    nodeId: x,
+    // Allows the menu to remain anchored without wobbling while its size
+    // and position transition simultaneously when side=top or side=left.
+    adaptiveOrigin: J
+  }), _ = n.useMemo(() => {
+    const t = {};
+    return i || (t.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !r,
+      style: {
+        ...o.positionerStyles,
+        ...t
+      }
+    };
+  }, [i, r, o.positionerStyles]), F = n.useMemo(() => ({
+    open: i,
+    side: o.side,
+    align: o.align,
+    anchorHidden: o.anchorHidden,
+    instant: d
+  }), [i, o.side, o.align, o.anchorHidden, d]);
+  n.useEffect(() => {
+    if (!i)
+      return;
+    function t() {
+      z.flushSync(() => {
+        f(!0);
+      }), c.start(100, () => {
+        f(!1);
+      });
+    }
+    const s = Z(e);
+    return s.addEventListener("resize", t), () => {
+      s.removeEventListener("resize", t);
+    };
+  }, [i, c, e]);
+  const w = V("div", a, {
+    state: F,
+    ref: [m, l, A],
+    props: [_, K(g), L],
+    stateAttributesMapping: Y
+  });
+  return /* @__PURE__ */ Q(X.Provider, {
+    value: o,
+    children: w
+  });
+});
+process.env.NODE_ENV !== "production" && (ne.displayName = "NavigationMenuPositioner");
 export {
-  e as AccordionItemDataAttributes
+  ne as NavigationMenuPositioner
 };