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

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

@@ -0,0 +1,134 @@
+import * as I from "react";
+import { isElementDisabled as te } from "./als-react-ts-ui278.js";
+import { useStableCallback as F } from "./als-react-ts-ui266.js";
+import { useMergedRefs as ne } from "./als-react-ts-ui272.js";
+import { scrollIntoViewIfNeeded as P, ALL_KEYS as re, ARROW_KEYS as ie, isNativeInput as V, ARROW_DOWN as A, ARROW_RIGHT as C, HOME as oe, END as se, ARROW_LEFT as B, ARROW_UP as H, VERTICAL_KEYS_WITH_EXTRA_KEYS as le, VERTICAL_KEYS as ae, HORIZONTAL_KEYS_WITH_EXTRA_KEYS as ce, HORIZONTAL_KEYS as de, MODIFIER_KEYS as fe } from "./als-react-ts-ui237.js";
+import { ACTIVE_COMPOSITE_ITEM as ue } from "./als-react-ts-ui527.js";
+import { getMinListIndex as he, getMaxListIndex as Ie, createGridCellMap as ge, isListIndexDisabled as L, getGridNavigatedIndex as me, getGridCellIndexOfCorner as Re, getGridCellIndices as xe, findNonDisabledListIndex as ye, isIndexOutOfListBounds as Ee } from "./als-react-ts-ui381.js";
+const pe = [];
+function Me(b) {
+  const {
+    itemSizes: y,
+    cols: s = 1,
+    loopFocus: E = !0,
+    dense: Y = !1,
+    orientation: r = "both",
+    direction: p,
+    highlightedIndex: X,
+    onHighlightedIndexChange: Z,
+    rootRef: q,
+    enableHomeAndEndKeys: g = !1,
+    stopEventPropagation: w = !1,
+    disabledIndices: i,
+    modifierKeys: z = pe
+  } = b, [U, j] = I.useState(0), k = s > 1, m = I.useRef(null), D = ne(m, q), t = I.useRef([]), N = I.useRef(!1), l = X ?? U, R = F((e, o = !1) => {
+    if ((Z ?? j)(e), o) {
+      const f = t.current[e];
+      P(m.current, f, p, r);
+    }
+  }), G = F((e) => {
+    if (e.size === 0 || N.current)
+      return;
+    N.current = !0;
+    const o = Array.from(e.keys()), f = o.find((h) => h?.hasAttribute(ue)) ?? null, u = f ? o.indexOf(f) : -1;
+    u !== -1 && R(u), P(m.current, f, p, r);
+  }), O = I.useMemo(() => ({
+    "aria-orientation": r === "both" ? void 0 : r,
+    ref: D,
+    onFocus(e) {
+      !m.current || !V(e.target) || e.target.setSelectionRange(0, e.target.value.length ?? 0);
+    },
+    onKeyDown(e) {
+      const o = g ? re : ie;
+      if (!o.has(e.key) || Ke(e, z) || !m.current)
+        return;
+      const u = p === "rtl", h = u ? B : C, J = {
+        horizontal: h,
+        vertical: A,
+        both: h
+      }[r], K = u ? C : B, Q = {
+        horizontal: K,
+        vertical: H,
+        both: K
+      }[r];
+      if (V(e.target) && !te(e.target)) {
+        const d = e.target.selectionStart, a = e.target.selectionEnd, T = e.target.value ?? "";
+        if (d == null || e.shiftKey || d !== a || e.key !== Q && d < T.length || e.key !== J && d > 0)
+          return;
+      }
+      let n = l;
+      const S = he(t, i), _ = Ie(t, i);
+      if (k) {
+        const d = y || Array.from({
+          length: t.current.length
+        }, () => ({
+          width: 1,
+          height: 1
+        })), a = ge(d, s, Y), T = a.findIndex((c) => c != null && !L(t, c, i)), v = a.reduce((c, x, ee) => x != null && !L(t, x, i) ? ee : c, -1);
+        n = a[me({
+          current: a.map((c) => c ? t.current[c] : null)
+        }, {
+          event: e,
+          orientation: r,
+          loopFocus: E,
+          cols: s,
+          // treat undefined (empty grid spaces) as disabled indices so we
+          // don't end up in them
+          disabledIndices: xe([...i || t.current.map((c, x) => L(t, x) ? x : void 0), void 0], a),
+          minIndex: T,
+          maxIndex: v,
+          prevIndex: Re(
+            l > _ ? S : l,
+            d,
+            a,
+            s,
+            // use a corner matching the edge closest to the direction we're
+            // moving in so we don't end up in the same item. Prefer
+            // top/left over bottom/right.
+            // eslint-disable-next-line no-nested-ternary
+            e.key === A ? "bl" : e.key === C ? "tr" : "tl"
+          ),
+          rtl: u
+        })];
+      }
+      const W = {
+        horizontal: [h],
+        vertical: [A],
+        both: [h, A]
+      }[r], M = {
+        horizontal: [K],
+        vertical: [H],
+        both: [K, H]
+      }[r], $ = k ? o : {
+        horizontal: g ? ce : de,
+        vertical: g ? le : ae,
+        both: o
+      }[r];
+      g && (e.key === oe ? n = S : e.key === se && (n = _)), n === l && (W.includes(e.key) || M.includes(e.key)) && (E && n === _ && W.includes(e.key) ? n = S : E && n === S && M.includes(e.key) ? n = _ : n = ye(t, {
+        startingIndex: n,
+        decrement: M.includes(e.key),
+        disabledIndices: i
+      })), n !== l && !Ee(t, n) && (w && e.stopPropagation(), $.has(e.key) && e.preventDefault(), R(n, !0), queueMicrotask(() => {
+        t.current[n]?.focus();
+      }));
+    }
+  }), [s, Y, p, i, t, g, l, k, y, E, D, z, R, r, w]);
+  return I.useMemo(() => ({
+    props: O,
+    highlightedIndex: l,
+    onHighlightedIndexChange: R,
+    elementsRef: t,
+    disabledIndices: i,
+    onMapChange: G,
+    relayKeyboardEvent: O.onKeyDown
+  }), [O, l, R, t, i, G]);
+}
+function Ke(b, y) {
+  for (const s of fe.values())
+    if (!y.includes(s) && b.getModifierState(s))
+      return !0;
+  return !1;
+}
+export {
+  Me as useCompositeRoot
+};

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

