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

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

@@ -1,202 +1,23 @@
-import * as r from "react";
-import { Store as l } from "./als-react-ts-ui266.js";
-import { useStore as a } from "./als-react-ts-ui267.js";
-import { useStableCallback as h } from "./als-react-ts-ui160.js";
-import { useIsoLayoutEffect as i } from "./als-react-ts-ui161.js";
-import { NOOP as d } from "./als-react-ts-ui212.js";
-class O extends l {
-  /**
-   * Creates a new ReactStore instance.
-   *
-   * @param state Initial state of the store.
-   * @param context Non-reactive context values.
-   * @param selectors Optional selectors for use with `useState`.
-   */
-  constructor(e, t = {}, s) {
-    super(e), this.context = t, this.selectors = s;
-  }
-  /**
-   * Non-reactive values such as refs, callbacks, etc.
-   */
-  /**
-   * Keeps track of which properties are controlled.
-   */
-  controlledValues = /* @__PURE__ */ new Map();
-  /**
-   * Synchronizes a single external value into the store.
-   *
-   * Note that the while the value in `state` is updated immediately, the value returned
-   * by `useState` is updated before the next render (similarly to React's `useState`).
-   */
-  useSyncedValue(e, t) {
-    r.useDebugValue(e), i(() => {
-      this.state[e] !== t && this.set(e, t);
-    }, [e, t]);
-  }
-  /**
-   * Synchronizes a single external value into the store and
-   * cleans it up (sets to `undefined`) on unmount.
-   *
-   * Note that the while the value in `state` is updated immediately, the value returned
-   * by `useState` is updated before the next render (similarly to React's `useState`).
-   */
-  useSyncedValueWithCleanup(e, t) {
-    i(() => (this.state[e] !== t && this.set(e, t), () => {
-      this.set(e, void 0);
-    }), [e, t]);
-  }
-  /**
-   * Synchronizes multiple external values into the store.
-   *
-   * Note that the while the values in `state` are updated immediately, the values returned
-   * by `useState` are updated before the next render (similarly to React's `useState`).
-   */
-  useSyncedValues(e) {
-    if (process.env.NODE_ENV !== "production") {
-      r.useDebugValue(e, (n) => Object.keys(n));
-      const s = r.useRef(Object.keys(e)).current, o = Object.keys(e);
-      (s.length !== o.length || s.some((n, u) => n !== o[u])) && console.error("ReactStore.useSyncedValues expects the same prop keys on every render. Keys should be stable.");
-    }
-    const t = Object.values(e);
-    i(() => {
-      this.update(e);
-    }, t);
-  }
-  /**
-   * Registers a controllable prop pair (`controlled`, `defaultValue`) for a specific key.
-   * - If `controlled` is non-undefined, the key is marked as controlled and the store's
-   *   state at `key` is updated to match `controlled`. Local writes to that key are ignored.
-   * - If `controlled` is undefined, the key is marked as uncontrolled. The store's state
-   *   is initialized to `defaultValue` on first render and can be updated with local writes.
-   */
-  useControlledProp(e, t, s) {
-    r.useDebugValue(e);
-    const o = t !== void 0;
-    if (process.env.NODE_ENV !== "production") {
-      const n = this.controlledValues.get(e);
-      n !== void 0 && n !== o && console.error(`A component is changing the ${o ? "" : "un"}controlled state of ${e.toString()} to be ${o ? "un" : ""}controlled. Elements should not switch from uncontrolled to controlled (or vice versa).`);
-    }
-    this.controlledValues.has(e) || (this.controlledValues.set(e, o), !o && !Object.is(this.state[e], s) && super.setState({
-      ...this.state,
-      [e]: s
-    })), i(() => {
-      o && !Object.is(this.state[e], t) && super.setState({
-        ...this.state,
-        [e]: t
-      });
-    }, [e, t, s, o]);
-  }
-  /**
-   * Sets a specific key in the store's state to a new value and notifies listeners if the value has changed.
-   * If the key is controlled (registered via {@link useControlledProp} with a non-undefined value),
-   * the update is ignored and no listeners are notified.
-   *
-   * @param key The state key to update.
-   * @param value The new value to set for the specified key.
-   */
-  set(e, t) {
-    this.controlledValues.get(e) !== !0 && super.set(e, t);
-  }
-  /**
-   * Merges the provided changes into the current state and notifies listeners if there are changes.
-   * Controlled keys are filtered out and not updated.
-   *
-   * @param values An object containing the changes to apply to the current state.
-   */
-  update(e) {
-    const t = {
-      ...e
-    };
-    for (const s in t)
-      if (Object.hasOwn(t, s) && this.controlledValues.get(s) === !0) {
-        delete t[s];
-        continue;
-      }
-    super.update(t);
-  }
-  /**
-   * Updates the entire store's state and notifies all registered listeners.
-   * Controlled keys are left unchanged; only uncontrolled keys from `newState` are applied.
-   *
-   * @param newState The new state to set for the store.
-   */
-  setState(e) {
-    const t = {
-      ...e
-    };
-    for (const s in t)
-      if (Object.hasOwn(t, s) && this.controlledValues.get(s) === !0) {
-        delete t[s];
-        continue;
-      }
-    super.setState({
-      ...this.state,
-      ...t
-    });
-  }
-  /** Gets the current value from the store using a selector with the provided key.
-   *
-   * @param key Key of the selector to use.
-   */
-  select = (e, t, s, o) => {
-    const n = this.selectors[e];
-    return n(this.state, t, s, o);
-  };
-  /**
-   * Returns a value from the store's state using a selector function.
-   * Used to subscribe to specific parts of the state.
-   * This methods causes a rerender whenever the selected state changes.
-   *
-   * @param key Key of the selector to use.
-   */
-  useState = (e, t, s, o) => {
-    r.useDebugValue(e);
-    const n = this.selectors[e];
-    return a(this, n, t, s, o);
-  };
-  /**
-   * Wraps a function with `useStableCallback` to ensure it has a stable reference
-   * and assigns it to the context.
-   *
-   * @param key Key of the event callback. Must be a function in the context.
-   * @param fn Function to assign.
-   */
-  useContextCallback(e, t) {
-    r.useDebugValue(e);
-    const s = h(t ?? d);
-    this.context[e] = s;
-  }
-  /**
-   * Returns a stable setter function for a specific key in the store's state.
-   * It's commonly used to pass as a ref callback to React elements.
-   *
-   * @param key Key of the state to set.
-   */
-  useStateSetter(e) {
-    const t = r.useRef(void 0);
-    return t.current === void 0 && (t.current = (s) => {
-      this.set(e, s);
-    }), t.current;
-  }
-  /**
-   * Observes changes derived from the store's selectors and calls the listener when the selected value changes.
-   *
-   * @param key Key of the selector to observe.
-   * @param listener Listener function called when the selector result changes.
-   */
-  observe(e, t) {
-    let s;
-    typeof e == "function" ? s = e : s = this.selectors[e];
-    let o = s(this.state);
-    return t(o, o, this), this.subscribe((n) => {
-      const u = s(n);
-      if (!Object.is(o, u)) {
-        const c = o;
-        o = u, t(u, c, this);
-      }
-    });
-  }
-}
+const n = 500, t = 500, i = {
+  style: {
+    transition: "none"
+  }
+}, I = "data-base-ui-click-trigger", o = {
+  fallbackAxisSide: "none"
+}, s = {
+  fallbackAxisSide: "end"
+}, e = {
+  clipPath: "inset(50%)",
+  position: "fixed",
+  top: 0,
+  left: 0
+};
 export {
-  O as ReactStore
+  I as CLICK_TRIGGER_IDENTIFIER,
+  i as DISABLED_TRANSITIONS_STYLE,
+  o as DROPDOWN_COLLISION_AVOIDANCE,
+  t as PATIENT_CLICK_THRESHOLD,
+  s as POPUP_COLLISION_AVOIDANCE,
+  n as TYPEAHEAD_RESET_MS,
+  e as ownerVisuallyHidden
 };

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

