@carbon/react 1.68.0 → 1.69.0-rc.0

package/lib/components/FileUploader/FileUploader.js

@@ -18,6 +18,7 @@ var FileUploaderButton = require('./FileUploaderButton.js');
 var types = require('../../prop-types/types.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var useId = require('../../internal/useId.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -28,144 +29,123 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-class FileUploader extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      filenames: []
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "nodes", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "uploaderButton", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "handleChange", evt => {
+const FileUploader = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    accept,
+    buttonKind,
+    buttonLabel,
+    className,
+    disabled,
+    filenameStatus,
+    iconDescription,
+    labelDescription,
+    labelTitle,
+    multiple,
+    name,
+    onChange,
+    onClick,
+    onDelete,
+    size,
+    ...other
+  } = _ref;
+  const fileUploaderInstanceId = useId.useId('file-uploader');
+  const [state, updateState] = React.useState({
+    fileNames: []
+  });
+  const nodes = [];
+  const prefix = usePrefix.usePrefix();
+  const handleChange = evt => {
+    evt.stopPropagation();
+    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
+    updateState(prevState => ({
+      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
+    }));
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const handleClick = (evt, _ref2) => {
+    let {
+      index,
+      filenameStatus
+    } = _ref2;
+    if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-      this.setState({
-        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
+      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
+      updateState({
+        fileNames: filteredArray
       });
-      if (this.props.onChange) {
-        this.props.onChange(evt);
+      if (onDelete) {
+        onDelete(evt);
+        uploaderButton.current?.focus?.();
       }
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleClick", (evt, _ref) => {
-      let {
-        index,
-        filenameStatus
-      } = _ref;
-      if (filenameStatus === 'edit') {
-        evt.stopPropagation();
-        const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
-        this.setState({
-          filenames: filteredArray
+      onClick?.(evt);
+    }
+  };
+  const uploaderButton = /*#__PURE__*/React__default["default"].createRef();
+  const classes = cx__default["default"]({
+    [`${prefix}--form-item`]: true,
+    [className]: className
+  });
+  const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
+    [`${prefix}--label-description--disabled`]: disabled
+  });
+  const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classes
+  }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "h3",
+    className: getHelperLabelClasses(`${prefix}--file--label`)
+  }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "p",
+    className: getHelperLabelClasses(`${prefix}--label-description`),
+    id: fileUploaderInstanceId
+  }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
+    innerRef: uploaderButton,
+    disabled: disabled,
+    labelText: buttonLabel,
+    multiple: multiple,
+    buttonKind: buttonKind,
+    onChange: handleChange,
+    disableLabelChanges: true,
+    accept: accept,
+    name: name,
+    size: size,
+    "aria-describedby": fileUploaderInstanceId
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--file-container`
+  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
+    key: index,
+    className: selectedFileClasses,
+    ref: node => nodes[index] = node // eslint-disable-line
+  }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "p",
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--file__state-container`
+  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+    name: name,
+    iconDescription: iconDescription,
+    status: filenameStatus,
+    onKeyDown: evt => {
+      if (match.matches(evt, [keys.Enter, keys.Space])) {
+        handleClick(evt, {
+          index,
+          filenameStatus
         });
-        if (this.props.onDelete) {
-          this.props.onDelete(evt);
-          this.uploaderButton.current?.focus?.();
-        }
-        this.props.onClick?.(evt);
       }
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "clearFiles", () => {
-      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
-      this.setState({
-        filenames: []
-      });
-    });
-  }
-  static getDerivedStateFromProps(_ref2, state) {
-    let {
+    },
+    onClick: evt => handleClick(evt, {
+      index,
       filenameStatus
-    } = _ref2;
-    const {
-      prevFilenameStatus
-    } = state;
-    return prevFilenameStatus === filenameStatus ? null : {
-      filenameStatus,
-      prevFilenameStatus: filenameStatus
-    };
-  }
-  render() {
-    const {
-      iconDescription,
-      buttonLabel = '',
-      buttonKind = 'primary',
-      disabled = false,
-      filenameStatus = 'uploading',
-      labelDescription,
-      labelTitle,
-      className,
-      multiple = false,
-      accept = [],
-      name,
-      size = 'md',
-      onDelete,
-      // eslint-disable-line
-      ...other
-    } = this.props;
-    const prefix = this.context;
-    const classes = cx__default["default"]({
-      [`${prefix}--form-item`]: true,
-      [className]: className
-    });
-    const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
-      [`${prefix}--label-description--disabled`]: disabled
-    });
-    const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
-      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
-    });
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-      className: classes
-    }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "h3",
-      className: getHelperLabelClasses(`${prefix}--file--label`)
-    }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`),
-      id: "description"
-    }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
-      innerRef: this.uploaderButton,
-      disabled: disabled,
-      labelText: buttonLabel,
-      multiple: multiple,
-      buttonKind: buttonKind,
-      onChange: this.handleChange,
-      disableLabelChanges: true,
-      accept: accept,
-      name: name,
-      size: size,
-      "aria-describedby": "description"
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--file-container`
-    }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
-      key: index,
-      className: selectedFileClasses,
-      ref: node => this.nodes[index] = node // eslint-disable-line
-    }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "p",
-      className: `${prefix}--file-filename`,
-      id: name
-    }, name), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--file__state-container`
-    }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
-      name: name,
-      iconDescription: iconDescription,
-      status: filenameStatus,
-      onKeyDown: evt => {
-        if (match.matches(evt, [keys.Enter, keys.Space])) {
-          this.handleClick(evt, {
-            index,
-            filenameStatus
-          });
-        }
-      },
-      onClick: evt => this.handleClick(evt, {
-        index,
-        filenameStatus
-      })
-    }))))));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
+    })
+  }))))));
+});
+FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
    */
@@ -231,7 +211,6 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
    * sizes.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
-});
-_rollupPluginBabelHelpers.defineProperty(FileUploader, "contextType", usePrefix.PrefixContext);
+};
 
 exports["default"] = FileUploader;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { PropsWithChildren, ReactNode } from 'react';
+type IdPrefixProps = {
+    children?: ReactNode;
+    /**
+     * The value used to prefix the auto-generated id placed on some DOM elements
+     */
+    prefix?: string;
+};
+declare function IdPrefix({ children, prefix }: PropsWithChildren<IdPrefixProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace IdPrefix {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The value used to prefix the auto-generated id placed on some DOM elements
+         */
+        prefix: PropTypes.Requireable<string>;
+    };
+}
+export { IdPrefix };

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/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;
   }