@carbon/react 1.68.0 → 1.69.0

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -36,6 +36,7 @@ function ListBoxSelection(_ref) {
     selectionCount,
     translateWithId: t = defaultTranslateWithId,
     disabled,
+    readOnly,
     onClearSelection,
     ...rest
   } = _ref;
@@ -50,7 +51,7 @@ function ListBoxSelection(_ref) {
   });
   function onClick(event) {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -67,21 +68,23 @@ function ListBoxSelection(_ref) {
     }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: onClick,
       tabIndex: -1,
       title: description,
-      type: "button"
+      type: "button",
+      "aria-disabled": readOnly ? true : undefined
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     className: className,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: onClick,
     tabIndex: -1,
     title: description,
-    type: "button"
+    type: "button",
+    "aria-disabled": readOnly ? true : undefined
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 }
 ListBoxSelection.propTypes = {
@@ -94,6 +97,10 @@ ListBoxSelection.propTypes = {
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Whether or not the listbox is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared

package/lib/components/Menu/MenuItem.js

@@ -357,9 +357,6 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
   });
   function handleClick(item, e) {
     setSelection(item);
-    if (onChange) {
-      onChange(e);
-    }
   }
   React.useEffect(() => {
     if (!context.state.hasIcons) {
@@ -384,7 +381,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     "aria-checked": item === selection,
     renderIcon: item === selection ? iconsReact.Checkmark : undefined,
     onClick: e => {
-      handleClick(item, e);
+      handleClick(item);
     }
   }))));
 });

package/lib/components/MenuButton/index.d.ts

@@ -39,6 +39,10 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
      * Specify the tabIndex of the button.
      */
     tabIndex?: number;
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MenuButton };

package/lib/components/MenuButton/index.js

@@ -22,6 +22,7 @@ var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
+var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,14 +43,21 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     size = 'lg',
     menuAlignment = 'bottom',
     tabIndex = 0,
+    menuTarget,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId.useId('MenuButton');
   const prefix = usePrefix.usePrefix();
   const triggerRef = React.useRef(null);