@@ -1,50 +1,83 @@
-import i from "./als-react-ts-ui197.js";
-class a {
-  constructor() {
-    this.elements = /* @__PURE__ */ new Set(), this.idMap = /* @__PURE__ */ new Map();
-  }
-  /**
-   * Adds a trigger element with the given ID.
-   *
-   * Note: The provided element is assumed to not be registered under multiple IDs.
-   */
-  add(e, t) {
-    const s = this.idMap.get(e);
-    if (s !== t && (s !== void 0 && this.elements.delete(s), this.elements.add(t), this.idMap.set(e, t), process.env.NODE_ENV !== "production" && this.elements.size !== this.idMap.size))
-      throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap." : i(87));
-  }
-  /**
-   * Removes the trigger element with the given ID.
-   */
-  delete(e) {
-    const t = this.idMap.get(e);
-    t && (this.elements.delete(t), this.idMap.delete(e));
-  }
-  /**
-   * Whether the given element is registered as a trigger.
-   */
-  hasElement(e) {
-    return this.elements.has(e);
-  }
-  /**
-   * Whether there is a registered trigger element matching the given predicate.
-   */
-  hasMatchingElement(e) {
-    for (const t of this.elements)
-      if (e(t))
-        return !0;
-    return !1;
-  }
-  getById(e) {
-    return this.idMap.get(e);
-  }
-  entries() {
-    return this.idMap.entries();
-  }
-  get size() {
-    return this.idMap.size;
-  }
+import * as g from "react";
+import { useStableCallback as a } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as o } from "./als-react-ts-ui267.js";
+import { useTransitionStatus as f } from "./als-react-ts-ui342.js";
+import { useOpenChangeComplete as m } from "./als-react-ts-ui236.js";
+function d(n, t) {
+  const e = g.useRef(null);
+  return g.useCallback((r) => {
+    if (n !== void 0 && (e.current !== null && (t.context.triggerElements.delete(e.current), e.current = null), r !== null))
+      return e.current = n, t.context.triggerElements.add(n, r), () => {
+        e.current !== null && (t.context.triggerElements.delete(e.current), e.current = null);
+      };
+  }, [t, n]);
+}
+function x(n, t, e, r) {
+  const i = e.useState("isMountedByTrigger", n), l = d(n, e), c = a((u) => {
+    const s = l(u);
+    return u !== null && e.select("open") && e.select("activeTriggerId") == null && e.update({
+      activeTriggerId: n,
+      activeTriggerElement: u,
+      ...r
+    }), s;
+  });
+  return o(() => {
+    i && e.update({
+      activeTriggerElement: t,
+      ...r
+    });
+  }, [i, e, t, ...Object.values(r)]), {
+    registerTrigger: c,
+    isMountedByThisTrigger: i
+  };
+}
+function C(n) {
+  const t = n.useState("open");
+  o(() => {
+    if (t && !n.select("activeTriggerId") && n.context.triggerElements.size === 1) {
+      const e = n.context.triggerElements.entries().next();
+      if (!e.done) {
+        const [r, i] = e.value;
+        n.update({
+          activeTriggerId: r,
+          activeTriggerElement: i
+        });
+      }
+    }
+  }, [t, n]);
+}
+function S(n, t, e) {
+  const {
+    mounted: r,
+    setMounted: i,
+    transitionStatus: l
+  } = f(n);
+  t.useSyncedValues({
+    mounted: r,
+    transitionStatus: l
+  });
+  const c = a(() => {
+    i(!1), t.update({
+      activeTriggerId: null,
+      activeTriggerElement: null,
+      mounted: !1
+    }), e?.(), t.context.onOpenChangeComplete?.(!1);
+  }), u = t.useState("preventUnmountingOnClose");
+  return m({
+    enabled: !u,
+    open: n,
+    ref: t.context.popupRef,
+    onComplete() {
+      n || c();
+    }
+  }), {
+    forceUnmount: c,
+    transitionStatus: l
+  };
 }
 export {
-  a as PopupTriggerMap
+  C as useImplicitActiveTrigger,
+  S as useOpenStateTransitions,
+  x as useTriggerDataForwarding,
+  d as useTriggerRegistration
 };

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

