@carbon/react 1.53.0 → 1.54.0-rc.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/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/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/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');
@@ -155,11 +160,13 @@ var index$2 = require('./components/OverflowMenuV2/index.js');
 var index$g = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var index$3 = require('./components/Slug/index.js');
-var index$h = require('./components/Stack/index.js');
+var AiSkeletonPlaceholder = require('./components/AiSkeleton/AiSkeletonPlaceholder.js');
+var AiSkeletonIcon = require('./components/AiSkeleton/AiSkeletonIcon.js');
+var AiSkeletonText = require('./components/AiSkeleton/AiSkeletonText.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');
@@ -222,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');
 
 
 
@@ -311,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"];
@@ -320,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"];
@@ -331,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;
@@ -416,14 +425,15 @@ exports.ProgressBar = ProgressBar["default"];
 exports.unstable__Slug = index$3.Slug;
 exports.unstable__SlugActions = index$3.SlugActions;
 exports.unstable__SlugContent = index$3.SlugContent;
-exports.HStack = index$h.HStack;
-exports.VStack = index$h.VStack;
+exports.unstable__AiSkeletonPlaceholder = AiSkeletonPlaceholder["default"];
+exports.unstable__AiSkeletonIcon = AiSkeletonIcon["default"];
+exports.unstable__AiSkeletonText = AiSkeletonText["default"];
 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;
@@ -487,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/wrapFocus.js

@@ -10,7 +10,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var findLast = require('lodash.findlast');
+var React = require('react');
 var navigation = require('./keyboard/navigation.js');
+var tabbable = require('tabbable');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -68,5 +70,54 @@ function wrapFocus(_ref) {
   }
 }
 
+/**
+ * Ensures the focus is kept in the given `containerNode`, implementing "focus-wrap" behavior.
+ * Note: This must be called *before* focus moves using onKeyDown or similar.
+ * @param {object} options The options.
+ * @param {Node|null} options.containerNode
+ * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
+ * @param {KeyboardEvent} options.event The DOM event
+ */
+function wrapFocusWithoutSentinels(_ref2) {
+  let {
+    containerNode,
+    currentActiveNode,
+    event
+  } = _ref2;
+  if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
+    });
+  }
+
+  // The reason we're using tabbable is because it returns the tabbable
+  // items *in tab order*, whereas using our `selectorTabbable` only
+  // returns in DOM order
+  const tabbables = tabbable.tabbable(containerNode);
+  const firstTabbable = tabbables[0];
+  const lastTabbable = tabbables[tabbables.length - 1];
+
+  // console.log(`---------------------------------`);
+  // console.log(containerNode);
+  // console.log(tabbables);
+  // console.log(firstTabbable);
+  // console.log(lastTabbable);
+  // console.log(currentActiveNode);
+
+  // The shift key is used to determine if focus is moving forwards or backwards
+  if (currentActiveNode === lastTabbable && !event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    firstTabbable.focus();
+  }
+  if (currentActiveNode === firstTabbable && event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    lastTabbable.focus();
+  }
+}
+
 exports["default"] = wrapFocus;
 exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;
+exports.wrapFocusWithoutSentinels = wrapFocusWithoutSentinels;

package/lib/tools/createPropAdapter.js

@@ -0,0 +1,44 @@
+/**
+ * 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 });
+
+/**
+ * Create an adapter that converts an object of props with potentially deprecated
+ * prop names to the replacement prop names in a newer version. Useful for guarding
+ * against breaking changes when a prop has been renamed
+ *
+ * @param {Array} spec - an array of options which specify a text or regex
+ * matcher alongside a replacement if there is a match
+ * @returns {Function}
+ */
+function mapPopoverAlignProp(align) {
+  switch (align) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-bottom':
+      return 'left-end';
+    case 'left-top':
+      return 'left-start';
+    case 'right-bottom':
+      return 'right-end';
+    case 'right-top':
+      return 'right-start';
+    default:
+      return align;
+  }
+}
+
+exports.mapPopoverAlignProp = mapPopoverAlignProp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.53.0",
+  "version": "1.54.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,14 +48,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.18.0",
-    "@carbon/icons-react": "^11.38.0",
+    "@carbon/feature-flags": "^0.19.0-rc.0",
+    "@carbon/icons-react": "^11.39.0-rc.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.53.0",
+    "@carbon/styles": "^1.54.0-rc.0",
+    "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.4.0",
+    "downshift": "8.5.0",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -65,6 +66,7 @@
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-is": "^18.2.0",
+    "tabbable": "^6.2.0",
     "use-resize-observer": "^6.0.0",
     "wicg-inert": "^3.1.1",
     "window-or-global": "^1.0.1"
@@ -79,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.33.0",
+    "@carbon/themes": "^11.34.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7920f5261d5867837e0b7e6092c98a6597ac0771"
+  "gitHead": "4e0c7c56e1217ff9b73042006e4ea1d12a39e769"
 }