@itwin/itwinui-react 3.17.4 → 3.18.1

package/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,3 +56,5 @@ const HeaderLogo = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  HeaderLogo.displayName = 'HeaderLogo';

package/cjs/core/Icon/Icon.js

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

package/cjs/core/InformationPanel/InformationPanel.js

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

package/cjs/core/InformationPanel/InformationPanelBody.js

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

package/cjs/core/InformationPanel/InformationPanelContent.js

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

package/cjs/core/InformationPanel/InformationPanelHeader.js

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

package/cjs/core/InformationPanel/InformationPanelWrapper.js

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

package/cjs/core/Input/Input.js

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

package/cjs/core/InputGrid/InputGrid.js

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

package/cjs/core/InputGroup/InputGroup.js

@@ -76,6 +76,8 @@ const InputGroup = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
+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/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -12,6 +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);
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
 const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
   let { children, size, isDisabled, ...rest } = props;
   return _react.createElement(
@@ -34,6 +36,8 @@ const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
+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)(
@@ -48,6 +52,8 @@ const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+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)(
@@ -64,7 +70,11 @@ const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
 const InputWithDecorationsIcon = _index.InputFlexContainerIcon;
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
 const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
   Input: InputWithDecorationsInput,
   Button: InputWithDecorationsButton,

package/cjs/core/Label/Label.js

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

package/cjs/core/LabeledInput/LabeledInput.js

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

package/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,3 +74,5 @@ const LabeledSelect = _react.forwardRef((props, forwardedRef) => {
       : message,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  LabeledSelect.displayName = 'LabeledSelect';

package/cjs/core/LabeledTextarea/LabeledTextarea.js

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

package/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,4 +34,7 @@ const LinkAction = _react.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  LinkAction.displayName = 'LinkAction';
 const LinkBox = _polymorphic.polymorphic.div('iui-link-box');
+if ('development' === process.env.NODE_ENV) LinkBox.displayName = 'LinkBox';

package/cjs/core/List/List.js

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

package/cjs/core/List/ListItem.js

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

package/cjs/core/Menu/Menu.d.ts

@@ -17,7 +17,9 @@ type MenuProps = {
     trigger: React.ReactNode;
     /**
      * You can use this optional prop when the position reference is not the trigger.
-     * (Equivalent to using FloatingUI's `floating.refs.setPositionReference`)
+     *
+     * This can be either a real element, or a [virtual element](https://floating-ui.com/docs/virtual-elements)
+     * containing a `getBoundingClientRect` method.
      */
     positionReference?: Parameters<ReturnType<typeof usePopover>['refs']['setPositionReference']>[0];
     /**

package/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/cjs/core/Menu/MenuDivider.js

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

package/cjs/core/Menu/MenuExtraContent.d.ts

@@ -18,4 +18,4 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuExtraContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuExtraContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Menu/MenuExtraContent.js

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

package/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,11 +37,23 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
+  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(
@@ -51,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;
@@ -83,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({
@@ -111,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,
         {
@@ -133,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,
           {
@@ -146,3 +158,4 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       : trigger,
   );
 });
+if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';

package/cjs/core/Menu/MenuItemSkeleton.js

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

package/cjs/core/Modal/Modal.d.ts

@@ -30,7 +30,7 @@ type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * If true, the dialog will be portaled to the end of `<body>` or to the nearest popover.
      *
      * Can be set to an object with a `to` property to portal into a specific element.
      * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).

package/cjs/core/Modal/Modal.js

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

package/cjs/core/Modal/ModalButtonBar.js

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

package/cjs/core/Modal/ModalContent.js

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

package/cjs/core/NonIdealState/ErrorPage.js

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

package/cjs/core/NonIdealState/NonIdealState.js

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

package/cjs/core/NotificationMarker/NotificationMarker.js

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

package/cjs/core/Overlay/Overlay.js

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

package/cjs/core/Panels/Panels.js

@@ -109,7 +109,11 @@ const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapper.displayName = 'Panels.Wrapper';
 const PanelsWrapperContext = _react.createContext(void 0);
+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,
@@ -157,7 +161,10 @@ const Panel = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV) Panel.displayName = 'Panels.Panel';
 const PanelContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  PanelContext.displayName = 'PanelContext';
 const PanelTrigger = (props) => {
   let { children, for: forProp } = props;
   let {
@@ -230,6 +237,8 @@ const PanelTrigger = (props) => {
     'aria-controls': forProp,
   }));
 };
+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)(
@@ -271,6 +280,8 @@ const PanelHeader = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+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)(
@@ -293,6 +304,8 @@ const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
     children || _react.createElement(_index.SvgChevronLeft, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PanelBackButton.displayName = 'Panels.BackButton';
 const Panels = {
   Wrapper: PanelsWrapper,
   Panel,

package/cjs/core/Panels/helpers.js

@@ -22,6 +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);
+if ('development' === process.env.NODE_ENV)
+  PanelsInstanceContext.displayName = 'PanelsInstanceContext';
 const PanelsInstanceProvider = (props) => {
   let { children, instance: instanceProp } = props;
   let instanceBackup = _Panels.Panels.useInstance();

package/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,6 +324,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Popover.displayName = 'Popover';
 const PopoverPortal = ({ children, portal = true }) => {
   let portalTo = (0, _Portal.usePortalTo)(portal);
   return _react.createElement(

package/cjs/core/ProgressIndicators/ProgressLinear.js

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

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -71,3 +71,5 @@ const ProgressRadial = _react.forwardRef((props, forwardedRef) => {
     'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ProgressRadial.displayName = 'ProgressRadial';

package/cjs/core/Radio/Radio.js

@@ -67,3 +67,4 @@ const Radio = _react.forwardRef((props, ref) => {
       )
     : radio;
 });
+if ('development' === process.env.NODE_ENV) Radio.displayName = 'Radio';

package/cjs/core/RadioTiles/RadioTile.js

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

package/cjs/core/RadioTiles/RadioTileGroup.js

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