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

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

@@ -0,0 +1,311 @@
+import * as n from "react";
+import { visuallyHidden as Ne } from "./als-react-ts-ui251.js";
+import { useMergedRefs as je } from "./als-react-ts-ui169.js";
+import { useRefWithInit as ze } from "./als-react-ts-ui184.js";
+import { useOnFirstRender as We } from "./als-react-ts-ui252.js";
+import { useControlled as ee } from "./als-react-ts-ui159.js";
+import { useIsoLayoutEffect as C } from "./als-react-ts-ui161.js";
+import { useStableCallback as V } from "./als-react-ts-ui160.js";
+import { useValueAsRef as Ye } from "./als-react-ts-ui225.js";
+import { SelectRootContext as Be, SelectFloatingContext as _e } from "./als-react-ts-ui253.js";
+import { useFieldRootContext as Ge } from "./als-react-ts-ui254.js";
+import { useLabelableContext as Je } from "./als-react-ts-ui255.js";
+import { useLabelableId as Ke } from "./als-react-ts-ui256.js";
+import { useTransitionStatus as Qe } from "./als-react-ts-ui218.js";
+import { selectors as y } from "./als-react-ts-ui257.js";
+import { createChangeEventDetails as te } from "./als-react-ts-ui167.js";
+import { useOpenChangeComplete as Xe } from "./als-react-ts-ui183.js";
+import { useFormContext as Ze } from "./als-react-ts-ui258.js";
+import { useField as $e } from "./als-react-ts-ui259.js";
+import { stringifyAsValue as q } from "./als-react-ts-ui260.js";
+import { defaultItemEquality as et, findItemIndex as oe } from "./als-react-ts-ui261.js";
+import { useValueChanged as tt } from "./als-react-ts-ui262.js";
+import { jsx as H, jsxs as ot } from "react/jsx-runtime";
+import { EMPTY_ARRAY as ne } from "./als-react-ts-ui212.js";
+import { useFloatingRootContext as nt } from "./als-react-ts-ui263.js";
+import { useClick as rt } from "./als-react-ts-ui200.js";
+import { useDismiss as st } from "./als-react-ts-ui240.js";
+import { useListNavigation as lt } from "./als-react-ts-ui264.js";
+import { useTypeahead as it } from "./als-react-ts-ui265.js";
+import { useInteractions as at } from "./als-react-ts-ui201.js";
+import { Store as ut } from "./als-react-ts-ui266.js";
+import { useStore as w } from "./als-react-ts-ui267.js";
+import { none as ct } from "./als-react-ts-ui168.js";
+function Yt(re) {
+  const {
+    id: N,
+    value: se,
+    defaultValue: j = null,
+    onValueChange: le,
+    open: ie,
+    defaultOpen: ae = !1,
+    onOpenChange: ue,
+    name: ce,
+    disabled: fe = !1,
+    readOnly: p = !1,
+    required: A = !1,
+    modal: S = !0,
+    actionsRef: z,
+    inputRef: de,
+    onOpenChangeComplete: E,
+    items: P,
+    multiple: r = !1,
+    itemToStringLabel: h,
+    itemToStringValue: i,
+    isItemEqualToValue: g = et,
+    children: me
+  } = re, {
+    clearErrors: pe
+  } = Ze(), {
+    setDirty: W,
+    shouldValidateOnChange: Y,
+    validityData: B,
+    setFilled: _,
+    name: ge,
+    disabled: Re,
+    validation: u
+  } = Ge(), {
+    controlId: he
+  } = Je(), I = Ke({
+    id: N
+  }), R = Re || fe, c = ge ?? ce, [t, ve] = ee({
+    controlled: se,
+    default: r ? j ?? ne : j,
+    name: "Select",
+    state: "value"
+  }), [l, Ie] = ee({
+    controlled: ie,
+    default: ae,
+    name: "Select",
+    state: "open"
+  }), M = n.useRef([]), G = n.useRef([]), T = n.useRef(null), be = n.useRef(null), xe = n.useRef(0), Ce = n.useRef(null), v = n.useRef([]), J = n.useRef(!1), Ve = n.useRef(!1), ye = n.useRef(null), we = n.useRef({
+    allowSelectedMouseUp: !1,
+    allowUnselectedMouseUp: !1
+  }), Ae = n.useRef(!1), {
+    mounted: O,
+    setMounted: Se,
+    transitionStatus: U
+  } = Qe(l), e = ze(() => new ut({
+    id: I,
+    modal: S,
+    multiple: r,
+    itemToStringLabel: h,
+    itemToStringValue: i,
+    isItemEqualToValue: g,
+    value: t,
+    open: l,
+    mounted: O,
+    transitionStatus: U,
+    items: P,
+    forceMount: !1,
+    touchModality: !1,
+    activeIndex: null,
+    selectedIndex: null,
+    popupProps: {},
+    triggerProps: {},
+    triggerElement: null,
+    positionerElement: null,
+    listElement: null,
+    scrollUpArrowVisible: !1,
+    scrollDownArrowVisible: !1,
+    hasScrollArrows: !1
+  })).current, K = w(e, y.activeIndex), Q = w(e, y.selectedIndex), Ee = w(e, y.triggerElement), Pe = w(e, y.positionerElement), Me = n.useMemo(() => r && Array.isArray(t) && t.length === 0 ? "" : q(t, i), [r, t, i]), Te = Ye(e.state.triggerElement);
+  $e({
+    id: I,
+    commit: u.commit,
+    value: t,
+    controlRef: Te,
+    name: c,
+    getValue: () => t
+  });
+  const X = n.useRef(t);
+  C(() => {
+    t !== X.current && e.set("forceMount", !0);
+  }, [e, t]), C(() => {
+    _(t !== null);
+  }, [t, _]), C(function() {
+    if (l)
+      return;
+    const s = v.current;
+    if (r) {
+      const d = Array.isArray(t) ? t : [];
+      if (d.length === 0) {
+        e.set("selectedIndex", null);
+        return;
+      }
+      const a = d[d.length - 1], x = oe(s, a, g);
+      e.set("selectedIndex", x === -1 ? null : x);
+      return;
+    }
+    const f = oe(s, t, g);
+    e.set("selectedIndex", f === -1 ? null : f);
+  }, [r, l, t, v, g, e]), tt(t, () => {
+    pe(c), W(t !== B.initialValue), Y() ? u.commit(t) : u.commit(t, !0);
+  });
+  const F = V((o, s) => {
+    if (ue?.(o, s), !s.isCanceled && (Ie(o), !o && e.state.activeIndex !== null)) {
+      const f = M.current[e.state.activeIndex];
+      queueMicrotask(() => {
+        f?.setAttribute("tabindex", "-1");
+      });
+    }
+  }), D = V(() => {
+    Se(!1), e.set("activeIndex", null), E?.(!1);
+  });
+  Xe({
+    enabled: !z,
+    open: l,
+    ref: T,
+    onComplete() {
+      l || D();
+    }
+  }), n.useImperativeHandle(z, () => ({
+    unmount: D
+  }), [D]);
+  const b = V((o, s) => {
+    le?.(o, s), !s.isCanceled && ve(o);
+  }), Z = V(() => {
+    const o = e.state.listElement || T.current;
+    if (!o)
+      return;
+    const s = o.scrollTop, f = o.scrollTop + o.clientHeight, d = s > 1, a = f < o.scrollHeight - 1;
+    e.state.scrollUpArrowVisible !== d && e.set("scrollUpArrowVisible", d), e.state.scrollDownArrowVisible !== a && e.set("scrollDownArrowVisible", a);
+  }), m = nt({
+    open: l,
+    onOpenChange: F,
+    elements: {
+      reference: Ee,
+      floating: Pe
+    }
+  }), Oe = rt(m, {
+    enabled: !p && !R,
+    event: "mousedown"
+  }), Ue = st(m, {
+    bubbles: !1
+  }), Fe = lt(m, {
+    enabled: !p && !R,
+    listRef: M,
+    activeIndex: K,
+    selectedIndex: Q,
+    disabledIndices: ne,
+    onNavigate(o) {
+      o === null && !l || e.set("activeIndex", o);
+    },
+    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
+    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
+    focusItemOnHover: !1
+  }), De = it(m, {
+    enabled: !p && !R && (l || !r),
+    listRef: G,
+    activeIndex: K,
+    selectedIndex: Q,
+    onMatch(o) {
+      l ? e.set("activeIndex", o) : b(v.current[o], te("none"));
+    },
+    onTypingChange(o) {
+      J.current = o;
+    }
+  }), {
+    getReferenceProps: L,
+    getFloatingProps: k,
+    getItemProps: $
+  } = at([Oe, Ue, Fe, De]);
+  We(() => {
+    e.update({
+      popupProps: k(),
+      triggerProps: L()
+    });
+  }), C(() => {
+    e.update({
+      id: I,
+      modal: S,
+      multiple: r,
+      value: t,
+      open: l,
+      mounted: O,
+      transitionStatus: U,
+      popupProps: k(),
+      triggerProps: L(),
+      items: P,
+      itemToStringLabel: h,
+      itemToStringValue: i,
+      isItemEqualToValue: g
+    });
+  }, [e, I, S, r, t, l, O, U, k, L, P, h, i, g]);
+  const Le = n.useMemo(() => ({
+    store: e,
+    name: c,
+    required: A,
+    disabled: R,
+    readOnly: p,
+    multiple: r,
+    itemToStringLabel: h,
+    itemToStringValue: i,
+    setValue: b,
+    setOpen: F,
+    listRef: M,
+    popupRef: T,
+    scrollHandlerRef: be,
+    handleScrollArrowVisibility: Z,
+    scrollArrowsMountedCountRef: xe,
+    getItemProps: $,
+    events: m.context.events,
+    valueRef: Ce,
+    valuesRef: v,
+    labelsRef: G,
+    typingRef: J,
+    selectionRef: we,
+    selectedItemTextRef: ye,
+    validation: u,
+    onOpenChangeComplete: E,
+    keyboardActiveRef: Ve,
+    alignItemWithTriggerActiveRef: Ae,
+    initialValueRef: X
+  }), [e, c, A, R, p, r, h, i, b, F, $, m.context.events, u, E, Z]), ke = je(de, u.inputRef), qe = r && Array.isArray(t) && t.length > 0, He = n.useMemo(() => !r || !Array.isArray(t) || !c ? null : t.map((o) => {
+    const s = q(o, i);
+    return /* @__PURE__ */ H("input", {
+      type: "hidden",
+      name: c,
+      value: s
+    }, s);
+  }), [r, t, c, i]);
+  return /* @__PURE__ */ H(Be.Provider, {
+    value: Le,
+    children: /* @__PURE__ */ ot(_e.Provider, {
+      value: m,
+      children: [me, /* @__PURE__ */ H("input", {
+        ...u.getInputValidationProps({
+          onFocus() {
+            e.state.triggerElement?.focus();
+          },
+          // Handle browser autofill.
+          onChange(o) {
+            if (o.nativeEvent.defaultPrevented)
+              return;
+            const s = o.target.value, f = te(ct, o.nativeEvent);
+            function d() {
+              if (r)
+                return;
+              const a = v.current.find((x) => q(x, i).toLowerCase() === s.toLowerCase());
+              a != null && (W(a !== B.initialValue), b(a, f), Y() && u.commit(a));
+            }
+            e.set("forceMount", !0), queueMicrotask(d);
+          }
+        }),
+        id: N || he || void 0,
+        name: r ? void 0 : c,
+        value: Me,
+        disabled: R,
+        required: A && !qe,
+        readOnly: p,
+        ref: ke,
+        style: Ne,
+        tabIndex: -1,
+        "aria-hidden": !0
+      }), He]
+    })
+  });
+}
+export {
+  Yt as SelectRoot
+};

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

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "./als-react-ts-ui65.js";
+function e(t) {
+  return /* @__PURE__ */ o("div", { className: r.root });
+}
+export {
+  e as ALSCombobox,
+  e as default
+};

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

