@carbon/react 1.53.1 → 1.54.0

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

@@ -6,15 +6,18 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
+import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import { Text } from '../Text/Text.js';
 
+var _StructuredListCell, _RadioButtonChecked, _RadioButton;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
@@ -137,6 +140,7 @@ function StructuredListRow(props) {
     className,
     head,
     onClick,
+    selection,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -149,25 +153,35 @@ function StructuredListRow(props) {
   };
   const classes = cx(`${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 = useRef(null);
+  const handleClick = () => {
+    setHasFocusWithin(false);
+  };
+  useOutsideClick(itemRef, handleClick);
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
-    className: classes,
-    "aria-busy": "true"
-  }), children) :
+    className: classes
+  }), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React__default.createElement(StructuredListCell, {
+    head: true
+  }))), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default.createElement("div", _extends({
-    "aria-busy": "true"
-  }, other, {
+  React__default.createElement("div", _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);
@@ -178,7 +192,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
     value: value
-  }, children));
+  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default.createElement(RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default.createElement(RadioButton, null))), children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -204,7 +218,11 @@ StructuredListRow.propTypes = {
   /**
    * Provide a handler that is invoked on the key down event for the control,
    */
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  /**
+   * Mark if this row should be selectable
+   */
+  selection: PropTypes.bool
 };
 function StructuredListInput(props) {
   const defaultId = useId('structureListInput');

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/feature-flags.js

@@ -12,5 +12,6 @@ FeatureFlags.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/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';

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';
@@ -154,7 +159,6 @@ export { Slug as unstable__Slug, SlugActions as unstable__SlugActions, SlugConte
 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 { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 import './components/Text/index.js';
@@ -221,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",

package/es/internal/environment.js

@@ -10,6 +10,10 @@
  *
  * @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);
 
 export { canUseDOM };

package/es/internal/keyboard/navigation.js

@@ -39,7 +39,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,
@@ -47,7 +49,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/es/internal/useOutsideClick.js

@@ -0,0 +1,31 @@
+/**
+ * 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 { useRef, useEffect } from 'react';
+import { useEvent } from './useEvent.js';
+import { canUseDOM } from './environment.js';
+
+function useOutsideClick(ref, callback) {
+  const savedCallback = useRef(callback);
+  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 (canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEvent(window, 'click', event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        savedCallback.current(event);
+      }
+    });
+  }
+}
+
+export { useOutsideClick };

package/es/internal/wrapFocus.js

@@ -6,7 +6,9 @@
  */
 
 import findLast from 'lodash.findlast';
+import { useEffect } from 'react';
 import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboard/navigation.js';
+import { tabbable } from 'tabbable';
 
 /**
  * @param {Node} node A DOM node.
@@ -60,4 +62,52 @@ function wrapFocus(_ref) {
   }
 }
 
-export { wrapFocus as default, elementOrParentIsFloatingMenu };
+/**
+ * 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
+    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(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();
+  }
+}
+
+export { wrapFocus as default, elementOrParentIsFloatingMenu, wrapFocusWithoutSentinels };

package/es/tools/createPropAdapter.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+/**
+ * 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;
+  }
+}
+
+export { mapPopoverAlignProp };

package/lib/components/Button/Button.d.ts

@@ -14,7 +14,7 @@ export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"
 export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
 export declare const ButtonTooltipPositions: string[];
 export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
-interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify the message read by screen readers for the danger button variant
      */