@itwin/itwinui-react 3.14.0 → 3.14.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.14.1
+
+### Patch Changes
+
+- [#2209](https://github.com/iTwin/iTwinUI/pull/2209): Fixed an issue where nested `Popover`s were automatically closing due to faulty "outside click" detection.
+- [#2213](https://github.com/iTwin/iTwinUI/pull/2213): Dev-only warnings have been improved so that they are correctly shown for every individual instance of a component. Additionally, these warnings are now logged using `console.error`, which results in a better stack trace.
+
 ## 3.14.0
 
 ### Minor Changes
@@ -16,20 +23,22 @@
   - `Popover` now also sets a default max-height of `400px` to prevent it from becoming too large. This can be customized using the `middleware.size.maxHeight` prop.
 - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `tableFilters.TextFilter` now prevents the user from applying the filter when the text input is empty.
 - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `BaseFilter` now renders as a `<form>` and `FilterButtonBar` now renders a `<button type="submit">`. Together, this enables the use of browser's built-in validation before applying filters.
+
   - The `setFilter` prop in `FilterButtonBar` has been deprecated, as `onSubmit` should be used instead.
     <details>
       <summary>Diff</summary>
-  
-      ```diff
-        <BaseFilter
-      +   onSubmit={() => setFilter(text)}
-        >
-          …
-          <FilterButtonBar
-      -     setFilter={() => setFilter(text)}
-          />
-        </BaseFilter>
-      ```
+
+    ```diff
+      <BaseFilter
+    +   onSubmit={() => setFilter(text)}
+      >
+        …
+        <FilterButtonBar
+    -     setFilter={() => setFilter(text)}
+        />
+      </BaseFilter>
+    ```
+
     </details>
 
 ### Patch Changes
@@ -44,7 +53,6 @@
 - [#2178](https://github.com/iTwin/iTwinUI/pull/2178): Reduced layout thrashing on `Table` component by memoizing an expensive `ref` function.
 - [#2194](https://github.com/iTwin/iTwinUI/pull/2194): The development build output is now also formatted using `prettier` for easier debugging.
 
-
 ## 3.13.4
 
 ### Patch Changes

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

@@ -15,7 +15,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
-const logWarning = (0, _index.createWarningLogger)();
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
     children: items,
@@ -109,6 +108,7 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
 BreadcrumbsComponent.displayName = 'Breadcrumbs';
 const ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = (0, _index.useWarningLogger)();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/DEV-cjs/core/Buttons/IconButton.js

@@ -17,7 +17,6 @@ const _Tooltip = require('../Tooltip/Tooltip.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const _Popover = require('../Popover/Popover.js');
-const logWarning = (0, _index.createWarningLogger)();
 const IconButton = _react.forwardRef((props, ref) => {
   let {
     isActive,
@@ -35,6 +34,7 @@ const IconButton = _react.forwardRef((props, ref) => {
     _ButtonGroup.ButtonGroupContext,
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+  let logWarning = (0, _index.useWarningLogger)();
   if (!label && !props['aria-label'] && !props['aria-labelledby'])
     logWarning('IconButton is missing the `label` prop.');
   let button = _react.createElement(

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

@@ -15,7 +15,6 @@ const _index = require('../../utils/index.js');
 const _Menu = require('./Menu.js');
 const _ListItem = require('../List/ListItem.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const logWarning = (0, _index.createWarningLogger)();
 const MenuItem = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -34,6 +33,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
   if (null != onClickProp && subMenuItems.length > 0)
     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.',

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

@@ -27,7 +27,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const _Portal = require('../../utils/components/Portal.js');
-const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 const PopoverOpenContext = _react.createContext(void 0);
 const usePopover = (options) => {
   let {
@@ -222,11 +221,9 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
-    setPopoverElement,
   );
   let triggerId = `${(0, _index.useId)()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
@@ -256,34 +253,27 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           _react.createElement(
-            _ThemeProvider.ThemeProvider,
+            _react1.FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            _react.createElement(DisplayContents, null),
             _react.createElement(
-              _react1.FloatingFocusManager,
+              _index.Box,
               {
-                context: popover.context,
-                modal: false,
+                className: (0, _classnames.default)(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              _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,
-              ),
+              content,
             ),
           ),
         )

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

@@ -35,7 +35,6 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-const logWarning = (0, _index.createWarningLogger)();
 const flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -282,6 +281,7 @@ const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
+  let logWarning = (0, _index.useWarningLogger)();
   if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
     logWarning(
@@ -575,7 +575,7 @@ const Table = (props) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return _react.createElement(_ColumnHeader.ColumnHeader, {
                   ...dragAndDropProps,
-                  key: dragAndDropProps.key,
+                  key: dragAndDropProps.key || column.id || index,
                   columnRefs: columnRefs,
                   column: column,
                   index: index,

package/DEV-cjs/styles.js

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

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

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  createWarningLogger: function () {
-    return createWarningLogger;
-  },
-  isUnitTest: function () {
+Object.defineProperty(exports, 'isUnitTest', {
+  enumerable: true,
+  get: function () {
     return isUnitTest;
   },
 });
@@ -24,14 +15,3 @@ const isMocha =
     `${globalThis.beforeEach}`.replace(/\s/g, '');
 const isVitest = void 0 !== globalThis.__vitest_index__;
 const isUnitTest = isJest || isVitest || isMocha;
-const createWarningLogger = isUnitTest
-  ? () => () => {}
-  : () => {
-      let logged = false;
-      return (message) => {
-        if (!logged) {
-          console.warn(message);
-          logged = true;
-        }
-      };
-    };

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

@@ -19,3 +19,4 @@ _export_star._(require('./useId.js'), exports);
 _export_star._(require('./useControlledState.js'), exports);
 _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
+_export_star._(require('./useWarningLogger.js'), exports);

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

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'useWarningLogger', {
+  enumerable: true,
+  get: function () {
+    return useWarningLogger;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _dev = require('../functions/dev.js');
+const _React = _react;
+const ReactInternals =
+  _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+const useWarningLogger = _dev.isUnitTest
+  ? () => () => {}
+  : function () {
+      let loggedRef = _react.useRef(false);
+      let timeoutRef = _react.useRef(null);
+      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+      let componentName = stack?.trim().split('\n')[1]?.trim();
+      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+      let logWarning = _react.useCallback(
+        (message) => {
+          timeoutRef.current = window.setTimeout(() => {
+            if (!loggedRef.current) {
+              console.error(prefix, message);
+              loggedRef.current = true;
+            }
+          });
+        },
+        [prefix],
+      );
+      _react.useEffect(
+        () => () => {
+          if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+        },
+        [],
+      );
+      return logWarning;
+    };

package/DEV-esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,11 +5,10 @@ import {
   useOverflow,
   SvgChevronRight,
   Box,
-  createWarningLogger,
+  useWarningLogger,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
-let logWarning = createWarningLogger();
 let BreadcrumbsComponent = React.forwardRef((props, ref) => {
   let {
     children: items,
@@ -103,6 +102,7 @@ let BreadcrumbsComponent = React.forwardRef((props, ref) => {
 BreadcrumbsComponent.displayName = 'Breadcrumbs';
 let ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = useWarningLogger();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/DEV-esm/core/Buttons/IconButton.js

@@ -1,11 +1,10 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase, createWarningLogger } from '../../utils/index.js';
+import { Box, ButtonBase, useWarningLogger } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
 import { PopoverOpenContext } from '../Popover/Popover.js';
-let logWarning = createWarningLogger();
 export const IconButton = React.forwardRef((props, ref) => {
   let {
     isActive,
@@ -21,6 +20,7 @@ export const IconButton = React.forwardRef((props, ref) => {
   } = props;
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
+  let logWarning = useWarningLogger();
   if (!label && !props['aria-label'] && !props['aria-labelledby'])
     logWarning('IconButton is missing the `label` prop.');
   let button = React.createElement(

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

@@ -3,12 +3,11 @@ import {
   SvgCaretRightSmall,
   useMergedRefs,
   useId,
-  createWarningLogger,
+  useWarningLogger,
 } from '../../utils/index.js';
 import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import cx from 'classnames';
-let logWarning = createWarningLogger();
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -27,6 +26,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = useWarningLogger();
   if (null != onClickProp && subMenuItems.length > 0)
     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.',

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

@@ -32,7 +32,6 @@ import {
   useMergedRefs,
 } from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
-import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 export const PopoverOpenContext = React.createContext(void 0);
 export const usePopover = (options) => {
   let {
@@ -224,12 +223,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = React.useState();
-  let popoverRef = useMergedRefs(
-    popover.refs.setFloating,
-    forwardedRef,
-    setPopoverElement,
-  );
+  let popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef);
   let triggerId = `${useId()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
@@ -258,34 +252,27 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           React.createElement(
-            ThemeProvider,
+            FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            React.createElement(DisplayContents, null),
             React.createElement(
-              FloatingFocusManager,
+              Box,
               {
-                context: popover.context,
-                modal: false,
+                className: cx(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              React.createElement(
-                Box,
-                {
-                  className: cx(
-                    {
-                      'iui-popover-surface': applyBackground,
-                    },
-                    className,
-                  ),
-                  'aria-labelledby': hasAriaLabel
-                    ? void 0
-                    : popover.refs.domReference.current?.id,
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
-                },
-                content,
-              ),
+              content,
             ),
           ),
         )

package/DEV-esm/core/Table/Table.js

@@ -18,7 +18,7 @@ import {
   useResizeObserver,
   useLayoutEffect,
   Box,
-  createWarningLogger,
+  useWarningLogger,
   ShadowRoot,
   useMergedRefs,
   useLatestRef,
@@ -52,7 +52,6 @@ let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let logWarning = createWarningLogger();
 let flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -292,6 +291,7 @@ export const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
+  let logWarning = useWarningLogger();
   if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
     logWarning(
@@ -582,7 +582,7 @@ export const Table = (props) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return React.createElement(ColumnHeader, {
                   ...dragAndDropProps,
-                  key: dragAndDropProps.key,
+                  key: dragAndDropProps.key || column.id || index,
                   columnRefs: columnRefs,
                   column: column,
                   index: index,

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.14.0';
+const t = '3.14.1';
 const u = new Proxy(
   {},
   {

package/DEV-esm/utils/functions/dev.js

@@ -5,15 +5,4 @@ let isMocha =
     `${globalThis.beforeEach}`.replace(/\s/g, '');
 let isVitest = void 0 !== globalThis.__vitest_index__;
 let isUnitTest = isJest || isVitest || isMocha;
-let createWarningLogger = isUnitTest
-  ? () => () => {}
-  : () => {
-      let logged = false;
-      return (message) => {
-        if (!logged) {
-          console.warn(message);
-          logged = true;
-        }
-      };
-    };
-export { isUnitTest, createWarningLogger };
+export { isUnitTest };

package/DEV-esm/utils/hooks/index.js

@@ -14,3 +14,4 @@ export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
+export * from './useWarningLogger.js';

package/DEV-esm/utils/hooks/useWarningLogger.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { isUnitTest } from '../functions/dev.js';
+let _React = React;
+let ReactInternals = _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+export const useWarningLogger = isUnitTest
+  ? () => () => {}
+  : function () {
+      let loggedRef = React.useRef(false);
+      let timeoutRef = React.useRef(null);
+      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+      let componentName = stack?.trim().split('\n')[1]?.trim();
+      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+      let logWarning = React.useCallback(
+        (message) => {
+          timeoutRef.current = window.setTimeout(() => {
+            if (!loggedRef.current) {
+              console.error(prefix, message);
+              loggedRef.current = true;
+            }
+          });
+        },
+        [prefix],
+      );
+      React.useEffect(
+        () => () => {
+          if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+        },
+        [],
+      );
+      return logWarning;
+    };

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -15,7 +15,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
-const logWarning = (0, _index.createWarningLogger)();
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
     children: items,
@@ -108,6 +107,7 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
 });
 const ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = (0, _index.useWarningLogger)();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/cjs/core/Buttons/IconButton.js

@@ -17,7 +17,6 @@ const _Tooltip = require('../Tooltip/Tooltip.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const _Popover = require('../Popover/Popover.js');
-const logWarning = (0, _index.createWarningLogger)();
 const IconButton = _react.forwardRef((props, ref) => {
   let {
     isActive,
@@ -35,6 +34,7 @@ const IconButton = _react.forwardRef((props, ref) => {
     _ButtonGroup.ButtonGroupContext,
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+  let logWarning = (0, _index.useWarningLogger)();
   let button = _react.createElement(
     _index.ButtonBase,
     {

package/cjs/core/Menu/MenuItem.js

@@ -15,7 +15,6 @@ const _index = require('../../utils/index.js');
 const _Menu = require('./Menu.js');
 const _ListItem = require('../List/ListItem.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const logWarning = (0, _index.createWarningLogger)();
 const MenuItem = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -34,6 +33,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
   let parentMenu = _react.useContext(_Menu.MenuContext);
   let menuItemRef = _react.useRef(null);
   let submenuId = (0, _index.useId)();

package/cjs/core/Popover/Popover.js

@@ -27,7 +27,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const _Portal = require('../../utils/components/Portal.js');
-const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 const PopoverOpenContext = _react.createContext(void 0);
 const usePopover = (options) => {
   let {
@@ -222,11 +221,9 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
-    setPopoverElement,
   );
   let triggerId = `${(0, _index.useId)()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
@@ -256,34 +253,27 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           _react.createElement(
-            _ThemeProvider.ThemeProvider,
+            _react1.FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            _react.createElement(DisplayContents, null),
             _react.createElement(
-              _react1.FloatingFocusManager,
+              _index.Box,
               {
-                context: popover.context,
-                modal: false,
+                className: (0, _classnames.default)(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              _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,
-              ),
+              content,
             ),
           ),
         )