bj-web-components 0.2.26 → 0.2.28

package/dist/web/OverlayScrollbar/BOverlayScrollbar.js

@@ -0,0 +1,232 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("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 showVertical = direction === "vertical" || direction === "both";
+  const showHorizontal = direction === "horizontal" || direction === "both";
+  const scrollElementRef = react.useRef(null);
+  const dragRef = react.useRef(null);
+  const hideTimerRef = react.useRef(null);
+  const hoverTargetRef = react.useRef(false);
+  const thumbHoverRef = react.useRef(false);
+  const [verticalThumb, setVerticalThumb] = react.useState(EMPTY_THUMB);
+  const [horizontalThumb, setHorizontalThumb] = react.useState(EMPTY_THUMB);
+  const [active, setActive] = react.useState(!showOnHover);
+  react.useEffect(() => {
+    if (!showOnHover) setActive(true);
+  }, [showOnHover]);
+  const sync = react.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 (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
+        });
+      }
+    }
+  }, [containerRef, gap, horizontalInsetEnd, horizontalInsetStart, horizontalThumbLength, showHorizontal, showVertical, size]);
+  const wakeUp = react.useCallback(() => {
+    if (!showOnHover) return;
+    const interacting = hoverTargetRef.current || thumbHoverRef.current || dragRef.current;
+    if (!showOnScroll && !interacting) {
+      setActive(false);
+      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 = react.useCallback(() => {
+    sync();
+    wakeUp();
+  }, [sync, wakeUp]);
+  react.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();
+    };
+    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();
+    });
+    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 = react.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 = react.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
+    };
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onDragMove);
+    document.addEventListener("mouseup", onDragEnd);
+  };
+  react.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);
+  };
+  const onThumbLeave = () => {
+    thumbHoverRef.current = false;
+    if (showOnHover && !hoverTargetRef.current && !dragRef.current) setActive(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showVertical && verticalThumb.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "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 }
+      }
+    ),
+    showHorizontal && horizontalThumb.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "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 }
+      }
+    )
+  ] });
+}
+module.exports = BOverlayScrollbar;

package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs

@@ -0,0 +1,233 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } 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 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 (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
+        });
+      }
+    }
+  }, [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;
+    }
+    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();
+    };
+    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();
+    });
+    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
+    };
+    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);
+  };
+  const onThumbLeave = () => {
+    thumbHoverRef.current = false;
+    if (showOnHover && !hoverTargetRef.current && !dragRef.current) setActive(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showVertical && verticalThumb.visible && /* @__PURE__ */ jsx(
+      "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 }
+      }
+    ),
+    showHorizontal && horizontalThumb.visible && /* @__PURE__ */ jsx(
+      "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 }
+      }
+    )
+  ] });
+}
+export {
+  BOverlayScrollbar as default
+};