@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/cjs/core/utils/color/ColorValue.js

@@ -116,27 +116,24 @@ class ColorValue {
      * This allows component builders to know if they received bad input from user.
      */
     static fromString(val, defaultColorIfNotParsed) {
-        const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr());
+        const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed?.toTbgr());
         return new ColorValue(tbgr, hue);
     }
     /** Create a ColorValue from hue, saturation, lightness values.  */
     static fromHSL(hsl) {
-        var _a;
-        const alpha = (_a = hsl.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = hsl.a ?? 1;
         return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
     }
     /** Create a ColorValue from an RgbColor */
     static fromRGB(rgb) {
-        var _a;
-        const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = rgb.a ?? 1;
         return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
     }
     /**
      * Create a ColorValue from an HsvColor
      */
     static fromHSV(hsv) {
-        var _a;
-        const alpha = (_a = hsv.a) !== null && _a !== void 0 ? _a : 1;
+        const alpha = hsv.a ?? 1;
         const transparency = Math.round((1 - alpha) * 255);
         // Check for simple case first.
         if (!hsv.s || hsv.h === -1) {
@@ -487,33 +484,30 @@ class ColorValue {
     }
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     toRgbString(includeAlpha) {
-        var _a;
         const rgb = this.toRgbColor();
         const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
         if (includeAlpha) {
-            const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
+            const alpha = rgb.a ?? 1;
             return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `rgb(${rgbString})`;
     }
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
     toHslString(includeAlpha) {
-        var _a, _b;
         const hsl = this.toHslColor();
-        const hslString = `${ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
+        const hslString = `${ColorValue.getFormattedColorNumber(this._hue ?? hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
         if (includeAlpha) {
-            const alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
+            const alpha = hsl.a ?? 1;
             return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `hsl(${hslString})`;
     }
     /** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
     toHsvString(includeAlpha) {
-        var _a, _b;
         const hsv = this.toHsvColor();
-        const hsvString = `${(_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h}, ${hsv.s}%, ${hsv.v}%`;
+        const hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
         if (includeAlpha) {
-            const alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
+            const alpha = hsv.a ?? 1;
             return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
         }
         return `hsv(${hsvString})`;

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

@@ -42,10 +42,9 @@ const index_js_1 = require("../functions/index.js");
 const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
     const [maybeText, setMaybeText] = React.useState(text);
     React.useEffect(() => {
-        var _a;
         setMaybeText(text);
-        const timeout = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => setMaybeText(''), 5000);
-        return () => { var _a; return void ((_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(timeout)); };
+        const timeout = (0, index_js_1.getWindow)()?.setTimeout(() => setMaybeText(''), 5000);
+        return () => void (0, index_js_1.getWindow)()?.clearTimeout(timeout);
     }, [text]);
     return (React.createElement(VisuallyHidden_js_1.VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
 };

package/cjs/core/utils/components/Divider.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
 declare type DividerProps = {
     /**

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

@@ -33,7 +33,6 @@ exports.Divider = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 const Box_js_1 = require("./Box.js");
 /**
  * Shows a divider

package/cjs/core/utils/components/Flex.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).

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

@@ -33,7 +33,6 @@ exports.Flex = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 const Box_js_1 = require("./Box.js");
 const sizeTokens = [
     '3xs',

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

@@ -47,19 +47,19 @@ const FocusTrap = (props) => {
     const onFirstFocus = (event) => {
         const [firstElement, lastElement] = getFirstLastFocusables();
         if (event.relatedTarget === firstElement) {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+            lastElement?.focus();
         }
         else {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+            firstElement?.focus();
         }
     };
     const onLastFocus = (event) => {
         const [firstElement, lastElement] = getFirstLastFocusables();
         if (event.relatedTarget === lastElement) {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+            firstElement?.focus();
         }
         else {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+            lastElement?.focus();
         }
     };
     return (React.createElement(React.Fragment, null,

package/cjs/core/utils/components/Icon.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
 export declare type IconProps = {
     /**

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

@@ -33,7 +33,6 @@ exports.Icon = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 const Box_js_1 = require("./Box.js");
 const getSizeValue = (size) => {
     switch (size) {

package/cjs/core/utils/components/InputContainer.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;

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

@@ -33,7 +33,6 @@ exports.InputContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 const Box_js_1 = require("./Box.js");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.

package/cjs/core/utils/components/InputFlexContainer.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/input-container.css';
 export declare type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';

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

@@ -10,7 +10,6 @@ exports.InputFlexContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/input-container.css");
 const Box_js_1 = require("./Box.js");
 /**
  * Utility component for input container with display flex abilities.

package/cjs/core/utils/components/LinkAction.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

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

@@ -5,7 +5,6 @@ exports.LinkBox = exports.LinkAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-require("@itwin/itwinui-css/css/utils.css");
 const polymorphic_js_1 = require("../functions/polymorphic.js");
 /**
  * Polymorphic link action component.

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

@@ -48,7 +48,6 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 const MiddleTextTruncation = (props) => {
-    var _a;
     const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
     const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
     const truncatedText = React.useMemo(() => {
@@ -65,7 +64,7 @@ const MiddleTextTruncation = (props) => {
             flexGrow: 1,
             whiteSpace: 'nowrap',
             ...style,
-        }, ref: ref, ...rest }, (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
+        }, ref: ref, ...rest }, textRenderer?.(truncatedText, text) ?? truncatedText));
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

package/cjs/core/utils/components/Popover.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/utils.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.

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

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("@tippyjs/react"));
 const index_js_1 = require("../hooks/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
@@ -43,7 +42,6 @@ const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
  * @private
  */
 exports.Popover = React.forwardRef((props, ref) => {
-    var _a;
     const [mounted, setMounted] = React.useState(false);
     const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
     const isDomAvailable = (0, index_js_1.useIsClient)();
@@ -60,15 +58,14 @@ exports.Popover = React.forwardRef((props, ref) => {
     const removeTabIndex = {
         fn: () => ({
             onCreate: (instance) => {
-                var _a;
-                (_a = instance.popper.firstElementChild) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
+                instance.popper.firstElementChild?.removeAttribute('tabindex');
             },
         }),
     };
     const computedProps = {
         allowHTML: true,
         animation: false,
-        appendTo: (el) => (themeInfo === null || themeInfo === void 0 ? void 0 : themeInfo.rootRef.current) || el.ownerDocument.body,
+        appendTo: (el) => themeInfo?.portalContainerRef?.current || el.ownerDocument.body,
         arrow: false,
         duration: 0,
         interactive: true,
@@ -93,7 +90,7 @@ exports.Popover = React.forwardRef((props, ref) => {
             modifiers: [
                 { name: 'flip' },
                 { name: 'preventOverflow', options: { padding: 0 } },
-                ...(((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.modifiers) || []),
+                ...(props.popperOptions?.modifiers || []),
             ],
         },
     };
@@ -108,9 +105,8 @@ exports.Popover = React.forwardRef((props, ref) => {
         const clonedContent = React.isValidElement(props.content)
             ? React.cloneElement(props.content, {
                 onClick: (e) => {
-                    var _a, _b;
                     e.stopPropagation();
-                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    props.content.props.onClick?.(e);
                 },
             })
             : props.content;
@@ -127,7 +123,7 @@ exports.hideOnEscOrTab = {
         /** @returns true if none of the children are tabbable */
         const shouldHideOnTab = () => {
             const descendents = Array.from(instance.popper.querySelectorAll('*'));
-            return !descendents.some((el) => (el === null || el === void 0 ? void 0 : el.tabIndex) >= 0);
+            return !descendents.some((el) => el?.tabIndex >= 0);
         };
         const onKeyDown = (event) => {
             if (event.altKey) {

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

@@ -64,17 +64,18 @@ const Resizer = (props) => {
         const originalUserSelect = ownerDocument.body.style.userSelect;
         ownerDocument.body.style.userSelect = 'none';
         const onResizePointerMove = (event) => {
-            var _a, _b, _c, _d, _e, _f, _g;
             if (!elementRef.current) {
                 return;
             }
             if (!isResizing.current) {
                 isResizing.current = true;
-                onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
+                onResizeStart?.();
             }
-            const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const clientX = (0, index_js_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
-            const clientY = (0, index_js_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
+            const containerRect = containerRef?.current?.getBoundingClientRect();
+            const clientX = (0, index_js_1.getBoundedValue)(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
+            const clientY = (0, index_js_1.getBoundedValue)(event.clientY, containerRect?.top ?? 0, containerRect?.bottom ??
+                ownerDocument.documentElement.clientHeight ??
+                0);
             const diffX = initialPointerX - clientX;
             const diffY = initialPointerY - clientY;
             switch (resizer) {
@@ -155,7 +156,7 @@ const Resizer = (props) => {
             if (elementRef.current) {
                 ownerDocument.body.style.userSelect = originalUserSelect;
                 isResizing.current = false;
-                onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
+                onResizeEnd?.({
                     width,
                     height,
                     transform: `translate(${translateX}px, ${translateY}px)`,

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

@@ -22,7 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVirtualization = exports.VirtualScroll = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -32,7 +31,7 @@ exports.useVirtualization = exports.VirtualScroll = void 0;
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const index_js_1 = require("../hooks/index.js");
-const unstable_batchedUpdates = (_a = ReactDOM.unstable_batchedUpdates) !== null && _a !== void 0 ? _a : ((cb) => void cb());
+const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
@@ -49,8 +48,7 @@ const getElementStyle = (element, prop) => {
     return getComputedStyle(element, null).getPropertyValue(prop);
 };
 const getElementHeight = (element) => {
-    var _a;
-    return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+    return element?.getBoundingClientRect().height ?? 0;
 };
 const getElementHeightWithMargins = (element) => {
     if (!element) {
@@ -135,10 +133,8 @@ const useVirtualization = (props) => {
     // Used to mark when scroll container has height (updated by resize observer)
     // because before that calculations are not right
     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;
-    };
+    const getScrollableContainer = () => scrollContainer.current ??
+        parentRef.current?.ownerDocument.scrollingElement;
     const visibleChildren = React.useMemo(() => {
         const arr = [];
         const endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
@@ -148,18 +144,18 @@ const useVirtualization = (props) => {
         return arr;
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
     const updateChildHeight = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
         }
         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);
+        const firstChildHeight = Number(getElementHeightWithMargins(firstChild)?.toFixed(2) ?? 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),
+            middle: Number(getElementHeightWithMargins(secondChild)?.toFixed(2) ??
+                firstChildHeight),
+            last: Number(getElementHeightWithMargins(lastChild)?.toFixed(2) ?? firstChildHeight),
         };
     }, [visibleChildren.length]);
     const onResize = React.useCallback(({ height }) => {
@@ -177,14 +173,13 @@ const useVirtualization = (props) => {
     // Find scrollable parent
     // Needed only on init
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
-        const scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
     (0, index_js_1.useIsomorphicLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
@@ -211,23 +206,21 @@ const useVirtualization = (props) => {
         updateVirtualScroll();
     }, [updateVirtualScroll]);
     const removeScrollListener = React.useCallback(() => {
-        var _a, _b;
         if (!onScrollRef.current) {
             return;
         }
         !scrollContainer.current ||
-            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)
-            ? (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('scroll', onScrollRef.current)
+            scrollContainer.current === parentRef.current?.ownerDocument.body
+            ? parentRef.current?.ownerDocument.removeEventListener('scroll', onScrollRef.current)
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
-            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
-            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', onScroll);
+            scrollContainer.current === parentRef.current?.ownerDocument.body) {
+            parentRef.current?.ownerDocument.addEventListener('scroll', onScroll);
         }
         else {
             scrollContainer.current.addEventListener('scroll', onScroll);

package/cjs/core/utils/components/VisuallyHidden.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
 declare type VisuallyHiddenOwnProps = {
     /**

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

@@ -33,7 +33,6 @@ exports.VisuallyHidden = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 const Box_js_1 = require("./Box.js");
 /**
  * Hides content visually but keeps it still accessible to screen readers

package/cjs/core/utils/functions/dom.d.ts

@@ -22,3 +22,9 @@ export declare const getWindow: () => (Window & typeof globalThis) | undefined;
  * `defaultPrevented` is respected for each callback.
  */
 export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

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

@@ -3,8 +3,12 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+const styles_js_1 = __importDefault(require("../../../styles.js"));
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -13,12 +17,12 @@ exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.g
  * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
  */
 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;
+    let container = ownerDocument?.getElementById(containerId) ?? undefined;
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
-        const root = (_b = ownerDocument.querySelector('.iui-root')) !== null && _b !== void 0 ? _b : ownerDocument.body;
+        const root = ownerDocument.querySelector(`.${styles_js_1.default['iui-root']}`) ??
+            ownerDocument.body;
         root.appendChild(container);
     }
     return container;
@@ -46,10 +50,24 @@ exports.getWindow = getWindow;
  */
 const mergeEventHandlers = (...callbacks) => (event) => {
     for (const cb of callbacks) {
-        cb === null || cb === void 0 ? void 0 : cb(event);
-        if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
+        cb?.(event);
+        if (event?.defaultPrevented) {
             return;
         }
     }
 };
 exports.mergeEventHandlers = mergeEventHandlers;
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+const getTranslateValues = (element) => {
+    if (!element) {
+        return [];
+    }
+    const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    const matrix = new DOMMatrix(transformValue);
+    return [matrix.m41, matrix.m42];
+};
+exports.getTranslateValues = getTranslateValues;

package/cjs/core/utils/functions/index.d.ts

@@ -3,6 +3,5 @@ export * from './dom.js';
 export * from './colors.js';
 export * from './numbers.js';
 export * from './focusable.js';
-export * from './styles.js';
 export * from './supports.js';
 export * from './polymorphic.js';

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

@@ -23,6 +23,5 @@ __exportStar(require("./dom.js"), exports);
 __exportStar(require("./colors.js"), exports);
 __exportStar(require("./numbers.js"), exports);
 __exportStar(require("./focusable.js"), exports);
-__exportStar(require("./styles.js"), exports);
 __exportStar(require("./supports.js"), exports);
 __exportStar(require("./polymorphic.js"), exports);

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

@@ -34,12 +34,13 @@ exports.polymorphic = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useGlobals_js_1 = require("../hooks/useGlobals.js");
+const styles_js_1 = __importDefault(require("../../../styles.js"));
 const _base = (defaultElement) => {
     return (className, attrs) => {
         const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
             const Element = as || 'div'; // eslint-disable-line
             (0, useGlobals_js_1.useGlobals)();
-            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: (0, classnames_1.default)(className, attrs === null || attrs === void 0 ? void 0 : attrs.className, props.className) }));
+            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)) }));
         });
         Comp.displayName = getDisplayNameFromClass(className);
         return Comp;
@@ -79,3 +80,10 @@ const getDisplayNameFromClass = (str) => {
     const camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
     return camel.substring(3);
 };
+// e.g. iui-button -> _iui3-button
+const getScopedClassName = (className = '') => {
+    return (className
+        .split(' ')
+        .map((c) => (c in styles_js_1.default ? styles_js_1.default[c] : c))
+        .join(' ') || null);
+};

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

@@ -9,5 +9,5 @@ const dom_js_1 = require("./dom.js");
 /**
  * Returns true if the :has selector is supported in the browser
  */
-const supportsHas = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, dom_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'selector(:has(+ *))'); };
+const supportsHas = () => (0, dom_js_1.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');
 exports.supportsHas = supportsHas;

package/cjs/core/utils/hooks/index.d.ts

@@ -9,6 +9,5 @@ export * from './useMediaQuery.js';
 export * from './useSafeContext.js';
 export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
-export * from './useIsThemeAlreadySet.js';
 export * from './useIsClient.js';
 export * from './useId.js';

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

@@ -29,6 +29,5 @@ __exportStar(require("./useMediaQuery.js"), exports);
 __exportStar(require("./useSafeContext.js"), exports);
 __exportStar(require("./useLatestRef.js"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect.js"), exports);
-__exportStar(require("./useIsThemeAlreadySet.js"), exports);
 __exportStar(require("./useIsClient.js"), exports);
 __exportStar(require("./useId.js"), exports);

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

@@ -57,7 +57,7 @@ const useContainerWidth = (watchResizes = true) => {
     const updateWidth = React.useCallback(({ width }) => setContentWidth(width), []);
     const [resizeRef, resizeObserver] = (0, useResizeObserver_js_1.useResizeObserver)(updateWidth);
     if (!watchResizes) {
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        resizeObserver?.disconnect();
     }
     const refs = (0, useMergedRefs_js_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];