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

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

@@ -1,14 +1,144 @@
-function n(e, r) {
-  if (e && !r)
-    return e;
-  if (!e && r)
-    return r;
-  if (e || r)
-    return {
-      ...e,
-      ...r
-    };
+import * as e from "react";
+import { isHTMLElement as Z } from "./als-react-ts-ui339.js";
+import { useControlled as ee } from "./als-react-ts-ui282.js";
+import { useStableCallback as B } from "./als-react-ts-ui192.js";
+import { ownerDocument as H } from "./als-react-ts-ui372.js";
+import { useRenderElement as te } from "./als-react-ts-ui189.js";
+import { NavigationMenuRootContext as ne, useNavigationMenuRootContext as U, NavigationMenuTreeContext as oe } from "./als-react-ts-ui521.js";
+import { useOpenChangeComplete as A } from "./als-react-ts-ui253.js";
+import { useTransitionStatus as re } from "./als-react-ts-ui344.js";
+import { setFixedSize as L } from "./als-react-ts-ui522.js";
+import { jsx as p } from "react/jsx-runtime";
+import { useFloatingParentNodeId as se, FloatingTree as ue, useFloatingNodeId as le } from "./als-react-ts-ui356.js";
+import { activeElement as ie, contains as ae } from "./als-react-ts-ui331.js";
+import { triggerHover as ce, outsidePress as fe, focusOut as de } from "./als-react-ts-ui248.js";
+const me = /* @__PURE__ */ new Set([ce, fe, de]), pe = /* @__PURE__ */ e.forwardRef(function(c, S) {
+  const {
+    defaultValue: w = null,
+    value: M,
+    onValueChange: P,
+    actionsRef: R,
+    delay: v = 50,
+    closeDelay: g = 50,
+    orientation: f = "horizontal",
+    onOpenChangeComplete: b
+  } = c, i = se() != null, [o, C] = ee({
+    controlled: M,
+    default: w,
+    name: "NavigationMenu",
+    state: "value"
+  }), t = o != null, r = e.useRef(void 0), d = e.useRef(null), [s, _] = e.useState(null), [n, $] = e.useState(null), [x, q] = e.useState(null), [E, G] = e.useState(null), [F, h] = e.useState(null), [T, N] = e.useState(void 0), [V, I] = e.useState(!1), m = e.useRef(null), O = e.useRef(null), J = e.useRef(null), K = e.useRef(null), Q = e.useRef(null), W = e.useRef(null), {
+    mounted: y,
+    setMounted: X,
+    transitionStatus: k
+  } = re(t);
+  e.useEffect(() => {
+    I(!1);
+  }, [o]);
+  const D = B((u, l) => {
+    u || (r.current = l.reason, h(null), N(void 0), s && n && (L(n, "popup"), L(s, "positioner"))), u !== o && P?.(u, l), !l.isCanceled && C(u);
+  }), j = B(() => {
+    const u = H(d.current), l = ie(u);
+    !(r.current ? me.has(r.current) : !1) && Z(m.current) && (l === H(n).body || ae(n, l)) && n && (m.current.focus({
+      preventScroll: !0
+    }), m.current = void 0), X(!1), b?.(!1), h(null), N(void 0), O.current = null, r.current = void 0;
+  });
+  A({
+    enabled: !R,
+    open: t,
+    ref: {
+      current: n
+    },
+    onComplete() {
+      t || j();
+    }
+  }), A({
+    enabled: !R,
+    open: t,
+    ref: {
+      current: E
+    },
+    onComplete() {
+      t || j();
+    }
+  });
+  const Y = e.useMemo(() => ({
+    open: t,
+    value: o,
+    setValue: D,
+    mounted: y,
+    transitionStatus: k,
+    positionerElement: s,
+    setPositionerElement: _,
+    popupElement: n,
+    setPopupElement: $,
+    viewportElement: x,
+    setViewportElement: q,
+    viewportTargetElement: E,
+    setViewportTargetElement: G,
+    activationDirection: F,
+    setActivationDirection: h,
+    floatingRootContext: T,
+    setFloatingRootContext: N,
+    currentContentRef: O,
+    nested: i,
+    rootRef: d,
+    beforeInsideRef: J,
+    afterInsideRef: K,
+    beforeOutsideRef: Q,
+    afterOutsideRef: W,
+    prevTriggerElementRef: m,
+    delay: v,
+    closeDelay: g,
+    orientation: f,
+    viewportInert: V,
+    setViewportInert: I
+  }), [t, o, D, y, k, s, n, x, E, F, T, i, v, g, f, V]), z = /* @__PURE__ */ p(ne.Provider, {
+    value: Y,
+    children: /* @__PURE__ */ p(Re, {
+      componentProps: c,
+      forwardedRef: S,
+      children: c.children
+    })
+  });
+  return i ? z : /* @__PURE__ */ p(ue, {
+    children: z
+  });
+});
+process.env.NODE_ENV !== "production" && (pe.displayName = "NavigationMenuRoot");
+function Re(a) {
+  const {
+    className: c,
+    render: S,
+    defaultValue: w,
+    value: M,
+    onValueChange: P,
+    actionsRef: R,
+    delay: v,
+    closeDelay: g,
+    orientation: f,
+    onOpenChangeComplete: b,
+    ...i
+  } = a.componentProps, o = le(), {
+    rootRef: C,
+    nested: t
+  } = U(), {
+    open: r
+  } = U(), d = e.useMemo(() => ({
+    open: r,
+    nested: t
+  }), [r, t]), s = te(t ? "div" : "nav", a.componentProps, {
+    state: d,
+    ref: [a.forwardedRef, C],
+    props: [{
+      "aria-orientation": f
+    }, i]
+  });
+  return /* @__PURE__ */ p(oe.Provider, {
+    value: o,
+    children: s
+  });
 }
 export {
-  n as mergeObjects
+  pe as NavigationMenuRoot
 };

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

@@ -1,16 +1,62 @@
-function i(r, n) {
-  const o = {};
-  for (const t in r) {
-    const e = r[t];
-    if (n?.hasOwnProperty(t)) {
-      const s = n[t](e);
-      s != null && Object.assign(o, s);
-      continue;
+import * as r from "react";
+import { CompositeRoot as T } from "./als-react-ts-ui484.js";
+import { useNavigationMenuRootContext as y } from "./als-react-ts-ui521.js";
+import { NAVIGATION_MENU_TRIGGER_IDENTIFIER as C } from "./als-react-ts-ui523.js";
+import { NavigationMenuDismissContext as p } from "./als-react-ts-ui524.js";
+import { getEmptyRootContext as h } from "./als-react-ts-ui395.js";
+import { useRenderElement as w } from "./als-react-ts-ui189.js";
+import { jsx as s } from "react/jsx-runtime";
+import { useDismiss as A } from "./als-react-ts-ui330.js";
+import { EMPTY_OBJECT as D } from "./als-react-ts-ui303.js";
+import { getTarget as I } from "./als-react-ts-ui331.js";
+const b = /* @__PURE__ */ r.forwardRef(function(i, a) {
+  const {
+    className: f,
+    render: d,
+    ...g
+  } = i, {
+    orientation: t,
+    open: m,
+    floatingRootContext: l,
+    positionerElement: N,
+    value: E,
+    nested: e
+  } = y(), v = r.useMemo(() => h(), []), M = A(l || v, {
+    enabled: N ? !0 : !E,
+    outsidePressEvent: "intentional",
+    outsidePress(o) {
+      return I(o)?.closest(`[${C}]`) === null;
     }
-    e === !0 ? o[`data-${t.toLowerCase()}`] = "" : e && (o[`data-${t.toLowerCase()}`] = e.toString());
-  }
-  return o;
-}
+  }), n = l ? M : void 0, c = r.useMemo(() => ({
+    open: m
+  }), [m]), R = e ? {} : {
+    onKeyDown(o) {
+      (t === "horizontal" && (o.key === "ArrowLeft" || o.key === "ArrowRight") || t === "vertical" && (o.key === "ArrowUp" || o.key === "ArrowDown")) && o.stopPropagation();
+    }
+  }, u = [n?.floating || D, R, g], x = w("ul", i, {
+    state: c,
+    ref: a,
+    props: u,
+    enabled: e
+  });
+  return e ? /* @__PURE__ */ s(p.Provider, {
+    value: n,
+    children: x
+  }) : /* @__PURE__ */ s(p.Provider, {
+    value: n,
+    children: /* @__PURE__ */ s(T, {
+      render: d,
+      className: f,
+      state: c,
+      refs: [a],
+      props: u,
+      loopFocus: !1,
+      orientation: t,
+      tag: "ul"
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (b.displayName = "NavigationMenuList");
 export {
-  i as getStateAttributesProps
+  b as NavigationMenuList
 };

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

@@ -1,9 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "./als-react-ts-ui77.js";
-function e(t) {
-  return /* @__PURE__ */ o("div", { className: r.root });
-}
+import { ALSNavigationMenuLinkCard as i, ALSNavigationMenuBackdrop as n, ALSNavigationMenuArrow as o, ALSNavigationMenuViewport as a, ALSNavigationMenuPopup as t, ALSNavigationMenuPositioner as e, ALSNavigationMenuPortal as r, ALSNavigationMenuLink as L, ALSNavigationMenuContent as g, ALSNavigationMenuIcon as u, ALSNavigationMenuTrigger as A, ALSNavigationMenuItem as v, ALSNavigationMenuList as M, ALSNavigationMenuRoot as N } from "./als-react-ts-ui77.js";
+const p = {
+  /** Groups all parts of the navigation menu */
+  Root: N,
+  /** Contains a list of navigation menu items */
+  List: M,
+  /** An individual navigation menu item */
+  Item: v,
+  /** Opens the navigation menu popup when hovered or clicked */
+  Trigger: A,
+  /** An icon that indicates the trigger opens a menu */
+  Icon: u,
+  /** A container for the content of the navigation menu item */
+  Content: g,
+  /** A link in the navigation menu */
+  Link: L,
+  /** A portal element that moves the popup to a different part of the DOM */
+  Portal: r,
+  /** Positions the navigation menu against the currently active trigger */
+  Positioner: e,
+  /** A container for the navigation menu contents */
+  Popup: t,
+  /** The clipping viewport of the navigation menu's current content */
+  Viewport: a,
+  /** Displays an element pointing toward the navigation menu's current anchor */
+  Arrow: o,
+  /** A backdrop for the navigation menu popup */
+  Backdrop: n,
+  /** A styled link card for use within navigation menu content */
+  LinkCard: i
+};
 export {
-  e as ALSNavigationMenu,
-  e as default
+  p as ALSNavigationMenu
 };

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

@@ -1,6 +1,26 @@
-function t(n, o) {
-  return typeof n == "function" ? n(o) : n;
-}
+import * as t from "react";
+import { useRenderElement as u } from "./als-react-ts-ui189.js";
+import { NavigationMenuItemContext as l } from "./als-react-ts-ui525.js";
+import { useBaseUiId as c } from "./als-react-ts-ui249.js";
+import { jsx as f } from "react/jsx-runtime";
+const p = /* @__PURE__ */ t.forwardRef(function(e, r) {
+  const {
+    className: d,
+    render: N,
+    value: n,
+    ...a
+  } = e, i = c(), o = n ?? i, m = u("li", e, {
+    ref: r,
+    props: a
+  }), s = t.useMemo(() => ({
+    value: o
+  }), [o]);
+  return /* @__PURE__ */ f(l.Provider, {
+    value: s,
+    children: m
+  });
+});
+process.env.NODE_ENV !== "production" && (p.displayName = "NavigationMenuItem");
 export {
-  t as resolveClassName
+  p as NavigationMenuItem
 };

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

@@ -1,6 +1,265 @@
-function e(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-ui374.js";
+import { useStableCallback as U } from "./als-react-ts-ui192.js";
+import { useIsoLayoutEffect as Y } from "./als-react-ts-ui193.js";
+import { useTimeout as Fe } from "./als-react-ts-ui195.js";
+import { useAnimationFrame as V } from "./als-react-ts-ui346.js";
+import { useValueAsRef as De } from "./als-react-ts-ui337.js";
+import { useNavigationMenuItemContext as Se } from "./als-react-ts-ui525.js";
+import { useNavigationMenuRootContext as He, useNavigationMenuTreeContext as ke } from "./als-react-ts-ui521.js";
+import { createChangeEventDetails as C } from "./als-react-ts-ui246.js";
+import { ownerVisuallyHidden as Ve, PATIENT_CLICK_THRESHOLD as ze } from "./als-react-ts-ui260.js";
+import { FocusGuard as Z } from "./als-react-ts-ui358.js";
+import { pressableTriggerOpenStateMapping as _e } from "./als-react-ts-ui244.js";
+import { isOutsideMenuEvent as We } from "./als-react-ts-ui526.js";
+import { useAnimationsFinished as Be } from "./als-react-ts-ui338.js";
+import { NavigationMenuPopupCssVars as c } from "./als-react-ts-ui527.js";
+import { NavigationMenuPositionerCssVars as M } from "./als-react-ts-ui528.js";
+import { CompositeItem as $e } from "./als-react-ts-ui488.js";
+import { getCssDimensions as J } from "./als-react-ts-ui424.js";
+import { NAVIGATION_MENU_TRIGGER_IDENTIFIER as Le } from "./als-react-ts-ui523.js";
+import { useNavigationMenuDismissContext as Ge } from "./als-react-ts-ui524.js";
+import { jsxs as Q, jsx as I } from "react/jsx-runtime";
+import { useFloatingTree as qe } from "./als-react-ts-ui356.js";
+import { useFloatingRootContext as je } from "./als-react-ts-ui385.js";
+import { useHover as Ke } from "./als-react-ts-ui389.js";
+import { safePolygon as Ue } from "./als-react-ts-ui360.js";
+import { useClick as Ye } from "./als-react-ts-ui262.js";
+import { useInteractions as Ze } from "./als-react-ts-ui263.js";
+import { useButton as Je } from "./als-react-ts-ui247.js";
+import { EMPTY_ARRAY as Qe } from "./als-react-ts-ui303.js";
+import { isOutsideEvent as X, getPreviousTabbable as Xe, getNextTabbable as et } from "./als-react-ts-ui361.js";
+import { contains as tt } from "./als-react-ts-ui331.js";
+import { focusOut as ee, triggerHover as te, triggerPress as ot, listNavigation as rt } from "./als-react-ts-ui248.js";
+import { stopEvent as nt } from "./als-react-ts-ui295.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 {
-  e as resolveStyle
+  it as NavigationMenuTrigger
 };

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

@@ -1,8 +1,32 @@
-function e() {
-}
-const t = Object.freeze([]), c = Object.freeze({});
+import * as n from "react";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { useNavigationMenuRootContext as u } from "./als-react-ts-ui521.js";
+import { triggerOpenStateMapping as c } from "./als-react-ts-ui244.js";
+import { useNavigationMenuItemContext as f } from "./als-react-ts-ui525.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 {
-  t as EMPTY_ARRAY,
-  c as EMPTY_OBJECT,
-  e as NOOP
+  l as NavigationMenuIcon
 };