naive-ui 2.35.0 → 2.37.0

package/es/_internal/scrollbar/src/Scrollbar.js

@@ -1,622 +0,0 @@
-import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergeProps, Transition, watchEffect, Fragment } from 'vue';
-import { on, off } from 'evtd';
-import { VResizeObserver } from 'vueuc';
-import { useIsIos } from 'vooks';
-import { getPreciseEventTarget } from 'seemly';
-import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins';
-import { useReactivated, Wrapper } from '../../../_utils';
-import { scrollbarLight } from '../styles';
-import style from './styles/index.cssr';
-const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
-        type: Number,
-        default: 5
-    }, duration: {
-        type: Number,
-        default: 0
-    }, scrollable: {
-        type: Boolean,
-        default: true
-    }, xScrollable: Boolean, trigger: {
-        type: String,
-        default: 'hover'
-    }, useUnifiedContainer: Boolean, triggerDisplayManually: Boolean, 
-    // If container is set, resize observer won't not attached
-    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean });
-const Scrollbar = defineComponent({
-    name: 'Scrollbar',
-    props: scrollbarProps,
-    inheritAttrs: false,
-    setup(props) {
-        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
-        const rtlEnabledRef = useRtl('Scrollbar', mergedRtlRef, mergedClsPrefixRef);
-        // dom ref
-        const wrapperRef = ref(null);
-        const containerRef = ref(null);
-        const contentRef = ref(null);
-        const yRailRef = ref(null);
-        const xRailRef = ref(null);
-        // data ref
-        const contentHeightRef = ref(null);
-        const contentWidthRef = ref(null);
-        const containerHeightRef = ref(null);
-        const containerWidthRef = ref(null);
-        const yRailSizeRef = ref(null);
-        const xRailSizeRef = ref(null);
-        const containerScrollTopRef = ref(0);
-        const containerScrollLeftRef = ref(0);
-        const isShowXBarRef = ref(false);
-        const isShowYBarRef = ref(false);
-        let yBarPressed = false;
-        let xBarPressed = false;
-        let xBarVanishTimerId;
-        let yBarVanishTimerId;
-        let memoYTop = 0;
-        let memoXLeft = 0;
-        let memoMouseX = 0;
-        let memoMouseY = 0;
-        const isIos = useIsIos();
-        const yBarSizeRef = computed(() => {
-            const { value: containerHeight } = containerHeightRef;
-            const { value: contentHeight } = contentHeightRef;
-            const { value: yRailSize } = yRailSizeRef;
-            if (containerHeight === null ||
-                contentHeight === null ||
-                yRailSize === null) {
-                return 0;
-            }
-            else {
-                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight + props.size * 1.5);
-            }
-        });
-        const yBarSizePxRef = computed(() => {
-            return `${yBarSizeRef.value}px`;
-        });
-        const xBarSizeRef = computed(() => {
-            const { value: containerWidth } = containerWidthRef;
-            const { value: contentWidth } = contentWidthRef;
-            const { value: xRailSize } = xRailSizeRef;
-            if (containerWidth === null ||
-                contentWidth === null ||
-                xRailSize === null) {
-                return 0;
-            }
-            else {
-                return (xRailSize * containerWidth) / contentWidth + props.size * 1.5;
-            }
-        });
-        const xBarSizePxRef = computed(() => {
-            return `${xBarSizeRef.value}px`;
-        });
-        const yBarTopRef = computed(() => {
-            const { value: containerHeight } = containerHeightRef;
-            const { value: containerScrollTop } = containerScrollTopRef;
-            const { value: contentHeight } = contentHeightRef;
-            const { value: yRailSize } = yRailSizeRef;
-            if (containerHeight === null ||
-                contentHeight === null ||
-                yRailSize === null) {
-                return 0;
-            }
-            else {
-                const heightDiff = contentHeight - containerHeight;
-                if (!heightDiff)
-                    return 0;
-                return ((containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value));
-            }
-        });
-        const yBarTopPxRef = computed(() => {
-            return `${yBarTopRef.value}px`;
-        });
-        const xBarLeftRef = computed(() => {
-            const { value: containerWidth } = containerWidthRef;
-            const { value: containerScrollLeft } = containerScrollLeftRef;
-            const { value: contentWidth } = contentWidthRef;
-            const { value: xRailSize } = xRailSizeRef;
-            if (containerWidth === null ||
-                contentWidth === null ||
-                xRailSize === null) {
-                return 0;
-            }
-            else {
-                const widthDiff = contentWidth - containerWidth;
-                if (!widthDiff)
-                    return 0;
-                return ((containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value));
-            }
-        });
-        const xBarLeftPxRef = computed(() => {
-            return `${xBarLeftRef.value}px`;
-        });
-        const needYBarRef = computed(() => {
-            const { value: containerHeight } = containerHeightRef;
-            const { value: contentHeight } = contentHeightRef;
-            return (containerHeight !== null &&
-                contentHeight !== null &&
-                contentHeight > containerHeight);
-        });
-        const needXBarRef = computed(() => {
-            const { value: containerWidth } = containerWidthRef;
-            const { value: contentWidth } = contentWidthRef;
-            return (containerWidth !== null &&
-                contentWidth !== null &&
-                contentWidth > containerWidth);
-        });
-        const mergedShowXBarRef = computed(() => {
-            const { trigger } = props;
-            return trigger === 'none' || isShowXBarRef.value;
-        });
-        const mergedShowYBarRef = computed(() => {
-            const { trigger } = props;
-            return trigger === 'none' || isShowYBarRef.value;
-        });
-        const mergedContainerRef = computed(() => {
-            const { container } = props;
-            if (container)
-                return container();
-            return containerRef.value;
-        });
-        const mergedContentRef = computed(() => {
-            const { content } = props;
-            if (content)
-                return content();
-            return contentRef.value;
-        });
-        const activateState = useReactivated(() => {
-            // Only restore for builtin container & content
-            if (!props.container) {
-                // remount
-                scrollTo({
-                    top: containerScrollTopRef.value,
-                    left: containerScrollLeftRef.value
-                });
-            }
-        });
-        // methods
-        const handleContentResize = () => {
-            if (activateState.isDeactivated)
-                return;
-            sync();
-        };
-        const handleContainerResize = (e) => {
-            if (activateState.isDeactivated)
-                return;
-            const { onResize } = props;
-            if (onResize)
-                onResize(e);
-            sync();
-        };
-        const scrollTo = (options, y) => {
-            if (!props.scrollable)
-                return;
-            if (typeof options === 'number') {
-                scrollToPosition(y !== null && y !== void 0 ? y : 0, options, 0, false, 'auto');
-                return;
-            }
-            const { left, top, index, elSize, position, behavior, el, debounce = true } = options;
-            if (left !== undefined || top !== undefined) {
-                scrollToPosition(left !== null && left !== void 0 ? left : 0, top !== null && top !== void 0 ? top : 0, 0, false, behavior);
-            }
-            if (el !== undefined) {
-                scrollToPosition(0, el.offsetTop, el.offsetHeight, debounce, behavior);
-            }
-            else if (index !== undefined && elSize !== undefined) {
-                scrollToPosition(0, index * elSize, elSize, debounce, behavior);
-            }
-            else if (position === 'bottom') {
-                scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior);
-            }
-            else if (position === 'top') {
-                scrollToPosition(0, 0, 0, false, behavior);
-            }
-        };
-        const scrollBy = (options, y) => {
-            if (!props.scrollable)
-                return;
-            const { value: container } = mergedContainerRef;
-            if (!container)
-                return;
-            if (typeof options === 'object') {
-                container.scrollBy(options);
-            }
-            else {
-                container.scrollBy(options, y || 0);
-            }
-        };
-        function scrollToPosition(left, top, elSize, debounce, behavior) {
-            const { value: container } = mergedContainerRef;
-            if (!container)
-                return;
-            if (debounce) {
-                const { scrollTop, offsetHeight } = container;
-                if (top > scrollTop) {
-                    if (top + elSize <= scrollTop + offsetHeight) {
-                        // do nothing
-                    }
-                    else {
-                        container.scrollTo({
-                            left,
-                            top: top + elSize - offsetHeight,
-                            behavior
-                        });
-                    }
-                    return;
-                }
-            }
-            container.scrollTo({
-                left,
-                top,
-                behavior
-            });
-        }
-        function handleMouseEnterWrapper() {
-            showXBar();
-            showYBar();
-            sync();
-        }
-        function handleMouseLeaveWrapper() {
-            hideBar();
-        }
-        function hideBar() {
-            hideYBar();
-            hideXBar();
-        }
-        function hideYBar() {
-            if (yBarVanishTimerId !== undefined) {
-                window.clearTimeout(yBarVanishTimerId);
-            }
-            yBarVanishTimerId = window.setTimeout(() => {
-                isShowYBarRef.value = false;
-            }, props.duration);
-        }
-        function hideXBar() {
-            if (xBarVanishTimerId !== undefined) {
-                window.clearTimeout(xBarVanishTimerId);
-            }
-            xBarVanishTimerId = window.setTimeout(() => {
-                isShowXBarRef.value = false;
-            }, props.duration);
-        }
-        function showXBar() {
-            if (xBarVanishTimerId !== undefined) {
-                window.clearTimeout(xBarVanishTimerId);
-            }
-            isShowXBarRef.value = true;
-        }
-        function showYBar() {
-            if (yBarVanishTimerId !== undefined) {
-                window.clearTimeout(yBarVanishTimerId);
-            }
-            isShowYBarRef.value = true;
-        }
-        function handleScroll(e) {
-            const { onScroll } = props;
-            if (onScroll)
-                onScroll(e);
-            syncScrollState();
-        }
-        function syncScrollState() {
-            // only collect scroll state, do not trigger any dom event
-            const { value: container } = mergedContainerRef;
-            if (container) {
-                containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value =
-                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
-            }
-        }
-        function syncPositionState() {
-            // only collect position state, do not trigger any dom event
-            // Don't use getClientBoundingRect because element may be scale transformed
-            const { value: content } = mergedContentRef;
-            if (content) {
-                contentHeightRef.value = content.offsetHeight;
-                contentWidthRef.value = content.offsetWidth;
-            }
-            const { value: container } = mergedContainerRef;
-            if (container) {
-                containerHeightRef.value = container.offsetHeight;
-                containerWidthRef.value = container.offsetWidth;
-            }
-            const { value: xRailEl } = xRailRef;
-            const { value: yRailEl } = yRailRef;
-            if (xRailEl) {
-                xRailSizeRef.value = xRailEl.offsetWidth;
-            }
-            if (yRailEl) {
-                yRailSizeRef.value = yRailEl.offsetHeight;
-            }
-        }
-        /**
-         * Sometimes there's only one element that we can scroll,
-         * For example for textarea, there won't be a content element.
-         */
-        function syncUnifiedContainer() {
-            const { value: container } = mergedContainerRef;
-            if (container) {
-                containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value =
-                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
-                containerHeightRef.value = container.offsetHeight;
-                containerWidthRef.value = container.offsetWidth;
-                contentHeightRef.value = container.scrollHeight;
-                contentWidthRef.value = container.scrollWidth;
-            }
-            const { value: xRailEl } = xRailRef;
-            const { value: yRailEl } = yRailRef;
-            if (xRailEl) {
-                xRailSizeRef.value = xRailEl.offsetWidth;
-            }
-            if (yRailEl) {
-                yRailSizeRef.value = yRailEl.offsetHeight;
-            }
-        }
-        function sync() {
-            if (!props.scrollable)
-                return;
-            if (props.useUnifiedContainer) {
-                syncUnifiedContainer();
-            }
-            else {
-                syncPositionState();
-                syncScrollState();
-            }
-        }
-        function isMouseUpAway(e) {
-            var _a;
-            return !((_a = wrapperRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e)));
-        }
-        function handleXScrollMouseDown(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            xBarPressed = true;
-            on('mousemove', window, handleXScrollMouseMove, true);
-            on('mouseup', window, handleXScrollMouseUp, true);
-            memoXLeft = containerScrollLeftRef.value;
-            memoMouseX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
-                ? window.innerWidth - e.clientX
-                : e.clientX;
-        }
-        function handleXScrollMouseMove(e) {
-            if (!xBarPressed)
-                return;
-            if (xBarVanishTimerId !== undefined) {
-                window.clearTimeout(xBarVanishTimerId);
-            }
-            if (yBarVanishTimerId !== undefined) {
-                window.clearTimeout(yBarVanishTimerId);
-            }
-            const { value: containerWidth } = containerWidthRef;
-            const { value: contentWidth } = contentWidthRef;
-            const { value: xBarSize } = xBarSizeRef;
-            if (containerWidth === null || contentWidth === null)
-                return;
-            const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
-                ? window.innerWidth - e.clientX - memoMouseX
-                : e.clientX - memoMouseX;
-            const dScrollLeft = (dX * (contentWidth - containerWidth)) / (containerWidth - xBarSize);
-            const toScrollLeftUpperBound = contentWidth - containerWidth;
-            let toScrollLeft = memoXLeft + dScrollLeft;
-            toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft);
-            toScrollLeft = Math.max(toScrollLeft, 0);
-            const { value: container } = mergedContainerRef;
-            if (container) {
-                container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
-                const { internalOnUpdateScrollLeft } = props;
-                if (internalOnUpdateScrollLeft)
-                    internalOnUpdateScrollLeft(toScrollLeft);
-            }
-        }
-        function handleXScrollMouseUp(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            off('mousemove', window, handleXScrollMouseMove, true);
-            off('mouseup', window, handleXScrollMouseUp, true);
-            xBarPressed = false;
-            sync();
-            if (isMouseUpAway(e)) {
-                hideBar();
-            }
-        }
-        function handleYScrollMouseDown(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            yBarPressed = true;
-            on('mousemove', window, handleYScrollMouseMove, true);
-            on('mouseup', window, handleYScrollMouseUp, true);
-            memoYTop = containerScrollTopRef.value;
-            memoMouseY = e.clientY;
-        }
-        function handleYScrollMouseMove(e) {
-            if (!yBarPressed)
-                return;
-            if (xBarVanishTimerId !== undefined) {
-                window.clearTimeout(xBarVanishTimerId);
-            }
-            if (yBarVanishTimerId !== undefined) {
-                window.clearTimeout(yBarVanishTimerId);
-            }
-            const { value: containerHeight } = containerHeightRef;
-            const { value: contentHeight } = contentHeightRef;
-            const { value: yBarSize } = yBarSizeRef;
-            if (containerHeight === null || contentHeight === null)
-                return;
-            const dY = e.clientY - memoMouseY;
-            const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize);
-            const toScrollTopUpperBound = contentHeight - containerHeight;
-            let toScrollTop = memoYTop + dScrollTop;
-            toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop);
-            toScrollTop = Math.max(toScrollTop, 0);
-            const { value: container } = mergedContainerRef;
-            if (container) {
-                container.scrollTop = toScrollTop;
-            }
-        }
-        function handleYScrollMouseUp(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            off('mousemove', window, handleYScrollMouseMove, true);
-            off('mouseup', window, handleYScrollMouseUp, true);
-            yBarPressed = false;
-            sync();
-            if (isMouseUpAway(e)) {
-                hideBar();
-            }
-        }
-        watchEffect(() => {
-            const { value: needXBar } = needXBarRef;
-            const { value: needYBar } = needYBarRef;
-            const { value: mergedClsPrefix } = mergedClsPrefixRef;
-            const { value: xRailEl } = xRailRef;
-            const { value: yRailEl } = yRailRef;
-            if (xRailEl) {
-                if (!needXBar) {
-                    xRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`);
-                }
-                else {
-                    xRailEl.classList.remove(`${mergedClsPrefix}-scrollbar-rail--disabled`);
-                }
-            }
-            if (yRailEl) {
-                if (!needYBar) {
-                    yRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`);
-                }
-                else {
-                    yRailEl.classList.remove(`${mergedClsPrefix}-scrollbar-rail--disabled`);
-                }
-            }
-        });
-        onMounted(() => {
-            // if container exist, it always can't be resolved when scrollbar is mounted
-            // for example:
-            // - component
-            //   - scrollbar
-            //     - inner
-            // if you pass inner to scrollbar, you may use a ref inside component
-            // however, when scrollbar is mounted, ref is not ready at component
-            // you need to init by yourself
-            if (props.container)
-                return;
-            sync();
-        });
-        onBeforeUnmount(() => {
-            if (xBarVanishTimerId !== undefined) {
-                window.clearTimeout(xBarVanishTimerId);
-            }
-            if (yBarVanishTimerId !== undefined) {
-                window.clearTimeout(yBarVanishTimerId);
-            }
-            off('mousemove', window, handleYScrollMouseMove, true);
-            off('mouseup', window, handleYScrollMouseUp, true);
-        });
-        const themeRef = useTheme('Scrollbar', '-scrollbar', style, scrollbarLight, props, mergedClsPrefixRef);
-        const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
-            return {
-                '--n-scrollbar-bezier': cubicBezierEaseInOut,
-                '--n-scrollbar-color': color,
-                '--n-scrollbar-color-hover': colorHover,
-                '--n-scrollbar-border-radius': scrollbarBorderRadius,
-                '--n-scrollbar-width': scrollbarWidth,
-                '--n-scrollbar-height': scrollbarHeight
-            };
-        });
-        const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('scrollbar', undefined, cssVarsRef, props)
-            : undefined;
-        const exposedMethods = {
-            scrollTo,
-            scrollBy,
-            sync,
-            syncUnifiedContainer,
-            handleMouseEnterWrapper,
-            handleMouseLeaveWrapper
-        };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, containerScrollTop: containerScrollTopRef, wrapperRef,
-            containerRef,
-            contentRef,
-            yRailRef,
-            xRailRef, needYBar: needYBarRef, needXBar: needXBarRef, yBarSizePx: yBarSizePxRef, xBarSizePx: xBarSizePxRef, yBarTopPx: yBarTopPxRef, xBarLeftPx: xBarLeftPxRef, isShowXBar: mergedShowXBarRef, isShowYBar: mergedShowYBarRef, isIos,
-            handleScroll,
-            handleContentResize,
-            handleContainerResize,
-            handleYScrollMouseDown,
-            handleXScrollMouseDown, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
-    },
-    render() {
-        var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
-        if (!this.scrollable)
-            return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
-        const triggerIsNone = this.trigger === 'none';
-        const createYRail = (style) => {
-            return (h("div", { ref: "yRailRef", class: [
-                    `${mergedClsPrefix}-scrollbar-rail`,
-                    `${mergedClsPrefix}-scrollbar-rail--vertical`
-                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hiddens": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
-                default: () => this.needYBar && this.isShowYBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
-                        height: this.yBarSizePx,
-                        top: this.yBarTopPx
-                    }, onMousedown: this.handleYScrollMouseDown })) : null
-            })));
-        };
-        const createChildren = () => {
-            var _a, _b;
-            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-            return h('div', mergeProps(this.$attrs, {
-                role: 'none',
-                ref: 'wrapperRef',
-                class: [
-                    `${mergedClsPrefix}-scrollbar`,
-                    this.themeClass,
-                    rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl`
-                ],
-                style: this.cssVars,
-                onMouseenter: triggerDisplayManually
-                    ? undefined
-                    : this.handleMouseEnterWrapper,
-                onMouseleave: triggerDisplayManually
-                    ? undefined
-                    : this.handleMouseLeaveWrapper
-            }), [
-                this.container ? ((_b = $slots.default) === null || _b === void 0 ? void 0 : _b.call($slots)) : (h("div", { role: "none", ref: "containerRef", class: [
-                        `${mergedClsPrefix}-scrollbar-container`,
-                        this.containerClass
-                    ], style: this.containerStyle, onScroll: this.handleScroll, onWheel: this.onWheel },
-                    h(VResizeObserver, { onResize: this.handleContentResize }, {
-                        default: () => (h("div", { ref: "contentRef", role: "none", style: [
-                                {
-                                    width: this.xScrollable ? 'fit-content' : null
-                                },
-                                this.contentStyle
-                            ], class: [
-                                `${mergedClsPrefix}-scrollbar-content`,
-                                this.contentClass
-                            ] }, $slots))
-                    }))),
-                internalHoistYRail ? null : createYRail(undefined),
-                this.xScrollable && (h("div", { ref: "xRailRef", class: [
-                        `${mergedClsPrefix}-scrollbar-rail`,
-                        `${mergedClsPrefix}-scrollbar-rail--horizontal`
-                    ], style: this.horizontalRailStyle, "data-scrollbar-rail": true, "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
-                    default: () => this.needXBar && this.isShowXBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
-                            width: this.xBarSizePx,
-                            right: rtlEnabled ? this.xBarLeftPx : undefined,
-                            left: rtlEnabled ? undefined : this.xBarLeftPx
-                        }, onMousedown: this.handleXScrollMouseDown })) : null
-                })))
-            ]);
-        };
-        const scrollbarNode = this.container ? (createChildren()) : (h(VResizeObserver, { onResize: this.handleContainerResize }, {
-            default: createChildren
-        }));
-        if (internalHoistYRail) {
-            return (h(Fragment, null,
-                scrollbarNode,
-                createYRail(this.cssVars)));
-        }
-        else {
-            return scrollbarNode;
-        }
-    }
-});
-export default Scrollbar;
-export const XScrollbar = Scrollbar;

package/es/_internal/scrollbar/src/styles/index.cssr.js

@@ -1,63 +0,0 @@
-import { cB, c, cM, cE } from '../../../../_utils/cssr';
-import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr';
-// vars:
-// --n-scrollbar-bezier
-// --n-scrollbar-color
-// --n-scrollbar-color-hover
-// --n-scrollbar-width
-// --n-scrollbar-height
-// --n-scrollbar-border-radius
-export default cB('scrollbar', `
- overflow: hidden;
- position: relative;
- z-index: auto;
- height: 100%;
- width: 100%;
-`, [c('>', [cB('scrollbar-container', `
- width: 100%;
- overflow: scroll;
- height: 100%;
- min-height: inherit;
- max-height: inherit;
- scrollbar-width: none;
- `, [c('&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb', `
- width: 0;
- height: 0;
- display: none;
- `), c('>', [cB('scrollbar-content', `
- box-sizing: border-box;
- min-width: 100%;
- `)])])]), c('>, +', [cB('scrollbar-rail', `
- position: absolute;
- pointer-events: none;
- user-select: none;
- -webkit-user-select: none;
- `, [cM('horizontal', `
- left: 2px;
- right: 2px;
- bottom: 4px;
- height: var(--n-scrollbar-height);
- `, [c('>', [cE('scrollbar', `
- height: var(--n-scrollbar-height);
- border-radius: var(--n-scrollbar-border-radius);
- right: 0;
- `)])]), cM('vertical', `
- right: 4px;
- top: 2px;
- bottom: 2px;
- width: var(--n-scrollbar-width);
- `, [c('>', [cE('scrollbar', `
- width: var(--n-scrollbar-width);
- border-radius: var(--n-scrollbar-border-radius);
- bottom: 0;
- `)])]), cM('disabled', [c('>', [cE('scrollbar', {
-  pointerEvents: 'none'
-})])]), c('>', [cE('scrollbar', `
- position: absolute;
- cursor: pointer;
- pointer-events: all;
- background-color: var(--n-scrollbar-color);
- transition: background-color .2s var(--n-scrollbar-bezier);
- `, [fadeInTransition(), c('&:hover', {
-  backgroundColor: 'var(--n-scrollbar-color-hover)'
-})])])])])]);

package/es/_internal/scrollbar/src/styles/rtl.cssr.js

@@ -1,10 +0,0 @@
-import { cB, c, cM, cE } from '../../../../_utils/cssr';
-export default cB('scrollbar', [cM('rtl', `
- direction: rtl;
- `, [c('>', [cB('scrollbar-rail', [cM('horizontal', [c('>', [cE('scrollbar', `
- left: 0;
- right: unset;
- `)])]), cM('vertical', `
- left: 4px;
- right: unset;
- `)])])])]);