@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/utils/functions/numbers.js

@@ -20,18 +20,15 @@ _export(exports, {
     return roundByDPR;
   },
 });
-const getBoundedValue = (val, min, max) => {
-  return Math.min(max, Math.max(min, val));
-};
+const getBoundedValue = (val, min, max) => Math.min(max, Math.max(min, val));
 const getRandomValue = (length = 21) => {
-  const alphabet = `_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ`;
+  let alphabet =
+    '_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
   let id = '';
-  for (let i = 0; i < length; i++) {
-    id += alphabet[(Math.random() * 64) | 0];
-  }
+  for (let i = 0; i < length; i++) id += alphabet[(64 * Math.random()) | 0];
   return id;
 };
 const roundByDPR = (value) => {
-  const dpr = window.devicePixelRatio || 1;
+  let dpr = window.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 };

package/cjs/utils/functions/polymorphic.js

@@ -14,56 +14,44 @@ 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) => {
-  return (className, attrs) => {
-    const Comp = _react.forwardRef(({ as = defaultElement, ...props }, ref) => {
-      props = {
-        ...attrs,
-        ...props,
-        className: getScopedClassName(
-          (0, _classnames.default)(
-            className,
-            attrs?.className,
-            props.className,
-          ),
-        ),
-      };
-      const Element = as || 'div';
-      if (
-        Element === 'button' ||
-        Element === 'a' ||
-        (Element === 'input' && props.type === 'checkbox')
-      ) {
-        var _props;
-        (_props = props).tabIndex ?? (_props.tabIndex = 0);
-      }
-      (0, _useGlobals.useGlobals)();
-      return _react.createElement(Element, {
-        ref: ref,
-        ...props,
-      });
+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;
-  };
+  });
+  return Comp;
 };
 const polymorphic = new Proxy(_base('div'), {
   get: (target, prop) => {
-    if (typeof prop === 'string') {
-      return _base(prop);
-    }
+    if ('string' == typeof prop) return _base(prop);
     return Reflect.get(target, prop);
   },
 });
 const getDisplayNameFromClass = (str) => {
-  const camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  let camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   return camel.substring(3);
 };
-const getScopedClassName = (className = '') => {
-  return (
-    className
-      .split(' ')
-      .map((c) => (c in _styles.styles ? _styles.styles[c] : c))
-      .join(' ') || null
-  );
-};
+const getScopedClassName = (className = '') =>
+  className
+    .split(' ')
+    .map((c) => (c in _styles.styles ? _styles.styles[c] : c))
+    .join(' ') || null;

package/cjs/utils/functions/react.js

