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

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

@@ -0,0 +1,110 @@
+import * as n from "react";
+import { inertValue as U } from "./als-react-ts-ui256.js";
+import { useIsoLayoutEffect as q } from "./als-react-ts-ui193.js";
+import { usePopoverRootContext as z } from "./als-react-ts-ui354.js";
+import { PopoverPositionerContext as G } from "./als-react-ts-ui363.js";
+import { useAnchorPositioning as J } from "./als-react-ts-ui364.js";
+import { popupStateMapping as K } from "./als-react-ts-ui244.js";
+import { usePopoverPortalContext as Q } from "./als-react-ts-ui362.js";
+import { InternalBackdrop as W } from "./als-react-ts-ui257.js";
+import { useRenderElement as X } from "./als-react-ts-ui189.js";
+import { POPUP_COLLISION_AVOIDANCE as Y } from "./als-react-ts-ui260.js";
+import { useAnimationsFinished as Z } from "./als-react-ts-ui338.js";
+import { adaptiveOrigin as $ } from "./als-react-ts-ui365.js";
+import { getDisabledMountTransitionStyles as ee } from "./als-react-ts-ui366.js";
+import { jsxs as te, jsx as h } from "react/jsx-runtime";
+import { useFloatingNodeId as oe, FloatingNode as ne } from "./als-react-ts-ui356.js";
+import { triggerHover as re } from "./als-react-ts-ui248.js";
+const ie = /* @__PURE__ */ n.forwardRef(function(a, S) {
+  const {
+    render: ae,
+    className: pe,
+    anchor: v,
+    positionMethod: E = "absolute",
+    side: y = "bottom",
+    align: R = "center",
+    sideOffset: C = 0,
+    alignOffset: M = 0,
+    collisionBoundary: T = "clipping-ancestors",
+    collisionPadding: x = 5,
+    arrowPadding: A = 5,
+    sticky: O = !1,
+    disableAnchorTracking: b = !1,
+    collisionAvoidance: N = Y,
+    ...I
+  } = a, {
+    store: e
+  } = z(), k = Q(), p = oe(), c = e.useState("floatingRootContext"), i = e.useState("mounted"), r = e.useState("open"), F = e.useState("openMethod"), H = e.useState("openChangeReason"), w = e.useState("activeTriggerElement"), B = e.useState("modal"), D = e.useState("positionerElement"), l = e.useState("instantType"), L = e.useState("transitionStatus"), m = n.useRef(null), d = Z(D, !1, !1), s = J({
+    anchor: v,
+    floatingRootContext: c,
+    positionMethod: E,
+    mounted: i,
+    side: y,
+    sideOffset: C,
+    align: R,
+    alignOffset: M,
+    arrowPadding: A,
+    collisionBoundary: T,
+    collisionPadding: x,
+    sticky: O,
+    disableAnchorTracking: b,
+    keepMounted: k,
+    nodeId: p,
+    collisionAvoidance: N,
+    adaptiveOrigin: $
+  }), u = n.useMemo(() => {
+    const t = {};
+    return r || (t.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !i,
+      style: {
+        ...s.positionerStyles,
+        ...t
+      }
+    };
+  }, [r, i, s.positionerStyles]), o = n.useMemo(() => ({
+    props: u,
+    ...s
+  }), [u, s]), f = c?.select("domReferenceElement");
+  q(() => {
+    const t = f, g = m.current;
+    if (t && (m.current = t), g && t && t !== g) {
+      e.set("instantType", void 0);
+      const P = new AbortController();
+      return d(() => {
+        e.set("instantType", "trigger-change");
+      }, P.signal), () => {
+        P.abort();
+      };
+    }
+  }, [f, d, e]);
+  const V = n.useMemo(() => ({
+    open: r,
+    side: o.side,
+    align: o.align,
+    anchorHidden: o.anchorHidden,
+    instant: l
+  }), [r, o.side, o.align, o.anchorHidden, l]), _ = n.useCallback((t) => {
+    e.set("positionerElement", t);
+  }, [e]), j = X("div", a, {
+    state: V,
+    props: [o.props, ee(L), I],
+    ref: [S, _],
+    stateAttributesMapping: K
+  });
+  return /* @__PURE__ */ te(G.Provider, {
+    value: o,
+    children: [i && B === !0 && H !== re && F !== "touch" && /* @__PURE__ */ h(W, {
+      ref: e.context.internalBackdropRef,
+      inert: U(!r),
+      cutout: w
+    }), /* @__PURE__ */ h(ne, {
+      id: p,
+      children: j
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ie.displayName = "PopoverPositioner");
+export {
+  ie as PopoverPositioner
+};

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

@@ -0,0 +1,111 @@
+import * as r from "react";
+import { isHTMLElement as w } from "./als-react-ts-ui339.js";
+import { usePopoverRootContext as A } from "./als-react-ts-ui354.js";
+import { usePopoverPositionerContext as G } from "./als-react-ts-ui363.js";
+import { popupStateMapping as K } from "./als-react-ts-ui244.js";
+import { transitionStatusMapping as Y } from "./als-react-ts-ui245.js";
+import { useOpenChangeComplete as j } from "./als-react-ts-ui253.js";
+import { useRenderElement as B } from "./als-react-ts-ui189.js";
+import { usePopupAutoResize as J } from "./als-react-ts-ui367.js";
+import { useDirection as V } from "./als-react-ts-ui285.js";
+import { COMPOSITE_KEYS as q } from "./als-react-ts-ui254.js";
+import { useToolbarRootContext as Q } from "./als-react-ts-ui368.js";
+import { getDisabledMountTransitionStyles as U } from "./als-react-ts-ui366.js";
+import { jsx as W } from "react/jsx-runtime";
+import { useHoverFloatingInteraction as X } from "./als-react-ts-ui369.js";
+import { EMPTY_OBJECT as Z } from "./als-react-ts-ui303.js";
+import { FloatingFocusManager as $ } from "./als-react-ts-ui255.js";
+import { triggerHover as ee } from "./als-react-ts-ui248.js";
+const te = {
+  ...K,
+  ...Y
+}, oe = /* @__PURE__ */ r.forwardRef(function(p, f) {
+  const {
+    className: se,
+    render: ie,
+    initialFocus: u,
+    finalFocus: g,
+    ...S
+  } = p, {
+    store: e
+  } = A(), o = G(), E = Q(!0) != null, l = V(), s = e.useState("open"), b = e.useState("openMethod"), c = e.useState("instantType"), a = e.useState("transitionStatus"), y = e.useState("popupProps"), x = e.useState("titleElementId"), C = e.useState("descriptionElementId"), P = e.useState("modal"), m = e.useState("mounted"), v = e.useState("openChangeReason"), M = e.useState("popupElement"), F = e.useState("payload"), R = e.useState("positionerElement"), d = e.useState("activeTriggerElement"), i = e.useState("floatingRootContext");
+  j({
+    open: s,
+    ref: e.context.popupRef,
+    onComplete() {
+      s && e.context.onOpenChangeComplete?.(!0);
+    }
+  });
+  const h = e.useState("disabled"), T = e.useState("openOnHover"), I = e.useState("closeDelay");
+  X(i, {
+    enabled: T && !h,
+    closeDelay: I
+  });
+  function O(t) {
+    return t === "touch" ? e.context.popupRef.current : !0;
+  }
+  const D = u === void 0 ? O : u, L = r.useMemo(() => ({
+    open: s,
+    side: o.side,
+    align: o.align,
+    instant: c,
+    transitionStatus: a
+  }), [s, o.side, o.align, c, a]), H = r.useCallback((t) => {
+    e.set("popupElement", t);
+  }, [e]);
+  function z() {
+    i.context.events.emit("measure-layout");
+  }
+  function N(t, n) {
+    i.context.events.emit("measure-layout-complete", {
+      previousDimensions: t,
+      nextDimensions: n
+    });
+  }
+  J({
+    popupElement: M,
+    positionerElement: R,
+    mounted: m,
+    content: F,
+    enabled: () => e.context.triggerElements.size > 1,
+    onMeasureLayout: z,
+    onMeasureLayoutComplete: N
+  });
+  const _ = r.useMemo(() => {
+    let t = o.side === "top", n = o.side === "left";
+    return l === "rtl" ? (t = t || o.side === "inline-end", n = n || o.side === "inline-end") : (t = t || o.side === "inline-start", n = n || o.side === "inline-start"), t ? {
+      position: "absolute",
+      [o.side === "top" ? "bottom" : "top"]: "0",
+      [n ? "right" : "left"]: "0"
+    } : Z;
+  }, [o.side, l]), k = B("div", p, {
+    state: L,
+    ref: [f, e.context.popupRef, H],
+    props: [y, {
+      "aria-labelledby": x,
+      "aria-describedby": C,
+      style: _,
+      onKeyDown(t) {
+        E && q.has(t.key) && t.stopPropagation();
+      }
+    }, U(a), S],
+    stateAttributesMapping: te
+  });
+  return /* @__PURE__ */ W($, {
+    context: i,
+    openInteractionType: b,
+    modal: P === "trap-focus",
+    disabled: !m || v === ee,
+    initialFocus: D,
+    returnFocus: g,
+    restoreFocus: "popup",
+    previousFocusableElement: w(d) ? d : void 0,
+    nextFocusableElement: e.context.triggerFocusTargetRef,
+    beforeContentFocusGuardRef: e.context.beforeContentFocusGuardRef,
+    children: k
+  });
+});
+process.env.NODE_ENV !== "production" && (oe.displayName = "PopoverPopup");
+export {
+  oe as PopoverPopup
+};

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

@@ -0,0 +1,38 @@
+import * as s from "react";
+import { usePopoverPositionerContext as d } from "./als-react-ts-ui363.js";
+import { usePopoverRootContext as f } from "./als-react-ts-ui354.js";
+import { popupStateMapping as l } from "./als-react-ts-ui244.js";
+import { useRenderElement as v } from "./als-react-ts-ui189.js";
+const w = /* @__PURE__ */ s.forwardRef(function(e, p) {
+  const {
+    className: R,
+    render: A,
+    ...a
+  } = e, {
+    store: i
+  } = f(), o = i.useState("open"), {
+    arrowRef: m,
+    side: r,
+    align: t,
+    arrowUncentered: n,
+    arrowStyles: c
+  } = d(), u = s.useMemo(() => ({
+    open: o,
+    side: r,
+    align: t,
+    uncentered: n
+  }), [o, r, t, n]);
+  return v("div", e, {
+    state: u,
+    ref: [p, m],
+    props: [{
+      style: c,
+      "aria-hidden": !0
+    }, a],
+    stateAttributesMapping: l
+  });
+});
+process.env.NODE_ENV !== "production" && (w.displayName = "PopoverArrow");
+export {
+  w as PopoverArrow
+};

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

@@ -0,0 +1,26 @@
+import * as n from "react";
+import { useIsoLayoutEffect as i } from "./als-react-ts-ui193.js";
+import { usePopoverRootContext as m } from "./als-react-ts-ui354.js";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { useBaseUiId as f } from "./als-react-ts-ui249.js";
+const l = /* @__PURE__ */ n.forwardRef(function(o, s) {
+  const {
+    render: c,
+    className: u,
+    ...r
+  } = o, {
+    store: e
+  } = m(), t = f(r.id);
+  return i(() => (e.set("titleElementId", t), () => {
+    e.set("titleElementId", void 0);
+  }), [e, t]), p("h2", o, {
+    ref: s,
+    props: [{
+      id: t
+    }, r]
+  });
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "PopoverTitle");
+export {
+  l as PopoverTitle
+};

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

@@ -0,0 +1,26 @@
+import * as n from "react";
+import { useIsoLayoutEffect as i } from "./als-react-ts-ui193.js";
+import { usePopoverRootContext as p } from "./als-react-ts-ui354.js";
+import { useBaseUiId as m } from "./als-react-ts-ui249.js";
+import { useRenderElement as c } from "./als-react-ts-ui189.js";
+const d = /* @__PURE__ */ n.forwardRef(function(r, s) {
+  const {
+    render: u,
+    className: a,
+    ...t
+  } = r, {
+    store: e
+  } = p(), o = m(t.id);
+  return i(() => (e.set("descriptionElementId", o), () => {
+    e.set("descriptionElementId", void 0);
+  }), [e, o]), c("p", r, {
+    ref: s,
+    props: [{
+      id: o
+    }, t]
+  });
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "PopoverDescription");
+export {
+  d as PopoverDescription
+};

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

@@ -0,0 +1,36 @@
+import * as i from "react";
+import { usePopoverRootContext as p } from "./als-react-ts-ui354.js";
+import { useRenderElement as f } from "./als-react-ts-ui189.js";
+import { createChangeEventDetails as c } from "./als-react-ts-ui246.js";
+import { useButton as u } from "./als-react-ts-ui247.js";
+import { closePress as v } from "./als-react-ts-ui248.js";
+const d = /* @__PURE__ */ i.forwardRef(function(e, t) {
+  const {
+    render: C,
+    className: b,
+    disabled: r = !1,
+    nativeButton: n = !0,
+    ...s
+  } = e, {
+    buttonRef: a,
+    getButtonProps: l
+  } = u({
+    disabled: r,
+    focusableWhenDisabled: !1,
+    native: n
+  }), {
+    store: m
+  } = p();
+  return f("button", e, {
+    ref: [t, a],
+    props: [{
+      onClick(o) {
+        m.setOpen(!1, c(v, o.nativeEvent, o.currentTarget));
+      }
+    }, s, l]
+  });
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "PopoverClose");
+export {
+  d as PopoverClose
+};

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

@@ -0,0 +1,39 @@
+import * as r from "react";
+import { usePopoverRootContext as m } from "./als-react-ts-ui354.js";
+import { popupStateMapping as u } from "./als-react-ts-ui244.js";
+import { transitionStatusMapping as d } from "./als-react-ts-ui245.js";
+import { useRenderElement as f } from "./als-react-ts-ui189.js";
+import { triggerHover as l } from "./als-react-ts-ui248.js";
+const S = {
+  ...u,
+  ...d
+}, v = /* @__PURE__ */ r.forwardRef(function(t, s) {
+  const {
+    className: g,
+    render: k,
+    ...p
+  } = t, {
+    store: e
+  } = m(), o = e.useState("open"), a = e.useState("mounted"), n = e.useState("transitionStatus"), i = e.useState("openChangeReason"), c = r.useMemo(() => ({
+    open: o,
+    transitionStatus: n
+  }), [o, n]);
+  return f("div", t, {
+    state: c,
+    ref: [e.context.backdropRef, s],
+    props: [{
+      role: "presentation",
+      hidden: !a,
+      style: {
+        pointerEvents: i === l ? "none" : void 0,
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      }
+    }, p],
+    stateAttributesMapping: S
+  });
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "PopoverBackdrop");
+export {
+  v as PopoverBackdrop
+};

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

@@ -0,0 +1,110 @@
+import * as o from "react";
+import { useScrollLock as j } from "./als-react-ts-ui326.js";
+import { usePopoverRootContext as L, PopoverRootContext as N } from "./als-react-ts-ui354.js";
+import { PopoverStore as V } from "./als-react-ts-ui355.js";
+import { createChangeEventDetails as q } from "./als-react-ts-ui246.js";
+import { useOpenInteractionType as w } from "./als-react-ts-ui327.js";
+import { jsx as p } from "react/jsx-runtime";
+import { FloatingTree as z, useFloatingParentNodeId as B } from "./als-react-ts-ui356.js";
+import { useSyncedFloatingRootContext as G } from "./als-react-ts-ui328.js";
+import { useDismiss as J } from "./als-react-ts-ui330.js";
+import { useRole as K } from "./als-react-ts-ui329.js";
+import { useInteractions as Q } from "./als-react-ts-ui263.js";
+import { useImplicitActiveTrigger as W, useOpenStateTransitions as X } from "./als-react-ts-ui261.js";
+import { triggerHover as Y, imperativeAction as Z } from "./als-react-ts-ui248.js";
+function I({
+  props: t
+}) {
+  const {
+    children: i,
+    open: l,
+    defaultOpen: c = !1,
+    onOpenChange: T,
+    onOpenChangeComplete: R,
+    modal: r = !1,
+    handle: S,
+    triggerId: a,
+    defaultTriggerId: m = null
+  } = t, e = V.useStore(S?.store, {
+    open: l ?? c,
+    modal: r,
+    activeTriggerId: a !== void 0 ? a : m
+  });
+  e.useControlledProp("open", l, c), e.useControlledProp("activeTriggerId", a, m);
+  const n = e.useState("open"), x = e.useState("positionerElement"), y = e.useState("payload"), k = e.useState("openChangeReason");
+  e.useContextCallback("onOpenChange", T), e.useContextCallback("onOpenChangeComplete", R);
+  const {
+    openMethod: g,
+    triggerProps: s,
+    reset: E
+  } = w(n);
+  W(e);
+  const {
+    forceUnmount: f
+  } = X(n, e, () => {
+    e.update({
+      stickIfOpen: !0,
+      openChangeReason: null
+    }), E();
+  });
+  j(n && r === !0 && k !== Y && g !== "touch", x), o.useEffect(() => {
+    n || e.context.stickIfOpenTimeout.clear();
+  }, [e, n]);
+  const d = o.useCallback((H) => {
+    const O = q(H);
+    return O.preventUnmountOnClose = () => {
+      e.set("preventUnmountingOnClose", !0);
+    }, O;
+  }, [e]), C = o.useCallback(() => {
+    e.setOpen(!1, d(Z));
+  }, [e, d]);
+  o.useImperativeHandle(t.actionsRef, () => ({
+    unmount: f,
+    close: C
+  }), [f, C]);
+  const u = G({
+    popupStore: e,
+    onOpenChange: e.setOpen
+  }), M = J(u, {
+    outsidePressEvent: {
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
+      mouse: r === "trap-focus" ? "sloppy" : "intentional",
+      touch: "sloppy"
+    }
+  }), b = K(u), {
+    getReferenceProps: v,
+    getFloatingProps: P,
+    getTriggerProps: h
+  } = Q([M, b]), F = o.useMemo(() => v(s), [v, s]), D = o.useMemo(() => h(s), [h, s]), U = o.useMemo(() => P(), [P]);
+  e.useSyncedValues({
+    modal: r,
+    openMethod: g,
+    activeTriggerProps: F,
+    inactiveTriggerProps: D,
+    popupProps: U,
+    floatingRootContext: u,
+    nested: B() != null
+  });
+  const A = o.useMemo(() => ({
+    store: e
+  }), [e]);
+  return /* @__PURE__ */ p(N.Provider, {
+    value: A,
+    children: typeof i == "function" ? i({
+      payload: y
+    }) : i
+  });
+}
+function ce(t) {
+  return L(!0) ? /* @__PURE__ */ p(I, {
+    props: t
+  }) : /* @__PURE__ */ p(z, {
+    children: /* @__PURE__ */ p(I, {
+      props: t
+    })
+  });
+}
+export {
+  ce as PopoverRoot
+};

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

@@ -0,0 +1,25 @@
+import * as a from "react";
+import { usePopoverRootContext as p } from "./als-react-ts-ui354.js";
+import { PopoverPortalContext as l } from "./als-react-ts-ui362.js";
+import { jsx as r } from "react/jsx-runtime";
+import { FloatingPortal as d } from "./als-react-ts-ui258.js";
+const u = /* @__PURE__ */ a.forwardRef(function(e, t) {
+  const {
+    keepMounted: o = !1,
+    ...n
+  } = e, {
+    store: s
+  } = p();
+  return s.useState("mounted") || o ? /* @__PURE__ */ r(l.Provider, {
+    value: o,
+    children: /* @__PURE__ */ r(d, {
+      ref: t,
+      ...n,
+      renderGuards: !1
+    })
+  }) : null;
+});
+process.env.NODE_ENV !== "production" && (u.displayName = "PopoverPortal");
+export {
+  u as PopoverPortal
+};

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

@@ -0,0 +1,5 @@
+import { ALSCheckboxGroupRoot as o } from "./als-react-ts-ui63.js";
+const p = o;
+export {
+  p as ALSCheckboxGroup
+};