@@ -1,15 +1,15 @@
 import * as c from "react";
-import { useDialogRootContext as h } from "./als-react-ts-ui186.js";
-import { useRenderElement as M } from "./als-react-ts-ui166.js";
-import { popupStateMapping as y } from "./als-react-ts-ui188.js";
-import { transitionStatusMapping as N } from "./als-react-ts-ui189.js";
-import { DialogPopupCssVars as v } from "./als-react-ts-ui190.js";
-import { DialogPopupDataAttributes as w } from "./als-react-ts-ui191.js";
-import { useDialogPortalContext as A } from "./als-react-ts-ui192.js";
-import { useOpenChangeComplete as K } from "./als-react-ts-ui183.js";
-import { COMPOSITE_KEYS as T } from "./als-react-ts-ui178.js";
+import { useDialogRootContext as h } from "./als-react-ts-ui224.js";
+import { useRenderElement as M } from "./als-react-ts-ui226.js";
+import { popupStateMapping as y } from "./als-react-ts-ui227.js";
+import { transitionStatusMapping as N } from "./als-react-ts-ui228.js";
+import { DialogPopupCssVars as v } from "./als-react-ts-ui233.js";
+import { DialogPopupDataAttributes as w } from "./als-react-ts-ui234.js";
+import { useDialogPortalContext as A } from "./als-react-ts-ui235.js";
+import { useOpenChangeComplete as K } from "./als-react-ts-ui236.js";
+import { COMPOSITE_KEYS as T } from "./als-react-ts-ui237.js";
 import { jsx as V } from "react/jsx-runtime";
