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

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

@@ -0,0 +1,91 @@
+import * as i from "react";
+import { isHTMLElement as K } from "./als-react-ts-ui221.js";
+import { useStableCallback as d } from "./als-react-ts-ui160.js";
+import { error as m } from "./als-react-ts-ui247.js";
+import { useIsoLayoutEffect as N } from "./als-react-ts-ui161.js";
+import { useCompositeRootContext as O } from "./als-react-ts-ui248.js";
+import { useFocusableWhenDisabled as T } from "./als-react-ts-ui249.js";
+import { mergeProps as U, makeEventPreventable as b } from "./als-react-ts-ui213.js";
+function F(a = {}) {
+  const {
+    disabled: o = !1,
+    focusableWhenDisabled: h,
+    tabIndex: D = 0,
+    native: n = !0
+  } = a, r = i.useRef(null), u = O(!0) !== void 0, f = d(() => {
+    const t = r.current;
+    return !!(t?.tagName === "A" && t?.href);
+  }), {
+    props: s
+  } = T({
+    focusableWhenDisabled: h,
+    disabled: o,
+    composite: u,
+    tabIndex: D,
+    isNativeButton: n
+  });
+  process.env.NODE_ENV !== "production" && i.useEffect(() => {
+    if (!r.current)
+      return;
+    const t = r.current.tagName === "BUTTON";
+    n ? t || m("A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.") : t && m("A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.");
+  }, [n]);
+  const l = i.useCallback(() => {
+    const t = r.current;
+    I(t) && u && o && s.disabled === void 0 && t.disabled && (t.disabled = !1);
+  }, [o, s.disabled, u]);
+  N(l, [l]);
+  const y = i.useCallback((t = {}) => {
+    const {
+      onClick: c,
+      onMouseDown: k,
+      onKeyUp: E,
+      onKeyDown: g,
+      onPointerDown: B,
+      ...C
+    } = t;
+    return U({
+      type: n ? "button" : void 0,
+      onClick(e) {
+        if (o) {
+          e.preventDefault();
+          return;
+        }
+        c?.(e);
+      },
+      onMouseDown(e) {
+        o || k?.(e);
+      },
+      onKeyDown(e) {
+        if (o || (b(e), g?.(e)), e.baseUIHandlerPrevented)
+          return;
+        const P = e.target === e.currentTarget && !n && !f() && !o, p = e.key === "Enter", x = e.key === " ";
+        P && ((x || p) && e.preventDefault(), p && c?.(e));
+      },
+      onKeyUp(e) {
+        o || (b(e), E?.(e)), !e.baseUIHandlerPrevented && e.target === e.currentTarget && !n && !o && e.key === " " && c?.(e);
+      },
+      onPointerDown(e) {
+        if (o) {
+          e.preventDefault();
+          return;
+        }
+        B?.(e);
+      }
+    }, n ? void 0 : {
+      role: "button"
+    }, s, C);
+  }, [o, s, n, f]), w = d((t) => {
+    r.current = t, l();
+  });
+  return {
+    getButtonProps: y,
+    buttonRef: w
+  };
+}
+function I(a) {
+  return K(a) && a.tagName === "BUTTON";
+}
+export {
+  F as useButton
+};

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

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "./als-react-ts-ui74.js";
+function m(t) {
+  return /* @__PURE__ */ o("div", { className: r.root });
+}
+export {
+  m as ALSMenu,
+  m as default
+};

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

@@ -0,0 +1,25 @@
+import { isAndroid as r, isJSDOM as o } from "./als-react-ts-ui275.js";
+function n(i) {
+  i.preventDefault(), i.stopPropagation();
+}
+function p(i) {
+  return "nativeEvent" in i;
+}
+function e(i) {
+  return i.mozInputSource === 0 && i.isTrusted ? !0 : r && i.pointerType ? i.type === "click" && i.buttons === 1 : i.detail === 0 && !i.pointerType;
+}
+function c(i) {
+  return o ? !1 : !r && i.width === 0 && i.height === 0 || r && i.width === 1 && i.height === 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "mouse" || // iOS VoiceOver returns 0.333• for width/height.
+  i.width < 1 && i.height < 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "touch";
+}
+function f(i, u) {
+  const t = ["mouse", "pen"];
+  return u || t.push("", void 0), t.includes(i);
+}
+export {
+  f as isMouseLikePointerType,
+  p as isReactEvent,
+  e as isVirtualClick,
+  c as isVirtualPointerEvent,
+  n as stopEvent
+};

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

