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

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

@@ -1,81 +1,160 @@
-import * as a from "react";
-import { useRefWithInit as T } from "./als-react-ts-ui240.js";
-import { useStableCallback as l } from "./als-react-ts-ui192.js";
-import { useIsoLayoutEffect as f } from "./als-react-ts-ui193.js";
-import { CompositeListContext as D } from "./als-react-ts-ui345.js";
-import { jsx as L } from "react/jsx-runtime";
-function k(h) {
+import * as t from "react";
+import { useStableCallback as b } from "./als-react-ts-ui266.js";
+import { useTimeout as q } from "./als-react-ts-ui297.js";
+import { ScrollAreaRootContext as mt } from "./als-react-ts-ui536.js";
+import { useRenderElement as ht } from "./als-react-ts-ui226.js";
+import { ScrollAreaRootCssVars as J } from "./als-react-ts-ui537.js";
+import { SCROLL_TIMEOUT as E } from "./als-react-ts-ui538.js";
+import { getOffset as x } from "./als-react-ts-ui539.js";
+import { ScrollAreaScrollbarDataAttributes as pt } from "./als-react-ts-ui540.js";
+import { styleDisableScrollbar as St } from "./als-react-ts-ui415.js";
+import { useBaseUiId as Rt } from "./als-react-ts-ui232.js";
+import { scrollAreaStateAttributesMapping as gt } from "./als-react-ts-ui541.js";
+import { jsxs as bt } from "react/jsx-runtime";
+import { contains as Et } from "./als-react-ts-ui312.js";
+const K = {
+  width: 0,
+  height: 0
+}, xt = {
+  xStart: !1,
+  xEnd: !1,
+  yStart: !1,
+  yEnd: !1
+}, vt = /* @__PURE__ */ t.forwardRef(function(l, Q) {
   const {
-    children: N,
-    elementsRef: t,
-    labelsRef: o,
-    onMapChange: _
-  } = h, E = l(_), O = a.useRef(0), d = T(R).current, i = T(P).current, [p, M] = a.useState(0), c = a.useRef(p), C = l((e, u) => {
-    i.set(e, u ?? null), c.current += 1, M(c.current);
-  }), I = l((e) => {
-    i.delete(e), c.current += 1, M(c.current);
-  }), r = a.useMemo(() => {
-    const e = /* @__PURE__ */ new Map();
-    return Array.from(i.keys()).sort(S).forEach((n, m) => {
-      const s = i.get(n) ?? {};
-      e.set(n, {
-        ...s,
-        index: m
-      });
-    }), e;
-  }, [i, p]);
-  f(() => {
-    if (typeof MutationObserver != "function" || r.size === 0)
+    render: Tt,
+    className: wt,
+    overflowEdgeThreshold: tt,
+    ...et
+  } = l, [A, S] = t.useState(!1), [M, u] = t.useState(!1), [C, f] = t.useState(!1), [R, rt] = t.useState(K), [P, ot] = t.useState(K), [D, L] = t.useState(!1), [a, nt] = t.useState(xt), W = Rt(), g = t.useRef(null), r = t.useRef(null), m = t.useRef(null), h = t.useRef(null), o = t.useRef(null), n = t.useRef(null), z = t.useRef(null), v = t.useRef(!1), I = t.useRef(0), U = t.useRef(0), _ = t.useRef(0), N = t.useRef(0), i = t.useRef("vertical"), V = q(), F = q(), y = t.useRef({
+    x: 0,
+    y: 0
+  }), [s, st] = t.useState({
+    scrollbarYHidden: !1,
+    scrollbarXHidden: !1,
+    cornerHidden: !1
+  }), $ = yt(tt), j = b((e) => {
+    const d = e.x - y.current.x, p = e.y - y.current.y;
+    y.current = e, p !== 0 && (f(!0), V.start(E, () => {
+      f(!1);
+    })), d !== 0 && (u(!0), F.start(E, () => {
+      u(!1);
+    }));
+  }), k = b((e) => {
+    e.button === 0 && (v.current = !0, I.current = e.clientY, U.current = e.clientX, i.current = e.currentTarget.getAttribute(pt.orientation), r.current && (_.current = r.current.scrollTop, N.current = r.current.scrollLeft), o.current && i.current === "vertical" && o.current.setPointerCapture(e.pointerId), n.current && i.current === "horizontal" && n.current.setPointerCapture(e.pointerId));
+  }), B = b((e) => {
+    if (!v.current)
       return;
-    const e = new MutationObserver((u) => {
-      const n = /* @__PURE__ */ new Set(), m = (s) => n.has(s) ? n.delete(s) : n.add(s);
-      u.forEach((s) => {
-        s.removedNodes.forEach(m), s.addedNodes.forEach(m);
-      }), n.size === 0 && (c.current += 1, M(c.current));
-    });
-    return r.forEach((u, n) => {
-      n.parentElement && e.observe(n.parentElement, {
-        childList: !0
-      });
-    }), () => {
-      e.disconnect();
-    };
-  }, [r]), f(() => {
-    c.current === p && (t.current.length !== r.size && (t.current.length = r.size), o && o.current.length !== r.size && (o.current.length = r.size), O.current = r.size), E(r);
-  }, [E, r, t, o, p]), f(() => () => {
-    t.current = [];
-  }, [t]), f(() => () => {
-    o && (o.current = []);
-  }, [o]);
-  const g = l((e) => (d.add(e), () => {
-    d.delete(e);
-  }));
-  f(() => {
-    d.forEach((e) => e(r));
-  }, [d, r]);
-  const b = a.useMemo(() => ({
-    register: C,
-    unregister: I,
-    subscribeMapChange: g,
-    elementsRef: t,
-    labelsRef: o,
-    nextIndexRef: O
-  }), [C, I, g, t, o, O]);
-  return /* @__PURE__ */ L(D.Provider, {
-    value: b,
-    children: N
+    const d = e.clientY - I.current, p = e.clientX - U.current;
+    if (r.current) {
+      const it = r.current.scrollHeight, ut = r.current.clientHeight, ft = r.current.scrollWidth, dt = r.current.clientWidth;
+      if (o.current && m.current && i.current === "vertical") {
+        const w = x(m.current, "padding", "y"), H = x(o.current, "margin", "y"), X = o.current.offsetHeight, Y = m.current.offsetHeight - X - w - H, O = d / Y;
+        r.current.scrollTop = _.current + O * (it - ut), e.preventDefault(), f(!0), V.start(E, () => {
+          f(!1);
+        });
+      }
+      if (n.current && h.current && i.current === "horizontal") {
+        const w = x(h.current, "padding", "x"), H = x(n.current, "margin", "x"), X = n.current.offsetWidth, Y = h.current.offsetWidth - X - w - H, O = p / Y;
+        r.current.scrollLeft = N.current + O * (ft - dt), e.preventDefault(), u(!0), F.start(E, () => {
+          u(!1);
+        });
+      }
+    }
+  }), G = b((e) => {
+    v.current = !1, o.current && i.current === "vertical" && o.current.releasePointerCapture(e.pointerId), n.current && i.current === "horizontal" && n.current.releasePointerCapture(e.pointerId);
   });
-}
-function P() {
-  return /* @__PURE__ */ new Map();
-}
-function R() {
-  return /* @__PURE__ */ new Set();
-}
-function S(h, N) {
-  const t = h.compareDocumentPosition(N);
-  return t & Node.DOCUMENT_POSITION_FOLLOWING || t & Node.DOCUMENT_POSITION_CONTAINED_BY ? -1 : t & Node.DOCUMENT_POSITION_PRECEDING || t & Node.DOCUMENT_POSITION_CONTAINS ? 1 : 0;
+  function Z(e) {
+    const d = e.pointerType === "touch";
+    if (L(d), !d) {
+      const p = Et(g.current, e.target);
+      S(p);
+    }
+  }
+  const T = t.useMemo(() => ({
+    hasOverflowX: !s.scrollbarXHidden,
+    hasOverflowY: !s.scrollbarYHidden,
+    overflowXStart: a.xStart,
+    overflowXEnd: a.xEnd,
+    overflowYStart: a.yStart,
+    overflowYEnd: a.yEnd,
+    cornerHidden: s.cornerHidden
+  }), [s.scrollbarXHidden, s.scrollbarYHidden, s.cornerHidden, a]), ct = {
+    role: "presentation",
+    onPointerEnter: Z,
+    onPointerMove: Z,
+    onPointerDown({
+      pointerType: e
+    }) {
+      L(e === "touch");
+    },
+    onPointerLeave() {
+      S(!1);
+    },
+    style: {
+      position: "relative",
+      [J.scrollAreaCornerHeight]: `${R.height}px`,
+      [J.scrollAreaCornerWidth]: `${R.width}px`
+    }
+  }, lt = ht("div", l, {
+    state: T,
+    ref: [Q, g],
+    props: [ct, et],
+    stateAttributesMapping: gt
+  }), at = t.useMemo(() => ({
+    handlePointerDown: k,
+    handlePointerMove: B,
+    handlePointerUp: G,
+    handleScroll: j,
+    cornerSize: R,
+    setCornerSize: rt,
+    thumbSize: P,
+    setThumbSize: ot,
+    touchModality: D,
+    cornerRef: z,
+    scrollingX: M,
+    setScrollingX: u,
+    scrollingY: C,
+    setScrollingY: f,
+    hovering: A,
+    setHovering: S,
+    viewportRef: r,
+    rootRef: g,
+    scrollbarYRef: m,
+    scrollbarXRef: h,
+    thumbYRef: o,
+    thumbXRef: n,
+    rootId: W,
+    hiddenState: s,
+    setHiddenState: st,
+    overflowEdges: a,
+    setOverflowEdges: nt,
+    viewportState: T,
+    overflowEdgeThreshold: $
+  }), [k, B, G, j, R, P, D, z, M, u, C, f, A, S, r, g, m, h, o, n, W, s, a, T, $]);
+  return /* @__PURE__ */ bt(mt.Provider, {
+    value: at,
+    children: [St.element, lt]
+  });
+});
+process.env.NODE_ENV !== "production" && (vt.displayName = "ScrollAreaRoot");
+function yt(c) {
+  if (typeof c == "number") {
+    const l = Math.max(0, c);
+    return {
+      xStart: l,
+      xEnd: l,
+      yStart: l,
+      yEnd: l
+    };
+  }
+  return {
+    xStart: Math.max(0, c?.xStart || 0),
+    xEnd: Math.max(0, c?.xEnd || 0),
+    yStart: Math.max(0, c?.yStart || 0),
+    yEnd: Math.max(0, c?.yEnd || 0)
+  };
 }
 export {
-  k as CompositeList
+  vt as ScrollAreaRoot
 };

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

@@ -1,10 +1,187 @@
-import * as t from "react";
-const e = /* @__PURE__ */ t.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "DirectionContext");
-function o() {
-  return t.useContext(e)?.direction ?? "ltr";
+import * as E from "react";
+import * as Rt from "react-dom";
+import { useStableCallback as Mt } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as C } from "./als-react-ts-ui267.js";
+import { isWebKit as Tt } from "./als-react-ts-ui351.js";
+import { useTimeout as tt } from "./als-react-ts-ui297.js";
+import { useScrollAreaRootContext as Nt } from "./als-react-ts-ui536.js";
+import { ScrollAreaViewportContext as Vt } from "./als-react-ts-ui542.js";
+import { useRenderElement as Wt } from "./als-react-ts-ui226.js";
+import { useDirection as Ct } from "./als-react-ts-ui270.js";
+import { getOffset as O } from "./als-react-ts-ui539.js";
+import { MIN_THUMB_SIZE as rt } from "./als-react-ts-ui538.js";
+import { clamp as a } from "./als-react-ts-ui523.js";
+import { styleDisableScrollbar as Pt } from "./als-react-ts-ui415.js";
+import { onVisible as Lt } from "./als-react-ts-ui543.js";
+import { scrollAreaStateAttributesMapping as It } from "./als-react-ts-ui541.js";
+import { ScrollAreaViewportCssVars as d } from "./als-react-ts-ui544.js";
+import { jsx as Dt } from "react/jsx-runtime";
+let et = !1;
+function Ft() {
+  et || // When `inherits: false`, specifying `inherit` on child elements doesn't work
+  // in Safari. To let CSS features work correctly, this optimization must be skipped.
+  Tt || (typeof CSS < "u" && "registerProperty" in CSS && [d.scrollAreaOverflowXStart, d.scrollAreaOverflowXEnd, d.scrollAreaOverflowYStart, d.scrollAreaOverflowYEnd].forEach((P) => {
+    try {
+      CSS.registerProperty({
+        name: P,
+        syntax: "<length>",
+        inherits: !1,
+        initialValue: "0px"
+      });
+    } catch {
+    }
+  }), et = !0);
 }
+const $t = /* @__PURE__ */ E.forwardRef(function(L, ot) {
+  const {
+    render: _t,
+    className: kt,
+    ...nt
+  } = L, {
+    viewportRef: e,
+    scrollbarYRef: st,
+    scrollbarXRef: lt,
+    thumbYRef: ct,
+    thumbXRef: it,
+    cornerRef: at,
+    setCornerSize: I,
+    setThumbSize: ft,
+    rootId: D,
+    setHiddenState: dt,
+    hiddenState: l,
+    handleScroll: mt,
+    setHovering: F,
+    setOverflowEdges: ut,
+    overflowEdges: m,
+    overflowEdgeThreshold: g
+  } = Nt(), X = Ct(), Y = E.useRef(!0), ht = tt(), A = tt();
+  function pt() {
+    const r = e.current, c = st.current, f = lt.current, R = ct.current, M = it.current, Et = at.current;
+    if (!r)
+      return;
+    const h = r.scrollHeight, p = r.scrollWidth, S = r.clientHeight, b = r.clientWidth, $ = r.scrollTop, T = r.scrollLeft;
+    if (h === 0 || p === 0)
+      return;
+    const s = S >= h, i = b >= p, gt = b / p, vt = S / h, x = Math.max(0, p - b), v = Math.max(0, h - S);
+    let H = 0, _ = 0;
+    i || (X === "rtl" ? H = a(-T, 0, x) : H = a(T, 0, x), _ = x - H);
+    const k = s ? 0 : a($, 0, v), Ht = s ? 0 : v - k, yt = i ? 0 : b, Ot = s ? 0 : S, z = O(f, "padding", "x"), K = O(c, "padding", "y"), U = O(M, "margin", "x"), j = O(R, "margin", "y"), q = yt - z - U, B = Ot - K - j, Xt = f ? Math.min(f.offsetWidth, q) : q, Yt = c ? Math.min(c.offsetHeight, B) : B, N = Math.max(rt, Xt * gt), V = Math.max(rt, Yt * vt);
+    if (ft((t) => t.height === V && t.width === N ? t : {
+      width: N,
+      height: V
+    }), c && R) {
+      const t = c.offsetHeight - V - K - j, o = h - S, y = o === 0 ? 0 : $ / o, W = Math.min(t, Math.max(0, y * t));
+      R.style.transform = `translate3d(0,${W}px,0)`;
+    }
+    if (f && M) {
+      const t = f.offsetWidth - N - z - U, o = p - b, y = o === 0 ? 0 : T / o, W = X === "rtl" ? a(y * t, -t, 0) : a(y * t, 0, t);
+      M.style.transform = `translate3d(${W}px,0,0)`;
+    }
+    const Z = a(H, 0, x), G = a(_, 0, x), J = a(k, 0, v), Q = a(Ht, 0, v), At = [[d.scrollAreaOverflowXStart, Z], [d.scrollAreaOverflowXEnd, G], [d.scrollAreaOverflowYStart, J], [d.scrollAreaOverflowYEnd, Q]];
+    for (const [t, o] of At)
+      r.style.setProperty(t, `${o}px`);
+    if (Et) {
+      if (i || s)
+        I({
+          width: 0,
+          height: 0
+        });
+      else if (!i && !s) {
+        const t = c?.offsetWidth || 0, o = f?.offsetHeight || 0;
+        I({
+          width: t,
+          height: o
+        });
+      }
+    }
+    dt((t) => {
+      const o = s || i;
+      return t.scrollbarYHidden === s && t.scrollbarXHidden === i && t.cornerHidden === o ? t : {
+        scrollbarYHidden: s,
+        scrollbarXHidden: i,
+        cornerHidden: o
+      };
+    });
+    const w = {
+      xStart: !i && Z > g.xStart,
+      xEnd: !i && G > g.xEnd,
+      yStart: !s && J > g.yStart,
+      yEnd: !s && Q > g.yEnd
+    };
+    ut((t) => t.xStart === w.xStart && t.xEnd === w.xEnd && t.yStart === w.yStart && t.yEnd === w.yEnd ? t : w);
+  }
+  const n = Mt(() => {
+    Rt.flushSync(pt);
+  });
+  C(() => e.current ? (Ft(), Lt(e.current, n)) : void 0, [n, e]), C(() => {
+    queueMicrotask(n);
+  }, [n, l, X]), C(() => {
+    e.current?.matches(":hover") && F(!0);
+  }, [e, F]), E.useEffect(() => {
+    const r = e.current;
+    if (typeof ResizeObserver > "u" || !r)
+      return;
+    const c = new ResizeObserver(n);
+    return c.observe(r), A.start(0, () => {
+      Promise.all(r.getAnimations({
+        subtree: !0
+      }).map((f) => f.finished)).then(n).catch(() => {
+      });
+    }), () => {
+      c.disconnect(), A.clear();
+    };
+  }, [n, e, A]);
+  function u() {
+    Y.current = !1;
+  }
+  const St = {
+    role: "presentation",
+    ...D && {
+      "data-id": `${D}-viewport`
+    },
+    // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
+    ...(!l.scrollbarXHidden || !l.scrollbarYHidden) && {
+      tabIndex: 0
+    },
+    className: Pt.className,
+    style: {
+      overflow: "scroll"
+    },
+    onScroll() {
+      e.current && (n(), Y.current || mt({
+        x: e.current.scrollLeft,
+        y: e.current.scrollTop
+      }), ht.start(100, () => {
+        Y.current = !0;
+      }));
+    },
+    onWheel: u,
+    onTouchMove: u,
+    onPointerMove: u,
+    onPointerEnter: u,
+    onKeyDown: u
+  }, bt = E.useMemo(() => ({
+    hasOverflowX: !l.scrollbarXHidden,
+    hasOverflowY: !l.scrollbarYHidden,
+    overflowXStart: m.xStart,
+    overflowXEnd: m.xEnd,
+    overflowYStart: m.yStart,
+    overflowYEnd: m.yEnd,
+    cornerHidden: l.cornerHidden
+  }), [l.scrollbarXHidden, l.scrollbarYHidden, l.cornerHidden, m]), xt = Wt("div", L, {
+    ref: [ot, e],
+    state: bt,
+    props: [St, nt],
+    stateAttributesMapping: It
+  }), wt = E.useMemo(() => ({
+    computeThumbPosition: n
+  }), [n]);
+  return /* @__PURE__ */ Dt(Vt.Provider, {
+    value: wt,
+    children: xt
+  });
+});
+process.env.NODE_ENV !== "production" && ($t.displayName = "ScrollAreaViewport");
 export {
-  e as DirectionContext,
-  o as useDirection
+  $t as ScrollAreaViewport
 };

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

@@ -1,14 +1,39 @@
-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 = "AccordionRootContext");
-function c() {
-  const o = t.useContext(e);
-  if (o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>." : n(10));
-  return o;
-}
+import * as n from "react";
+import { useIsoLayoutEffect as a } from "./als-react-ts-ui267.js";
+import { useScrollAreaViewportContext as l } from "./als-react-ts-ui542.js";
+import { useRenderElement as p } from "./als-react-ts-ui226.js";
+import { useScrollAreaRootContext as f } from "./als-react-ts-ui536.js";
+import { scrollAreaStateAttributesMapping as m } from "./als-react-ts-ui541.js";
+const u = /* @__PURE__ */ n.forwardRef(function(t, s) {
+  const {
+    render: A,
+    className: R,
+    ...i
+  } = t, e = n.useRef(null), {
+    computeThumbPosition: r
+  } = l(), {
+    viewportState: c
+  } = f();
+  return a(() => {
+    if (typeof ResizeObserver > "u")
+      return;
+    const o = new ResizeObserver(r);
+    return e.current && o.observe(e.current), () => {
+      o.disconnect();
+    };
+  }, [r]), p("div", t, {
+    ref: [s, e],
+    state: c,
+    stateAttributesMapping: m,
+    props: [{
+      role: "presentation",
+      style: {
+        minWidth: "fit-content"
+      }
+    }, i]
+  });
+});
+process.env.NODE_ENV !== "production" && (u.displayName = "ScrollAreaContent");
 export {
-  e as AccordionRootContext,
-  c as useAccordionRootContext
+  u as ScrollAreaContent
 };