@canlooks/can-ui 0.0.1

package/dist/cjs/components/popper/popper.js

@@ -0,0 +1,440 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popper = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const utils_1 = require("../../utils");
+const clickAway_1 = require("../clickAway");
+const popper_style_1 = require("./popper.style");
+const popperContext_1 = require("./popperContext");
+const app_1 = require("../app");
+const getAttemptOrder = (placement) => {
+    const withoutPlaceB = {
+        'top': ['top', 'bottom', 'left', 'right', 'top'],
+        'bottom': ['bottom', 'top', 'left', 'right', 'bottom'],
+        'left': ['left', 'right', 'top', 'bottom', 'left'],
+        'right': ['right', 'left', 'top', 'bottom', 'right']
+    };
+    if (placement in withoutPlaceB) {
+        return withoutPlaceB[placement];
+    }
+    const common = ['topLeft', 'topRight', 'rightTop', 'rightBottom', 'bottomRight', 'bottomLeft', 'leftBottom', 'leftTop'];
+    common.splice(common.indexOf(placement), 1);
+    return [placement, ...common, placement];
+};
+exports.Popper = (0, react_1.forwardRef)(({ popperRef, anchorElement, container = document.body, content, offset, trigger = ['hover', 'focus'], placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    offset ??= spacing[2];
+    (0, react_1.useImperativeHandle)(popperRef, () => {
+        if (innerPopperRef.current) {
+            innerPopperRef.current.fit = fitPosition;
+        }
+        return innerPopperRef.current;
+    });
+    /**
+     * --------------------------------------------------------------
+     * 打开关闭与是否渲染
+     */
+    const unmounted = (0, utils_1.useUnmounted)();
+    const openHolding = (0, react_1.useRef)(false);
+    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
+    const setInnerOpen = (open, contextMenuEvent) => {
+        if (disabled || unmounted.current) {
+            return;
+        }
+        const openState = typeof open === 'function' ? open(innerOpen.current) : open;
+        if (openState || !openHolding.current) {
+            // 需要openHolding为false时才能关闭
+            _setInnerOpen(openState);
+        }
+        setContextMenuEvent(contextMenuEvent);
+    };
+    const renderedOnce = (0, react_1.useRef)(!!forceRender);
+    if (innerOpen.current) {
+        renderedOnce.current = true;
+    }
+    const forceUpdate = (0, utils_1.useForceUpdate)();
+    const animating = (0, react_1.useRef)(false);
+    const onTransitionEnd = (e) => {
+        props.onTransitionEnd?.(e);
+        onOpenChangeEnd?.(innerOpen.current);
+        if (forceRender === false && !innerOpen.current) {
+            renderedOnce.current = false;
+            forceUpdate();
+        }
+        animating.current = false;
+    };
+    /**
+     * --------------------------------------------------------------
+     * 计算弹框位置
+     */
+    const anchorRef = (0, react_1.useRef)(null);
+    const getAnchorElement = () => {
+        return anchorRef.current || (typeof anchorElement === 'function' ? anchorElement() : anchorElement);
+    };
+    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const innerPopperRef = (0, react_1.useRef)(null);
+    const [popperPosition, setPopperPosition] = (0, react_1.useState)();
+    const [popperSize, setPopperSize] = (0, react_1.useState)();
+    const [openNextFrame, setOpenNextFrame] = (0, utils_1.useDerivedState)(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
+    const placeA = (0, react_1.useRef)();
+    const placeB = (0, react_1.useRef)();
+    const fitPosition = (options, beforeOpen) => {
+        const containerRect = containerEl.getBoundingClientRect();
+        const popperEl = innerPopperRef.current;
+        let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
+        let pA, pB;
+        let left, top;
+        let width, height;
+        let originX, originY;
+        let attempt;
+        if (contextMenuEvent.current) {
+            // 右键菜单
+            const mouseX = contextMenuEvent.current.clientX - containerRect.left;
+            const mouseY = contextMenuEvent.current.clientY - containerRect.top;
+            attempt = (placement) => {
+                [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
+                if (pB) {
+                    switch (placement) {
+                        case 'topLeft':
+                        case 'leftTop':
+                            left = mouseX - popperWidth;
+                            top = mouseY - popperHeight;
+                            originX = '100%';
+                            originY = '100%';
+                            break;
+                        case 'topRight':
+                        case 'rightTop':
+                            left = mouseX;
+                            top = mouseY - popperHeight;
+                            originX = '0%';
+                            originY = '100%';
+                            break;
+                        case 'bottomLeft':
+                        case 'leftBottom':
+                            left = mouseX - popperWidth;
+                            top = mouseY;
+                            originX = '100%';
+                            originY = '0%';
+                            break;
+                        case 'bottomRight':
+                        case 'rightBottom':
+                            left = mouseX;
+                            top = mouseY;
+                            originX = '0%';
+                            originY = '0%';
+                            break;
+                    }
+                }
+                else {
+                    switch (pA) {
+                        case 'top':
+                            top = mouseY - popperHeight;
+                            originY = '100%';
+                            break;
+                        case 'bottom':
+                            top = mouseY;
+                            originY = '0%';
+                            break;
+                        case 'left':
+                            left = mouseX - popperWidth;
+                            originX = '100%';
+                            break;
+                        case 'right':
+                            left = mouseX;
+                            originX = '0%';
+                            break;
+                    }
+                    if (pA === 'top' || pA === 'bottom') {
+                        left = mouseX - popperWidth / 2;
+                        originX = '50%';
+                    }
+                    else {
+                        top = mouseY - popperHeight / 2;
+                        originY = '50%';
+                    }
+                }
+                popperEl.style.left = left + 'px';
+                popperEl.style.top = top + 'px';
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl === document.body ? void 0 : containerEl);
+            };
+        }
+        else {
+            // 非右键菜单
+            const anchorRect = getAnchorElement().getBoundingClientRect();
+            const topEdge = anchorRect.top - containerRect.top;
+            const leftEdge = anchorRect.left - containerRect.left;
+            attempt = (placement) => {
+                [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
+                if (sizeAdaptable) {
+                    if (pA === 'top' || pA === 'bottom') {
+                        width = popperWidth = anchorRect.width;
+                        height = void 0;
+                        popperHeight = popperEl.offsetHeight;
+                    }
+                    else {
+                        width = void 0;
+                        height = popperHeight = anchorRect.height;
+                        popperWidth = popperEl.offsetWidth;
+                    }
+                }
+                else {
+                    width = height = void 0;
+                }
+                switch (pA) {
+                    case 'top':
+                        top = topEdge - popperHeight - offset;
+                        originY = '100%';
+                        break;
+                    case 'bottom':
+                        top = topEdge + anchorRect.height + offset;
+                        originY = '0%';
+                        break;
+                    case 'left':
+                        left = leftEdge - popperWidth - offset;
+                        originX = '100%';
+                        break;
+                    case 'right':
+                        left = leftEdge + anchorRect.width + offset;
+                        originX = '0%';
+                }
+                switch (pB) {
+                    case 'Left':
+                        left = leftEdge;
+                        originX = '0%';
+                        break;
+                    case 'Right':
+                        left = leftEdge - popperWidth + anchorRect.width;
+                        originX = '100%';
+                        break;
+                    case 'Top':
+                        top = topEdge;
+                        originY = '0%';
+                        break;
+                    case 'Bottom':
+                        top = topEdge - popperHeight + anchorRect.height;
+                        originY = '100%';
+                        break;
+                    default:
+                        if (pA === 'top' || pA === 'bottom') {
+                            left = leftEdge + (anchorRect.width - popperWidth) / 2;
+                            originX = '50%';
+                        }
+                        else {
+                            top = topEdge + (anchorRect.height - popperHeight) / 2;
+                            originY = '50%';
+                        }
+                }
+                popperEl.style.left = left + 'px';
+                popperEl.style.top = top + 'px';
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl === document.body ? void 0 : containerEl);
+            };
+        }
+        if (options?.forcePlacement) {
+            attempt(options.forcePlacement);
+        }
+        else {
+            const attemptOrder = getAttemptOrder(placement);
+            for (let i = 0; i < attemptOrder.length; i++) {
+                if (attempt(attemptOrder[i])) {
+                    break;
+                }
+            }
+        }
+        const settle = () => {
+            setPopperPosition({ left: left, top: top, transformOrigin: `${originX} ${originY}` });
+            setPopperSize({ width, height });
+            placeA.current = pA;
+            placeB.current = pB;
+        };
+        if (beforeOpen) {
+            if (sizeAdaptable) {
+                // 自适应尺寸需要在打开前设置
+                popperEl.style.width = width ? width + 'px' : '';
+                popperEl.style.height = height ? height + 'px' : '';
+            }
+            beforeOpen();
+        }
+        if (options?.openAnimation) {
+            popperEl.style.transform = variant === 'collapse'
+                ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
+                : 'scale(0)';
+            requestAnimationFrame(() => {
+                animating.current = true;
+                settle();
+                setOpenNextFrame(true);
+            });
+        }
+        else {
+            settle();
+        }
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        if (innerOpen.current) {
+            fitPosition({ openAnimation: true }, triggerBeforeOpen);
+        }
+    }, [innerOpen.current, contextMenuEvent.current]);
+    /**
+     * --------------------------------------------------------------
+     * 滚动跟随
+     */
+    (0, react_1.useEffect)(() => {
+        if (innerOpen.current) {
+            // 子元素尺寸变化，重新计算位置
+            const resizeObserver = new ResizeObserver(() => {
+                !animating.current && fitPosition();
+            });
+            resizeObserver.observe(getAnchorElement());
+            // 弹框超出视口范围，重新计算位置
+            const intersectionObserver = new IntersectionObserver(([{ isIntersecting }]) => {
+                !isIntersecting && !animating.current && fitPosition();
+            }, { threshold: 1 });
+            intersectionObserver.observe(innerPopperRef.current);
+            // 窗口尺寸变化，尝试关闭弹框
+            const windowResize = () => {
+                _setInnerOpen(false);
+            };
+            addEventListener('resize', windowResize);
+            const scroll = () => {
+                contextMenuEvent.current
+                    ? _setInnerOpen(false)
+                    : fitPosition({ forcePlacement: placeA.current + placeB.current });
+            };
+            // 为所有父元素添加滚动事件
+            const disposers = [];
+            (0, utils_1.fineParent)(getAnchorElement(), parent => {
+                if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) {
+                    parent.addEventListener('scroll', scroll);
+                    disposers.push(() => {
+                        parent.removeEventListener('scroll', scroll);
+                    });
+                }
+            });
+            return () => {
+                resizeObserver.disconnect();
+                intersectionObserver.disconnect();
+                removeEventListener('resize', windowResize);
+                disposers.forEach(f => f());
+            };
+        }
+        return;
+    }, [innerOpen.current]);
+    /**
+     * ----------------------------------------------------------------
+     * 绑定事件
+     */
+    const triggersSet = (0, react_1.useMemo)(() => {
+        return new Set((0, utils_1.toArray)(trigger));
+    }, [trigger]);
+    // hover
+    const hoverable = triggersSet.has('hover');
+    const enterTimeout = (0, react_1.useRef)();
+    const leaveTimeout = (0, react_1.useRef)();
+    const onPointerEnter = (0, react_1.useCallback)((e) => {
+        children?.props.onPointerEnter?.(e);
+        pointerEnterHandler();
+    }, [children?.props.onPointerEnter, mouseEnterDelay]);
+    const pointerEnterHandler = () => {
+        clearTimeout(leaveTimeout.current);
+        const fn = () => setInnerOpen(true);
+        mouseEnterDelay
+            ? enterTimeout.current = setTimeout(fn, mouseEnterDelay)
+            : fn();
+    };
+    const onPointerLeave = (0, react_1.useCallback)((e) => {
+        children?.props.onPointerLeave?.(e);
+        pointerLeaveHandler();
+    }, [children?.props.onPointerLeave, mouseLeaveDelay]);
+    const pointerLeaveHandler = () => {
+        clearTimeout(enterTimeout.current);
+        const fn = () => setInnerOpen(false);
+        mouseLeaveDelay
+            ? leaveTimeout.current = setTimeout(fn, mouseLeaveDelay)
+            : fn();
+    };
+    // focus
+    const onFocus = (0, react_1.useCallback)((e) => {
+        children?.props.onFocus?.(e);
+        setInnerOpen(openHolding.current = true);
+    }, [children?.props.onFocus]);
+    const onBlur = (0, react_1.useCallback)((e) => {
+        children?.props.onBlur?.(e);
+        setInnerOpen(openHolding.current = false);
+    }, [children?.props.onBlur]);
+    // enter
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        children?.props.onKeyDown?.(e);
+        e.key === 'Enter' && setInnerOpen(openHolding.current = true);
+    }, [children?.props.onKeyDown]);
+    // click
+    const onClick = (0, react_1.useCallback)((e) => {
+        children?.props.onClick?.(e);
+        setInnerOpen(openHolding.current = true);
+    }, [children?.props.onClick]);
+    const allowClickAway = (() => {
+        let allow = false;
+        for (const trigger of triggersSet) {
+            if (trigger === 'click' || trigger === 'enter' || trigger === 'contextMenu') {
+                allow = true;
+                break;
+            }
+        }
+        return allow;
+    })();
+    const onClickAway = () => {
+        setInnerOpen(openHolding.current = false);
+    };
+    // contextMenu
+    const onContextMenu = (0, react_1.useCallback)((e) => {
+        children?.props.onContextMenu?.(e);
+        e.preventDefault();
+        setInnerOpen(openHolding.current = true, e);
+    }, [children?.props.onContextMenu]);
+    /**
+     * --------------------------------------------------------------
+     * popperContext
+     */
+    const beforeOpenCallbacks = (0, react_1.useRef)(new Set());
+    const triggerBeforeOpen = () => {
+        for (const cb of beforeOpenCallbacks.current) {
+            cb();
+        }
+    };
+    const contextValue = (0, react_1.useMemo)(() => ({
+        autoClose,
+        open: innerOpen.current,
+        setOpen: setInnerOpen,
+        beforeOpenCallbacks: beforeOpenCallbacks.current
+    }), [innerOpen.current, autoClose]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
+                ? (0, react_1.cloneElement)(children, {
+                    ref: (0, react_1.useCallback)((0, utils_1.cloneRef)(children.ref, anchorRef, ref), [children.ref]),
+                    ...hoverable && { onPointerEnter, onPointerLeave },
+                    ...triggersSet.has('click') && { onClick },
+                    ...triggersSet.has('focus') && { onFocus, onBlur },
+                    ...triggersSet.has('enter') && { onKeyDown },
+                    ...triggersSet.has('contextMenu') && { onContextMenu }
+                })
+                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !allowClickAway, 
+                // 非右键菜单不能点击anchor关闭
+                targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.classnames)(popper_style_1.classes.root, props?.className), style: {
+                        ...popperSize,
+                        ...popperPosition,
+                        ...!openNextFrame.current && {
+                            transition: 'none',
+                            transform: 'scale(1)'
+                        },
+                        ...props?.style
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onPointerDown: e => {
+                        props.onPointerDown?.(e);
+                        e.preventDefault();
+                    }, onPointerEnter: e => {
+                        props.onPointerEnter?.(e);
+                        hoverable && pointerEnterHandler();
+                    }, onPointerLeave: e => {
+                        props.onPointerLeave?.(e);
+                        hoverable && pointerLeaveHandler();
+                    }, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.popperContext.Provider, { value: contextValue, children: content }) }) }), containerEl)] }));
+});