-  const middlewares = [react.flip({
-    crossAxis: false
-  })];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [react.flip({
+      crossAxis: false
+    })];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
       apply(_ref2) {
@@ -131,7 +139,8 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     mode: "basic",
     size: size,
     open: open,
-    onClose: handleClose
+    onClose: handleClose,
+    target: menuTarget
   }, children));
 });
 MenuButton.propTypes = {
@@ -170,7 +179,12 @@ MenuButton.propTypes = {
    * Specify the tabIndex of the button.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: PropTypes__default["default"].number,
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+
+  menuTarget: PropTypes__default["default"].instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 exports.MenuButton = MenuButton;

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -143,6 +143,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * what this field is for
      */
     placeholder?: string;
+    /**
+     * Whether or not the filterable multiselect is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify feedback (mode) of the selection.
      * `top`: selected item jumps to top

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -102,6 +102,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -244,9 +245,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     }
   };
   function handleMenuChange(forceIsOpen) {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
   React.useEffect(() => {
     onMenuChange?.(isOpen);
@@ -435,7 +438,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${prefix}--multi-select--open`]: isOpen,
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
-    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
+    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
+    [`${prefix}--multi-select--readonly`]: readOnly
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -522,6 +526,24 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
+  const mergedRef = mergeRefs["default"](textInput, inputProps.ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
+      // NOTE: does not prevent click
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
+      if (mergedRef.current !== undefined) {
+        mergedRef.current.focus();
+      }
+    },
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+      // This prevents the select from opening for the above keys
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
@@ -545,12 +567,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     invalidText: invalidText,
     warn: warn,
     warnText: warnText,
-    isOpen: isOpen,
+    isOpen: !readOnly && isOpen,
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+    readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -563,7 +586,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   }), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
     className: inputClasses
   }, inputProps, {
-    ref: mergeRefs["default"](textInput, inputProps.ref)
+    ref: mergedRef
+  }, readOnlyEventHandlers, {
+    readOnly: readOnly
   })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
@@ -572,6 +597,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
+    readOnly: readOnly,
     onMouseUp: event => {
       // If we do not stop this event from propagating,
       // it seems like Downshift takes our event and

package/lib/components/MultiSelect/MultiSelect.js

@@ -16,7 +16,7 @@ var Downshift = require('downshift');
 var isEqual = require('react-fast-compare');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
@@ -31,6 +31,7 @@ require('../Checkbox/Checkbox.Skeleton.js');
 var noopFn = require('../../internal/noopFn.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -136,11 +137,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const [prevOpenProp, setPrevOpenProp] = React.useState(open);
   const [topItems, setTopItems] = React.useState([]);
   const [itemsCleared, setItemsCleared] = React.useState(false);
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -148,7 +150,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [react.flip({
+    middleware: [autoAlign && react.flip({
       crossAxis: false
     }), react.size({
       apply(_ref2) {
@@ -160,11 +162,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           width: `${rects.reference.width}px`
         });
       }
-    }), floatingUi_dom.hide()],
+    }), autoAlign && floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -175,7 +177,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         }
       });
     }
-  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
+  }, [enableFloatingStyles, floatingStyles, refs.floating, middlewareData, open]);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -290,7 +292,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--multi-select--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
 
@@ -421,15 +423,15 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
@@ -449,8 +451,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: autoAlign ? refs.setReference : null
-  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
+    ref: enableFloatingStyles ? refs.setReference : null
+  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
     selectionCount: selectedItemsLength
@@ -469,10 +471,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
-  }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index$1) => {
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const isIndeterminate = selectedItems.length !== 0 && item['isSelectAll'] && !isChecked;
     const itemProps = getItemProps({
@@ -482,11 +484,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
       ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/OverflowMenu/next/index.d.ts

@@ -38,6 +38,10 @@ interface OverflowMenuProps {
      * Specify how the trigger tooltip should be aligned.
      */
     tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export { OverflowMenu };

package/lib/components/OverflowMenu/next/index.js

@@ -15,7 +15,8 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var react = require('@floating-ui/react');
-var index = require('../../IconButton/index.js');
+var index = require('../../FeatureFlags/index.js');
+var index$1 = require('../../IconButton/index.js');
 var Menu = require('../../Menu/Menu.js');
 require('../../Menu/MenuItem.js');
 var mergeRefs = require('../../../tools/mergeRefs.js');
@@ -40,14 +41,16 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     size = defaultSize,
     menuAlignment = 'bottom-start',
     tooltipAlignment,
+    menuTarget,
     ...rest
   } = _ref;
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     placement,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     // Computing the position starts with initial positioning
     // via `placement`.
     placement: menuAlignment,
@@ -59,14 +62,16 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     // Middleware are executed as an in-between “middle” step of the
     // initial `placement` computation and eventual return of data for
     // rendering. Each middleware is executed in order.
-    middleware: [react.flip({
+    middleware: [autoAlign && react.flip({
       // An explicit array of placements to try if the initial
       // `placement` doesn’t fit on the axes in which overflow
       // is checked.
       fallbackPlacements: menuAlignment.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
     })],
     whileElementsMounted: react.autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const id = useId.useId('overflowmenu');
   const prefix = usePrefix.usePrefix();
@@ -80,21 +85,21 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       Object.keys(floatingStyles).forEach(style => {
         if (refs.floating.current) {
           refs.floating.current.style[style] = floatingStyles[style];
         }
       });
     }
-  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
+  }, [floatingStyles, enableFloatingStyles, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
     }
   }
   const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`, {
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const menuClasses = cx__default["default"](`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
@@ -105,7 +110,7 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     className: containerClasses,
     "aria-owns": open ? id : undefined,
     ref: forwardRef
-  }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }), /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
     "aria-controls": open ? id : undefined,
     "aria-haspopup": true,
     "aria-expanded": open,
