@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/ScrollBar/tools/_Base.jsx

@@ -0,0 +1,317 @@
+import { createPortal } from "react-dom";
+import S from "./_styled";
+import useVars from "./useVars";
+import { Visibility } from "../../Visibility";
+
+const Bar = ({
+    Variant,
+    truckRef,
+    thumbRef,
+    onTruckMouseDown,
+    onThumbMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    isDragging,
+    isScrollbarActive,
+    isWindowLike,
+    hostRect,
+    truckColor,
+    thumbColor,
+    colors,
+    thickness,
+    maxLength,
+    trackMargin,
+    edgeMarginX,
+    edgeMarginY,
+    minThumbLength,
+    exactThumbSize,
+    fillMode,
+    enableThumbScale,
+    disableOpacityEffect,
+    thumbLength,
+    thumbPosition,
+    barPosition,
+    mirror,
+}) => {
+    const docEl = typeof document !== "undefined" ? document.documentElement : null;
+    const viewportWidth =
+        docEl?.clientWidth ?? (typeof window !== "undefined" ? window.innerWidth : 0);
+    const viewportHeight =
+        docEl?.clientHeight ?? (typeof window !== "undefined" ? window.innerHeight : 0);
+
+    const hostW = hostRect?.clientWidth || hostRect?.width || viewportWidth;
+    const hostH = hostRect?.clientHeight || hostRect?.height || viewportHeight;
+
+    const isBarVertical = barPosition === "vertical";
+    const resolvedEdgeMargin = isBarVertical ? edgeMarginY : edgeMarginX;
+
+    const barLength = isBarVertical
+        ? maxLength
+            ? (hostH * maxLength) / 100
+            : Math.max(0, hostH - trackMargin * 2)
+        : maxLength
+          ? (hostW * maxLength) / 100
+          : Math.max(0, hostW - trackMargin * 2);
+
+    const trackStartOffset = maxLength
+        ? ((isBarVertical ? hostH : hostW) - barLength) / 2
+        : trackMargin;
+
+    const baseStyle = isBarVertical
+        ? {
+              width: thickness + "rem",
+              height: `${barLength}px`,
+          }
+        : {
+              width: `${barLength}px`,
+              height: thickness + "rem",
+          };
+
+    const windowLikePositionStyle = isBarVertical
+        ? {
+              position: "fixed",
+              top: trackStartOffset + "px",
+              [mirror ? "left" : "right"]: resolvedEdgeMargin + "rem",
+          }
+        : {
+              position: "fixed",
+              left: trackStartOffset + "px",
+              [mirror ? "top" : "bottom"]: resolvedEdgeMargin + "rem",
+          };
+
+    const hostLikePositionStyle = isBarVertical
+        ? {
+              position: "absolute",
+              top: trackStartOffset + "px",
+              [mirror ? "left" : "right"]: resolvedEdgeMargin + "rem",
+          }
+        : {
+              position: "absolute",
+              left: trackStartOffset + "px",
+              [mirror ? "top" : "bottom"]: resolvedEdgeMargin + "rem",
+          };
+
+    const shouldUseMinThumb = exactThumbSize == null && !fillMode;
+    const verticalThumbTransform = enableThumbScale
+        ? fillMode
+            ? "translate3d(0, 0, 0) scale(1.5, 1)"
+            : `translate3d(0, ${thumbPosition}px, 0) scale(1.5, 1)`
+        : fillMode
+          ? "translate3d(0, 0, 0)"
+          : `translate3d(0, ${thumbPosition}px, 0)`;
+    const horizontalThumbTransform = enableThumbScale
+        ? fillMode
+            ? "translate3d(0, 0, 0) scale(1, 1.5)"
+            : `translate3d(${thumbPosition}px, 0, 0) scale(1, 1.5)`
+        : fillMode
+          ? "translate3d(0, 0, 0)"
+          : `translate3d(${thumbPosition}px, 0, 0)`;
+
+    return (
+        <Variant
+            aria-label="ScrollBar"
+            ref={truckRef}
+            onMouseDown={onTruckMouseDown}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            data-slot="track"
+            $barPosition={barPosition}
+            $mirror={mirror}
+            $truckColor={truckColor}
+            $thumbColor={thumbColor}
+            $colors={colors}
+            $thumbLength={thumbLength}
+            $thumbPosition={thumbPosition}
+            $isDragging={isDragging}
+            $isScrollbarActive={isScrollbarActive}
+            $isBoxMode={!isWindowLike}
+            $enableThumbScale={enableThumbScale}
+            $disableOpacityEffect={disableOpacityEffect}
+            style={{
+                ...baseStyle,
+                ...(isWindowLike ? windowLikePositionStyle : hostLikePositionStyle),
+                zIndex: 9999999999,
+                display: "flex",
+                justifyContent: "flex-start",
+                alignItems: "flex-start",
+                cursor: "pointer",
+                pointerEvents: "auto",
+                overflow: enableThumbScale ? "visible" : "hidden",
+            }}
+        >
+            <div
+                ref={thumbRef}
+                onMouseDown={fillMode ? undefined : onThumbMouseDown}
+                data-slot="thumb"
+                style={
+                    isBarVertical
+                        ? {
+                              width: "100%",
+                              height: thumbLength + "px",
+                              ...(shouldUseMinThumb ? { minHeight: minThumbLength + "px" } : {}),
+                              cursor: fillMode ? "pointer" : isDragging ? "grabbing" : "grab",
+                              transform: verticalThumbTransform,
+                              transformOrigin: "center top",
+                              willChange: "transform, height",
+                          }
+                        : {
+                              height: "100%",
+                              width: thumbLength + "px",
+                              ...(shouldUseMinThumb ? { minWidth: minThumbLength + "px" } : {}),
+                              cursor: fillMode ? "pointer" : isDragging ? "grabbing" : "grab",
+                              transform: horizontalThumbTransform,
+                              transformOrigin: "left center",
+                              willChange: "transform, width",
+                          }
+                }
+            />
+        </Variant>
+    );
+};
+
+export const Base = (p) => {
+    const {
+        Variant,
+        anchorRef,
+        overlayHost,
+        hostRect,
+        isWindowLike,
+        colors,
+        truckColor,
+        thumbColor,
+        thickness,
+        maxLength,
+        trackMargin,
+        edgeMarginX,
+        edgeMarginY,
+        minThumbLength,
+        exactThumbSize,
+        fillMode,
+        enableThumbScale,
+        disableOpacityEffect,
+        showX,
+        showY,
+        x,
+        y,
+        xTruckRef,
+        yTruckRef,
+        xThumbRef,
+        yThumbRef,
+        xBarPosition,
+        yBarPosition,
+        onXTruckMouseDown,
+        onYTruckMouseDown,
+        onXThumbMouseDown,
+        onYThumbMouseDown,
+        isDraggingX,
+        isDraggingY,
+        isScrollbarActive,
+        handleOnMouseEnter,
+        handleOnMouseLeave,
+        mirror,
+        hasExternalSource,
+        hasSplitPositionSource,
+    } = useVars(p);
+
+    const bars = [
+        <Visibility.mount
+            key="scrollbar-y"
+            visible={showY}
+            content={
+                <Bar
+                    Variant={Variant}
+                    truckRef={yTruckRef}
+                    thumbRef={yThumbRef}
+                    onTruckMouseDown={onYTruckMouseDown}
+                    onThumbMouseDown={onYThumbMouseDown}
+                    onMouseEnter={handleOnMouseEnter}
+                    onMouseLeave={handleOnMouseLeave}
+                    isDragging={isDraggingY}
+                    isScrollbarActive={isScrollbarActive}
+                    isWindowLike={isWindowLike}
+                    hostRect={hostRect}
+                    truckColor={truckColor}
+                    thumbColor={thumbColor}
+                    colors={colors}
+                    thickness={thickness}
+                    maxLength={maxLength}
+                    trackMargin={trackMargin}
+                    edgeMarginX={edgeMarginX}
+                    edgeMarginY={edgeMarginY}
+                    minThumbLength={minThumbLength}
+                    exactThumbSize={exactThumbSize}
+                    fillMode={fillMode}
+                    enableThumbScale={enableThumbScale}
+                    disableOpacityEffect={disableOpacityEffect}
+                    thumbLength={y.thumbLength}
+                    thumbPosition={y.thumbPosition}
+                    barPosition={yBarPosition}
+                    mirror={mirror}
+                />
+            }
+        />,
+        <Visibility.mount
+            key="scrollbar-x"
+            visible={showX}
+            content={
+                <Bar
+                    Variant={Variant}
+                    truckRef={xTruckRef}
+                    thumbRef={xThumbRef}
+                    onTruckMouseDown={onXTruckMouseDown}
+                    onThumbMouseDown={onXThumbMouseDown}
+                    onMouseEnter={handleOnMouseEnter}
+                    onMouseLeave={handleOnMouseLeave}
+                    isDragging={isDraggingX}
+                    isScrollbarActive={isScrollbarActive}
+                    isWindowLike={isWindowLike}
+                    hostRect={hostRect}
+                    truckColor={truckColor}
+                    thumbColor={thumbColor}
+                    colors={colors}
+                    thickness={thickness}
+                    maxLength={maxLength}
+                    trackMargin={trackMargin}
+                    edgeMarginX={edgeMarginX}
+                    edgeMarginY={edgeMarginY}
+                    minThumbLength={minThumbLength}
+                    exactThumbSize={exactThumbSize}
+                    fillMode={fillMode}
+                    enableThumbScale={enableThumbScale}
+                    disableOpacityEffect={disableOpacityEffect}
+                    thumbLength={x.thumbLength}
+                    thumbPosition={x.thumbPosition}
+                    barPosition={xBarPosition}
+                    mirror={mirror}
+                />
+            }
+        />,
+    ];
+
+    const overlay =
+        !isWindowLike && (!hasExternalSource || hasSplitPositionSource) && overlayHost && hostRect
+            ? createPortal(
+                  <div
+                      data-scrollbar-overlay=""
+                      style={{
+                          position: "absolute",
+                          top: hostRect.overlayTop + "px",
+                          left: hostRect.overlayLeft + "px",
+                          width: (hostRect.clientWidth || hostRect.width || 0) + "px",
+                          height: (hostRect.clientHeight || hostRect.height || 0) + "px",
+                          overflow: "initial",
+                          pointerEvents: "none",
+                          zIndex: 9999999999,
+                      }}
+                  >
+                      {bars}
+                  </div>,
+                  overlayHost,
+              )
+            : null;
+
+    const barContent =
+        isWindowLike || (hasExternalSource && !hasSplitPositionSource) ? bars : [overlay];
+
+    return [<S.anchor key="scrollbar-anchor" ref={anchorRef} />, ...barContent];
+};

