@itwin/itwinui-react 3.12.1 → 3.13.0

package/esm/utils/functions/numbers.js

@@ -1,15 +1,13 @@
-export const getBoundedValue = (val, min, max) => {
-  return Math.min(max, Math.max(min, val));
-};
+export const getBoundedValue = (val, min, max) =>
+  Math.min(max, Math.max(min, val));
 export 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;
 };
 export const roundByDPR = (value) => {
-  const dpr = window.devicePixelRatio || 1;
+  let dpr = window.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 };

package/esm/utils/functions/polymorphic.js

@@ -2,52 +2,44 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useGlobals } from '../hooks/useGlobals.js';
 import { styles } from '../../styles.js';
-const _base = (defaultElement) => {
-  return (className, attrs) => {
-    const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
-      props = {
-        ...attrs,
-        ...props,
-        className: getScopedClassName(
-          cx(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);
-      }
-      useGlobals();
-      return React.createElement(Element, {
-        ref: ref,
-        ...props,
-      });
+let _base = (defaultElement) => (className, attrs) => {
+  let Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
+    props = {
+      ...attrs,
+      ...props,
+      className: getScopedClassName(
+        cx(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);
+    }
+    useGlobals();
+    return React.createElement(Element, {
+      ref: ref,
+      ...props,
     });
-    Comp.displayName = getDisplayNameFromClass(className);
-    return Comp;
-  };
+  });
+  return Comp;
 };
 export 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 getDisplayNameFromClass = (str) => {
+  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[c] : c))
-      .join(' ') || null
-  );
-};
+let getScopedClassName = (className = '') =>
+  className
+    .split(' ')
+    .map((c) => (c in styles ? styles[c] : c))
+    .join(' ') || null;

