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

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

@@ -1,206 +1,85 @@
-import * as h from "react";
-import { useStableCallback as ie } from "./als-react-ts-ui192.js";
-import { isFirefox as K, isAndroid as re } from "./als-react-ts-ui371.js";
-import { useBaseUiId as ae } from "./als-react-ts-ui249.js";
-import { useRenderElement as le } from "./als-react-ts-ui189.js";
-import { useComboboxRootContext as ue, useComboboxDerivedItemsContext as ce, useComboboxInputValueContext as de } from "./als-react-ts-ui454.js";
-import { selectors as r } from "./als-react-ts-ui455.js";
-import { pressableTriggerOpenStateMapping as pe } from "./als-react-ts-ui244.js";
-import { useFieldRootContext as fe } from "./als-react-ts-ui398.js";
-import { fieldValidityMapping as me } from "./als-react-ts-ui409.js";
-import { useLabelableContext as ge } from "./als-react-ts-ui399.js";
-import { useComboboxChipsContext as ye } from "./als-react-ts-ui456.js";
-import { useComboboxPositionerContext as Ie } from "./als-react-ts-ui457.js";
-import { createChangeEventDetails as l } from "./als-react-ts-ui246.js";
-import { useDirection as xe } from "./als-react-ts-ui285.js";
-import { useStore as a } from "./als-react-ts-ui408.js";
-import { none as V, escapeKey as be, inputClear as H, inputChange as C } from "./als-react-ts-ui248.js";
-import { stopEvent as A } from "./als-react-ts-ui295.js";
-const he = {
-  ...pe,
-  ...me,
-  popupSide: (g) => g ? {
-    "data-popup-side": g
-  } : null,
-  listEmpty: (g) => g ? {
-    "data-list-empty": ""
-  } : null
-}, Ce = /* @__PURE__ */ h.forwardRef(function(k, L) {
+import * as m from "react";
+import { useComboboxRootContext as S, useComboboxInputValueContext as O } from "./als-react-ts-ui454.js";
+import { useRenderElement as N } from "./als-react-ts-ui226.js";
+import { selectors as n } from "./als-react-ts-ui455.js";
+import { useFieldRootContext as B } from "./als-react-ts-ui398.js";
+import { useTransitionStatus as P } from "./als-react-ts-ui342.js";
+import { transitionStatusMapping as w } from "./als-react-ts-ui228.js";
+import { useOpenChangeComplete as F } from "./als-react-ts-ui236.js";
+import { createChangeEventDetails as f } from "./als-react-ts-ui229.js";
+import { triggerOpenStateMapping as T } from "./als-react-ts-ui227.js";
+import { useButton as _ } from "./als-react-ts-ui230.js";
+import { useStore as s } from "./als-react-ts-ui408.js";
+import { clearPress as b } from "./als-react-ts-ui231.js";
+const j = {
+  ...w,
+  ...T
+}, q = /* @__PURE__ */ m.forwardRef(function(l, C) {
   const {
-    render: ke,
-    className: ve,
-    disabled: N = !1,
-    id: F,
-    ...P
-  } = k, {
-    state: D,
-    disabled: W,
-    setTouched: U,
-    setFocused: S,
-    validationMode: _,
-    validation: v
-  } = fe(), {
-    labelId: j
-  } = ge(), f = ye(), q = !!Ie(!0), e = ue(), {
-    filteredItems: z
-  } = ce(), T = de(), G = ae(F), J = xe(), Q = a(e, r.disabled), d = a(e, r.readOnly), M = a(e, r.name), y = a(e, r.selectionMode), X = a(e, r.autoHighlight), Y = a(e, r.inputProps), Z = a(e, r.triggerProps), I = a(e, r.open), O = a(e, r.mounted), s = a(e, r.selectedValue), $ = a(e, r.popupSide), ee = a(e, r.positionerElement), x = !!X, w = O && ee ? $ : null, m = W || Q || N, B = z.length === 0, [te, E] = h.useState(null), R = h.useRef(!1), ne = ie((t) => {
-    const n = q || e.state.inline;
-    n && !e.state.hasInputValue && e.state.setInputValue("", l(V)), e.update({
-      inputElement: t,
-      inputInsidePopup: n
-    });
-  }), oe = h.useMemo(() => ({
-    ...D,
-    open: I,
-    disabled: m,
-    readOnly: d,
-    popupSide: w,
-    listEmpty: B
-  }), [D, I, m, d, w, B]);
-  function se(t) {
-    if (!f)
-      return;
-    let n;
-    const {
-      highlightedChipIndex: i
-    } = f;
-    if (i !== void 0) {
-      if (t.key === "ArrowLeft")
-        t.preventDefault(), i > 0 ? n = i - 1 : n = void 0;
-      else if (t.key === "ArrowRight")
-        t.preventDefault(), i < s.length - 1 ? n = i + 1 : n = void 0;
-      else if (t.key === "Backspace" || t.key === "Delete") {
-        t.preventDefault();
-        const u = i >= s.length - 1 ? s.length - 2 : i;
-        n = u >= 0 ? u : void 0, e.state.setIndices({
-          activeIndex: null,
-          selectedIndex: null,
-          type: "keyboard"
-        });
-      }
-      return n;
+    render: G,
+    className: H,
+    disabled: x = !1,
+    nativeButton: y = !0,
+    keepMounted: v = !1,
+    ...R
+  } = l, {
+    disabled: g
+  } = B(), e = S(), i = s(e, n.selectionMode), M = s(e, n.disabled), u = s(e, n.readOnly), d = s(e, n.open), r = s(e, n.selectedValue), I = O();
+  let t = !1;
+  i === "none" ? t = I !== "" : i === "single" ? t = r != null : t = Array.isArray(r) && r.length > 0;
+  const o = g || M || x, {
+    buttonRef: A,
+    getButtonProps: V
+  } = _({
+    native: y,
+    disabled: o
+  }), {
+    mounted: h,
+    transitionStatus: c,
+    setMounted: k
+  } = P(t), D = m.useMemo(() => ({
+    disabled: o,
+    open: d,
+    transitionStatus: c
+  }), [o, d, c]);
+  F({
+    open: t,
+    ref: e.state.clearRef,
+    onComplete() {
+      t || k(!1);
     }
-    return t.key === "ArrowLeft" && (t.currentTarget.selectionStart ?? 0) === 0 && s.length > 0 ? (t.preventDefault(), n = Math.max(s.length - 1, 0)) : t.key === "Backspace" && t.currentTarget.value === "" && s.length > 0 && (e.state.setIndices({
-      activeIndex: null,
-      selectedIndex: null,
-      type: "keyboard"
-    }), t.preventDefault()), n;
-  }
-  return le("input", k, {
-    state: oe,
-    ref: [L, e.state.inputRef, ne],
-    props: [Y, Z, {
-      type: "text",
-      value: k.value ?? te ?? T,
-      "aria-readonly": d || void 0,
-      "aria-labelledby": j,
-      disabled: m,
-      readOnly: d,
-      ...y === "none" && M && {
-        name: M
-      },
-      id: G,
-      onFocus() {
-        S(!0);
-      },
-      onBlur() {
-        if (U(!0), S(!1), _ === "onBlur") {
-          const t = y === "none" ? T : s;
-          v.commit(t);
-        }
-      },
-      onCompositionStart(t) {
-        re || (R.current = !0, E(t.currentTarget.value));
-      },
-      onCompositionEnd(t) {
-        R.current = !1;
-        const n = t.currentTarget.value;
-        E(null), e.state.setInputValue(n, l(C, t.nativeEvent));
+  });
+  const E = N("button", l, {
+    state: D,
+    ref: [C, A, e.state.clearRef],
+    props: [{
+      tabIndex: -1,
+      children: "x",
+      disabled: o,
+      "aria-readonly": u || void 0,
+      // Avoid stealing focus from the input.
+      onMouseDown(a) {
+        a.preventDefault();
       },
-      onChange(t) {
-        if (R.current) {
-          const p = t.currentTarget.value;
-          E(p), p === "" && !e.state.openOnInputClick && !e.state.inputInsidePopup && e.state.setOpen(!1, l(H, t.nativeEvent));
-          const o = p.trim(), c = x && o !== "";
-          !d && !m && o !== "" && (e.state.setOpen(!0, l(C, t.nativeEvent)), x || e.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: e.state.keyboardActiveRef.current ? "keyboard" : "pointer"
-          })), I && e.state.activeIndex !== null && !c && e.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: e.state.keyboardActiveRef.current ? "keyboard" : "pointer"
-          });
+      onClick(a) {
+        if (o || u)
           return;
-        }
-        e.state.setInputValue(t.currentTarget.value, l(C, t.nativeEvent));
-        const n = t.currentTarget.value === "", i = l(H, t.nativeEvent);
-        n && !e.state.inputInsidePopup && (y === "single" && e.state.setSelectedValue(null, i), e.state.openOnInputClick || e.state.setOpen(!1, i));
-        const u = t.currentTarget.value.trim();
-        !d && !m && u !== "" && (e.state.setOpen(!0, l(C, t.nativeEvent)), x || e.state.setIndices({
+        const p = e.state.keyboardActiveRef;
+        e.state.setInputValue("", f(b, a.nativeEvent)), i !== "none" ? (e.state.setSelectedValue(Array.isArray(r) ? [] : null, f(b, a.nativeEvent)), e.state.setIndices({
           activeIndex: null,
           selectedIndex: null,
-          type: e.state.keyboardActiveRef.current ? "keyboard" : "pointer"
-        })), I && e.state.activeIndex !== null && !x && e.state.setIndices({
+          type: p.current ? "keyboard" : "pointer"
+        })) : e.state.setIndices({
           activeIndex: null,
-          selectedIndex: null,
-          type: e.state.keyboardActiveRef.current ? "keyboard" : "pointer"
-        });
-      },
-      onKeyDown(t) {
-        if (m || d || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey)
-          return;
-        e.state.keyboardActiveRef.current = !0;
-        const n = t.currentTarget, i = n.scrollWidth - n.clientWidth, u = J === "rtl";
-        if (t.key === "Home") {
-          A(t);
-          const o = K && u ? n.value.length : 0;
-          n.setSelectionRange(o, o), n.scrollLeft = 0;
-          return;
-        }
-        if (t.key === "End") {
-          A(t);
-          const o = K && u ? 0 : n.value.length;
-          n.setSelectionRange(o, o), n.scrollLeft = u ? -i : i;
-          return;
-        }
-        if (!O && t.key === "Escape") {
-          const o = y === "multiple" && Array.isArray(s) ? s.length === 0 : s === null, c = l(be, t.nativeEvent), b = y === "multiple" ? [] : null;
-          e.state.setInputValue("", c), e.state.setSelectedValue(b, c), !o && !e.state.inline && !c.isPropagationAllowed && t.stopPropagation();
-          return;
-        }
-        if (f && t.key === "Backspace" && n.value === "" && f.highlightedChipIndex === void 0 && Array.isArray(s) && s.length > 0) {
-          const o = s.slice(0, -1);
-          e.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: e.state.keyboardActiveRef.current ? "keyboard" : "pointer"
-          }), e.state.setSelectedValue(o, l(V, t.nativeEvent));
-          return;
-        }
-        const p = se(t);
-        if (f?.setHighlightedChipIndex(p), p !== void 0 ? f?.chipsRef.current[p]?.focus() : e.state.inputRef.current?.focus(), t.which !== 229 && t.key === "Enter" && I) {
-          const o = e.state.activeIndex, c = t.nativeEvent;
-          if (o === null) {
-            e.state.setOpen(!1, l(V, c));
-            return;
-          }
-          A(t);
-          const b = e.state.listRef.current[o];
-          b && (e.state.selectionEventRef.current = c, b.click(), e.state.selectionEventRef.current = null);
-        }
-      },
-      onPointerMove() {
-        e.state.keyboardActiveRef.current = !1;
-      },
-      onPointerDown() {
-        e.state.keyboardActiveRef.current = !1;
+          type: p.current ? "keyboard" : "pointer"
+        }), e.state.inputRef.current?.focus();
       }
-    }, v ? v.getValidationProps(P) : P],
-    stateAttributesMapping: he
+    }, R, V],
+    stateAttributesMapping: j
   });
+  return v || h ? E : null;
 });
