@itwin/itwinui-react 3.12.1 → 3.13.0

package/DEV-cjs/utils/functions/numbers.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getBoundedValue: function() {
+        return getBoundedValue;
+    },
+    getRandomValue: function() {
+        return getRandomValue;
+    },
+    roundByDPR: function() {
+        return roundByDPR;
+    }
+});
+const getBoundedValue = (val, min, max)=>Math.min(max, Math.max(min, val));
+const getRandomValue = (length = 21)=>{
+    let alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    let id = '';
+    for(let i = 0; i < length; i++)id += alphabet[64 * Math.random() | 0];
+    return id;
+};
+const roundByDPR = (value)=>{
+    let dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};

package/DEV-cjs/utils/functions/polymorphic.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "polymorphic", {
+    enumerable: true,
+    get: function() {
+        return polymorphic;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _useGlobals = require("../hooks/useGlobals.js");
+const _styles = require("../../styles.js");
+const _base = (defaultElement)=>(className, attrs)=>{
+        let Comp = _react.forwardRef(({ as = defaultElement, ...props }, ref)=>{
+            props = {
+                ...attrs,
+                ...props,
+                className: getScopedClassName((0, _classnames.default)(className, attrs?.className, props.className))
+            };
+            let Element = as || 'div';
+            if ('button' === Element || 'a' === Element || 'input' === Element && 'checkbox' === props.type) {
+                var _props;
+                (_props = props).tabIndex ?? (_props.tabIndex = 0);
+            }
+            (0, _useGlobals.useGlobals)();
+            return _react.createElement(Element, {
+                ref: ref,
+                ...props
+            });
+        });
+        Comp.displayName = getDisplayNameFromClass(className);
+        return Comp;
+    };
+const polymorphic = new Proxy(_base('div'), {
+    get: (target, prop)=>{
+        if ('string' == typeof prop) return _base(prop);
+        return Reflect.get(target, prop);
+    }
+});
+const getDisplayNameFromClass = (str)=>{
+    let camel = str.replace(/-([a-z])/g, (g)=>g[1].toUpperCase());
+    return camel.substring(3);
+};
+const getScopedClassName = (className = '')=>className.split(' ').map((c)=>c in _styles.styles ? _styles.styles[c] : c).join(' ') || null;

package/DEV-cjs/utils/functions/react.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "cloneElementWithRef", {
+    enumerable: true,
+    get: function() {
+        return cloneElementWithRef;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _useMergedRefs = require("../hooks/useMergedRefs.js");
+const cloneElementWithRef = (children, getProps)=>{
+    if (!children) return null;
+    if (!_react.isValidElement(children)) return children;
+    let props = getProps(children);
+    let ref = (0, _useMergedRefs.mergeRefs)(...[
+        'ref' in children ? children.ref : null,
+        'ref' in props ? props.ref : null
+    ].filter(Boolean));
+    return _react.cloneElement(children, {
+        ...props,
+        ref
+    });
+};

package/DEV-cjs/utils/functions/supports.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "supportsHas", {
+    enumerable: true,
+    get: function() {
+        return supportsHas;
+    }
+});
+const _dom = require("./dom.js");
+const supportsHas = ()=>(0, _dom.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');

package/DEV-cjs/utils/hooks/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./useEventListener.js"), exports);
+_export_star._(require("./useMergedRefs.js"), exports);
+_export_star._(require("./useOverflow.js"), exports);
+_export_star._(require("./useResizeObserver.js"), exports);
+_export_star._(require("./useContainerWidth.js"), exports);
+_export_star._(require("./useGlobals.js"), exports);
+_export_star._(require("./useIntersection.js"), exports);
+_export_star._(require("./useMediaQuery.js"), exports);
+_export_star._(require("./useSafeContext.js"), exports);
+_export_star._(require("./useLatestRef.js"), exports);
+_export_star._(require("./useIsomorphicLayoutEffect.js"), exports);
+_export_star._(require("./useIsClient.js"), exports);
+_export_star._(require("./useId.js"), exports);
+_export_star._(require("./useControlledState.js"), exports);
+_export_star._(require("./useSyncExternalStore.js"), exports);
+_export_star._(require("./useVirtualScroll.js"), exports);

package/DEV-cjs/utils/hooks/useContainerWidth.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useContainerWidth", {
+    enumerable: true,
+    get: function() {
+        return useContainerWidth;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _useMergedRefs = require("./useMergedRefs.js");
+const _useResizeObserver = require("./useResizeObserver.js");
+const useContainerWidth = (watchResizes = true)=>{
+    let [contentWidth, setContentWidth] = _react.useState(0);
+    let ref = _react.useCallback((element)=>{
+        if (!element) return;
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    let updateWidth = _react.useCallback(({ width })=>setContentWidth(width), []);
+    let [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(updateWidth);
+    if (!watchResizes) resizeObserver?.disconnect();
+    let refs = (0, _useMergedRefs.useMergedRefs)(ref, watchResizes ? resizeRef : void 0);
+    return [
+        refs,
+        contentWidth
+    ];
+};

package/DEV-cjs/utils/hooks/useControlledState.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useControlledState", {
+    enumerable: true,
+    get: function() {
+        return useControlledState;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useControlledState = (initialValue, controlledState, setControlledState)=>{
+    let [uncontrolledState, setUncontrolledState] = _react.useState(initialValue);
+    let state = _react.useMemo(()=>void 0 !== controlledState ? controlledState : uncontrolledState, [
+        controlledState,
+        uncontrolledState
+    ]);
+    let setState = _react.useCallback((value)=>{
+        setUncontrolledState(value);
+        setControlledState?.(value);
+    }, [
+        setControlledState,
+        setUncontrolledState
+    ]);
+    return [
+        state,
+        setState
+    ];
+};

package/DEV-cjs/utils/hooks/useDragAndDrop.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDragAndDrop", {
+    enumerable: true,
+    get: function() {
+        return useDragAndDrop;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../functions/index.js");
+const _useEventListener = require("./useEventListener.js");
+const _useResizeObserver = require("./useResizeObserver.js");
+const getContainerRect = (containerRef)=>{
+    let containerRect = containerRef?.current?.getBoundingClientRect();
+    return {
+        top: containerRect?.top ?? 0,
+        right: containerRect?.right ?? (0, _index.getWindow)()?.innerWidth ?? 0,
+        bottom: containerRect?.bottom ?? (0, _index.getWindow)()?.innerHeight ?? 0,
+        left: containerRect?.left ?? 0
+    };
+};
+const useDragAndDrop = (elementRef, containerRef, enabled = true)=>{
+    let grabOffsetX = _react.useRef(0);
+    let grabOffsetY = _react.useRef(0);
+    let translateX = _react.useRef();
+    let translateY = _react.useRef();
+    let containerRectRef = _react.useRef(getContainerRect(containerRef));
+    let adjustTransform = _react.useCallback(()=>{
+        if (!elementRef.current || !enabled) return;
+        let { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
+        let [newTranslateX, newTranslateY] = (0, _index.getTranslateValuesFromElement)(elementRef.current);
+        containerRectRef.current = getContainerRect(containerRef);
+        if (bottom > containerRectRef.current.bottom) newTranslateY -= bottom - containerRectRef.current.bottom;
+        if (top < containerRectRef.current.top) newTranslateY += containerRectRef.current.top - top;
+        if (right > containerRectRef.current.right) newTranslateX -= right - containerRectRef.current.right;
+        if (left < containerRectRef.current.left) newTranslateX += containerRectRef.current.left - left;
+        translateX.current = newTranslateX;
+        translateY.current = newTranslateY;
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+    }, [
+        containerRef,
+        elementRef,
+        enabled
+    ]);
+    let [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(adjustTransform);
+    resizeRef(containerRef?.current);
+    _react.useEffect(()=>()=>{
+            resizeObserver?.disconnect();
+        }, [
+        resizeObserver
+    ]);
+    (0, _useEventListener.useEventListener)('resize', ()=>{
+        adjustTransform();
+        if (null != translateX.current && null != translateY.current) setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
+    }, (0, _index.getWindow)());
+    let [transform, setTransform] = _react.useState('');
+    let onPointerMove = _react.useRef((event)=>{
+        if (!elementRef.current) return;
+        let newTranslateX = event.clientX - grabOffsetX.current;
+        let newTranslateY = event.clientY - grabOffsetY.current;
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+        adjustTransform();
+    });
+    let originalUserSelect = _react.useRef('');
+    let onPointerDown = _react.useCallback((e)=>{
+        if (!elementRef.current || 0 !== e.button || !enabled) return;
+        let [x, y] = (0, _index.getTranslateValuesFromElement)(elementRef.current);
+        grabOffsetX.current = e.clientX - x;
+        grabOffsetY.current = e.clientY - y;
+        originalUserSelect.current = elementRef.current.style.userSelect;
+        elementRef.current.style.userSelect = 'none';
+        let ownerDocument = elementRef.current.ownerDocument || document;
+        ownerDocument.addEventListener('pointermove', onPointerMove.current);
+        ownerDocument.addEventListener('pointerup', ()=>{
+            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
+            ownerDocument.removeEventListener('pointermove', onPointerMove.current);
+            if (elementRef.current) elementRef.current.style.userSelect = originalUserSelect.current;
+        }, {
+            once: true
+        });
+    }, [
+        elementRef,
+        enabled
+    ]);
+    return {
+        onPointerDown,
+        transform
+    };
+};

package/DEV-cjs/utils/hooks/useEventListener.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEventListener", {
+    enumerable: true,
+    get: function() {
+        return useEventListener;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useEventListener = (eventName, handler, element)=>{
+    let savedHandler = _react.useRef();
+    _react.useEffect(()=>{
+        savedHandler.current = handler;
+    }, [
+        handler
+    ]);
+    _react.useEffect(()=>{
+        if (!element) return;
+        let eventListener = (event)=>savedHandler.current?.(event);
+        element.addEventListener(eventName, eventListener);
+        return ()=>{
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [
+        eventName,
+        element
+    ]);
+};

package/DEV-cjs/utils/hooks/useGlobals.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useGlobals: function() {
+        return useGlobals;
+    },
+    useThemeProviderWarning: function() {
+        return useThemeProviderWarning;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _ThemeContext = require("../../core/ThemeProvider/ThemeContext.js");
+const _dev = require("../functions/dev.js");
+const didLogWarning = {
+    fontSize: false,
+    themeProvider: false
+};
+const useGlobals = ()=>{
+    let themeContext = _react.useContext(_ThemeContext.ThemeContext);
+    useThemeProviderWarning(themeContext);
+    useRootFontSizeWarning();
+    return themeContext;
+};
+const useThemeProviderWarning = (themeContext)=>{
+    _react.useEffect(()=>{
+        if (!_dev.isUnitTest && !didLogWarning.themeProvider && !themeContext) {
+            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
+            didLogWarning.themeProvider = true;
+        }
+    }, [
+        themeContext
+    ]);
+};
+const useRootFontSizeWarning = ()=>{
+    _react.useEffect(()=>{
+        if (!_dev.isUnitTest && !didLogWarning.fontSize) {
+            let rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (rootFontSize < 16) console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
+            didLogWarning.fontSize = true;
+        }
+    }, []);
+};

package/DEV-cjs/utils/hooks/useId.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useId", {
+    enumerable: true,
+    get: function() {
+        return useId;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _numbers = require("../functions/numbers.js");
+const useId = ()=>{
+    let uniqueValue = useUniqueValue();
+    return _react.useMemo(()=>`iui-${uniqueValue}`, [
+        uniqueValue
+    ]);
+};
+const _React = _react;
+const useUniqueValue = _React.useId ?? (()=>_react.useMemo(()=>(0, _numbers.getRandomValue)(10), []));

package/DEV-cjs/utils/hooks/useIntersection.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIntersection", {
+    enumerable: true,
+    get: function() {
+        return useIntersection;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _dom = require("../functions/dom.js");
+const useIntersection = (onIntersect, options = {}, once = true)=>{
+    let { root, rootMargin, threshold } = options;
+    let cleanupRef = _react.useRef(()=>{});
+    let setRef = _react.useCallback((node)=>{
+        cleanupRef.current?.();
+        cleanupRef.current = ()=>{};
+        if (!node || !(0, _dom.getWindow)()?.IntersectionObserver) return;
+        let observer = new IntersectionObserver(([entry], obs)=>{
+            if (entry.isIntersecting) {
+                if (once) obs.disconnect();
+                onIntersect();
+            }
+        }, {
+            root,
+            rootMargin,
+            threshold
+        });
+        observer.observe(node);
+        cleanupRef.current = ()=>observer.disconnect();
+    }, [
+        onIntersect,
+        once,
+        root,
+        rootMargin,
+        threshold
+    ]);
+    return setRef;
+};

package/DEV-cjs/utils/hooks/useIsClient.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsClient", {
+    enumerable: true,
+    get: function() {
+        return useIsClient;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useIsClient = ()=>{
+    let [isClient, setIsClient] = _react.useState(false);
+    _react.useEffect(()=>{
+        setIsClient(true);
+    }, []);
+    return isClient;
+};

package/DEV-cjs/utils/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLayoutEffect", {
+    enumerable: true,
+    get: function() {
+        return useIsomorphicLayoutEffect;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useIsomorphicLayoutEffect = 'undefined' != typeof window ? _react.useLayoutEffect : _react.useEffect;

package/DEV-cjs/utils/hooks/useLatestRef.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLatestRef", {
+    enumerable: true,
+    get: function() {
+        return useLatestRef;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useLatestRef = (value)=>{
+    let valueRef = _react.useRef(value);
+    _react.useEffect(()=>{
+        valueRef.current = value;
+    }, [
+        value
+    ]);
+    return valueRef;
+};

package/DEV-cjs/utils/hooks/useMediaQuery.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMediaQuery", {
+    enumerable: true,
+    get: function() {
+        return useMediaQuery;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _useSyncExternalStore = require("./useSyncExternalStore.js");
+const useMediaQuery = (queryString)=>{
+    let getSnapshot = _react.useCallback(()=>'undefined' != typeof window ? window.matchMedia?.(queryString).matches : void 0, [
+        queryString
+    ]);
+    let subscribe = _react.useCallback((onChange)=>{
+        let mediaQueryList = window.matchMedia?.(queryString);
+        mediaQueryList?.addEventListener?.('change', onChange);
+        return ()=>mediaQueryList?.removeEventListener?.('change', onChange);
+    }, [
+        queryString
+    ]);
+    return (0, _useSyncExternalStore.useSyncExternalStore)(subscribe, getSnapshot, ()=>void 0);
+};

package/DEV-cjs/utils/hooks/useMergedRefs.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    mergeRefs: function() {
+        return mergeRefs;
+    },
+    useMergedRefs: function() {
+        return useMergedRefs;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const mergeRefs = (...refs)=>(instance)=>{
+        refs.forEach((ref)=>{
+            if ('function' == typeof ref) ref(instance);
+            else if (ref) ref.current = instance;
+        });
+    };
+const useMergedRefs = (...refs)=>_react.useCallback(mergeRefs(...refs), [
+        ...refs
+    ]);

package/DEV-cjs/utils/hooks/useOverflow.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflow", {
+    enumerable: true,
+    get: function() {
+        return useOverflow;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _useMergedRefs = require("./useMergedRefs.js");
+const _useResizeObserver = require("./useResizeObserver.js");
+const _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.js");
+const STARTING_MAX_ITEMS_COUNT = 20;
+const useOverflow = (items, disabled = false, orientation = 'horizontal')=>{
+    let containerRef = _react.useRef(null);
+    let [visibleCount, setVisibleCount] = _react.useState(()=>disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+    let needsFullRerender = _react.useRef(true);
+    let [containerSize, setContainerSize] = _react.useState(0);
+    let previousContainerSize = _react.useRef(0);
+    let updateContainerSize = _react.useCallback(({ width, height })=>setContainerSize('horizontal' === orientation ? width : height), [
+        orientation
+    ]);
+    let [resizeRef, observer] = (0, _useResizeObserver.useResizeObserver)(updateContainerSize);
+    let resizeObserverRef = _react.useRef(observer);
+    (0, _useIsomorphicLayoutEffect.useLayoutEffect)(()=>{
+        if (disabled) setVisibleCount(items.length);
+        else {
+            setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+            needsFullRerender.current = true;
+        }
+    }, [
+        containerSize,
+        disabled,
+        items
+    ]);
+    let mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
+    (0, _useIsomorphicLayoutEffect.useLayoutEffect)(()=>{
+        if (!containerRef.current || disabled) {
+            resizeObserverRef.current?.disconnect();
+            return;
+        }
+        let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
+        let availableSize = containerRef.current[`offset${dimension}`];
+        let requiredSize = containerRef.current[`scroll${dimension}`];
+        if (availableSize < requiredSize) {
+            let avgItemSize = requiredSize / visibleCount;
+            let visibleItems = Math.floor(availableSize / avgItemSize);
+            setVisibleCount(visibleItems > 0 ? visibleItems : 1);
+        } else if (needsFullRerender.current) {
+            let childrenSize = Array.from(containerRef.current.children).reduce((sum, child)=>sum + child[`offset${dimension}`], 0);
+            let currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            let avgItemSize = childrenSize / currentVisibleCount;
+            let visibleItems = Math.floor(availableSize / avgItemSize);
+            if (!isNaN(visibleItems)) setVisibleCount(Math.min(items.length, 2 * visibleItems));
+        }
+        needsFullRerender.current = false;
+    }, [
+        containerSize,
+        visibleCount,
+        disabled,
+        items.length,
+        orientation
+    ]);
+    (0, _useIsomorphicLayoutEffect.useLayoutEffect)(()=>{
+        previousContainerSize.current = containerSize;
+    }, [
+        containerSize
+    ]);
+    return [
+        mergedRefs,
+        visibleCount
+    ];
+};

package/DEV-cjs/utils/hooks/useResizeObserver.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useResizeObserver", {
+    enumerable: true,
+    get: function() {
+        return useResizeObserver;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _dom = require("../functions/dom.js");
+const useResizeObserver = (onResize)=>{
+    let resizeObserver = _react.useRef();
+    let elementRef = _react.useCallback((element)=>{
+        if (!(0, _dom.getWindow)()?.ResizeObserver) return;
+        resizeObserver.current?.disconnect?.();
+        if (element) {
+            resizeObserver.current = new ResizeObserver((entries)=>{
+                window.requestAnimationFrame(()=>{
+                    if (!Array.isArray(entries) || !entries.length) return;
+                    let [{ contentRect }] = entries;
+                    return onResize(contentRect);
+                });
+            });
+            resizeObserver.current?.observe?.(element);
+        }
+    }, [
+        onResize
+    ]);
+    return [
+        elementRef,
+        resizeObserver.current
+    ];
+};