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

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

@@ -1,44 +1,87 @@
-import * as t from "react";
-import { useMenuCheckboxItemContext as m } from "./als-react-ts-ui471.js";
-import { useRenderElement as h } from "./als-react-ts-ui189.js";
-import { itemMapping as p } from "./als-react-ts-ui472.js";
-import { useTransitionStatus as u } from "./als-react-ts-ui344.js";
-import { useOpenChangeComplete as l } from "./als-react-ts-ui253.js";
-const f = /* @__PURE__ */ t.forwardRef(function(o, r) {
+import * as a from "react";
+import { useMenuRootContext as O } from "./als-react-ts-ui464.js";
+import { useMenuPositionerContext as D } from "./als-react-ts-ui467.js";
+import { useRenderElement as I } from "./als-react-ts-ui220.js";
+import { popupStateMapping as N } from "./als-react-ts-ui271.js";
+import { transitionStatusMapping as w } from "./als-react-ts-ui272.js";
+import { useOpenChangeComplete as G } from "./als-react-ts-ui280.js";
+import { createChangeEventDetails as K } from "./als-react-ts-ui273.js";
+import { useToolbarRootContext as _ } from "./als-react-ts-ui364.js";
+import { COMPOSITE_KEYS as j } from "./als-react-ts-ui281.js";
+import { getDisabledMountTransitionStyles as k } from "./als-react-ts-ui362.js";
+import { jsx as A } from "react/jsx-runtime";
+import { useHoverFloatingInteraction as H } from "./als-react-ts-ui365.js";
+import { FloatingFocusManager as V } from "./als-react-ts-ui282.js";
+import { outsidePress as Y } from "./als-react-ts-ui275.js";
+const q = {
+  ...N,
+  ...w
+}, z = /* @__PURE__ */ a.forwardRef(function(u, g) {
   const {
-    render: b,
-    className: g,
-    keepMounted: s = !1,
-    ...c
-  } = o, e = m(), n = t.useRef(null), {
-    transitionStatus: i,
-    setMounted: d
-  } = u(e.checked);
-  l({
-    open: e.checked,
-    ref: n,
+    render: J,
+    className: L,
+    finalFocus: i,
+    ...S
+  } = u, {
+    store: e
+  } = O(), {
+    side: p,
+    align: c
+  } = D(), y = _(!0) != null, n = e.useState("open"), r = e.useState("transitionStatus"), b = e.useState("popupProps"), x = e.useState("mounted"), m = e.useState("instantType"), C = e.useState("activeTriggerElement"), t = e.useState("parent"), E = e.useState("lastOpenChangeReason"), R = e.useState("rootId"), l = e.useState("floatingRootContext"), s = e.useState("floatingTreeRoot"), F = e.useState("closeDelay"), T = e.useState("activeTriggerElement");
+  G({
+    open: n,
+    ref: e.context.popupRef,
     onComplete() {
-      e.checked || d(!1);
+      n && e.context.onOpenChangeComplete?.(!0);
     }
+  }), a.useEffect(() => {
+    function o(d) {
+      e.setOpen(!1, K(d.reason, d.domEvent));
+    }
+    return s.events.on("close", o), () => {
+      s.events.off("close", o);
+    };
+  }, [s.events, e]);
+  const v = e.useState("hoverEnabled"), M = e.useState("disabled");
+  H(l, {
+    enabled: v && !M && t.type !== "context-menu" && t.type !== "menubar",
+    closeDelay: F
+  });
+  const h = a.useMemo(() => ({
+    transitionStatus: r,
+    side: p,
+    align: c,
+    open: n,
+    nested: t.type === "menu",
+    instant: m
+  }), [r, p, c, n, t.type, m]), P = I("div", u, {
+    state: h,
+    ref: [g, e.context.popupRef],
+    stateAttributesMapping: q,
+    props: [b, {
+      onKeyDown(o) {
+        y && j.has(o.key) && o.stopPropagation();
+      }
+    }, k(r), S, {
+      "data-rootownerid": R
+    }]
   });
-  const a = t.useMemo(() => ({
-    checked: e.checked,
-    disabled: e.disabled,
-    highlighted: e.highlighted,
-    transitionStatus: i
-  }), [e.checked, e.disabled, e.highlighted, i]);
-  return h("span", o, {
-    state: a,
-    ref: [r, n],
-    stateAttributesMapping: p,
-    props: {
-      "aria-hidden": !0,
-      ...c
-    },
-    enabled: s || e.checked
+  let f = t.type === void 0 || t.type === "context-menu";
+  return (C || t.type === "menubar" && E !== Y) && (f = !0), /* @__PURE__ */ A(V, {
+    context: l,
+    modal: !1,
+    disabled: !x,
+    returnFocus: i === void 0 ? f : i,
+    initialFocus: t.type !== "menu",
+    restoreFocus: !0,
+    externalTree: t.type !== "menubar" ? s : void 0,
+    previousFocusableElement: T,
+    nextFocusableElement: t.type === void 0 ? e.context.triggerFocusTargetRef : void 0,
+    beforeContentFocusGuardRef: t.type === void 0 ? e.context.beforeContentFocusGuardRef : void 0,
+    children: P
   });
 });
-process.env.NODE_ENV !== "production" && (f.displayName = "MenuCheckboxItemIndicator");
+process.env.NODE_ENV !== "production" && (z.displayName = "MenuPopup");
 export {
-  f as MenuCheckboxItemIndicator
+  z as MenuPopup
 };

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

@@ -1,101 +1,39 @@
-import _ from "./als-react-ts-ui259.js";
-import * as n from "react";
-import { useMenuRootContext as L } from "./als-react-ts-ui465.js";
-import { useBaseUiId as j } from "./als-react-ts-ui249.js";
-import { triggerOpenStateMapping as q } from "./als-react-ts-ui244.js";
-import { useCompositeListItem as z } from "./als-react-ts-ui290.js";
-import { useMenuItem as F } from "./als-react-ts-ui470.js";
-import { useRenderElement as G } from "./als-react-ts-ui189.js";
-import { useMenuPositionerContext as J } from "./als-react-ts-ui468.js";
-import { useMenuSubmenuRootContext as K } from "./als-react-ts-ui475.js";
-import { useTriggerRegistration as Q } from "./als-react-ts-ui261.js";
-import { useHoverReferenceInteraction as W } from "./als-react-ts-ui359.js";
-import { safePolygon as X } from "./als-react-ts-ui360.js";
-import { useClick as Y } from "./als-react-ts-ui262.js";
-import { useInteractions as Z } from "./als-react-ts-ui263.js";
-const $ = /* @__PURE__ */ n.forwardRef(function(m, S) {
+import * as s from "react";
+import { useMenuPositionerContext as d } from "./als-react-ts-ui467.js";
+import { useMenuRootContext as f } from "./als-react-ts-ui464.js";
+import { useRenderElement as M } from "./als-react-ts-ui220.js";
+import { popupStateMapping as l } from "./als-react-ts-ui271.js";
+const w = /* @__PURE__ */ s.forwardRef(function(e, a) {
   const {
-    render: te,
-    className: oe,
-    label: re,
-    id: I,
-    nativeButton: T = !1,
-    openOnHover: a = !0,
-    delay: g = 100,
-    closeDelay: s = 0,
-    disabled: E = !1,
-    ...R
-  } = m, i = z(), x = J(), {
-    store: e
-  } = L(), u = j(I), l = e.useState("open"), p = e.useState("floatingRootContext"), P = e.useState("floatingTreeRoot"), d = Q(u, e), C = n.useCallback((c) => {
-    const U = d(c);
-    return c !== null && e.select("open") && e.select("activeTriggerId") == null && e.update({
-      activeTriggerId: u,
-      activeTriggerElement: c,
-      closeDelay: s
-    }), U;
-  }, [d, s, e, u]), [f, h] = n.useState(null), b = K();
-  if (!b?.parentMenu)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>." : _(37));
-  e.useSyncedValues({
-    closeDelay: s,
-    activeTriggerElement: f
-  });
-  const t = b.parentMenu, y = t.useState("itemProps"), o = t.useState("isActive", i.index), O = n.useMemo(() => ({
-    type: "submenu-trigger",
-    setActive: () => t.set("activeIndex", i.index)
-  }), [t, i.index]), k = e.useState("disabled"), r = E || k, {
-    getItemProps: w,
-    itemRef: N
-  } = F({
-    closeOnClick: !1,
-    disabled: r,
-    highlighted: o,
-    id: u,
-    store: e,
-    nativeButton: T,
-    itemMetadata: O,
-    nodeId: x?.nodeId
-  }), B = e.useState("hoverEnabled"), M = e.useState("allowMouseEnter"), D = W(p, {
-    enabled: B && a && !r,
-    handleClose: X({
-      blockPointerEvents: !0
-    }),
-    mouseOnly: !0,
-    move: !0,
-    restMs: M ? g : void 0,
-    delay: {
-      open: M ? g : 10 ** 10,
-      close: s
-    },
-    triggerElement: f,
-    externalTree: P
-  }), A = Y(p, {
-    enabled: !r,
-    event: "mousedown",
-    toggle: !a,
-    ignoreMouse: a,
-    stickIfOpen: !1
-  }), V = Z([A]), v = e.useState("triggerProps", !0);
-  delete v.id;
-  const H = n.useMemo(() => ({
-    disabled: r,
-    highlighted: o,
-    open: l
-  }), [r, o, l]);
-  return G("div", m, {
-    state: H,
-    stateAttributesMapping: q,
-    props: [V.getReferenceProps(), D, v, y, {
-      tabIndex: l || o ? 0 : -1,
-      onBlur() {
-        o && t.set("activeIndex", null);
-      }
-    }, R, w],
-    ref: [S, i.ref, N, C, h]
+    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
+    }
   });
 });
-process.env.NODE_ENV !== "production" && ($.displayName = "MenuSubmenuTrigger");
+process.env.NODE_ENV !== "production" && (w.displayName = "MenuArrow");
 export {
-  $ as MenuSubmenuTrigger
+  w as MenuArrow
 };

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

@@ -1,24 +1,47 @@
-import * as u from "react";
-import { MenuRoot as m } from "./als-react-ts-ui198.js";
-import { useMenuRootContext as s } from "./als-react-ts-ui465.js";
-import { MenuSubmenuRootContext as c } from "./als-react-ts-ui475.js";
-import { useMenuSubmenuRootContext as R } from "./als-react-ts-ui475.js";
-import { jsx as t } from "react/jsx-runtime";
-function M(o) {
+import * as i from "react";
+import { useMenuItem as P, REGULAR_ITEM as x } from "./als-react-ts-ui469.js";
+import { useMenuRootContext as C } from "./als-react-ts-ui464.js";
+import { useRenderElement as E } from "./als-react-ts-ui220.js";
+import { useBaseUiId as v } from "./als-react-ts-ui276.js";
+import { useCompositeListItem as N } from "./als-react-ts-ui300.js";
+import { useMenuPositionerContext as g } from "./als-react-ts-ui467.js";
+const h = /* @__PURE__ */ i.forwardRef(function(s, n) {
   const {
-    closeParentOnEsc: n = !1
-  } = o, e = s().store, r = u.useMemo(() => ({
-    parentMenu: e
-  }), [e]);
-  return /* @__PURE__ */ t(c.Provider, {
-    value: r,
-    children: /* @__PURE__ */ t(m, {
-      ...o,
-      closeParentOnEsc: n
-    })
+    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 {
-  M as MenuSubmenuRoot,
-  R as useMenuSubmenuRootContext
+  h as MenuItem
 };

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

@@ -1,24 +1,28 @@
-import * as s from "react";
-import { useMenuRootContext as a } from "./als-react-ts-ui465.js";
-import { MenuPortalContext as l } from "./als-react-ts-ui467.js";
-import { jsx as t } from "react/jsx-runtime";
-import { FloatingPortal as m } from "./als-react-ts-ui258.js";
-const d = /* @__PURE__ */ s.forwardRef(function(e, r) {
+import * as e from "react";
+import { useRenderElement as l } from "./als-react-ts-ui220.js";
+import { MenuGroupContext as p } from "./als-react-ts-ui468.js";
+import { jsx as d } from "react/jsx-runtime";
+const i = /* @__PURE__ */ e.forwardRef(function(r, t) {
   const {
-    keepMounted: o = !1,
+    render: c,
+    className: f,
     ...n
-  } = e, {
-    store: u
-  } = a();
-  return u.useState("mounted") || o ? /* @__PURE__ */ t(l.Provider, {
-    value: o,
-    children: /* @__PURE__ */ t(m, {
-      ref: r,
+  } = 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
-    })
-  }) : null;
+    }
+  });
+  return /* @__PURE__ */ d(p.Provider, {
+    value: u,
+    children: a
+  });
 });
-process.env.NODE_ENV !== "production" && (d.displayName = "MenuPortal");
+process.env.NODE_ENV !== "production" && (i.displayName = "MenuGroup");
 export {
-  d as MenuPortal
+  i as MenuGroup
 };

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

@@ -1,36 +1,29 @@
-const u = "_root_ruqux_4", _ = "_label_ruqux_13", t = "_input_ruqux_25", o = "_icon_ruqux_111", i = "_positioner_ruqux_131", n = "_popup_ruqux_138", p = "_list_ruqux_157", e = "_option_ruqux_184", r = "_empty_ruqux_217", l = "_value_ruqux_227", s = {
-  root: u,
-  label: _,
-  input: t,
-  "input--default": "_input--default_ruqux_56",
-  "input--filled": "_input--filled_ruqux_60",
-  "input--outlined": "_input--outlined_ruqux_70",
-  "input--sm": "_input--sm_ruqux_78",
-  "input--md": "_input--md_ruqux_84",
-  "input--lg": "_input--lg_ruqux_90",
-  "input--error": "_input--error_ruqux_99",
-  icon: o,
-  "icon--open": "_icon--open_ruqux_124",
-  positioner: i,
-  popup: n,
-  list: p,
-  option: e,
-  "option--highlighted": "_option--highlighted_ruqux_198",
-  "option--selected": "_option--selected_ruqux_202",
-  "option--disabled": "_option--disabled_ruqux_208",
-  empty: r,
-  value: l
-};
+import * as u from "react";
+import { useIsoLayoutEffect as p } from "./als-react-ts-ui224.js";
+import { useRenderElement as i } from "./als-react-ts-ui220.js";
+import { useBaseUiId as a } from "./als-react-ts-ui276.js";
+import { useMenuGroupRootContext as m } from "./als-react-ts-ui468.js";
+const d = /* @__PURE__ */ u.forwardRef(function(r, t) {
+  const {
+    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 {
-  s as default,
-  r as empty,
-  o as icon,
-  t as input,
-  _ as label,
-  p as list,
-  e as option,
-  n as popup,
-  i as positioner,
-  u as root,
-  l as value
+  d as MenuGroupLabel
 };

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

@@ -1,22 +1,45 @@
-import "react";
-import { AriaCombobox as n } from "./als-react-ts-ui452.js";
-import { jsx as r } from "react/jsx-runtime";
-function d(e) {
+import * as o from "react";
+import { useControlled as v } from "./als-react-ts-ui292.js";
+import { useStableCallback as l } from "./als-react-ts-ui223.js";
+import { MenuRadioGroupContext as V } from "./als-react-ts-ui472.js";
+import { useRenderElement as G } from "./als-react-ts-ui220.js";
+import { jsx as b } from "react/jsx-runtime";
+const g = /* @__PURE__ */ o.memo(/* @__PURE__ */ o.forwardRef(function(r, s) {
   const {
-    multiple: o = !1,
-    defaultValue: l,
-    value: t,
-    onValueChange: a,
-    ...u
-  } = e;
-  return /* @__PURE__ */ r(n, {
-    ...u,
-    selectionMode: o ? "multiple" : "single",
-    selectedValue: t,
-    defaultSelectedValue: l,
-    onSelectedValueChange: a
+    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 {
-  d as ComboboxRoot
+  g as MenuRadioGroup
 };

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

@@ -1,18 +1,75 @@
-import * as c from "react";
-import { useComboboxRootContext as u } from "./als-react-ts-ui454.js";
-import { resolveSelectedLabel as f } from "./als-react-ts-ui404.js";
-import { selectors as r } from "./als-react-ts-ui455.js";
-import { jsx as a } from "react/jsx-runtime";
-import { useStore as l } from "./als-react-ts-ui408.js";
-function V(i) {
+import * as a from "react";
+import { useStableCallback as S } from "./als-react-ts-ui223.js";
+import { useMenuRootContext as V } from "./als-react-ts-ui464.js";
+import { useRenderElement as A } from "./als-react-ts-ui220.js";
+import { useBaseUiId as D } from "./als-react-ts-ui276.js";
+import { useMenuRadioGroupContext as O } from "./als-react-ts-ui472.js";
+import { MenuRadioItemContext as U } from "./als-react-ts-ui473.js";
+import { itemMapping as B } from "./als-react-ts-ui471.js";
+import { useCompositeListItem as G } from "./als-react-ts-ui300.js";
+import { useMenuItem as L, REGULAR_ITEM as _ } from "./als-react-ts-ui469.js";
+import { useMenuPositionerContext as j } from "./als-react-ts-ui467.js";
+import { createChangeEventDetails as w } from "./als-react-ts-ui273.js";
+import { jsx as y } from "react/jsx-runtime";
+import { itemPress as T } from "./als-react-ts-ui275.js";
+const q = /* @__PURE__ */ a.forwardRef(function(s, d) {
   const {
-    children: e
-  } = i, t = u(), m = l(t, r.itemToStringLabel), n = l(t, r.selectedValue), s = l(t, r.items);
-  let o = null;
-  return typeof e == "function" ? o = e(n) : e != null ? o = e : o = f(n, s, m), /* @__PURE__ */ a(c.Fragment, {
-    children: o
+    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 ComboboxValue
+  q as MenuRadioItem
 };

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

@@ -1,15 +1,44 @@
-const o = "_root_3fqlg_1", l = "_label_3fqlg_8", r = "_control_3fqlg_15", e = "_helperText_3fqlg_42", t = "_error_3fqlg_48", _ = {
-  root: o,
-  label: l,
-  control: r,
-  helperText: e,
-  error: t
-};
+import * as t from "react";
+import { useMenuRadioItemContext as m } from "./als-react-ts-ui473.js";
+import { useRenderElement as p } from "./als-react-ts-ui220.js";
+import { itemMapping as u } from "./als-react-ts-ui471.js";
+import { useTransitionStatus as l } from "./als-react-ts-ui349.js";
+import { useOpenChangeComplete as h } from "./als-react-ts-ui280.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 {
-  r as control,
-  _ as default,
-  t as error,
-  e as helperText,
-  l as label,
-  o as root
+  f as MenuRadioItemIndicator
 };