@itwin/itwinui-react 3.17.4 → 3.18.0

package/DEV-cjs/core/Tile/Tile.js

@@ -20,7 +20,8 @@ const _IconButton = require('../Buttons/IconButton.js');
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _LinkAction = require('../LinkAction/LinkAction.js');
 const TileContext = _react.createContext(void 0);
-TileContext.displayName = 'TileContext';
+if ('development' === process.env.NODE_ENV)
+  TileContext.displayName = 'TileContext';
 const TileWrapper = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -67,7 +68,8 @@ const TileWrapper = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-TileWrapper.displayName = 'Tile.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  TileWrapper.displayName = 'Tile.Wrapper';
 const TileAction = _react.forwardRef((props, forwardedRef) => {
   let { onClick, children, href, ...rest } = props;
   let { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
@@ -87,9 +89,11 @@ const TileAction = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileAction.displayName = 'Tile.Action';
+if ('development' === process.env.NODE_ENV)
+  TileAction.displayName = 'Tile.Action';
 const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
-TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -114,15 +118,18 @@ const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 const TileQuickAction = _index.polymorphic.div(
   'iui-tile-thumbnail-quick-action',
 );
-TileQuickAction.displayName = 'Tile.QuickAction';
+if ('development' === process.env.NODE_ENV)
+  TileQuickAction.displayName = 'Tile.QuickAction';
 const TileTypeIndicator = _index.polymorphic.div(
   'iui-tile-thumbnail-type-indicator',
 );
-TileTypeIndicator.displayName = 'Tile.TypeIndicator';
+if ('development' === process.env.NODE_ENV)
+  TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 const TileIconButton = _react.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -140,11 +147,13 @@ const TileIconButton = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-TileIconButton.displayName = 'Tile.IconButton';
+if ('development' === process.env.NODE_ENV)
+  TileIconButton.displayName = 'Tile.IconButton';
 const TileBadgeContainer = _index.polymorphic.div(
   'iui-tile-thumbnail-badge-container',
 );
-TileBadgeContainer.displayName = 'Tile.BadgeContainer';
+if ('development' === process.env.NODE_ENV)
+  TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 const TileName = _react.forwardRef((props, forwardedRef) => {
   let { className, children, name, ...rest } = props;
   return _react.createElement(
@@ -154,10 +163,11 @@ const TileName = _react.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       ...rest,
     },
-    children ?? name,
+    children ?? _react.createElement(Tile.NameLabel, null, name),
   );
 });
-TileBadgeContainer.displayName = 'Tile.Name';
+if ('development' === process.env.NODE_ENV)
+  TileBadgeContainer.displayName = 'Tile.Name';
 const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
   let { children, className, ...rest } = props;
   let { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(
@@ -198,59 +208,61 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
       )
     : null;
 });
-TileNameIcon.displayName = 'Tile.NameIcon';
+if ('development' === process.env.NODE_ENV)
+  TileNameIcon.displayName = 'Tile.NameIcon';
 const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
-TileNameLabel.displayName = 'Tile.NameLabel';
+if ('development' === process.env.NODE_ENV)
+  TileNameLabel.displayName = 'Tile.NameLabel';
 const TileContentArea = _index.polymorphic.div('iui-tile-content');
-TileContentArea.displayName = 'Tile.ContentArea';
+if ('development' === process.env.NODE_ENV)
+  TileContentArea.displayName = 'Tile.ContentArea';
 const TileDescription = _index.polymorphic.div('iui-tile-description');
-TileDescription.displayName = 'Tile.Description';
+if ('development' === process.env.NODE_ENV)
+  TileDescription.displayName = 'Tile.Description';
 const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
-TileMetadata.displayName = 'Tile.Metadata';
+if ('development' === process.env.NODE_ENV)
+  TileMetadata.displayName = 'Tile.Metadata';
 const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
   return _react.createElement(
-    _DropdownMenu.DropdownMenuCloseOnClickContext.Provider,
+    _index.Box,
     {
-      value: true,
+      className: (0, _classnames.default)(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     _react.createElement(
-      _index.Box,
+      _DropdownMenu.DropdownMenu,
       {
-        className: (0, _classnames.default)(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: children,
+        closeOnItemClick: true,
       },
       _react.createElement(
-        _DropdownMenu.DropdownMenu,
+        _IconButton.IconButton,
         {
-          onVisibleChange: setIsMenuVisible,
-          menuItems: children,
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
         },
-        _react.createElement(
-          _IconButton.IconButton,
-          {
-            styleType: 'borderless',
-            size: 'small',
-            'aria-label': 'More options',
-            ...buttonProps,
-          },
-          _react.createElement(_index.SvgMore, null),
-        ),
+        _react.createElement(_index.SvgMore, null),
       ),
     ),
   );
 });
-TileMoreOptions.displayName = 'Tile.MoreOptions';
+if ('development' === process.env.NODE_ENV)
+  TileMoreOptions.displayName = 'Tile.MoreOptions';
 const TileButtons = _index.polymorphic.div('iui-tile-buttons');
-TileButtons.displayName = 'Tile.Buttons';
+if ('development' === process.env.NODE_ENV)
+  TileButtons.displayName = 'Tile.Buttons';
 const TileComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     name,
@@ -327,7 +339,7 @@ const TileComponent = _react.forwardRef((props, forwardedRef) => {
     buttons && _react.createElement(TileButtons, null, buttons),
   );
 });
-TileComponent.displayName = 'Tile';
+if ('development' === process.env.NODE_ENV) TileComponent.displayName = 'Tile';
 const Tile = Object.assign(TileComponent, {
   Wrapper: TileWrapper,
   ThumbnailArea: TileThumbnailArea,

package/DEV-cjs/core/TimePicker/TimePicker.js

@@ -377,7 +377,8 @@ const TimePicker = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-TimePicker.displayName = 'TimePicker';
+if ('development' === process.env.NODE_ENV)
+  TimePicker.displayName = 'TimePicker';
 const TimePickerColumn = (props) => {
   let {
     data,

package/DEV-cjs/core/Toast/Toaster.js

@@ -161,9 +161,11 @@ const toastReducer = (state, action) => {
   return state;
 };
 const ToasterStateContext = _react.createContext(void 0);
-ToasterStateContext.displayName = 'ToasterStateContext';
+if ('development' === process.env.NODE_ENV)
+  ToasterStateContext.displayName = 'ToasterStateContext';
 const ToasterDispatchContext = _react.createContext(void 0);
-ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+if ('development' === process.env.NODE_ENV)
+  ToasterDispatchContext.displayName = 'ToasterDispatchContext';
 const nextId = (() => {
   let count = 0;
   return () => ++count;

package/DEV-cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -79,4 +79,5 @@ const ToggleSwitch = _react.forwardRef((props, ref) => {
       ),
   );
 });
-ToggleSwitch.displayName = 'ToggleSwitch';
+if ('development' === process.env.NODE_ENV)
+  ToggleSwitch.displayName = 'ToggleSwitch';

package/DEV-cjs/core/Tooltip/Tooltip.js

@@ -240,4 +240,4 @@ const Tooltip = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-Tooltip.displayName = 'Tooltip';
+if ('development' === process.env.NODE_ENV) Tooltip.displayName = 'Tooltip';

package/DEV-cjs/core/TransferList/TransferList.js

@@ -31,7 +31,8 @@ const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
-TransferListComponent.displayName = 'TransferList';
+if ('development' === process.env.NODE_ENV)
+  TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let uid = (0, _index.useId)();
@@ -59,7 +60,8 @@ const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
-TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { labelId } = (0, _index.useSafeContext)(TransferListContext);
@@ -74,10 +76,7 @@ const TransferListListbox = _react.forwardRef((props, ref) => {
   }, []);
   _react.useEffect(() => {
     let items = getFocusableNodes();
-    if (null != focusedIndex) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
+    if (null != focusedIndex) return void items?.[focusedIndex]?.focus();
   }, [focusedIndex, getFocusableNodes]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
@@ -117,7 +116,8 @@ const TransferListListbox = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListbox.displayName = 'TransferList.Listbox';
+if ('development' === process.env.NODE_ENV)
+  TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = _react.forwardRef((props, ref) => {
   let {
     actionable = true,
@@ -158,7 +158,8 @@ const TransferListItem = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListItem.displayName = 'TransferList.Item';
+if ('development' === process.env.NODE_ENV)
+  TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = _react.forwardRef((props, ref) => {
   let { children, id, ...rest } = props;
   let { labelId, setLabelId } = (0, _index.useSafeContext)(TransferListContext);
@@ -176,7 +177,8 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 const TransferListToolbar = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -194,7 +196,8 @@ const TransferListToolbar = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListToolbar.displayName = 'TransferList.Toolbar';
+if ('development' === process.env.NODE_ENV)
+  TransferListToolbar.displayName = 'TransferList.Toolbar';
 const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,
@@ -203,4 +206,5 @@ const TransferList = Object.assign(TransferListComponent, {
   Toolbar: TransferListToolbar,
 });
 const TransferListContext = _react.createContext(void 0);
-TransferListContext.displayName = 'TransferListContext';
+if ('development' === process.env.NODE_ENV)
+  TransferListContext.displayName = 'TransferListContext';

package/DEV-cjs/core/Tree/Tree.js

@@ -189,7 +189,7 @@ const Tree = (props) => {
         ),
   );
 };
-Tree.displayName = 'Tree';
+if ('development' === process.env.NODE_ENV) Tree.displayName = 'Tree';
 const TreeElement = _index.polymorphic.div('iui-tree', {
   role: 'tree',
   tabIndex: 0,

package/DEV-cjs/core/Tree/TreeNode.js

@@ -263,4 +263,4 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-TreeNode.displayName = 'TreeNode';
+if ('development' === process.env.NODE_ENV) TreeNode.displayName = 'TreeNode';

package/DEV-cjs/core/Tree/TreeNodeExpander.js

@@ -43,4 +43,5 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
     }),
   );
 });
-TreeNodeExpander.displayName = 'TreeNode.Expander';
+if ('development' === process.env.NODE_ENV)
+  TreeNodeExpander.displayName = 'TreeNode.Expander';

package/DEV-cjs/core/Typography/Anchor.js

@@ -44,4 +44,4 @@ const Anchor = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-Anchor.displayName = 'Anchor';
+if ('development' === process.env.NODE_ENV) Anchor.displayName = 'Anchor';

package/DEV-cjs/core/Typography/Blockquote.js

@@ -29,4 +29,5 @@ const Blockquote = _react.forwardRef((props, ref) => {
     footer && _react.createElement('footer', null, footer),
   );
 });
-Blockquote.displayName = 'Blockquote';
+if ('development' === process.env.NODE_ENV)
+  Blockquote.displayName = 'Blockquote';

package/DEV-cjs/core/Typography/Code.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, 'Code', {
 });
 const _index = require('../../utils/index.js');
 const Code = _index.polymorphic.code('iui-code');
-Code.displayName = 'Code';
+if ('development' === process.env.NODE_ENV) Code.displayName = 'Code';

package/DEV-cjs/core/Typography/Kbd.js

@@ -52,4 +52,4 @@ const Kbd = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-Kbd.displayName = 'Kbd';
+if ('development' === process.env.NODE_ENV) Kbd.displayName = 'Kbd';

package/DEV-cjs/core/Typography/Text.js

@@ -52,5 +52,5 @@ const Text = _react.forwardRef((props, ref) => {
     }),
   );
 });
-Text.displayName = 'Text';
+if ('development' === process.env.NODE_ENV) Text.displayName = 'Text';
 const TextContext = _react.createContext(false);

package/DEV-cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -50,7 +50,8 @@ const VisuallyHidden = _react.forwardRef((props, ref) => {
     children,
   );
 });
