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

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

@@ -1,14 +1,202 @@
-function t(r) {
-  if (r == null)
-    return "";
-  if (typeof r == "string")
-    return r;
-  try {
-    return JSON.stringify(r);
-  } catch {
-    return String(r);
+import * as r from "react";
+import { Store as l } from "./als-react-ts-ui407.js";
+import { useStore as a } from "./als-react-ts-ui408.js";
+import { useStableCallback as h } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as i } from "./als-react-ts-ui267.js";
+import { NOOP as d } from "./als-react-ts-ui304.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);
+      }
+    });
   }
 }
 export {
-  t as serializeValue
+  O as ReactStore
 };

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

@@ -1,12 +1,50 @@
-function n(e, t) {
-  return {
-    ...e,
-    state: {
-      ...e.state,
-      valid: !t && e.state.valid
-    }
-  };
+import i from "./als-react-ts-ui242.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;
+  }
 }
 export {
-  n as getCombinedFieldValidityData
+  a as PopupTriggerMap
 };

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

@@ -1,6 +1,22 @@
-let a = /* @__PURE__ */ (function(d) {
-  return d.disabled = "data-disabled", d.valid = "data-valid", d.invalid = "data-invalid", d.touched = "data-touched", d.dirty = "data-dirty", d.filled = "data-filled", d.focused = "data-focused", d;
-})({});
+import t from "./als-react-ts-ui242.js";
+import { createSelectorCreator as s, lruMemoize as i } from "./als-react-ts-ui418.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;
+};
 export {
-  a as FieldControlDataAttributes
+  u as createSelector
 };

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

