@carbon/react 1.53.0 → 1.54.0-rc.0

package/es/components/RadioTile/RadioTile.js

@@ -26,7 +26,6 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     children,
     className: customClassName,
     disabled,
-    // eslint-disable-next-line no-unused-vars
     light,
     checked,
     name,
@@ -70,9 +69,9 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     disabled: disabled,
     id: inputId,
     name: name,
-    onChange: !disabled ? handleOnChange : null,
-    onKeyDown: !disabled ? handleOnKeyDown : null,
-    tabIndex: !disabled ? tabIndex : null,
+    onChange: !disabled ? handleOnChange : undefined,
+    onKeyDown: !disabled ? handleOnKeyDown : undefined,
+    tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
     ref: ref
@@ -85,49 +84,50 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: `${prefix}--tile-content`
   }, children)));
 });
+RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
   /**
-   * `true` if this tile should be selected.
+   * Specify whether the `RadioTile` should be checked.
    */
   checked: PropTypes.bool,
   /**
-   * The tile content.
+   * The `RadioTile` content.
    */
   children: PropTypes.node,
   /**
-   * The CSS class names.
+   * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes.string,
   /**
-   * Specify whether the RadioTile should be disabled
+   * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes.bool,
   /**
-   * The ID of the `<input>`.
+   * Provide a unique id for the underlying `<input>`.
    */
   id: PropTypes.string,
   /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * `true` to use the light version. For use on `$layer-01` backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `RadioTile` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
+  light: deprecate(PropTypes.bool, 'The `light` prop for `RadioTile` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
-   * The `name` of the `<input>`.
+   * Provide a `name` for the underlying `<input>`.
    */
   name: PropTypes.string,
   /**
-   * The handler of the massaged `change` event on the `<input>`.
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes.
    */
   onChange: PropTypes.func,
   /**
-   * Specify the tab index of the wrapper element
+   * Specify the tab index of the underlying `<input>`.
    */
   tabIndex: PropTypes.number,
   /**
-   * The `value` of the `<input>`.
+   * Specify the value of the underlying `<input>`.
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
-var RadioTile$1 = RadioTile;
 
-export { RadioTile$1 as default };
+export { RadioTile as default };

package/es/components/RadioTile/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 RadioTile, { RadioTileProps } from './RadioTile';
+export default RadioTile;
+export { RadioTile };
+export type { RadioTileProps };

package/es/components/Slug/index.js

@@ -76,7 +76,6 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     autoAlign = true,
     children,
     className,
-    dotType,
     kind = 'default',
     onRevertClick,
     revertActive,
@@ -89,11 +88,6 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
   const id = useId('slug');
   const slugClasses = cx(className, {
     [`${prefix}--slug`]: true,
-    [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
-    // Need to come up with a better name; explainable?
-    // Need to be able to target the non-hollow variant another way
-    // other than using `:not` all over the styles
-    [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
     [`${prefix}--slug--revert`]: revertActive
   });
   const slugButtonClasses = cx({
@@ -142,9 +136,30 @@ Slug.propTypes = {
   /**
    * Specify how the popover should align with the button
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes.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']),
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
   /**
@@ -155,14 +170,10 @@ Slug.propTypes = {
    * Specify an optional className to be added to the AI slug
    */
   className: PropTypes.string,
-  /**
-   * Specify the type of dot that should be rendered in front of the inline variant
-   */
-  dotType: PropTypes.oneOf(['default', 'hollow']),
   /**
    * Specify the type of Slug, from the following list of types:
    */
-  kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+  kind: PropTypes.oneOf(['default', 'inline']),
   /**
    * Callback function that fires when the revert button is clicked
    */

package/es/components/Stack/HStack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 from 'react';
+import { StackProps } from './Stack';
+declare const HStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { HStack };

package/es/components/Stack/HStack.js

@@ -0,0 +1,23 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Stack } from './Stack.js';
+
+const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
+    ref: ref,
+    orientation: "horizontal"
+  }), children);
+});
+
+export { HStack };

package/es/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ import React from 'react';
  * @type {Array<number>}
  */
 declare const SPACING_STEPS: number[];
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Provide a custom element type to render as the outermost element in
      * the Stack component. By default, this component will render a `div`.

package/es/components/Stack/Stack.js