@@ -0,0 +1,7 @@
+const o = "_root_qrq0m_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

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

@@ -0,0 +1,7 @@
+const o = "_root_10n3a_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

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

@@ -0,0 +1,7 @@
+const o = "_root_1vneq_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

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

@@ -0,0 +1,26 @@
+const o = "_viewport_x4zrf_2", t = "_root_x4zrf_16", r = "_content_x4zrf_120", _ = "_title_x4zrf_133", c = "_description_x4zrf_158", n = "_action_x4zrf_166", e = "_close_x4zrf_194", s = "_closeIcon_x4zrf_225", i = {
+  viewport: o,
+  root: t,
+  "root--success": "_root--success_x4zrf_99",
+  "root--error": "_root--error_x4zrf_103",
+  "root--warning": "_root--warning_x4zrf_107",
+  "root--info": "_root--info_x4zrf_111",
+  "root--default": "_root--default_x4zrf_115",
+  content: r,
+  title: _,
+  description: c,
+  action: n,
+  close: e,
+  closeIcon: s
+};
+export {
+  n as action,
+  e as close,
+  s as closeIcon,
+  r as content,
+  i as default,
+  c as description,
+  t as root,
+  _ as title,
+  o as viewport
+};

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

@@ -0,0 +1,25 @@
+import i from "./als-react-ts-ui197.js";
+import * as n from "react";
+import { ToastContext as m } from "./als-react-ts-ui322.js";
+function p() {
+  const o = n.useContext(m);
+  if (!o)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: useToastManager must be used within <Toast.Provider>." : i(73));
+  const {
+    toasts: t,
+    add: e,
+    close: r,
+    update: s,
+    promise: a
+  } = o;
+  return n.useMemo(() => ({
+    toasts: t,
+    add: e,
+    close: r,
+    update: s,
+    promise: a
+  }), [t, e, r, s, a]);
+}
+export {
+  p as useToastManager
+};

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