@@ -1,130 +1,8 @@
-const j = ["top", "right", "bottom", "left"], m = Math.min, p = Math.max, C = Math.round, L = Math.floor, E = (t) => ({
-  x: t,
-  y: t
-}), h = {
-  left: "right",
-  right: "left",
-  bottom: "top",
-  top: "bottom"
-}, x = {
-  start: "end",
-  end: "start"
-};
-function R(t, e, n) {
-  return p(t, m(e, n));
-}
-function T(t, e) {
-  return typeof t == "function" ? t(e) : t;
-}
-function g(t) {
-  return t.split("-")[0];
-}
-function a(t) {
-  return t.split("-")[1];
-}
-function b(t) {
-  return t === "x" ? "y" : "x";
-}
-function d(t) {
-  return t === "y" ? "height" : "width";
-}
-const A = /* @__PURE__ */ new Set(["top", "bottom"]);
-function P(t) {
-  return A.has(g(t)) ? "y" : "x";
-}
-function y(t) {
-  return b(P(t));
-}
-function k(t, e, n) {
-  n === void 0 && (n = !1);
-  const r = a(t), i = y(t), o = d(i);
-  let c = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
-  return e.reference[o] > e.floating[o] && (c = f(c)), [c, f(c)];
-}
-function q(t) {
-  const e = f(t);
-  return [s(t), e, s(e)];
-}
-function s(t) {
-  return t.replace(/start|end/g, (e) => x[e]);
-}
-const u = ["left", "right"], l = ["right", "left"], M = ["top", "bottom"], O = ["bottom", "top"];
-function S(t, e, n) {
-  switch (t) {
-    case "top":
-    case "bottom":
-      return n ? e ? l : u : e ? u : l;
-    case "left":
-    case "right":
-      return e ? M : O;
-    default:
-      return [];
-  }
-}
-function z(t, e, n, r) {
-  const i = a(t);
-  let o = S(g(t), n === "start", r);
-  return i && (o = o.map((c) => c + "-" + i), e && (o = o.concat(o.map(s)))), o;
-}
-function f(t) {
-  return t.replace(/left|right|bottom|top/g, (e) => h[e]);
-}
-function w(t) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...t
-  };
-}
-function B(t) {
-  return typeof t != "number" ? w(t) : {
-    top: t,
-    right: t,
-    bottom: t,
-    left: t
-  };
-}
-function D(t) {
-  const {
-    x: e,
-    y: n,
-    width: r,
-    height: i
-  } = t;
-  return {
-    width: r,
-    height: i,
-    top: n,
-    left: e,
-    right: e + r,
-    bottom: n + i,
-    x: e,
-    y: n
-  };
+import * as t from "react";
+const e = parseInt(t.version, 10);
+function o(r) {
+  return e >= r;
 }
 export {
-  R as clamp,
-  E as createCoords,
-  T as evaluate,
-  w as expandPaddingObject,
-  L as floor,
-  a as getAlignment,
-  y as getAlignmentAxis,
-  k as getAlignmentSides,
-  d as getAxisLength,
-  q as getExpandedPlacements,
-  s as getOppositeAlignmentPlacement,
-  b as getOppositeAxis,
-  z as getOppositeAxisPlacements,
-  f as getOppositePlacement,
-  B as getPaddingObject,
-  g as getSide,
-  P as getSideAxis,
-  p as max,
-  m as min,
-  D as rectToClientRect,
-  C as round,
-  j as sides
+  o as isReactVersionAtLeast
 };

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

@@ -1,47 +1,19 @@
-import { evaluate as W, getPaddingObject as Y, getAlignmentAxis as k, getAlignment as q, clamp as B, getAxisLength as C } from "./als-react-ts-ui317.js";
-const F = (s) => ({
-  name: "arrow",
-  options: s,
-  async fn(i) {
-    const {
-      x: y,
-      y: j,
-      placement: x,
-      rects: n,
-      platform: f,
-      elements: l,
-      middlewareData: M
-    } = i, {
-      element: g,
-      padding: v = 0,
-      offsetParent: z = "real"
-    } = W(s, i) || {};
-    if (g == null)
-      return {};
-    const h = Y(v), m = {
-      x: y,
-      y: j
-    }, t = k(x), e = C(t), r = await f.getDimensions(g), d = t === "y", E = d ? "top" : "left", H = d ? "bottom" : "right", A = d ? "clientHeight" : "clientWidth", L = n.reference[e] + n.reference[t] - m[t] - n.floating[e], R = m[t] - n.reference[t], S = z === "real" ? await f.getOffsetParent?.(g) : l.floating;
-    let a = l.floating[A] || n.floating[e];
-    (!a || !await f.isElement?.(S)) && (a = l.floating[A] || n.floating[e]);
-    const T = L / 2 - R / 2, O = a / 2 - r[e] / 2 - 1, u = Math.min(h[E], O), b = Math.min(h[H], O), c = u, D = a - r[e] - b, o = a / 2 - r[e] / 2 + T, P = B(c, o, D), p = !M.arrow && q(x) != null && o !== P && n.reference[e] / 2 - (o < c ? u : b) - r[e] / 2 < 0, w = p ? o < c ? o - c : o - D : 0;
-    return {
-      [t]: m[t] + w,
-      data: {
-        [t]: P,
-        centerOffset: o - P - w,
-        ...p && {
-          alignmentOffset: w
-        }
-      },
-      reset: p
-    };
-  }
-}), I = (s, i) => ({
-  ...F(s),
-  options: [s, i]
-});
+import { useIsoLayoutEffect as r } from "./als-react-ts-ui267.js";
+import { useRefWithInit as n } from "./als-react-ts-ui222.js";
+function s(e) {
+  const t = n(f, e).current;
+  return t.next = e, r(t.effect), t;
+}
+function f(e) {
+  const t = {
+    current: e,
+    next: e,
+    effect: () => {
+      t.current = t.next;
+    }
+  };
+  return t;
+}
 export {
-  I as arrow,
-  F as baseArrow
+  s as useValueAsRef
 };

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

@@ -1,20 +1,28 @@
-import { hide as a } from "./als-react-ts-ui306.js";
-const o = {
-  name: "hide",
-  async fn(e) {
-    const {
-      width: n,
-      height: d,
-      x: i,
-      y: t
-    } = e.rects.reference, r = n === 0 && d === 0 && i === 0 && t === 0;
-    return {
-      data: {
-        referenceHidden: (await a().fn(e)).data?.referenceHidden || r
+import * as l from "react-dom";
+import { useAnimationFrame as m } from "./als-react-ts-ui346.js";
+import { useStableCallback as u } from "./als-react-ts-ui266.js";
+import { resolveRef as c } from "./als-react-ts-ui365.js";
+function S(s, f = !1, a = !0) {
+  const i = m();
+  return u((r, t = null) => {
+    i.cancel();
+    const e = c(s);
+    e != null && (typeof e.getAnimations != "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED ? r() : i.request(() => {
+      function o() {
+        e && Promise.all(e.getAnimations().map((n) => n.finished)).then(() => {
+          t != null && t.aborted || l.flushSync(r);
+        }).catch(() => {
+          if (a) {
+            if (t != null && t.aborted)
+              return;
+            l.flushSync(r);
+          } else e.getAnimations().length > 0 && e.getAnimations().some((n) => n.pending || n.playState !== "finished") && o();
+        });
       }
-    };
-  }
-};
+      f ? i.request(o) : o();
+    }));
+  });
+}
 export {
-  o as hide
+  S as useAnimationsFinished
 };

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

@@ -1,4 +1,4 @@
-import { ALSTabsPanel as a, ALSTabsIndicator as o, ALSTabsTab as s, ALSTabsList as t, ALSTabsRoot as b } from "./als-react-ts-ui158.js";
+import { ALSTabsPanel as a, ALSTabsIndicator as o, ALSTabsTab as s, ALSTabsList as t, ALSTabsRoot as b } from "./als-react-ts-ui298.js";
 const T = {
   Root: b,
   List: t,