@itwin/itwinui-react 3.17.4 → 3.18.1

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

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

package/DEV-cjs/core/Header/HeaderBreadcrumbs.js

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

package/DEV-cjs/core/Header/HeaderButton.js

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

package/DEV-cjs/core/Header/HeaderLogo.js

@@ -21,7 +21,7 @@ const HeaderLogo = _react.forwardRef((props, ref) => {
     children,
     logo,
     onClick,
-    as = onClick ? 'button' : 'div',
+    as = !!onClick ? 'button' : 'div',
     ...rest
   } = props;
   return _react.createElement(
@@ -56,4 +56,5 @@ const HeaderLogo = _react.forwardRef((props, ref) => {
       ),
   );
 });
-HeaderLogo.displayName = 'HeaderLogo';
+if ('development' === process.env.NODE_ENV)
+  HeaderLogo.displayName = 'HeaderLogo';

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

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

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

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

package/DEV-cjs/core/InformationPanel/InformationPanelBody.js

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'InformationPanelBody', {
 });
 const _index = require('../../utils/index.js');
 const InformationPanelBody = _index.polymorphic.div('iui-information-body');
-InformationPanelBody.displayName = 'InformationPanel.Body';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelBody.displayName = 'InformationPanel.Body';

package/DEV-cjs/core/InformationPanel/InformationPanelContent.js

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

package/DEV-cjs/core/InformationPanel/InformationPanelHeader.js

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

package/DEV-cjs/core/InformationPanel/InformationPanelWrapper.js

@@ -12,4 +12,5 @@ const _index = require('../../utils/index.js');
 const InformationPanelWrapper = _index.polymorphic.div(
   'iui-information-panel-wrapper',
 );
-InformationPanelWrapper.displayName = 'InformationPanelWrapper';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelWrapper.displayName = 'InformationPanelWrapper';

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

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

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

@@ -36,7 +36,7 @@ const InputGrid = _react.forwardRef((props, ref) => {
     children,
   );
 });
