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

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

@@ -1,81 +1,39 @@
-import * as a from "react";
-import { useRefWithInit as T } from "./als-react-ts-ui184.js";
-import { useStableCallback as l } from "./als-react-ts-ui160.js";
-import { useIsoLayoutEffect as f } from "./als-react-ts-ui161.js";
-import { CompositeListContext as D } from "./als-react-ts-ui215.js";
-import { jsx as L } from "react/jsx-runtime";
-function k(h) {
+import * as s from "react";
+import { useMenuPositionerContext as d } from "./als-react-ts-ui475.js";
+import { useMenuRootContext as f } from "./als-react-ts-ui472.js";
+import { useRenderElement as M } from "./als-react-ts-ui226.js";
+import { popupStateMapping as l } from "./als-react-ts-ui227.js";
+const w = /* @__PURE__ */ s.forwardRef(function(e, a) {
   const {
-    children: N,
-    elementsRef: t,
-    labelsRef: o,
-    onMapChange: _
-  } = h, E = l(_), O = a.useRef(0), d = T(R).current, i = T(P).current, [p, M] = a.useState(0), c = a.useRef(p), C = l((e, u) => {
-    i.set(e, u ?? null), c.current += 1, M(c.current);
-  }), I = l((e) => {
-    i.delete(e), c.current += 1, M(c.current);
-  }), r = a.useMemo(() => {
-    const e = /* @__PURE__ */ new Map();
-    return Array.from(i.keys()).sort(S).forEach((n, m) => {
-      const s = i.get(n) ?? {};
-      e.set(n, {
-        ...s,
-        index: m
-      });
-    }), e;
-  }, [i, p]);
-  f(() => {
-    if (typeof MutationObserver != "function" || r.size === 0)
-      return;
-    const e = new MutationObserver((u) => {
-      const n = /* @__PURE__ */ new Set(), m = (s) => n.has(s) ? n.delete(s) : n.add(s);
-      u.forEach((s) => {
-        s.removedNodes.forEach(m), s.addedNodes.forEach(m);
-      }), n.size === 0 && (c.current += 1, M(c.current));
-    });
-    return r.forEach((u, n) => {
-      n.parentElement && e.observe(n.parentElement, {
-        childList: !0
-      });
-    }), () => {
-      e.disconnect();
-    };
-  }, [r]), f(() => {
-    c.current === p && (t.current.length !== r.size && (t.current.length = r.size), o && o.current.length !== r.size && (o.current.length = r.size), O.current = r.size), E(r);
-  }, [E, r, t, o, p]), f(() => () => {
-    t.current = [];
-  }, [t]), f(() => () => {
-    o && (o.current = []);
-  }, [o]);
-  const g = l((e) => (d.add(e), () => {
-    d.delete(e);
-  }));
-  f(() => {
-    d.forEach((e) => e(r));
-  }, [d, r]);
-  const b = a.useMemo(() => ({
-    register: C,
-    unregister: I,
-    subscribeMapChange: g,
-    elementsRef: t,
-    labelsRef: o,
-    nextIndexRef: O
-  }), [C, I, g, t, o, O]);
-  return /* @__PURE__ */ L(D.Provider, {
-    value: b,
-    children: N
+    className: A,
+    render: N,
+    ...i
+  } = e, {
+    store: p
+  } = f(), {
+    arrowRef: u,
+    side: r,
+    align: t,
+    arrowUncentered: o,
+    arrowStyles: m
+  } = d(), n = p.useState("open"), c = s.useMemo(() => ({
+    open: n,
+    side: r,
+    align: t,
+    uncentered: o
+  }), [n, r, t, o]);
+  return M("div", e, {
+    ref: [u, a],
+    stateAttributesMapping: l,
+    state: c,
+    props: {
+      style: m,
+      "aria-hidden": !0,
+      ...i
+    }
   });
-}
-function P() {
-  return /* @__PURE__ */ new Map();
-}
-function R() {
-  return /* @__PURE__ */ new Set();
-}
-function S(h, N) {
-  const t = h.compareDocumentPosition(N);
-  return t & Node.DOCUMENT_POSITION_FOLLOWING || t & Node.DOCUMENT_POSITION_CONTAINED_BY ? -1 : t & Node.DOCUMENT_POSITION_PRECEDING || t & Node.DOCUMENT_POSITION_CONTAINS ? 1 : 0;
-}
+});
+process.env.NODE_ENV !== "production" && (w.displayName = "MenuArrow");
 export {
-  k as CompositeList
+  w as MenuArrow
 };

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

@@ -1,10 +1,47 @@
-import * as t from "react";
-const e = /* @__PURE__ */ t.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "DirectionContext");
-function o() {
-  return t.useContext(e)?.direction ?? "ltr";
-}
+import * as i from "react";
+import { useMenuItem as P, REGULAR_ITEM as x } from "./als-react-ts-ui477.js";
+import { useMenuRootContext as C } from "./als-react-ts-ui472.js";
+import { useRenderElement as E } from "./als-react-ts-ui226.js";
+import { useBaseUiId as v } from "./als-react-ts-ui232.js";
+import { useCompositeListItem as N } from "./als-react-ts-ui275.js";
+import { useMenuPositionerContext as g } from "./als-react-ts-ui475.js";
+const h = /* @__PURE__ */ i.forwardRef(function(s, n) {
+  const {
+    render: A,
+    className: B,
+    id: m,
+    label: u,
+    nativeButton: a = !1,
+    disabled: e = !1,
+    closeOnClick: d = !0,
+    ...c
+  } = s, r = N({
+    label: u
+  }), p = g(!0), f = v(m), {
+    store: t
+  } = C(), o = t.useState("isActive", r.index), l = t.useState("itemProps"), {
+    getItemProps: I,
+    itemRef: M
+  } = P({
+    closeOnClick: d,
+    disabled: e,
+    highlighted: o,
+    id: f,
+    store: t,
+    nativeButton: a,
+    nodeId: p?.nodeId,
+    itemMetadata: x
+  }), R = i.useMemo(() => ({
+    disabled: e,
+    highlighted: o
+  }), [e, o]);
+  return E("div", s, {
+    state: R,
+    props: [l, c, I],
+    ref: [M, n, r.ref]
+  });
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "MenuItem");
 export {
-  e as DirectionContext,
-  o as useDirection
+  h as MenuItem
 };

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

@@ -1,14 +1,28 @@
-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 = "AccordionRootContext");
-function c() {
-  const o = t.useContext(e);
-  if (o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>." : n(10));
-  return o;
-}
+import * as e from "react";
+import { useRenderElement as l } from "./als-react-ts-ui226.js";
+import { MenuGroupContext as p } from "./als-react-ts-ui476.js";
+import { jsx as d } from "react/jsx-runtime";
+const i = /* @__PURE__ */ e.forwardRef(function(r, t) {
+  const {
+    render: c,
+    className: f,
+    ...n
+  } = r, [s, o] = e.useState(void 0), u = e.useMemo(() => ({
+    setLabelId: o
+  }), [o]), a = l("div", r, {
+    ref: t,
+    props: {
+      role: "group",
+      "aria-labelledby": s,
+      ...n
+    }
+  });
+  return /* @__PURE__ */ d(p.Provider, {
+    value: u,
+    children: a
+  });
+});
+process.env.NODE_ENV !== "production" && (i.displayName = "MenuGroup");
 export {
-  e as AccordionRootContext,
-  c as useAccordionRootContext
+  i as MenuGroup
 };

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

@@ -1,57 +1,29 @@
-import R from "./als-react-ts-ui197.js";
-import * as P from "react";
-import { createElement as d } from "react";
-import { useMergedRefs as p, useMergedRefsN as b } from "./als-react-ts-ui169.js";
-import { getReactElementRef as y } from "./als-react-ts-ui207.js";
-import { mergeObjects as g } from "./als-react-ts-ui208.js";
-import { getStateAttributesProps as A } from "./als-react-ts-ui209.js";
-import { resolveClassName as M } from "./als-react-ts-ui210.js";
-import { resolveStyle as k } from "./als-react-ts-ui211.js";
-import { EMPTY_OBJECT as f } from "./als-react-ts-ui212.js";
-import { mergePropsN as v, mergeClassNames as C, mergeProps as O } from "./als-react-ts-ui213.js";
-function Y(r, e, t = {}) {
-  const i = e.render, o = w(e, t);
-  if (t.enabled === !1)
-    return null;
-  const m = t.state ?? f;
-  return B(r, i, o, m);
-}
-function w(r, e = {}) {
+import * as u from "react";
+import { useIsoLayoutEffect as p } from "./als-react-ts-ui267.js";
+import { useRenderElement as i } from "./als-react-ts-ui226.js";
+import { useBaseUiId as a } from "./als-react-ts-ui232.js";
+import { useMenuGroupRootContext as m } from "./als-react-ts-ui476.js";
+const d = /* @__PURE__ */ u.forwardRef(function(r, t) {
   const {
-    className: t,
-    style: i,
-    render: o
-  } = r, {
-    state: m = f,
-    ref: u,
-    props: a,
-    stateAttributesMapping: E,
-    enabled: s = !0
-  } = e, l = s ? M(t, m) : void 0, c = s ? k(i, m) : void 0, N = s ? A(m, E) : f, n = s ? g(N, Array.isArray(a) ? v(a) : a) ?? f : f;
-  return typeof document < "u" && (s ? Array.isArray(u) ? n.ref = b([n.ref, y(o), ...u]) : n.ref = p(n.ref, y(o), u) : p(null, null)), s ? (l !== void 0 && (n.className = C(n.className, l)), c !== void 0 && (n.style = g(n.style, c)), n) : f;
-}
-function B(r, e, t, i) {
-  if (e) {
-    if (typeof e == "function")
-      return e(t, i);
-    const o = O(t, e.props);
-    return o.ref = t.ref, /* @__PURE__ */ P.cloneElement(e, o);
-  }
-  if (r && typeof r == "string")
-    return S(r, t);
-  throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : R(8));
-}
-function S(r, e) {
-  return r === "button" ? /* @__PURE__ */ d("button", {
-    type: "button",
-    ...e,
-    key: e.key
-  }) : r === "img" ? /* @__PURE__ */ d("img", {
-    alt: "",
-    ...e,
-    key: e.key
-  }) : /* @__PURE__ */ P.createElement(r, e);
-}
+    className: c,
+    render: l,
+    id: n,
+    ...s
+  } = r, e = a(n), {
+    setLabelId: o
+  } = m();
+  return p(() => (o(e), () => {
+    o(void 0);
+  }), [o, e]), i("div", r, {
+    ref: t,
+    props: {
+      id: e,
+      role: "presentation",
+      ...s
+    }
+  });
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "MenuGroupLabel");
 export {
-  Y as useRenderElement
+  d as MenuGroupLabel
 };

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

