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

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

@@ -1,68 +1,89 @@
-import { useRefWithInit as u } from "./als-react-ts-ui184.js";
-import { useOnMount as h } from "./als-react-ts-ui222.js";
-const s = null;
-let l = globalThis.requestAnimationFrame;
-class o {
-  /* This implementation uses an array as a backing data-structure for frame callbacks.
-   * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
-   * never calls the native `cancelAnimationFrame` if there are no frames left. This can
-   * be much more efficient if there is a call pattern that alterns as
-   * "request-cancel-request-cancel-…".
-   * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
-   * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
-  callbacks = [];
-  callbacksCount = 0;
-  nextId = 1;
-  startId = 1;
-  isScheduled = !1;
-  tick = (t) => {
-    this.isScheduled = !1;
-    const e = this.callbacks, r = this.callbacksCount;
-    if (this.callbacks = [], this.callbacksCount = 0, this.startId = this.nextId, r > 0)
-      for (let i = 0; i < e.length; i += 1)
-        e[i]?.(t);
-  };
-  request(t) {
-    const e = this.nextId;
-    this.nextId += 1, this.callbacks.push(t), this.callbacksCount += 1;
-    const r = process.env.NODE_ENV === "test" && l !== requestAnimationFrame && (l = requestAnimationFrame, !0);
-    return (!this.isScheduled || r) && (requestAnimationFrame(this.tick), this.isScheduled = !0), e;
-  }
-  cancel(t) {
-    const e = t - this.startId;
-    e < 0 || e >= this.callbacks.length || (this.callbacks[e] = null, this.callbacksCount -= 1);
-  }
-}
-const c = new o();
-class a {
-  static create() {
-    return new a();
-  }
-  static request(t) {
-    return c.request(t);
-  }
-  static cancel(t) {
-    return c.cancel(t);
-  }
-  currentId = s;
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  request(t) {
-    this.cancel(), this.currentId = c.request(() => {
-      this.currentId = s, t();
-    });
-  }
-  cancel = () => {
-    this.currentId !== s && (c.cancel(this.currentId), this.currentId = s);
-  };
-  disposeEffect = () => this.cancel;
-}
-function k() {
-  const n = u(a.create).current;
-  return h(n.disposeEffect), n;
+import * as s from "react";
+import { useStableCallback as y } from "./als-react-ts-ui266.js";
+import { useScrollLock as I } from "./als-react-ts-ui307.js";
+import { useOpenInteractionType as A } from "./als-react-ts-ui308.js";
+import { createChangeEventDetails as M } from "./als-react-ts-ui229.js";
+import { useImplicitActiveTrigger as B, useOpenStateTransitions as F } from "./als-react-ts-ui244.js";
+import { useSyncedFloatingRootContext as U } from "./als-react-ts-ui309.js";
+import { useRole as w } from "./als-react-ts-ui310.js";
+import { useDismiss as H } from "./als-react-ts-ui311.js";
+import { useInteractions as K } from "./als-react-ts-ui246.js";
+import { imperativeAction as L } from "./als-react-ts-ui231.js";
+import { getTarget as V, contains as j } from "./als-react-ts-ui312.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 {
-  a as AnimationFrame,
-  k as useAnimationFrame
+  ee as useDialogRoot
 };

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

@@ -1,6 +1,14 @@
-let e = /* @__PURE__ */ (function(a) {
-  return a.disabled = "data-disabled", a.orientation = "data-orientation", a;
-})({});
+import i from "./als-react-ts-ui242.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 AccordionRootDataAttributes
+  e as DialogRootContext,
+  s as useDialogRootContext
 };

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

