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

package/esm/core/utils/components/VirtualScroll.js

@@ -1,25 +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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -27,8 +5,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { mergeRefs } from '../hooks';
 import { useResizeObserver } from '../hooks/useResizeObserver';
-var getScrollableParent = function (element, ownerDocument) {
-    if (ownerDocument === void 0) { ownerDocument = document; }
+const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
     }
@@ -36,38 +13,38 @@ var getScrollableParent = function (element, ownerDocument) {
         ? element
         : getScrollableParent(element.parentElement, ownerDocument);
 };
-var isElementScrollable = function (element) {
+const isElementScrollable = (element) => {
     return /(auto|scroll|overlay)/.test(getElementStyle(element, 'overflow') +
         getElementStyle(element, 'overflow-y'));
 };
-var getElementStyle = function (element, prop) {
+const getElementStyle = (element, prop) => {
     return getComputedStyle(element, null).getPropertyValue(prop);
 };
-var getElementHeight = function (element) {
+const getElementHeight = (element) => {
     var _a;
     return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
 };
-var getElementHeightWithMargins = function (element) {
+const getElementHeightWithMargins = (element) => {
     if (!element) {
         return undefined;
     }
-    var margin = parseFloat(getElementStyle(element, 'margin-top')) +
+    const margin = parseFloat(getElementStyle(element, 'margin-top')) +
         parseFloat(getElementStyle(element, 'margin-bottom'));
     return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
 };
-var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
+const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
     if (!childHeight) {
         return 0;
     }
     return Math.floor(totalHeight / childHeight);
 };
-var getTranslateValue = function (childHeight, startIndex) {
+const getTranslateValue = (childHeight, startIndex) => {
     if (startIndex > 0) {
         return childHeight * startIndex;
     }
     return 0;
 };
-var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scrollContainer) {
+const getVisibleNodeCount = (childHeight, startIndex, childrenLength, scrollContainer) => {
     return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
 };
 /**
@@ -91,10 +68,10 @@ var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scr
  * />
  * @private
  */
-export var VirtualScroll = React.forwardRef(function (props, ref) {
-    var _a = useVirtualization(props), innerProps = _a.innerProps, outerProps = _a.outerProps, visibleChildren = _a.visibleChildren;
-    return (React.createElement("div", __assign({}, outerProps, { ref: ref }),
-        React.createElement("div", __assign({}, innerProps), visibleChildren)));
+export const VirtualScroll = React.forwardRef((props, ref) => {
+    const { innerProps, outerProps, visibleChildren } = useVirtualization(props);
+    return (React.createElement("div", { ...outerProps, ref: ref },
+        React.createElement("div", { ...innerProps }, visibleChildren)));
 });
 /**
  * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
@@ -116,49 +93,48 @@ export var VirtualScroll = React.forwardRef(function (props, ref) {
  * );
  * @private
  */
-export var useVirtualization = function (props) {
-    var itemsLength = props.itemsLength, itemRenderer = props.itemRenderer, _a = props.bufferSize, bufferSize = _a === void 0 ? 10 : _a, scrollToIndex = props.scrollToIndex, style = props.style, rest = __rest(props, ["itemsLength", "itemRenderer", "bufferSize", "scrollToIndex", "style"]);
-    var _b = React.useState(0), startNode = _b[0], setStartNode = _b[1];
-    var _c = React.useState(0), visibleNodeCount = _c[0], setVisibleNodeCount = _c[1];
-    var scrollContainer = React.useRef();
-    var parentRef = React.useRef(null);
-    var childHeight = React.useRef({ first: 0, middle: 0, last: 0 });
-    var onScrollRef = React.useRef();
+export const useVirtualization = (props) => {
+    const { itemsLength, itemRenderer, bufferSize = 10, scrollToIndex, style, ...rest } = props;
+    const [startNode, setStartNode] = React.useState(0);
+    const [visibleNodeCount, setVisibleNodeCount] = React.useState(0);
+    const scrollContainer = React.useRef();
+    const parentRef = React.useRef(null);
+    const childHeight = React.useRef({ first: 0, middle: 0, last: 0 });
+    const onScrollRef = React.useRef();
     // Used only to recalculate on resize
-    var _d = React.useState(0), scrollContainerHeight = _d[0], setScrollContainerHeight = _d[1];
-    var visibleIndex = React.useRef({ start: 0, end: 0 });
+    const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+    const visibleIndex = React.useRef({ start: 0, end: 0 });
     // Used to mark when scroll container has height (updated by resize observer)
     // because before that calculations are not right
-    var _e = React.useState(false), isMounted = _e[0], setIsMounted = _e[1];
-    var getScrollableContainer = function () {
+    const [isMounted, setIsMounted] = React.useState(false);
+    const getScrollableContainer = () => {
         var _a, _b;
         return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
     };
-    var visibleChildren = React.useMemo(function () {
-        var arr = [];
-        var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
-        for (var i = startNode; i < endIndex; i++) {
+    const visibleChildren = React.useMemo(() => {
+        const arr = [];
+        const endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
+        for (let i = startNode; i < endIndex; i++) {
             arr.push(itemRenderer(i));
         }
         return arr;
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
-    var updateChildHeight = React.useCallback(function () {
+    const updateChildHeight = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
         }
-        var firstChild = parentRef.current.children.item(0);
-        var secondChild = parentRef.current.children.item(1);
-        var lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
-        var firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
+        const firstChild = parentRef.current.children.item(0);
+        const secondChild = parentRef.current.children.item(1);
+        const lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
+        const firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
         childHeight.current = {
             first: firstChildHeight,
             middle: Number((_d = (_c = getElementHeightWithMargins(secondChild)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : firstChildHeight),
             last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
         };
     }, [visibleChildren.length]);
-    var onResize = React.useCallback(function (_a) {
-        var height = _a.height;
+    const onResize = React.useCallback(({ height }) => {
         // Initial value returned by resize observer is 0
         // So wait for the next one
         if (height > 0) {
@@ -167,44 +143,44 @@ export var useVirtualization = function (props) {
         setScrollContainerHeight(height);
         updateChildHeight();
     }, [updateChildHeight]);
-    var _f = useResizeObserver(onResize), resizeRef = _f[0], resizeObserver = _f[1];
+    const [resizeRef, resizeObserver] = useResizeObserver(onResize);
     // Find scrollable parent
     // Needed only on init
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         var _a;
-        var scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        const scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    React.useLayoutEffect(function () {
-        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
+    React.useLayoutEffect(() => {
+        return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    React.useLayoutEffect(function () { return updateChildHeight(); }, [updateChildHeight]);
-    var updateVirtualScroll = React.useCallback(function () {
-        var scrollableContainer = getScrollableContainer();
+    React.useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    const updateVirtualScroll = React.useCallback(() => {
+        const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
             return;
         }
-        var start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
-        var visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
+        const start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
+        const visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
         // If there are less items at the end than buffer size
         // show more items at the start.
         // Have boundaries for edge cases, e.g. 1 item length
-        var startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
+        const startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
         visibleIndex.current = { start: start, end: start + visibleNodes };
         setStartNode(startIndex);
         setVisibleNodeCount(visibleNodes);
         if (!parentRef.current) {
             return;
         }
-        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current.middle, startIndex), "px)");
+        parentRef.current.style.transform = `translateY(${getTranslateValue(childHeight.current.middle, startIndex)}px)`;
     }, [bufferSize, itemsLength]);
-    var onScroll = React.useCallback(function () {
+    const onScroll = React.useCallback(() => {
         updateVirtualScroll();
     }, [updateVirtualScroll]);
-    var removeScrollListener = React.useCallback(function () {
+    const removeScrollListener = React.useCallback(() => {
         var _a, _b;
         if (!onScrollRef.current) {
             return;
@@ -215,7 +191,7 @@ export var useVirtualization = function (props) {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
@@ -228,18 +204,18 @@ export var useVirtualization = function (props) {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (!isMounted) {
             return;
         }
-        var scrollableContainer = getScrollableContainer();
+        const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer || scrollToIndex == null) {
             return;
         }
         // if `scrollToIndex` is not visible, scroll to it
         if (scrollToIndex > visibleIndex.current.end ||
             scrollToIndex < visibleIndex.current.start) {
-            var indexDiff = scrollToIndex > visibleIndex.current.end
+            const indexDiff = scrollToIndex > visibleIndex.current.end
                 ? scrollToIndex - visibleIndex.current.end
                 : scrollToIndex - visibleIndex.current.start;
             if (scrollToIndex === 0) {
@@ -258,8 +234,8 @@ export var useVirtualization = function (props) {
         // if `scrollToIndex` is the first visible node
         // ensure it is fully visible
         if (scrollToIndex === visibleIndex.current.start) {
-            var roundedScrollTop = Math.round(scrollableContainer.scrollTop);
-            var diff = roundedScrollTop % childHeight.current.middle;
+            const roundedScrollTop = Math.round(scrollableContainer.scrollTop);
+            const diff = roundedScrollTop % childHeight.current.middle;
             diff > 0 &&
                 scrollableContainer.scrollTo({
                     top: roundedScrollTop - diff,
@@ -269,10 +245,10 @@ export var useVirtualization = function (props) {
         // if `scrollToIndex` is the last visible node
         // ensure it is fully visible
         if (scrollToIndex === visibleIndex.current.end) {
-            var diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
+            const diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
                 childHeight.current.middle;
-            var roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
-            var scrollTopMod = roundedScrollTop % childHeight.current.middle;
+            const roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
+            const scrollTopMod = roundedScrollTop % childHeight.current.middle;
             if (diff > 0 && scrollTopMod === 0) {
                 scrollableContainer.scrollTo({
                     top: roundedScrollTop + childHeight.current.middle - diff,
@@ -280,23 +256,30 @@ export var useVirtualization = function (props) {
             }
         }
     }, [scrollToIndex, isMounted]);
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (!scrollContainerHeight) {
             return;
         }
         updateVirtualScroll();
     }, [scrollContainerHeight, updateVirtualScroll]);
     return {
-        outerProps: __assign({ style: __assign({ minHeight: itemsLength > 1
+        outerProps: {
+            style: {
+                minHeight: itemsLength > 1
                     ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
                         childHeight.current.first +
                         childHeight.current.last
-                    : childHeight.current.middle, minWidth: '100%' }, style) }, rest),
+                    : childHeight.current.middle,
+                minWidth: '100%',
+                ...style,
+            },
+            ...rest,
+        },
         innerProps: {
             style: { willChange: 'transform' },
             ref: mergeRefs(parentRef), // convert object ref to callback ref for better types
         },
-        visibleChildren: visibleChildren,
+        visibleChildren,
     };
 };
 export default VirtualScroll;

package/esm/core/utils/components/VisuallyHidden.js

@@ -1,25 +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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,9 +9,9 @@ import '@itwin/itwinui-css/css/utils.css';
 /**
  * Hides content visually but is still accessible to screen readers.
  */
-export var VisuallyHidden = React.forwardRef(function (props, ref) {
-    var className = props.className, rest = __rest(props, ["className"]);
+export const VisuallyHidden = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-visually-hidden', className), ref: ref }, rest)));
+    return (React.createElement("div", { className: cx('iui-visually-hidden', className), ref: ref, ...rest }));
 });
 export default VisuallyHidden;

package/esm/core/utils/components/WithCSSTransition.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-export declare const WithCSSTransition: (props: Partial<CSSTransitionProps<undefined>> & {
+export declare const WithCSSTransition: (props: Partial<CSSTransitionProps> & {
     children: JSX.Element;
-    dimension?: "width" | "height" | undefined;
+    dimension?: 'height' | 'width';
 }) => JSX.Element;
 export default WithCSSTransition;

package/esm/core/utils/components/WithCSSTransition.js

@@ -1,50 +1,28 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-export var WithCSSTransition = function (props) {
-    var visible = props.in, _a = props.dimension, dimension = _a === void 0 ? 'height' : _a, children = props.children, rest = __rest(props, ["in", "dimension", "children"]);
-    var expandedSize = React.useRef(0);
-    var dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
-    return (React.createElement(CSSTransition, __assign({ in: visible, timeout: 200, unmountOnExit: true, onEnter: function (node) {
-            node.style["min".concat(dimensionCamelCase)] = 'initial';
+export const WithCSSTransition = (props) => {
+    const { in: visible, dimension = 'height', children, ...rest } = props;
+    const expandedSize = React.useRef(0);
+    const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
+    return (React.createElement(CSSTransition, { in: visible, timeout: 200, unmountOnExit: true, onEnter: (node) => {
+            node.style[`min${dimensionCamelCase}`] = 'initial';
             node.style[dimension] = '0px';
-        }, onEntering: function (node) {
-            node.style[dimension] = "".concat(expandedSize.current, "px");
-        }, onEntered: function (node) {
-            node.style["min".concat(dimensionCamelCase)] = '';
+        }, onEntering: (node) => {
+            node.style[dimension] = `${expandedSize.current}px`;
+        }, onEntered: (node) => {
+            node.style[`min${dimensionCamelCase}`] = '';
             node.style[dimension] = '';
-        }, onExit: function (node) {
-            node.style[dimension] = "".concat(expandedSize.current, "px");
-        }, onExiting: function (node) {
-            node.style["min".concat(dimensionCamelCase)] = 'initial';
+        }, onExit: (node) => {
+            node.style[dimension] = `${expandedSize.current}px`;
+        }, onExiting: (node) => {
+            node.style[`min${dimensionCamelCase}`] = 'initial';
             node.style[dimension] = '0px';
-        }, classNames: 'iui' }, rest), React.cloneElement(children, {
-        ref: function (el) {
+        }, classNames: 'iui', ...rest }, React.cloneElement(children, {
+        ref: (el) => {
             if (el) {
                 expandedSize.current = el.getBoundingClientRect()[dimension];
             }

package/esm/core/utils/functions/colors.js

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export var SoftBackgrounds = {
+export const SoftBackgrounds = {
     skyblue: 'var(--iui-color-background-skyblue)',
     celery: 'var(--iui-color-background-celery)',
     froly: 'var(--iui-color-background-froly)',
@@ -16,10 +16,10 @@ export var SoftBackgrounds = {
     oak: 'var(--iui-color-background-oak)',
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
-export var isSoftBackground = function (value) {
+export const isSoftBackground = (value) => {
     return Object.keys(SoftBackgrounds).includes(value);
 };
-var USER_COLORS = [
+const USER_COLORS = [
     '#6AB9EC',
     '#B1C854',
     '#F7706C',
@@ -36,11 +36,11 @@ var USER_COLORS = [
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.
  */
-export var getUserColor = function (emailOrName) {
-    var normalizedString = emailOrName.trim().toLowerCase();
-    var hash = 0;
-    for (var i = 0; i < normalizedString.length; i++) {
-        var charCode = normalizedString.charCodeAt(i);
+export const getUserColor = (emailOrName) => {
+    const normalizedString = emailOrName.trim().toLowerCase();
+    let hash = 0;
+    for (let i = 0; i < normalizedString.length; i++) {
+        const charCode = normalizedString.charCodeAt(i);
         hash = (hash + charCode) % USER_COLORS.length;
     }
     return USER_COLORS[hash];

package/esm/core/utils/functions/dom.js

@@ -9,15 +9,14 @@
  * @param containerId id of the container to find or create
  * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
  */
-export var getContainer = function (containerId, ownerDocument) {
-    var _a;
-    if (ownerDocument === void 0) { ownerDocument = getDocument(); }
-    var container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
+export const getContainer = (containerId, ownerDocument = getDocument()) => {
+    var _a, _b;
+    let container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
-        container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
-        ownerDocument.body.appendChild(container);
+        const root = (_b = ownerDocument.querySelector('.iui-root')) !== null && _b !== void 0 ? _b : ownerDocument.body;
+        root.appendChild(container);
     }
     return container;
 };
@@ -25,13 +24,13 @@ export var getContainer = function (containerId, ownerDocument) {
  * Get document if it is defined.
  * Used to support SSR/SSG applications.
  */
-export var getDocument = function () {
+export const getDocument = () => {
     return typeof document === 'undefined' ? undefined : document;
 };
 /**
  * Get window if it is defined.
  * Used to support SSR/SSG applications.
  */
-export var getWindow = function () {
+export const getWindow = () => {
     return typeof window === 'undefined' ? undefined : window;
 };

package/esm/core/utils/functions/focusable.js

@@ -2,32 +2,28 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var tabbableElementsSelector = 'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const tabbableElementsSelector = 'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
 /**
  * Return array of tabbable elements in the container.
  */
-export var getTabbableElements = function (container) {
+export const getTabbableElements = (container) => {
     if (!container) {
         return [];
     }
-    var elements = container.querySelectorAll(tabbableElementsSelector);
-    return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') &&
-            !el.classList.contains('iui-disabled') &&
-            el.getAttribute('aria-disabled') !== 'true';
-    });
+    const elements = container.querySelectorAll(tabbableElementsSelector);
+    return Array.from(elements).filter((el) => !el.hasAttribute('disabled') &&
+        !el.classList.contains('iui-disabled') &&
+        el.getAttribute('aria-disabled') !== 'true');
 };
 /**
  * Return array of focusable elements in the container.
  */
-export var getFocusableElements = function (container) {
+export const getFocusableElements = (container) => {
     if (!container) {
         return [];
     }
-    var elements = container.querySelectorAll("".concat(tabbableElementsSelector, ", [tabindex=\"-1\"]"));
-    return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') &&
-            !el.classList.contains('iui-disabled') &&
-            el.getAttribute('aria-disabled') !== 'true';
-    });
+    const elements = container.querySelectorAll(`${tabbableElementsSelector}, [tabindex="-1"]`);
+    return Array.from(elements).filter((el) => !el.hasAttribute('disabled') &&
+        !el.classList.contains('iui-disabled') &&
+        el.getAttribute('aria-disabled') !== 'true');
 };

package/esm/core/utils/functions/numbers.js

@@ -5,17 +5,16 @@
 /**
  * Return input value bounded by specified range.
  */
-export var getBoundedValue = function (val, min, max) {
+export const getBoundedValue = (val, min, max) => {
     return Math.min(max, Math.max(min, val));
 };
 /**
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
-export var getRandomValue = function (length) {
-    if (length === void 0) { length = 21; }
-    var alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    var id = '';
-    for (var i = 0; i < length; i++) {
+export const getRandomValue = (length = 21) => {
+    const alphabet = `_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ`;
+    let id = '';
+    for (let i = 0; i < length; i++) {
         id += alphabet[(Math.random() * 64) | 0];
     }
     return id;

package/esm/core/utils/functions/styles.js

@@ -7,11 +7,11 @@
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in a array `[translateX, translateY]`
  */
-export var getTranslateValues = function (element) {
+export const getTranslateValues = (element) => {
     if (!element) {
         return [];
     }
-    var transformValue = getComputedStyle(element).getPropertyValue('transform');
-    var matrix = new DOMMatrix(transformValue);
+    const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    const matrix = new DOMMatrix(transformValue);
     return [matrix.m41, matrix.m42];
 };

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

@@ -20,24 +20,20 @@ import { useResizeObserver } from './useResizeObserver';
  * ... // do something with width
  * return <div ref={ref}>...</div>;
  */
-export var useContainerWidth = function (watchResizes) {
-    if (watchResizes === void 0) { watchResizes = true; }
-    var _a = React.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
-    var ref = React.useCallback(function (element) {
+export const useContainerWidth = (watchResizes = true) => {
+    const [contentWidth, setContentWidth] = React.useState(0);
+    const ref = React.useCallback((element) => {
         if (!element) {
             return;
         }
         setContentWidth(element.getBoundingClientRect().width);
     }, []);
-    var updateWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setContentWidth(width);
-    }, []);
-    var _b = useResizeObserver(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    const updateWidth = React.useCallback(({ width }) => setContentWidth(width), []);
+    const [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
     if (!watchResizes) {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }
-    var refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+    const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];
 };
 export default useContainerWidth;