@rockshin/tao-ui 0.0.1

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode, type UIEvent } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './scroll-area.css';
+export type ScrollAreaSemanticPart = 'root' | 'viewport' | 'scrollbar' | 'thumb';
+export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
+export interface ScrollAreaProps {
+    children?: ReactNode;
+    /** Scrollbar visibility behavior */
+    type?: ScrollAreaType;
+    /** Scroll direction */
+    direction?: 'vertical' | 'horizontal' | 'both';
+    /** Max height — enables vertical scroll */
+    maxHeight?: number | string;
+    /** Max width — enables horizontal scroll */
+    maxWidth?: number | string;
+    /** Scrollbar size in px */
+    scrollbarSize?: number;
+    /** Offset from edges in px */
+    scrollbarOffset?: number;
+    /** Show scroll shadows at edges */
+    scrollShadow?: boolean;
+    /** Callback on scroll */
+    onScroll?: (e: UIEvent<HTMLDivElement>) => void;
+    /** Callback when scrolled to bottom (threshold in px) */
+    onScrollEnd?: () => void;
+    /** Threshold in px for onScrollEnd */
+    scrollEndThreshold?: number;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<ScrollAreaSemanticPart>;
+    styles?: SemanticStyles<ScrollAreaSemanticPart>;
+}
+export declare function ScrollArea({ children, type, direction, maxHeight, maxWidth, scrollbarSize, scrollbarOffset, scrollShadow, onScroll: onScrollProp, onScrollEnd, scrollEndThreshold, className, style, classNames, styles, }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,375 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../../utils/semantic.js";
+import "./scroll-area.css";
+function ScrollArea(t0) {
+    const $ = c(74);
+    const { children, type: t1, direction: t2, maxHeight, maxWidth, scrollbarSize: t3, scrollbarOffset: t4, scrollShadow: t5, onScroll: onScrollProp, onScrollEnd, scrollEndThreshold: t6, className, style, classNames, styles } = t0;
+    const type = void 0 === t1 ? "hover" : t1;
+    const direction = void 0 === t2 ? "vertical" : t2;
+    const scrollbarSize = void 0 === t3 ? 6 : t3;
+    const scrollbarOffset = void 0 === t4 ? 2 : t4;
+    const scrollShadow = void 0 === t5 ? false : t5;
+    const scrollEndThreshold = void 0 === t6 ? 10 : t6;
+    const viewportRef = useRef(null);
+    let t7;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = {
+            hasVertical: false,
+            hasHorizontal: false,
+            thumbYRatio: 0,
+            thumbXRatio: 0,
+            thumbYOffset: 0,
+            thumbXOffset: 0,
+            atTop: true,
+            atBottom: true,
+            atLeft: true,
+            atRight: true
+        };
+        $[0] = t7;
+    } else t7 = $[0];
+    const [scrollState, setScrollState] = useState(t7);
+    let t8;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = ()=>{
+            const el = viewportRef.current;
+            if (!el) return;
+            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+            const hasV = scrollHeight > clientHeight + 1;
+            const hasH = scrollWidth > clientWidth + 1;
+            setScrollState({
+                hasVertical: hasV,
+                hasHorizontal: hasH,
+                thumbYRatio: hasV ? clientHeight / scrollHeight : 0,
+                thumbXRatio: hasH ? clientWidth / scrollWidth : 0,
+                thumbYOffset: hasV ? scrollTop / (scrollHeight - clientHeight) : 0,
+                thumbXOffset: hasH ? scrollLeft / (scrollWidth - clientWidth) : 0,
+                atTop: scrollTop <= 1,
+                atBottom: scrollTop + clientHeight >= scrollHeight - 1,
+                atLeft: scrollLeft <= 1,
+                atRight: scrollLeft + clientWidth >= scrollWidth - 1
+            });
+        };
+        $[1] = t8;
+    } else t8 = $[1];
+    const updateScrollState = t8;
+    let t10;
+    let t9;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t9 = ()=>{
+            const el_0 = viewportRef.current;
+            if (!el_0) return;
+            updateScrollState();
+            const observer = new ResizeObserver(()=>updateScrollState());
+            observer.observe(el_0);
+            if (el_0.firstElementChild) observer.observe(el_0.firstElementChild);
+            return ()=>observer.disconnect();
+        };
+        t10 = [
+            updateScrollState
+        ];
+        $[2] = t10;
+        $[3] = t9;
+    } else {
+        t10 = $[2];
+        t9 = $[3];
+    }
+    useEffect(t9, t10);
+    const firedScrollEnd = useRef(false);
+    let t11;
+    if ($[4] !== onScrollEnd || $[5] !== onScrollProp || $[6] !== scrollEndThreshold) {
+        t11 = (e)=>{
+            updateScrollState();
+            onScrollProp?.(e);
+            if (onScrollEnd) {
+                const el_1 = e.currentTarget;
+                const { scrollTop: scrollTop_0, scrollHeight: scrollHeight_0, clientHeight: clientHeight_0 } = el_1;
+                const nearBottom = scrollTop_0 + clientHeight_0 >= scrollHeight_0 - scrollEndThreshold;
+                if (nearBottom && !firedScrollEnd.current) {
+                    firedScrollEnd.current = true;
+                    onScrollEnd();
+                } else if (!nearBottom) firedScrollEnd.current = false;
+            }
+        };
+        $[4] = onScrollEnd;
+        $[5] = onScrollProp;
+        $[6] = scrollEndThreshold;
+        $[7] = t11;
+    } else t11 = $[7];
+    const handleScroll = t11;
+    const dragging = useRef(null);
+    let t12;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t12 = (axis, e_0)=>{
+            e_0.preventDefault();
+            e_0.stopPropagation();
+            const el_2 = viewportRef.current;
+            if (!el_2) return;
+            const pos = "y" === axis ? e_0.clientY : e_0.clientX;
+            const scroll = "y" === axis ? el_2.scrollTop : el_2.scrollLeft;
+            dragging.current = {
+                axis,
+                startPos: pos,
+                startScroll: scroll
+            };
+            const handleMove = (ev)=>{
+                if (!dragging.current || !viewportRef.current) return;
+                const { axis: a, startPos: sp, startScroll: ss } = dragging.current;
+                const delta = ("y" === a ? ev.clientY : ev.clientX) - sp;
+                const vp = viewportRef.current;
+                const trackSize = "y" === a ? vp.clientHeight : vp.clientWidth;
+                const contentSize = "y" === a ? vp.scrollHeight : vp.scrollWidth;
+                const scrollDelta = delta / trackSize * contentSize;
+                if ("y" === a) vp.scrollTop = ss + scrollDelta;
+                else vp.scrollLeft = ss + scrollDelta;
+            };
+            const handleUp = ()=>{
+                dragging.current = null;
+                document.removeEventListener("pointermove", handleMove);
+                document.removeEventListener("pointerup", handleUp);
+            };
+            document.addEventListener("pointermove", handleMove);
+            document.addEventListener("pointerup", handleUp);
+        };
+        $[8] = t12;
+    } else t12 = $[8];
+    const handleThumbPointerDown = t12;
+    let t13;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = (axis_0, e_1)=>{
+            const el_3 = viewportRef.current;
+            if (!el_3) return;
+            if (e_1.target.hasAttribute("data-tao-scroll-thumb")) return;
+            const rect = e_1.currentTarget.getBoundingClientRect();
+            const clickPos = "y" === axis_0 ? (e_1.clientY - rect.top) / rect.height : (e_1.clientX - rect.left) / rect.width;
+            if ("y" === axis_0) el_3.scrollTop = clickPos * (el_3.scrollHeight - el_3.clientHeight);
+            else el_3.scrollLeft = clickPos * (el_3.scrollWidth - el_3.clientWidth);
+        };
+        $[9] = t13;
+    } else t13 = $[9];
+    const handleTrackClick = t13;
+    const showVertical = "vertical" === direction || "both" === direction;
+    const showHorizontal = "horizontal" === direction || "both" === direction;
+    const t14 = maxHeight ?? void 0;
+    const t15 = maxWidth ?? void 0;
+    let t16;
+    if ($[10] !== t14 || $[11] !== t15) {
+        t16 = {
+            maxHeight: t14,
+            maxWidth: t15
+        };
+        $[10] = t14;
+        $[11] = t15;
+        $[12] = t16;
+    } else t16 = $[12];
+    const rootStyle = t16;
+    const t17 = showVertical ? "scroll" : "hidden";
+    const t18 = showHorizontal ? "scroll" : "hidden";
+    const t19 = styles?.viewport;
+    let t20;
+    if ($[13] !== t17 || $[14] !== t18 || $[15] !== t19) {
+        t20 = {
+            overflowY: t17,
+            overflowX: t18,
+            ...t19
+        };
+        $[13] = t17;
+        $[14] = t18;
+        $[15] = t19;
+        $[16] = t20;
+    } else t20 = $[16];
+    const viewportStyle = t20;
+    const t21 = `${scrollbarSize}px`;
+    const t22 = `${scrollbarOffset}px`;
+    let t23;
+    if ($[17] !== t21 || $[18] !== t22) {
+        t23 = {
+            "--tao-scrollbar-size": t21,
+            "--tao-scrollbar-offset": t22
+        };
+        $[17] = t21;
+        $[18] = t22;
+        $[19] = t23;
+    } else t23 = $[19];
+    const scrollbarVars = t23;
+    const t24 = scrollState.hasVertical || void 0;
+    const t25 = scrollState.hasHorizontal || void 0;
+    const t26 = classNames?.root;
+    let t27;
+    if ($[20] !== className || $[21] !== t26) {
+        t27 = cx(t26, className);
+        $[20] = className;
+        $[21] = t26;
+        $[22] = t27;
+    } else t27 = $[22];
+    const t28 = styles?.root;
+    let t29;
+    if ($[23] !== rootStyle || $[24] !== scrollbarVars || $[25] !== style || $[26] !== t28) {
+        t29 = {
+            ...rootStyle,
+            ...scrollbarVars,
+            ...t28,
+            ...style
+        };
+        $[23] = rootStyle;
+        $[24] = scrollbarVars;
+        $[25] = style;
+        $[26] = t28;
+        $[27] = t29;
+    } else t29 = $[27];
+    const t30 = classNames?.viewport;
+    let t31;
+    if ($[28] !== t30) {
+        t31 = cx(t30);
+        $[28] = t30;
+        $[29] = t31;
+    } else t31 = $[29];
+    let t32;
+    if ($[30] !== children || $[31] !== handleScroll || $[32] !== t31 || $[33] !== viewportStyle) {
+        t32 = /*#__PURE__*/ jsx("div", {
+            ref: viewportRef,
+            "data-tao-scroll-viewport": "",
+            className: t31,
+            style: viewportStyle,
+            onScroll: handleScroll,
+            children: children
+        });
+        $[30] = children;
+        $[31] = handleScroll;
+        $[32] = t31;
+        $[33] = viewportStyle;
+        $[34] = t32;
+    } else t32 = $[34];
+    let t33;
+    if ($[35] !== scrollShadow || $[36] !== scrollState.atBottom || $[37] !== scrollState.atTop || $[38] !== showVertical) {
+        t33 = scrollShadow && showVertical && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    "data-tao-scroll-shadow": "top",
+                    "data-tao-visible": !scrollState.atTop || void 0
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    "data-tao-scroll-shadow": "bottom",
+                    "data-tao-visible": !scrollState.atBottom || void 0
+                })
+            ]
+        });
+        $[35] = scrollShadow;
+        $[36] = scrollState.atBottom;
+        $[37] = scrollState.atTop;
+        $[38] = showVertical;
+        $[39] = t33;
+    } else t33 = $[39];
+    let t34;
+    if ($[40] !== scrollShadow || $[41] !== scrollState.atLeft || $[42] !== scrollState.atRight || $[43] !== showHorizontal) {
+        t34 = scrollShadow && showHorizontal && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    "data-tao-scroll-shadow": "left",
+                    "data-tao-visible": !scrollState.atLeft || void 0
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    "data-tao-scroll-shadow": "right",
+                    "data-tao-visible": !scrollState.atRight || void 0
+                })
+            ]
+        });
+        $[40] = scrollShadow;
+        $[41] = scrollState.atLeft;
+        $[42] = scrollState.atRight;
+        $[43] = showHorizontal;
+        $[44] = t34;
+    } else t34 = $[44];
+    let t35;
+    if ($[45] !== classNames?.scrollbar || $[46] !== classNames?.thumb || $[47] !== scrollState.hasVertical || $[48] !== scrollState.thumbYOffset || $[49] !== scrollState.thumbYRatio || $[50] !== showVertical || $[51] !== styles?.scrollbar || $[52] !== styles?.thumb) {
+        t35 = showVertical && scrollState.hasVertical && /*#__PURE__*/ jsx("div", {
+            "data-tao-scrollbar": "",
+            "data-tao-orientation": "vertical",
+            className: cx(classNames?.scrollbar),
+            style: styles?.scrollbar,
+            onClick: (e_2)=>handleTrackClick("y", e_2),
+            children: /*#__PURE__*/ jsx("div", {
+                "data-tao-scroll-thumb": "",
+                "data-tao-orientation": "vertical",
+                className: cx(classNames?.thumb),
+                style: {
+                    height: `${Math.max(100 * scrollState.thumbYRatio, 10)}%`,
+                    top: `${scrollState.thumbYOffset * (1 - scrollState.thumbYRatio) * 100}%`,
+                    ...styles?.thumb
+                },
+                onPointerDown: (e_3)=>handleThumbPointerDown("y", e_3)
+            })
+        });
+        $[45] = classNames?.scrollbar;
+        $[46] = classNames?.thumb;
+        $[47] = scrollState.hasVertical;
+        $[48] = scrollState.thumbYOffset;
+        $[49] = scrollState.thumbYRatio;
+        $[50] = showVertical;
+        $[51] = styles?.scrollbar;
+        $[52] = styles?.thumb;
+        $[53] = t35;
+    } else t35 = $[53];
+    let t36;
+    if ($[54] !== classNames?.scrollbar || $[55] !== classNames?.thumb || $[56] !== scrollState.hasHorizontal || $[57] !== scrollState.thumbXOffset || $[58] !== scrollState.thumbXRatio || $[59] !== showHorizontal || $[60] !== styles?.scrollbar || $[61] !== styles?.thumb) {
+        t36 = showHorizontal && scrollState.hasHorizontal && /*#__PURE__*/ jsx("div", {
+            "data-tao-scrollbar": "",
+            "data-tao-orientation": "horizontal",
+            className: cx(classNames?.scrollbar),
+            style: styles?.scrollbar,
+            onClick: (e_4)=>handleTrackClick("x", e_4),
+            children: /*#__PURE__*/ jsx("div", {
+                "data-tao-scroll-thumb": "",
+                "data-tao-orientation": "horizontal",
+                className: cx(classNames?.thumb),
+                style: {
+                    width: `${Math.max(100 * scrollState.thumbXRatio, 10)}%`,
+                    left: `${scrollState.thumbXOffset * (1 - scrollState.thumbXRatio) * 100}%`,
+                    ...styles?.thumb
+                },
+                onPointerDown: (e_5)=>handleThumbPointerDown("x", e_5)
+            })
+        });
+        $[54] = classNames?.scrollbar;
+        $[55] = classNames?.thumb;
+        $[56] = scrollState.hasHorizontal;
+        $[57] = scrollState.thumbXOffset;
+        $[58] = scrollState.thumbXRatio;
+        $[59] = showHorizontal;
+        $[60] = styles?.scrollbar;
+        $[61] = styles?.thumb;
+        $[62] = t36;
+    } else t36 = $[62];
+    let t37;
+    if ($[63] !== t24 || $[64] !== t25 || $[65] !== t27 || $[66] !== t29 || $[67] !== t32 || $[68] !== t33 || $[69] !== t34 || $[70] !== t35 || $[71] !== t36 || $[72] !== type) {
+        t37 = /*#__PURE__*/ jsxs("div", {
+            "data-tao-scroll-area": "",
+            "data-tao-scroll-type": type,
+            "data-tao-has-v": t24,
+            "data-tao-has-h": t25,
+            className: t27,
+            style: t29,
+            children: [
+                t32,
+                t33,
+                t34,
+                t35,
+                t36
+            ]
+        });
+        $[63] = t24;
+        $[64] = t25;
+        $[65] = t27;
+        $[66] = t29;
+        $[67] = t32;
+        $[68] = t33;
+        $[69] = t34;
+        $[70] = t35;
+        $[71] = t36;
+        $[72] = type;
+        $[73] = t37;
+    } else t37 = $[73];
+    return t37;
+}
+export { ScrollArea };