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

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

@@ -42,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)();
@@ -59,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,
@@ -92,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 || []),
             ],
         },
     };
@@ -107,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;
@@ -126,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/functions/dom.d.ts

@@ -1,12 +1,4 @@
 /// <reference types="react" />
-/**
- * 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.
- *
- * @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 declare const getContainer: (containerId: string, ownerDocument?: Document | undefined) => HTMLElement | undefined;
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.

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

@@ -3,31 +3,8 @@
  * 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.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.
- *
- * @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).
- */
-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);
-        const root = (_b = ownerDocument.querySelector(`.${styles_js_1.default['iui-root']}`)) !== null && _b !== void 0 ? _b : ownerDocument.body;
-        root.appendChild(container);
-    }
-    return container;
-};
-exports.getContainer = getContainer;
+exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = void 0;
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.
@@ -50,8 +27,8 @@ 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;
         }
     }

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

@@ -19,7 +19,7 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
  *
  * @private
  */
-export declare const polymorphic: ((className: string, attrs?: React.SVGProps<SVGSymbolElement> | React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement> | React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement> | React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> | React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement> | React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement> | React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> | React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> | React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement> | React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement> | React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement> | React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement> | React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement> | React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement> | React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> | React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> | React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement> | React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement> | React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement> | React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement> | React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement> | React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement> | React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement> | React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement> | React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> | React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> | React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement> | React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> | React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement> | React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement> | React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> | React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> | React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> | React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> | React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> | React.SVGProps<SVGTextElement> | React.SVGProps<SVGElement> | React.SVGProps<SVGCircleElement> | React.SVGProps<SVGClipPathElement> | React.SVGProps<SVGDefsElement> | React.SVGProps<SVGDescElement> | React.SVGProps<SVGEllipseElement> | React.SVGProps<SVGFEBlendElement> | React.SVGProps<SVGFEColorMatrixElement> | React.SVGProps<SVGFEComponentTransferElement> | React.SVGProps<SVGFECompositeElement> | React.SVGProps<SVGFEConvolveMatrixElement> | React.SVGProps<SVGFEDiffuseLightingElement> | React.SVGProps<SVGFEDisplacementMapElement> | React.SVGProps<SVGFEDistantLightElement> | React.SVGProps<SVGFEDropShadowElement> | React.SVGProps<SVGFEFloodElement> | React.SVGProps<SVGFEFuncAElement> | React.SVGProps<SVGFEFuncBElement> | React.SVGProps<SVGFEFuncGElement> | React.SVGProps<SVGFEFuncRElement> | React.SVGProps<SVGFEGaussianBlurElement> | React.SVGProps<SVGFEImageElement> | React.SVGProps<SVGFEMergeElement> | React.SVGProps<SVGFEMergeNodeElement> | React.SVGProps<SVGFEMorphologyElement> | React.SVGProps<SVGFEOffsetElement> | React.SVGProps<SVGFEPointLightElement> | React.SVGProps<SVGFESpecularLightingElement> | React.SVGProps<SVGFESpotLightElement> | React.SVGProps<SVGFETileElement> | React.SVGProps<SVGFETurbulenceElement> | React.SVGProps<SVGFilterElement> | React.SVGProps<SVGForeignObjectElement> | React.SVGProps<SVGGElement> | React.SVGProps<SVGImageElement> | React.SVGProps<SVGLineElement> | React.SVGProps<SVGLinearGradientElement> | React.SVGProps<SVGMarkerElement> | React.SVGProps<SVGMaskElement> | React.SVGProps<SVGMetadataElement> | React.SVGProps<SVGPathElement> | React.SVGProps<SVGPatternElement> | React.SVGProps<SVGPolygonElement> | React.SVGProps<SVGPolylineElement> | React.SVGProps<SVGRadialGradientElement> | React.SVGProps<SVGRectElement> | React.SVGProps<SVGStopElement> | React.SVGProps<SVGSVGElement> | React.SVGProps<SVGSwitchElement> | React.SVGProps<SVGTextPathElement> | React.SVGProps<SVGTSpanElement> | React.SVGProps<SVGUseElement> | React.SVGProps<SVGViewElement> | React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement> | undefined) => PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>) & {
+export declare const polymorphic: ((className: string, attrs?: React.SVGProps<SVGSymbolElement> | React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement> | React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement> | React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> | React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement> | React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement> | React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> | React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> | React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement> | React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement> | React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement> | React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement> | React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement> | React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement> | React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> | React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> | React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement> | React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement> | React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement> | React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement> | React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement> | React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement> | React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement> | React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement> | React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> | React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> | React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement> | React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> | React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement> | React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement> | React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> | React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> | React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> | React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> | React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> | React.SVGProps<SVGElement> | React.SVGProps<SVGCircleElement> | React.SVGProps<SVGClipPathElement> | React.SVGProps<SVGDefsElement> | React.SVGProps<SVGDescElement> | React.SVGProps<SVGEllipseElement> | React.SVGProps<SVGFEBlendElement> | React.SVGProps<SVGFEColorMatrixElement> | React.SVGProps<SVGFEComponentTransferElement> | React.SVGProps<SVGFECompositeElement> | React.SVGProps<SVGFEConvolveMatrixElement> | React.SVGProps<SVGFEDiffuseLightingElement> | React.SVGProps<SVGFEDisplacementMapElement> | React.SVGProps<SVGFEDistantLightElement> | React.SVGProps<SVGFEDropShadowElement> | React.SVGProps<SVGFEFloodElement> | React.SVGProps<SVGFEFuncAElement> | React.SVGProps<SVGFEFuncBElement> | React.SVGProps<SVGFEFuncGElement> | React.SVGProps<SVGFEFuncRElement> | React.SVGProps<SVGFEGaussianBlurElement> | React.SVGProps<SVGFEImageElement> | React.SVGProps<SVGFEMergeElement> | React.SVGProps<SVGFEMergeNodeElement> | React.SVGProps<SVGFEMorphologyElement> | React.SVGProps<SVGFEOffsetElement> | React.SVGProps<SVGFEPointLightElement> | React.SVGProps<SVGFESpecularLightingElement> | React.SVGProps<SVGFESpotLightElement> | React.SVGProps<SVGFETileElement> | React.SVGProps<SVGFETurbulenceElement> | React.SVGProps<SVGFilterElement> | React.SVGProps<SVGForeignObjectElement> | React.SVGProps<SVGGElement> | React.SVGProps<SVGImageElement> | React.SVGProps<SVGLineElement> | React.SVGProps<SVGLinearGradientElement> | React.SVGProps<SVGMarkerElement> | React.SVGProps<SVGMaskElement> | React.SVGProps<SVGMetadataElement> | React.SVGProps<SVGPathElement> | React.SVGProps<SVGPatternElement> | React.SVGProps<SVGPolygonElement> | React.SVGProps<SVGPolylineElement> | React.SVGProps<SVGRadialGradientElement> | React.SVGProps<SVGRectElement> | React.SVGProps<SVGStopElement> | React.SVGProps<SVGSVGElement> | React.SVGProps<SVGSwitchElement> | React.SVGProps<SVGTextElement> | React.SVGProps<SVGTextPathElement> | React.SVGProps<SVGTSpanElement> | React.SVGProps<SVGUseElement> | React.SVGProps<SVGViewElement> | React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement> | undefined) => PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>) & {
     a: (className: string, attrs?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | undefined) => PolymorphicForwardRefComponent<"a", {}>;
     abbr: (className: string, attrs?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined) => PolymorphicForwardRefComponent<"abbr", {}>;
     address: (className: string, attrs?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined) => PolymorphicForwardRefComponent<"address", {}>;

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

@@ -40,7 +40,7 @@ const _base = (defaultElement) => {
         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: getScopedClassName((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;

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];

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

@@ -33,13 +33,12 @@ const index_js_1 = require("../functions/index.js");
 const useEventListener_js_1 = require("./useEventListener.js");
 const useResizeObserver_js_1 = require("./useResizeObserver.js");
 const getContainerRect = (containerRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const containerRect = containerRef?.current?.getBoundingClientRect();
     return {
-        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
-        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = (0, index_js_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
-        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = (0, index_js_1.getWindow)()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
-        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
+        top: containerRect?.top ?? 0,
+        right: containerRect?.right ?? (0, index_js_1.getWindow)()?.innerWidth ?? 0,
+        bottom: containerRect?.bottom ?? (0, index_js_1.getWindow)()?.innerHeight ?? 0,
+        left: containerRect?.left ?? 0,
     };
 };
 /**
@@ -57,11 +56,10 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     const translateY = React.useRef();
     const containerRectRef = React.useRef(getContainerRect(containerRef));
     const adjustTransform = React.useCallback(() => {
-        var _a;
         if (!elementRef.current || !enabled) {
             return;
         }
-        const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
         let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
@@ -81,10 +79,10 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
     }, [containerRef, elementRef, enabled]);
     const [resizeRef, resizeObserver] = (0, useResizeObserver_js_1.useResizeObserver)(adjustTransform);
-    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
+    resizeRef(containerRef?.current);
     React.useEffect(() => {
         return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            resizeObserver?.disconnect();
         };
     }, [resizeObserver]);
     (0, useEventListener_js_1.useEventListener)('resize', () => {

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

@@ -51,7 +51,7 @@ const useEventListener = (eventName, handler, element) => {
         if (!element) {
             return;
         }
-        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
+        const eventListener = (event) => savedHandler.current?.(event);
         element.addEventListener(eventName, eventListener);
         return () => {
             element.removeEventListener(eventName, eventListener);

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

@@ -1,8 +1,15 @@
+import * as React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
-export declare const useGlobals: () => void;
+export declare const useGlobals: () => {
+    theme?: import("../../index.js").ThemeType | undefined;
+    themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
+    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+} | undefined;
 /** Shows console error if ThemeProvider is not used */
-export declare const useThemeProviderWarning: () => void;
+export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

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

@@ -35,25 +35,27 @@ let isDev = false;
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const didLogWarning = {
     fontSize: false,
     themeProvider: false,
 };
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
 const useGlobals = () => {
-    (0, exports.useThemeProviderWarning)();
+    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
+    (0, exports.useThemeProviderWarning)(themeContext);
     useRootFontSizeWarning();
+    return themeContext;
 };
 exports.useGlobals = useGlobals;
 // ----------------------------------------------------------------------------
 /** Shows console error if ThemeProvider is not used */
-const useThemeProviderWarning = () => {
-    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
+const useThemeProviderWarning = (themeContext) => {
     React.useEffect(() => {
         if (isDev && !didLogWarning.themeProvider && !themeContext) {
             console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');

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

@@ -26,7 +26,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useId = void 0;
 const React = __importStar(require("react"));
@@ -43,4 +42,4 @@ exports.useId = useId;
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));
+const useUniqueValue = _React.useId ?? (() => (0, numbers_js_1.getRandomValue)(10));

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

@@ -46,10 +46,9 @@ const useIntersection = (onIntersect, options = {}, once = true) => {
     const { root, rootMargin, threshold } = options;
     const cleanupRef = React.useRef(() => { });
     const setRef = React.useCallback((node) => {
-        var _a, _b;
-        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        cleanupRef.current?.();
         cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
-        if (!node || !((_b = (0, dom_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
+        if (!node || !(0, dom_js_1.getWindow)()?.IntersectionObserver) {
             return;
         }
         const observer = new IntersectionObserver(([entry], obs) => {

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

@@ -34,27 +34,25 @@ const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js")
 const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
     (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a, _b, _c;
-        const mediaQueryList = (_b = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
             setMatches(mediaQueryList.matches);
             try {
                 mediaQueryList.addEventListener('change', handleChange);
             }
-            catch (_d) {
+            catch {
                 // Safari 13 fallback
-                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+                mediaQueryList.addListener?.(handleChange);
             }
         }
         return () => {
-            var _a;
             try {
-                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+                mediaQueryList?.removeEventListener('change', handleChange);
             }
-            catch (_b) {
+            catch {
                 // Safari 13 fallback
-                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+                mediaQueryList?.removeListener?.(handleChange);
             }
         };
     }, [queryString]);

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

@@ -75,9 +75,8 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
     (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
         if (!containerRef.current || disabled) {
-            (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            resizeObserverRef.current?.disconnect();
             return;
         }
         const dimension = orientation === 'horizontal' ? 'Width' : 'Height';

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

@@ -45,14 +45,13 @@ const dom_js_1 = require("../functions/dom.js");
 const useResizeObserver = (onResize) => {
     const resizeObserver = React.useRef();
     const elementRef = React.useCallback((element) => {
-        var _a, _b, _c;
-        if (!((_a = (0, dom_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
+        if (!(0, dom_js_1.getWindow)()?.ResizeObserver) {
             return;
         }
-        (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+        resizeObserver.current?.disconnect();
         if (element) {
             resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
-            (_c = resizeObserver.current) === null || _c === void 0 ? void 0 : _c.observe(element);
+            resizeObserver.current?.observe(element);
         }
     }, [onResize]);
     return [elementRef, resizeObserver.current];

package/cjs/styles.js

@@ -6,10 +6,8 @@ const styles = {
   "iui-root-background": "_iui3-root-background",
   "iui-alert": "_iui3-alert",
   "iui-alert-link": "_iui3-alert-link",
-  "iui-alert-button": "_iui3-alert-button",
-  "iui-alert-icon": "_iui3-alert-icon",
+  "iui-button": "_iui3-button",
   "iui-alert-message": "_iui3-alert-message",
-  "iui-alert-button-icon": "_iui3-alert-button-icon",
   "iui-anchor": "_iui3-anchor",
   "iui-anchor-external": "_iui3-anchor-external",
   "iui-avatar": "_iui3-avatar",
@@ -38,7 +36,6 @@ const styles = {
   "iui-breadcrumbs-list": "_iui3-breadcrumbs-list",
   "iui-breadcrumbs-item": "_iui3-breadcrumbs-item",
   "iui-breadcrumbs-item-overrides": "_iui3-breadcrumbs-item-overrides",
-  "iui-button": "_iui3-button",
   "iui-breadcrumbs-text": "_iui3-breadcrumbs-text",
   "iui-breadcrumbs-button": "_iui3-breadcrumbs-button",
   "iui-breadcrumbs-separator": "_iui3-breadcrumbs-separator",