@itwin/itwinui-react 3.13.4 → 3.14.1

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

@@ -1,81 +1,105 @@
 import * as React from 'react';
-import { getTranslateValuesFromElement, getWindow } from '../functions/index.js';
+import {
+  getTranslateValuesFromElement,
+  getWindow,
+} from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
-let getContainerRect = (containerRef)=>{
-    let containerRect = containerRef?.current?.getBoundingClientRect();
-    return {
-        top: containerRect?.top ?? 0,
-        right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
-        bottom: containerRect?.bottom ?? getWindow()?.innerHeight ?? 0,
-        left: containerRect?.left ?? 0
-    };
+let getContainerRect = (containerRef) => {
+  let containerRect = containerRef?.current?.getBoundingClientRect();
+  return {
+    top: containerRect?.top ?? 0,
+    right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
+    bottom: containerRect?.bottom ?? getWindow()?.innerHeight ?? 0,
+    left: containerRect?.left ?? 0,
+  };
 };
-export 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] = 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] = useResizeObserver(adjustTransform);
-    resizeRef(containerRef?.current);
-    React.useEffect(()=>()=>{
-            resizeObserver?.disconnect();
-        }, [
-        resizeObserver
-    ]);
-    useEventListener('resize', ()=>{
-        adjustTransform();
-        if (null != translateX.current && null != translateY.current) setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-    }, 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] = 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
-    };
+export 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] = 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] = useResizeObserver(adjustTransform);
+  resizeRef(containerRef?.current);
+  React.useEffect(
+    () => () => {
+      resizeObserver?.disconnect();
+    },
+    [resizeObserver],
+  );
+  useEventListener(
+    'resize',
+    () => {
+      adjustTransform();
+      if (null != translateX.current && null != translateY.current)
+        setTransform(
+          `translate(${translateX.current}px, ${translateY.current}px)`,
+        );
+    },
+    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] = 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-esm/utils/hooks/useEventListener.js

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

@@ -2,31 +2,36 @@ import * as React from 'react';
 import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
 import { isUnitTest } from '../functions/dev.js';
 let didLogWarning = {
-    fontSize: false,
-    themeProvider: false
+  fontSize: false,
+  themeProvider: false,
 };
-export const useGlobals = ()=>{
-    let themeContext = React.useContext(ThemeContext);
-    useThemeProviderWarning(themeContext);
-    useRootFontSizeWarning();
-    return themeContext;
+export const useGlobals = () => {
+  let themeContext = React.useContext(ThemeContext);
+  useThemeProviderWarning(themeContext);
+  useRootFontSizeWarning();
+  return themeContext;
 };
-export const useThemeProviderWarning = (themeContext)=>{
-    React.useEffect(()=>{
-        if (!isUnitTest && !didLogWarning.themeProvider && !themeContext) {
-            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
-            didLogWarning.themeProvider = true;
-        }
-    }, [
-        themeContext
-    ]);
+export const useThemeProviderWarning = (themeContext) => {
+  React.useEffect(() => {
+    if (!isUnitTest && !didLogWarning.themeProvider && !themeContext) {
+      console.error(
+        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
+      );
+      didLogWarning.themeProvider = true;
+    }
+  }, [themeContext]);
 };
-let useRootFontSizeWarning = ()=>{
-    React.useEffect(()=>{
-        if (!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;
-        }
-    }, []);
+let useRootFontSizeWarning = () => {
+  React.useEffect(() => {
+    if (!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-esm/utils/hooks/useId.js

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

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

@@ -1,30 +1,30 @@
 import * as React from 'react';
 import { getWindow } from '../functions/dom.js';
-export 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 || !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;
+export 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 || !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-esm/utils/hooks/useIsClient.js

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

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

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

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

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

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

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

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-export const mergeRefs = (...refs)=>(instance)=>{
-        refs.forEach((ref)=>{
-            if ('function' == typeof ref) ref(instance);
-            else if (ref) ref.current = instance;
-        });
-    };
-export const useMergedRefs = (...refs)=>React.useCallback(mergeRefs(...refs), [
-        ...refs
-    ]);
+export const mergeRefs =
+  (...refs) =>
+  (instance) => {
+    refs.forEach((ref) => {
+      if ('function' == typeof ref) ref(instance);
+      else if (ref) ref.current = instance;
+    });
+  };
+export const useMergedRefs = (...refs) =>
+  React.useCallback(mergeRefs(...refs), [...refs]);

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

@@ -3,63 +3,61 @@ import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
 import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 let STARTING_MAX_ITEMS_COUNT = 20;
-export 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] = useResizeObserver(updateContainerSize);
-    let resizeObserverRef = React.useRef(observer);
-    useLayoutEffect(()=>{
-        if (disabled) setVisibleCount(items.length);
-        else {
-            setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
-            needsFullRerender.current = true;
-        }
-    }, [
-        containerSize,
-        disabled,
-        items
-    ]);
-    let mergedRefs = useMergedRefs(containerRef, resizeRef);
-    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
-    ]);
-    useLayoutEffect(()=>{
-        previousContainerSize.current = containerSize;
-    }, [
-        containerSize
-    ]);
-    return [
-        mergedRefs,
-        visibleCount
-    ];
+export 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] = useResizeObserver(updateContainerSize);
+  let resizeObserverRef = React.useRef(observer);
+  useLayoutEffect(() => {
+    if (disabled) setVisibleCount(items.length);
+    else {
+      setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+      needsFullRerender.current = true;
+    }
+  }, [containerSize, disabled, items]);
+  let mergedRefs = useMergedRefs(containerRef, resizeRef);
+  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]);
+  useLayoutEffect(() => {
+    previousContainerSize.current = containerSize;
+  }, [containerSize]);
+  return [mergedRefs, visibleCount];
 };

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

@@ -1,25 +1,23 @@
 import * as React from 'react';
 import { getWindow } from '../functions/dom.js';
-export const useResizeObserver = (onResize)=>{
-    let resizeObserver = React.useRef();
-    let elementRef = React.useCallback((element)=>{
-        if (!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
-    ];
+export const useResizeObserver = (onResize) => {
+  let resizeObserver = React.useRef();
+  let elementRef = React.useCallback(
+    (element) => {
+      if (!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];
 };

package/DEV-esm/utils/hooks/useSafeContext.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-export const useSafeContext = (context)=>{
-    let value = React.useContext(context);
-    if (!value) throw new Error(`${context.displayName || 'Context'} is undefined`);
-    return value;
+export const useSafeContext = (context) => {
+  let value = React.useContext(context);
+  if (!value)
+    throw new Error(`${context.displayName || 'Context'} is undefined`);
+  return value;
 };