@@ -1,35 +1,45 @@
-import { EMPTY_OBJECT as r } from "./als-react-ts-ui212.js";
-function u(e, t, n, a) {
-  let o = !1, l = !1;
-  const s = a ?? r;
-  return {
-    reason: e,
-    event: t ?? new Event("base-ui"),
-    cancel() {
-      o = !0;
-    },
-    allowPropagation() {
-      l = !0;
-    },
-    get isCanceled() {
-      return o;
-    },
-    get isPropagationAllowed() {
-      return l;
-    },
-    trigger: n,
-    ...s
-  };
-}
-function d(e, t, n) {
-  const a = n ?? r;
-  return {
-    reason: e,
-    event: t ?? new Event("base-ui"),
-    ...a
-  };
-}
+import * as o from "react";
+import { useControlled as v } from "./als-react-ts-ui265.js";
+import { useStableCallback as l } from "./als-react-ts-ui266.js";
+import { MenuRadioGroupContext as V } from "./als-react-ts-ui480.js";
+import { useRenderElement as G } from "./als-react-ts-ui226.js";
+import { jsx as b } from "react/jsx-runtime";
+const g = /* @__PURE__ */ o.memo(/* @__PURE__ */ o.forwardRef(function(r, s) {
+  const {
+    render: x,
+    className: N,
+    value: d,
+    defaultValue: i,
+    onValueChange: m,
+    disabled: e = !1,
+    ...p
+  } = r, [a, c] = v({
+    controlled: d,
+    default: i,
+    name: "MenuRadioGroup"
+  }), f = l(m), n = l((t, u) => {
+    f?.(t, u), !u.isCanceled && c(t);
+  }), R = o.useMemo(() => ({
+    disabled: e
+  }), [e]), C = G("div", r, {
+    state: R,
+    ref: s,
+    props: {
+      role: "group",
+      "aria-disabled": e || void 0,
+      ...p
+    }
+  }), M = o.useMemo(() => ({
+    value: a,
+    setValue: n,
+    disabled: e
+  }), [a, n, e]);
+  return /* @__PURE__ */ b(V.Provider, {
+    value: M,
+    children: C
+  });
+}));
+process.env.NODE_ENV !== "production" && (g.displayName = "MenuRadioGroup");
 export {
-  u as createChangeEventDetails,
-  d as createGenericEventDetails
+  g as MenuRadioGroup
 };

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

