@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

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

@@ -6,9 +6,9 @@ import React from 'react';
 import { getTranslateValues, getWindow } from '../functions';
 import { useEventListener } from './useEventListener';
 import { useResizeObserver } from './useResizeObserver';
-var getContainerRect = function (containerRef) {
+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 = getWindow()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
@@ -24,20 +24,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.
  */
-export var useDragAndDrop = function (elementRef, containerRef, enabled) {
-    if (enabled === void 0) { enabled = true; }
-    var grabOffsetX = React.useRef(0);
-    var grabOffsetY = React.useRef(0);
-    var translateX = React.useRef();
-    var translateY = React.useRef();
-    var containerRectRef = React.useRef(getContainerRect(containerRef));
-    var adjustTransform = React.useCallback(function () {
+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(() => {
         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 = 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] = getTranslateValues(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -53,51 +52,51 @@ export 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 = useResizeObserver(adjustTransform), resizeRef = _a[0], resizeObserver = _a[1];
+    const [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
     resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
-    React.useEffect(function () {
-        return function () {
+    React.useEffect(() => {
+        return () => {
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
     }, [resizeObserver]);
-    useEventListener('resize', function () {
+    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)`);
         }
     }, getWindow());
-    var _b = React.useState(''), transform = _b[0], setTransform = _b[1];
-    var onPointerMove = React.useRef(function (event) {
+    const [transform, setTransform] = React.useState('');
+    const onPointerMove = React.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.useRef('');
-    var onPointerDown = React.useCallback(function (e) {
+    const originalUserSelect = React.useRef('');
+    const onPointerDown = React.useCallback((e) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        var _a = getTranslateValues(elementRef.current), x = _a[0], y = _a[1];
+        const [x, y] = 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 };
 };
 export default useDragAndDrop;

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

@@ -12,22 +12,22 @@ import React from 'react';
  *     containerRef.current?.ownerDocument,
  *  );
  */
-export var useEventListener = function (eventName, handler, element) {
+export const useEventListener = (eventName, handler, element) => {
     // Based on published hook https://usehooks.com/useEventListener/.
-    var savedHandler = React.useRef();
+    const savedHandler = React.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.useEffect(function () {
+    React.useEffect(() => {
         savedHandler.current = handler;
     }, [handler]);
-    React.useEffect(function () {
+    React.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/esm/core/utils/hooks/useIntersection.js

@@ -16,12 +16,10 @@ import { getWindow } from '../functions/dom';
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export 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.useRef();
-    var setRef = React.useCallback(function (node) {
+export const useIntersection = (onIntersect, options = {}, once = true) => {
+    const { root, rootMargin, threshold } = options;
+    const observer = React.useRef();
+    const setRef = React.useCallback((node) => {
         var _a;
         if (!((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
             return;
@@ -32,17 +30,16 @@ export 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.useEffect(function () { return function () { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, []);
+    React.useEffect(() => () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     return setRef;
 };

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

@@ -8,4 +8,4 @@ import React from 'react';
  *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

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

@@ -10,9 +10,9 @@ import React from 'react';
  * const { value } = props;
  * const valueRef = useLatestRef(value);
  */
-export var useLatestRef = function (value) {
-    var valueRef = React.useRef(value);
-    React.useEffect(function () {
+export const useLatestRef = (value) => {
+    const valueRef = React.useRef(value);
+    React.useEffect(() => {
         valueRef.current = value;
     }, [value]);
     return valueRef;

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

@@ -5,15 +5,12 @@
 import React from 'react';
 import { getWindow } from '../functions';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-export var useMediaQuery = function (queryString) {
-    var _a = React.useState(), matches = _a[0], setMatches = _a[1];
-    useIsomorphicLayoutEffect(function () {
+export const useMediaQuery = (queryString) => {
+    const [matches, setMatches] = React.useState();
+    useIsomorphicLayoutEffect(() => {
         var _a, _b, _c;
-        var mediaQueryList = (_b = (_a = 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 = 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 {
@@ -24,7 +21,7 @@ export 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/esm/core/utils/hooks/useMergedRefs.js

@@ -1,12 +1,3 @@
-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));
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -15,13 +6,9 @@ import React from 'react';
 /**
  * Function that merges the provided refs into one.
  */
-export var mergeRefs = function () {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    return function (instance) {
-        refs.forEach(function (ref) {
+export const mergeRefs = (...refs) => {
+    return (instance) => {
+        refs.forEach((ref) => {
             if (typeof ref === 'function') {
                 ref(instance);
             }
@@ -34,11 +21,7 @@ export var mergeRefs = function () {
 /**
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
  */
-export var useMergedRefs = function () {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
+export const useMergedRefs = (...refs) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React.useCallback(mergeRefs.apply(void 0, refs), __spreadArray([], refs, true));
+    return React.useCallback(mergeRefs(...refs), [...refs]);
 };

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import { useMergedRefs } from './useMergedRefs';
 import { useResizeObserver } from './useResizeObserver';
-var STARTING_MAX_ITEMS_COUNT = 20;
+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.
@@ -28,23 +28,16 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-export var useOverflow = function (items, disabled, orientation) {
-    if (disabled === void 0) { disabled = false; }
-    if (orientation === void 0) { orientation = 'horizontal'; }
-    var containerRef = React.useRef(null);
-    var _a = React.useState(function () {
-        return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
-    }), visibleCount = _a[0], setVisibleCount = _a[1];
-    var needsFullRerender = React.useRef(true);
-    var _b = React.useState(0), containerSize = _b[0], setContainerSize = _b[1];
-    var previousContainerSize = React.useRef(0);
-    var updateContainerSize = React.useCallback(function (_a) {
-        var width = _a.width, height = _a.height;
-        return setContainerSize(orientation === 'horizontal' ? width : height);
-    }, [orientation]);
-    var _c = useResizeObserver(updateContainerSize), resizeRef = _c[0], observer = _c[1];
-    var resizeObserverRef = React.useRef(observer);
-    React.useLayoutEffect(function () {
+export const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
+    const containerRef = React.useRef(null);
+    const [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(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
+    const [resizeRef, observer] = useResizeObserver(updateContainerSize);
+    const resizeObserverRef = React.useRef(observer);
+    React.useLayoutEffect(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -53,28 +46,28 @@ export var useOverflow = function (items, disabled, orientation) {
             needsFullRerender.current = true;
         }
     }, [containerSize, disabled, items]);
-    var mergedRefs = useMergedRefs(containerRef, resizeRef);
-    React.useLayoutEffect(function () {
+    const mergedRefs = useMergedRefs(containerRef, resizeRef);
+    React.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));
@@ -82,7 +75,7 @@ export var useOverflow = function (items, disabled, orientation) {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

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

@@ -16,19 +16,16 @@ import { getWindow } from '../functions/dom';
  * ...
  * return <div ref={ref}>...</div>;
  */
-export var useResizeObserver = function (onResize) {
-    var resizeObserver = React.useRef();
-    var elementRef = React.useCallback(function (element) {
+export const useResizeObserver = (onResize) => {
+    const resizeObserver = React.useRef();
+    const elementRef = React.useCallback((element) => {
         var _a, _b, _c;
         if (!((_a = 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/esm/core/utils/hooks/useSafeContext.js

@@ -7,10 +7,10 @@ import React from '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.
  */
-export var useSafeContext = function (context) {
-    var value = React.useContext(context);
+export const useSafeContext = (context) => {
+    const value = React.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/esm/core/utils/hooks/useTheme.js

@@ -17,11 +17,11 @@ import '@itwin/itwinui-variables/index.css';
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
-export var useTheme = function (theme, themeOptions) {
+export const useTheme = (theme, themeOptions) => {
     var _a;
-    var themeContext = React.useContext(ThemeContext);
-    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
-    useIsomorphicLayoutEffect(function () {
+    const themeContext = React.useContext(ThemeContext);
+    const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
+    useIsomorphicLayoutEffect(() => {
         // exit early if theme was already set by provider
         if (themeContext || !ownerDocument) {
             return;
@@ -47,21 +47,19 @@ export var useTheme = function (theme, themeOptions) {
  * 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 : 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 : 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
@@ -70,7 +68,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);

package/esm/core/utils/icons/StatusIconMap.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -18,9 +7,9 @@ import { SvgInfoCircular } from './SvgInfoCircular';
 import { SvgStatusError } from './SvgStatusError';
 import { SvgStatusSuccess } from './SvgStatusSuccess';
 import { SvgStatusWarning } from './SvgStatusWarning';
-export var StatusIconMap = {
-    negative: function (args) { return React.createElement(SvgStatusError, __assign({ "aria-hidden": true }, args)); },
-    positive: function (args) { return React.createElement(SvgStatusSuccess, __assign({ "aria-hidden": true }, args)); },
-    warning: function (args) { return React.createElement(SvgStatusWarning, __assign({ "aria-hidden": true }, args)); },
-    informational: function (args) { return (React.createElement(SvgInfoCircular, __assign({ "aria-hidden": true }, args))); },
+export const StatusIconMap = {
+    negative: (args) => React.createElement(SvgStatusError, { "aria-hidden": true, ...args }),
+    positive: (args) => React.createElement(SvgStatusSuccess, { "aria-hidden": true, ...args }),
+    warning: (args) => React.createElement(SvgStatusWarning, { "aria-hidden": true, ...args }),
+    informational: (args) => (React.createElement(SvgInfoCircular, { "aria-hidden": true, ...args })),
 };

package/esm/core/utils/icons/SvgCalendar.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-export var SvgCalendar = function (props) {
-    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+export const SvgCalendar = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
         React.createElement("path", { d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z' })));
 };

package/esm/core/utils/icons/SvgCaretDownSmall.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-export var SvgCaretDownSmall = function (props) {
-    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+export const SvgCaretDownSmall = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
         React.createElement("path", { d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z' })));
 };

package/esm/core/utils/icons/SvgCaretRightSmall.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-export var SvgCaretRightSmall = function (props) {
-    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+export const SvgCaretRightSmall = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
         React.createElement("path", { d: 'M6.003 4.807v6.4a.28.28 0 0 0 .443.24L9.9 8.27a.34.34 0 0 0 0-.48L6.446 4.566a.269.269 0 0 0-.443.24z' })));
 };

package/esm/core/utils/icons/SvgCaretUpSmall.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-export var SvgCaretUpSmall = function (props) {
-    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+export const SvgCaretUpSmall = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
         React.createElement("path", { d: 'M4.807 9.997h6.395a.28.28 0 0 0 .24-.443L8.27 6.097a.34.34 0 0 0-.48 0h-.001L4.566 9.554a.27.27 0 0 0 .24.443z' })));
 };

package/esm/core/utils/icons/SvgCheckmark.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-export var SvgCheckmark = function (props) {
-    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+export const SvgCheckmark = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
         React.createElement("path", { d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' })));
 };