@carbon/react 1.53.1 → 1.54.0

package/lib/components/Stack/{index.js → VStack.js}

@@ -17,12 +17,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const HStack = /*#__PURE__*/React__default["default"].forwardRef(function HStack(props, ref) {
-  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
-    ref: ref,
-    orientation: "horizontal"
-  }));
-});
 const VStack = /*#__PURE__*/React__default["default"].forwardRef(function VStack(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
@@ -30,6 +24,4 @@ const VStack = /*#__PURE__*/React__default["default"].forwardRef(function VStack
   }));
 });
 
-exports.Stack = Stack.Stack;
-exports.HStack = HStack;
 exports.VStack = VStack;

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

@@ -4,9 +4,6 @@
  * 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 { ReactNode } from 'react';
-import { Stack } from './Stack';
-import { ForwardRefReturn } from '../../types/common';
-declare const HStack: ForwardRefReturn<ReactNode>;
-declare const VStack: ForwardRefReturn<ReactNode>;
-export { HStack, Stack, VStack };
+export { HStack } from './HStack';
+export { VStack } from './VStack';
+export { Stack, type StackProps } from './Stack';

package/lib/components/StructuredList/StructuredList.d.ts

@@ -144,6 +144,10 @@ export interface StructuredListRowProps extends DivAttrs {
      * Provide a handler that is invoked on the key down event for the control
      */
     onKeyDown?(event: KeyboardEvent): void;
+    /**
+     * Mark if this row should be selectable
+     */
+    selection?: boolean;
 }
 export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
