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

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

@@ -0,0 +1,69 @@
+import { useRefWithInit as r } from "./als-react-ts-ui240.js";
+function b(n, e, c, t) {
+  const l = r(i).current;
+  return s(l, n, e, c, t) && o(l, [n, e, c, t]), l.callback;
+}
+function h(n) {
+  const e = r(i).current;
+  return f(e, n) && o(e, n), e.callback;
+}
+function i() {
+  return {
+    callback: null,
+    cleanup: null,
+    refs: []
+  };
+}
+function s(n, e, c, t, l) {
+  return n.refs[0] !== e || n.refs[1] !== c || n.refs[2] !== t || n.refs[3] !== l;
+}
+function f(n, e) {
+  return n.refs.length !== e.length || n.refs.some((c, t) => c !== e[t]);
+}
+function o(n, e) {
+  if (n.refs = e, e.every((c) => c == null)) {
+    n.callback = null;
+    return;
+  }
+  n.callback = (c) => {
+    if (n.cleanup && (n.cleanup(), n.cleanup = null), c != null) {
+      const t = Array(e.length).fill(null);
+      for (let l = 0; l < e.length; l += 1) {
+        const u = e[l];
+        if (u != null)
+          switch (typeof u) {
+            case "function": {
+              const a = u(c);
+              typeof a == "function" && (t[l] = a);
+              break;
+            }
+            case "object": {
+              u.current = c;
+              break;
+            }
+          }
+      }
+      n.cleanup = () => {
+        for (let l = 0; l < e.length; l += 1) {
+          const u = e[l];
+          if (u != null)
+            switch (typeof u) {
+              case "function": {
+                const a = t[l];
+                typeof a == "function" ? a() : u(null);
+                break;
+              }
+              case "object": {
+                u.current = null;
+                break;
+              }
+            }
+        }
+      };
+    }
+  };
+}
+export {
+  b as useMergedRefs,
+  h as useMergedRefsN
+};

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

@@ -0,0 +1,66 @@
+import * as e from "react";
+import { useControlled as A } from "./als-react-ts-ui282.js";
+import { useIsoLayoutEffect as B } from "./als-react-ts-ui193.js";
+import { useStableCallback as H } from "./als-react-ts-ui192.js";
+import { useBaseUiId as K } from "./als-react-ts-ui249.js";
+import { createChangeEventDetails as L } from "./als-react-ts-ui246.js";
+import { useAnimationsFinished as V } from "./als-react-ts-ui338.js";
+import { useTransitionStatus as j } from "./als-react-ts-ui344.js";
+import { triggerPress as q } from "./als-react-ts-ui248.js";
+function Z(F) {
+  const {
+    open: r,
+    defaultOpen: M,
+    onOpenChange: E,
+    disabled: d
+  } = F, m = r !== void 0, [n, u] = A({
+    controlled: r,
+    default: M,
+    name: "Collapsible",
+    state: "open"
+  }), {
+    mounted: i,
+    setMounted: o,
+    transitionStatus: p
+  } = j(n, !0, !0), [l, f] = e.useState(n), [{
+    height: h,
+    width: R
+  }, S] = e.useState({
+    height: void 0,
+    width: void 0
+  }), T = K(), [U, k] = e.useState(), C = U ?? T, [w, b] = e.useState(!1), [c, g] = e.useState(!1), v = e.useRef(null), t = e.useRef(null), I = e.useRef(null), a = e.useRef(null), O = V(a, !1), P = H((x) => {
+    const s = !n, y = L(q, x.nativeEvent);
+    if (E(s, y), y.isCanceled)
+      return;
+    const D = a.current;
+    t.current === "css-animation" && D != null && D.style.removeProperty("animation-name"), !w && !c && (t.current != null && t.current !== "css-animation" && !i && s && o(!0), t.current === "css-animation" && (!l && s && f(!0), !i && s && o(!0))), u(s), t.current === "none" && i && !s && o(!1);
+  });
+  return B(() => {
+    m && t.current === "none" && !c && !n && o(!1);
+  }, [m, c, n, r, o]), e.useMemo(() => ({
+    abortControllerRef: v,
+    animationTypeRef: t,
+    disabled: d,
+    handleTrigger: P,
+    height: h,
+    mounted: i,
+    open: n,
+    panelId: C,
+    panelRef: a,
+    runOnceAnimationsFinish: O,
+    setDimensions: S,
+    setHiddenUntilFound: b,
+    setKeepMounted: g,
+    setMounted: o,
+    setOpen: u,
+    setPanelIdState: k,
+    setVisible: f,
+    transitionDimensionRef: I,
+    transitionStatus: p,
+    visible: l,
+    width: R
+  }), [v, t, d, P, h, i, n, C, a, O, S, b, g, o, u, f, I, p, l, R]);
+}
+export {
+  Z as useCollapsibleRoot
+};

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

