@itwin/itwinui-react 3.14.2 → 3.15.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # Changelog
 
+## 3.15.0
+
+### Minor Changes
+
+- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): `Popover` now enables the [`hide` middleware](https://floating-ui.com/docs/hide) to hide the floating content when the trigger is hidden.
+  - This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`, `SplitButton`).
+  - If the floating content gets hidden even when it shouldn't (e.g. due to some custom styles interfering with the trigger's hide detection), consider disabling the `hide` middleware.
+
+- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): Added a new `dropdownMenuProps` prop to `SplitButton` for additional control over the menu (e.g. to disable the [`hide` middleware](https://floating-ui.com/docs/hide)).
+
+- [#2259](https://github.com/iTwin/iTwinUI/pull/2259): `ComboBox` and `Select` now allow customizing the portal behavior of the floating listbox.
+
+  - To customize `ComboBox` portaling behavior, use `dropdownMenuProps.portal`.
+  - To customize `Select` portaling behavior, use `popoverProps.portal`.
+
+  <details>
+  <summary>Example</summary>
+
+  To turn off the default portaling behavior, use `portal: false`.
+
+  ```jsx
+  <ComboBox
+    options={[…]}
+    dropdownMenuProps={{ portal: false }}
+  />
+  ```
+
+  ```jsx
+  <Select
+    options={[…]}
+    popoverProps={{ portal: false }}
+  />
+  ```
+
+  </details>
+
+- [#2238](https://github.com/iTwin/iTwinUI/pull/2238): Passing `styleType="borderless"` to `SearchBox.ExpandButton` now works as expected. This is because collapsed `SearchBox` will now hide its border and background in favor of the ones from `SearchBox.ExpandButton`.
+
+  <details>
+  <summary>Example</summary>
+
+  ```diff
+  <SearchBox expandable>
+    <SearchBox.CollapsedState>
+  -     <SearchBox.ExpandButton/>
+  +     <SearchBox.ExpandButton styleType="borderless"/>
+    </SearchBox.CollapsedState>
+    <SearchBox.ExpandedState>…</SearchBox.ExpandedState>
+  </SearchBox>
+  ```
+
+  </details>
+
+- [#2211](https://github.com/iTwin/iTwinUI/pull/2211): Added the ability to have custom `props` for each sub-component of `ColorPicker`.
+  - New **ColorBuilder** props: `colorFieldProps`, `colorDotProps`, `opacitySliderProps`, and `hueSliderProps`.
+  - New **ColorInputPanel** props: `panelLabelProps`, `colorInputContainerProps`, `inputFieldsGroupProps` and `swapColorFormatButtonProps`.
+  - New **ColorPalette** props: `labelProps`, and `paletteContainerProps`.
+
+### Patch Changes
+
+- [#2208](https://github.com/iTwin/iTwinUI/pull/2208): Fixed an issue in `Table` where `subComponent` was broken when enabling virtualization.
+- [#2239](https://github.com/iTwin/iTwinUI/pull/2239): Fixed `scrollToRow` in un-virtualized `Table`. In virtualized `Table`, `scrollToRow` now scrolls to the top for consistent behavior.
+- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): `Popover`'s `middleware.hide` prop is now respected.
+- [#2208](https://github.com/iTwin/iTwinUI/pull/2208): `Table`'s animation to show and hide its `subComponent` is now removed.
+- [#2252](https://github.com/iTwin/iTwinUI/pull/2252): Fixed an issue where some components (e.g. `VisuallyHidden` inside `ProgressRadial`) were losing their styles when reparented into a different window.
+
 ## 3.14.2
 
 ### Patch Changes
@@ -397,7 +463,7 @@
 
 - [#1865](https://github.com/iTwin/iTwinUI/pull/1865): `Dialog`/`Modal` will no longer keep its wrapper in the DOM when `isOpen=false`.
 - [#1889](https://github.com/iTwin/iTwinUI/pull/1889): `Dialog`/`Modal`'s close button will now be visually aligned based on the icon inside it, excluding the padding.
-- [#1906](https://github.com/iTwin/iTwinUI/pull/1906): `Dialog`/`Modal` title will now wrap to multiple lines instead of getting clippped.
+- [#1906](https://github.com/iTwin/iTwinUI/pull/1906): `Dialog`/`Modal` title will now wrap to multiple lines instead of getting clipped.
 - [#1873](https://github.com/iTwin/iTwinUI/pull/1873): Fixed `Tab` stripe size and position calculation that sometimes used to cause unnecessary overflow and thus cause a horizontal scrollbar in `TabList`.
 - [#1884](https://github.com/iTwin/iTwinUI/pull/1884): Fixed a bug that caused the `Tabs.Wrapper` to change size dependent on which `Tabs.Tab` was active.
 - [#1901](https://github.com/iTwin/iTwinUI/pull/1901): Fixed a bug in `Table` where `initialState.columnOrder` was not being respected.
@@ -685,7 +751,7 @@ This release includes a few breaking changes which have been briefly listed belo
 - [#1506](https://github.com/iTwin/iTwinUI/pull/1506): Added new `Popover` component for public use.
 - [#1323](https://github.com/iTwin/iTwinUI/pull/1323): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
 - [#1523](https://github.com/iTwin/iTwinUI/pull/1523): Added `ariaStrategy` prop to Tooltip. Can be used to change how the tooltip is associated with the trigger element.
-- [#1477](https://github.com/iTwin/iTwinUI/pull/1477): Added a new `portalContainer` prop to `ThemeProvider`. When specified, all floating elements (tooltips, toats, dialogs) under the ThemeProvider will read this prop from context and portal into it.
+- [#1477](https://github.com/iTwin/iTwinUI/pull/1477): Added a new `portalContainer` prop to `ThemeProvider`. When specified, all floating elements (tooltips, toasts, dialogs) under the ThemeProvider will read this prop from context and portal into it.
 - [#1362](https://github.com/iTwin/iTwinUI/pull/1362): All elements under the root will now get a default focus styling matching `--iui-color-border-accent`.
 - [#1373](https://github.com/iTwin/iTwinUI/pull/1373): Converted all physical CSS properties to their logical equivalents.
 - [#1328](https://github.com/iTwin/iTwinUI/pull/1328): Added new `Overlay` component with customizable subcomponents: `Overlay.Wrapper`, `Overlay.HiddenContent`, `Overlay.Overlay`.

package/DEV-cjs/core/Carousel/CarouselDotsList.js

@@ -104,18 +104,25 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
       handleSlideChange,
     ],
   );
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
   _react.useEffect(() => {
     let firstDot = listRef.current?.children[firstVisibleDotIndex];
     if (!listRef.current || !firstDot) return;
-    let motionOk = (0, _index.getWindow)()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
     if (justMounted.current) justMounted.current = false;
-  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  }, [
+    currentIndex,
+    firstVisibleDotIndex,
+    motionOk,
+    slideCount,
+    visibleCount,
+    width,
+  ]);
   let handleKeyDown = (event) => {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
       return;

package/DEV-cjs/core/Carousel/CarouselSlider.js

@@ -37,13 +37,13 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
   }, [items.length, setSlideCount]);
   let sliderRef = _react.useRef(null);
   let refs = (0, _index.useMergedRefs)(sliderRef, ref);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
   scrollToSlide.current = (slideIndex, { instant } = {}) => {
     isManuallyUpdating.current = true;
     let slideToShow = sliderRef.current?.children.item(slideIndex);
     if (!sliderRef.current || !slideToShow) return;
-    let motionOk = (0, _index.getWindow)()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     sliderRef.current.scrollTo({
       left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
       behavior: instant || !motionOk ? 'instant' : 'smooth',

package/DEV-cjs/core/ColorPicker/ColorBuilder.js

@@ -24,7 +24,14 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
   return ((position - rect.left) / rect.width) * 100;
 };
 const ColorBuilder = _react.forwardRef((props, ref) => {
-  let { className, ...rest } = props;
+  let {
+    className,
+    colorFieldProps,
+    colorDotProps,
+    opacitySliderProps,
+    hueSliderProps,
+    ...rest
+  } = props;
   let builderRef = _react.useRef();
   let refs = (0, _index.useMergedRefs)(builderRef, ref);
   let {
@@ -215,54 +222,86 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-color-field',
+        as: 'div',
+        ...colorFieldProps,
+        className: (0, _classnames.default)(
+          'iui-color-field',
+          colorFieldProps?.className,
+        ),
         style: {
           '--iui-color-field-hue': hueColorString,
           '--iui-color-picker-selected-color': dotColorString,
+          ...colorFieldProps?.style,
         },
-        ref: squareRef,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          updateSquareValue(event, 'onClick');
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
+        ref: (0, _index.useMergedRefs)(squareRef, colorFieldProps?.ref),
+        onPointerDown: (0, _index.mergeEventHandlers)(
+          colorFieldProps?.onPointerDown,
+          (event) => {
+            event.preventDefault();
+            updateSquareValue(event, 'onClick');
+            setColorDotActive(true);
+            colorDotRef.current?.focus();
+          },
+        ),
       },
       _react.createElement(_index.Box, {
-        className: 'iui-color-dot',
+        as: 'div',
+        ...colorDotProps,
+        className: (0, _classnames.default)(
+          'iui-color-dot',
+          colorDotProps?.className,
+        ),
         style: {
           '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
           '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
+          ...colorDotProps?.style,
         },
-        onPointerDown: () => {
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
-        onKeyDown: handleColorDotKeyDown,
-        onKeyUp: handleColorDotKeyUp,
+        onPointerDown: (0, _index.mergeEventHandlers)(
+          colorDotProps?.onPointerDown,
+          () => {
+            setColorDotActive(true);
+            colorDotRef.current?.focus();
+          },
+        ),
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          colorDotProps?.onKeyDown,
+          handleColorDotKeyDown,
+        ),
+        onKeyUp: (0, _index.mergeEventHandlers)(
+          colorDotProps?.onKeyUp,
+          handleColorDotKeyUp,
+        ),
         tabIndex: 0,
-        ref: colorDotRef,
+        ref: (0, _index.useMergedRefs)(colorDotRef, colorDotProps?.ref),
       }),
     ),
     _react.createElement(_Slider.Slider, {
       minLabel: '',
       maxLabel: '',
       values: [sliderValue],
-      className: 'iui-hue-slider',
       trackDisplayMode: 'none',
+      min: 0,
+      max: 359,
+      ...hueSliderProps,
+      className: (0, _classnames.default)(
+        'iui-hue-slider',
+        hueSliderProps?.className,
+      ),
       tooltipProps: () => ({
         visible: false,
+        ...hueSliderProps?.tooltipProps,
       }),
       onChange: (values) => {
+        hueSliderProps?.onChange?.(values);
         updateHueSlider(values[0], true);
       },
       onUpdate: (values) => {
+        hueSliderProps?.onUpdate?.(values);
         updateHueSlider(values[0], false);
       },
-      min: 0,
-      max: 359,
       thumbProps: () => ({
         'aria-label': 'Hue',
+        ...hueSliderProps?.thumbProps,
       }),
     }),
     showAlpha &&
@@ -270,25 +309,34 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
         minLabel: '',
         maxLabel: '',
         values: [alphaValue],
-        className: 'iui-opacity-slider',
         trackDisplayMode: 'none',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        ...opacitySliderProps,
+        className: (0, _classnames.default)(
+          'iui-opacity-slider',
+          opacitySliderProps?.className,
+        ),
         tooltipProps: () => ({
           visible: false,
+          ...opacitySliderProps?.tooltipProps,
         }),
         onChange: (values) => {
+          opacitySliderProps?.onChange?.(values);
           updateOpacitySlider(values[0], true);
         },
         onUpdate: (values) => {
+          opacitySliderProps?.onUpdate?.(values);
           updateOpacitySlider(values[0], false);
         },
-        min: 0,
-        max: 1,
-        step: 0.01,
         style: {
           '--iui-color-picker-selected-color': hueColorString,
+          ...opacitySliderProps?.style,
         },
         thumbProps: () => ({
           'aria-label': 'Opacity',
+          ...opacitySliderProps?.thumbProps,
         }),
       }),
   );

package/DEV-cjs/core/ColorPicker/ColorInputPanel.js

@@ -21,6 +21,10 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     defaultColorFormat,
     allowedColorFormats = ['hsl', 'rgb', 'hex'],
     className,
+    colorInputContainerProps,
+    panelLabelProps,
+    inputFieldsGroupProps,
+    swapColorFormatButtonProps,
     ...rest
   } = props;
   let inputsContainerRef = _react.useRef(null);
@@ -364,10 +368,12 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
       }),
   );
-  let labelId = (0, _index.useId)();
+  let fallbackLabelId = (0, _index.useId)();
+  let labelId = panelLabelProps?.id ?? fallbackLabelId;
   return _react.createElement(
     _index.Box,
     {
+      as: 'div',
       className: (0, _classnames.default)('iui-color-input-wrapper', className),
       ref: ref,
       ...rest,
@@ -375,7 +381,12 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-color-picker-section-label',
+        as: 'div',
+        ...panelLabelProps,
+        className: (0, _classnames.default)(
+          'iui-color-picker-section-label',
+          panelLabelProps?.className,
+        ),
         id: labelId,
       },
       showAlpha && 'hex' !== currentFormat
@@ -385,26 +396,43 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-color-input',
+        as: 'div',
+        ...colorInputContainerProps,
+        className: (0, _classnames.default)(
+          'iui-color-input',
+          colorInputContainerProps?.className,
+        ),
       },
       allowedColorFormats.length > 1 &&
         _react.createElement(
           _IconButton.IconButton,
           {
-            styleType: 'borderless',
-            onClick: swapColorFormat,
             size: 'small',
+            styleType: 'borderless',
             label: 'Switch format',
+            ...swapColorFormatButtonProps,
+            onClick: (0, _index.mergeEventHandlers)(
+              swapColorFormatButtonProps?.onClick,
+              swapColorFormat,
+            ),
           },
           _react.createElement(_index.SvgSwap, null),
         ),
       _react.createElement(
         _index.Box,
         {
-          ref: inputsContainerRef,
-          className: 'iui-color-input-fields',
+          as: 'div',
           role: 'hex' !== currentFormat ? 'group' : void 0,
           'aria-labelledby': 'hex' !== currentFormat ? labelId : void 0,
+          ...inputFieldsGroupProps,
+          ref: (0, _index.useMergedRefs)(
+            inputsContainerRef,
+            inputFieldsGroupProps?.ref,
+          ),
+          className: (0, _classnames.default)(
+            'iui-color-input-fields',
+            inputFieldsGroupProps?.className,
+          ),
         },
         'hex' === currentFormat && hexInputField,
         'rgb' === currentFormat && rgbInputs,

package/DEV-cjs/core/ColorPicker/ColorPalette.js

@@ -17,7 +17,15 @@ const _ColorPicker = require('./ColorPicker.js');
 const _ColorSwatch = require('./ColorSwatch.js');
 const _ColorPickerContext = require('./ColorPickerContext.js');
 const ColorPalette = _react.forwardRef((props, ref) => {
-  let { colors, label, className, children, ...rest } = props;
+  let {
+    colors,
+    label,
+    labelProps,
+    className,
+    children,
+    paletteContainerProps,
+    ...rest
+  } = props;
   let { activeColor, setActiveColor, onChangeComplete } = (0,
   _ColorPickerContext.useColorPickerContext)();
   return _react.createElement(
@@ -34,14 +42,24 @@ const ColorPalette = _react.forwardRef((props, ref) => {
       _react.createElement(
         _index.Box,
         {
-          className: 'iui-color-picker-section-label',
+          as: 'div',
+          ...labelProps,
+          className: (0, _classnames.default)(
+            'iui-color-picker-section-label',
+            labelProps?.className,
+          ),
         },
         label,
       ),
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-color-palette',
+        as: 'div',
+        ...paletteContainerProps,
+        className: (0, _classnames.default)(
+          'iui-color-palette',
+          paletteContainerProps?.className,
+        ),
       },
       children,
       colors &&

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

@@ -42,7 +42,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     filterFunction = defaultFilterFunction,
     inputProps,
     endIconProps,
-    dropdownMenuProps,
+    dropdownMenuProps: { middleware, ...dropdownMenuProps } = {},
     emptyStateMessage = 'No options found',
     itemRenderer,
     enableVirtualization = false,
@@ -322,6 +322,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       size: {
         maxHeight: 'var(--iui-menu-max-height)',
       },
+      ...middleware,
     },
     closeOnOutsideClick: true,
     interactions: {

package/DEV-cjs/core/ComboBox/ComboBoxMenu.js

@@ -94,7 +94,7 @@ const VirtualizedComboBoxMenu = (props) => {
   );
 };
 const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
-  let { className, children, style, ...rest } = props;
+  let { className, children, style, portal = true, ...rest } = props;
   let { id, enableVirtualization, popover } = (0, _index.useSafeContext)(
     _helpers.ComboBoxStateContext,
   );
@@ -109,7 +109,7 @@ const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Portal,
       {
-        portal: true,
+        portal: portal,
       },
       _react.createElement(
         _List.List,

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

@@ -34,6 +34,7 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     matchWidth = false,
     onVisibleChange,
     portal = true,
+    middleware,
     ...rest
   } = props;
   let [visible, setVisible] = (0, _index.useControlledState)(
@@ -47,28 +48,28 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     return menuItems;
   }, [menuItems, setVisible]);
   return _react.createElement(
-    _react.Fragment,
-    null,
-    _react.createElement(
-      _Menu.Menu,
-      {
-        trigger: children,
-        onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
-          if (e.defaultPrevented) return;
-          if ('Tab' === e.key) setVisible(false);
-        }),
-        role: role,
-        ref: forwardedRef,
-        portal: portal,
-        popoverProps: {
+    _Menu.Menu,
+    {
+      trigger: children,
+      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
+        if (e.defaultPrevented) return;
+        if ('Tab' === e.key) setVisible(false);
+      }),
+      role: role,
+      ref: forwardedRef,
+      portal: portal,
+      popoverProps: _react.useMemo(
+        () => ({
           placement,
           matchWidth,
           visible,
           onVisibleChange: setVisible,
-        },
-        ...rest,
-      },
-      menuContent,
-    ),
+          middleware,
+        }),
+        [matchWidth, middleware, placement, setVisible, visible],
+      ),
+      ...rest,
+    },
+    menuContent,
   );
 });

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

@@ -26,7 +26,6 @@ const OverlayComponent = _react.forwardRef((props, forwardedRef) => {
 OverlayComponent.displayName = 'Overlay';
 const OverlayHiddenContent = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
-  useInertPolyfill();
   return _react.createElement(
     _index.Box,
     {
@@ -47,20 +46,3 @@ const Overlay = Object.assign(OverlayComponent, {
   HiddenContent: OverlayHiddenContent,
   Overlay: OverlayOverlay,
 });
-const useInertPolyfill = () => {
-  let loaded = _react.useRef(false);
-  let modulePath =
-    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
-  _react.useEffect(() => {
-    (async () => {
-      if (
-        !HTMLElement.prototype.hasOwnProperty('inert') &&
-        !loaded.current &&
-        !_index.isUnitTest
-      ) {
-        await new Function('url', 'return import(url)')(modulePath);
-        loaded.current = true;
-      }
-    })();
-  }, []);
-};

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

@@ -42,21 +42,22 @@ const usePopover = (options) => {
   } = options;
   let mergedInteractions = _react.useMemo(
     () => ({
-      click: true,
-      dismiss: true,
-      hover: false,
-      focus: false,
       ...interactionsProp,
+      click: interactionsProp?.click ?? true,
+      dismiss: interactionsProp?.dismiss ?? true,
+      hover: interactionsProp?.hover ?? false,
+      focus: interactionsProp?.focus ?? false,
     }),
     [interactionsProp],
   );
   let tree = (0, _react1.useFloatingTree)();
   let middleware = _react.useMemo(
     () => ({
-      flip: true,
-      shift: true,
-      size: true,
       ...options.middleware,
+      flip: options.middleware?.flip ?? true,
+      shift: options.middleware?.shift ?? true,
+      size: options.middleware?.size ?? true,
+      hide: options.middleware?.hide || !_index.isUnitTest,
     }),
     [options.middleware],
   );
@@ -164,17 +165,23 @@ const usePopover = (options) => {
                 maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
               }
             : {}),
+          ...(middleware.hide &&
+            floating.middlewareData.hide?.referenceHidden && {
+              visibility: 'hidden',
+            }),
           ...userProps?.style,
         },
       }),
     [
-      floating.floatingStyles,
       interactions,
-      matchWidth,
-      referenceWidth,
+      floating.floatingStyles,
+      floating.middlewareData.hide?.referenceHidden,
       middleware.size,
+      middleware.hide,
       availableHeight,
       maxHeight,
+      matchWidth,
+      referenceWidth,
     ],
   );
   let getReferenceProps = _react.useCallback(

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

@@ -117,7 +117,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     multiple = false,
     triggerProps,
     status,
-    popoverProps,
+    popoverProps: { portal = true, ...popoverProps } = {},
     styleType,
     ...rest
   } = props;
@@ -314,7 +314,9 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     popover.open &&
       _react.createElement(
         _index.Portal,
-        null,
+        {
+          portal: portal,
+        },
         _react.createElement(
           SelectListbox,
           {