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

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

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,11 +8,10 @@ exports.useVirtualization = exports.VirtualScroll = 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 hooks_1 = require("../hooks");
-var useResizeObserver_1 = require("../hooks/useResizeObserver");
-var getScrollableParent = function (element, ownerDocument) {
-    if (ownerDocument === void 0) { ownerDocument = document; }
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const useResizeObserver_1 = require("../hooks/useResizeObserver");
+const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
     }
@@ -42,38 +19,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)));
 };
 /**
@@ -97,10 +74,10 @@ var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scr
  * />
  * @private
  */
-exports.VirtualScroll = react_1.default.forwardRef(function (props, ref) {
-    var _a = (0, exports.useVirtualization)(props), innerProps = _a.innerProps, outerProps = _a.outerProps, visibleChildren = _a.visibleChildren;
-    return (react_1.default.createElement("div", __assign({}, outerProps, { ref: ref }),
-        react_1.default.createElement("div", __assign({}, innerProps), visibleChildren)));
+exports.VirtualScroll = react_1.default.forwardRef((props, ref) => {
+    const { innerProps, outerProps, visibleChildren } = (0, exports.useVirtualization)(props);
+    return (react_1.default.createElement("div", { ...outerProps, ref: ref },
+        react_1.default.createElement("div", { ...innerProps }, visibleChildren)));
 });
 /**
  * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
@@ -122,49 +99,48 @@ exports.VirtualScroll = react_1.default.forwardRef(function (props, ref) {
  * );
  * @private
  */
-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_1.default.useState(0), startNode = _b[0], setStartNode = _b[1];
-    var _c = react_1.default.useState(0), visibleNodeCount = _c[0], setVisibleNodeCount = _c[1];
-    var scrollContainer = react_1.default.useRef();
-    var parentRef = react_1.default.useRef(null);
-    var childHeight = react_1.default.useRef({ first: 0, middle: 0, last: 0 });
-    var onScrollRef = react_1.default.useRef();
+const useVirtualization = (props) => {
+    const { itemsLength, itemRenderer, bufferSize = 10, scrollToIndex, style, ...rest } = props;
+    const [startNode, setStartNode] = react_1.default.useState(0);
+    const [visibleNodeCount, setVisibleNodeCount] = react_1.default.useState(0);
+    const scrollContainer = react_1.default.useRef();
+    const parentRef = react_1.default.useRef(null);
+    const childHeight = react_1.default.useRef({ first: 0, middle: 0, last: 0 });
+    const onScrollRef = react_1.default.useRef();
     // Used only to recalculate on resize
-    var _d = react_1.default.useState(0), scrollContainerHeight = _d[0], setScrollContainerHeight = _d[1];
-    var visibleIndex = react_1.default.useRef({ start: 0, end: 0 });
+    const [scrollContainerHeight, setScrollContainerHeight] = react_1.default.useState(0);
+    const visibleIndex = react_1.default.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_1.default.useState(false), isMounted = _e[0], setIsMounted = _e[1];
-    var getScrollableContainer = function () {
+    const [isMounted, setIsMounted] = react_1.default.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_1.default.useMemo(function () {
-        var arr = [];
-        var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
-        for (var i = startNode; i < endIndex; i++) {
+    const visibleChildren = react_1.default.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_1.default.useCallback(function () {
+    const updateChildHeight = react_1.default.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_1.default.useCallback(function (_a) {
-        var height = _a.height;
+    const onResize = react_1.default.useCallback(({ height }) => {
         // Initial value returned by resize observer is 0
         // So wait for the next one
         if (height > 0) {
@@ -173,44 +149,44 @@ var useVirtualization = function (props) {
         setScrollContainerHeight(height);
         updateChildHeight();
     }, [updateChildHeight]);
-    var _f = (0, useResizeObserver_1.useResizeObserver)(onResize), resizeRef = _f[0], resizeObserver = _f[1];
+    const [resizeRef, resizeObserver] = (0, useResizeObserver_1.useResizeObserver)(onResize);
     // Find scrollable parent
     // Needed only on init
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.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_1.default.useLayoutEffect(function () {
-        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
+    react_1.default.useLayoutEffect(() => {
+        return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    react_1.default.useLayoutEffect(function () { return updateChildHeight(); }, [updateChildHeight]);
-    var updateVirtualScroll = react_1.default.useCallback(function () {
-        var scrollableContainer = getScrollableContainer();
+    react_1.default.useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    const updateVirtualScroll = react_1.default.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_1.default.useCallback(function () {
+    const onScroll = react_1.default.useCallback(() => {
         updateVirtualScroll();
     }, [updateVirtualScroll]);
-    var removeScrollListener = react_1.default.useCallback(function () {
+    const removeScrollListener = react_1.default.useCallback(() => {
         var _a, _b;
         if (!onScrollRef.current) {
             return;
@@ -221,7 +197,7 @@ var useVirtualization = function (props) {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
@@ -234,18 +210,18 @@ var useVirtualization = function (props) {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.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) {
@@ -264,8 +240,8 @@ 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,
@@ -275,10 +251,10 @@ 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,
@@ -286,23 +262,30 @@ var useVirtualization = function (props) {
             }
         }
     }, [scrollToIndex, isMounted]);
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.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: (0, hooks_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
         },
-        visibleChildren: visibleChildren,
+        visibleChildren,
     };
 };
 exports.useVirtualization = useVirtualization;

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

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,16 +8,16 @@ exports.VisuallyHidden = 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 classnames_1 = __importDefault(require("classnames"));
-var hooks_1 = require("../hooks");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../hooks");
 require("@itwin/itwinui-css/css/utils.css");
 /**
  * Hides content visually but is still accessible to screen readers.
  */
-exports.VisuallyHidden = react_1.default.forwardRef(function (props, ref) {
-    var className = props.className, rest = __rest(props, ["className"]);
+exports.VisuallyHidden = react_1.default.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
     (0, hooks_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-visually-hidden', className), ref: ref }, rest)));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-visually-hidden', className), ref: ref, ...rest }));
 });
 exports.default = exports.VisuallyHidden;

package/cjs/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/cjs/core/utils/components/WithCSSTransition.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,27 +8,27 @@ exports.WithCSSTransition = 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 react_transition_group_1 = require("react-transition-group");
-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_1.default.useRef(0);
-    var dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
-    return (react_1.default.createElement(react_transition_group_1.CSSTransition, __assign({ in: visible, timeout: 200, unmountOnExit: true, onEnter: function (node) {
-            node.style["min".concat(dimensionCamelCase)] = 'initial';
+const react_1 = __importDefault(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const WithCSSTransition = (props) => {
+    const { in: visible, dimension = 'height', children, ...rest } = props;
+    const expandedSize = react_1.default.useRef(0);
+    const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
+    return (react_1.default.createElement(react_transition_group_1.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_1.default.cloneElement(children, {
-        ref: function (el) {
+        }, classNames: 'iui', ...rest }, react_1.default.cloneElement(children, {
+        ref: (el) => {
             if (el) {
                 expandedSize.current = el.getBoundingClientRect()[dimension];
             }

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

@@ -19,11 +19,11 @@ exports.SoftBackgrounds = {
     oak: 'var(--iui-color-background-oak)',
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
-var isSoftBackground = function (value) {
+const isSoftBackground = (value) => {
     return Object.keys(exports.SoftBackgrounds).includes(value);
 };
 exports.isSoftBackground = isSoftBackground;
-var USER_COLORS = [
+const USER_COLORS = [
     '#6AB9EC',
     '#B1C854',
     '#F7706C',
@@ -40,11 +40,11 @@ var USER_COLORS = [
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.
  */
-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);
+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/cjs/core/utils/functions/dom.js

@@ -12,15 +12,14 @@ exports.getWindow = exports.getDocument = exports.getContainer = void 0;
  * @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).
  */
-var getContainer = function (containerId, ownerDocument) {
-    var _a;
-    if (ownerDocument === void 0) { ownerDocument = (0, exports.getDocument)(); }
-    var container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
+const getContainer = (containerId, ownerDocument = (0, exports.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;
 };
@@ -29,7 +28,7 @@ exports.getContainer = getContainer;
  * Get document if it is defined.
  * Used to support SSR/SSG applications.
  */
-var getDocument = function () {
+const getDocument = () => {
     return typeof document === 'undefined' ? undefined : document;
 };
 exports.getDocument = getDocument;
@@ -37,7 +36,7 @@ exports.getDocument = getDocument;
  * Get window if it is defined.
  * Used to support SSR/SSG applications.
  */
-var getWindow = function () {
+const getWindow = () => {
     return typeof window === 'undefined' ? undefined : window;
 };
 exports.getWindow = getWindow;

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

@@ -5,34 +5,30 @@
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFocusableElements = exports.getTabbableElements = void 0;
-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.
  */
-var getTabbableElements = function (container) {
+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');
 };
 exports.getTabbableElements = getTabbableElements;
 /**
  * Return array of focusable elements in the container.
  */
-var getFocusableElements = function (container) {
+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');
 };
 exports.getFocusableElements = getFocusableElements;

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

@@ -8,18 +8,17 @@ exports.getRandomValue = exports.getBoundedValue = void 0;
 /**
  * Return input value bounded by specified range.
  */
-var getBoundedValue = function (val, min, max) {
+const getBoundedValue = (val, min, max) => {
     return Math.min(max, Math.max(min, val));
 };
 exports.getBoundedValue = getBoundedValue;
 /**
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
-var getRandomValue = function (length) {
-    if (length === void 0) { length = 21; }
-    var alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    var id = '';
-    for (var i = 0; i < length; i++) {
+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/cjs/core/utils/functions/styles.js

@@ -10,12 +10,12 @@ exports.getTranslateValues = void 0;
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in a array `[translateX, translateY]`
  */
-var getTranslateValues = function (element) {
+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];
 };
 exports.getTranslateValues = getTranslateValues;