-import { FloatingFocusManager as _ } from "./als-react-ts-ui193.js";
+import { FloatingFocusManager as _ } from "./als-react-ts-ui238.js";
 const j = {
   ...y,
   ...N,

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

@@ -0,0 +1,23 @@
+import { stringifyAsLabel as o } from "./als-react-ts-ui404.js";
+function f(r, e) {
+  return (t, i) => {
+    if (t == null)
+      return !1;
+    const n = o(t, e);
+    return r.contains(n, i);
+  };
+}
+function s(r, e, t) {
+  return (i, n) => {
+    if (i == null)
+      return !1;
+    if (!n)
+      return !0;
+    const u = o(i, e), l = t != null ? o(t, e) : "";
+    return l && r.contains(l, n) && l.length === n.length ? !0 : r.contains(u, n);
+  };
+}
+export {
+  f as createCollatorItemFilter,
+  s as createSingleSelectionCollatorFilter
+};

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

@@ -0,0 +1,8 @@
+const I = Symbol("none"), n = {
+  value: I,
+  index: -1
+};
+export {
+  n as INITIAL_LAST_HIGHLIGHT,
+  I as NO_ACTIVE_VALUE
+};

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

@@ -0,0 +1,6 @@
+let l = /* @__PURE__ */ (function(d) {
+  return d.checked = "data-checked", d.unchecked = "data-unchecked", d.disabled = "data-disabled", d.readonly = "data-readonly", d.required = "data-required", d.valid = "data-valid", d.invalid = "data-invalid", d.touched = "data-touched", d.dirty = "data-dirty", d.filled = "data-filled", d.focused = "data-focused", d;
+})({});
+export {
+  l as CheckboxRootDataAttributes
+};

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

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

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

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

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

@@ -0,0 +1,6 @@
+let h = /* @__PURE__ */ (function(d) {
+  return d.checked = "data-checked", d.unchecked = "data-unchecked", d.disabled = "data-disabled", d.highlighted = "data-highlighted", d;
+})({});
+export {
+  h as MenuCheckboxItemDataAttributes
+};

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

@@ -0,0 +1,34 @@
+import * as r from "react";
+import { useMergedRefs as p } from "./als-react-ts-ui272.js";
+import { useCompositeRootContext as h } from "./als-react-ts-ui322.js";
+import { useCompositeListItem as g } from "./als-react-ts-ui275.js";
+function I(m = {}) {
+  const {
+    highlightItemOnHover: s,
+    highlightedIndex: c,
+    onHighlightedIndexChange: i
+  } = h(), {
+    ref: u,
+    index: e
+  } = g(m), t = c === e, n = r.useRef(null), d = p(u, n);
+  return {
+    compositeProps: r.useMemo(() => ({
+      tabIndex: t ? 0 : -1,
+      onFocus() {
+        i(e);
+      },
+      onMouseMove() {
+        const o = n.current;
+        if (!s || !o)
+          return;
+        const f = o.hasAttribute("disabled") || o.ariaDisabled === "true";
+        !t && !f && o.focus();
+      }
+    }), [t, i, e, s]),
+    compositeRef: d,
+    index: e
+  };
+}
+export {
+  I as useCompositeItem
+};

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

@@ -0,0 +1,20 @@
+const o = "_root_1soxo_5", t = "_list_1soxo_22", _ = "_tab_1soxo_44", s = "_indicator_1soxo_129", a = "_panel_1soxo_154", n = "_fadeIn_1soxo_1", c = {
+  root: o,
+  list: t,
+  tab: _,
+  "tab--sm": "_tab--sm_1soxo_76",
+  "tab--md": "_tab--md_1soxo_82",
+  "tab--lg": "_tab--lg_1soxo_88",
+  indicator: s,
+  panel: a,
+  fadeIn: n
+};
+export {
+  c as default,
+  n as fadeIn,
+  s as indicator,
+  t as list,
+  a as panel,
+  o as root,
+  _ as tab
+};

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

@@ -0,0 +1,76 @@
+import * as a from "react";
+import { useControlled as y } from "./als-react-ts-ui265.js";
+import { useStableCallback as A } from "./als-react-ts-ui266.js";
+import { useRenderElement as I } from "./als-react-ts-ui226.js";
+import { CompositeList as N } from "./als-react-ts-ui269.js";
+import { useDirection as B } from "./als-react-ts-ui270.js";
+import { TabsRootContext as D } from "./als-react-ts-ui567.js";
+import { tabsStateAttributesMapping as O } from "./als-react-ts-ui568.js";
+import { jsx as v } from "react/jsx-runtime";
+const w = /* @__PURE__ */ a.forwardRef(function(s, C) {
+  const {
+    className: j,
+    defaultValue: M = 0,
+    onValueChange: T,
+    orientation: r = "horizontal",
+    render: z,
+    value: R,
+    ...g
+  } = s, u = B(), h = a.useRef([]), [d, x] = y({
+    controlled: R,
+    default: M,
+    name: "Tabs",
+    state: "value"
+  }), [f, P] = a.useState(() => /* @__PURE__ */ new Map()), [o, l] = a.useState(() => /* @__PURE__ */ new Map()), [i, S] = a.useState("none"), c = A((t, n) => {
+    T?.(t, n), !n.isCanceled && (x(t), S(n.activationDirection));
+  }), m = a.useCallback((t, n) => {
+    if (!(t === void 0 && n < 0)) {
+      for (const e of f.values())
+        if (t !== void 0 && e && t === e?.value || t === void 0 && e?.index && e?.index === n)
+          return e.id;
+    }
+  }, [f]), p = a.useCallback((t, n) => {
+    if (!(t === void 0 && n < 0)) {
+      for (const e of o.values())
+        if (t !== void 0 && n > -1 && t === (e?.value ?? e?.index ?? void 0) || t === void 0 && n > -1 && n === (e?.value ?? e?.index ?? void 0))
+          return e?.id;
+    }
+  }, [o]), b = a.useCallback((t) => {
+    if (t === void 0)
+      return null;
+    for (const [n, e] of o.entries())
+      if (e != null && t === (e.value ?? e.index))
+        return n;
+    return null;
+  }, [o]), E = a.useMemo(() => ({
+    direction: u,
+    getTabElementBySelectedValue: b,
+    getTabIdByPanelValueOrIndex: p,
+    getTabPanelIdByTabValueOrIndex: m,
+    onValueChange: c,
+    orientation: r,
+    setTabMap: l,
+    tabActivationDirection: i,
+    value: d
+  }), [u, b, p, m, c, r, l, i, d]), k = I("div", s, {
+    state: {
+      orientation: r,
+      tabActivationDirection: i
+    },
+    ref: C,
+    props: g,
+    stateAttributesMapping: O
+  });
+  return /* @__PURE__ */ v(D.Provider, {
+    value: E,
+    children: /* @__PURE__ */ v(N, {
+      elementsRef: h,
+      onMapChange: P,
+      children: k
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (w.displayName = "TabsRoot");
+export {
+  w as TabsRoot
+};

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

@@ -0,0 +1,131 @@
+import * as u from "react";
+import { useStableCallback as N } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as P } from "./als-react-ts-ui267.js";
+import { CompositeRoot as y } from "./als-react-ts-ui448.js";
+import { tabsStateAttributesMapping as z } from "./als-react-ts-ui568.js";
+import { useTabsRootContext as B } from "./als-react-ts-ui567.js";
+import { TabsListContext as E } from "./als-react-ts-ui569.js";
+import { jsx as T } from "react/jsx-runtime";
+import { EMPTY_ARRAY as F } from "./als-react-ts-ui304.js";
+const H = /* @__PURE__ */ u.forwardRef(function(i, e) {
+  const {
+    activateOnFocus: r = !1,
+    className: n,
+    loopFocus: t = !0,
+    render: o,
+    ...c
+  } = i, {
+    getTabElementBySelectedValue: s,
+    onValueChange: a,
+    orientation: f,
+    value: p,
+    setTabMap: A,
+    tabActivationDirection: b
+  } = B(), [d, m] = u.useState(0), [g, R] = u.useState(null), I = k(
+    p,
+    // the old value
+    f,
+    g,
+    s
+  ), v = N((h, C) => {
+    if (h !== p) {
+      const L = I(h);
+      C.activationDirection = L, a(h, C);
+    }
+  }), M = u.useMemo(() => ({
+    orientation: f,
+    tabActivationDirection: b
+  }), [f, b]), D = {
+    "aria-orientation": f === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  }, S = u.useMemo(() => ({
+    activateOnFocus: r,
+    highlightedTabIndex: d,
+    onTabActivation: v,
+    setHighlightedTabIndex: m,
+    tabsListElement: g,
+    value: p
+  }), [r, d, v, m, g, p]);
+  return /* @__PURE__ */ T(E.Provider, {
+    value: S,
+    children: /* @__PURE__ */ T(y, {
+      render: o,
+      className: n,
+      state: M,
+      refs: [e, R],
+      props: [D, c],
+      stateAttributesMapping: z,
+      highlightedIndex: d,
+      enableHomeAndEndKeys: !0,
+      loopFocus: t,
+      orientation: f,
+      onHighlightedIndexChange: m,
+      onMapChange: A,
+      disabledIndices: F
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (H.displayName = "TabsList");
+function x(l, i) {
+  const {
+    left: e,
+    top: r
+  } = l.getBoundingClientRect(), {
+    left: n,
+    top: t
+  } = i.getBoundingClientRect(), o = e - n, c = r - t;
+  return {
+    left: o,
+    top: c
+  };
+}
+function k(l, i, e, r) {
+  const [n, t] = u.useState(null);
+  return P(() => {
+    if (l == null || e == null) {
+      t(null);
+      return;
+    }
+    const o = r(l);
+    if (o == null) {
+      t(null);
+      return;
+    }
+    const {
+      left: c,
+      top: s
+    } = x(o, e);
+    t(i === "horizontal" ? c : s);
+  }, [i, r, e, l]), u.useCallback((o) => {
+    if (o === l)
+      return "none";
+    if (o == null)
+      return t(null), "none";
+    if (o != null && e != null) {
+      const c = r(o);
+      if (c != null) {
+        const {
+          left: s,
+          top: a
+        } = x(c, e);
+        if (n == null)
+          return t(i === "horizontal" ? s : a), "none";
+        if (i === "horizontal") {
+          if (s < n)
+            return t(s), "left";
+          if (s > n)
+            return t(s), "right";
+        } else {
+          if (a < n)
+            return t(a), "up";
+          if (a > n)
+            return t(a), "down";
+        }
+      }
+    }
+    return "none";
+  }, [r, i, n, e, l]);
+}
+export {
+  H as TabsList
+};

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

@@ -1,7 +1,7 @@
 import * as l from "react";
-import { useDialogRootContext as n } from "./als-react-ts-ui186.js";
-import { useRenderElement as a } from "./als-react-ts-ui166.js";
-import { useBaseUiId as m } from "./als-react-ts-ui170.js";
+import { useDialogRootContext as n } from "./als-react-ts-ui224.js";
+import { useRenderElement as a } from "./als-react-ts-ui226.js";
+import { useBaseUiId as m } from "./als-react-ts-ui232.js";
 const d = /* @__PURE__ */ l.forwardRef(function(e, t) {
   const {
     render: c,

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

@@ -0,0 +1,117 @@
+import * as i from "react";
+import { ownerDocument as R } from "./als-react-ts-ui352.js";
+import { useIsoLayoutEffect as U } from "./als-react-ts-ui267.js";
+import { useBaseUiId as k } from "./als-react-ts-ui232.js";
+import { useRenderElement as H } from "./als-react-ts-ui226.js";
+import { ACTIVE_COMPOSITE_ITEM as K } from "./als-react-ts-ui527.js";
+import { useCompositeItem as S } from "./als-react-ts-ui506.js";
+import { useTabsRootContext as W } from "./als-react-ts-ui567.js";
+import { useTabsListContext as j } from "./als-react-ts-ui569.js";
+import { createChangeEventDetails as g } from "./als-react-ts-ui229.js";
+import { useButton as q } from "./als-react-ts-ui230.js";
+import { activeElement as z, contains as G } from "./als-react-ts-ui312.js";
+import { none as I } from "./als-react-ts-ui231.js";
+const J = /* @__PURE__ */ i.forwardRef(function(d, P) {
+  const {
+    className: X,
+    disabled: n = !1,
+    render: Y,
+    value: r,
+    id: h,
+    nativeButton: C = !0,
+    ...D
+  } = d, {
+    value: u,
+    getTabPanelIdByTabValueOrIndex: x,
+    orientation: p
+  } = W(), {
+    activateOnFocus: M,
+    highlightedTabIndex: b,
+    onTabActivation: v,
+    setHighlightedTabIndex: c,
+    tabsListElement: T
+  } = j(), f = k(h), B = i.useMemo(() => ({
+    disabled: n,
+    id: f,
+    value: r
+  }), [n, f, r]), {
+    compositeProps: N,
+    compositeRef: O,
+    index: e
+    // hook is used instead of the CompositeItem component
+    // because the index is needed for Tab internals
+  } = S({
+    metadata: B
+  }), E = r ?? e, o = i.useMemo(() => r === void 0 ? e < 0 ? !1 : e === u : r === u, [e, u, r]), m = i.useRef(!1);
+  U(() => {
+    if (m.current) {
+      m.current = !1;
+      return;
+    }
+    if (!(o && e > -1 && b !== e))
+      return;
+    const t = T;
+    if (t != null) {
+      const s = z(R(t));
+      if (s && G(t, s))
+        return;
+    }
+    c(e);
+  }, [o, e, b, c, n, T]);
+  const {
+    getButtonProps: V,
+    buttonRef: w
+  } = q({
+    disabled: n,
+    native: C,
+    focusableWhenDisabled: !0
+  }), y = e > -1 ? x(r, e) : void 0, a = i.useRef(!1), l = i.useRef(!1);
+  function L(t) {
+    o || n || v(E, g(I, t.nativeEvent, void 0, {
+      activationDirection: "none"
+    }));
+  }
+  function _(t) {
+    o || (e > -1 && c(e), !n && M && (!a.current || // keyboard or touch focus
+    a.current && l.current) && v(E, g(I, t.nativeEvent, void 0, {
+      activationDirection: "none"
+    })));
+  }
+  function A(t) {
+    if (o || n)
+      return;
+    a.current = !0;
+    function s() {
+      a.current = !1, l.current = !1;
+    }
+    (!t.button || t.button === 0) && (l.current = !0, R(t.currentTarget).addEventListener("pointerup", s, {
+      once: !0
+    }));
+  }
+  const F = i.useMemo(() => ({
+    disabled: n,
+    active: o,
+    orientation: p
+  }), [n, o, p]);
+  return H("button", d, {
+    state: F,
+    ref: [P, w, O],
+    props: [N, {
+      role: "tab",
+      "aria-controls": y,
+      "aria-selected": o,
+      id: f,
+      onClick: L,
+      onFocus: _,
+      onPointerDown: A,
+      [K]: o ? "" : void 0,
+      onKeyDownCapture() {
+        m.current = !0;
+      }
+    }, D, V]
+  });
+});
+process.env.NODE_ENV !== "production" && (J.displayName = "TabsTab");
+export {
+  J as TabsTab
+};