package/esm/utils/functions/react.js

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
 export const cloneElementWithRef = (children, getProps) => {
-  if (!children) {
-    return null;
-  }
-  if (!React.isValidElement(children)) {
-    return children;
-  }
-  const props = getProps(children);
-  const ref = mergeRefs(
+  if (!children) return null;
+  if (!React.isValidElement(children)) return children;
+  let props = getProps(children);
+  let ref = mergeRefs(
     ...[
       'ref' in children ? children.ref : null,
       'ref' in props ? props.ref : null,

package/esm/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/esm/utils/hooks/index.js

@@ -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/esm/utils/hooks/useContainerWidth.js

@@ -2,21 +2,17 @@ import * as React from 'react';
 import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
 export 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] = useResizeObserver(updateWidth);
-  if (!watchResizes) {
-    resizeObserver?.disconnect();
-  }
-  const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+  let [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
+  if (!watchResizes) resizeObserver?.disconnect();
+  let refs = useMergedRefs(ref, watchResizes ? resizeRef : void 0);
   return [refs, contentWidth];
 };

package/esm/utils/hooks/useControlledState.js

@@ -4,13 +4,12 @@ export 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/esm/utils/hooks/useDragAndDrop.js

@@ -5,8 +5,8 @@ import {
 } from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
-const getContainerRect = (containerRef) => {
-  const containerRect = containerRef?.current?.getBoundingClientRect();
+let getContainerRect = (containerRef) => {
+  let containerRect = containerRef?.current?.getBoundingClientRect();
   return {
     top: containerRect?.top ?? 0,
     right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
@@ -15,78 +15,68 @@ const getContainerRect = (containerRef) => {
   };
 };
 export 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] = 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] = useResizeObserver(adjustTransform);
+  let [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
   resizeRef(containerRef?.current);
-  React.useEffect(() => {
-    return () => {
+  React.useEffect(
+    () => () => {
       resizeObserver?.disconnect();
-    };
-  }, [resizeObserver]);
+    },
+    [resizeObserver],
+  );
   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)`,
         );
-      }
     },
     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] = getTranslateValuesFromElement(elementRef.current);
+      if (!elementRef.current || 0 !== e.button || !enabled) return;
+      let [x, y] = 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',
@@ -98,9 +88,8 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             'pointermove',
             onPointerMove.current,
           );
-          if (elementRef.current) {
+          if (elementRef.current)
             elementRef.current.style.userSelect = originalUserSelect.current;
-          }
         },
         {
           once: true,

package/esm/utils/hooks/useEventListener.js

@@ -1,14 +1,12 @@
 import * as React from 'react';
 export 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/esm/utils/hooks/useGlobals.js

@@ -1,38 +1,19 @@
 import * as React from 'react';
 import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
-import { isDev } from '../functions/dev.js';
-const didLogWarning = {
+import { isUnitTest } from '../functions/dev.js';
+let didLogWarning = {
   fontSize: false,
   themeProvider: false,
 };
 export const useGlobals = () => {
-  const themeContext = React.useContext(ThemeContext);
+  let themeContext = React.useContext(ThemeContext);
   useThemeProviderWarning(themeContext);
   useRootFontSizeWarning();
   return themeContext;
 };
 export const useThemeProviderWarning = (themeContext) => {
-  React.useEffect(() => {
-    if (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 (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;
-    }
-  }, []);
+let useRootFontSizeWarning = () => {
+  React.useEffect(() => {}, []);
 };

package/esm/utils/hooks/useId.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { getRandomValue } from '../functions/numbers.js';
 export const useId = () => {
-  const uniqueValue = useUniqueValue();
+  let uniqueValue = useUniqueValue();
   return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
-const _React = React;
-const useUniqueValue =
+let _React = React;
+let useUniqueValue =
   _React.useId ?? (() => React.useMemo(() => getRandomValue(10), []));

package/esm/utils/hooks/useIntersection.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
 import { getWindow } from '../functions/dom.js';
 export 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 || !getWindow()?.IntersectionObserver) {
-        return;
-      }
-      const observer = new IntersectionObserver(
+      if (!node || !getWindow()?.IntersectionObserver) return;
+      let observer = new IntersectionObserver(
         ([entry], obs) => {
           if (entry.isIntersecting) {
-            if (once) {
-              obs.disconnect();
-            }
+            if (once) obs.disconnect();
             onIntersect();
           }
         },

package/esm/utils/hooks/useIsClient.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export const useIsClient = () => {
-  const [isClient, setIsClient] = React.useState(false);
+  let [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => {
     setIsClient(true);
   }, []);

package/esm/utils/hooks/useIsomorphicLayoutEffect.js

@@ -1,4 +1,4 @@
 import * as React from 'react';
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+let useIsomorphicLayoutEffect =
+  'undefined' != typeof window ? React.useLayoutEffect : React.useEffect;
 export { useIsomorphicLayoutEffect as useLayoutEffect };

package/esm/utils/hooks/useLatestRef.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export const useLatestRef = (value) => {
-  const valueRef = React.useRef(value);
+  let valueRef = React.useRef(value);
   React.useEffect(() => {
     valueRef.current = value;
   }, [value]);

package/esm/utils/hooks/useMediaQuery.js

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import { useSyncExternalStore } from './useSyncExternalStore.js';
 export 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);
     },
     [queryString],
   );
-  return useSyncExternalStore(subscribe, getSnapshot, () => undefined);
+  return useSyncExternalStore(subscribe, getSnapshot, () => void 0);
 };

package/esm/utils/hooks/useMergedRefs.js

@@ -1,15 +1,11 @@
 import * as React from 'react';
-export const mergeRefs = (...refs) => {
-  return (instance) => {
+export 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;
     });
   };
-};
-export const useMergedRefs = (...refs) => {
-  return React.useCallback(mergeRefs(...refs), [...refs]);
-};
+export const useMergedRefs = (...refs) =>
+  React.useCallback(mergeRefs(...refs), [...refs]);

package/esm/utils/hooks/useOverflow.js

@@ -2,59 +2,57 @@ import * as React from 'react';
 import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
 import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
-const STARTING_MAX_ITEMS_COUNT = 20;
+let STARTING_MAX_ITEMS_COUNT = 20;
 export 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] = useResizeObserver(updateContainerSize);
-  const resizeObserverRef = React.useRef(observer);
+  let [resizeRef, observer] = useResizeObserver(updateContainerSize);
+  let resizeObserverRef = React.useRef(observer);
   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 = useMergedRefs(containerRef, resizeRef);
+  let mergedRefs = useMergedRefs(containerRef, resizeRef);
   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/esm/utils/hooks/useResizeObserver.js

@@ -1,20 +1,16 @@
 import * as React from 'react';
 import { getWindow } from '../functions/dom.js';
 export const useResizeObserver = (onResize) => {
-  const resizeObserver = React.useRef();
-  const elementRef = React.useCallback(
+  let resizeObserver = React.useRef();
+  let elementRef = React.useCallback(
     (element) => {
-      if (!getWindow()?.ResizeObserver) {
-        return;
-      }
+      if (!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/esm/utils/hooks/useSafeContext.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 export 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;
 };