package/src/libs/ScrollBar/tools/_styled.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const S = {
+    anchor: styled.div`
+        display: none;
+    `,
+};
+
+export default S;

package/src/libs/ScrollBar/tools/getScrollHost.js

@@ -0,0 +1,7 @@
+const getScrollHost = ({ node, body = false }) => {
+    if (typeof document === "undefined") return null;
+    if (body) return document.documentElement;
+    return node?.parentElement || null;
+};
+
+export default getScrollHost;

package/src/libs/ScrollBar/tools/getScrollMetrics.js

@@ -0,0 +1,83 @@
+export const getViewportSize = () => {
+    const docEl = typeof document !== "undefined" ? document.documentElement : null;
+
+    return {
+        width: docEl?.clientWidth ?? (typeof window !== "undefined" ? window.innerWidth : 0),
+        height: docEl?.clientHeight ?? (typeof window !== "undefined" ? window.innerHeight : 0),
+    };
+};
+
+export const getAxisOverflow = ({ source, isWindowLike }) => {
+    if (typeof document === "undefined" || !source) {
+        return {
+            isOverflowingX: false,
+            isOverflowingY: false,
+        };
+    }
+
+    if (isWindowLike) {
+        const docEl = document.documentElement;
+        const body = document.body;
+        const viewport = getViewportSize();
+
+        return {
+            isOverflowingX: Math.max(docEl.scrollWidth, body.scrollWidth) > viewport.width,
+            isOverflowingY: Math.max(docEl.scrollHeight, body.scrollHeight) > viewport.height,
+        };
+    }
+
+    return {
+        isOverflowingX: source.scrollWidth > source.clientWidth,
+        isOverflowingY: source.scrollHeight > source.clientHeight,
+    };
+};
+
+export const getHostRect = ({ host, isWindowLike }) => {
+    const viewport = getViewportSize();
+
+    if (typeof document === "undefined" || isWindowLike || !host) {
+        return {
+            top: 0,
+            left: 0,
+            right: viewport.width,
+            bottom: viewport.height,
+            width: viewport.width,
+            height: viewport.height,
+            clientWidth: viewport.width,
+            clientHeight: viewport.height,
+            scrollWidth:
+                typeof document === "undefined"
+                    ? viewport.width
+                    : Math.max(document.documentElement.scrollWidth, document.body.scrollWidth),
+            scrollHeight:
+                typeof document === "undefined"
+                    ? viewport.height
+                    : Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
+            overlayTop: 0,
+            overlayLeft: 0,
+        };
+    }
+
+    const rect = host.getBoundingClientRect();
+    const parent = host.parentElement;
+    const parentRect = parent?.getBoundingClientRect?.();
+
+    return {
+        top: rect.top,
+        left: rect.left,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height,
+        clientWidth: host.clientWidth,
+        clientHeight: host.clientHeight,
+        scrollWidth: host.scrollWidth,
+        scrollHeight: host.scrollHeight,
+        overlayTop: parentRect
+            ? rect.top - parentRect.top + (parent?.scrollTop || 0) + host.clientTop
+            : rect.top,
+        overlayLeft: parentRect
+            ? rect.left - parentRect.left + (parent?.scrollLeft || 0) + host.clientLeft
+            : rect.left,
+    };
+};