@@ -1,19 +1,75 @@
-const e = "none", s = "trigger-press", t = "trigger-hover", n = "outside-press", o = "item-press", c = "close-press", i = "clear-press", r = "input-change", p = "input-clear", a = "focus-out", g = "escape-key", l = "list-navigation", u = "pointer", v = "cancel-open", P = "imperative-action", d = "window-resize";
+import * as a from "react";
+import { useStableCallback as S } from "./als-react-ts-ui266.js";
+import { useMenuRootContext as V } from "./als-react-ts-ui472.js";
+import { useRenderElement as A } from "./als-react-ts-ui226.js";
+import { useBaseUiId as D } from "./als-react-ts-ui232.js";
+import { useMenuRadioGroupContext as O } from "./als-react-ts-ui480.js";
+import { MenuRadioItemContext as U } from "./als-react-ts-ui481.js";
+import { itemMapping as B } from "./als-react-ts-ui479.js";
+import { useCompositeListItem as G } from "./als-react-ts-ui275.js";
+import { useMenuItem as L, REGULAR_ITEM as _ } from "./als-react-ts-ui477.js";
+import { useMenuPositionerContext as j } from "./als-react-ts-ui475.js";
+import { createChangeEventDetails as w } from "./als-react-ts-ui229.js";
+import { jsx as y } from "react/jsx-runtime";
+import { itemPress as T } from "./als-react-ts-ui231.js";
+const q = /* @__PURE__ */ a.forwardRef(function(s, d) {
+  const {
+    render: F,
+    className: H,
+    id: l,
+    label: u,
+    nativeButton: c = !1,
+    disabled: p = !1,
+    closeOnClick: f = !1,
+    value: r,
+    ...M
+  } = s, n = G({
+    label: u
+  }), v = j(!0), C = D(l), {
+    store: e
+  } = V(), t = e.useState("isActive", n.index), I = e.useState("itemProps"), {
+    value: R,
+    setValue: b,
+    disabled: P
+  } = O(), o = P || p, i = R === r, {
+    getItemProps: h,
+    itemRef: x
+  } = L({
+    closeOnClick: f,
+    disabled: o,
+    highlighted: t,
+    id: C,
+    store: e,
+    nativeButton: c,
+    nodeId: v?.nodeId,
+    itemMetadata: _
+  }), m = a.useMemo(() => ({
+    disabled: o,
+    highlighted: t,
+    checked: i
+  }), [o, t, i]), g = S((k) => {
+    const N = {
+      ...w(T, k.nativeEvent),
+      preventUnmountOnClose: () => {
+      }
+    };
+    b(r, N);
+  }), E = A("div", s, {
+    state: m,
+    stateAttributesMapping: B,
+    props: [I, {
+      role: "menuitemradio",
+      "aria-checked": i,
+      onClick: g
+    }, M, h],
+    ref: [x, d, n.ref]
+  });
+  return /* @__PURE__ */ y(U.Provider, {
+    value: m,
+    children: E
+  });
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "MenuRadioItem");
 export {
-  v as cancelOpen,
-  i as clearPress,
-  c as closePress,
-  g as escapeKey,
-  a as focusOut,
-  P as imperativeAction,
-  r as inputChange,
-  p as inputClear,
-  o as itemPress,
-  l as listNavigation,
-  e as none,
-  n as outsidePress,
-  u as pointer,
-  t as triggerHover,
-  s as triggerPress,
-  d as windowResize
+  q as MenuRadioItem
 };

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

@@ -1,69 +1,44 @@
-import { useRefWithInit as r } from "./als-react-ts-ui184.js";
-function b(n, e, c, t) {
-  const l = r(i).current;
-  return s(l, n, e, c, t) && o(l, [n, e, c, t]), l.callback;
-}
-function h(n) {
-  const e = r(i).current;
-  return f(e, n) && o(e, n), e.callback;
-}
-function i() {
-  return {
-    callback: null,
-    cleanup: null,
-    refs: []
-  };
-}
-function s(n, e, c, t, l) {
-  return n.refs[0] !== e || n.refs[1] !== c || n.refs[2] !== t || n.refs[3] !== l;
-}
-function f(n, e) {
-  return n.refs.length !== e.length || n.refs.some((c, t) => c !== e[t]);
-}
-function o(n, e) {
-  if (n.refs = e, e.every((c) => c == null)) {
-    n.callback = null;
-    return;
-  }
-  n.callback = (c) => {
-    if (n.cleanup && (n.cleanup(), n.cleanup = null), c != null) {
-      const t = Array(e.length).fill(null);
-      for (let l = 0; l < e.length; l += 1) {
-        const u = e[l];
-        if (u != null)
-          switch (typeof u) {
-            case "function": {
-              const a = u(c);
-              typeof a == "function" && (t[l] = a);
-              break;
-            }
-            case "object": {
-              u.current = c;
-              break;
-            }
-          }
-      }
-      n.cleanup = () => {
-        for (let l = 0; l < e.length; l += 1) {
-          const u = e[l];
-          if (u != null)
-            switch (typeof u) {
-              case "function": {
-                const a = t[l];
-                typeof a == "function" ? a() : u(null);
-                break;
-              }
-              case "object": {
-                u.current = null;
-                break;
-              }
-            }
-        }
-      };
+import * as t from "react";
+import { useMenuRadioItemContext as m } from "./als-react-ts-ui481.js";
+import { useRenderElement as p } from "./als-react-ts-ui226.js";
+import { itemMapping as u } from "./als-react-ts-ui479.js";
+import { useTransitionStatus as l } from "./als-react-ts-ui342.js";
+import { useOpenChangeComplete as h } from "./als-react-ts-ui236.js";
+const f = /* @__PURE__ */ t.forwardRef(function(o, d) {
+  const {
+    render: M,
+    className: R,
+    keepMounted: r = !1,
+    ...s
+  } = o, e = m(), n = t.useRef(null), {
+    transitionStatus: i,
+    setMounted: a
+  } = l(e.checked);
+  h({
+    open: e.checked,
+    ref: n,
+    onComplete() {
+      e.checked || a(!1);
     }
-  };
-}
+  });
+  const c = t.useMemo(() => ({
+    checked: e.checked,
+    disabled: e.disabled,
+    highlighted: e.highlighted,
+    transitionStatus: i
+  }), [e.checked, e.disabled, e.highlighted, i]);
+  return p("span", o, {
+    state: c,
+    stateAttributesMapping: u,
+    ref: [d, n],
+    props: {
+      "aria-hidden": !0,
+      ...s
+    },
+    enabled: r || e.checked
+  });
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "MenuRadioItemIndicator");
 export {
-  b as useMergedRefs,
-  h as useMergedRefsN
+  f as MenuRadioItemIndicator
 };

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

@@ -1,7 +1,78 @@
-import { useId as r } from "./als-react-ts-ui216.js";
-function i(e) {
-  return r(e, "base-ui");
-}
+import * as c from "react";
+import { useStableCallback as A } from "./als-react-ts-ui266.js";
+import { useControlled as O } from "./als-react-ts-ui265.js";
+import { MenuCheckboxItemContext as S } from "./als-react-ts-ui478.js";
+import { useMenuItem as U, REGULAR_ITEM as B } from "./als-react-ts-ui477.js";
+import { useCompositeListItem as D } from "./als-react-ts-ui275.js";
+import { useMenuRootContext as L } from "./als-react-ts-ui472.js";
+import { useRenderElement as _ } from "./als-react-ts-ui226.js";
+import { useBaseUiId as j } from "./als-react-ts-ui232.js";
+import { itemMapping as w } from "./als-react-ts-ui479.js";
+import { useMenuPositionerContext as y } from "./als-react-ts-ui475.js";
+import { createChangeEventDetails as G } from "./als-react-ts-ui229.js";
+import { jsx as T } from "react/jsx-runtime";
+import { itemPress as V } from "./als-react-ts-ui231.js";
+const q = /* @__PURE__ */ c.forwardRef(function(r, a) {
+  const {
+    render: F,
+    className: H,
+    id: d,
+    label: l,
+    nativeButton: u = !1,
+    disabled: t = !1,
+    closeOnClick: p = !1,
+    checked: f,
+    defaultChecked: C,
+    onCheckedChange: h,
+    ...k
+  } = r, s = D({
+    label: l
+  }), x = y(!0), I = j(d), {
+    store: o
+  } = L(), n = o.useState("isActive", s.index), M = o.useState("itemProps"), [e, b] = O({
+    controlled: f,
+    default: C ?? !1,
+    name: "MenuCheckboxItem",
+    state: "checked"
+  }), {
+    getItemProps: v,
+    itemRef: P
+  } = U({
+    closeOnClick: p,
+    disabled: t,
+    highlighted: n,
+    id: I,
+    store: o,
+    nativeButton: u,
+    nodeId: x?.nodeId,
+    itemMetadata: B
+  }), i = c.useMemo(() => ({
+    disabled: t,
+    highlighted: n,
+    checked: e
+  }), [t, n, e]), g = A((R) => {
+    const m = {
+      ...G(V, R.nativeEvent),
+      preventUnmountOnClose: () => {
+      }
+    };
+    h?.(!e, m), !m.isCanceled && b((N) => !N);
+  }), E = _("div", r, {
+    state: i,
+    stateAttributesMapping: w,
+    props: [M, {
+      role: "menuitemcheckbox",
+      "aria-checked": e,
+      onClick: g
+    }, k, v],
+    ref: [P, a, s.ref]
+  });
+  return /* @__PURE__ */ T(S.Provider, {
+    value: i,
+    children: E
+  });
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "MenuCheckboxItem");
 export {
-  i as useBaseUiId
+  q as MenuCheckboxItem
 };