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

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

@@ -1,82 +1,85 @@
-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;
-      }
-      case "className": {
-        t[e] = I(t.className, r);
-        break;
-      }
-      default:
-        b(e, r) ? t[e] = E(t[e], r) : t[e] = r;
-    }
+import * as o from "react";
+import * as P from "react-dom";
+import { inertValue as w } from "./als-react-ts-ui256.js";
+import { useNavigationMenuRootContext as A, useNavigationMenuTreeContext as F } from "./als-react-ts-ui521.js";
+import { useNavigationMenuItemContext as O } from "./als-react-ts-ui525.js";
+import { useTransitionStatus as V } from "./als-react-ts-ui344.js";
+import { useOpenChangeComplete as y } from "./als-react-ts-ui253.js";
+import { transitionStatusMapping as j } from "./als-react-ts-ui245.js";
+import { CompositeRoot as k } from "./als-react-ts-ui484.js";
+import { popupStateMapping as B } from "./als-react-ts-ui244.js";
+import { jsx as l } from "react/jsx-runtime";
+import { FloatingNode as _ } from "./als-react-ts-ui356.js";
+import { contains as q, getTarget as z } from "./als-react-ts-ui331.js";
+const G = {
+  ...B,
+  ...j,
+  activationDirection(n) {
+    return n ? {
+      "data-activation-direction": n
+    } : null;
   }
-  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;
+}, 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);
     }
-    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;
-}
+  }, 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 {
-  y as makeEventPreventable,
-  I as mergeClassNames,
-  g as mergeProps,
-  h as mergePropsN
+  H as NavigationMenuContent
 };

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

@@ -1,6 +1,53 @@
-let e = /* @__PURE__ */ (function(d) {
-  return d.index = "data-index", d.disabled = "data-disabled", d.open = "data-open", d;
-})({});
+import * as r from "react";
+import { useNavigationMenuRootContext as N, useNavigationMenuTreeContext as E } from "./als-react-ts-ui521.js";
+import { isOutsideMenuEvent as M } from "./als-react-ts-ui526.js";
+import { CompositeItem as k } from "./als-react-ts-ui488.js";
+import { createChangeEventDetails as a } from "./als-react-ts-ui246.js";
+import { jsx as C } from "react/jsx-runtime";
+import { useFloatingTree as T } from "./als-react-ts-ui356.js";
+import { focusOut as x, linkPress as O } from "./als-react-ts-ui248.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));
+      }
+    }, f]
+  });
+});
+process.env.NODE_ENV !== "production" && (P.displayName = "NavigationMenuLink");
 export {
-  e as AccordionItemDataAttributes
+  P as NavigationMenuLink
 };

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