package/src/libs/ScrollBar/tools/getThumbProps.js

@@ -0,0 +1,133 @@
+const getSafeNumber = (value, fallback) => {
+    if (value == null) return fallback;
+    const n = Number(value);
+    if (Number.isNaN(n)) return fallback;
+    return n;
+};
+
+const getThumbProps = ({
+    scrollAxis = "y",
+    visualAxis = "y",
+    maxLength,
+    trackMargin,
+    minThumbLength,
+    exactThumbSize,
+    fillMode = false,
+    source = typeof window !== "undefined" ? window : undefined,
+    visualSource = source,
+} = {}) => {
+    if (
+        typeof window === "undefined" ||
+        typeof document === "undefined" ||
+        !source ||
+        !visualSource
+    ) {
+        return {
+            thumbLength: 0,
+            thumbPosition: 0,
+            trackLength: 0,
+            maxScroll: 0,
+            scrollPos: 0,
+        };
+    }
+
+    const docEl = document.documentElement;
+    const body = document.body;
+
+    const isScrollY = scrollAxis === "y";
+    const isVisualY = visualAxis === "y";
+
+    const isWindowLike =
+        source === window || source === document.body || source === document.documentElement;
+    const isVisualWindowLike =
+        visualSource === window ||
+        visualSource === document.body ||
+        visualSource === document.documentElement;
+
+    const visibleLength = isWindowLike
+        ? isScrollY
+            ? window.innerHeight
+            : window.innerWidth
+        : isScrollY
+          ? source.clientHeight
+          : source.clientWidth;
+
+    const visualHostLength = isVisualWindowLike
+        ? isVisualY
+            ? window.innerHeight
+            : window.innerWidth
+        : isVisualY
+          ? visualSource.clientHeight
+          : visualSource.clientWidth;
+
+    const trackLength = Math.max(
+        0,
+        maxLength ? visualHostLength * (maxLength / 100) : visualHostLength - trackMargin * 2,
+    );
+
+    const contentLength = isWindowLike
+        ? isScrollY
+            ? Math.max(docEl.scrollHeight, body.scrollHeight)
+            : Math.max(docEl.scrollWidth, body.scrollWidth)
+        : isScrollY
+          ? source.scrollHeight
+          : source.scrollWidth;
+
+    const scrollPos = isWindowLike
+        ? isScrollY
+            ? window.scrollY || window.pageYOffset || 0
+            : window.scrollX || window.pageXOffset || 0
+        : isScrollY
+          ? source.scrollTop
+          : source.scrollLeft;
+
+    const maxScroll = Math.max(0, contentLength - visibleLength);
+
+    if (maxScroll <= 0 || contentLength <= 0 || trackLength <= 0) {
+        return {
+            thumbLength: Math.round(trackLength),
+            thumbPosition: 0,
+            trackLength: Math.round(trackLength),
+            maxScroll: 0,
+            scrollPos: 0,
+        };
+    }
+
+    if (fillMode) {
+        const progress = Math.max(0, Math.min(1, scrollPos / maxScroll));
+        const thumbLength = trackLength * progress;
+
+        return {
+            thumbLength: Math.round(thumbLength),
+            thumbPosition: 0,
+            trackLength: Math.round(trackLength),
+            maxScroll: Math.round(maxScroll),
+            scrollPos: Math.round(scrollPos),
+        };
+    }
+
+    let thumbLength;
+
+    if (exactThumbSize != null) {
+        thumbLength = getSafeNumber(exactThumbSize, minThumbLength);
+    } else {
+        thumbLength = trackLength * (visibleLength / contentLength);
+        thumbLength = Math.max(minThumbLength, thumbLength);
+    }
+
+    thumbLength = Math.max(1, thumbLength);
+    thumbLength = Math.min(trackLength, thumbLength);
+
+    const movableArea = Math.max(0, trackLength - thumbLength);
+    const thumbPosition = maxScroll > 0 ? (scrollPos / maxScroll) * movableArea : 0;
+
+    return {
+        thumbLength: Math.round(thumbLength),
+        thumbPosition: Math.round(thumbPosition),
+        trackLength: Math.round(trackLength),
+        maxScroll: Math.round(maxScroll),
+        scrollPos: Math.round(scrollPos),
+    };
+};
+
+export default getThumbProps;