-VisuallyHidden.displayName = 'VisuallyHidden';
+if ('development' === process.env.NODE_ENV)
+  VisuallyHidden.displayName = 'VisuallyHidden';
 const css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
     clip-path: inset(50%) !important;

package/DEV-cjs/index.js

@@ -374,6 +374,9 @@ _export(exports, {
   unstable_Panels: function () {
     return _Panels.Panels;
   },
+  unstable_TabsPresentation: function () {
+    return _Tabs.unstable_TabsPresentation;
+  },
   useToaster: function () {
     return _Toaster.useToaster;
   },

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.17.4';
+const e = '3.18.0';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/components/AutoclearingHiddenLiveRegion.js

@@ -12,7 +12,7 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _VisuallyHidden = require('../../core/VisuallyHidden/VisuallyHidden.js');
 const _index = require('../functions/index.js');
-const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
+const AutoclearingHiddenLiveRegion = ({ text, ...props }) => {
   let [maybeText, setMaybeText] = _react.useState(text);
   _react.useEffect(() => {
     setMaybeText(text);
@@ -28,6 +28,7 @@ const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
       as: 'div',
       'aria-live': 'polite',
       'aria-atomic': 'true',
+      ...props,
     },
     maybeText,
   );

package/DEV-cjs/utils/components/ButtonBase.js

@@ -46,4 +46,5 @@ const ButtonBase = _react.forwardRef((props, forwardedRef) => {
     onPointerUp: handleIfEnabled(props.onPointerUp),
   });
 });
-ButtonBase.displayName = 'ButtonBase';
+if ('development' === process.env.NODE_ENV)
+  ButtonBase.displayName = 'ButtonBase';

package/DEV-cjs/utils/components/InputWithIcon.js

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'InputWithIcon', {
 });
 const _polymorphic = require('../functions/polymorphic.js');
 const InputWithIcon = _polymorphic.polymorphic.div('iui-input-with-icon');
