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

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

@@ -1,101 +1,78 @@
-import * as e from "react";
-import { useStableCallback as m } from "./als-react-ts-ui192.js";
-import { FieldRootContext as G } from "./als-react-ts-ui398.js";
-import { DEFAULT_VALIDITY_STATE as H, fieldValidityMapping as J } from "./als-react-ts-ui409.js";
-import { useFieldsetRootContext as K } from "./als-react-ts-ui418.js";
-import { useFormContext as Q } from "./als-react-ts-ui402.js";
-import { useRenderElement as W } from "./als-react-ts-ui189.js";
-import { useFieldValidation as X } from "./als-react-ts-ui419.js";
-import { jsx as y } from "react/jsx-runtime";
-import { LabelableProvider as Z } from "./als-react-ts-ui420.js";
-const C = /* @__PURE__ */ e.forwardRef(function(o, p) {
+import * as c from "react";
+import { useStableCallback as A } from "./als-react-ts-ui223.js";
+import { useControlled as O } from "./als-react-ts-ui292.js";
+import { MenuCheckboxItemContext as S } from "./als-react-ts-ui470.js";
+import { useMenuItem as U, REGULAR_ITEM as B } from "./als-react-ts-ui469.js";
+import { useCompositeListItem as D } from "./als-react-ts-ui300.js";
+import { useMenuRootContext as L } from "./als-react-ts-ui464.js";
+import { useRenderElement as _ } from "./als-react-ts-ui220.js";
+import { useBaseUiId as j } from "./als-react-ts-ui276.js";
+import { itemMapping as w } from "./als-react-ts-ui471.js";
+import { useMenuPositionerContext as y } from "./als-react-ts-ui467.js";
+import { createChangeEventDetails as G } from "./als-react-ts-ui273.js";
+import { jsx as T } from "react/jsx-runtime";
+import { itemPress as V } from "./als-react-ts-ui275.js";
+const q = /* @__PURE__ */ c.forwardRef(function(r, a) {
   const {
-    errors: h,
-    validationMode: A,
-    submitAttemptedRef: I
-  } = Q(), {
-    render: ee,
-    className: te,
-    validate: g,
-    validationDebounceTime: v = 0,
-    validationMode: i = A,
-    name: t,
-    disabled: O = !1,
-    invalid: _,
-    dirty: D,
-    touched: S,
-    ...L
-  } = o, {
-    disabled: U
-  } = K(), R = m(g || (() => null)), r = U || O, [k, j] = e.useState(!1), [B, Y] = e.useState(!1), [n, V] = e.useState(!1), [a, P] = e.useState(!1), d = D ?? B, s = S ?? k, F = e.useRef(!1), E = m((f) => {
-    D === void 0 && (f && (F.current = !0), Y(f));
-  }), M = m((f) => {
-    S === void 0 && j(f);
-  }), b = m(() => i === "onChange" || i === "onSubmit" && I.current), l = !!(_ || t && {}.hasOwnProperty.call(h, t) && h[t] !== void 0), [c, N] = e.useState({
-    state: H,
-    error: "",
-    errors: [],
-    value: null,
-    initialValue: null
-  }), T = !l && c.state.valid, u = e.useMemo(() => ({
-    disabled: r,
-    touched: s,
-    dirty: d,
-    valid: T,
-    filled: n,
-    focused: a
-  }), [r, s, d, T, n, a]), x = X({
-    setValidityData: N,
-    validate: R,
-    validityData: c,
-    validationDebounceTime: v,
-    invalid: l,
-    markedDirtyRef: F,
-    state: u,
-    name: t,
-    shouldValidateOnChange: b
-  }), q = e.useMemo(() => ({
-    invalid: l,
-    name: t,
-    validityData: c,
-    setValidityData: N,
-    disabled: r,
-    touched: s,
-    setTouched: M,
-    dirty: d,
-    setDirty: E,
-    filled: n,
-    setFilled: V,
-    focused: a,
-    setFocused: P,
-    validate: R,
-    validationMode: i,
-    validationDebounceTime: v,
-    shouldValidateOnChange: b,
-    state: u,
-    markedDirtyRef: F,
-    validation: x
-  }), [l, t, c, r, s, M, d, E, n, V, a, P, R, i, v, b, u, x]), z = W("div", o, {
-    ref: p,
-    state: u,
-    props: L,
-    stateAttributesMapping: J
+    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__ */ y(G.Provider, {
-    value: q,
-    children: z
+  return /* @__PURE__ */ T(S.Provider, {
+    value: i,
+    children: E
   });
 });
-process.env.NODE_ENV !== "production" && (C.displayName = "FieldRootInner");
-const $ = /* @__PURE__ */ e.forwardRef(function(o, p) {
-  return /* @__PURE__ */ y(Z, {
-    children: /* @__PURE__ */ y(C, {
-      ...o,
-      ref: p
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && ($.displayName = "FieldRoot");
+process.env.NODE_ENV !== "production" && (q.displayName = "MenuCheckboxItem");
 export {
-  $ as FieldRoot
+  q as MenuCheckboxItem
 };

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

@@ -1,38 +1,44 @@
-import * as i from "react";
-import { useIsoLayoutEffect as u } from "./als-react-ts-ui193.js";
-import { useFieldRootContext as p } from "./als-react-ts-ui398.js";
-import { useLabelableContext as c } from "./als-react-ts-ui399.js";
-import { fieldValidityMapping as b } from "./als-react-ts-ui409.js";
-import { useBaseUiId as R } from "./als-react-ts-ui249.js";
-import { useRenderElement as g } from "./als-react-ts-ui189.js";
-import { getTarget as L } from "./als-react-ts-ui331.js";
-const x = /* @__PURE__ */ i.forwardRef(function(r, l) {
+import * as t from "react";
+import { useMenuCheckboxItemContext as m } from "./als-react-ts-ui470.js";
+import { useRenderElement as h } from "./als-react-ts-ui220.js";
+import { itemMapping as p } from "./als-react-ts-ui471.js";
+import { useTransitionStatus as u } from "./als-react-ts-ui349.js";
+import { useOpenChangeComplete as l } from "./als-react-ts-ui280.js";
+const f = /* @__PURE__ */ t.forwardRef(function(o, r) {
   const {
-    render: F,
-    className: I,
-    id: n,
-    ...a
-  } = r, s = p(!1), {
-    controlId: d,
-    setLabelId: t,
-    labelId: f
-  } = c(), o = R(n), m = i.useRef(null);
-  return u(() => (o && t(o), () => {
-    t(void 0);
-  }), [o, t]), g("label", r, {
-    ref: [l, m],
-    state: s.state,
-    props: [{
-      id: f,
-      htmlFor: d ?? void 0,
-      onMouseDown(e) {
-        L(e.nativeEvent)?.closest("button,input,select,textarea") || !e.defaultPrevented && e.detail > 1 && e.preventDefault();
-      }
-    }, a],
-    stateAttributesMapping: b
+    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,
+    onComplete() {
+      e.checked || d(!1);
+    }
+  });
+  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
   });
 });
-process.env.NODE_ENV !== "production" && (x.displayName = "FieldLabel");
+process.env.NODE_ENV !== "production" && (f.displayName = "MenuCheckboxItemIndicator");
 export {
-  x as FieldLabel
+  f as MenuCheckboxItemIndicator
 };

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

@@ -1,97 +1,101 @@
-import * as p from "react";
-import { useStableCallback as x } from "./als-react-ts-ui192.js";
-import { useControlled as L } from "./als-react-ts-ui282.js";
-import { useIsoLayoutEffect as k } from "./als-react-ts-ui193.js";
-import { useFieldRootContext as b } from "./als-react-ts-ui398.js";
-import { useLabelableContext as B } from "./als-react-ts-ui399.js";
-import { useLabelableId as S } from "./als-react-ts-ui400.js";
-import { fieldValidityMapping as U } from "./als-react-ts-ui409.js";
-import { useRenderElement as A } from "./als-react-ts-ui189.js";
-import { useField as K } from "./als-react-ts-ui403.js";
-import { createChangeEventDetails as O } from "./als-react-ts-ui246.js";
-import { none as _ } from "./als-react-ts-ui248.js";
-const j = /* @__PURE__ */ p.forwardRef(function(n, C) {
+import _ from "./als-react-ts-ui286.js";
+import * as n from "react";
+import { useMenuRootContext as L } from "./als-react-ts-ui464.js";
+import { useBaseUiId as j } from "./als-react-ts-ui276.js";
+import { triggerOpenStateMapping as q } from "./als-react-ts-ui271.js";
+import { useCompositeListItem as z } from "./als-react-ts-ui300.js";
+import { useMenuItem as F } from "./als-react-ts-ui469.js";
+import { useRenderElement as G } from "./als-react-ts-ui220.js";
+import { useMenuPositionerContext as J } from "./als-react-ts-ui467.js";
+import { useMenuSubmenuRootContext as K } from "./als-react-ts-ui474.js";
+import { useTriggerRegistration as Q } from "./als-react-ts-ui288.js";
+import { useHoverReferenceInteraction as W } from "./als-react-ts-ui355.js";
+import { safePolygon as X } from "./als-react-ts-ui356.js";
+import { useClick as Y } from "./als-react-ts-ui289.js";
+import { useInteractions as Z } from "./als-react-ts-ui290.js";
+const $ = /* @__PURE__ */ n.forwardRef(function(m, S) {
   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
+    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
   });
-  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));
+  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);
       }
-    }, t.getInputValidationProps(), F],
-    stateAttributesMapping: U
+    }, R, w],
+    ref: [S, i.ref, N, C, h]
   });
 });
-process.env.NODE_ENV !== "production" && (j.displayName = "FieldControl");
+process.env.NODE_ENV !== "production" && ($.displayName = "MenuSubmenuTrigger");
 export {
-  j as FieldControl
+  $ as MenuSubmenuTrigger
 };

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

@@ -1,34 +1,24 @@
-import * as f from "react";
-import { useIsoLayoutEffect as d } from "./als-react-ts-ui193.js";
-import { useFieldRootContext as m } from "./als-react-ts-ui398.js";
-import { useLabelableContext as l } from "./als-react-ts-ui399.js";
-import { fieldValidityMapping as c } from "./als-react-ts-ui409.js";
-import { useBaseUiId as u } from "./als-react-ts-ui249.js";
-import { useRenderElement as R } from "./als-react-ts-ui189.js";
-const x = /* @__PURE__ */ f.forwardRef(function(r, i) {
+import * as u from "react";
+import { MenuRoot as m } from "./als-react-ts-ui186.js";
+import { useMenuRootContext as s } from "./als-react-ts-ui464.js";
+import { MenuSubmenuRootContext as c } from "./als-react-ts-ui474.js";
+import { useMenuSubmenuRootContext as R } from "./als-react-ts-ui474.js";
+import { jsx as t } from "react/jsx-runtime";
+function M(o) {
   const {
-    render: E,
-    id: s,
-    className: F,
-    ...n
-  } = r, e = u(s), p = m(!1), {
-    setMessageIds: t
-  } = l();
-  return d(() => {
-    if (e)
-      return t((o) => o.concat(e)), () => {
-        t((o) => o.filter((a) => a !== e));
-      };
-  }, [e, t]), R("p", r, {
-    ref: i,
-    state: p.state,
-    props: [{
-      id: e
-    }, n],
-    stateAttributesMapping: c
+    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
+    })
   });
-});
-process.env.NODE_ENV !== "production" && (x.displayName = "FieldDescription");
+}
 export {
-  x as FieldDescription
+  M as MenuSubmenuRoot,
+  R as useMenuSubmenuRootContext
 };

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