package/dist/cjs/components/popper/popper.style.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '../app';
+export declare const classes: {
+    popper: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles[];
+/**
+ *  通用弹框箭头样式
+ * @param colorValue
+ * @param arrowSize
+ */
+export declare const popperArrowStyle: (colorValue: string, arrowSize?: number) => import("@emotion/react").SerializedStyles;
+/**
+ *  通用弹框样式
+ */
+export declare const popperStyleCallback: ({ background, borderRadius, boxShadow }: Theme) => import("@emotion/react").SerializedStyles;
+export declare const popperStyle: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/popper/popper.style.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperStyle = exports.popperStyleCallback = exports.popperArrowStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const app_style_1 = require("../app/app.style");
+exports.classes = (0, utils_1.defineClasses)('popper', [
+    'popper',
+]);
+exports.style = (0, utils_1.defineCss)(({ fontSize, easing }) => [
+    app_style_1.style,
+    (0, react_1.css) `
+        font-size: ${fontSize}px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: ${app_1.zIndex.popper};
+        transition-property: transform, opacity;
+        transition-duration: .25s;
+
+        &[data-open=true] {
+            transition-timing-function: ${easing.bounce}, ${easing.easeOut};
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        &:not([data-open=true]) {
+            transition-timing-function: ${easing.easeIn};
+            opacity: 0;
+
+            &[data-variant=zoom] {
+                transform: scale(0);
+            }
+
+            &[data-variant=collapse] {
+                &[data-place-a=top], &[data-place-a=bottom] {
+                    transform: scaleY(0);
+                }
+
+                &[data-place-a=left], &[data-place-a=right] {
+                    transform: scaleX(0);
+                }
+            }
+        }
+    `
+]);
+/**
+ *  通用弹框箭头样式
+ * @param colorValue
+ * @param arrowSize
+ */
+const popperArrowStyle = (colorValue, arrowSize = (0, app_1.spacing)(3.5)) => (0, react_1.css) `
+    [data-show-arrow=true]:before {
+        content: '';
+        position: absolute;
+        width: ${arrowSize}px;
+        height: ${arrowSize}px;
+        background-color: ${colorValue};
+    }
+    
+    &[data-place-a=top] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 0 0, 100% 0);
+            top: 100%;
+            left: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=bottom] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 100% 100%, 0 100%);
+            bottom: 100%;
+            left: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=left] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 0 0, 0 100%);
+            left: 100%;
+            top: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=right] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 100% 100%, 100% 0);
+            right: 100%;
+            top: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-b=Left] {
+        [data-show-arrow=true]:before {
+            left: 9px;
+        }
+    }
+    
+    &[data-place-b=Right] {
+        [data-show-arrow=true]:before {
+            left: auto;
+            right: 9px;
+        }
+    }
+    
+    &[data-place-b=Top] {
+        [data-show-arrow=true]:before {
+            top: 9px;
+        }
+    }
+    
+    &[data-place-b=Bottom] {
+        [data-show-arrow=true]:before {
+            top: auto;
+            bottom: 9px;
+        }
+    }
+`;
+exports.popperArrowStyle = popperArrowStyle;
+/**
+ *  通用弹框样式
+ */
+const popperStyleCallback = ({ background, borderRadius, boxShadow }) => (0, react_1.css) `
+    background-color: ${background.card};
+    border-radius: ${borderRadius}px;
+    box-shadow: ${boxShadow[0]};
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px;
+`;
+exports.popperStyleCallback = popperStyleCallback;
+exports.popperStyle = (0, utils_1.defineCss)(exports.popperStyleCallback);

package/dist/cjs/components/popper/popperContext.d.ts

@@ -0,0 +1,22 @@
+import { SetStateAction } from 'react';
+export declare const popperContext: import("react").Context<{
+    autoClose: boolean;
+    open: boolean;
+    setOpen(open: SetStateAction<boolean>): void;
+    beforeOpenCallbacks: Set<() => void>;
+}>;
+export declare function usePopperContext(): {
+    autoClose: boolean;
+    open: boolean;
+    setOpen(open: SetStateAction<boolean>): void;
+    beforeOpenCallbacks: Set<() => void>;
+};
+/**
+ * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
+ * @param callback
+ */
+export declare function useBeforeOpen(callback: () => void): void;
+/**
+ * 当弹框打开时，滚动至已选项，返回一个ref
+ */
+export declare function useScrollToSelected<T extends Element>(): (r: T | null) => void;

package/dist/cjs/components/popper/popperContext.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperContext = void 0;
+exports.usePopperContext = usePopperContext;
+exports.useBeforeOpen = useBeforeOpen;
+exports.useScrollToSelected = useScrollToSelected;
+const react_1 = require("react");
+exports.popperContext = (0, react_1.createContext)({
+    autoClose: false,
+    open: false,
+    setOpen(open) { },
+    beforeOpenCallbacks: new Set()
+});
+function usePopperContext() {
+    return (0, react_1.useContext)(exports.popperContext);
+}
+/**
+ * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
+ * @param callback
+ */
+function useBeforeOpen(callback) {
+    const { beforeOpenCallbacks } = usePopperContext();
+    (0, react_1.useLayoutEffect)(() => {
+        beforeOpenCallbacks.add(callback);
+        return () => {
+            beforeOpenCallbacks.delete(callback);
+        };
+    }, [callback]);
+}
+/**
+ * 当弹框打开时，滚动至已选项，返回一个ref
+ */
+function useScrollToSelected() {
+    const ref = (0, react_1.useRef)();
+    const isFirst = (0, react_1.useRef)(true);
+    const isMultiple = (0, react_1.useRef)(false);
+    useBeforeOpen(() => {
+        ref.current?.scrollIntoView({
+            block: isMultiple.current ? 'start' : 'center',
+            inline: isMultiple.current ? 'start' : 'center'
+        });
+    });
+    return (0, react_1.useCallback)((r) => {
+        if (isFirst.current) {
+            ref.current = r;
+            isFirst.current = false;
+        }
+        else {
+            isMultiple.current = true;
+        }
+    }, []);
+}

package/dist/cjs/components/progress/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/dist/cjs/components/progress/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./progress"), exports);