@itwin/itwinui-react 3.18.3 → 3.19.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 3.19.0
+
+### Minor Changes
+
+- **Future flags**:
+
+  - [#2573](https://github.com/iTwin/iTwinUI/pull/2573): Added the ability to pass `future={true}` to `ThemeProvider` to enable _all_ future flags.
+  - [#2543](https://github.com/iTwin/iTwinUI/pull/2543): Added a new future flag to `ThemeProvider`'s `future` prop: `ToggleSwitch.consistentPropsSpread`. Setting this to `true` will result in all `ToggleSwitch` DOM props being applied on the input element.
+- [#2544](https://github.com/iTwin/iTwinUI/pull/2544): Added a new `wrapperProps` prop to `ToggleSwitch` to pass props to the wrapper. To prevent breaking changes:
+  - If this new `wrapperProps` is provided or `ThemeProvider`'s `ToggleSwitch.consistentPropsSpread` future flag is `true`, `className` and `style` will be applied on the `input` and `wrapperProps` will be applied on the wrapper.
+  - Else, `className` and `style` continue to be applied on the wrapper.
+- [#2576](https://github.com/iTwin/iTwinUI/pull/2576): `MenuItem`'s `value` prop has been deprecated. When the `value` is not passed, the `onClick` prop will now be called with the `event` instead of `value`.
+- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): `Tree` now horizontally scrolls instead of truncation of `TreeNode`s when in horizontally overflowing `Tree`s.
+- [#2528](https://github.com/iTwin/iTwinUI/pull/2528): The behavior of all `on[Value]Change` props has been made consistent such that they are only called when `[value]` actually _changes_ (uncontrolled mode) or should _change_ (controlled mode).
+  Affected props include:
+  - `Tabs.Wrapper`: `onValueChange` prop
+  - `Tabs`: `onTabSelected` prop
+  - `DropdownMenu`: `onVisibleChange` prop
+  - `Popover`: `onVisibleChange` prop
+  - `Tooltip`: `onVisibleChange` prop
+- [#2541](https://github.com/iTwin/iTwinUI/pull/2541), [#2584](https://github.com/iTwin/iTwinUI/pull/2584): Visual changes to `Tabs` for better accessibility and appearance when in theme bridge mode.
+  - `Tabs.Wrapper` without `type` declared focus `outline-offset` inset more so to not obstruct the active tab stripe.
+  - `Tabs.Wrapper type='borderless'` dividing line reduced to give the active tab stripe a visual difference.
+  - `Tabs.Wrapper type='borderless'` active tab no longer has `background-color` change.
+  - `Tabs.TabDescription` has `color` change with `transition`.
+  - `Tabs.Wrapper type='default'` disabled tab will now have the same background color as the non-disabled tab.
+- [#2585](https://github.com/iTwin/iTwinUI/pull/2585): Bumped the minimum required versions of `@floating-ui/react`, `@tanstack/react-virtual`, and `@swc/helpers`.
+
+### Patch Changes
+
+- [#2569](https://github.com/iTwin/iTwinUI/pull/2569), [#2578](https://github.com/iTwin/iTwinUI/pull/2578): The [**theme bridge**](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge) has been updated to more closely match the latest StrataKit visuals. The most prominent change is in the background-color of various components.
+- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): Fixed non-virtualized `Tree` where the `TreeNode`s now stretch to the full width of the horizontally scrolling `Tree`.
+- **Table**:
+  - [#2568](https://github.com/iTwin/iTwinUI/pull/2568): Fixed `Table` bug where it unintentionally tried to add non-DOM props (e.g. `useControlledState` and `autoResetResize`) to the DOM which lead to a React console warning.
+  - [#2579](https://github.com/iTwin/iTwinUI/pull/2579): Changed the internal implementation of `Table` cells so that an extra wrapper element is rendered when the cell contains _text only_. Any custom cell content (passed via `Cell`) will now be rendered as-is.
+  - [#2568](https://github.com/iTwin/iTwinUI/pull/2568): `Table`'s `defaultColumn` prop is now respected.
+  - [#2583](https://github.com/iTwin/iTwinUI/pull/2583): Fixed `Table` to no longer give a hydration mismatch error when using `ActionColumn`.
+- [#2575](https://github.com/iTwin/iTwinUI/pull/2575): `DropdownButton`'s `menuItems` now also allows directly passing `React.JSX.Element[]` or `React.JSX.Element` (like `DropdownMenu`'s `menuItems`). If doing so, can be used with `dropdownMenuProps` prop's `closeOnItemClick`.
+- [#2571](https://github.com/iTwin/iTwinUI/pull/2571): Fixed `DropdownMenu` and other components to no longer result in a React warning of `ref` being incorrectly accessed as a prop in React 18 or earlier.
+- [#2575](https://github.com/iTwin/iTwinUI/pull/2575): Fixed `DropdownMenu`'s `children` type to be `React.JSX.Element` instead of `React.ReactNode`.
+- [#2574](https://github.com/iTwin/iTwinUI/pull/2574): `ButtonGroup` no longer has overlapping borders between adjacent iTwinUI borderless buttons.
+- [#2570](https://github.com/iTwin/iTwinUI/pull/2570): Fixed `Tag` to correctly merge `labelProps.onClick` and `removeButtonProps.onClick` with the internal `onClick` handlers.
+- [#2581](https://github.com/iTwin/iTwinUI/pull/2581): Moved legacy `::-webkit-scrollbar` styles under a `@supports` block.
+
 ## 3.18.3
 
 ### Patch Changes

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

@@ -49,7 +49,7 @@ const ComboBoxMenuItem = _react.memo(
         disabled: disabled,
         focused: focusedIndex === index,
         ref: refs,
-        onClick: () => onClick?.(value),
+        onClick: () => onClick?.(),
         role: role,
         tabIndex: 'presentation' === role ? void 0 : -1,
         'aria-selected': isSelected,

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

@@ -70,13 +70,10 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     }),
     [hasSubMenu],
   );
-  let onClick = () => {
+  let onClick = (event) => {
     if (disabled) return;
     if (shouldCloseMenuOnClick) dropdownMenu?.close();
-    onClickProp?.(value);
-  };
-  let handlers = {
-    onClick,
+    onClickProp?.(value ?? event);
   };
   let focusableItemIndex = parentMenu?.focusableElements.findIndex(
     (el) => el === menuItemRef.current,
@@ -101,9 +98,13 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
             focusableItemIndex,
-            userProps: handlers,
+            userProps: {
+              onClick,
+            },
           })
-        : handlers),
+        : {
+            onClick,
+          }),
       ...rest,
     },
     startIcon &&

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

@@ -183,7 +183,13 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
               isSelected,
             })
           : _react.createElement(_MenuItem.MenuItem, null, option.label);
-        let { label, icon, startIcon: startIconProp, ...restOption } = option;
+        let {
+          label,
+          icon,
+          startIcon: startIconProp,
+          value: _,
+          ...restOption
+        } = option;
         let startIcon = startIconProp ?? icon;
         return _react.cloneElement(menuItem, {
           key: `${label}-${index}`,
@@ -467,15 +473,17 @@ const SelectListbox = _react.forwardRef((props, forwardedRef) => {
   }, []);
   let children = _react.useMemo(
     () =>
-      _react.Children.map(childrenProp, (child, index) =>
-        _react.isValidElement(child)
-          ? _react.createElement(_react1.CompositeItem, {
-              key: index,
-              render: child,
-              ref: child.props.ref || child.ref,
-            })
-          : child,
-      ),
+      _react.Children.map(childrenProp, (child, index) => {
+        if (_react.isValidElement(child)) {
+          let ref = _index.isReact17or18 ? child.ref : child.props.ref;
+          return _react.createElement(_react1.CompositeItem, {
+            key: index,
+            ref: ref,
+            render: child,
+          });
+        }
+        return child;
+      }),
     [childrenProp],
   );
   return _react.createElement(

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

@@ -56,9 +56,9 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
       className: 'iui-sidenav-button iui-expand',
       size: 'small',
       onClick: _react.useCallback(() => {
-        setIsExpanded((expanded) => !expanded);
+        setIsExpanded(!isExpanded);
         onExpanderClick?.();
-      }, [onExpanderClick, setIsExpanded]),
+      }, [isExpanded, onExpanderClick, setIsExpanded]),
     },
     _react.createElement(_index.SvgChevronRight, null),
   );

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

@@ -105,10 +105,14 @@ const ColumnHeader = _react.forwardRef((props, forwardedRef) => {
       'string' == typeof column.Header
         ? _react.createElement(
             _index.ShadowRoot,
-            null,
+            {
+              css: _index.lineClamp.css,
+            },
             _react.createElement(
-              _index.LineClamp,
-              null,
+              'div',
+              {
+                className: _index.lineClamp.className,
+              },
               _react.createElement('slot', null),
             ),
             _react.createElement('slot', {

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

@@ -100,6 +100,38 @@ const Table = (props) => {
     caption = 'Table',
     role,
     scrollToRow,
+    useControlledState,
+    autoResetExpanded,
+    autoResetFilters,
+    autoResetGlobalFilter,
+    autoResetHiddenColumns,
+    autoResetPage,
+    autoResetResize,
+    autoResetSelectedRows,
+    autoResetSortBy,
+    defaultCanFilter,
+    defaultCanSort,
+    defaultColumn: defaultColumnProp,
+    disableFilters,
+    disableGlobalFilter,
+    disableMultiSort,
+    disableSortRemove,
+    disabledMultiRemove,
+    expandSubRows,
+    globalFilter,
+    initialState,
+    isMultiSortEvent,
+    manualExpandedKey,
+    manualFilters,
+    manualGlobalFilter,
+    manualRowSelectedKey,
+    manualSortBy,
+    maxMultiSortColCount,
+    orderByFn,
+    pageCount,
+    sortTypes,
+    manualPagination,
+    paginateExpandedRows,
     ..._rest
   } = props;
   let { ariaRestAttributes, nonAriaRestAttributes } = _react.useMemo(
@@ -140,8 +172,9 @@ const Table = (props) => {
       maxWidth: 0,
       minWidth: 0,
       width: 0,
+      ...defaultColumnProp,
     }),
-    [],
+    [defaultColumnProp],
   );
   let rowHeight = _react.useMemo(() => {
     if ('condensed' === density) return 50;
@@ -295,9 +328,36 @@ const Table = (props) => {
   );
   let instance = (0, _reacttable.useTable)(
     {
-      manualPagination: !paginatorRenderer,
-      paginateExpandedRows: false,
-      ...props,
+      manualPagination: manualPagination ?? !paginatorRenderer,
+      paginateExpandedRows: paginateExpandedRows ?? false,
+      useControlledState,
+      autoResetExpanded,
+      autoResetFilters,
+      autoResetGlobalFilter,
+      autoResetHiddenColumns,
+      autoResetPage,
+      autoResetResize,
+      autoResetSelectedRows,
+      autoResetSortBy,
+      defaultCanFilter,
+      defaultCanSort,
+      disableFilters,
+      disableGlobalFilter,
+      disableMultiSort,
+      disableSortRemove,
+      disabledMultiRemove,
+      expandSubRows,
+      globalFilter,
+      isMultiSortEvent,
+      manualExpandedKey,
+      manualFilters,
+      manualGlobalFilter,
+      manualRowSelectedKey,
+      manualSortBy,
+      maxMultiSortColCount,
+      orderByFn,
+      pageCount: pageCount ?? -1,
+      sortTypes,
       columns,
       defaultColumn,
       disableSortBy: !isSortable,
@@ -308,7 +368,7 @@ const Table = (props) => {
       getSubRows: subComponent ? getSubRowsWithSubComponents : getSubRows,
       initialState: {
         pageSize,
-        ...props.initialState,
+        ...initialState,
       },
       columnResizeMode,
       getRowId: subComponent ? getRowIdWithSubComponents : getRowId,

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

@@ -37,6 +37,10 @@ const DefaultCell = (props) => {
   );
   let isCellRendererChildrenCustom =
     _react.useContext(DefaultCellRendererPropsChildren) !== props.children;
+  let isDefaultTextCell =
+    'string' == typeof props.cellProps.value &&
+    !isCustomCell &&
+    !isCellRendererChildrenCustom;
   let {
     cellElementProps: {
       className: cellElementClassName,
@@ -51,9 +55,7 @@ const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = 'string' == typeof cellProps.value &&
-      !isCustomCell &&
-      !isCellRendererChildrenCustom,
+    clamp = isDefaultTextCell,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
@@ -84,12 +86,14 @@ const DefaultCell = (props) => {
       _react.createElement(
         TableCellContent,
         {
-          shouldRenderWrapper: isCellRendererChildrenCustom,
+          shouldRenderWrapper: isDefaultTextCell,
         },
         clamp
           ? _react.createElement(
-              _index.LineClamp,
-              null,
+              'div',
+              {
+                className: _index.lineClamp.className,
+              },
               _react.createElement('slot', null),
             )
           : _react.createElement('slot', null),
@@ -129,15 +133,15 @@ if ('development' === process.env.NODE_ENV)
 const TableCellContent = (props) => {
   let { children, shouldRenderWrapper } = props;
   return shouldRenderWrapper
-    ? children
-    : _react.createElement(
+    ? _react.createElement(
         'div',
         {
           className: '_iui-table-cell-default-content',
           onClick: (e) => e.stopPropagation(),
         },
         children,
-      );
+      )
+    : children;
 };
 const css = `
 ._iui-table-cell-default-content {
@@ -151,4 +155,5 @@ const css = `
   inset: -6px;
   z-index: -1;
 }
+${_index.lineClamp.css}
 `;

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

@@ -23,6 +23,7 @@ const ACTION_CELL_ID = 'iui-table-action';
 const ActionColumn = ({ columnManager = false } = {}) => ({
   id: ACTION_CELL_ID,
   disableResizing: true,
+  canResize: false,
   disableGroupBy: true,
   minWidth: 48,
   width: 48,

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

@@ -35,30 +35,35 @@ const ExpanderColumn = (props = {}) => {
     maxWidth: 48,
     columnClassName: 'iui-slot',
     cellClassName: 'iui-slot',
-    Cell: (props) => {
-      let { row } = props;
-      if (!subComponent?.(row)) return null;
+    Cell: () => null,
+    cellRenderer: (props) => {
+      let { row } = props.cellProps;
+      let children = subComponent?.(row)
+        ? _react.createElement(
+            _IconButton.IconButton,
+            {
+              'aria-label': 'Toggle expandable content',
+              className: 'iui-table-row-expander',
+              styleType: 'borderless',
+              size: 'small',
+              onClick: (e) => {
+                e.stopPropagation();
+                row.toggleRowExpanded();
+              },
+              disabled: isDisabled?.(row.original),
+              'aria-expanded': row.isExpanded,
+            },
+            _react.createElement(_index.SvgChevronRight, null),
+          )
+        : null;
       return _react.createElement(
-        _IconButton.IconButton,
+        _index1.DefaultCell,
         {
-          'aria-label': 'Toggle expandable content',
-          className: 'iui-table-row-expander',
-          styleType: 'borderless',
-          size: 'small',
-          onClick: (e) => {
-            e.stopPropagation();
-            row.toggleRowExpanded();
-          },
-          disabled: isDisabled?.(props.row.original),
-          'aria-expanded': row.isExpanded,
+          ...props,
+          isDisabled: (rowData) => !!isDisabled?.(rowData),
         },
-        _react.createElement(_index.SvgChevronRight, null),
+        children,
       );
     },
-    cellRenderer: (props) =>
-      _react.createElement(_index1.DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
   };
 };

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

@@ -64,8 +64,10 @@ const SelectionColumn = (props = {}) => {
         onChange: () => toggleAllRowsSelected(nextToggleState),
       });
     },
-    Cell: ({ row, selectSubRows = true }) =>
-      _react.createElement(_Checkbox.Checkbox, {
+    Cell: () => null,
+    cellRenderer: (props) => {
+      let { row, selectSubRows = true } = props.cellProps;
+      let children = _react.createElement(_Checkbox.Checkbox, {
         ...row.getToggleRowSelectedProps(),
         style: {},
         title: '',
@@ -85,11 +87,15 @@ const SelectionColumn = (props = {}) => {
             );
           else row.toggleRowSelected(!row.isSelected);
         },
-      }),
-    cellRenderer: (props) =>
-      _react.createElement(_index.DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
+      });
+      return _react.createElement(
+        _index.DefaultCell,
+        {
+          ...props,
+          isDisabled: (rowData) => !!isDisabled?.(rowData),
+        },
+        children,
+      );
+    },
   };
 };

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, 'useExpanderCell', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../columns/index.js');
+const _DefaultCell = require('../cells/DefaultCell.js');
 const useExpanderCell =
   (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) return;
@@ -26,14 +27,17 @@ const useExpanderCell =
       return [
         {
           ...expanderColumn,
-          Cell: expanderCell
-            ? (cellProps) =>
+          cellRenderer: expanderCell
+            ? (props) =>
                 _react.createElement(
-                  _react.Fragment,
-                  null,
-                  expanderCell(cellProps),
+                  _DefaultCell.DefaultCell,
+                  {
+                    ...props,
+                    isDisabled: (rowData) => !!isRowDisabled?.(rowData),
+                  },
+                  expanderCell(props.cellProps),
                 )
-            : expanderColumn.Cell,
+            : expanderColumn.cellRenderer,
         },
         ...columns,
       ];

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

@@ -53,8 +53,11 @@ const Tag = _react.forwardRef((props, forwardedRef) => {
           _index.Box,
           {
             as: shouldUseLinkAction ? _LinkAction.LinkAction : 'span',
-            onClick: shouldUseLinkAction ? onClick : void 0,
             ...labelProps,
+            onClick: (0, _index.mergeEventHandlers)(
+              labelProps?.onClick,
+              shouldUseLinkAction ? onClick : void 0,
+            ),
             className: (0, _classnames.default)(
               'iui-tag-label',
               labelProps?.className,
@@ -69,9 +72,12 @@ const Tag = _react.forwardRef((props, forwardedRef) => {
         {
           styleType: 'borderless',
           size: 'small',
-          onClick: onRemove,
           'aria-label': 'Delete tag',
           ...removeButtonProps,
+          onClick: (0, _index.mergeEventHandlers)(
+            removeButtonProps?.onClick,
+            onRemove,
+          ),
           className: (0, _classnames.default)(
             'iui-tag-button',
             removeButtonProps?.className,

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

@@ -24,14 +24,14 @@ const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
 const OwnerDocumentContext = _react.createContext(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _future;
+  var _themeOptions, _themeOptions1;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
-    future = {},
+    future: futureProp = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -43,68 +43,69 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_future = future).themeBridge ??
-    (_future.themeBridge = parent.context?.future?.themeBridge);
   let portalContainerFromParent = _react.useContext(
     _index.PortalContainerContext,
   );
-  let contextValue = _react.useMemo(
+  let themeContextValue = _react.useMemo(
     () => ({
       theme,
       themeOptions,
-      future,
     }),
-    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
+    [theme, JSON.stringify(themeOptions)],
   );
   let [portalContainer, setPortalContainer] = _react.useState(
     portalContainerProp || null,
   );
   return _react.createElement(
-    _index.PortalContainerContext.Provider,
+    _index.FutureFlagsProvider,
     {
-      value: portalContainer,
+      value: futureProp,
     },
     _react.createElement(
-      _index.HydrationProvider,
-      null,
+      _index.PortalContainerContext.Provider,
+      {
+        value: portalContainer,
+      },
       _react.createElement(
-        _ThemeContext.ThemeContext.Provider,
-        {
-          value: contextValue,
-        },
+        _index.HydrationProvider,
+        null,
         _react.createElement(
-          _Toaster.ToastProvider,
+          _ThemeContext.ThemeContext.Provider,
           {
-            inherit: 'inherit' === themeProp && !portalContainerProp,
+            value: themeContextValue,
           },
-          includeCss && rootElement
-            ? _react.createElement(FallbackStyles, {
-                root: rootElement,
-              })
-            : null,
           _react.createElement(
-            MainRoot,
+            _Toaster.ToastProvider,
             {
-              theme: theme,
-              themeOptions: themeOptions,
-              future: future,
-              ref: (0, _index.useMergedRefs)(
-                forwardedRef,
-                setRootElement,
-                useIuiDebugRef,
-              ),
-              ...rest,
+              inherit: 'inherit' === themeProp && !portalContainerProp,
             },
-            children,
-            _react.createElement(PortalContainer, {
-              theme: theme,
-              themeOptions: themeOptions,
-              future: future,
-              portalContainerProp: portalContainerProp,
-              portalContainerFromParent: portalContainerFromParent,
-              setPortalContainer: setPortalContainer,
-              isInheritingTheme: 'inherit' === themeProp,
-            }),
+            includeCss && rootElement
+              ? _react.createElement(FallbackStyles, {
+                  root: rootElement,
+                })
+              : null,
+            _react.createElement(
+              MainRoot,
+              {
+                theme: theme,
+                themeOptions: themeOptions,
+                ref: (0, _index.useMergedRefs)(
+                  forwardedRef,
+                  setRootElement,
+                  useIuiDebugRef,
+                ),
+                ...rest,
+              },
+              children,
+              _react.createElement(PortalContainer, {
+                theme: theme,
+                themeOptions: themeOptions,
+                portalContainerProp: portalContainerProp,
+                portalContainerFromParent: portalContainerFromParent,
+                setPortalContainer: setPortalContainer,
+                isInheritingTheme: 'inherit' === themeProp,
+              }),
+            ),
           ),
         ),
       ),
@@ -134,7 +135,7 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
   );
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, future, ...rest } = props;
+  let { theme, children, themeOptions, className, ...rest } = props;
   let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
   let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
@@ -142,6 +143,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
   let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
   let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
   let shouldApplyBackground = themeOptions?.applyBackground;
+  let themeBridge = (0, _index.useFutureFlag)('themeBridge');
   return _react.createElement(
     _index.Box,
     {
@@ -154,7 +156,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': future?.themeBridge ? true : void 0,
+      'data-iui-bridge': themeBridge ? 'true' : void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -205,7 +207,6 @@ const PortalContainer = _react.memo(
     isInheritingTheme,
     theme,
     themeOptions,
-    future,
   }) => {
     let ownerDocument = _react.useContext(OwnerDocumentContext);
     let shouldSetupPortalContainer =
@@ -237,7 +238,6 @@ const PortalContainer = _react.memo(
               ...themeOptions,
               applyBackground: false,
             },
-            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',