@@ -0,0 +1,167 @@
+import * as f from "react";
+import { useIsoLayoutEffect as g } from "./als-react-ts-ui161.js";
+import { useStableCallback as B } from "./als-react-ts-ui160.js";
+import { useMergedRefs as k } from "./als-react-ts-ui169.js";
+import { useOnMount as z } from "./als-react-ts-ui222.js";
+import { useAnimationFrame as V, AnimationFrame as s } from "./als-react-ts-ui223.js";
+import { warn as U } from "./als-react-ts-ui162.js";
+import { createChangeEventDetails as _ } from "./als-react-ts-ui167.js";
+import { CollapsiblePanelDataAttributes as v } from "./als-react-ts-ui219.js";
+import { AccordionRootDataAttributes as G } from "./als-react-ts-ui224.js";
+import { none as J } from "./als-react-ts-ui168.js";
+function oe(H) {
+  const {
+    abortControllerRef: r,
+    animationTypeRef: i,
+    externalRef: W,
+    height: x,
+    hiddenUntilFound: d,
+    keepMounted: w,
+    id: O,
+    mounted: R,
+    onOpenChange: D,
+    open: l,
+    panelRef: a,
+    runOnceAnimationsFinish: h,
+    setDimensions: c,
+    setMounted: m,
+    setOpen: E,
+    setVisible: A,
+    transitionDimensionRef: C,
+    visible: P,
+    width: I
+  } = H, p = f.useRef(!1), M = f.useRef(null), F = f.useRef(l), S = f.useRef(l), N = V(), y = f.useMemo(() => i.current === "css-animation" ? !P : !l && !R, [l, R, P, i]), L = B((e) => {
+    if (!e)
+      return;
+    if (i.current == null || C.current == null) {
+      const t = getComputedStyle(e), u = t.animationName !== "none" && t.animationName !== "", b = t.transitionDuration !== "0s" && t.transitionDuration !== "";
+      u && b ? process.env.NODE_ENV !== "production" && U("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used.") : t.animationName === "none" && t.transitionDuration !== "0s" ? i.current = "css-transition" : t.animationName !== "none" && t.transitionDuration === "0s" ? i.current = "css-animation" : i.current = "none", e.getAttribute(G.orientation) === "horizontal" || t.transitionProperty.indexOf("width") > -1 ? C.current = "width" : C.current = "height";
+    }
+    if (i.current !== "css-transition")
+      return;
+    (x === void 0 || I === void 0) && (c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), S.current && e.style.setProperty("transition-duration", "0s"));
+    let o = -1, n = -1;
+    return o = s.request(() => {
+      S.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    }), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }), j = k(W, a, L);
+  return g(() => {
+    if (i.current !== "css-transition")
+      return;
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1;
+    if (r.current != null && (r.current.abort(), r.current = null), l) {
+      const n = {
+        "justify-content": e.style.justifyContent,
+        "align-items": e.style.alignItems,
+        "align-content": e.style.alignContent,
+        "justify-items": e.style.justifyItems
+      };
+      Object.keys(n).forEach((t) => {
+        e.style.setProperty(t, "initial", "important");
+      }), !S.current && !w && e.setAttribute(v.startingStyle, ""), c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      }), o = s.request(() => {
+        Object.entries(n).forEach(([t, u]) => {
+          u === "" ? e.style.removeProperty(t) : e.style.setProperty(t, u);
+        });
+      });
+    } else {
+      if (e.scrollHeight === 0 && e.scrollWidth === 0)
+        return;
+      c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      });
+      const n = new AbortController();
+      r.current = n;
+      const t = n.signal;
+      let u = null;
+      const b = v.endingStyle;
+      return u = new MutationObserver((T) => {
+        T.some((q) => q.type === "attributes" && q.attributeName === b) && (u?.disconnect(), u = null, h(() => {
+          c({
+            height: 0,
+            width: 0
+          }), e.style.removeProperty("content-visibility"), m(!1), r.current === n && (r.current = null);
+        }, t));
+      }), u.observe(e, {
+        attributes: !0,
+        attributeFilter: [b]
+      }), () => {
+        u?.disconnect(), N.cancel(), r.current === n && (n.abort(), r.current = null);
+      };
+    }
+    return () => {
+      s.cancel(o);
+    };
+  }, [r, i, N, d, w, R, l, a, h, c, m]), g(() => {
+    if (i.current !== "css-animation")
+      return;
+    const e = a.current;
+    e && (M.current = e.style.animationName || M.current, e.style.setProperty("animation-name", "none"), c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), !F.current && !p.current && e.style.removeProperty("animation-name"), l ? (r.current != null && (r.current.abort(), r.current = null), m(!0), A(!0)) : (r.current = new AbortController(), h(() => {
+      m(!1), A(!1), r.current = null;
+    }, r.current.signal)));
+  }, [r, i, l, a, h, c, m, A, P]), z(() => {
+    const e = s.request(() => {
+      F.current = !1;
+    });
+    return () => s.cancel(e);
+  }), g(() => {
+    if (!d)
+      return;
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1, n = -1;
+    return l && p.current && (e.style.transitionDuration = "0s", c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), o = s.request(() => {
+      p.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    })), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }, [d, l, a, c]), g(() => {
+    const e = a.current;
+    e && d && y && (e.setAttribute("hidden", "until-found"), i.current === "css-transition" && e.setAttribute(v.startingStyle, ""));
+  }, [d, y, i, a]), f.useEffect(function() {
+    const o = a.current;
+    if (!o)
+      return;
+    function n(t) {
+      p.current = !0, E(!0), D(!0, _(J, t));
+    }
+    return o.addEventListener("beforematch", n), () => {
+      o.removeEventListener("beforematch", n);
+    };
+  }, [D, a, E]), f.useMemo(() => ({
+    props: {
+      hidden: y,
+      id: O,
+      ref: j
+    }
+  }), [y, O, j]);
+}
+export {
+  oe as useCollapsiblePanel
+};

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