@@ -125,12 +130,13 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     className: menuClasses,
     id: id,
     size: size,
-    legacyAutoalign: !autoAlign,
+    legacyAutoalign: !enableFloatingStyles,
     open: open,
     onClose: handleClose,
     x: x,
     y: y,
-    label: label
+    label: label,
+    target: menuTarget
   }, children));
 });
 OverflowMenu.propTypes = {
@@ -166,7 +172,11 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget: PropTypes__default["default"].instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 exports.OverflowMenu = OverflowMenu;

package/lib/components/PaginationNav/PaginationNav.js

@@ -223,7 +223,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   }
   function pageWouldBeHidden(page) {
     const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
-    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front || page === 0;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
   }

package/lib/components/Popover/index.js

@@ -21,6 +21,7 @@ var useEvent = require('../../internal/useEvent.js');
 var createPropAdapter = require('../../tools/createPropAdapter.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -75,6 +76,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   const floating = React.useRef(null);
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = createPropAdapter.mapPopoverAlignProp(initialAlign);
 
   // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
@@ -127,7 +129,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     floatingStyles,
     placement,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     placement: align,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -135,13 +137,15 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), react.flip({
+    middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.flip({
       fallbackAxisSideDirection: 'start'
     }), react.arrow({
       element: caretRef
-    }), floatingUi_dom.hide()],
+    }), autoAlign && floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const value = React.useMemo(() => {
     return {
@@ -158,7 +162,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     }
   }
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -190,7 +194,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
         }
       }
     }
-  }, [floatingStyles, refs.floating, autoAlign, middlewareData, placement, caret]);
+  }, [floatingStyles, refs.floating, enableFloatingStyles, middlewareData, placement, caret]);
   const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
   const currentAlignment = autoAlign && placement !== align ? placement : align;
   const className = cx__default["default"]({
@@ -199,7 +203,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
@@ -215,8 +219,8 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
      * is on, even if they are a trigger element.
      */
     const isTriggerElement = item?.type === 'button';
-    const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
-    const isAllowedTriggerComponent = autoAlign && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
+    const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
@@ -235,7 +239,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these caes we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') {
+          if (enableFloatingStyles && item?.type?.displayName !== 'PopoverContent' || enableFloatingStyles && item?.type?.displayName === 'ToggletipButton') {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }
@@ -258,7 +262,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), autoAlign || isTabTip ? mappedChildren : children));
+  }), enableFloatingStyles || isTabTip ? mappedChildren : children));
 });
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
@@ -269,7 +273,6 @@ if (process.env.NODE_ENV !== "production") {
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
-   
    */
   align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
   // deprecated use top-start instead
@@ -355,18 +358,19 @@ _ref2, forwardRef) {
     autoAlign
   } = React__default["default"].useContext(PopoverContext);
   const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"](`${prefix}--popover-content`, className),
     ref: ref
-  }, children, autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, children, enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]({
       [`${prefix}--popover-caret`]: true,
       [`${prefix}--popover--auto-align`]: true
     }),
     ref: caretRef
-  })), !autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+  })), !enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]({
       [`${prefix}--popover-caret`]: true
     }),

package/lib/components/Portal/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface PortalProps {
+    /**
+     * Specify the children elements to be rendered inside of the <Portal>
+     */
+    children: ReactNode;
+    /**
+     * Provide a ref for a container node to render the portal
+     */
+    container?: React.RefObject<HTMLElement>;
+}
+/**
+ * Helper component for rendering content within a portal. By default, the
+ * portal will render into document.body. You can customize this behavior with
+ * the `container` prop. Any `children` provided to this component will be
+ * rendered inside of the container.
+ */
+declare function Portal({ container, children, }: PortalProps): React.ReactPortal | null;
+export { Portal };