bj-web-components 0.2.28 → 0.2.29

package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs

@@ -1,233 +1,152 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
+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";
 /* empty css                        */
-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 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 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
+  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
         });
       }
     }
-    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
+    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
         });
       }
     }
-  }, [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);
+  }, [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);
       return;
     }
-    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();
+    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));
     };
-    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();
+    o(), i();
+    const d = new MutationObserver(() => {
+      (!m.current || !e.contains(m.current)) && o(), t && !e.contains(t) && l(), t || i(), L();
     });
-    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
+    return d.observe(e, { childList: !0, subtree: !0 }), () => {
+      d.disconnect(), n == null || n(), l(), m.current = null, y.current && clearTimeout(y.current);
     };
-    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);
+  }, [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));
   };
-  const onThumbLeave = () => {
-    thumbHoverRef.current = false;
-    if (showOnHover && !hoverTargetRef.current && !dragRef.current) setActive(false);
+  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);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showVertical && verticalThumb.visible && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ se(le, { children: [
+    P && N.visible && /* @__PURE__ */ re(
       "div",
       {
-        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 }
+        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 }
       }
     ),
-    showHorizontal && horizontalThumb.visible && /* @__PURE__ */ jsx(
+    V && R.visible && /* @__PURE__ */ re(
       "div",
       {
-        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 }
+        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 }
       }
     )
   ] });
 }
 export {
-  BOverlayScrollbar as default
+  fe as default
 };