@@ -0,0 +1,6 @@
+let e = /* @__PURE__ */ (function(n) {
+  return n.accordionPanelHeight = "--accordion-panel-height", n.accordionPanelWidth = "--accordion-panel-width", n;
+})({});
+export {
+  e as AccordionPanelCssVars
+};

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

@@ -0,0 +1,20 @@
+import * as a from "react";
+import { useStableCallback as f } from "./als-react-ts-ui160.js";
+import { useValueAsRef as p } from "./als-react-ts-ui225.js";
+import { useAnimationsFinished as u } from "./als-react-ts-ui217.js";
+function b(i) {
+  const {
+    enabled: o = !0,
+    open: e,
+    ref: m,
+    onComplete: s
+  } = i, n = p(e), t = f(s), r = u(m, e);
+  a.useEffect(() => {
+    o && r(() => {
+      e === n.current && t();
+    });
+  }, [o, e, t, r, n]);
+}
+export {
+  b as useOpenChangeComplete
+};

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

@@ -0,0 +1,9 @@
+import * as c from "react";
+const e = {};
+function f(r, n) {
+  const t = c.useRef(e);
+  return t.current === e && (t.current = r(n)), t;
+}
+export {
+  f as useRefWithInit
+};

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

@@ -0,0 +1,89 @@
+import * as s from "react";
+import { useStableCallback as y } from "./als-react-ts-ui160.js";
+import { useScrollLock as I } from "./als-react-ts-ui236.js";
+import { useOpenInteractionType as A } from "./als-react-ts-ui237.js";
+import { createChangeEventDetails as M } from "./als-react-ts-ui167.js";
+import { useImplicitActiveTrigger as B, useOpenStateTransitions as F } from "./als-react-ts-ui199.js";
+import { useSyncedFloatingRootContext as U } from "./als-react-ts-ui238.js";
+import { useRole as w } from "./als-react-ts-ui239.js";
+import { useDismiss as H } from "./als-react-ts-ui240.js";
+import { useInteractions as K } from "./als-react-ts-ui201.js";
+import { imperativeAction as L } from "./als-react-ts-ui168.js";
+import { getTarget as V, contains as j } from "./als-react-ts-ui241.js";
+function ee(R) {
+  const {
+    store: e,
+    parentContext: o,
+    actionsRef: x
+  } = R, n = e.useState("open"), P = e.useState("disablePointerDismissal"), c = e.useState("modal"), l = e.useState("popupElement"), {
+    openMethod: k,
+    triggerProps: r,
+    reset: S
+  } = A(n);
+  B(e);
+  const {
+    forceUnmount: m
+  } = F(n, e, () => {
+    S();
+  }), f = y((t) => {
+    const a = M(t);
+    return a.preventUnmountOnClose = () => {
+      e.set("preventUnmountingOnClose", !0);
+    }, a;
+  }), g = s.useCallback(() => {
+    e.setOpen(!1, f(L));
+  }, [e, f]);
+  s.useImperativeHandle(x, () => ({
+    unmount: m,
+    close: g
+  }), [m, g]);
+  const u = U({
+    popupStore: e,
+    onOpenChange: e.setOpen,
+    treatPopupAsFloatingElement: !0,
+    noEmit: !0
+  }), [i, d] = s.useState(0), C = i === 0, N = w(u), T = H(u, {
+    outsidePressEvent() {
+      return e.context.internalBackdropRef.current || e.context.backdropRef.current ? "intentional" : {
+        mouse: c === "trap-focus" ? "sloppy" : "intentional",
+        touch: "sloppy"
+      };
+    },
+    outsidePress(t) {
+      if ("button" in t && t.button !== 0 || "touches" in t && t.touches.length !== 1)
+        return !1;
+      const a = V(t);
+      if (C && !P) {
+        const p = a;
+        return c && (e.context.internalBackdropRef.current || e.context.backdropRef.current) ? e.context.internalBackdropRef.current === p || e.context.backdropRef.current === p || j(p, l) && !p?.hasAttribute("data-base-ui-portal") : !0;
+      }
+      return !1;
+    },
+    escapeKey: C
+  });
+  I(n && c === !0, l);
+  const {
+    getReferenceProps: D,
+    getFloatingProps: O,
+    getTriggerProps: b
+  } = K([N, T]);
+  e.useContextCallback("onNestedDialogOpen", (t) => {
+    d(t + 1);
+  }), e.useContextCallback("onNestedDialogClose", () => {
+    d(0);
+  }), s.useEffect(() => (o?.onNestedDialogOpen && n && o.onNestedDialogOpen(i), o?.onNestedDialogClose && !n && o.onNestedDialogClose(), () => {
+    o?.onNestedDialogClose && n && o.onNestedDialogClose();
+  }), [n, o, i]);
+  const h = s.useMemo(() => D(r), [D, r]), v = s.useMemo(() => b(r), [b, r]), E = s.useMemo(() => O(), [O]);
+  e.useSyncedValues({
+    openMethod: k,
+    activeTriggerProps: h,
+    inactiveTriggerProps: v,
+    popupProps: E,
+    floatingRootContext: u,
+    nestedOpenDialogCount: i
+  });
+}
+export {
+  ee as useDialogRoot
+};

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

