@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/utils/hooks/useContainerWidth.js

@@ -8,9 +8,9 @@ exports.useContainerWidth = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("./useMergedRefs");
-var useResizeObserver_1 = require("./useResizeObserver");
+const react_1 = __importDefault(require("react"));
+const useMergedRefs_1 = require("./useMergedRefs");
+const useResizeObserver_1 = require("./useResizeObserver");
 /**
  * Hook that returns the width of an element in three stages:
  *  - initialized with 0
@@ -26,24 +26,20 @@ var useResizeObserver_1 = require("./useResizeObserver");
  * ... // do something with width
  * return <div ref={ref}>...</div>;
  */
-var useContainerWidth = function (watchResizes) {
-    if (watchResizes === void 0) { watchResizes = true; }
-    var _a = react_1.default.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
-    var ref = react_1.default.useCallback(function (element) {
+const useContainerWidth = (watchResizes = true) => {
+    const [contentWidth, setContentWidth] = react_1.default.useState(0);
+    const ref = react_1.default.useCallback((element) => {
         if (!element) {
             return;
         }
         setContentWidth(element.getBoundingClientRect().width);
     }, []);
-    var updateWidth = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
-        return setContentWidth(width);
-    }, []);
-    var _b = (0, useResizeObserver_1.useResizeObserver)(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    const updateWidth = react_1.default.useCallback(({ width }) => setContentWidth(width), []);
+    const [resizeRef, resizeObserver] = (0, useResizeObserver_1.useResizeObserver)(updateWidth);
     if (!watchResizes) {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }
-    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
+    const refs = (0, useMergedRefs_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];
 };
 exports.useContainerWidth = useContainerWidth;

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -8,13 +8,13 @@ exports.useDragAndDrop = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var functions_1 = require("../functions");
-var useEventListener_1 = require("./useEventListener");
-var useResizeObserver_1 = require("./useResizeObserver");
-var getContainerRect = function (containerRef) {
+const react_1 = __importDefault(require("react"));
+const functions_1 = require("../functions");
+const useEventListener_1 = require("./useEventListener");
+const useResizeObserver_1 = require("./useResizeObserver");
+const getContainerRect = (containerRef) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     return {
         top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
         right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = (0, functions_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
@@ -30,20 +30,19 @@ var getContainerRect = function (containerRef) {
  * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
  * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
  */
-var useDragAndDrop = function (elementRef, containerRef, enabled) {
-    if (enabled === void 0) { enabled = true; }
-    var grabOffsetX = react_1.default.useRef(0);
-    var grabOffsetY = react_1.default.useRef(0);
-    var translateX = react_1.default.useRef();
-    var translateY = react_1.default.useRef();
-    var containerRectRef = react_1.default.useRef(getContainerRect(containerRef));
-    var adjustTransform = react_1.default.useCallback(function () {
+const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
+    const grabOffsetX = react_1.default.useRef(0);
+    const grabOffsetY = react_1.default.useRef(0);
+    const translateX = react_1.default.useRef();
+    const translateY = react_1.default.useRef();
+    const containerRectRef = react_1.default.useRef(getContainerRect(containerRef));
+    const adjustTransform = react_1.default.useCallback(() => {
         var _a;
         if (!elementRef.current || !enabled) {
             return;
         }
-        var _b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), top = _b.top, right = _b.right, bottom = _b.bottom, left = _b.left;
-        var _c = (0, functions_1.getTranslateValues)(elementRef.current), newTranslateX = _c[0], newTranslateY = _c[1];
+        const { top, right, bottom, left, } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        let [newTranslateX, newTranslateY] = (0, functions_1.getTranslateValues)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -59,52 +58,52 @@ var useDragAndDrop = function (elementRef, containerRef, enabled) {
         }
         translateX.current = newTranslateX;
         translateY.current = newTranslateY;
-        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
     }, [containerRef, elementRef, enabled]);
-    var _a = (0, useResizeObserver_1.useResizeObserver)(adjustTransform), resizeRef = _a[0], resizeObserver = _a[1];
+    const [resizeRef, resizeObserver] = (0, useResizeObserver_1.useResizeObserver)(adjustTransform);
     resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
-    react_1.default.useEffect(function () {
-        return function () {
+    react_1.default.useEffect(() => {
+        return () => {
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
     }, [resizeObserver]);
-    (0, useEventListener_1.useEventListener)('resize', function () {
+    (0, useEventListener_1.useEventListener)('resize', () => {
         adjustTransform();
         if (translateX.current != null && translateY.current != null) {
-            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
         }
     }, (0, functions_1.getWindow)());
-    var _b = react_1.default.useState(''), transform = _b[0], setTransform = _b[1];
-    var onPointerMove = react_1.default.useRef(function (event) {
+    const [transform, setTransform] = react_1.default.useState('');
+    const onPointerMove = react_1.default.useRef((event) => {
         if (!elementRef.current) {
             return;
         }
-        var newTranslateX = event.clientX - grabOffsetX.current;
-        var newTranslateY = event.clientY - grabOffsetY.current;
-        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+        const newTranslateX = event.clientX - grabOffsetX.current;
+        const newTranslateY = event.clientY - grabOffsetY.current;
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
         adjustTransform();
     });
-    var originalUserSelect = react_1.default.useRef('');
-    var onPointerDown = react_1.default.useCallback(function (e) {
+    const originalUserSelect = react_1.default.useRef('');
+    const onPointerDown = react_1.default.useCallback((e) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        var _a = (0, functions_1.getTranslateValues)(elementRef.current), x = _a[0], y = _a[1];
+        const [x, y] = (0, functions_1.getTranslateValues)(elementRef.current);
         grabOffsetX.current = e.clientX - x;
         grabOffsetY.current = e.clientY - y;
         originalUserSelect.current = elementRef.current.style.userSelect;
         // Prevents from selecting inner content when dragging.
         elementRef.current.style.userSelect = 'none';
         elementRef.current.ownerDocument.addEventListener('pointermove', onPointerMove.current);
-        elementRef.current.ownerDocument.addEventListener('pointerup', function () {
-            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+        elementRef.current.ownerDocument.addEventListener('pointerup', () => {
+            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
             document.removeEventListener('pointermove', onPointerMove.current);
             if (elementRef.current) {
                 elementRef.current.style.userSelect = originalUserSelect.current;
             }
         }, { once: true });
     }, [elementRef, enabled]);
-    return { onPointerDown: onPointerDown, transform: transform };
+    return { onPointerDown, transform };
 };
 exports.useDragAndDrop = useDragAndDrop;
 exports.default = exports.useDragAndDrop;

package/cjs/core/utils/hooks/useEventListener.js

@@ -8,7 +8,7 @@ exports.useEventListener = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * Hook that adds and removes Event listeners.
  * @example
@@ -18,22 +18,22 @@ var react_1 = __importDefault(require("react"));
  *     containerRef.current?.ownerDocument,
  *  );
  */
-var useEventListener = function (eventName, handler, element) {
+const useEventListener = (eventName, handler, element) => {
     // Based on published hook https://usehooks.com/useEventListener/.
-    var savedHandler = react_1.default.useRef();
+    const savedHandler = react_1.default.useRef();
     // Update reference if handler changes. This allows our effect below to
     // always use latest handler without us needing to pass it in effect deps array
     // and potentially cause effect to re-run every render.
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         savedHandler.current = handler;
     }, [handler]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (!element) {
             return;
         }
-        var eventListener = function (event) { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
+        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
         element.addEventListener(eventName, eventListener);
-        return function () {
+        return () => {
             element.removeEventListener(eventName, eventListener);
         };
     }, [eventName, element]);

package/cjs/core/utils/hooks/useIntersection.js

@@ -8,8 +8,8 @@ exports.useIntersection = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var dom_1 = require("../functions/dom");
+const react_1 = __importDefault(require("react"));
+const dom_1 = require("../functions/dom");
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
  * Callback is called only once by default (can be changed using the `once` parameter).
@@ -22,12 +22,10 @@ var dom_1 = require("../functions/dom");
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-var useIntersection = function (onIntersect, options, once) {
-    if (options === void 0) { options = {}; }
-    if (once === void 0) { once = true; }
-    var root = options.root, rootMargin = options.rootMargin, threshold = options.threshold;
-    var observer = react_1.default.useRef();
-    var setRef = react_1.default.useCallback(function (node) {
+const useIntersection = (onIntersect, options = {}, once = true) => {
+    const { root, rootMargin, threshold } = options;
+    const observer = react_1.default.useRef();
+    const setRef = react_1.default.useCallback((node) => {
         var _a;
         if (!((_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
             return;
@@ -38,18 +36,17 @@ var useIntersection = function (onIntersect, options, once) {
         if (!node) {
             return;
         }
-        observer.current = new IntersectionObserver(function (_a, obs) {
-            var entry = _a[0];
+        observer.current = new IntersectionObserver(([entry], obs) => {
             if (entry.isIntersecting) {
                 if (once) {
                     obs.disconnect();
                 }
                 onIntersect();
             }
-        }, { root: root, rootMargin: rootMargin, threshold: threshold });
+        }, { root, rootMargin, threshold });
         observer.current.observe(node);
     }, [onIntersect, once, root, rootMargin, threshold]);
-    react_1.default.useEffect(function () { return function () { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, []);
+    react_1.default.useEffect(() => () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     return setRef;
 };
 exports.useIntersection = useIntersection;

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -8,7 +8,7 @@ exports.useIsomorphicLayoutEffect = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *

package/cjs/core/utils/hooks/useLatestRef.js

@@ -8,7 +8,7 @@ exports.useLatestRef = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * Hook that keeps track of the latest value in a ref.
  * @private
@@ -16,9 +16,9 @@ var react_1 = __importDefault(require("react"));
  * const { value } = props;
  * const valueRef = useLatestRef(value);
  */
-var useLatestRef = function (value) {
-    var valueRef = react_1.default.useRef(value);
-    react_1.default.useEffect(function () {
+const useLatestRef = (value) => {
+    const valueRef = react_1.default.useRef(value);
+    react_1.default.useEffect(() => {
         valueRef.current = value;
     }, [value]);
     return valueRef;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -8,18 +8,15 @@ exports.useMediaQuery = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var functions_1 = require("../functions");
-var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
-var useMediaQuery = function (queryString) {
-    var _a = react_1.default.useState(), matches = _a[0], setMatches = _a[1];
-    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+const react_1 = __importDefault(require("react"));
+const functions_1 = require("../functions");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+const useMediaQuery = (queryString) => {
+    const [matches, setMatches] = react_1.default.useState();
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         var _a, _b, _c;
-        var mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
-        var handleChange = function (_a) {
-            var matches = _a.matches;
-            return setMatches(matches);
-        };
+        const mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
             setMatches(mediaQueryList.matches);
             try {
@@ -30,7 +27,7 @@ var useMediaQuery = function (queryString) {
                 (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
             }
         }
-        return function () {
+        return () => {
             var _a;
             try {
                 mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);

package/cjs/core/utils/hooks/useMergedRefs.js

@@ -1,13 +1,4 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,17 +8,13 @@ exports.useMergedRefs = exports.mergeRefs = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * Function that merges the provided refs into one.
  */
-var mergeRefs = function () {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    return function (instance) {
-        refs.forEach(function (ref) {
+const mergeRefs = (...refs) => {
+    return (instance) => {
+        refs.forEach((ref) => {
             if (typeof ref === 'function') {
                 ref(instance);
             }
@@ -41,12 +28,8 @@ exports.mergeRefs = mergeRefs;
 /**
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
  */
-var useMergedRefs = function () {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
+const useMergedRefs = (...refs) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return react_1.default.useCallback(exports.mergeRefs.apply(void 0, refs), __spreadArray([], refs, true));
+    return react_1.default.useCallback((0, exports.mergeRefs)(...refs), [...refs]);
 };
 exports.useMergedRefs = useMergedRefs;

package/cjs/core/utils/hooks/useOverflow.js

@@ -8,10 +8,10 @@ exports.useOverflow = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("./useMergedRefs");
-var useResizeObserver_1 = require("./useResizeObserver");
-var STARTING_MAX_ITEMS_COUNT = 20;
+const react_1 = __importDefault(require("react"));
+const useMergedRefs_1 = require("./useMergedRefs");
+const useResizeObserver_1 = require("./useResizeObserver");
+const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
  * that should be visible based on the size of the container element.
@@ -34,23 +34,16 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-var useOverflow = function (items, disabled, orientation) {
-    if (disabled === void 0) { disabled = false; }
-    if (orientation === void 0) { orientation = 'horizontal'; }
-    var containerRef = react_1.default.useRef(null);
-    var _a = react_1.default.useState(function () {
-        return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
-    }), visibleCount = _a[0], setVisibleCount = _a[1];
-    var needsFullRerender = react_1.default.useRef(true);
-    var _b = react_1.default.useState(0), containerSize = _b[0], setContainerSize = _b[1];
-    var previousContainerSize = react_1.default.useRef(0);
-    var updateContainerSize = react_1.default.useCallback(function (_a) {
-        var width = _a.width, height = _a.height;
-        return setContainerSize(orientation === 'horizontal' ? width : height);
-    }, [orientation]);
-    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerSize), resizeRef = _c[0], observer = _c[1];
-    var resizeObserverRef = react_1.default.useRef(observer);
-    react_1.default.useLayoutEffect(function () {
+const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
+    const containerRef = react_1.default.useRef(null);
+    const [visibleCount, setVisibleCount] = react_1.default.useState(() => disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+    const needsFullRerender = react_1.default.useRef(true);
+    const [containerSize, setContainerSize] = react_1.default.useState(0);
+    const previousContainerSize = react_1.default.useRef(0);
+    const updateContainerSize = react_1.default.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
+    const [resizeRef, observer] = (0, useResizeObserver_1.useResizeObserver)(updateContainerSize);
+    const resizeObserverRef = react_1.default.useRef(observer);
+    react_1.default.useLayoutEffect(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -59,28 +52,28 @@ var useOverflow = function (items, disabled, orientation) {
             needsFullRerender.current = true;
         }
     }, [containerSize, disabled, items]);
-    var mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
-    react_1.default.useLayoutEffect(function () {
+    const mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
+    react_1.default.useLayoutEffect(() => {
         var _a;
         if (!containerRef.current || disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             return;
         }
-        var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
-        var availableSize = containerRef.current["offset".concat(dimension)];
-        var requiredSize = containerRef.current["scroll".concat(dimension)];
+        const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
+        const availableSize = containerRef.current[`offset${dimension}`];
+        const requiredSize = containerRef.current[`scroll${dimension}`];
         if (availableSize < requiredSize) {
-            var avgItemSize = requiredSize / visibleCount;
-            var visibleItems = Math.floor(availableSize / avgItemSize);
+            const avgItemSize = requiredSize / visibleCount;
+            const visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
+            const childrenSize = Array.from(containerRef.current.children).reduce((sum, child) => sum + child[`offset${dimension}`], 0);
             // Previous `useEffect` might have updated visible count, but we still have old one
             // If it is 0, lets try to update it with items length.
-            var currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
-            var avgItemSize = childrenSize / currentVisibleCount;
-            var visibleItems = Math.floor(availableSize / avgItemSize);
+            const currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            const avgItemSize = childrenSize / currentVisibleCount;
+            const visibleItems = Math.floor(availableSize / avgItemSize);
             if (!isNaN(visibleItems)) {
                 // Doubling the visible items to overflow the container. Just to be safe.
                 setVisibleCount(Math.min(items.length, visibleItems * 2));
@@ -88,7 +81,7 @@ var useOverflow = function (items, disabled, orientation) {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/cjs/core/utils/hooks/useResizeObserver.js

@@ -8,8 +8,8 @@ exports.useResizeObserver = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var dom_1 = require("../functions/dom");
+const react_1 = __importDefault(require("react"));
+const dom_1 = require("../functions/dom");
 /**
  * Hook that uses `ResizeObserver` to access an element's size every time it updates.
  * @private
@@ -22,19 +22,16 @@ var dom_1 = require("../functions/dom");
  * ...
  * return <div ref={ref}>...</div>;
  */
-var useResizeObserver = function (onResize) {
-    var resizeObserver = react_1.default.useRef();
-    var elementRef = react_1.default.useCallback(function (element) {
+const useResizeObserver = (onResize) => {
+    const resizeObserver = react_1.default.useRef();
+    const elementRef = react_1.default.useCallback((element) => {
         var _a, _b, _c;
         if (!((_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
             return;
         }
         (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
         if (element) {
-            resizeObserver.current = new ResizeObserver(function (_a) {
-                var contentRect = _a[0].contentRect;
-                return onResize(contentRect);
-            });
+            resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
             (_c = resizeObserver.current) === null || _c === void 0 ? void 0 : _c.observe(element);
         }
     }, [onResize]);

package/cjs/core/utils/hooks/useSafeContext.js

@@ -8,15 +8,15 @@ exports.useSafeContext = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * Wrapper hook around `useContext` that throws an error if the context is not provided.
  * @param context Context to use. Must have a `displayName` for useful errors.
  */
-var useSafeContext = function (context) {
-    var value = react_1.default.useContext(context);
+const useSafeContext = (context) => {
+    const value = react_1.default.useContext(context);
     if (!value) {
-        throw new Error("".concat(context.displayName, " is undefined"));
+        throw new Error(`${context.displayName} is undefined`);
     }
     return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
 };

package/cjs/core/utils/hooks/useTheme.js

@@ -8,10 +8,10 @@ exports.useTheme = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
-var functions_1 = require("../functions");
-var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+const react_1 = __importDefault(require("react"));
+const ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
+const functions_1 = require("../functions");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 require("@itwin/itwinui-css/css/global.css");
 require("@itwin/itwinui-variables/index.css");
 /**
@@ -23,11 +23,11 @@ require("@itwin/itwinui-variables/index.css");
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
-var useTheme = function (theme, themeOptions) {
+const useTheme = (theme, themeOptions) => {
     var _a;
-    var themeContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
-    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
-    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+    const themeContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
+    const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         // exit early if theme was already set by provider
         if (themeContext || !ownerDocument) {
             return;
@@ -54,21 +54,19 @@ exports.useTheme = useTheme;
  * Helper function to apply the specified theme, or detect the OS theme.
  * Returns a cleanup function to remove the change handlers.
  */
-var handleTheme = function (theme, ownerDocument, highContrast) {
+const handleTheme = (theme, ownerDocument, highContrast) => {
     var _a, _b, _c, _d, _e;
-    var root = ownerDocument.documentElement;
-    var _window = (_a = ownerDocument.defaultView) !== null && _a !== void 0 ? _a : (0, functions_1.getWindow)();
-    var applyThemeAttributes = function (isDark, isHC) {
-        if (isDark === void 0) { isDark = false; }
-        if (isHC === void 0) { isHC = false; }
+    const root = ownerDocument.documentElement;
+    const _window = (_a = ownerDocument.defaultView) !== null && _a !== void 0 ? _a : (0, functions_1.getWindow)();
+    const applyThemeAttributes = (isDark = false, isHC = false) => {
         root.dataset.iuiTheme = isDark ? 'dark' : 'light';
         root.dataset.iuiContrast = isHC ? 'high' : 'default';
     };
-    var prefersDarkQuery = (_b = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_window, '(prefers-color-scheme: dark)');
-    var prefersHCQuery = (_c = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(_window, '(prefers-contrast: more)');
-    var changeHandler = function () {
-        var isDark = theme === 'dark' || (theme === 'os' && (prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.matches));
-        var isHC = highContrast !== null && highContrast !== void 0 ? highContrast : prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.matches;
+    const prefersDarkQuery = (_b = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_window, '(prefers-color-scheme: dark)');
+    const prefersHCQuery = (_c = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(_window, '(prefers-contrast: more)');
+    const changeHandler = () => {
+        const isDark = theme === 'dark' || (theme === 'os' && (prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.matches));
+        const isHC = highContrast !== null && highContrast !== void 0 ? highContrast : prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.matches;
         applyThemeAttributes(isDark, isHC);
     };
     // call handler once to set initial theme
@@ -77,7 +75,7 @@ var handleTheme = function (theme, ownerDocument, highContrast) {
     (_d = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.addEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkQuery, 'change', changeHandler);
     (_e = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersHCQuery, 'change', changeHandler);
     // return cleanup function to remove event listeners (should be returned from useEffect)
-    return function () {
+    return () => {
         var _a, _b;
         (_a = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkQuery, 'change', changeHandler);
         (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);