-InputGrid.displayName = 'InputGrid';
+if ('development' === process.env.NODE_ENV) InputGrid.displayName = 'InputGrid';
 const useChildrenWithIds = (children) => {
   let { labelId, inputId, messageId } = useSetup(children);
   return _react.useMemo(

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

@@ -76,7 +76,8 @@ const InputGroup = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-InputGroup.displayName = 'InputGroup';
+if ('development' === process.env.NODE_ENV)
+  InputGroup.displayName = 'InputGroup';
 const BottomMessage = (props) => {
   let { message, status, svgIcon, displayStyle, messageProps } = props;
   if (message && 'string' != typeof message) return message;

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

@@ -12,7 +12,8 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const InputWithDecorationsContext = _react.createContext(void 0);
-InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
 const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
   let { children, size, isDisabled, ...rest } = props;
   return _react.createElement(
@@ -35,7 +36,8 @@ const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
-InputWithDecorationsComponent.displayName = 'InputWithDecorations';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsComponent.displayName = 'InputWithDecorations';
 const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
   let { id: idProp, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
@@ -50,7 +52,8 @@ const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
 const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
   let { children, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
@@ -67,9 +70,11 @@ const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
     children,
   );
 });
-InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
 const InputWithDecorationsIcon = _index.InputFlexContainerIcon;
-InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
 const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
   Input: InputWithDecorationsInput,
   Button: InputWithDecorationsButton,

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

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

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

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

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

@@ -56,7 +56,9 @@ const LabeledSelect = _react.forwardRef((props, forwardedRef) => {
       required: props.native ? required : void 0,
       ...rest,
       ref: forwardedRef,
-      styleType: 'default',
+      ...{
+        styleType: 'default',
+      },
     }),
     'string' == typeof message
       ? _react.createElement(
@@ -72,4 +74,5 @@ const LabeledSelect = _react.forwardRef((props, forwardedRef) => {
       : message,
   );
 });
-LabeledSelect.displayName = 'LabeledSelect';
+if ('development' === process.env.NODE_ENV)
+  LabeledSelect.displayName = 'LabeledSelect';

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

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

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

@@ -26,7 +26,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 const _polymorphic = require('../../utils/functions/polymorphic.js');
 const _index = require('../../utils/components/index.js');
 const LinkAction = _react.forwardRef((props, forwardedRef) => {
-  let { as: asProp = props.href ? 'a' : 'button' } = props;
+  let { as: asProp = !!props.href ? 'a' : 'button' } = props;
   return _react.createElement(_index.Box, {
     ...props,
     as: asProp,
@@ -34,6 +34,7 @@ const LinkAction = _react.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
-LinkAction.displayName = 'LinkAction';
+if ('development' === process.env.NODE_ENV)
+  LinkAction.displayName = 'LinkAction';
 const LinkBox = _polymorphic.polymorphic.div('iui-link-box');
-LinkBox.displayName = 'LinkBox';
+if ('development' === process.env.NODE_ENV) LinkBox.displayName = 'LinkBox';

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

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

package/DEV-cjs/core/List/ListItem.js

@@ -38,15 +38,20 @@ const ListItemComponent = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-ListItemComponent.displayName = 'ListItem';
+if ('development' === process.env.NODE_ENV)
+  ListItemComponent.displayName = 'ListItem';
 const ListItemIcon = _index.polymorphic.div('iui-list-item-icon');
-ListItemIcon.displayName = 'ListItem.Icon';
+if ('development' === process.env.NODE_ENV)
+  ListItemIcon.displayName = 'ListItem.Icon';
 const ListItemContent = _index.polymorphic.div('iui-list-item-content');
-ListItemContent.displayName = 'ListItem.Content';
+if ('development' === process.env.NODE_ENV)
+  ListItemContent.displayName = 'ListItem.Content';
 const ListItemDescription = _index.polymorphic.div('iui-list-item-description');
-ListItemDescription.displayName = 'ListItem.Description';
+if ('development' === process.env.NODE_ENV)
+  ListItemDescription.displayName = 'ListItem.Description';
 const ListItemAction = _LinkAction.LinkAction;
-ListItemAction.displayName = 'ListItem.Action';
+if ('development' === process.env.NODE_ENV)
+  ListItemAction.displayName = 'ListItem.Action';
 const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,
   Content: ListItemContent,

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

@@ -166,7 +166,9 @@ const Menu = _react.forwardRef((props, ref) => {
             if (null != focusableItemIndex && focusableItemIndex >= 0)
               setActiveIndex(focusableItemIndex);
             if (event.target === event.currentTarget)
-              event.currentTarget.focus();
+              event.currentTarget.focus({
+                focusVisible: false,
+              });
           },
         ),
       }),

package/DEV-cjs/core/Menu/MenuDivider.js

@@ -12,4 +12,5 @@ const _index = require('../../utils/index.js');
 const MenuDivider = _index.polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });
-MenuDivider.displayName = 'MenuDivider';
+if ('development' === process.env.NODE_ENV)
+  MenuDivider.displayName = 'MenuDivider';

package/DEV-cjs/core/Menu/MenuExtraContent.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'MenuExtraContent', {
   },
 });
 const _index = require('../../utils/index.js');
-const MenuExtraContent = _index.polymorphic.li('iui-menu-content', {
-  role: 'presentation',
-});
-MenuExtraContent.displayName = 'MenuExtraContent';
+const MenuExtraContent = _index.polymorphic.div('iui-menu-content');
+if ('development' === process.env.NODE_ENV)
+  MenuExtraContent.displayName = 'MenuExtraContent';

package/DEV-cjs/core/Menu/MenuItem.js

@@ -27,7 +27,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     value,
     onClick: onClickProp,
     sublabel,
-    size = sublabel ? 'large' : 'default',
+    size = !!sublabel ? 'large' : 'default',
     icon,
     startIcon = icon,
     badge,
@@ -37,15 +37,23 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
-  if (null != onClickProp && subMenuItems.length > 0)
+  let hasSubMenu = _react.useMemo(
+    () => subMenuItems.length > 0,
+    [subMenuItems.length],
+  );
+  if (
+    'development' === process.env.NODE_ENV &&
+    null != onClickProp &&
+    hasSubMenu
+  )
     logWarning(
       'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
     );
   let parentMenu = _react.useContext(_Menu.MenuContext);
   let dropdownMenu = _react.useContext(_DropdownMenu.DropdownMenuContext);
-  let shouldCloseMenuOnClick = _react.useContext(
-    _DropdownMenu.DropdownMenuCloseOnClickContext,
-  );
+  let shouldCloseMenuOnClick =
+    _react.useContext(_DropdownMenu.DropdownMenuCloseOnClickContext) &&
+    !hasSubMenu;
   let menuItemRef = _react.useRef(null);
   let submenuId = (0, _index.useId)();
   let popoverProps = _react.useMemo(
@@ -55,12 +63,12 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
         click: true,
         hover: true,
         listNavigation: {
-          nested: subMenuItems.length > 0,
+          nested: hasSubMenu,
           openOnArrowKeyDown: true,
         },
       },
     }),