@@ -0,0 +1,14 @@
+import i from "./als-react-ts-ui197.js";
+import * as t from "react";
+const e = /* @__PURE__ */ t.createContext(void 0);
+process.env.NODE_ENV !== "production" && (e.displayName = "DialogRootContext");
+function s(n) {
+  const o = t.useContext(e);
+  if (n === !1 && o === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>." : i(27));
+  return o;
+}
+export {
+  e as DialogRootContext,
+  s as useDialogRootContext
+};

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

@@ -0,0 +1,65 @@
+import * as i from "react";
+import { popupStoreSelectors as d, createInitialPopupStoreState as a } from "./als-react-ts-ui242.js";
+import { ReactStore as p } from "./als-react-ts-ui243.js";
+import { PopupTriggerMap as g } from "./als-react-ts-ui244.js";
+import { createSelector as n } from "./als-react-ts-ui245.js";
+const m = {
+  ...d,
+  modal: n((e) => e.modal),
+  nested: n((e) => e.nested),
+  nestedOpenDialogCount: n((e) => e.nestedOpenDialogCount),
+  disablePointerDismissal: n((e) => e.disablePointerDismissal),
+  openMethod: n((e) => e.openMethod),
+  descriptionElementId: n((e) => e.descriptionElementId),
+  titleElementId: n((e) => e.titleElementId),
+  viewportElement: n((e) => e.viewportElement),
+  role: n((e) => e.role)
+};
+class C extends p {
+  constructor(o) {
+    super(c(o), {
+      popupRef: /* @__PURE__ */ i.createRef(),
+      backdropRef: /* @__PURE__ */ i.createRef(),
+      internalBackdropRef: /* @__PURE__ */ i.createRef(),
+      triggerElements: new g(),
+      onOpenChange: void 0,
+      onOpenChangeComplete: void 0
+    }, m);
+  }
+  setOpen = (o, t) => {
+    if (t.preventUnmountOnClose = () => {
+      this.set("preventUnmountingOnClose", !0);
+    }, !o && t.trigger == null && this.state.activeTriggerId != null && (t.trigger = this.state.activeTriggerElement ?? void 0), this.context.onOpenChange?.(o, t), t.isCanceled)
+      return;
+    const s = {
+      open: o,
+      nativeEvent: t.event,
+      reason: t.reason,
+      nested: this.state.nested
+    };
+    this.state.floatingRootContext.context.events?.emit("openchange", s);
+    const r = {
+      open: o
+    }, l = t.trigger?.id ?? null;
+    (l || o) && (r.activeTriggerId = l, r.activeTriggerElement = t.trigger ?? null), this.update(r);
+  };
+}
+function c(e = {}) {
+  return {
+    ...a(),
+    modal: !0,
+    disablePointerDismissal: !1,
+    popupElement: null,
+    viewportElement: null,
+    descriptionElementId: void 0,
+    titleElementId: void 0,
+    openMethod: null,
+    nested: !1,
+    nestedOpenDialogCount: 0,
+    role: "dialog",
+    ...e
+  };
+}
+export {
+  C as DialogStore
+};

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

@@ -0,0 +1,40 @@
+import { TransitionStatusDataAttributes as p } from "./als-react-ts-ui189.js";
+let r = (function(n) {
+  return n.open = "data-open", n.closed = "data-closed", n[n.startingStyle = p.startingStyle] = "startingStyle", n[n.endingStyle = p.endingStyle] = "endingStyle", n.anchorHidden = "data-anchor-hidden", n;
+})({}), e = /* @__PURE__ */ (function(n) {
+  return n.popupOpen = "data-popup-open", n.pressed = "data-pressed", n;
+})({});
+const t = {
+  [e.popupOpen]: ""
+}, d = {
+  [e.popupOpen]: "",
+  [e.pressed]: ""
+}, O = {
+  [r.open]: ""
+}, l = {
+  [r.closed]: ""
+}, s = {
+  [r.anchorHidden]: ""
+}, i = {
+  open(n) {
+    return n ? t : null;
+  }
+}, a = {
+  open(n) {
+    return n ? d : null;
+  }
+}, o = {
+  open(n) {
+    return n ? O : l;
+  },
+  anchorHidden(n) {
+    return n ? s : null;
+  }
+};
+export {
+  r as CommonPopupDataAttributes,
+  e as CommonTriggerDataAttributes,
+  o as popupStateMapping,
+  a as pressableTriggerOpenStateMapping,
+  i as triggerOpenStateMapping
+};

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

@@ -0,0 +1,16 @@
+let n = /* @__PURE__ */ (function(t) {
+  return t.startingStyle = "data-starting-style", t.endingStyle = "data-ending-style", t;
+})({});
+const e = {
+  [n.startingStyle]: ""
+}, i = {
+  [n.endingStyle]: ""
+}, r = {
+  transitionStatus(t) {
+    return t === "starting" ? e : t === "ending" ? i : null;
+  }
+};
+export {
+  n as TransitionStatusDataAttributes,
+  r as transitionStatusMapping
+};

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

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "./als-react-ts-ui75.js";
+function a(t) {
+  return /* @__PURE__ */ r("div", { className: o.root });
+}
+export {
+  a as ALSMenubar,
+  a as default
+};

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

@@ -0,0 +1,6 @@
+let t = /* @__PURE__ */ (function(e) {
+  return e.nestedDialogs = "--nested-dialogs", e;
+})({});
+export {
+  t as DialogPopupCssVars
+};

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

@@ -0,0 +1,7 @@
+import { CommonPopupDataAttributes as e } from "./als-react-ts-ui188.js";
+let y = (function(n) {
+  return n[n.open = e.open] = "open", n[n.closed = e.closed] = "closed", n[n.startingStyle = e.startingStyle] = "startingStyle", n[n.endingStyle = e.endingStyle] = "endingStyle", n.nested = "data-nested", n.nestedDialogOpen = "data-nested-dialog-open", n;
+})({});
+export {
+  y as DialogPopupDataAttributes
+};

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

@@ -0,0 +1,14 @@
+import r from "./als-react-ts-ui197.js";
+import * as t from "react";
+const e = /* @__PURE__ */ t.createContext(void 0);
+process.env.NODE_ENV !== "production" && (e.displayName = "DialogPortalContext");
+function a() {
+  const o = t.useContext(e);
+  if (o === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Dialog.Portal> is missing." : r(26));
+  return o;
+}
+export {
+  e as DialogPortalContext,
+  a as useDialogPortalContext
+};