-process.env.NODE_ENV !== "production" && (Ce.displayName = "ComboboxInput");
+process.env.NODE_ENV !== "production" && (q.displayName = "ComboboxClear");
 export {
-  Ce as ComboboxInput
+  q as ComboboxClear
 };

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

@@ -1,127 +1,37 @@
 import * as p from "react";
-import { useStableCallback as $ } from "./als-react-ts-ui192.js";
-import { useTimeout as ee } from "./als-react-ts-ui195.js";
-import { ownerDocument as te } from "./als-react-ts-ui372.js";
-import { useRenderElement as oe } from "./als-react-ts-ui189.js";
-import { useComboboxRootContext as ne, useComboboxFloatingContext as re, useComboboxInputValueContext as ie } from "./als-react-ts-ui454.js";
-import { selectors as o } from "./als-react-ts-ui455.js";
-import { useFieldRootContext as se } from "./als-react-ts-ui398.js";
-import { useLabelableContext as ae } from "./als-react-ts-ui399.js";
-import { pressableTriggerOpenStateMapping as ce } from "./als-react-ts-ui244.js";
-import { getPseudoElementBounds as le } from "./als-react-ts-ui410.js";
-import { createChangeEventDetails as R } from "./als-react-ts-ui246.js";
-import { fieldValidityMapping as ue } from "./als-react-ts-ui409.js";
-import { useTypeahead as fe } from "./als-react-ts-ui393.js";
-import { useClick as de } from "./als-react-ts-ui262.js";
-import { useButton as me } from "./als-react-ts-ui247.js";
-import { useStore as n } from "./als-react-ts-ui408.js";
-import { stopEvent as pe } from "./als-react-ts-ui295.js";
-import { listNavigation as ge } from "./als-react-ts-ui248.js";
-import { getTarget as be, contains as T } from "./als-react-ts-ui331.js";
-const g = 2, xe = {
-  ...ce,
-  ...ue
-}, Re = /* @__PURE__ */ p.forwardRef(function(E, V) {
+import { useComboboxRootContext as u } from "./als-react-ts-ui454.js";
+import { popupStateMapping as d } from "./als-react-ts-ui227.js";
+import { transitionStatusMapping as f } from "./als-react-ts-ui228.js";
+import { useRenderElement as b } from "./als-react-ts-ui226.js";
+import { selectors as t } from "./als-react-ts-ui455.js";
+import { useStore as e } from "./als-react-ts-ui408.js";
+const l = {
+  ...d,
+  ...f
+}, S = /* @__PURE__ */ p.forwardRef(function(r, i) {
   const {
-    render: Ee,
-    className: Ce,
-    nativeButton: I = !0,
-    disabled: O = !1,
-    ...C
-  } = E, {
-    state: y,
-    disabled: v,
-    setTouched: B,
-    setFocused: P,
-    validationMode: S,
-    validation: b
-  } = se(), {
-    labelId: k
-  } = ae(), e = ne(), M = n(e, o.selectionMode), x = n(e, o.disabled), a = n(e, o.readOnly), F = n(e, o.listElement), N = n(e, o.triggerProps), r = n(e, o.triggerElement), i = n(e, o.inputInsidePopup), c = n(e, o.open), A = n(e, o.selectedValue), U = n(e, o.activeIndex), Y = n(e, o.selectedIndex), l = re(), L = ie(), X = ee(), s = v || x || O, h = p.useRef("");
-  function w(t) {
-    h.current = t.pointerType;
-  }
-  const D = l.select("domReferenceElement");
-  p.useEffect(() => {
-    i && r && r !== D && l.set("domReferenceElement", r);
-  }, [r, D, l, i]);
-  const {
-    reference: _
-  } = fe(l, {
-    enabled: !c && !a && !x && M === "single",
-    listRef: e.state.labelsRef,
-    activeIndex: U,
-    selectedIndex: Y,
-    onMatch(t) {
-      const f = e.state.valuesRef.current[t];
-      f !== void 0 && e.state.setSelectedValue(f, R("none"));
-    }
-  }), {
-    reference: z
-  } = de(l, {
-    enabled: !a && !x,
-    event: "mousedown"
-  }), {
-    buttonRef: H,
-    getButtonProps: K
-  } = me({
-    native: I,
-    disabled: s
-  }), j = p.useMemo(() => ({
-    ...y,
-    open: c,
-    disabled: s
-  }), [y, c, s]), q = $((t) => {
-    e.set("triggerElement", t);
-  });
-  return oe("button", E, {
-    ref: [V, H, q],
-    state: j,
-    props: [N, z, _, {
-      tabIndex: i ? 0 : -1,
-      disabled: s,
-      role: i ? "combobox" : void 0,
-      "aria-expanded": c ? "true" : "false",
-      "aria-haspopup": i ? "dialog" : "listbox",
-      "aria-controls": c ? F?.id : void 0,
-      "aria-readonly": a || void 0,
-      "aria-labelledby": k,
-      onPointerDown: w,
-      onPointerEnter: w,
-      onFocus() {
-        P(!0), !(s || a) && X.start(0, e.state.forceMount);
-      },
-      onBlur() {
-        if (B(!0), P(!1), S === "onBlur") {
-          const t = M === "none" ? L : A;
-          b.commit(t);
-        }
-      },
-      onMouseDown(t) {
-        if (s || a || (i || l.set("domReferenceElement", t.currentTarget), e.state.forceMount(), h.current !== "touch" && (e.state.inputRef.current?.focus(), i || t.preventDefault()), c))
-          return;
-        const f = te(t.currentTarget);
-        function G(u) {
-          if (!r)
-            return;
-          const d = be(u), J = e.state.positionerElement, Q = e.state.listElement;
-          if (T(r, d) || T(J, d) || T(Q, d) || d === r)
-            return;
-          const m = le(r), W = u.clientX >= m.left - g && u.clientX <= m.right + g, Z = u.clientY >= m.top - g && u.clientY <= m.bottom + g;
-          W && Z || e.state.setOpen(!1, R("cancel-open", u));
-        }
-        i && f.addEventListener("mouseup", G, {
-          once: !0
-        });
-      },
-      onKeyDown(t) {
-        s || a || (t.key === "ArrowDown" || t.key === "ArrowUp") && (pe(t), e.state.setOpen(!0, R(ge, t.nativeEvent)), e.state.inputRef.current?.focus());
+    className: C,
+    render: k,
+    ...m
+  } = r, o = u(), n = e(o, t.open), a = e(o, t.mounted), s = e(o, t.transitionStatus), c = p.useMemo(() => ({
+    open: n,
+    transitionStatus: s
+  }), [n, s]);
+  return b("div", r, {
+    state: c,
+    ref: i,
+    stateAttributesMapping: l,
+    props: [{
+      role: "presentation",
+      hidden: !a,
+      style: {
+        userSelect: "none",
+        WebkitUserSelect: "none"
       }
-    }, b ? b.getValidationProps(C) : C, K],
-    stateAttributesMapping: xe
+    }, m]
   });
 });
-process.env.NODE_ENV !== "production" && (Re.displayName = "ComboboxTrigger");
+process.env.NODE_ENV !== "production" && (S.displayName = "ComboboxBackdrop");
 export {
-  Re as ComboboxTrigger
+  S as ComboboxBackdrop
 };

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

@@ -1,20 +1,101 @@
-import * as n from "react";
-import { useRenderElement as t } from "./als-react-ts-ui189.js";
-const m = /* @__PURE__ */ n.forwardRef(function(e, o) {
+import * as a from "react";
+import { useIsoLayoutEffect as U } from "./als-react-ts-ui267.js";
+import { useStableCallback as _ } from "./als-react-ts-ui266.js";
+import { inertValue as j } from "./als-react-ts-ui239.js";
+import { useScrollLock as B } from "./als-react-ts-ui307.js";
+import { useComboboxRootContext as F, useComboboxDerivedItemsContext as z, useComboboxFloatingContext as T } from "./als-react-ts-ui454.js";
+import { ComboboxPositionerContext as W } from "./als-react-ts-ui457.js";
+import { useAnchorPositioning as q } from "./als-react-ts-ui391.js";
+import { popupStateMapping as G } from "./als-react-ts-ui227.js";
+import { useComboboxPortalContext as J } from "./als-react-ts-ui458.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as K } from "./als-react-ts-ui243.js";
+import { useRenderElement as Q } from "./als-react-ts-ui226.js";
+import { selectors as t } from "./als-react-ts-ui455.js";
+import { InternalBackdrop as X } from "./als-react-ts-ui240.js";
+import { jsxs as Y, jsx as Z } from "react/jsx-runtime";
+import { useStore as n } from "./als-react-ts-ui408.js";
+const $ = /* @__PURE__ */ a.forwardRef(function(m, u) {
   const {
-    className: c,
-    render: a,
-    ...r
-  } = e;
-  return t("span", e, {
-    ref: o,
-    props: [{
-      "aria-hidden": !0,
-      children: "▼"
-    }, r]
+    render: eo,
+    className: to,
+    anchor: f,
+    positionMethod: g = "absolute",
+    side: b = "bottom",
+    align: h = "center",
+    sideOffset: x = 0,
+    alignOffset: C = 0,
+    collisionBoundary: P = "clipping-ancestors",
+    collisionPadding: y = 5,
+    arrowPadding: E = 5,
+    sticky: w = !1,
+    disableAnchorTracking: S = !1,
+    collisionAvoidance: v = K,
+    ...I
+  } = m, e = F(), {
+    filteredItems: M
+  } = z(), R = T(), A = J(), c = n(e, t.modal), r = n(e, t.open), i = n(e, t.mounted), O = n(e, t.openMethod), d = n(e, t.triggerElement), l = n(e, t.inputElement), N = n(e, t.inputInsidePopup), p = M.length === 0, o = q({
+    anchor: f ?? (N ? d : l),
+    floatingRootContext: R,
+    positionMethod: g,
+    mounted: i,
+    side: b,
+    sideOffset: x,
+    align: h,
+    alignOffset: C,
+    arrowPadding: E,
+    collisionBoundary: P,
+    collisionPadding: y,
+    sticky: w,
+    disableAnchorTracking: S,
+    keepMounted: A,
+    collisionAvoidance: v,
+    lazyFlip: !0
+  });
+  B(r && c && O !== "touch", d);
+  const k = a.useMemo(() => {
+    const s = {
+      ...o.positionerStyles
+    };
+    return r || (s.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !i,
+      style: s
+    };
+  }, [r, i, o.positionerStyles]), H = a.useMemo(() => ({
+    open: r,
+    side: o.side,
+    align: o.align,
+    anchorHidden: o.anchorHidden,
+    empty: p
+  }), [r, o.side, o.align, o.anchorHidden, p]);
+  U(() => {
+    e.set("popupSide", o.side);
+  }, [e, o.side]);
+  const D = a.useMemo(() => ({
+    side: o.side,
+    align: o.align,
+    arrowRef: o.arrowRef,
+    arrowUncentered: o.arrowUncentered,
+    arrowStyles: o.arrowStyles,
+    anchorHidden: o.anchorHidden,
+    isPositioned: o.isPositioned
+  }), [o.side, o.align, o.arrowRef, o.arrowUncentered, o.arrowStyles, o.anchorHidden, o.isPositioned]), L = _((s) => {
+    e.set("positionerElement", s);
+  }), V = Q("div", m, {
+    state: H,
+    ref: [u, L],
+    props: [k, I],
+    stateAttributesMapping: G
+  });
+  return /* @__PURE__ */ Y(W.Provider, {
+    value: D,
+    children: [i && c && /* @__PURE__ */ Z(X, {
+      inert: j(!r),
+      cutout: l ?? d
+    }), V]
   });
 });
-process.env.NODE_ENV !== "production" && (m.displayName = "ComboboxIcon");
+process.env.NODE_ENV !== "production" && ($.displayName = "ComboboxPositioner");
 export {
-  m as ComboboxIcon
+  $ as ComboboxPositioner
 };