package/src/libs/ScrollBar/tools/manageBrowsersScrollBar.js

@@ -0,0 +1,70 @@
+export const disableBrowserScrollBar = ({ host, styleEl }) => {
+    if (!host || typeof document === "undefined") return null;
+
+    const root = document.getElementById("root");
+    let uid = null;
+
+    const isRootLike =
+        host === root ||
+        host === document.body ||
+        host === document.documentElement ||
+        host === window;
+
+    const previousValues = {
+        targetEl: host,
+        scrollbarAttr: null,
+    };
+
+    if (!isRootLike) {
+        uid = `scroll-hide-${Math.random().toString(36).slice(2, 10)}`;
+        host.setAttribute("data-scrollbar-hide", uid);
+        previousValues.scrollbarAttr = uid;
+    }
+
+    styleEl.setAttribute("data-scrollbar-hide-style", "true");
+
+    if (isRootLike) {
+        styleEl.textContent = `
+            html, body {
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+            }
+
+            html::-webkit-scrollbar,
+            body::-webkit-scrollbar {
+                display: none;
+            }
+        `;
+    } else {
+        styleEl.textContent = `
+            [data-scrollbar-hide="${uid}"] {
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+            }
+
+            [data-scrollbar-hide="${uid}"]::-webkit-scrollbar {
+                display: none;
+            }
+        `;
+    }
+
+    document.head.appendChild(styleEl);
+
+    return previousValues;
+};
+
+export const enableBrowserScrollBar = ({ styleEl, previousValues }) => {
+    try {
+        styleEl?.remove();
+
+        if (!previousValues) return;
+
+        const { targetEl, scrollbarAttr } = previousValues;
+
+        if (scrollbarAttr && targetEl) {
+            targetEl.removeAttribute("data-scrollbar-hide");
+        }
+    } catch (e) {
+        console.warn("ScrollBar cleanup error:", e);
+    }
+};

package/src/libs/ScrollBar/tools/scrollBarAxis.js

@@ -0,0 +1,17 @@
+export const toBodyEdgeMargin = (value) => (value < 0 ? Math.abs(value) : value);
+
+export const getBarPositionForAxis = (axis, { effectiveOpposite } = {}) => {
+    if (axis === "y") return effectiveOpposite ? "horizontal" : "vertical";
+    return effectiveOpposite ? "vertical" : "horizontal";
+};
+
+export const getClientValueForAxis = (axis, e, { effectiveOpposite } = {}) => {
+    const barPosition = getBarPositionForAxis(axis, { effectiveOpposite });
+    return barPosition === "vertical" ? e.clientY : e.clientX;
+};
+
+export const getVisibleEdge = (isVisible, barPosition, effectiveMirror) => {
+    if (!isVisible) return {};
+    if (barPosition === "vertical") return effectiveMirror ? { left: true } : { right: true };
+    return effectiveMirror ? { top: true } : { bottom: true };
+};