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

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

@@ -1,202 +1,17 @@
-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-ui192.js";
-import { useIsoLayoutEffect as i } from "./als-react-ts-ui193.js";
-import { NOOP as d } from "./als-react-ts-ui303.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 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"
+};
 export {
-  O as ReactStore
+  _ as default,
+  r as group
 };

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

@@ -1,50 +1,77 @@
-import i from "./als-react-ts-ui259.js";
-class a {
-  constructor() {
-    this.elements = /* @__PURE__ */ new Set(), this.idMap = /* @__PURE__ */ new Map();
+import * as l from "react";
+import { useStableCallback as E } from "./als-react-ts-ui266.js";
+import { useControlled as F } from "./als-react-ts-ui265.js";
+import { useRenderElement as O } from "./als-react-ts-ui226.js";
+import { CompositeRoot as S } from "./als-react-ts-ui448.js";
+import { useToolbarRootContext as j } from "./als-react-ts-ui395.js";
+import { ToggleGroupContext as k } from "./als-react-ts-ui547.js";
+import { ToggleGroupDataAttributes as z } from "./als-react-ts-ui548.js";
+import { jsx as V } from "react/jsx-runtime";
+const v = {
+  multiple(i) {
+    return i ? {
+      [z.multiple]: ""
+    } : null;
   }
-  /**
-   * 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;
-  }
-}
+}, B = /* @__PURE__ */ l.forwardRef(function(p, m) {
+  const {
+    defaultValue: f,
+    disabled: T = !1,
+    loopFocus: x = !0,
+    onValueChange: A,
+    orientation: o = "horizontal",
+    multiple: s = !1,
+    value: u,
+    className: M,
+    render: N,
+    ...d
+  } = p, a = j(!0), h = l.useMemo(() => {
+    if (u === void 0)
+      return f ?? [];
+  }, [u, f]), t = (a?.disabled ?? !1) || T, [r, P] = F({
+    controlled: u,
+    default: h,
+    name: "ToggleGroup",
+    state: "value"
+  }), c = E((n, C, G) => {
+    let e;
+    if (s ? (e = r.slice(), C ? e.push(n) : e.splice(r.indexOf(n), 1)) : e = C ? [n] : [], Array.isArray(e)) {
+      if (A?.(e, G), G.isCanceled)
+        return;
+      P(e);
+    }
+  }), g = l.useMemo(() => ({
+    disabled: t,
+    multiple: s,
+    orientation: o
+  }), [t, o, s]), R = l.useMemo(() => ({
+    disabled: t,
+    orientation: o,
+    setGroupValue: c,
+    value: r
+  }), [t, o, c, r]), b = {
+    role: "group"
+  }, y = O("div", p, {
+    enabled: !!a,
+    state: g,
+    ref: m,
+    props: [b, d],
+    stateAttributesMapping: v
+  });
+  return /* @__PURE__ */ V(k.Provider, {
+    value: R,
+    children: a ? y : /* @__PURE__ */ V(S, {
+      render: N,
+      className: M,
+      state: g,
+      refs: [m],
+      props: [b, d],
+      stateAttributesMapping: v,
+      loopFocus: x
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (B.displayName = "ToggleGroup");
 export {
-  a as PopupTriggerMap
+  B as ToggleGroup
 };

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

@@ -1,22 +1,27 @@
-import t from "./als-react-ts-ui259.js";
-import { createSelectorCreator as s, lruMemoize as i } from "./als-react-ts-ui425.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;
+const t = "_root_hgdff_2", o = "_disabled_hgdff_35", _ = "_button_hgdff_41", a = "_buttonDisabled_hgdff_80", r = "_link_hgdff_86", n = "_group_hgdff_114", i = "_groupDisabled_hgdff_127", s = "_separator_hgdff_133", e = "_input_hgdff_153", f = {
+  root: t,
+  "orientation-horizontal": "_orientation-horizontal_hgdff_27",
+  "orientation-vertical": "_orientation-vertical_hgdff_31",
+  disabled: o,
+  button: _,
+  buttonDisabled: a,
+  link: r,
+  group: n,
+  groupDisabled: i,
+  separator: s,
+  "separator-horizontal": "_separator-horizontal_hgdff_138",
+  "separator-vertical": "_separator-vertical_hgdff_146",
+  input: e
 };
 export {
-  u as createSelector
+  _ as button,
+  a as buttonDisabled,
+  f as default,
+  o as disabled,
+  n as group,
+  i as groupDisabled,
+  e as input,
+  r as link,
+  t as root,
+  s as separator
 };

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

@@ -1,8 +1,47 @@
-import * as t from "react";
-const e = parseInt(t.version, 10);
-function o(r) {
-  return e >= r;
-}
+import * as e from "react";
+import { CompositeRoot as x } from "./als-react-ts-ui448.js";
+import { ToolbarRootContext as h } from "./als-react-ts-ui395.js";
+import { jsx as i } from "react/jsx-runtime";
+const N = /* @__PURE__ */ e.forwardRef(function(l, c) {
+  const {
+    disabled: t = !1,
+    loopFocus: p = !0,
+    orientation: o = "horizontal",
+    className: d,
+    render: m,
+    ...u
+  } = l, [a, r] = e.useState(() => /* @__PURE__ */ new Map()), f = e.useMemo(() => {
+    const n = [];
+    for (const s of a.values())
+      s?.index && !s.focusableWhenDisabled && n.push(s.index);
+    return n;
+  }, [a]), b = e.useMemo(() => ({
+    disabled: t,
+    orientation: o,
+    setItemMap: r
+  }), [t, o, r]), M = e.useMemo(() => ({
+    disabled: t,
+    orientation: o
+  }), [t, o]), R = {
+    "aria-orientation": o,
+    role: "toolbar"
+  };
+  return /* @__PURE__ */ i(h.Provider, {
+    value: b,
+    children: /* @__PURE__ */ i(x, {
+      render: m,
+      className: d,
+      state: M,
+      refs: [c],
+      props: [R, u],
+      disabledIndices: f,
+      loopFocus: p,
+      onMapChange: r,
+      orientation: o
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "ToolbarRoot");
 export {
-  o as isReactVersionAtLeast
+  N as ToolbarRoot
 };

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

@@ -1,19 +1,54 @@
-import { useIsoLayoutEffect as r } from "./als-react-ts-ui193.js";
-import { useRefWithInit as n } from "./als-react-ts-ui240.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;
-}
+import * as e from "react";
+import { useToolbarRootContext as x } from "./als-react-ts-ui395.js";
+import { useToolbarGroupContext as N } from "./als-react-ts-ui563.js";
+import { CompositeItem as T } from "./als-react-ts-ui487.js";
+import { jsx as C } from "react/jsx-runtime";
+import { useButton as R } from "./als-react-ts-ui230.js";
+const g = /* @__PURE__ */ e.forwardRef(function(r, a) {
+  const {
+    className: n,
+    disabled: i = !1,
+    focusableWhenDisabled: o = !0,
+    render: m,
+    nativeButton: u = !0,
+    ...l
+  } = r, d = e.useMemo(() => ({
+    focusableWhenDisabled: o
+  }), [o]), {
+    disabled: p,
+    orientation: s
+  } = x(), b = N(), t = p || (b?.disabled ?? !1) || i, {
+    getButtonProps: c,
+    buttonRef: f
+  } = R({
+    disabled: t,
+    focusableWhenDisabled: o,
+    native: u
+  }), B = e.useMemo(() => ({
+    disabled: t,
+    orientation: s,
+    focusable: o
+  }), [t, o, s]);
+  return /* @__PURE__ */ C(T, {
+    tag: "button",
+    render: m,
+    className: n,
+    metadata: d,
+    state: B,
+    refs: [a, f],
+    props: [
+      l,
+      // for integrating with Menu and Select disabled states, `disabled` is
+      // intentionally duplicated even though getButtonProps includes it already
+      // TODO: follow up after https://github.com/mui/base-ui/issues/1976#issuecomment-2916905663
+      {
+        disabled: t
+      },
+      c
+    ]
+  });
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "ToolbarButton");
 export {
-  s as useValueAsRef
+  g as ToolbarButton
 };

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

@@ -1,28 +1,32 @@
-import * as l from "react-dom";
-import { useAnimationFrame as m } from "./als-react-ts-ui346.js";
-import { useStableCallback as u } from "./als-react-ts-ui192.js";
-import { resolveRef as c } from "./als-react-ts-ui379.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();
-    }));
+import * as e from "react";
+import { useToolbarRootContext as i } from "./als-react-ts-ui395.js";
+import { CompositeItem as c } from "./als-react-ts-ui487.js";
+import { jsx as p } from "react/jsx-runtime";
+const f = {
+  // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
+  // TODO: better name
+  focusableWhenDisabled: !0
+}, l = /* @__PURE__ */ e.forwardRef(function(t, r) {
+  const {
+    className: s,
+    render: a,
+    ...n
+  } = t, {
+    orientation: o
+  } = i(), m = e.useMemo(() => ({
+    orientation: o
+  }), [o]);
+  return /* @__PURE__ */ p(c, {
+    tag: "a",
+    render: a,
+    className: s,
+    metadata: f,
+    state: m,
+    refs: [r],
+    props: [n]
   });
-}
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "ToolbarLink");
 export {
-  S as useAnimationsFinished
+  l as ToolbarLink
 };