@@ -172,6 +176,10 @@ export declare namespace StructuredListRow {
          * Provide a handler that is invoked on the key down event for the control,
          */
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Mark if this row should be selectable
+         */
+        selection: PropTypes.Requireable<boolean>;
     };
 }
 export interface StructuredListInputProps extends DivAttrs {

package/lib/components/StructuredList/StructuredList.js

@@ -17,6 +17,8 @@ var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var iconsReact = require('@carbon/icons-react');
+var useOutsideClick = require('../../internal/useOutsideClick.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,6 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _StructuredListCell, _RadioButtonChecked, _RadioButton;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
@@ -147,6 +150,7 @@ function StructuredListRow(props) {
     className,
     head,
     onClick,
+    selection,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
@@ -159,25 +163,35 @@ function StructuredListRow(props) {
   };
   const classes = cx__default["default"](`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
     [`${prefix}--structured-list-row--selected`]: selectedRow === id
   }, className);
+  const itemRef = React.useRef(null);
+  const handleClick = () => {
+    setHasFocusWithin(false);
+  };
+  useOutsideClick.useOutsideClick(itemRef, handleClick);
   return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
-    className: classes,
-    "aria-busy": "true"
-  }), children) :
+    className: classes
+  }), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React__default["default"].createElement(StructuredListCell, {
+    head: true
+  }))), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    "aria-busy": "true"
-  }, other, {
+  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
     role: "row",
     className: classes,
+    ref: itemRef,
     onClick: event => {
       setSelectedRow?.(id);
       onClick && onClick(event);
+      if (selection) {
+        // focus items only when selection is enabled
+        setHasFocusWithin(true);
+      }
     },
     onFocus: () => {
       setHasFocusWithin(true);
@@ -188,7 +202,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
     value: value
-  }, children));
+  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, null))), children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -214,7 +228,11 @@ StructuredListRow.propTypes = {
   /**
    * Provide a handler that is invoked on the key down event for the control,
    */
-  onKeyDown: PropTypes__default["default"].func
+  onKeyDown: PropTypes__default["default"].func,
+  /**
+   * Mark if this row should be selectable
+   */
+  selection: PropTypes__default["default"].bool
 };
 function StructuredListInput(props) {
   const defaultId = useId.useId('structureListInput');

package/lib/components/TileGroup/TileGroup.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var RadioTile = require('../RadioTile/RadioTile.js');
-var warning = require('../../internal/warning.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 
@@ -45,28 +44,35 @@ const TileGroup = props => {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
   }
-  const getRadioTiles = () => {
-    const childrenArray = React__default["default"].Children.toArray(children);
-    const radioTiles = childrenArray.map(tileRadio => {
-      const tileRadioProps = tileRadio.props ?? undefined;
-      const {
-        value,
-        ...other
-      } = tileRadioProps;
-      /* istanbul ignore if */
-      if (typeof tileRadioProps.checked !== 'undefined') {
-        process.env.NODE_ENV !== "production" ? warning.warning(false, `Instead of using the checked property on the RadioTile, set
-            the defaultSelected property or valueSelected property on the TileGroup.`) : void 0;
-      }
-      return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, other, {
-        name: name,
-        key: value,
-        value: value,
-        onChange: handleChange,
-        checked: value === selected
-      }));
-    });
-    return radioTiles;
+  const getRadioTilesWithWrappers = children => {
+    const traverseAndModifyChildren = children => {
+      return React__default["default"].Children.map(children, child => {
+        // If RadioTile found, return it with necessary props
+        if (child.type === RadioTile["default"]) {
+          const {
+            value,
+            ...otherProps
+          } = child.props;
+          return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, otherProps, {
+            name: name,
+            key: value,
+            value: value,
+            onChange: handleChange,
+            checked: value === selected
+          }));
+        } else if (child.props && child.props.children) {
+          // If the child is not RadioTile and has children, recheck the children
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            ...child.props,
+            children: traverseAndModifyChildren(child.props.children)
+          });
+        } else {
+          // If the child is neither a RadioTile nor has children, return it as is
+          return child;
+        }
+      });
+    };
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, traverseAndModifyChildren(children));
   };
   const handleChange = (newSelection, value, evt) => {
     if (newSelection !== selected) {
@@ -84,7 +90,7 @@ const TileGroup = props => {
   return /*#__PURE__*/React__default["default"].createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTiles()));
+  }, renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
 };
 TileGroup.propTypes = {
   /**

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

@@ -89,24 +89,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToggletipButton {
-    var propTypes: {
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Provide an accessible label for this button
-         */
-        label: PropTypes.Requireable<string>;
-    };
-}
+export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
 interface ToggletipContentProps {
     children?: ReactNode;
     className?: string | undefined;

package/lib/components/Toggletip/index.js

@@ -160,7 +160,28 @@ Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -188,7 +209,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-function ToggletipButton(_ref3) {
+const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,
     className: customClassName,
@@ -208,9 +229,10 @@ function ToggletipButton(_ref3) {
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
-    className: className
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 ToggletipButton.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
@@ -226,6 +248,7 @@ ToggletipButton.propTypes = {
    */
   label: PropTypes__default["default"].string
 };
+ToggletipButton.displayName = 'ToggletipButton';
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
  * `children` passed in as a prop inside of `PopoverContent` so that they will

package/lib/components/Tooltip/Tooltip.js

@@ -44,7 +44,6 @@ function Tooltip(_ref) {
     closeOnActivation = false,
     ...rest
   } = _ref;
-  const containerRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = React.useState(false);
@@ -140,8 +139,7 @@ function Tooltip(_ref) {
     highContrast: true,
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
-    open: open,
-    ref: containerRef
+    open: open
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
   }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
@@ -151,7 +149,6 @@ function Tooltip(_ref) {
     "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,
-    ref: tooltipRef,
     role: "tooltip"
   }, label || description));
 }
@@ -159,7 +156,28 @@ Tooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Pass in the child to which the tooltip will be applied
    */

package/lib/feature-flags.js

@@ -34,5 +34,6 @@ FeatureFlags__namespace.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
-  'enable-v12-tile-radio-icons': false
+  'enable-v12-tile-radio-icons': false,
+  'enable-v12-structured-list-visible-icons': false
 });

package/lib/index.d.ts

@@ -74,6 +74,7 @@ export * from './components/SkeletonIcon';
 export * from './components/SkeletonPlaceholder';
 export * from './components/SkeletonText';
 export * from './components/Slider';
+export * from './components/Stack';
 export * from './components/StructuredList';
 export * from './components/Switch';
 export * from './components/Tab';

package/lib/index.js

@@ -77,6 +77,7 @@ var NumberInput = require('./components/NumberInput/NumberInput.js');
 var OrderedList = require('./components/OrderedList/OrderedList.js');
 var index$9 = require('./components/OverflowMenu/index.js');
 var OverflowMenuItem = require('./components/OverflowMenuItem/OverflowMenuItem.js');
+var Pagination$1 = require('./components/Pagination/Pagination.js');
 var Pagination_Skeleton = require('./components/Pagination/Pagination.Skeleton.js');
 var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
 var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
@@ -85,6 +86,7 @@ var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicato
 var RadioButton = require('./components/RadioButton/RadioButton.js');
 var RadioButton_Skeleton = require('./components/RadioButton/RadioButton.Skeleton.js');
 var RadioButtonGroup = require('./components/RadioButtonGroup/RadioButtonGroup.js');
+var RadioTile = require('./components/RadioTile/RadioTile.js');
 var Search = require('./components/Search/Search.js');
 var Search_Skeleton = require('./components/Search/Search.Skeleton.js');
 var SecondaryButton = require('./components/SecondaryButton/SecondaryButton.js');
@@ -96,6 +98,9 @@ var SkeletonIcon = require('./components/SkeletonIcon/SkeletonIcon.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var index$a = require('./components/Slider/index.js');
+var HStack = require('./components/Stack/HStack.js');
+var VStack = require('./components/Stack/VStack.js');
+var Stack = require('./components/Stack/Stack.js');
 var StructuredList = require('./components/StructuredList/StructuredList.js');
 var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
 var Switch = require('./components/Switch/Switch.js');
@@ -158,11 +163,10 @@ var index$3 = require('./components/Slug/index.js');
 var AiSkeletonPlaceholder = require('./components/AiSkeleton/AiSkeletonPlaceholder.js');
 var AiSkeletonIcon = require('./components/AiSkeleton/AiSkeletonIcon.js');
 var AiSkeletonText = require('./components/AiSkeleton/AiSkeletonText.js');
-var index$h = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/DefinitionTooltip.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
 require('./components/Text/index.js');
-var index$i = require('./components/Theme/index.js');
+var index$h = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var useIdPrefix = require('./internal/useIdPrefix.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
@@ -225,12 +229,9 @@ var TableToolbarSearch = require('./components/DataTable/TableToolbarSearch.js')
 var TableToolbarMenu = require('./components/DataTable/TableToolbarMenu.js');
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
-var Pagination$1 = require('./components/Pagination/Pagination.js');
 var ControlledPasswordInput = require('./components/TextInput/ControlledPasswordInput.js');
 var PasswordInput = require('./components/TextInput/PasswordInput.js');
-var RadioTile = require('./components/RadioTile/RadioTile.js');
 var TreeNode = require('./components/TreeView/TreeNode.js');
-var Stack = require('./components/Stack/Stack.js');
 
 
 
@@ -314,6 +315,7 @@ exports.NumberInput = NumberInput.NumberInput;
 exports.OrderedList = OrderedList["default"];
 exports.OverflowMenu = index$9["default"];
 exports.OverflowMenuItem = OverflowMenuItem["default"];
+exports.Pagination = Pagination$1["default"];
 exports.PaginationSkeleton = Pagination_Skeleton["default"];
 exports.PaginationNav = PaginationNav["default"];
 exports.PrimaryButton = PrimaryButton["default"];
@@ -323,6 +325,7 @@ exports.ProgressStep = ProgressIndicator.ProgressStep;
 exports.RadioButton = RadioButton["default"];
 exports.RadioButtonSkeleton = RadioButton_Skeleton["default"];
 exports.RadioButtonGroup = RadioButtonGroup["default"];
+exports.RadioTile = RadioTile["default"];
 exports.Search = Search["default"];
 exports.SearchSkeleton = Search_Skeleton["default"];
 exports.SecondaryButton = SecondaryButton["default"];
@@ -334,6 +337,9 @@ exports.SkeletonIcon = SkeletonIcon["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.Slider = index$a["default"];
+exports.HStack = HStack.HStack;
+exports.VStack = VStack.VStack;
+exports.Stack = Stack.Stack;
 exports.StructuredListBody = StructuredList.StructuredListBody;
 exports.StructuredListCell = StructuredList.StructuredListCell;
 exports.StructuredListHead = StructuredList.StructuredListHead;
@@ -422,14 +428,12 @@ exports.unstable__SlugContent = index$3.SlugContent;
 exports.unstable__AiSkeletonPlaceholder = AiSkeletonPlaceholder["default"];
 exports.unstable__AiSkeletonIcon = AiSkeletonIcon["default"];
 exports.unstable__AiSkeletonText = AiSkeletonText["default"];
-exports.HStack = index$h.HStack;
-exports.VStack = index$h.VStack;
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
 exports.Tooltip = Tooltip.Tooltip;
-exports.GlobalTheme = index$i.GlobalTheme;
-exports.Theme = index$i.Theme;
-exports.ThemeContext = index$i.ThemeContext;
-exports.useTheme = index$i.useTheme;
+exports.GlobalTheme = index$h.GlobalTheme;
+exports.Theme = index$h.Theme;
+exports.ThemeContext = index$h.ThemeContext;
+exports.useTheme = index$h.useTheme;
 exports.PrefixContext = usePrefix.PrefixContext;
 exports.usePrefix = usePrefix.usePrefix;
 exports.useIdPrefix = useIdPrefix.useIdPrefix;
@@ -493,9 +497,6 @@ exports.TableToolbarSearch = TableToolbarSearch["default"];
 exports.TableToolbarMenu = TableToolbarMenu["default"];
 exports.FilterableMultiSelect = FilterableMultiSelect["default"];
 exports.MultiSelect = MultiSelect["default"];
-exports.Pagination = Pagination$1["default"];
 exports.ControlledPasswordInput = ControlledPasswordInput["default"];
 exports.PasswordInput = PasswordInput["default"];
-exports.RadioTile = RadioTile["default"];
 exports.TreeNode = TreeNode["default"];
-exports.Stack = Stack.Stack;

package/lib/internal/FloatingMenu.js

@@ -19,13 +19,35 @@ var navigation = require('./keyboard/navigation.js');
 var warning = require('./warning.js');
 var wrapFocus = require('./wrapFocus.js');
 var usePrefix = require('./usePrefix.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var match = require('./keyboard/match.js');
+var keys = require('./keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 /**
  * The structure for the position of floating menu.
@@ -359,6 +381,19 @@ class FloatingMenu extends React__default["default"].Component {
         });
       }
     });
+    /**
+     * Keydown handler for when focus wrap behavior is enabled
+     * @param {Event} event
+     */
+    _rollupPluginBabelHelpers.defineProperty(this, "handleKeyDown", event => {
+      if (match.match(event, keys.Tab) && this._menuBody) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: this._menuBody,
+          currentActiveNode: event.target,
+          event
+        });
+      }
+    });
   }
   componentWillUnmount() {
     this.hResize.release();
@@ -387,19 +422,24 @@ class FloatingMenu extends React__default["default"].Component {
     const {
       context: prefix
     } = this;
+    const focusTrapWithoutSentinels = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
     if (typeof document !== 'undefined') {
       const {
         focusTrap,
         target
       } = this.props;
-      return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
-        onBlur: focusTrap ? this.handleBlur : null
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
+      return /*#__PURE__*/ReactDOM__default["default"].createPortal(
+      /*#__PURE__*/
+      //eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React__default["default"].createElement("div", {
+        onBlur: focusTrap && !focusTrapWithoutSentinels ? this.handleBlur : () => {},
+        onKeyDown: focusTrapWithoutSentinels ? this.handleKeyDown : () => {}
+      }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",
         role: "link",
         className: `${prefix}--visually-hidden`
-      }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default["default"].createElement("span", {
+      }, "Focus sentinel"), this._getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
         ref: this.endSentinel,
         tabIndex: "0",
         role: "link",

package/lib/internal/environment.js

@@ -14,6 +14,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document.createElement);
 
 exports.canUseDOM = canUseDOM;

package/lib/internal/keyboard/navigation.js

@@ -43,7 +43,9 @@ const getNextIndex = (key, index, arrayLength) => {
  */
 const DOCUMENT_POSITION_BROAD_PRECEDING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
@@ -51,7 +53,9 @@ typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_
  */
 const DOCUMENT_POSITION_BROAD_FOLLOWING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**
  * CSS selector that selects major nodes that are sequential-focusable.

package/lib/internal/useOutsideClick.js

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useEvent = require('./useEvent.js');
+var environment = require('./environment.js');
+
+function useOutsideClick(ref, callback) {
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
+  // treated as a constant as it will be false when executed in a Node.js
+  // environment and true when executed in the browser
+  if (environment.canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEvent.useEvent(window, 'click', event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        savedCallback.current(event);
+      }
+    });
+  }
+}
+
+exports.useOutsideClick = useOutsideClick;