@@ -0,0 +1,172 @@
+import * as t from "react";
+import { ownerDocument as v } from "./als-react-ts-ui268.js";
+import { visuallyHidden as A } from "./als-react-ts-ui251.js";
+import { FocusGuard as F } from "./als-react-ts-ui288.js";
+import { ToastViewportContext as J } from "./als-react-ts-ui324.js";
+import { useToastContext as Q } from "./als-react-ts-ui322.js";
+import { useRenderElement as U } from "./als-react-ts-ui166.js";
+import { ToastViewportCssVars as X } from "./als-react-ts-ui325.js";
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import { getWindow as P } from "./als-react-ts-ui221.js";
+import { activeElement as S, getTarget as C, contains as L, matchesFocusVisible as G } from "./als-react-ts-ui241.js";
+const Y = /* @__PURE__ */ t.forwardRef(function(M, H) {
+  const {
+    render: ee,
+    className: re,
+    children: K,
+    ...B
+  } = M, {
+    toasts: s,
+    pauseTimers: f,
+    resumeTimers: n,
+    setHovering: l,
+    setFocused: a,
+    viewportRef: r,
+    windowFocusedRef: m,
+    prevFocusElement: p,
+    setPrevFocusElement: x,
+    expanded: R,
+    focused: g
+  } = Q(), w = t.useRef(!1), h = t.useRef(!1), o = s.length, V = s[0]?.height ?? 0, D = t.useMemo(() => s.some((e) => e.transitionStatus === "ending"), [s]);
+  t.useEffect(() => {
+    if (!r.current)
+      return;
+    function e(i) {
+      o !== 0 && i.key === "F6" && i.target !== r.current && (i.preventDefault(), x(S(v(r.current))), r.current?.focus({
+        preventScroll: !0
+      }), f(), a(!0));
+    }
+    const u = P(r.current);
+    return u.addEventListener("keydown", e), () => {
+      u.removeEventListener("keydown", e);
+    };
+  }, [f, a, x, o, r]), t.useEffect(() => {
+    if (!r.current || !o)
+      return;
+    const e = P(r.current);
+    function u(c) {
+      c.target === e && (m.current = !1, f());
+    }
+    function i(c) {
+      if (c.relatedTarget || c.target === e)
+        return;
+      const T = C(c), z = S(v(r.current));
+      (!L(r.current, T) || !G(z)) && n(), setTimeout(() => {
+        m.current = !0;
+      });
+    }
+    return e.addEventListener("blur", u, !0), e.addEventListener("focus", i, !0), () => {
+      e.removeEventListener("blur", u, !0), e.removeEventListener("focus", i, !0);
+    };
+  }, [
+    f,
+    n,
+    r,
+    m,
+    a,
+    // `viewportRef.current` isn't available on the first render,
+    // since the portal node hasn't yet been created.
+    // By adding this dependency, we ensure the window listeners
+    // are added when toasts have been created, once the ref is available.
+    o
+  ]), t.useEffect(() => {
+    const e = r.current;
+    if (!e || o === 0)
+      return;
+    const u = v(e);
+    function i(c) {
+      if (c.pointerType !== "touch")
+        return;
+      const T = C(c);
+      L(e, T) || (n(), l(!1), a(!1));
+    }
+    return u.addEventListener("pointerdown", i, !0), () => {
+      u.removeEventListener("pointerdown", i, !0);
+    };
+  }, [o, n, a, l, r]);
+  function E(e) {
+    r.current && (w.current = !0, e.relatedTarget === r.current ? s[0]?.ref?.current?.focus() : p?.focus({
+      preventScroll: !0
+    }));
+  }
+  function W(e) {
+    e.key === "Tab" && e.shiftKey && e.target === r.current && (e.preventDefault(), p?.focus({
+      preventScroll: !0
+    }), n());
+  }
+  t.useEffect(() => {
+    !m.current || D || !h.current || (n(), l(!1), h.current = !1);
+  }, [D, n, l, m]);
+  function b() {
+    f(), l(!0), h.current = !1;
+  }
+  function j() {
+    s.some((e) => e.transitionStatus === "ending") ? h.current = !0 : (n(), l(!1));
+  }
+  function k() {
+    if (w.current) {
+      w.current = !1;
+      return;
+    }
+    g || G(v(r.current).activeElement) && (a(!0), f());
+  }
+  function I(e) {
+    !g || L(r.current, e.relatedTarget) || (a(!1), n());
+  }
+  const O = {
+    tabIndex: -1,
+    role: "region",
+    "aria-live": "polite",
+    "aria-atomic": !1,
+    "aria-relevant": "additions text",
+    "aria-label": "Notifications",
+    onMouseEnter: b,
+    onMouseMove: b,
+    onMouseLeave: j,
+    onFocus: k,
+    onBlur: I,
+    onKeyDown: W,
+    onClick: k
+  }, _ = t.useMemo(() => ({
+    expanded: R
+  }), [R]), $ = U("div", M, {
+    ref: [H, r],
+    state: _,
+    props: [O, {
+      style: {
+        [X.frontmostHeight]: V ? `${V}px` : void 0
+      }
+    }, B, {
+      children: /* @__PURE__ */ y(t.Fragment, {
+        children: [o > 0 && p && /* @__PURE__ */ d(F, {
+          onFocus: E
+        }), K, o > 0 && p && /* @__PURE__ */ d(F, {
+          onFocus: E
+        })]
+      })
+    }]
+  }), q = t.useMemo(() => ({
+    viewportRef: r
+  }), [r]), N = t.useMemo(() => s.filter((e) => e.priority === "high"), [s]);
+  return /* @__PURE__ */ y(J.Provider, {
+    value: q,
+    children: [o > 0 && p && /* @__PURE__ */ d(F, {
+      onFocus: E
+    }), $, !g && N.length > 0 && /* @__PURE__ */ d("div", {
+      style: A,
+      children: N.map((e) => /* @__PURE__ */ y("div", {
+        role: "alert",
+        "aria-atomic": !0,
+        children: [/* @__PURE__ */ d("div", {
+          children: e.title
+        }), /* @__PURE__ */ d("div", {
+          children: e.description
+        })]
+      }, e.id))
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Y.displayName = "ToastViewport");
+export {
+  Y as ToastViewport
+};