@@ -6,10 +6,10 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { spacing } from '@carbon/layout';
+import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import { spacing } from '@carbon/layout';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 /**

package/es/components/Stack/VStack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 from 'react';
+import { StackProps } from './Stack';
+declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { VStack };

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

@@ -8,14 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Stack } from './Stack.js';
-export { Stack } from './Stack.js';
 
-const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(props, ref) {
-  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
-    ref: ref,
-    orientation: "horizontal"
-  }));
-});
 const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
@@ -23,4 +16,4 @@ const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref
   }));
 });
 
-export { HStack, VStack };
+export { VStack };

package/es/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/es/components/TileGroup/TileGroup.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
-import { warning } from '../../internal/warning.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
@@ -36,28 +35,35 @@ const TileGroup = props => {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
   }
-  const getRadioTiles = () => {
-    const childrenArray = React__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(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.createElement(RadioTile, _extends({}, other, {
-        name: name,
-        key: value,
-        value: value,
-        onChange: handleChange,
-        checked: value === selected
-      }));
-    });
-    return radioTiles;
+  const getRadioTilesWithWrappers = children => {
+    const traverseAndModifyChildren = children => {
+      return React__default.Children.map(children, child => {
+        // If RadioTile found, return it with necessary props
+        if (child.type === RadioTile) {
+          const {
+            value,
+            ...otherProps
+          } = child.props;
+          return /*#__PURE__*/React__default.createElement(RadioTile, _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.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.createElement(React__default.Fragment, null, traverseAndModifyChildren(children));
   };
   const handleChange = (newSelection, value, evt) => {
     if (newSelection !== selected) {
@@ -75,7 +81,7 @@ const TileGroup = props => {
   return /*#__PURE__*/React__default.createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, getRadioTiles()));
+  }, renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, getRadioTilesWithWrappers(children)));
 };
 TileGroup.propTypes = {
   /**

package/es/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/es/components/Toggletip/index.js

@@ -150,7 +150,28 @@ Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes.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.
@@ -178,7 +199,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-function ToggletipButton(_ref3) {
+const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,
     className: customClassName,
@@ -198,9 +219,10 @@ function ToggletipButton(_ref3) {
   return /*#__PURE__*/React__default.createElement("button", _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
@@ -216,6 +238,7 @@ ToggletipButton.propTypes = {
    */
   label: PropTypes.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/es/components/Tooltip/Tooltip.js

@@ -34,7 +34,6 @@ function Tooltip(_ref) {
     closeOnActivation = false,
     ...rest
   } = _ref;
-  const containerRef = useRef(null);
   const tooltipRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = useState(false);
@@ -130,8 +129,7 @@ function Tooltip(_ref) {
     highContrast: true,
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
-    open: open,
-    ref: containerRef
+    open: open
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
   }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
@@ -141,7 +139,6 @@ function Tooltip(_ref) {
     "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,
-    ref: tooltipRef,
     role: "tooltip"
   }, label || description));
 }
@@ -149,7 +146,28 @@ Tooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes.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/es/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';
@@ -116,6 +117,7 @@ export * from './components/Popover';
 export * from './components/ProgressBar';
 export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
 export { ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, } from './components/ChatButton';
+export { AiSkeletonText as unstable__AiSkeletonText, AiSkeletonIcon as unstable__AiSkeletonIcon, AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder, } from './components/AiSkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/es/index.js

@@ -73,6 +73,7 @@ export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
+export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
@@ -81,6 +82,7 @@ export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
+export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
@@ -92,6 +94,9 @@ export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as Slider } from './components/Slider/index.js';
+export { HStack } from './components/Stack/HStack.js';
+export { VStack } from './components/Stack/VStack.js';
+export { Stack } from './components/Stack/Stack.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
@@ -151,7 +156,9 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { Slug as unstable__Slug, SlugActions as unstable__SlugActions, SlugContent as unstable__SlugContent } from './components/Slug/index.js';
-export { HStack, VStack } from './components/Stack/index.js';
+export { default as unstable__AiSkeletonPlaceholder } from './components/AiSkeleton/AiSkeletonPlaceholder.js';
+export { default as unstable__AiSkeletonIcon } from './components/AiSkeleton/AiSkeletonIcon.js';
+export { default as unstable__AiSkeletonText } from './components/AiSkeleton/AiSkeletonText.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 import './components/Text/index.js';
@@ -218,9 +225,6 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
-export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
-export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
-export { Stack } from './components/Stack/Stack.js';

package/es/internal/FloatingMenu.js

@@ -13,8 +13,11 @@ import window from 'window-or-global';
 import OptimizedResize from './OptimizedResize.js';
 import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
 import { warning } from './warning.js';
-import wrapFocus from './wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels } from './wrapFocus.js';
 import { PrefixContext } from './usePrefix.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { match } from './keyboard/match.js';
+import { Tab } from './keyboard/keys.js';
 
 /**
  * The structure for the position of floating menu.
@@ -348,6 +351,19 @@ class FloatingMenu extends React__default.Component {
         });
       }
     });
+    /**
+     * Keydown handler for when focus wrap behavior is enabled
+     * @param {Event} event
+     */
+    _defineProperty(this, "handleKeyDown", event => {
+      if (match(event, Tab) && this._menuBody) {
+        wrapFocusWithoutSentinels({
+          containerNode: this._menuBody,
+          currentActiveNode: event.target,
+          event
+        });
+      }
+    });
   }
   componentWillUnmount() {
     this.hResize.release();
@@ -376,19 +392,24 @@ class FloatingMenu extends React__default.Component {
     const {
       context: prefix
     } = this;
+    const focusTrapWithoutSentinels = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
     if (typeof document !== 'undefined') {
       const {
         focusTrap,
         target
       } = this.props;
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement("div", {
-        onBlur: focusTrap ? this.handleBlur : null
-      }, /*#__PURE__*/React__default.createElement("span", {
+      return /*#__PURE__*/ReactDOM.createPortal(
+      /*#__PURE__*/
+      //eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React__default.createElement("div", {
+        onBlur: focusTrap && !focusTrapWithoutSentinels ? this.handleBlur : () => {},
+        onKeyDown: focusTrapWithoutSentinels ? this.handleKeyDown : () => {}
+      }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",
         role: "link",
         className: `${prefix}--visually-hidden`
-      }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default.createElement("span", {
+      }, "Focus sentinel"), this._getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
         ref: this.endSentinel,
         tabIndex: "0",
         role: "link",