@@ -1,23 +1,119 @@
-import * as e from "react";
-const t = /* @__PURE__ */ e.createContext({
-  register: () => {
-  },
-  unregister: () => {
-  },
-  subscribeMapChange: () => () => {
-  },
-  elementsRef: {
-    current: []
-  },
-  nextIndexRef: {
-    current: 0
-  }
+import * as n from "react";
+import * as z from "react-dom";
+import { useTimeout as k } from "./als-react-ts-ui195.js";
+import { getEmptyRootContext as H } from "./als-react-ts-ui395.js";
+import { useRenderElement as V } from "./als-react-ts-ui189.js";
+import { useNavigationMenuRootContext as W, useNavigationMenuTreeContext as j } from "./als-react-ts-ui521.js";
+import { useNavigationMenuPortalContext as B } from "./als-react-ts-ui529.js";
+import { useAnchorPositioning as U } from "./als-react-ts-ui364.js";
+import { NavigationMenuPositionerContext as X } from "./als-react-ts-ui530.js";
+import { popupStateMapping as Y } from "./als-react-ts-ui244.js";
+import { POPUP_COLLISION_AVOIDANCE as q, DROPDOWN_COLLISION_AVOIDANCE as G } from "./als-react-ts-ui260.js";
+import { adaptiveOrigin as J } from "./als-react-ts-ui365.js";
+import { getDisabledMountTransitionStyles as K } from "./als-react-ts-ui366.js";
+import { jsx as Q } from "react/jsx-runtime";
+import { getWindow as Z } from "./als-react-ts-ui339.js";
+import { isOutsideEvent as $, enableFocusInside as ee, disableFocusInside as te } from "./als-react-ts-ui361.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" && (t.displayName = "CompositeListContext");
-function n() {
-  return e.useContext(t);
-}
+process.env.NODE_ENV !== "production" && (ne.displayName = "NavigationMenuPositioner");
 export {
-  t as CompositeListContext,
-  n as useCompositeListContext
+  ne as NavigationMenuPositioner
 };

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

@@ -1,20 +1,48 @@
-import * as n from "react";
-import { SafeReact as f } from "./als-react-ts-ui282.js";
-let o = 0;
-function l(u, t = "mui") {
-  const [e, s] = n.useState(u), c = u || e;
-  return n.useEffect(() => {
-    e == null && (o += 1, s(`${t}-${o}`));
-  }, [e, t]), c;
-}
-const a = f.useId;
-function I(u, t) {
-  if (a !== void 0) {
-    const e = a();
-    return u ?? (t ? `${t}-${e}` : e);
-  }
-  return l(u, t);
-}
+import * as r from "react";
+import { useRenderElement as f } from "./als-react-ts-ui189.js";
+import { useNavigationMenuRootContext as g } from "./als-react-ts-ui521.js";
+import { transitionStatusMapping as M } from "./als-react-ts-ui245.js";
+import { useBaseUiId as N } from "./als-react-ts-ui249.js";
+import { useNavigationMenuPositionerContext as v } from "./als-react-ts-ui530.js";
+import { useDirection as P } from "./als-react-ts-ui285.js";
+import { popupStateMapping as h } from "./als-react-ts-ui244.js";
+const b = {
+  ...h,
+  ...M
+}, x = /* @__PURE__ */ r.forwardRef(function(n, a) {
+  const {
+    className: R,
+    render: S,
+    id: p,
+    ...d
+  } = n, {
+    open: o,
+    transitionStatus: s,
+    setPopupElement: m
+  } = g(), e = v(), l = P(), u = N(p), c = r.useMemo(() => ({
+    open: o,
+    transitionStatus: s,
+    side: e.side,
+    align: e.align,
+    anchorHidden: e.anchorHidden
+  }), [o, s, e.side, e.align, e.anchorHidden]);
+  let t = e.side === "top", i = e.side === "left";
+  return l === "rtl" ? (t = t || e.side === "inline-end", i = i || e.side === "inline-end") : (t = t || e.side === "inline-start", i = i || e.side === "inline-start"), f("nav", n, {
+    state: c,
+    ref: [a, m],
+    props: [{
+      id: u,
+      tabIndex: -1,
+      style: t ? {
+        position: "absolute",
+        [e.side === "top" ? "bottom" : "top"]: "0",
+        [i ? "right" : "left"]: "0"
+      } : {}
+    }, d],
+    stateAttributesMapping: b
+  });
+});
+process.env.NODE_ENV !== "production" && (x.displayName = "NavigationMenuPopup");
 export {
-  I as useId
+  x as NavigationMenuPopup
 };

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

@@ -1,28 +1,84 @@
-import * as l from "react-dom";
-import { useAnimationFrame as m } from "./als-react-ts-ui223.js";
-import { useStableCallback as u } from "./als-react-ts-ui160.js";
-import { resolveRef as c } from "./als-react-ts-ui283.js";
-function S(s, f = !1, a = !0) {
-  const i = m();
-  return u((r, t = null) => {
-    i.cancel();
-    const e = c(s);
-    e != null && (typeof e.getAnimations != "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED ? r() : i.request(() => {
-      function o() {
-        e && Promise.all(e.getAnimations().map((n) => n.finished)).then(() => {
-          t != null && t.aborted || l.flushSync(r);
-        }).catch(() => {
-          if (a) {
-            if (t != null && t.aborted)
-              return;
-            l.flushSync(r);
-          } else e.getAnimations().length > 0 && e.getAnimations().some((n) => n.pending || n.playState !== "finished") && o();
-        });
+import * as w from "react";
+import { useIsoLayoutEffect as I } from "./als-react-ts-ui193.js";
+import { useId as M } from "./als-react-ts-ui325.js";
+import { inertValue as P } from "./als-react-ts-ui256.js";
+import { useRenderElement as F } from "./als-react-ts-ui189.js";
+import { useNavigationMenuRootContext as x } from "./als-react-ts-ui521.js";
+import { FocusGuard as v } from "./als-react-ts-ui358.js";
+import { getEmptyRootContext as y } from "./als-react-ts-ui395.js";
+import { useNavigationMenuPositionerContext as b } from "./als-react-ts-ui530.js";
+import { jsx as o, jsxs as B } from "react/jsx-runtime";
+import { contains as _ } from "./als-react-ts-ui331.js";
+import { isOutsideEvent as T, getNextTabbable as j, getPreviousTabbable as G } from "./als-react-ts-ui361.js";
+const D = y();
+function N({
+  children: s
+}) {
+  const {
+    beforeInsideRef: r,
+    beforeOutsideRef: f,
+    afterInsideRef: p,
+    afterOutsideRef: d,
+    positionerElement: n,
+    viewportElement: a,
+    floatingRootContext: u
+  } = x(), c = !!b(!0), e = n || a;
+  return !u && !c ? s : /* @__PURE__ */ B(w.Fragment, {
+    children: [/* @__PURE__ */ o(v, {
+      ref: r,
+      onFocus: (t) => {
+        e && T(t, e) ? j(e)?.focus() : f.current?.focus();
       }
-      f ? i.request(o) : o();
-    }));
+    }), s, /* @__PURE__ */ o(v, {
+      ref: p,
+      onFocus: (t) => {
+        e && T(t, e) ? G(e)?.focus() : d.current?.focus();
+      }
+    })]
   });
 }
+const L = /* @__PURE__ */ w.forwardRef(function(r, f) {
+  const {
+    className: p,
+    render: d,
+    children: n,
+    id: a,
+    ...u
+  } = r, c = M(a), {
+    setViewportElement: e,
+    setViewportTargetElement: t,
+    floatingRootContext: V,
+    prevTriggerElementRef: g,
+    viewportInert: h,
+    setViewportInert: O
+  } = x(), m = !!b(!0), i = (V || D).useState("domReferenceElement");
+  I(() => {
+    i && (g.current = i);
+  }, [i, g]);
+  const E = F("div", r, {
+    ref: [f, e],
+    props: [{
+      id: c,
+      onBlur(R) {
+        const l = R.relatedTarget, C = R.currentTarget;
+        l && !_(C, l) && l !== i && O(!0);
+      },
+      ...!m && h && {
+        inert: P(!0)
+      },
+      children: m ? n : /* @__PURE__ */ o(N, {
+        children: /* @__PURE__ */ o("div", {
+          ref: t,
+          children: n
+        })
+      })
+    }, u]
+  });
+  return m ? /* @__PURE__ */ o(N, {
+    children: E
+  }) : E;
+});
+process.env.NODE_ENV !== "production" && (L.displayName = "NavigationMenuViewport");
 export {
-  S as useAnimationsFinished
+  L as NavigationMenuViewport
 };

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

@@ -1,45 +1,38 @@
-import * as c from "react";
-import * as d from "react-dom";
-import { useIsoLayoutEffect as a } from "./als-react-ts-ui161.js";
-import { AnimationFrame as u } from "./als-react-ts-ui223.js";
-function q(t, s = !1, f = !1) {
-  const [r, n] = c.useState(t && s ? "idle" : void 0), [i, m] = c.useState(t);
-  return t && !i && (m(!0), n("starting")), !t && i && r !== "ending" && !f && n("ending"), !t && !i && r === "ending" && n(void 0), a(() => {
-    if (!t && i && r !== "ending" && f) {
-      const e = u.request(() => {
-        n("ending");
-      });
-      return () => {
-        u.cancel(e);
-      };
-    }
-  }, [t, i, r, f]), a(() => {
-    if (!t || s)
-      return;
-    const e = u.request(() => {
-      d.flushSync(() => {
-        n(void 0);
-      });
-    });
-    return () => {
-      u.cancel(e);
-    };
-  }, [s, t]), a(() => {
-    if (!t || !s)
-      return;
-    t && i && r !== "idle" && n("starting");
-    const e = u.request(() => {
-      n("idle");
-    });
-    return () => {
-      u.cancel(e);
-    };
-  }, [s, t, i, n, r]), c.useMemo(() => ({
-    mounted: i,
-    setMounted: m,
-    transitionStatus: r
-  }), [i, r]);
-}
+import * as i from "react";
+import { useNavigationMenuPositionerContext as c } from "./als-react-ts-ui530.js";
+import { useNavigationMenuRootContext as d } from "./als-react-ts-ui521.js";
+import { popupStateMapping as f } from "./als-react-ts-ui244.js";
+import { useRenderElement as l } from "./als-react-ts-ui189.js";
+const N = /* @__PURE__ */ i.forwardRef(function(e, a) {
+  const {
+    className: M,
+    render: v,
+    ...s
+  } = e, {
+    open: t
+  } = d(), {
+    arrowRef: p,
+    side: o,
+    align: r,
+    arrowUncentered: n,
+    arrowStyles: m
+  } = c(), u = i.useMemo(() => ({
+    open: t,
+    side: o,
+    align: r,
+    uncentered: n
+  }), [t, o, r, n]);
+  return l("div", e, {
+    state: u,
+    ref: [a, p],
+    props: [{
+      style: m,
+      "aria-hidden": !0
+    }, s],
+    stateAttributesMapping: f
+  });
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "NavigationMenuArrow");
 export {
-  q as useTransitionStatus
+  N as NavigationMenuArrow
 };

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

@@ -1,7 +1,39 @@
-import { TransitionStatusDataAttributes as d } from "./als-react-ts-ui189.js";
-let g = (function(n) {
-  return n.open = "data-open", n.closed = "data-closed", n[n.startingStyle = d.startingStyle] = "startingStyle", n[n.endingStyle = d.endingStyle] = "endingStyle", n;
-})({});
+import * as n from "react";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { useNavigationMenuRootContext as m } from "./als-react-ts-ui521.js";
+import { transitionStatusMapping as u } from "./als-react-ts-ui245.js";
+import { popupStateMapping as c } from "./als-react-ts-ui244.js";
+const d = {
+  ...c,
+  ...u
+}, f = /* @__PURE__ */ n.forwardRef(function(e, r) {
+  const {
+    className: M,
+    render: N,
+    ...a
+  } = e, {
+    open: t,
+    mounted: i,
+    transitionStatus: o
+  } = m(), s = n.useMemo(() => ({
+    open: t,
+    transitionStatus: o
+  }), [t, o]);
+  return p("div", e, {
+    state: s,
+    ref: r,
+    props: [{
+      role: "presentation",
+      hidden: !i,
+      style: {
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      }
+    }, a],
+    stateAttributesMapping: d
+  });
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "NavigationMenuBackdrop");
 export {
-  g as CollapsiblePanelDataAttributes
+  f as NavigationMenuBackdrop
 };