@@ -1,19 +1,65 @@
-import { useIsoLayoutEffect as r } from "./als-react-ts-ui161.js";
-import { useRefWithInit as n } from "./als-react-ts-ui184.js";
-function s(e) {
-  const t = n(f, e).current;
-  return t.next = e, r(t.effect), t;
+import * as i from "react";
+import { popupStoreSelectors as d, createInitialPopupStoreState as a } from "./als-react-ts-ui313.js";
+import { ReactStore as p } from "./als-react-ts-ui314.js";
+import { PopupTriggerMap as g } from "./als-react-ts-ui315.js";
+import { createSelector as n } from "./als-react-ts-ui316.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 f(e) {
-  const t = {
-    current: e,
-    next: e,
-    effect: () => {
-      t.current = t.next;
-    }
+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
   };
-  return t;
 }
 export {
-  s as useValueAsRef
+  C as DialogStore
 };

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

@@ -1,14 +1,57 @@
-import r from "./als-react-ts-ui197.js";
-import * as o from "react";
-const e = /* @__PURE__ */ o.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "AvatarRootContext");
-function a() {
-  const t = o.useContext(e);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>." : r(13));
-  return t;
+import R from "./als-react-ts-ui242.js";
+import * as P from "react";
+import { createElement as d } from "react";
+import { useMergedRefs as p, useMergedRefsN as b } from "./als-react-ts-ui272.js";
+import { getReactElementRef as y } from "./als-react-ts-ui299.js";
+import { mergeObjects as g } from "./als-react-ts-ui300.js";
+import { getStateAttributesProps as A } from "./als-react-ts-ui301.js";
+import { resolveClassName as M } from "./als-react-ts-ui302.js";
+import { resolveStyle as k } from "./als-react-ts-ui303.js";
+import { EMPTY_OBJECT as f } from "./als-react-ts-ui304.js";
+import { mergePropsN as v, mergeClassNames as C, mergeProps as O } from "./als-react-ts-ui305.js";
+function Y(r, e, t = {}) {
+  const i = e.render, o = w(e, t);
+  if (t.enabled === !1)
+    return null;
+  const m = t.state ?? f;
+  return B(r, i, o, m);
+}
+function w(r, e = {}) {
+  const {
+    className: t,
+    style: i,
+    render: o
+  } = r, {
+    state: m = f,
+    ref: u,
+    props: a,
+    stateAttributesMapping: E,
+    enabled: s = !0
+  } = e, l = s ? M(t, m) : void 0, c = s ? k(i, m) : void 0, N = s ? A(m, E) : f, n = s ? g(N, Array.isArray(a) ? v(a) : a) ?? f : f;
+  return typeof document < "u" && (s ? Array.isArray(u) ? n.ref = b([n.ref, y(o), ...u]) : n.ref = p(n.ref, y(o), u) : p(null, null)), s ? (l !== void 0 && (n.className = C(n.className, l)), c !== void 0 && (n.style = g(n.style, c)), n) : f;
+}
+function B(r, e, t, i) {
+  if (e) {
+    if (typeof e == "function")
+      return e(t, i);
+    const o = O(t, e.props);
+    return o.ref = t.ref, /* @__PURE__ */ P.cloneElement(e, o);
+  }
+  if (r && typeof r == "string")
+    return S(r, t);
+  throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : R(8));
+}
+function S(r, e) {
+  return r === "button" ? /* @__PURE__ */ d("button", {
+    type: "button",
+    ...e,
+    key: e.key
+  }) : r === "img" ? /* @__PURE__ */ d("img", {
+    alt: "",
+    ...e,
+    key: e.key
+  }) : /* @__PURE__ */ P.createElement(r, e);
 }
 export {
-  e as AvatarRootContext,
-  a as useAvatarRootContext
+  Y as useRenderElement
 };

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

