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

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

@@ -1,192 +1,72 @@
-import * as t from "react";
-import { ownerDocument as Ve } from "./als-react-ts-ui352.js";
-import { useControlled as Ie } from "./als-react-ts-ui265.js";
-import { useStableCallback as d } from "./als-react-ts-ui266.js";
-import { useValueAsRef as De } from "./als-react-ts-ui318.js";
-import { useIsoLayoutEffect as Pe } from "./als-react-ts-ui267.js";
-import { warn as Me } from "./als-react-ts-ui268.js";
-import { createChangeEventDetails as X, createGenericEventDetails as Ne } from "./als-react-ts-ui229.js";
-import { useValueChanged as Te } from "./als-react-ts-ui406.js";
-import { useBaseUiId as Le } from "./als-react-ts-ui232.js";
-import { useRenderElement as Oe } from "./als-react-ts-ui226.js";
-import { clamp as Be } from "./als-react-ts-ui523.js";
-import { areArraysEqual as Z } from "./als-react-ts-ui443.js";
-import { CompositeList as Ue } from "./als-react-ts-ui269.js";
-import { useField as Fe } from "./als-react-ts-ui403.js";
-import { useFieldRootContext as ke } from "./als-react-ts-ui398.js";
-import { useFormContext as je } from "./als-react-ts-ui402.js";
-import { useLabelableContext as qe } from "./als-react-ts-ui399.js";
-import { asc as we } from "./als-react-ts-ui552.js";
-import { getSliderValue as _e } from "./als-react-ts-ui553.js";
-import { validateMinimumDistance as ze } from "./als-react-ts-ui554.js";
-import { sliderStateAttributesMapping as Ge } from "./als-react-ts-ui555.js";
-import { SliderRootContext as He } from "./als-react-ts-ui556.js";
-import { jsx as Y } from "react/jsx-runtime";
-import { none as Je, keyboard as Ke, inputChange as Qe } from "./als-react-ts-ui231.js";
-import { activeElement as We } from "./als-react-ts-ui312.js";
-function Xe(i) {
-  return "key" in i ? Ke : Qe;
+import { isHTMLElement as u, isShadowRoot as i } from "./als-react-ts-ui338.js";
+import { isJSDOM as c } from "./als-react-ts-ui371.js";
+import { TYPEABLE_SELECTOR as s, FOCUSABLE_ATTRIBUTE as n } from "./als-react-ts-ui390.js";
+function h(t) {
+  let e = t.activeElement;
+  for (; e?.shadowRoot?.activeElement != null; )
+    e = e.shadowRoot.activeElement;
+  return e;
 }
-function Ye(i, l) {
-  return typeof i == "number" && typeof l == "number" ? i === l : Array.isArray(i) && Array.isArray(l) ? Z(i, l) : !1;
-}
-const Ze = /* @__PURE__ */ t.forwardRef(function(l, $) {
-  const {
-    "aria-labelledby": ee,
-    className: $e,
-    defaultValue: te,
-    disabled: re = !1,
-    id: oe,
-    format: ne,
-    largeStep: T = 10,
-    locale: L,
-    render: et,
-    max: n = 100,
-    min: o = 0,
-    minStepsBetweenValues: f = 0,
-    name: ae,
-    onValueChange: se,
-    onValueCommitted: ie,
-    orientation: v = "horizontal",
-    step: p = 1,
-    thumbCollisionBehavior: O = "push",
-    thumbAlignment: S = "center",
-    value: le,
-    ...ue
-  } = l, B = Le(oe), me = d(se), A = d(ie), {
-    clearErrors: ce
-  } = je(), {
-    state: U,
-    disabled: de,
-    name: fe,
-    setTouched: pe,
-    setDirty: be,
-    validityData: he,
-    shouldValidateOnChange: ge,
-    validation: m
-  } = ke(), {
-    labelId: ve
-  } = qe(), E = ee ?? ve, u = de || re, b = fe ?? ae, [r, Re] = Ie({
-    controlled: le,
-    default: te ?? o,
-    name: "Slider"
-  }), x = t.useRef(null), R = t.useRef(null), V = t.useRef([]), F = t.useRef(null), k = t.useRef(null), j = t.useRef(-1), q = t.useRef(null), y = t.useRef(null), I = t.useRef("none"), w = De(ne), [h, ye] = t.useState(-1), [_, Ce] = t.useState(-1), [C, z] = t.useState(!1), [G, Se] = t.useState(() => /* @__PURE__ */ new Map()), [H, J] = t.useState([void 0, void 0]), D = d((e) => {
-    ye(e), e !== -1 && Ce(e);
-  });
-  Fe({
-    id: B,
-    commit: m.commit,
-    value: r,
-    controlRef: R,
-    name: b,
-    getValue: () => r
-  }), Te(r, () => {
-    ce(b), ge() ? m.commit(r) : m.commit(r, !0);
-    const e = he.initialValue;
-    let a;
-    Array.isArray(r) && Array.isArray(e) ? a = !Z(r, e) : a = r !== e, be(a);
-  });
-  const K = d((e) => {
-    e && (R.current = e);
-  }), P = Array.isArray(r), g = t.useMemo(() => P ? r.slice().sort(we) : [Be(r, o, n)], [n, o, P, r]), M = d((e, a) => {
-    if (Number.isNaN(e) || Ye(e, r))
-      return;
-    const s = a ?? X(Je, void 0, void 0, {
-      activeThumbIndex: -1
-    });
-    I.current = s.reason;
-    const c = new event.constructor(event.type, event);
-    Object.defineProperty(c, "target", {
-      writable: !0,
-      value: {
-        value: e,
-        name: b
-      }
-    }), s.event = c, y.current = e, me(e, s), !s.isCanceled && Re(e);
-  }), Q = d((e, a, s) => {
-    const c = _e(e, a, o, n, P, g);
-    if (ze(c, p, f)) {
-      const W = Xe(s);
-      M(c, X(W, s.nativeEvent, void 0, {
-        activeThumbIndex: a
-      })), pe(!0);
-      const xe = y.current ?? c;
-      A(xe, Ne(W, s.nativeEvent));
+function b(t, e) {
+  if (!t || !e)
+    return !1;
+  const r = e.getRootNode?.();
+  if (t.contains(e))
+    return !0;
+  if (r && i(r)) {
+    let o = e;
+    for (; o; ) {
+      if (t === o)
+        return !0;
+      o = o.parentNode || o.host;
     }
-  });
-  process.env.NODE_ENV !== "production" && o >= n && Me("Slider `max` must be greater than `min`."), Pe(() => {
-    const e = We(Ve(x.current));
-    u && e && x.current?.contains(e) && e.blur();
-  }, [u]), u && h !== -1 && D(-1);
-  const N = t.useMemo(() => ({
-    ...U,
-    activeThumbIndex: h,
-    disabled: u,
-    dragging: C,
-    orientation: v,
-    max: n,
-    min: o,
-    minStepsBetweenValues: f,
-    step: p,
-    values: g
-  }), [U, h, u, C, n, o, f, v, p, g]), Ae = t.useMemo(() => ({
-    active: h,
-    controlRef: R,
-    disabled: u,
-    dragging: C,
-    validation: m,
-    formatOptionsRef: w,
-    handleInputChange: Q,
-    indicatorPosition: H,
-    inset: S !== "center",
-    labelId: E,
-    largeStep: T,
-    lastUsedThumbIndex: _,
-    lastChangedValueRef: y,
-    lastChangeReasonRef: I,
-    locale: L,
-    max: n,
-    min: o,
-    minStepsBetweenValues: f,
-    name: b,
-    onValueCommitted: A,
-    orientation: v,
-    pressedInputRef: F,
-    pressedThumbCenterOffsetRef: k,
-    pressedThumbIndexRef: j,
-    pressedValuesRef: q,
-    registerFieldControlRef: K,
-    renderBeforeHydration: S === "edge",
-    setActive: D,
-    setDragging: z,
-    setIndicatorPosition: J,
-    setValue: M,
-    state: N,
-    step: p,
-    thumbCollisionBehavior: O,
-    thumbMap: G,
-    thumbRefs: V,
-    values: g
-  }), [h, R, E, u, C, m, w, Q, H, T, _, y, I, L, n, o, f, b, A, v, F, k, j, q, K, D, z, J, M, N, p, O, S, G, V, g]), Ee = Oe("div", l, {
-    state: N,
-    ref: [$, x],
-    props: [{
-      "aria-labelledby": E,
-      id: B,
-      role: "group"
-    }, m.getValidationProps, ue],
-    stateAttributesMapping: Ge
-  });
-  return /* @__PURE__ */ Y(He.Provider, {
-    value: Ae,
-    children: /* @__PURE__ */ Y(Ue, {
-      elementsRef: V,
-      onMapChange: Se,
-      children: Ee
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (Ze.displayName = "SliderRoot");
+  }
+  return !1;
+}
+function E(t) {
+  return "composedPath" in t ? t.composedPath()[0] : t.target;
+}
+function T(t, e) {
+  if (e == null)
+    return !1;
+  if ("composedPath" in t)
+    return t.composedPath().includes(e);
+  const r = t;
+  return r.target != null && e.contains(r.target);
+}
+function p(t) {
+  return t.matches("html,body");
+}
+function d(t) {
+  return t?.ownerDocument || document;
+}
+function a(t) {
+  return u(t) && t.matches(s);
+}
+function g(t) {
+  return t ? t.getAttribute("role") === "combobox" && a(t) : !1;
+}
+function R(t) {
+  if (!t || c)
+    return !0;
+  try {
+    return t.matches(":focus-visible");
+  } catch {
+    return !0;
+  }
+}
+function w(t) {
+  return t ? t.hasAttribute(n) ? t : t.querySelector(`[${n}]`) || t : null;
+}
 export {
-  Ze as SliderRoot
+  h as activeElement,
+  b as contains,
+  d as getDocument,
+  w as getFloatingFocusElement,
+  E as getTarget,
+  T as isEventTargetWithin,
+  p as isRootElement,
+  g as isTypeableCombobox,
+  a as isTypeableElement,
+  R as matchesFocusVisible
 };

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

@@ -1,16 +1,50 @@
-const e = "_toggle_1lewf_2", g = {
-  toggle: e,
-  "toggle--disabled": "_toggle--disabled_1lewf_31",
-  "toggle--pressed": "_toggle--pressed_1lewf_43",
-  "toggle--sm": "_toggle--sm_1lewf_62",
-  "toggle--md": "_toggle--md_1lewf_68",
-  "toggle--lg": "_toggle--lg_1lewf_74",
-  "toggle--default": "_toggle--default_1lewf_81",
-  "toggle--primary": "_toggle--primary_1lewf_86",
-  "toggle--success": "_toggle--success_1lewf_97",
-  "toggle--error": "_toggle--error_1lewf_108"
+import { getEmptyRootContext as i } from "./als-react-ts-ui395.js";
+import { EMPTY_OBJECT as n } from "./als-react-ts-ui322.js";
+import { createSelector as t } from "./als-react-ts-ui334.js";
+function l() {
+  return {
+    open: !1,
+    mounted: !1,
+    transitionStatus: "idle",
+    floatingRootContext: i(),
+    preventUnmountingOnClose: !1,
+    payload: void 0,
+    activeTriggerId: null,
+    activeTriggerElement: null,
+    popupElement: null,
+    positionerElement: null,
+    activeTriggerProps: n,
+    inactiveTriggerProps: n,
+    popupProps: n
+  };
+}
+const a = {
+  open: t((e) => e.open),
+  mounted: t((e) => e.mounted),
+  transitionStatus: t((e) => e.transitionStatus),
+  floatingRootContext: t((e) => e.floatingRootContext),
+  preventUnmountingOnClose: t((e) => e.preventUnmountingOnClose),
+  payload: t((e) => e.payload),
+  activeTriggerId: t((e) => e.activeTriggerId),
+  activeTriggerElement: t((e) => e.mounted ? e.activeTriggerElement : null),
+  /**
+   * Whether the trigger with the given ID was used to open the popup.
+   */
+  isTriggerActive: t((e, o) => o !== void 0 && e.activeTriggerId === o),
+  /**
+   * Whether the popup is open and was activated by a trigger with the given ID.
+   */
+  isOpenedByTrigger: t((e, o) => o !== void 0 && e.activeTriggerId === o && e.open),
+  /**
+   * Whether the popup is mounted and was activated by a trigger with the given ID.
+   */
+  isMountedByTrigger: t((e, o) => o !== void 0 && e.activeTriggerId === o && e.mounted),
+  triggerProps: t((e, o) => o ? e.activeTriggerProps : e.inactiveTriggerProps),
+  popupProps: t((e) => e.popupProps),
+  popupElement: t((e) => e.popupElement),
+  positionerElement: t((e) => e.positionerElement)
 };
 export {
-  g as default,
-  e as toggle
+  l as createInitialPopupStoreState,
+  a as popupStoreSelectors
 };

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

@@ -1,66 +1,202 @@
-import * as f from "react";
-import { useStableCallback as y } from "./als-react-ts-ui266.js";
-import { useControlled as G } from "./als-react-ts-ui265.js";
-import { useRenderElement as O } from "./als-react-ts-ui226.js";
-import { useToggleGroupContext as S } from "./als-react-ts-ui547.js";
-import { useButton as j } from "./als-react-ts-ui230.js";
-import { CompositeItem as w } from "./als-react-ts-ui487.js";
-import { createChangeEventDetails as D } from "./als-react-ts-ui229.js";
-import { jsx as I } from "react/jsx-runtime";
-import { none as M } from "./als-react-ts-ui231.js";
-const _ = /* @__PURE__ */ f.forwardRef(function(a, i) {
-  const {
-    className: m,
-    defaultPressed: c = !1,
-    disabled: g = !1,
-    form: z,
-    // never participates in form validation
-    onPressedChange: P,
-    pressed: C,
-    render: b,
-    type: A,
-    // cannot change button type
-    value: v,
-    nativeButton: x = !0,
-    ...E
-  } = a, r = v ?? "", e = S(), N = e?.value ?? [], T = e ? void 0 : c, n = (g || e?.disabled) ?? !1, [o, h] = G({
-    controlled: e && r ? N?.indexOf(r) > -1 : C,
-    default: T,
-    name: "Toggle",
-    state: "pressed"
-  }), R = y((s, t) => {
-    e?.setGroupValue?.(r, s, t), P?.(s, t);
-  }), {
-    getButtonProps: B,
-    buttonRef: V
-  } = j({
-    disabled: n,
-    native: x
-  }), l = f.useMemo(() => ({
-    disabled: n,
-    pressed: o
-  }), [n, o]), d = [V, i], p = [{
-    "aria-pressed": o,
-    onClick(s) {
-      const t = !o, u = D(M, s.nativeEvent);
-      R(t, u), !u.isCanceled && h(t);
+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-ui223.js";
+import { useIsoLayoutEffect as i } from "./als-react-ts-ui224.js";
+import { NOOP as d } from "./als-react-ts-ui322.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.");
     }
-  }, E, B], k = O("button", a, {
-    enabled: !e,
-    state: l,
-    ref: d,
-    props: p
-  });
-  return e ? /* @__PURE__ */ I(w, {
-    tag: "button",
-    render: b,
-    className: m,
-    state: l,
-    refs: d,
-    props: p
-  }) : k;
-});
-process.env.NODE_ENV !== "production" && (_.displayName = "Toggle");
+    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 {
-  _ as Toggle
+  O as ReactStore
 };

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

@@ -1,17 +1,50 @@
-const r = "_group_1ni9e_2", _ = {
-  group: r,
-  "group--horizontal": "_group--horizontal_1ni9e_12",
-  "group--vertical": "_group--vertical_1ni9e_16",
-  "group--disabled": "_group--disabled_1ni9e_21",
-  "group--sm": "_group--sm_1ni9e_27",
-  "group--md": "_group--md_1ni9e_32",
-  "group--lg": "_group--lg_1ni9e_37",
-  "group--default": "_group--default_1ni9e_43",
-  "group--primary": "_group--primary_1ni9e_47",
-  "group--success": "_group--success_1ni9e_52",
-  "group--error": "_group--error_1ni9e_57"
-};
+import i from "./als-react-ts-ui286.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 {
-  _ as default,
-  r as group
+  a as PopupTriggerMap
 };