-    [subMenuItems.length],
+    [hasSubMenu],
   );
   let onClick = () => {
     if (disabled) return;
@@ -87,8 +95,8 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       role: role,
       tabIndex: isSelected ? 0 : -1,
       'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
+      'aria-haspopup': hasSubMenu ? 'true' : void 0,
+      'aria-controls': hasSubMenu ? submenuId : void 0,
       'aria-disabled': disabled,
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
@@ -115,7 +123,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
         _react.createElement(_ListItem.ListItem.Description, null, sublabel),
     ),
     !endIcon &&
-      subMenuItems.length > 0 &&
+      hasSubMenu &&
       _react.createElement(
         _ListItem.ListItem.Icon,
         {
@@ -137,7 +145,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
   return _react.createElement(
     _react.Fragment,
     null,
-    subMenuItems.length > 0 && !disabled
+    hasSubMenu && !disabled
       ? _react.createElement(
           _Menu.Menu,
           {
@@ -150,4 +158,4 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       : trigger,
   );
 });
-MenuItem.displayName = 'MenuItem';
+if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';

package/DEV-cjs/core/Menu/MenuItemSkeleton.js

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

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

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

package/DEV-cjs/core/Modal/ModalButtonBar.js

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'ModalButtonBar', {
 });
 const _DialogButtonBar = require('../Dialog/DialogButtonBar.js');
 const ModalButtonBar = Object.assign({}, _DialogButtonBar.DialogButtonBar);
-ModalButtonBar.displayName = 'ModalButtonBar';
+if ('development' === process.env.NODE_ENV)
+  ModalButtonBar.displayName = 'ModalButtonBar';

package/DEV-cjs/core/Modal/ModalContent.js

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'ModalContent', {
 });
 const _DialogContent = require('../Dialog/DialogContent.js');
 const ModalContent = Object.assign({}, _DialogContent.DialogContent);
-ModalContent.displayName = 'ModalContent';
+if ('development' === process.env.NODE_ENV)
+  ModalContent.displayName = 'ModalContent';

package/DEV-cjs/core/NonIdealState/ErrorPage.js

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

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

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

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

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

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

@@ -23,7 +23,8 @@ const OverlayComponent = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(OverlayHiddenContent, null, children),
   );
 });
-OverlayComponent.displayName = 'Overlay';
+if ('development' === process.env.NODE_ENV)
+  OverlayComponent.displayName = 'Overlay';
 const OverlayHiddenContent = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return _react.createElement(
@@ -36,11 +37,14 @@ const OverlayHiddenContent = _react.forwardRef((props, ref) => {
     children,
   );
 });
-OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+if ('development' === process.env.NODE_ENV)
+  OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
 const OverlayOverlay = _index.polymorphic.div('iui-overlay');
-OverlayOverlay.displayName = 'Overlay.Overlay';
+if ('development' === process.env.NODE_ENV)
+  OverlayOverlay.displayName = 'Overlay.Overlay';
 const OverlayWrapper = _index.polymorphic.div('iui-overlay-wrapper');
-OverlayWrapper.displayName = 'Overlay.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  OverlayWrapper.displayName = 'Overlay.Wrapper';
 const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,

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

@@ -109,9 +109,11 @@ const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelsWrapper.displayName = 'Panels.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapper.displayName = 'Panels.Wrapper';
 const PanelsWrapperContext = _react.createContext(void 0);
