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

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

@@ -0,0 +1,202 @@
+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);
+      }
+    });
+  }
+}
+export {
+  O as ReactStore
+};

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

@@ -0,0 +1,50 @@
+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;
+  }
+}
+export {
+  a as PopupTriggerMap
+};

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

@@ -0,0 +1,22 @@
+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;
+};
+export {
+  u as createSelector
+};

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

@@ -0,0 +1,8 @@
+import * as t from "react";
+const e = parseInt(t.version, 10);
+function o(r) {
+  return e >= r;
+}
+export {
+  o as isReactVersionAtLeast
+};

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

@@ -0,0 +1,11 @@
+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}`));
+  }
+}
+export {
+  s as error
+};

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

@@ -0,0 +1,14 @@
+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;
+}
+export {
+  e as CompositeRootContext,
+  r as useCompositeRootContext
+};

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

@@ -0,0 +1,24 @@
+import * as r from "react";
+function f(l) {
+  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])
+  };
+}
+export {
+  f as useFocusableWhenDisabled
+};

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

@@ -0,0 +1,11 @@
+import { ALSProgressValue as r, ALSProgressLabel as o, ALSProgressIndicator as s, ALSProgressTrack as e, ALSProgressRoot as a } from "./als-react-ts-ui91.js";
+const t = {
+  Root: a,
+  Track: e,
+  Indicator: s,
+  Label: o,
+  Value: r
+};
+export {
+  t as ALSProgress
+};

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

@@ -0,0 +1,97 @@
+import * as p from "react";
+import { useStableCallback as x } from "./als-react-ts-ui160.js";
+import { useControlled as L } from "./als-react-ts-ui159.js";
+import { useIsoLayoutEffect as k } from "./als-react-ts-ui161.js";
+import { useFieldRootContext as b } from "./als-react-ts-ui254.js";
+import { useLabelableContext as B } from "./als-react-ts-ui255.js";
+import { useLabelableId as S } from "./als-react-ts-ui256.js";
+import { fieldValidityMapping as U } from "./als-react-ts-ui269.js";
+import { useRenderElement as A } from "./als-react-ts-ui166.js";
+import { useField as K } from "./als-react-ts-ui259.js";
+import { createChangeEventDetails as O } from "./als-react-ts-ui167.js";
+import { none as _ } from "./als-react-ts-ui168.js";
+const j = /* @__PURE__ */ p.forwardRef(function(n, C) {
+  const {
+    render: z,
+    className: G,
+    id: g,
+    name: v,
+    value: o,
+    disabled: R = !1,
+    onValueChange: V,
+    defaultValue: i,
+    ...F
+  } = n, {
+    state: s,
+    name: y,
+    disabled: E
+  } = b(), l = E || R, u = y ?? v, N = p.useMemo(() => ({
+    ...s,
+    disabled: l
+  }), [s, l]), {
+    setTouched: d,
+    setDirty: P,
+    validityData: T,
+    setFocused: m,
+    setFilled: r,
+    validationMode: h,
+    validation: t
+  } = b(), {
+    labelId: D
+  } = B(), f = S({
+    id: g
+  });
+  k(() => {
+    const e = o != null;
+    t.inputRef.current?.value || e && o !== "" ? r(!0) : e && o === "" && r(!1);
+  }, [t.inputRef, r, o]);
+  const [c, I] = L({
+    controlled: o,
+    default: i,
+    name: "FieldControl",
+    state: "value"
+  }), M = o !== void 0, w = x((e, a) => {
+    V?.(e, a), !a.isCanceled && I(e);
+  });
+  return K({
+    id: f,
+    name: u,
+    commit: t.commit,
+    value: c,
+    getValue: () => t.inputRef.current?.value,
+    controlRef: t.inputRef
+  }), A("input", n, {
+    ref: C,
+    state: N,
+    props: [{
+      id: f,
+      disabled: l,
+      name: u,
+      ref: t.inputRef,
+      "aria-labelledby": D,
+      ...M ? {
+        value: c
+      } : {
+        defaultValue: i
+      },
+      onChange(e) {
+        const a = e.currentTarget.value;
+        w(a, O(_, e.nativeEvent)), P(a !== T.initialValue), r(a !== "");
+      },
+      onFocus() {
+        m(!0);
+      },
+      onBlur(e) {
+        d(!0), m(!1), h === "onBlur" && t.commit(e.currentTarget.value);
+      },
+      onKeyDown(e) {
+        e.currentTarget.tagName === "INPUT" && e.key === "Enter" && (d(!0), t.commit(e.currentTarget.value));
+      }
+    }, t.getInputValidationProps(), F],
+    stateAttributesMapping: U
+  });
+});
+process.env.NODE_ENV !== "production" && (j.displayName = "FieldControl");
+export {
+  j as FieldControl
+};

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

@@ -0,0 +1,16 @@
+const i = {
+  clip: "rect(0 0 0 0)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1
+};
+export {
+  i as visuallyHidden
+};

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

@@ -0,0 +1,8 @@
+import * as t from "react";
+function n(r) {
+  const e = t.useRef(!0);
+  e.current && (e.current = !1, r());
+}
+export {
+  n as useOnFirstRender
+};

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

@@ -0,0 +1,24 @@
+import o from "./als-react-ts-ui197.js";
+import * as e from "react";
+const n = /* @__PURE__ */ e.createContext(null);
+process.env.NODE_ENV !== "production" && (n.displayName = "SelectRootContext");
+const c = /* @__PURE__ */ e.createContext(null);
+process.env.NODE_ENV !== "production" && (c.displayName = "SelectFloatingContext");
+function s() {
+  const t = e.useContext(n);
+  if (t === null)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>." : o(60));
+  return t;
+}
+function i() {
+  const t = e.useContext(c);
+  if (t === null)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SelectFloatingContext is missing. Select parts must be placed within <Select.Root>." : o(61));
+  return t;
+}
+export {
+  c as SelectFloatingContext,
+  n as SelectRootContext,
+  i as useSelectFloatingContext,
+  s as useSelectRootContext
+};

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

@@ -0,0 +1,60 @@
+import s from "./als-react-ts-ui197.js";
+import * as a from "react";
+import { DEFAULT_VALIDITY_STATE as d } from "./als-react-ts-ui269.js";
+import { NOOP as e, EMPTY_OBJECT as o } from "./als-react-ts-ui212.js";
+const l = /* @__PURE__ */ a.createContext({
+  invalid: void 0,
+  name: void 0,
+  validityData: {
+    state: d,
+    errors: [],
+    error: "",
+    value: "",
+    initialValue: null
+  },
+  setValidityData: e,
+  disabled: void 0,
+  touched: !1,
+  setTouched: e,
+  dirty: !1,
+  setDirty: e,
+  filled: !1,
+  setFilled: e,
+  focused: !1,
+  setFocused: e,
+  validate: () => null,
+  validationMode: "onSubmit",
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => !1,
+  state: {
+    disabled: !1,
+    valid: null,
+    touched: !1,
+    dirty: !1,
+    filled: !1,
+    focused: !1
+  },
+  markedDirtyRef: {
+    current: !1
+  },
+  validation: {
+    getValidationProps: (t = o) => t,
+    getInputValidationProps: (t = o) => t,
+    inputRef: {
+      current: null
+    },
+    commit: async () => {
+    }
+  }
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "FieldRootContext");
+function f(t = !0) {
+  const i = a.useContext(l);
+  if (i.setValidityData === e && !t)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>." : s(28));
+  return i;
+}
+export {
+  l as FieldRootContext,
+  f as useFieldRootContext
+};

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

@@ -0,0 +1,19 @@
+import * as t from "react";
+import { NOOP as e } from "./als-react-ts-ui212.js";
+const o = /* @__PURE__ */ t.createContext({
+  controlId: void 0,
+  setControlId: e,
+  labelId: void 0,
+  setLabelId: e,
+  messageIds: [],
+  setMessageIds: e,
+  getDescriptionProps: (n) => n
+});
+process.env.NODE_ENV !== "production" && (o.displayName = "LabelableContext");
+function a() {
+  return t.useContext(o);
+}
+export {
+  o as LabelableContext,
+  a as useLabelableContext
+};

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

@@ -0,0 +1,29 @@
+import { useIsoLayoutEffect as s } from "./als-react-ts-ui161.js";
+import { isElement as u } from "./als-react-ts-ui221.js";
+import { useBaseUiId as m } from "./als-react-ts-ui170.js";
+import { useLabelableContext as c } from "./als-react-ts-ui255.js";
+import { NOOP as d } from "./als-react-ts-ui212.js";
+function x(f = {}) {
+  const {
+    id: e,
+    implicit: o = !1,
+    controlRef: n
+  } = f, {
+    controlId: r,
+    setControlId: t
+  } = c(), l = m(e);
+  return s(() => {
+    if (!(!o && !e || t === d)) {
+      if (o) {
+        const i = n?.current;
+        u(i) && i.closest("label") != null ? t(e ?? null) : t(r ?? l);
+      } else e && t(e);
+      return () => {
+        e && t(void 0);
+      };
+    }
+  }, [e, n, r, t, o, l]), r ?? l;
+}
+export {
+  x as useLabelableId
+};

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

@@ -0,0 +1,45 @@
+import { compareItemEquality as s } from "./als-react-ts-ui261.js";
+import { stringifyAsValue as u } from "./als-react-ts-ui260.js";
+import { createSelector as r } from "./als-react-ts-ui245.js";
+const p = {
+  id: r((e) => e.id),
+  modal: r((e) => e.modal),
+  multiple: r((e) => e.multiple),
+  items: r((e) => e.items),
+  itemToStringLabel: r((e) => e.itemToStringLabel),
+  itemToStringValue: r((e) => e.itemToStringValue),
+  isItemEqualToValue: r((e) => e.isItemEqualToValue),
+  value: r((e) => e.value),
+  open: r((e) => e.open),
+  mounted: r((e) => e.mounted),
+  forceMount: r((e) => e.forceMount),
+  transitionStatus: r((e) => e.transitionStatus),
+  touchModality: r((e) => e.touchModality),
+  activeIndex: r((e) => e.activeIndex),
+  selectedIndex: r((e) => e.selectedIndex),
+  isActive: r((e, t) => e.activeIndex === t),
+  isSelected: r((e, t, l) => {
+    const o = e.isItemEqualToValue, i = e.value;
+    return e.multiple ? Array.isArray(i) && i.some((n) => s(n, l, o)) : e.selectedIndex === t && e.selectedIndex !== null ? !0 : s(i, l, o);
+  }),
+  isSelectedByFocus: r((e, t) => e.selectedIndex === t),
+  popupProps: r((e) => e.popupProps),
+  triggerProps: r((e) => e.triggerProps),
+  triggerElement: r((e) => e.triggerElement),
+  positionerElement: r((e) => e.positionerElement),
+  listElement: r((e) => e.listElement),
+  scrollUpArrowVisible: r((e) => e.scrollUpArrowVisible),
+  scrollDownArrowVisible: r((e) => e.scrollDownArrowVisible),
+  hasScrollArrows: r((e) => e.hasScrollArrows),
+  serializedValue: r((e) => {
+    const {
+      multiple: t,
+      value: l,
+      itemToStringValue: o
+    } = e;
+    return t && Array.isArray(l) && l.length === 0 ? "" : u(l, o);
+  })
+};
+export {
+  p as selectors
+};

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

@@ -0,0 +1,23 @@
+import * as e from "react";
+import { NOOP as r } from "./als-react-ts-ui212.js";
+const t = /* @__PURE__ */ e.createContext({
+  formRef: {
+    current: {
+      fields: /* @__PURE__ */ new Map()
+    }
+  },
+  errors: {},
+  clearErrors: r,
+  validationMode: "onSubmit",
+  submitAttemptedRef: {
+    current: !1
+  }
+});
+process.env.NODE_ENV !== "production" && (t.displayName = "FormContext");
+function n() {
+  return e.useContext(t);
+}
+export {
+  t as FormContext,
+  n as useFormContext
+};