@@ -1,22 +1,66 @@
-import t from "./als-react-ts-ui197.js";
-import { createSelectorCreator as s, lruMemoize as i } from "./als-react-ts-ui344.js";
-s({
-  memoize: i,
-  memoizeOptions: {
-    maxSize: 1,
-    equalityCheck: Object.is
-  }
-});
-const u = (e, m, c, n, l, p, ...o) => {
-  if (o.length > 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Unsupported number of selectors" : t(1));
-  let r;
-  if (e)
-    r = e;
-  else
-    throw new Error("Missing arguments");
-  return r;
-};
+import * as O from "react";
+import { useAnimationFrame as P } from "./als-react-ts-ui346.js";
+import { useTimeout as b } from "./als-react-ts-ui297.js";
+import { createChangeEventDetails as v } from "./als-react-ts-ui229.js";
+import { isTypeableElement as I } from "./als-react-ts-ui312.js";
+import { EMPTY_OBJECT as x } from "./als-react-ts-ui304.js";
+import { isMouseLikePointerType as R } from "./als-react-ts-ui280.js";
+import { triggerPress as k } from "./als-react-ts-ui231.js";
+function L(d, M = {}) {
+  const e = "rootStore" in d ? d.rootStore : d, T = e.context.dataRef, {
+    enabled: h = !0,
+    event: a = "click",
+    toggle: g = !0,
+    ignoreMouse: y = !1,
+    stickIfOpen: E = !0,
+    touchOpenDelay: n = 0
+  } = M, i = O.useRef(void 0), w = P(), m = b(), C = O.useMemo(() => ({
+    onPointerDown(t) {
+      i.current = t.pointerType;
+    },
+    onMouseDown(t) {
+      const o = i.current, r = t.nativeEvent, u = e.select("open");
+      if (t.button !== 0 || a === "click" || R(o, !0) && y)
+        return;
+      const s = T.current.openEvent, f = s?.type, l = e.select("domReferenceElement") !== t.currentTarget, c = u && l || !(u && g && (!(s && E) || f === "click" || f === "mousedown"));
+      if (I(r.target)) {
+        const p = v(k, r, r.target);
+        c && o === "touch" && n > 0 ? m.start(n, () => {
+          e.setOpen(!0, p);
+        }) : e.setOpen(c, p);
+        return;
+      }
+      const D = t.currentTarget;
+      w.request(() => {
+        const p = v(k, r, D);
+        c && o === "touch" && n > 0 ? m.start(n, () => {
+          e.setOpen(!0, p);
+        }) : e.setOpen(c, p);
+      });
+    },
+    onClick(t) {
+      if (a === "mousedown-only")
+        return;
+      const o = i.current;
+      if (a === "mousedown" && o) {
+        i.current = void 0;
+        return;
+      }
+      if (R(o, !0) && y)
+        return;
+      const r = e.select("open"), u = T.current.openEvent, s = u?.type, f = e.select("domReferenceElement") !== t.currentTarget, l = r && f || !(r && g && (!(u && E) || s === "click" || s === "mousedown" || s === "keydown" || s === "keyup")), c = v(k, t.nativeEvent, t.currentTarget);
+      l && o === "touch" && n > 0 ? m.start(n, () => {
+        e.setOpen(!0, c);
+      }) : e.setOpen(l, c);
+    },
+    onKeyDown() {
+      i.current = void 0;
+    }
+  }), [T, a, y, e, E, g, w, m, n]);
+  return O.useMemo(() => h ? {
+    reference: C
+  } : x, [h, C]);
+}
 export {
-  u as createSelector
+  L as useClick
 };

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

@@ -1,8 +1,48 @@
-import * as t from "react";
-const e = parseInt(t.version, 10);
-function o(r) {
-  return e >= r;
+import * as l from "react";
+import { FOCUSABLE_ATTRIBUTE as C, ACTIVE_KEY as s, SELECTED_KEY as E } from "./als-react-ts-ui379.js";
+function k(e = []) {
+  const a = e.map((n) => n?.reference), g = e.map((n) => n?.floating), f = e.map((n) => n?.item), t = e.map((n) => n?.trigger), o = l.useCallback(
+    (n) => u(n, e, "reference"),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    a
+  ), c = l.useCallback(
+    (n) => u(n, e, "floating"),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    g
+  ), i = l.useCallback(
+    (n) => u(n, e, "item"),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    f
+  ), r = l.useCallback(
+    (n) => u(n, e, "trigger"),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    t
+  );
+  return l.useMemo(() => ({
+    getReferenceProps: o,
+    getFloatingProps: c,
+    getItemProps: i,
+    getTriggerProps: r
+  }), [o, c, i, r]);
+}
+function u(e, a, g) {
+  const f = /* @__PURE__ */ new Map(), t = g === "item", o = {};
+  g === "floating" && (o.tabIndex = -1, o[C] = "");
+  for (const c in e)
+    t && e && (c === s || c === E) || (o[c] = e[c]);
+  for (let c = 0; c < a.length; c += 1) {
+    let i;
+    const r = a[c]?.[g];
+    typeof r == "function" ? i = e ? r(e) : null : i = r, i && m(o, i, t, f);
+  }
+  return m(o, e, t, f), o;
+}
+function m(e, a, g, f) {
+  for (const t in a) {
+    const o = a[t];
+    g && (t === s || t === E) || (t.startsWith("on") ? (f.has(t) || f.set(t, []), typeof o == "function" && (f.get(t)?.push(o), e[t] = (...c) => f.get(t)?.map((i) => i(...c)).find((i) => i !== void 0))) : e[t] = o);
+  }
 }
 export {
-  o as isReactVersionAtLeast
+  k as useInteractions
 };

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

@@ -1,11 +1,7 @@
-let o;
-process.env.NODE_ENV !== "production" && (o = /* @__PURE__ */ new Set());
-function s(...r) {
-  if (process.env.NODE_ENV !== "production") {
-    const e = r.join(" ");
-    o.has(e) || (o.add(e), console.error(`Base UI: ${e}`));
-  }
-}
+import { CommonPopupDataAttributes as d } from "./als-react-ts-ui227.js";
+let y = (function(n) {
+  return n[n.open = d.open] = "open", n[n.closed = d.closed] = "closed", n[n.startingStyle = d.startingStyle] = "startingStyle", n[n.endingStyle = d.endingStyle] = "endingStyle", n.nested = "data-nested", n.nestedDialogOpen = "data-nested-dialog-open", n;
+})({});
 export {
-  s as error
+  y as DialogViewportDataAttributes
 };

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

@@ -1,14 +1,42 @@
-import n 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 = "CompositeRootContext");
-function r(s = !1) {
-  const o = t.useContext(e);
-  if (o === void 0 && !s)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>." : n(16));
-  return o;
-}
+const r = "_trigger_r1z8h_6", _ = "_positioner_r1z8h_40", t = "_popup_r1z8h_45", o = "_arrow_r1z8h_96", p = "_arrowFill_r1z8h_121", e = "_arrowOuterStroke_r1z8h_125", i = "_arrowInnerStroke_r1z8h_129", n = "_image_r1z8h_134", s = "_title_r1z8h_155", c = "_description_r1z8h_176", h = "_content_r1z8h_198", a = {
+  trigger: r,
+  positioner: _,
+  popup: t,
+  "popup--default": "_popup--default_r1z8h_66",
+  "popup--compact": "_popup--compact_r1z8h_70",
+  "popup--rich": "_popup--rich_r1z8h_75",
+  "popup--sm": "_popup--sm_r1z8h_83",
+  "popup--md": "_popup--md_r1z8h_87",
+  "popup--lg": "_popup--lg_r1z8h_91",
+  arrow: o,
+  arrowFill: p,
+  arrowOuterStroke: e,
+  arrowInnerStroke: i,
+  image: n,
+  "image--sm": "_image--sm_r1z8h_142",
+  "image--md": "_image--md_r1z8h_146",
+  "image--lg": "_image--lg_r1z8h_150",
+  title: s,
+  "title--sm": "_title--sm_r1z8h_163",
+  "title--md": "_title--md_r1z8h_167",
+  "title--lg": "_title--lg_r1z8h_171",
+  description: c,
+  "description--sm": "_description--sm_r1z8h_185",
+  "description--md": "_description--md_r1z8h_189",
+  "description--lg": "_description--lg_r1z8h_193",
+  content: h
+};
 export {
-  e as CompositeRootContext,
-  r as useCompositeRootContext
+  o as arrow,
+  p as arrowFill,
+  i as arrowInnerStroke,
+  e as arrowOuterStroke,
+  h as content,
+  a as default,
+  c as description,
+  n as image,
+  t as popup,
+  _ as positioner,
+  s as title,
+  r as trigger
 };

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

@@ -1,24 +1,38 @@
-import * as r from "react";
-function f(l) {
+import * as t from "react";
+import { useIsoLayoutEffect as f } from "./als-react-ts-ui267.js";
+import { usePreviewCardRootContext as c } from "./als-react-ts-ui528.js";
+import { triggerOpenStateMapping as l } from "./als-react-ts-ui227.js";
+import { useRenderElement as d } from "./als-react-ts-ui226.js";
+const u = /* @__PURE__ */ t.forwardRef(function(e, o) {
   const {
-    focusableWhenDisabled: e,
-    disabled: o,
-    composite: t = !1,
-    tabIndex: i = 0,
-    isNativeButton: s
-  } = l, n = t && e !== !1, b = t && e === !1;
-  return {
-    props: r.useMemo(() => {
-      const a = {
-        // allow Tabbing away from focusableWhenDisabled elements
-        onKeyDown(d) {
-          o && e && d.key !== "Tab" && d.preventDefault();
-        }
-      };
-      return t || (a.tabIndex = i, !s && o && (a.tabIndex = e ? i : -1)), (s && (e || n) || !s && o) && (a["aria-disabled"] = o), s && (!e || b) && (a.disabled = o), a;
-    }, [t, o, e, n, b, s, i])
-  };
-}
+    render: v,
+    className: y,
+    delay: s,
+    closeDelay: i,
+    ...a
+  } = e, {
+    open: r,
+    triggerProps: n,
+    setTriggerElement: m,
+    writeDelayRefs: p
+  } = c();
+  f(() => {
+    p({
+      delay: s,
+      closeDelay: i
+    });
+  });
+  const g = t.useMemo(() => ({
+    open: r
+  }), [r]);
+  return d("a", e, {
+    ref: [m, o],
+    state: g,
+    props: [n, a],
+    stateAttributesMapping: l
+  });
+});
+process.env.NODE_ENV !== "production" && (u.displayName = "PreviewCardTrigger");
 export {
-  f as useFocusableWhenDisabled
+  u as PreviewCardTrigger
 };