@@ -1,48 +1,24 @@
-import * as n from "react";
-import { useIsoLayoutEffect as F } from "./als-react-ts-ui193.js";
-import { useFieldRootContext as v } from "./als-react-ts-ui398.js";
-import { useLabelableContext as x } from "./als-react-ts-ui399.js";
-import { fieldValidityMapping as N } from "./als-react-ts-ui409.js";
-import { useFormContext as R } from "./als-react-ts-ui402.js";
-import { useRenderElement as b } from "./als-react-ts-ui189.js";
-import { useBaseUiId as g } from "./als-react-ts-ui249.js";
-const h = /* @__PURE__ */ n.forwardRef(function(l, m) {
+import * as s from "react";
+import { useMenuRootContext as a } from "./als-react-ts-ui464.js";
+import { MenuPortalContext as l } from "./als-react-ts-ui466.js";
+import { jsx as t } from "react/jsx-runtime";
+import { FloatingPortal as m } from "./als-react-ts-ui285.js";
+const d = /* @__PURE__ */ s.forwardRef(function(e, r) {
   const {
-    render: I,
-    id: d,
-    className: M,
-    match: i,
-    ...u
-  } = l, t = g(d), {
-    validityData: o,
-    state: c,
-    name: a
-  } = v(!1), {
-    setMessageIds: s
-  } = x(), {
-    errors: p
-  } = R(), f = a ? p[a] : null;
-  let e = !1;
-  f || i === !0 ? e = !0 : i ? e = !!o.state[i] : e = o.state.valid === !1, F(() => {
-    if (!(!e || !t))
-      return s((r) => r.concat(t)), () => {
-        s((r) => r.filter((y) => y !== t));
-      };
-  }, [e, t, s]);
-  const E = b("div", l, {
-    ref: m,
-    state: c,
-    props: [{
-      id: t,
-      children: f || (o.errors.length > 1 ? /* @__PURE__ */ n.createElement("ul", {}, o.errors.map((r) => /* @__PURE__ */ n.createElement("li", {
-        key: r
-      }, r))) : o.error)
-    }, u],
-    stateAttributesMapping: N
-  });
-  return e ? E : null;
+    keepMounted: o = !1,
+    ...n
+  } = e, {
+    store: u
+  } = a();
+  return u.useState("mounted") || o ? /* @__PURE__ */ t(l.Provider, {
+    value: o,
+    children: /* @__PURE__ */ t(m, {
+      ref: r,
+      ...n
+    })
+  }) : null;
 });
-process.env.NODE_ENV !== "production" && (h.displayName = "FieldError");
+process.env.NODE_ENV !== "production" && (d.displayName = "MenuPortal");
 export {
-  h as FieldError
+  d as MenuPortal
 };

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

@@ -1,9 +1,55 @@
-const o = "_root_1as67_1", e = "_legend_1as67_8", t = {
-  root: o,
-  legend: e
+const e = "_Trigger_y8p83_7", t = "_TriggerIcon_y8p83_55", o = "_Positioner_y8p83_65", r = "_Popup_y8p83_71", _ = "_Arrow_y8p83_91", n = "_ArrowFill_y8p83_115", I = "_ArrowOuterStroke_y8p83_119", c = "_ArrowInnerStroke_y8p83_123", m = "_Item_y8p83_128", p = "_ItemIcon_y8p83_200", i = "_ItemLabel_y8p83_215", a = "_ItemShortcut_y8p83_220", g = "_Separator_y8p83_229", s = "_GroupLabel_y8p83_236", u = "_CheckboxItem_y8p83_250", y = "_CheckboxItemIndicator_y8p83_286", b = "_CheckboxItemText_y8p83_295", S = "_RadioItem_y8p83_300", T = "_RadioItemIndicator_y8p83_336", d = "_RadioItemText_y8p83_345", l = "_SubmenuTrigger_y8p83_350", x = "_SubmenuTriggerLabel_y8p83_393", k = "_SubmenuTriggerIcon_y8p83_397", h = {
+  Trigger: e,
+  TriggerIcon: t,
+  Positioner: o,
+  Popup: r,
+  Arrow: _,
+  ArrowFill: n,
+  ArrowOuterStroke: I,
+  ArrowInnerStroke: c,
+  Item: m,
+  "Item--sm": "_Item--sm_y8p83_165",
+  "Item--md": "_Item--md_y8p83_171",
+  "Item--lg": "_Item--lg_y8p83_177",
+  "Item--danger": "_Item--danger_y8p83_184",
+  ItemIcon: p,
+  ItemLabel: i,
+  ItemShortcut: a,
+  Separator: g,
+  GroupLabel: s,
+  CheckboxItem: u,
+  CheckboxItemIndicator: y,
+  CheckboxItemText: b,
+  RadioItem: S,
+  RadioItemIndicator: T,
+  RadioItemText: d,
+  SubmenuTrigger: l,
+  SubmenuTriggerLabel: x,
+  SubmenuTriggerIcon: k
 };
 export {
-  t as default,
-  e as legend,
-  o as root
+  _ as Arrow,
+  n as ArrowFill,
+  c as ArrowInnerStroke,
+  I as ArrowOuterStroke,
+  u as CheckboxItem,
+  y as CheckboxItemIndicator,
+  b as CheckboxItemText,
+  s as GroupLabel,
+  m as Item,
+  p as ItemIcon,
+  i as ItemLabel,
+  a as ItemShortcut,
+  r as Popup,
+  o as Positioner,
+  S as RadioItem,
+  T as RadioItemIndicator,
+  d as RadioItemText,
+  g as Separator,
+  l as SubmenuTrigger,
+  k as SubmenuTriggerIcon,
+  x as SubmenuTriggerLabel,
+  e as Trigger,
+  t as TriggerIcon,
+  h as default
 };