@@ -12,14 +12,10 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 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;
-  }
-  const props = getProps(children);
-  const ref = (0, _useMergedRefs.mergeRefs)(
+  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,

package/cjs/utils/hooks/index.d.ts

@@ -13,3 +13,4 @@ export * from './useIsClient.js';
 export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
+export * from './useVirtualScroll.js';

package/cjs/utils/hooks/index.js

@@ -18,3 +18,4 @@ _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/cjs/utils/hooks/useContainerWidth.js

@@ -13,26 +13,22 @@ const _react = _interop_require_wildcard._(require('react'));
 const _useMergedRefs = require('./useMergedRefs.js');
 const _useResizeObserver = require('./useResizeObserver.js');
 const useContainerWidth = (watchResizes = true) => {
-  const [contentWidth, setContentWidth] = _react.useState(0);
-  const ref = _react.useCallback((element) => {
-    if (!element) {
-      return;
-    }
+  let [contentWidth, setContentWidth] = _react.useState(0);
+  let ref = _react.useCallback((element) => {
+    if (!element) return;
     setContentWidth(element.getBoundingClientRect().width);
   }, []);
-  const updateWidth = _react.useCallback(
+  let updateWidth = _react.useCallback(
     ({ width }) => setContentWidth(width),
     [],
   );
-  const [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
+  let [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
     updateWidth,
   );
-  if (!watchResizes) {
-    resizeObserver?.disconnect();
-  }
-  const refs = (0, _useMergedRefs.useMergedRefs)(
+  if (!watchResizes) resizeObserver?.disconnect();
+  let refs = (0, _useMergedRefs.useMergedRefs)(
     ref,
-    watchResizes ? resizeRef : undefined,
+    watchResizes ? resizeRef : void 0,
   );
   return [refs, contentWidth];
 };

package/cjs/utils/hooks/useControlledState.js

@@ -15,13 +15,12 @@ const useControlledState = (
   controlledState,
   setControlledState,
 ) => {
-  const [uncontrolledState, setUncontrolledState] =
-    _react.useState(initialValue);
-  const state = _react.useMemo(
-    () => (controlledState !== undefined ? controlledState : uncontrolledState),
+  let [uncontrolledState, setUncontrolledState] = _react.useState(initialValue);
+  let state = _react.useMemo(
+    () => (void 0 !== controlledState ? controlledState : uncontrolledState),
     [controlledState, uncontrolledState],
   );
-  const setState = _react.useCallback(
+  let setState = _react.useCallback(
     (value) => {
       setUncontrolledState(value);
       setControlledState?.(value);

package/cjs/utils/hooks/useDragAndDrop.js

@@ -14,7 +14,7 @@ const _index = require('../functions/index.js');
 const _useEventListener = require('./useEventListener.js');
 const _useResizeObserver = require('./useResizeObserver.js');
 const getContainerRect = (containerRef) => {
-  const containerRect = containerRef?.current?.getBoundingClientRect();
+  let containerRect = containerRef?.current?.getBoundingClientRect();
   return {
     top: containerRect?.top ?? 0,
     right: containerRect?.right ?? (0, _index.getWindow)()?.innerWidth ?? 0,
@@ -23,81 +23,71 @@ const getContainerRect = (containerRef) => {
   };
 };
 const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
-  const grabOffsetX = _react.useRef(0);
-  const grabOffsetY = _react.useRef(0);
-  const translateX = _react.useRef();
-  const translateY = _react.useRef();
-  const containerRectRef = _react.useRef(getContainerRect(containerRef));
-  const adjustTransform = _react.useCallback(() => {
-    if (!elementRef.current || !enabled) {
-      return;
-    }
-    const { top, right, bottom, left } =
+  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) {
+    if (bottom > containerRectRef.current.bottom)
       newTranslateY -= bottom - containerRectRef.current.bottom;
-    }
-    if (top < containerRectRef.current.top) {
+    if (top < containerRectRef.current.top)
       newTranslateY += containerRectRef.current.top - top;
-    }
-    if (right > containerRectRef.current.right) {
+    if (right > containerRectRef.current.right)
       newTranslateX -= right - containerRectRef.current.right;
-    }
-    if (left < containerRectRef.current.left) {
+    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]);
-  const [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
+  let [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
     adjustTransform,
   );
   resizeRef(containerRef?.current);
-  _react.useEffect(() => {
-    return () => {
+  _react.useEffect(
+    () => () => {
       resizeObserver?.disconnect();
-    };
-  }, [resizeObserver]);
+    },
+    [resizeObserver],
+  );
   (0, _useEventListener.useEventListener)(
     'resize',
     () => {
       adjustTransform();
-      if (translateX.current != null && translateY.current != null) {
+      if (null != translateX.current && null != translateY.current)
         setTransform(
           `translate(${translateX.current}px, ${translateY.current}px)`,
         );
-      }
     },
     (0, _index.getWindow)(),
   );
-  const [transform, setTransform] = _react.useState('');
-  const onPointerMove = _react.useRef((event) => {
-    if (!elementRef.current) {
-      return;
-    }
-    const newTranslateX = event.clientX - grabOffsetX.current;
-    const newTranslateY = event.clientY - grabOffsetY.current;
+  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();
   });
-  const originalUserSelect = _react.useRef('');
-  const onPointerDown = _react.useCallback(
+  let originalUserSelect = _react.useRef('');
+  let onPointerDown = _react.useCallback(
     (e) => {
-      if (!elementRef.current || e.button !== 0 || !enabled) {
-        return;
-      }
-      const [x, y] = (0, _index.getTranslateValuesFromElement)(
+      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';
-      const ownerDocument = elementRef.current.ownerDocument || document;
+      let ownerDocument = elementRef.current.ownerDocument || document;
       ownerDocument.addEventListener('pointermove', onPointerMove.current);
       ownerDocument.addEventListener(
         'pointerup',
@@ -109,9 +99,8 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             'pointermove',
             onPointerMove.current,
           );
-          if (elementRef.current) {
+          if (elementRef.current)
             elementRef.current.style.userSelect = originalUserSelect.current;
-          }
         },
         {
           once: true,

package/cjs/utils/hooks/useEventListener.js

@@ -11,15 +11,13 @@ Object.defineProperty(exports, 'useEventListener', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const useEventListener = (eventName, handler, element) => {
-  const savedHandler = _react.useRef();
+  let savedHandler = _react.useRef();
   _react.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
   _react.useEffect(() => {
-    if (!element) {
-      return;
-    }
-    const eventListener = (event) => savedHandler.current?.(event);
+    if (!element) return;
+    let eventListener = (event) => savedHandler.current?.(event);
     element.addEventListener(eventName, eventListener);
     return () => {
       element.removeEventListener(eventName, eventListener);

package/cjs/utils/hooks/useGlobals.js

@@ -26,33 +26,14 @@ const didLogWarning = {
   themeProvider: false,
 };
 const useGlobals = () => {
-  const themeContext = _react.useContext(_ThemeContext.ThemeContext);
+  let themeContext = _react.useContext(_ThemeContext.ThemeContext);
   useThemeProviderWarning(themeContext);
   useRootFontSizeWarning();
   return themeContext;
 };
 const useThemeProviderWarning = (themeContext) => {
-  _react.useEffect(() => {
-    if (_dev.isDev && !didLogWarning.themeProvider && !themeContext) {
-      console.error(
-        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
-      );
-      didLogWarning.themeProvider = true;
-    }
-  }, [themeContext]);
+  _react.useEffect(() => {}, [themeContext]);
 };
 const useRootFontSizeWarning = () => {
-  _react.useEffect(() => {
-    if (_dev.isDev && !didLogWarning.fontSize) {
-      const 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;
-    }
-  }, []);
+  _react.useEffect(() => {}, []);
 };

package/cjs/utils/hooks/useId.js

@@ -12,7 +12,7 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _numbers = require('../functions/numbers.js');
 const useId = () => {
-  const uniqueValue = useUniqueValue();
+  let uniqueValue = useUniqueValue();
   return _react.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
 const _React = _react;

package/cjs/utils/hooks/useIntersection.js

@@ -12,21 +12,17 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _dom = require('../functions/dom.js');
 const useIntersection = (onIntersect, options = {}, once = true) => {
-  const { root, rootMargin, threshold } = options;
-  const cleanupRef = _react.useRef(() => {});
-  const setRef = _react.useCallback(
+  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;
-      }
-      const observer = new IntersectionObserver(
+      if (!node || !(0, _dom.getWindow)()?.IntersectionObserver) return;
+      let observer = new IntersectionObserver(
         ([entry], obs) => {
           if (entry.isIntersecting) {
-            if (once) {
-              obs.disconnect();
-            }
+            if (once) obs.disconnect();
             onIntersect();
           }
         },

package/cjs/utils/hooks/useIsClient.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, 'useIsClient', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const useIsClient = () => {
-  const [isClient, setIsClient] = _react.useState(false);
+  let [isClient, setIsClient] = _react.useState(false);
   _react.useEffect(() => {
     setIsClient(true);
   }, []);

package/cjs/utils/hooks/useIsomorphicLayoutEffect.js

@@ -11,4 +11,4 @@ Object.defineProperty(exports, 'useLayoutEffect', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+  'undefined' != typeof window ? _react.useLayoutEffect : _react.useEffect;

package/cjs/utils/hooks/useLatestRef.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, 'useLatestRef', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const useLatestRef = (value) => {
-  const valueRef = _react.useRef(value);
+  let valueRef = _react.useRef(value);
   _react.useEffect(() => {
     valueRef.current = value;
   }, [value]);

package/cjs/utils/hooks/useMediaQuery.js

@@ -12,14 +12,16 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _useSyncExternalStore = require('./useSyncExternalStore.js');
 const useMediaQuery = (queryString) => {
-  const getSnapshot = _react.useCallback(() => {
-    return typeof window !== 'undefined'
-      ? window.matchMedia?.(queryString).matches
-      : undefined;
-  }, [queryString]);
-  const subscribe = _react.useCallback(
+  let getSnapshot = _react.useCallback(
+    () =>
+      'undefined' != typeof window
+        ? window.matchMedia?.(queryString).matches
+        : void 0,
+    [queryString],
+  );
+  let subscribe = _react.useCallback(
     (onChange) => {
-      const mediaQueryList = window.matchMedia?.(queryString);
+      let mediaQueryList = window.matchMedia?.(queryString);
       mediaQueryList?.addEventListener?.('change', onChange);
       return () => mediaQueryList?.removeEventListener?.('change', onChange);
     },
@@ -28,6 +30,6 @@ const useMediaQuery = (queryString) => {
   return (0, _useSyncExternalStore.useSyncExternalStore)(
     subscribe,
     getSnapshot,
-    () => undefined,
+    () => void 0,
   );
 };

package/cjs/utils/hooks/useMergedRefs.js

@@ -19,17 +19,13 @@ _export(exports, {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const mergeRefs = (...refs) => {
-  return (instance) => {
+const mergeRefs =
+  (...refs) =>
+  (instance) => {
     refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
+      if ('function' == typeof ref) ref(instance);
+      else if (ref) ref.current = instance;
     });
   };
-};
-const useMergedRefs = (...refs) => {
-  return _react.useCallback(mergeRefs(...refs), [...refs]);
-};
+const useMergedRefs = (...refs) =>
+  _react.useCallback(mergeRefs(...refs), [...refs]);

package/cjs/utils/hooks/useOverflow.js

@@ -15,55 +15,53 @@ const _useResizeObserver = require('./useResizeObserver.js');
 const _useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.js');
 const STARTING_MAX_ITEMS_COUNT = 20;
 const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
-  const containerRef = _react.useRef(null);
-  const [visibleCount, setVisibleCount] = _react.useState(() =>
+  let containerRef = _react.useRef(null);
+  let [visibleCount, setVisibleCount] = _react.useState(() =>
     disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT),
   );
-  const needsFullRerender = _react.useRef(true);
-  const [containerSize, setContainerSize] = _react.useState(0);
-  const previousContainerSize = _react.useRef(0);
-  const updateContainerSize = _react.useCallback(
+  let needsFullRerender = _react.useRef(true);
+  let [containerSize, setContainerSize] = _react.useState(0);
+  let previousContainerSize = _react.useRef(0);
+  let updateContainerSize = _react.useCallback(
     ({ width, height }) =>
-      setContainerSize(orientation === 'horizontal' ? width : height),
+      setContainerSize('horizontal' === orientation ? width : height),
     [orientation],
   );
-  const [resizeRef, observer] = (0, _useResizeObserver.useResizeObserver)(
+  let [resizeRef, observer] = (0, _useResizeObserver.useResizeObserver)(
     updateContainerSize,
   );
-  const resizeObserverRef = _react.useRef(observer);
+  let resizeObserverRef = _react.useRef(observer);
   (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (disabled) {
-      setVisibleCount(items.length);
-    } else {
+    if (disabled) setVisibleCount(items.length);
+    else {
       setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
       needsFullRerender.current = true;
     }
   }, [containerSize, disabled, items]);
-  const mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
+  let mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
   (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
     if (!containerRef.current || disabled) {
       resizeObserverRef.current?.disconnect();
       return;
     }
-    const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
-    const availableSize = containerRef.current[`offset${dimension}`];
-    const requiredSize = containerRef.current[`scroll${dimension}`];
+    let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
+    let availableSize = containerRef.current[`offset${dimension}`];
+    let requiredSize = containerRef.current[`scroll${dimension}`];
     if (availableSize < requiredSize) {
-      const avgItemSize = requiredSize / visibleCount;
-      const visibleItems = Math.floor(availableSize / avgItemSize);
+      let avgItemSize = requiredSize / visibleCount;
+      let visibleItems = Math.floor(availableSize / avgItemSize);
       setVisibleCount(visibleItems > 0 ? visibleItems : 1);
     } else if (needsFullRerender.current) {
-      const childrenSize = Array.from(containerRef.current.children).reduce(
+      let childrenSize = Array.from(containerRef.current.children).reduce(
         (sum, child) => sum + child[`offset${dimension}`],
         0,
       );
-      const currentVisibleCount =
+      let currentVisibleCount =
         visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
-      const avgItemSize = childrenSize / currentVisibleCount;
-      const visibleItems = Math.floor(availableSize / avgItemSize);
-      if (!isNaN(visibleItems)) {
-        setVisibleCount(Math.min(items.length, visibleItems * 2));
-      }
+      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]);

package/cjs/utils/hooks/useResizeObserver.js

@@ -12,20 +12,16 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _dom = require('../functions/dom.js');
 const useResizeObserver = (onResize) => {
-  const resizeObserver = _react.useRef();
-  const elementRef = _react.useCallback(
+  let resizeObserver = _react.useRef();
+  let elementRef = _react.useCallback(
     (element) => {
-      if (!(0, _dom.getWindow)()?.ResizeObserver) {
-        return;
-      }
+      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;
-            }
-            const [{ contentRect }] = entries;
+            if (!Array.isArray(entries) || !entries.length) return;
+            let [{ contentRect }] = entries;
             return onResize(contentRect);
           });
         });

package/cjs/utils/hooks/useSafeContext.js

@@ -11,9 +11,8 @@ Object.defineProperty(exports, 'useSafeContext', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const useSafeContext = (context) => {
-  const value = _react.useContext(context);
-  if (!value) {
-    throw new Error(`${context.displayName} is undefined`);
-  }
+  let value = _react.useContext(context);
+  if (!value)
+    throw new Error(`${context.displayName || 'Context'} is undefined`);
   return value;
 };