bj-web-components 0.2.27 → 0.2.28

package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs

@@ -1,152 +1,233 @@
-import { jsxs as se, Fragment as le, jsx as re } from "react/jsx-runtime";
-import { useRef as x, useState as $, useEffect as F, useCallback as D } from "react";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
 /* empty css                        */
-const Z = 24, ie = 800, U = { visible: !1, offset: 0, length: 0, cross: 0 };
-function fe({
-  containerRef: j,
-  targetRef: C,
-  selector: q,
-  direction: S = "vertical",
-  size: g = 4,
-  gap: w = 0,
-  background: G,
-  showOnHover: s = !0,
-  showOnScroll: J = !0,
-  hoverSelector: A,
-  horizontalInsetStart: p = 0,
-  horizontalInsetEnd: B = 0,
-  horizontalThumbLength: k,
-  className: ce = ""
+const MIN_THUMB_SIZE = 24;
+const HIDE_DELAY = 800;
+const EMPTY_THUMB = { visible: false, offset: 0, length: 0, cross: 0 };
+function BOverlayScrollbar({
+  containerRef,
+  targetRef,
+  selector,
+  direction = "vertical",
+  size = 4,
+  gap = 0,
+  background,
+  showOnHover = true,
+  showOnScroll = true,
+  hoverSelector,
+  horizontalInsetStart = 0,
+  horizontalInsetEnd = 0,
+  horizontalThumbLength,
+  className = ""
 }) {
-  const P = S === "vertical" || S === "both", V = S === "horizontal" || S === "both", m = x(null), a = x(null), y = x(null), h = x(!1), E = x(!1), [N, K] = $(U), [R, Q] = $(U), [oe, f] = $(!s);
-  F(() => {
-    s || f(!0);
-  }, [s]);
-  const L = D(() => {
-    const e = m.current, n = j.current;
-    if (!e || !n) return;
-    const { scrollTop: t, scrollHeight: o, clientHeight: c, scrollLeft: b, scrollWidth: l, clientWidth: i } = e, d = e.getBoundingClientRect(), r = n.getBoundingClientRect(), v = d.top - r.top, T = d.left - r.left;
-    if (P) {
-      const _ = o - c;
-      if (_ <= 1)
-        K((u) => u.visible ? U : u);
-      else {
-        const u = Math.max(c / o * c, Z);
-        K({
-          visible: !0,
-          offset: v + t / _ * (c - u),
-          length: u,
-          cross: T + i - g - w
+  const showVertical = direction === "vertical" || direction === "both";
+  const showHorizontal = direction === "horizontal" || direction === "both";
+  const scrollElementRef = useRef(null);
+  const dragRef = useRef(null);
+  const hideTimerRef = useRef(null);
+  const hoverTargetRef = useRef(false);
+  const thumbHoverRef = useRef(false);
+  const [verticalThumb, setVerticalThumb] = useState(EMPTY_THUMB);
+  const [horizontalThumb, setHorizontalThumb] = useState(EMPTY_THUMB);
+  const [active, setActive] = useState(!showOnHover);
+  useEffect(() => {
+    if (!showOnHover) setActive(true);
+  }, [showOnHover]);
+  const sync = useCallback(() => {
+    const element = scrollElementRef.current;
+    const container = containerRef.current;
+    if (!element || !container) return;
+    const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = element;
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const offsetTop = elementRect.top - containerRect.top;
+    const offsetLeft = elementRect.left - containerRect.left;
+    if (showVertical) {
+      const maxScroll = scrollHeight - clientHeight;
+      if (maxScroll <= 1) {
+        setVerticalThumb((previous) => previous.visible ? EMPTY_THUMB : previous);
+      } else {
+        const length = Math.max(clientHeight / scrollHeight * clientHeight, MIN_THUMB_SIZE);
+        setVerticalThumb({
+          visible: true,
+          offset: offsetTop + scrollTop / maxScroll * (clientHeight - length),
+          length,
+          cross: offsetLeft + clientWidth - size - gap
         });
       }
     }
-    if (V) {
-      const _ = l - i, u = Math.max(i - p - B, 0);
-      if (_ <= 1 || u <= 0)
-        Q((H) => H.visible ? U : H);
-      else {
-        const H = i / l * u, ne = Math.min(u, Math.max(k ?? H, Z));
-        Q({
-          visible: !0,
-          offset: T + p + b / _ * (u - ne),
-          length: ne,
-          cross: v + c - g - w
+    if (showHorizontal) {
+      const maxScroll = scrollWidth - clientWidth;
+      const trackLength = Math.max(clientWidth - horizontalInsetStart - horizontalInsetEnd, 0);
+      if (maxScroll <= 1 || trackLength <= 0) {
+        setHorizontalThumb((previous) => previous.visible ? EMPTY_THUMB : previous);
+      } else {
+        const proportionalLength = clientWidth / scrollWidth * trackLength;
+        const length = Math.min(trackLength, Math.max(horizontalThumbLength ?? proportionalLength, MIN_THUMB_SIZE));
+        setHorizontalThumb({
+          visible: true,
+          offset: offsetLeft + horizontalInsetStart + scrollLeft / maxScroll * (trackLength - length),
+          length,
+          cross: offsetTop + clientHeight - size - gap
         });
       }
     }
-  }, [j, w, B, p, k, V, P, g]), W = D(() => {
-    if (!s) return;
-    const e = h.current || E.current || a.current;
-    if (!J && !e) {
-      f(!1);
+  }, [containerRef, gap, horizontalInsetEnd, horizontalInsetStart, horizontalThumbLength, showHorizontal, showVertical, size]);
+  const wakeUp = useCallback(() => {
+    if (!showOnHover) return;
+    const interacting = hoverTargetRef.current || thumbHoverRef.current || dragRef.current;
+    if (!showOnScroll && !interacting) {
+      setActive(false);
       return;
     }
-    f(!0), y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-      !a.current && !h.current && !E.current && f(!1);
-    }, ie);
-  }, [s, J]), X = D(() => {
-    L(), W();
-  }, [L, W]);
-  F(() => {
-    const e = j.current;
-    if (!e) return;
-    window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
-    let n, t = null;
-    const o = () => {
-      const r = (C == null ? void 0 : C.current) ?? (q ? e.querySelector(q) : e.firstElementChild);
-      if (!r || r === m.current) return;
-      n == null || n(), m.current = r, r.addEventListener("scroll", X, { passive: !0 });
-      const v = new ResizeObserver(L);
-      v.observe(r), r.firstElementChild && v.observe(r.firstElementChild), n = () => {
-        r.removeEventListener("scroll", X), v.disconnect();
-      }, L();
-    }, c = () => {
-      h.current = !0, s && f(!0);
-    }, b = () => {
-      h.current = !1, s && !E.current && !a.current && f(!1);
-    }, l = () => {
-      t == null || t.removeEventListener("mouseenter", c), t == null || t.removeEventListener("mouseleave", b), t = null, h.current = !1;
-    }, i = () => {
-      const r = A ? e.querySelector(A) : e;
-      !r || r === t || (l(), t = r, t.addEventListener("mouseenter", c), t.addEventListener("mouseleave", b));
+    setActive(true);
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!dragRef.current && !hoverTargetRef.current && !thumbHoverRef.current) setActive(false);
+    }, HIDE_DELAY);
+  }, [showOnHover, showOnScroll]);
+  const onScroll = useCallback(() => {
+    sync();
+    wakeUp();
+  }, [sync, wakeUp]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (window.getComputedStyle(container).position === "static") container.style.position = "relative";
+    let detach;
+    let hoverElement = null;
+    const attach = () => {
+      const element = (targetRef == null ? void 0 : targetRef.current) ?? (selector ? container.querySelector(selector) : container.firstElementChild);
+      if (!element || element === scrollElementRef.current) return;
+      detach == null ? void 0 : detach();
+      scrollElementRef.current = element;
+      element.addEventListener("scroll", onScroll, { passive: true });
+      const observer = new ResizeObserver(sync);
+      observer.observe(element);
+      if (element.firstElementChild) observer.observe(element.firstElementChild);
+      detach = () => {
+        element.removeEventListener("scroll", onScroll);
+        observer.disconnect();
+      };
+      sync();
     };
-    o(), i();
-    const d = new MutationObserver(() => {
-      (!m.current || !e.contains(m.current)) && o(), t && !e.contains(t) && l(), t || i(), L();
+    const onEnter = () => {
+      hoverTargetRef.current = true;
+      if (showOnHover) setActive(true);
+    };
+    const onLeave = () => {
+      hoverTargetRef.current = false;
+      if (showOnHover && !thumbHoverRef.current && !dragRef.current) setActive(false);
+    };
+    const detachHover = () => {
+      hoverElement == null ? void 0 : hoverElement.removeEventListener("mouseenter", onEnter);
+      hoverElement == null ? void 0 : hoverElement.removeEventListener("mouseleave", onLeave);
+      hoverElement = null;
+      hoverTargetRef.current = false;
+    };
+    const attachHover = () => {
+      const next = hoverSelector ? container.querySelector(hoverSelector) : container;
+      if (!next || next === hoverElement) return;
+      detachHover();
+      hoverElement = next;
+      hoverElement.addEventListener("mouseenter", onEnter);
+      hoverElement.addEventListener("mouseleave", onLeave);
+    };
+    attach();
+    attachHover();
+    const mutation = new MutationObserver(() => {
+      if (!scrollElementRef.current || !container.contains(scrollElementRef.current)) attach();
+      if (hoverElement && !container.contains(hoverElement)) detachHover();
+      if (!hoverElement) attachHover();
+      sync();
     });
-    return d.observe(e, { childList: !0, subtree: !0 }), () => {
-      d.disconnect(), n == null || n(), l(), m.current = null, y.current && clearTimeout(y.current);
+    mutation.observe(container, { childList: true, subtree: true });
+    return () => {
+      mutation.disconnect();
+      detach == null ? void 0 : detach();
+      detachHover();
+      scrollElementRef.current = null;
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [containerRef, hoverSelector, onScroll, selector, showOnHover, sync, targetRef]);
+  const onDragMove = useCallback((event) => {
+    const element = scrollElementRef.current;
+    const start = dragRef.current;
+    if (!element || !start) return;
+    const vertical = start.axis === "vertical";
+    const clientSize = vertical ? element.clientHeight : element.clientWidth;
+    const scrollSize = vertical ? element.scrollHeight : element.scrollWidth;
+    const trackLength = vertical ? clientSize : Math.max(clientSize - horizontalInsetStart - horizontalInsetEnd, 0);
+    const proportionalLength = clientSize / scrollSize * trackLength;
+    const thumbLength = Math.min(trackLength, Math.max(vertical ? proportionalLength : horizontalThumbLength ?? proportionalLength, MIN_THUMB_SIZE));
+    const trackRange = trackLength - thumbLength;
+    if (trackRange <= 0) return;
+    const delta = (vertical ? event.clientY : event.clientX) - start.client;
+    const moved = start.scroll + delta * ((scrollSize - clientSize) / trackRange);
+    if (vertical) element.scrollTop = moved;
+    else element.scrollLeft = moved;
+  }, [horizontalInsetEnd, horizontalInsetStart, horizontalThumbLength]);
+  const onDragEnd = useCallback(() => {
+    const wasDragging = Boolean(dragRef.current);
+    dragRef.current = null;
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+    if (wasDragging) wakeUp();
+  }, [onDragMove, wakeUp]);
+  const startDrag = (axis) => (event) => {
+    const element = scrollElementRef.current;
+    if (!element) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragRef.current = {
+      axis,
+      client: axis === "vertical" ? event.clientY : event.clientX,
+      scroll: axis === "vertical" ? element.scrollTop : element.scrollLeft
     };
-  }, [j, A, X, q, s, L, C]);
-  const M = D((e) => {
-    const n = m.current, t = a.current;
-    if (!n || !t) return;
-    const o = t.axis === "vertical", c = o ? n.clientHeight : n.clientWidth, b = o ? n.scrollHeight : n.scrollWidth, l = o ? c : Math.max(c - p - B, 0), i = c / b * l, d = Math.min(l, Math.max(o ? i : k ?? i, Z)), r = l - d;
-    if (r <= 0) return;
-    const v = (o ? e.clientY : e.clientX) - t.client, T = t.scroll + v * ((b - c) / r);
-    o ? n.scrollTop = T : n.scrollLeft = T;
-  }, [B, p, k]), Y = D(() => {
-    const e = !!a.current;
-    a.current = null, document.body.style.userSelect = "", document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", Y), e && W();
-  }, [M, W]), I = (e) => (n) => {
-    const t = m.current;
-    t && (n.preventDefault(), n.stopPropagation(), a.current = {
-      axis: e,
-      client: e === "vertical" ? n.clientY : n.clientX,
-      scroll: e === "vertical" ? t.scrollTop : t.scrollLeft
-    }, document.body.style.userSelect = "none", document.addEventListener("mousemove", M), document.addEventListener("mouseup", Y));
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onDragMove);
+    document.addEventListener("mouseup", onDragEnd);
+  };
+  useEffect(() => () => {
+    dragRef.current = null;
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+  }, [onDragEnd, onDragMove]);
+  const thumbClassName = ["bj-overlay-scrollbar__thumb", active && "bj-overlay-scrollbar__thumb--active", className].filter(Boolean).join(" ");
+  const colorStyle = background ? { "--bj-overlay-scrollbar-bg": background } : void 0;
+  const onThumbEnter = () => {
+    thumbHoverRef.current = true;
+    if (showOnHover) setActive(true);
   };
-  F(() => () => {
-    a.current = null, document.body.style.userSelect = "", document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", Y);
-  }, [Y, M]);
-  const z = ["bj-overlay-scrollbar__thumb", oe && "bj-overlay-scrollbar__thumb--active", ce].filter(Boolean).join(" "), O = G ? { "--bj-overlay-scrollbar-bg": G } : void 0, ee = () => {
-    E.current = !0, s && f(!0);
-  }, te = () => {
-    E.current = !1, s && !h.current && !a.current && f(!1);
+  const onThumbLeave = () => {
+    thumbHoverRef.current = false;
+    if (showOnHover && !hoverTargetRef.current && !dragRef.current) setActive(false);
   };
-  return /* @__PURE__ */ se(le, { children: [
-    P && N.visible && /* @__PURE__ */ re(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showVertical && verticalThumb.visible && /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${z} bj-overlay-scrollbar__thumb--vertical`,
-        onMouseDown: I("vertical"),
-        onMouseEnter: ee,
-        onMouseLeave: te,
-        style: { ...O, top: N.offset, left: N.cross, height: N.length, width: g }
+        className: `${thumbClassName} bj-overlay-scrollbar__thumb--vertical`,
+        onMouseDown: startDrag("vertical"),
+        onMouseEnter: onThumbEnter,
+        onMouseLeave: onThumbLeave,
+        style: { ...colorStyle, top: verticalThumb.offset, left: verticalThumb.cross, height: verticalThumb.length, width: size }
       }
     ),
-    V && R.visible && /* @__PURE__ */ re(
+    showHorizontal && horizontalThumb.visible && /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${z} bj-overlay-scrollbar__thumb--horizontal`,
-        onMouseDown: I("horizontal"),
-        onMouseEnter: ee,
-        onMouseLeave: te,
-        style: { ...O, left: R.offset, top: R.cross, width: R.length, height: g }
+        className: `${thumbClassName} bj-overlay-scrollbar__thumb--horizontal`,
+        onMouseDown: startDrag("horizontal"),
+        onMouseEnter: onThumbEnter,
+        onMouseLeave: onThumbLeave,
+        style: { ...colorStyle, left: horizontalThumb.offset, top: horizontalThumb.cross, width: horizontalThumb.length, height: size }
       }
     )
   ] });
 }
 export {
-  fe as default
+  BOverlayScrollbar as default
 };