-PanelsWrapperContext.displayName = 'PanelsWrapperContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapperContext.displayName = 'PanelsWrapperContext';
 const Panel = _react.forwardRef((props, forwardedRef) => {
   let { id, children, className, ...rest } = props;
   let { activePanelId, triggers, panels, setActivePanelId } = (0,
@@ -159,9 +161,10 @@ const Panel = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-Panel.displayName = 'Panels.Panel';
+if ('development' === process.env.NODE_ENV) Panel.displayName = 'Panels.Panel';
 const PanelContext = _react.createContext(void 0);
-PanelContext.displayName = 'PanelContext';
+if ('development' === process.env.NODE_ENV)
+  PanelContext.displayName = 'PanelContext';
 const PanelTrigger = (props) => {
   let { children, for: forProp } = props;
   let {
@@ -234,7 +237,8 @@ const PanelTrigger = (props) => {
     'aria-controls': forProp,
   }));
 };
-PanelTrigger.displayName = 'Panels.Trigger';
+if ('development' === process.env.NODE_ENV)
+  PanelTrigger.displayName = 'Panels.Trigger';
 const PanelHeader = _react.forwardRef((props, forwardedRef) => {
   let { titleProps, children, ...rest } = props;
   let { shouldFocus, setShouldFocus } = (0, _index.useSafeContext)(
@@ -276,7 +280,8 @@ const PanelHeader = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelHeader.displayName = 'Panels.Header';
+if ('development' === process.env.NODE_ENV)
+  PanelHeader.displayName = 'Panels.Header';
 const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
   let { children, onClick, ...rest } = props;
   let { instance: panelInstance } = (0, _index.useSafeContext)(
@@ -299,7 +304,8 @@ const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
     children || _react.createElement(_index.SvgChevronLeft, null),
   );
 });
-PanelBackButton.displayName = 'Panels.BackButton';
+if ('development' === process.env.NODE_ENV)
+  PanelBackButton.displayName = 'Panels.BackButton';
 const Panels = {
   Wrapper: PanelsWrapper,
   Panel,

package/DEV-cjs/core/Panels/helpers.js

@@ -22,7 +22,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Panels = require('./Panels.js');
 const PanelsInstanceContext = _react.createContext(void 0);
-PanelsInstanceContext.displayName = 'PanelsInstanceContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsInstanceContext.displayName = 'PanelsInstanceContext';
 const PanelsInstanceProvider = (props) => {
   let { children, instance: instanceProp } = props;
   let instanceBackup = _Panels.Panels.useInstance();

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

@@ -50,10 +50,12 @@ const usePopover = (options) => {
   let mergedInteractions = _react.useMemo(
     () => ({
       ...interactionsProp,
-      click: interactionsProp?.click ?? true,
-      dismiss: interactionsProp?.dismiss ?? true,
-      hover: interactionsProp?.hover ?? false,
-      focus: interactionsProp?.focus ?? false,
+      ...{
+        click: interactionsProp?.click ?? true,
+        dismiss: interactionsProp?.dismiss ?? true,
+        hover: interactionsProp?.hover ?? false,
+        focus: interactionsProp?.focus ?? false,
+      },
     }),
     [interactionsProp],
   );
@@ -80,6 +82,7 @@ const usePopover = (options) => {
     open,
     onOpenChange,
     strategy: 'fixed',
+    transform: false,
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -165,7 +168,7 @@ const usePopover = (options) => {
             availableHeight && {
               maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
             }),
-          zIndex: 9999,
+          zIndex: 999,
           ...(matchWidth && referenceWidth
             ? {
                 minInlineSize: `${referenceWidth}px`,
@@ -235,7 +238,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
+  let [popoverElement, setPopoverElement] = _react.useState(null);
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
@@ -282,33 +285,37 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             },
             _react.createElement(
               _ThemeProvider.ThemeProvider,
-              {
-                portalContainer: popoverElement,
-              },
-              _react.createElement(DisplayContents, null),
+              null,
               _react.createElement(
-                _react1.FloatingFocusManager,
+                _Portal.PortalContainerContext.Provider,
                 {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: initialFocus,
+                  value: popoverElement,
                 },
+                _react.createElement(DisplayContents, null),
                 _react.createElement(
-                  _index.Box,
+                  _react1.FloatingFocusManager,
                   {
-                    className: (0, _classnames.default)(
-                      {
-                        'iui-popover-surface': applyBackground,
-                      },
-                      className,
-                    ),
-                    'aria-labelledby': hasAriaLabel
-                      ? void 0
-                      : popover.refs.domReference.current?.id,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
+                    context: popover.context,
+                    modal: false,
+                    initialFocus: initialFocus,
                   },
-                  content,
+                  _react.createElement(
+                    _index.Box,
+                    {
+                      className: (0, _classnames.default)(
+                        {
+                          'iui-popover-surface': applyBackground,
+                        },
+                        className,
+                      ),
+                      'aria-labelledby': hasAriaLabel
+                        ? void 0
+                        : popover.refs.domReference.current?.id,
+                      ...popover.getFloatingProps(rest),
+                      ref: popoverRef,
+                    },
+                    content,
+                  ),
                 ),
               ),
             ),
@@ -317,7 +324,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-Popover.displayName = 'Popover';
+if ('development' === process.env.NODE_ENV) Popover.displayName = 'Popover';
 const PopoverPortal = ({ children, portal = true }) => {
   let portalTo = (0, _Portal.usePortalTo)(portal);
   return _react.createElement(