@@ -0,0 +1,14 @@
+import s from "./als-react-ts-ui259.js";
+import * as e from "react";
+const t = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (t.displayName = "CollapsibleRootContext");
+function i() {
+  const o = e.useContext(t);
+  if (o === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>." : s(15));
+  return o;
+}
+export {
+  t as CollapsibleRootContext,
+  i as useCollapsibleRootContext
+};

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

@@ -0,0 +1,83 @@
+import { jsxs as L, jsx as s } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { clsx as e } from "./als-react-ts-ui56.js";
+import r from "./als-react-ts-ui239.js";
+import { Separator as l } from "./als-react-ts-ui107.js";
+const S = N(
+  ({
+    orientation: a = "horizontal",
+    variant: o = "solid",
+    size: p = "sm",
+    color: t = "default",
+    withSpacing: d = !1,
+    label: m,
+    className: $,
+    style: f,
+    decorative: h = !0,
+    ...c
+  }, i) => {
+    const n = e(
+      r.separator,
+      r[`separator--${a}`],
+      r[`separator--${o}`],
+      r[`separator--${p}`],
+      r[`separator--${t}`],
+      {
+        [r["separator--with-spacing"]]: d,
+        [r["separator--with-label"]]: !!m
+      },
+      $
+    );
+    return m && a === "horizontal" ? /* @__PURE__ */ L(
+      "div",
+      {
+        ref: i,
+        className: e(r.separatorContainer, $),
+        style: f,
+        role: h ? "none" : "separator",
+        "aria-orientation": a,
+        ...c,
+        children: [
+          /* @__PURE__ */ s(
+            l,
+            {
+              orientation: a,
+              className: e(
+                r.separatorLine,
+                r[`separator--${o}`],
+                r[`separator--${p}`],
+                r[`separator--${t}`]
+              )
+            }
+          ),
+          /* @__PURE__ */ s("span", { className: r.separatorLabel, children: m }),
+          /* @__PURE__ */ s(
+            l,
+            {
+              orientation: a,
+              className: e(
+                r.separatorLine,
+                r[`separator--${o}`],
+                r[`separator--${p}`],
+                r[`separator--${t}`]
+              )
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      l,
+      {
+        ref: i,
+        orientation: a,
+        className: n,
+        style: f,
+        ...c
+      }
+    );
+  }
+);
+S.displayName = "ALSSeparator";
+export {
+  S as ALSSeparator
+};

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

@@ -0,0 +1,55 @@
+import * as u from "react";
+import { useIsoLayoutEffect as g } from "./als-react-ts-ui193.js";
+import { useCompositeListContext as F } from "./als-react-ts-ui345.js";
+let I = /* @__PURE__ */ (function(t) {
+  return t[t.None = 0] = "None", t[t.GuessFromOrder = 1] = "GuessFromOrder", t;
+})({});
+function N(t = {}) {
+  const {
+    label: c,
+    metadata: l,
+    textRef: d,
+    indexGuessBehavior: L,
+    index: r
+  } = t, {
+    register: m,
+    unregister: a,
+    subscribeMapChange: x,
+    elementsRef: R,
+    labelsRef: i,
+    nextIndexRef: p
+  } = F(), f = u.useRef(-1), [n, C] = u.useState(r ?? (L === I.GuessFromOrder ? () => {
+    if (f.current === -1) {
+      const e = p.current;
+      p.current += 1, f.current = e;
+    }
+    return f.current;
+  } : -1)), s = u.useRef(null), b = u.useCallback((e) => {
+    if (s.current = e, n !== -1 && e !== null && (R.current[n] = e, i)) {
+      const o = c !== void 0;
+      i.current[n] = o ? c : d?.current?.textContent ?? e.textContent;
+    }
+  }, [n, R, i, c, d]);
+  return g(() => {
+    if (r != null)
+      return;
+    const e = s.current;
+    if (e)
+      return m(e, l), () => {
+        a(e);
+      };
+  }, [r, m, a, l]), g(() => {
+    if (r == null)
+      return x((e) => {
+        const o = s.current ? e.get(s.current)?.index : null;
+        o != null && C(o);
+      });
+  }, [r, x, C]), u.useMemo(() => ({
+    ref: b,
+    index: n
+  }), [n, b]);
+}
+export {
+  I as IndexGuessBehavior,
+  N as useCompositeListItem
+};

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

@@ -0,0 +1,14 @@
+import n from "./als-react-ts-ui259.js";
+import * as t from "react";
+const e = /* @__PURE__ */ t.createContext(void 0);
+process.env.NODE_ENV !== "production" && (e.displayName = "AccordionItemContext");
+function c() {
+  const o = t.useContext(e);
+  if (o === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>." : n(9));
+  return o;
+}
+export {
+  e as AccordionItemContext,
+  c as useAccordionItemContext
+};

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

@@ -0,0 +1,14 @@
+import { collapsibleOpenStateMapping as i } from "./als-react-ts-ui294.js";
+import { transitionStatusMapping as r } from "./als-react-ts-ui245.js";
+import { AccordionItemDataAttributes as n } from "./als-react-ts-ui343.js";
+const a = {
+  ...i,
+  index: (t) => Number.isInteger(t) ? {
+    [n.index]: String(t)
+  } : null,
+  ...r,
+  value: () => null
+};
+export {
+  a as accordionStateAttributesMapping
+};

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

@@ -0,0 +1,6 @@
+function i(t) {
+  return t == null || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true";
+}
+export {
+  i as isElementDisabled
+};

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

@@ -0,0 +1,21 @@
+import { CollapsiblePanelDataAttributes as e } from "./als-react-ts-ui347.js";
+import { CollapsibleTriggerDataAttributes as n } from "./als-react-ts-ui349.js";
+const r = {
+  [e.open]: ""
+}, p = {
+  [e.closed]: ""
+}, a = {
+  open(t) {
+    return t ? {
+      [n.panelOpen]: ""
+    } : null;
+  }
+}, i = {
+  open(t) {
+    return t ? r : p;
+  }
+};
+export {
+  i as collapsibleOpenStateMapping,
+  a as triggerOpenStateMapping
+};

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

@@ -0,0 +1,25 @@
+import { isAndroid as r, isJSDOM as o } from "./als-react-ts-ui371.js";
+function n(i) {
+  i.preventDefault(), i.stopPropagation();
+}
+function p(i) {
+  return "nativeEvent" in i;
+}
+function e(i) {
+  return i.mozInputSource === 0 && i.isTrusted ? !0 : r && i.pointerType ? i.type === "click" && i.buttons === 1 : i.detail === 0 && !i.pointerType;
+}
+function c(i) {
+  return o ? !1 : !r && i.width === 0 && i.height === 0 || r && i.width === 1 && i.height === 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "mouse" || // iOS VoiceOver returns 0.333• for width/height.
+  i.width < 1 && i.height < 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "touch";
+}
+function f(i, u) {
+  const t = ["mouse", "pen"];
+  return u || t.push("", void 0), t.includes(i);
+}
+export {
+  f as isMouseLikePointerType,
+  p as isReactEvent,
+  e as isVirtualClick,
+  c as isVirtualPointerEvent,
+  n as stopEvent
+};

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

@@ -0,0 +1,167 @@
+import * as f from "react";
+import { useIsoLayoutEffect as g } from "./als-react-ts-ui193.js";
+import { useStableCallback as B } from "./als-react-ts-ui192.js";
+import { useMergedRefs as k } from "./als-react-ts-ui287.js";
+import { useOnMount as z } from "./als-react-ts-ui305.js";
+import { useAnimationFrame as V, AnimationFrame as s } from "./als-react-ts-ui346.js";
+import { warn as U } from "./als-react-ts-ui283.js";
+import { createChangeEventDetails as _ } from "./als-react-ts-ui246.js";
+import { CollapsiblePanelDataAttributes as v } from "./als-react-ts-ui347.js";
+import { AccordionRootDataAttributes as G } from "./als-react-ts-ui348.js";
+import { none as J } from "./als-react-ts-ui248.js";
+function oe(H) {
+  const {
+    abortControllerRef: r,
+    animationTypeRef: i,
+    externalRef: W,
+    height: x,
+    hiddenUntilFound: d,
+    keepMounted: w,
+    id: O,
+    mounted: R,
+    onOpenChange: D,
+    open: l,
+    panelRef: a,
+    runOnceAnimationsFinish: h,
+    setDimensions: c,
+    setMounted: m,
+    setOpen: E,
+    setVisible: A,
+    transitionDimensionRef: C,
+    visible: P,
+    width: I
+  } = H, p = f.useRef(!1), M = f.useRef(null), F = f.useRef(l), S = f.useRef(l), N = V(), y = f.useMemo(() => i.current === "css-animation" ? !P : !l && !R, [l, R, P, i]), L = B((e) => {
+    if (!e)
+      return;
+    if (i.current == null || C.current == null) {
+      const t = getComputedStyle(e), u = t.animationName !== "none" && t.animationName !== "", b = t.transitionDuration !== "0s" && t.transitionDuration !== "";
+      u && b ? process.env.NODE_ENV !== "production" && U("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used.") : t.animationName === "none" && t.transitionDuration !== "0s" ? i.current = "css-transition" : t.animationName !== "none" && t.transitionDuration === "0s" ? i.current = "css-animation" : i.current = "none", e.getAttribute(G.orientation) === "horizontal" || t.transitionProperty.indexOf("width") > -1 ? C.current = "width" : C.current = "height";
+    }
+    if (i.current !== "css-transition")
+      return;
+    (x === void 0 || I === void 0) && (c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), S.current && e.style.setProperty("transition-duration", "0s"));
+    let o = -1, n = -1;
+    return o = s.request(() => {
+      S.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    }), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }), j = k(W, a, L);
+  return g(() => {
+    if (i.current !== "css-transition")
+      return;
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1;
+    if (r.current != null && (r.current.abort(), r.current = null), l) {
+      const n = {
+        "justify-content": e.style.justifyContent,
+        "align-items": e.style.alignItems,
+        "align-content": e.style.alignContent,
+        "justify-items": e.style.justifyItems
+      };
+      Object.keys(n).forEach((t) => {
+        e.style.setProperty(t, "initial", "important");
+      }), !S.current && !w && e.setAttribute(v.startingStyle, ""), c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      }), o = s.request(() => {
+        Object.entries(n).forEach(([t, u]) => {
+          u === "" ? e.style.removeProperty(t) : e.style.setProperty(t, u);
+        });
+      });
+    } else {
+      if (e.scrollHeight === 0 && e.scrollWidth === 0)
+        return;
+      c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      });
+      const n = new AbortController();
+      r.current = n;
+      const t = n.signal;
+      let u = null;
+      const b = v.endingStyle;
+      return u = new MutationObserver((T) => {
+        T.some((q) => q.type === "attributes" && q.attributeName === b) && (u?.disconnect(), u = null, h(() => {
+          c({
+            height: 0,
+            width: 0
+          }), e.style.removeProperty("content-visibility"), m(!1), r.current === n && (r.current = null);
+        }, t));
+      }), u.observe(e, {
+        attributes: !0,
+        attributeFilter: [b]
+      }), () => {
+        u?.disconnect(), N.cancel(), r.current === n && (n.abort(), r.current = null);
+      };
+    }
+    return () => {
+      s.cancel(o);
+    };
+  }, [r, i, N, d, w, R, l, a, h, c, m]), g(() => {
+    if (i.current !== "css-animation")
+      return;
+    const e = a.current;
+    e && (M.current = e.style.animationName || M.current, e.style.setProperty("animation-name", "none"), c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), !F.current && !p.current && e.style.removeProperty("animation-name"), l ? (r.current != null && (r.current.abort(), r.current = null), m(!0), A(!0)) : (r.current = new AbortController(), h(() => {
+      m(!1), A(!1), r.current = null;
+    }, r.current.signal)));
+  }, [r, i, l, a, h, c, m, A, P]), z(() => {
+    const e = s.request(() => {
+      F.current = !1;
+    });
+    return () => s.cancel(e);
+  }), g(() => {
+    if (!d)
+      return;
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1, n = -1;
+    return l && p.current && (e.style.transitionDuration = "0s", c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), o = s.request(() => {
+      p.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    })), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }, [d, l, a, c]), g(() => {
+    const e = a.current;
+    e && d && y && (e.setAttribute("hidden", "until-found"), i.current === "css-transition" && e.setAttribute(v.startingStyle, ""));
+  }, [d, y, i, a]), f.useEffect(function() {
+    const o = a.current;
+    if (!o)
+      return;
+    function n(t) {
+      p.current = !0, E(!0), D(!0, _(J, t));
+    }
+    return o.addEventListener("beforematch", n), () => {
+      o.removeEventListener("beforematch", n);
+    };
+  }, [D, a, E]), f.useMemo(() => ({
+    props: {
+      hidden: y,
+      id: O,
+      ref: j
+    }
+  }), [y, O, j]);
+}
+export {
+  oe as useCollapsiblePanel
+};

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

@@ -0,0 +1,6 @@
+let e = /* @__PURE__ */ (function(n) {
+  return n.accordionPanelHeight = "--accordion-panel-height", n.accordionPanelWidth = "--accordion-panel-width", n;
+})({});
+export {
+  e as AccordionPanelCssVars
+};

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

@@ -0,0 +1,11 @@
+import * as n from "react";
+import { isReactVersionAtLeast as o } from "./als-react-ts-ui336.js";
+function s(t) {
+  if (!/* @__PURE__ */ n.isValidElement(t))
+    return null;
+  const e = t, r = e.props;
+  return (o(19) ? r?.ref : e.ref) ?? null;
+}
+export {
+  s as getReactElementRef
+};

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

@@ -0,0 +1,14 @@
+function n(e, r) {
+  if (e && !r)
+    return e;
+  if (!e && r)
+    return r;
+  if (e || r)
+    return {
+      ...e,
+      ...r
+    };
+}
+export {
+  n as mergeObjects
+};