@@ -1,6 +1,40 @@
+import { TransitionStatusDataAttributes as p } from "./als-react-ts-ui228.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 = {
-  imageLoadingStatus: () => null
+  [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 {
-  t as avatarStateAttributesMapping
+  r as CommonPopupDataAttributes,
+  e as CommonTriggerDataAttributes,
+  o as popupStateMapping,
+  a as pressableTriggerOpenStateMapping,
+  i as triggerOpenStateMapping
 };

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

@@ -1,23 +1,16 @@
-import * as d from "react";
-import { useIsoLayoutEffect as f } from "./als-react-ts-ui161.js";
-import { NOOP as m } from "./als-react-ts-ui212.js";
-function p(o, {
-  referrerPolicy: e,
-  crossOrigin: a
-}) {
-  const [i, r] = d.useState("idle");
-  return f(() => {
-    if (!o)
-      return r("error"), m;
-    let n = !0;
-    const t = new window.Image(), u = (s) => () => {
-      n && r(s);
-    };
-    return r("loading"), t.onload = u("loaded"), t.onerror = u("error"), e && (t.referrerPolicy = e), t.crossOrigin = a ?? null, t.src = o, () => {
-      n = !1;
-    };
-  }, [o, a, e]), i;
-}
+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 {
-  p as useImageLoadingStatus
+  n as TransitionStatusDataAttributes,
+  r as transitionStatusMapping
 };

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

@@ -1,32 +1,35 @@
-import { useRefWithInit as c } from "./als-react-ts-ui184.js";
-import { useOnMount as u } from "./als-react-ts-ui222.js";
-const t = 0;
-class r {
-  static create() {
-    return new r();
-  }
-  currentId = t;
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(s, i) {
-    this.clear(), this.currentId = setTimeout(() => {
-      this.currentId = t, i();
-    }, s);
-  }
-  isStarted() {
-    return this.currentId !== t;
-  }
-  clear = () => {
-    this.currentId !== t && (clearTimeout(this.currentId), this.currentId = t);
+import { EMPTY_OBJECT as r } from "./als-react-ts-ui304.js";
+function u(e, t, n, a) {
+  let o = !1, l = !1;
+  const s = a ?? r;
+  return {
+    reason: e,
+    event: t ?? new Event("base-ui"),
+    cancel() {
+      o = !0;
+    },
+    allowPropagation() {
+      l = !0;
+    },
+    get isCanceled() {
+      return o;
+    },
+    get isPropagationAllowed() {
+      return l;
+    },
+    trigger: n,
+    ...s
   };
-  disposeEffect = () => this.clear;
 }
-function a() {
-  const e = c(r.create).current;
-  return u(e.disposeEffect), e;
+function d(e, t, n) {
+  const a = n ?? r;
+  return {
+    reason: e,
+    event: t ?? new Event("base-ui"),
+    ...a
+  };
 }
 export {
-  r as Timeout,
-  a as useTimeout
+  u as createChangeEventDetails,
+  d as createGenericEventDetails
 };

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

@@ -1,20 +1,91 @@
-const o = "_root_1soxo_5", t = "_list_1soxo_22", _ = "_tab_1soxo_44", s = "_indicator_1soxo_129", a = "_panel_1soxo_154", n = "_fadeIn_1soxo_1", c = {
-  root: o,
-  list: t,
-  tab: _,
-  "tab--sm": "_tab--sm_1soxo_76",
-  "tab--md": "_tab--md_1soxo_82",
-  "tab--lg": "_tab--lg_1soxo_88",
-  indicator: s,
-  panel: a,
-  fadeIn: n
-};
+import * as i from "react";
+import { isHTMLElement as K } from "./als-react-ts-ui320.js";
+import { useStableCallback as d } from "./als-react-ts-ui266.js";
+import { error as m } from "./als-react-ts-ui321.js";
+import { useIsoLayoutEffect as N } from "./als-react-ts-ui267.js";
+import { useCompositeRootContext as O } from "./als-react-ts-ui322.js";
+import { useFocusableWhenDisabled as T } from "./als-react-ts-ui323.js";
+import { mergeProps as U, makeEventPreventable as b } from "./als-react-ts-ui305.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 {
-  c as default,
-  n as fadeIn,
-  s as indicator,
-  t as list,
-  a as panel,
-  o as root,
-  _ as tab
+  F as useButton
 };