-InputWithIcon.displayName = 'InputWithIcon';
+if ('development' === process.env.NODE_ENV)
+  InputWithIcon.displayName = 'InputWithIcon';

package/DEV-cjs/utils/components/LineClamp.js

@@ -8,8 +8,12 @@ Object.defineProperty(exports, 'LineClamp', {
     return LineClamp;
   },
 });
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _Box = require('./Box.js');
 const _ShadowRoot = require('./ShadowRoot.js');
 const LineClamp = _react.forwardRef((props, forwardedRef) => {
@@ -19,6 +23,7 @@ const LineClamp = _react.forwardRef((props, forwardedRef) => {
     {
       ref: forwardedRef,
       ...rest,
+      className: (0, _classnames.default)('iui-line-clamp', props.className),
       style: {
         '--_iui-line-clamp': lines,
         ...props.style,
@@ -28,6 +33,7 @@ const LineClamp = _react.forwardRef((props, forwardedRef) => {
       _ShadowRoot.ShadowRoot,
       {
         css: css,
+        flush: false,
       },
       _react.createElement('slot', null),
     ),

package/DEV-cjs/utils/components/MiddleTextTruncation.js

@@ -49,7 +49,8 @@ const MiddleTextTruncation = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-MiddleTextTruncation.displayName = 'MiddleTextTruncation';
+if ('development' === process.env.NODE_ENV)
+  MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 const MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = _OverflowContainer.OverflowContainer.useContext();

package/DEV-cjs/utils/components/OverflowContainer.js

@@ -75,7 +75,8 @@ const OverflowContainer = Object.assign(OverflowContainerComponent, {
   useContext: useOverflowContainerContext,
 });
 const OverflowContainerContext = _react.default.createContext(void 0);
-OverflowContainerContext.displayName = 'OverflowContainerContext';
+if ('development' === process.env.NODE_ENV)
+  OverflowContainerContext.displayName = 'OverflowContainerContext';
 const useOverflow = (itemsCount, orientation = 'horizontal') => {
   let [guessState, dispatch] = _react.default.useReducer(
     overflowGuessReducer,
@@ -104,18 +105,14 @@ const useOverflow = (itemsCount, orientation = 'horizontal') => {
           (1 === visibleCount && isOverflowing) ||
           (visibleCount === itemsCount && !isOverflowing) ||
           (maxGuess - minGuess === 1 && visibleCount === minGuess)
-        ) {
-          dispatch({
+        )
+          return void dispatch({
             type: 'stabilize',
           });
-          return;
-        }
-        if (maxGuess === visibleCount && !isOverflowing) {
-          dispatch({
+        if (maxGuess === visibleCount && !isOverflowing)
+          return void dispatch({
             type: 'shiftGuessRangeForward',
           });
-          return;
-        }
         isOverflowing
           ? dispatch({
               type: 'decreaseMaxGuess',

package/DEV-cjs/utils/components/Portal.js

@@ -13,8 +13,8 @@ _export(exports, {
   Portal: function () {
     return Portal;
   },
-  portalContainerAtom: function () {
-    return portalContainerAtom;
+  PortalContainerContext: function () {
+    return PortalContainerContext;
   },
   usePortalTo: function () {
     return usePortalTo;
@@ -26,9 +26,7 @@ const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(
   require('react-dom'),
 );
 const _useIsClient = require('../hooks/useIsClient.js');
-const _jotai = require('jotai');
-const _ScopeProvider = require('../providers/ScopeProvider.js');
-const portalContainerAtom = (0, _jotai.atom)(null);
+const PortalContainerContext = _react.createContext(null);
 const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = (0, _useIsClient.useIsClient)();
@@ -37,9 +35,7 @@ const Portal = (props) => {
   return portalTo ? _reactdom.createPortal(children, portalTo) : children;
 };
 const usePortalTo = (portal) => {
-  let [portalContainer] = (0, _ScopeProvider.useScopedAtom)(
-    portalContainerAtom,
-  );
+  let portalContainer = _react.useContext(PortalContainerContext);
   if ('boolean' == typeof portal) return portal ? portalContainer : null;
   let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
   return portalTo ?? portalContainer;

package/DEV-cjs/utils/components/ShadowRoot.js

@@ -20,7 +20,7 @@ const supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 const supportsAdoptedStylesheets =
   isBrowser && 'adoptedStyleSheets' in Document.prototype;
-const ShadowRoot = ({ children, css }) => {
+const ShadowRoot = ({ children, css, flush = true }) => {
   let isHydrating = 'hydrating' === (0, _index1.useHydration)();
   if (!isBrowser)
     return _react.createElement(
@@ -36,14 +36,16 @@ const ShadowRoot = ({ children, css }) => {
     ClientShadowRoot,
     {
       css: css,
+      flush: flush,
     },
     children,
   );
 };
-const ClientShadowRoot = ({ children, css }) => {
+const ClientShadowRoot = ({ children, css, flush = true }) => {
   let templateRef = _react.useRef(null);
   let shadowRoot = useShadowRoot(templateRef, {
     css,
+    flush,
   });
   let fallbackCss =
     !supportsAdoptedStylesheets && css
@@ -58,7 +60,7 @@ const ClientShadowRoot = ({ children, css }) => {
         ref: templateRef,
       });
 };
-function useShadowRoot(templateRef, { css = '' }) {
+function useShadowRoot(templateRef, { css = '', flush = true }) {
   let [shadowRoot, setShadowRoot] = _react.useState(null);
   let styleSheet = _react.useRef(void 0);
   let latestCss = (0, _index.useLatestRef)(css);
@@ -88,13 +90,13 @@ function useShadowRoot(templateRef, { css = '' }) {
           mode: 'open',
         });
       createStyleSheet(shadow);
-      _reactdom.flushSync(() => setShadowRoot(shadow));
+      if (flush) _reactdom.flushSync(() => setShadowRoot(shadow));
+      else setShadowRoot(shadow);
     };
-    queueMicrotask(() => {
-      setupOrReuseShadowRoot();
-    });
+    if (flush) queueMicrotask(() => setupOrReuseShadowRoot());
+    else setupOrReuseShadowRoot();
     return () => void setShadowRoot(null);
-  }, [templateRef, createStyleSheet, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot, flush]);
   (0, _index.useLayoutEffect)(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);

package/DEV-cjs/utils/functions/polymorphic.js

@@ -40,7 +40,8 @@ const _base = (defaultElement) => (className, attrs) => {
       ...props,
     });
   });
-  Comp.displayName = getDisplayNameFromClass(className);
+  if ('development' === process.env.NODE_ENV)
+    Comp.displayName = getDisplayNameFromClass(className);
   return Comp;
 };
 const polymorphic = new Proxy(

package/DEV-cjs/utils/hooks/useGlobals.js

@@ -33,7 +33,12 @@ const useGlobals = () => {
 };
 const useThemeProviderWarning = (themeContext) => {
   _react.useEffect(() => {
-    if (!_dev.isUnitTest && !didLogWarning.themeProvider && !themeContext) {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !_dev.isUnitTest &&
+      !didLogWarning.themeProvider &&
+      !themeContext
+    ) {
       console.error(
         'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
       );
@@ -43,7 +48,11 @@ const useThemeProviderWarning = (themeContext) => {
 };
 const useRootFontSizeWarning = () => {
   _react.useEffect(() => {
-    if (!_dev.isUnitTest && !didLogWarning.fontSize) {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !_dev.isUnitTest &&
+      !didLogWarning.fontSize
+    ) {
       let rootFontSize = parseInt(
         getComputedStyle(document.documentElement).fontSize,
       );