@carbon/react 1.70.0 → 1.71.0

package/es/components/AILabel/index.js

@@ -31,8 +31,8 @@ const AILabelContent = /*#__PURE__*/React__default.forwardRef(function AILabelCo
     item.type?.displayName === 'AILabelActions';
   });
   const aiLabelContentClasses = cx(className, {
-    [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
+    [`${prefix}--ai-label-content`]: true,
+    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContent, {
     className: aiLabelContentClasses
@@ -41,11 +41,11 @@ const AILabelContent = /*#__PURE__*/React__default.forwardRef(function AILabelCo
 AILabelContent.displayName = 'AILabelContent';
 AILabelContent.propTypes = {
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the AILabel ToggleTip
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to the AI slug callout
+   * Specify an optional className to be added to the AILabel callout
    */
   className: PropTypes.string
 };
@@ -57,7 +57,7 @@ const AILabelActions = /*#__PURE__*/React__default.forwardRef(function AILabelAc
   } = _ref2;
   const prefix = usePrefix();
   const aiLabelActionsClasses = cx(className, {
-    [`${prefix}--slug-actions`]: true
+    [`${prefix}--ai-label-actions`]: true
   });
   return /*#__PURE__*/React__default.createElement(ToggletipActions, {
     className: aiLabelActionsClasses
@@ -66,11 +66,11 @@ const AILabelActions = /*#__PURE__*/React__default.forwardRef(function AILabelAc
 AILabelActions.displayName = 'AILabelActions';
 AILabelActions.propTypes = {
   /**
-   * Specify the content you want rendered inside the slug callout toolbar
+   * Specify the content you want rendered inside the AILabel callout toolbar
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to the AI slug toolbar
+   * Specify an optional className to be added to the AILabel toolbar
    */
   className: PropTypes.string
 };
@@ -104,14 +104,14 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
   const prefix = usePrefix();
   const id = useId('AILabel');
   const aiLabelClasses = cx(className, {
-    [`${prefix}--slug`]: true,
-    [`${prefix}--slug--revert`]: revertActive
+    [`${prefix}--ai-label`]: true,
+    [`${prefix}--ai-label--revert`]: revertActive
   });
   const aiLabelButtonClasses = cx({
-    [`${prefix}--slug__button`]: true,
-    [`${prefix}--slug__button--${size}`]: size,
-    [`${prefix}--slug__button--${kind}`]: kind,
-    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
+    [`${prefix}--ai-label__button`]: true,
+    [`${prefix}--ai-label__button--${size}`]: size,
+    [`${prefix}--ai-label__button--${kind}`]: kind,
+    [`${prefix}--ai-label__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
@@ -135,9 +135,9 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
     className: aiLabelButtonClasses,
     label: ariaLabelText
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--slug__text`
+    className: `${prefix}--ai-label__text`
   }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--slug__additional-text`
+    className: `${prefix}--ai-label__additional-text`
   }, aiTextLabel || textLabel)), children));
 });
 AILabel.displayName = 'AILabel';

package/es/components/Checkbox/Checkbox.d.ts

@@ -16,6 +16,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * exposing to the user
      */
     labelText: NonNullable<ReactNode>;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Checkbox` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the underlying input should be checked by default
      */
@@ -45,6 +49,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     invalidText?: ReactNode;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNode;

package/es/components/Checkbox/Checkbox.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -19,6 +20,7 @@ import { Text } from '../Text/Text.js';
 const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
+    decorator,
     helperText,
     id,
     labelText,
@@ -48,15 +50,16 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-wrapper--warning`]: showWarning,
-    [`${prefix}--checkbox-wrapper--slug`]: slug
+    [`${prefix}--checkbox-wrapper--slug`]: slug,
+    [`${prefix}--checkbox-wrapper--decorator`]: decorator
   });
   const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -105,7 +108,9 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title: title
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)), /*#__PURE__*/React__default.createElement("div", {
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--checkbox-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -126,6 +131,10 @@ Checkbox.propTypes = {
    * Specify an optional className to be applied to the <label> node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Checkbox` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the underlying input should be checked by default
    */
@@ -176,7 +185,7 @@ Checkbox.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/es/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -8,6 +8,7 @@ import React, { ReactNode } from 'react';
 export interface CheckboxGroupProps {
     children?: ReactNode;
     className?: string;
+    decorator?: ReactNode;
     helperText?: ReactNode;
     invalid?: boolean;
     invalidText?: ReactNode;
@@ -15,6 +16,10 @@ export interface CheckboxGroupProps {
     orientation?: 'horizontal' | 'vertical';
     legendText: ReactNode;
     readOnly?: boolean;
+    /**
+     * * @deprecated please use decorator instead.
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
     slug?: ReactNode;
     warn?: boolean;
     warnText?: ReactNode;

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -17,6 +18,7 @@ const CheckboxGroup = _ref => {
   let {
     children,
     className,
+    decorator,
     helperText,
     invalid,
     invalidText,
@@ -43,13 +45,14 @@ const CheckboxGroup = _ref => {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
-    [`${prefix}--checkbox-group--slug`]: slug
+    [`${prefix}--checkbox-group--slug`]: slug,
+    [`${prefix}--checkbox-group--decorator`]: decorator
   });
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (/*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini',
       kind: 'default'
     });
@@ -63,7 +66,9 @@ const CheckboxGroup = _ref => {
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--checkbox-group-inner--decorator`
+  }, normalizedDecorator) : ''), children, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -84,6 +89,10 @@ CheckboxGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+   */
+  decorator: PropTypes.node,
   /**
    * Provide text for the form group for additional help
    */
@@ -116,7 +125,7 @@ CheckboxGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the form group is currently in warning state
    */

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -6,11 +6,14 @@
  */
 import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
+export type DeprecatedCodeSnippetAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewCodeSnippetAlignmnet = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignmnet;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: CodeSnippetAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */
@@ -106,7 +109,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string>;
+        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/CodeSnippet/CodeSnippet.js

@@ -19,12 +19,26 @@ import uniqueId from '../../tools/uniqueId.js';
 import copy from 'copy-to-clipboard';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 
 const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
@@ -232,7 +246,32 @@ CodeSnippet.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  align: deprecateValuesWithin(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']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Specify a label to be read by screen readers on the containing textbox
    * node

package/es/components/ComboBox/ComboBox.d.ts

@@ -147,7 +147,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     placeholder?: string;
     /**
-     * Is the ComboBox readonly?
+     * Whether or not the component is read-only
      */
     readOnly?: boolean;
     /**

package/es/components/ComboBox/ComboBox.js

@@ -226,7 +226,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
       });
-
       // selectedItem has been updated externally, need to update state and call onChange
       if (inputValue !== currentInputValue) {
         setInputValue(currentInputValue);
@@ -435,30 +434,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       } = _ref4;
       const normalizedInput = inputValue || '';
       setInputValue(normalizedInput);
-      if (selectedItemProp && !inputValue) {
-        // ensure onChange is called when selectedItem is cleared
-        onChange({
-          selectedItem,
-          inputValue: normalizedInput
-        });
-      }
       setHighlightedIndex(indexToHighlight(normalizedInput));
     },
-    onSelectedItemChange(_ref5) {
-      let {
-        selectedItem
-      } = _ref5;
-      // only call onChange if new selection is updated from previous
-      if (!isEqual(selectedItem, selectedItemProp)) {
-        onChange({
-          selectedItem
-        });
-      }
-    },
-    onHighlightedIndexChange: _ref6 => {
+    onHighlightedIndexChange: _ref5 => {
       let {
         highlightedIndex
-      } = _ref6;
+      } = _ref5;
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -470,11 +451,27 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     },
+    onStateChange: _ref6 => {
+      let {
+        type,
+        selectedItem: newSelectedItem
+      } = _ref6;
+      if (type === '__item_click__' && !isEqual(selectedItemProp, newSelectedItem)) {
+        onChange({
+          selectedItem: newSelectedItem
+        });
+      }
+      if (type === '__function_select_item__' || type === '__input_keydown_enter__') {
+        onChange({
+          selectedItem: newSelectedItem
+        });
+      }
+    },
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
     isItemDisabled(item, _index) {
-      return item.disabled;
+      return item?.disabled;
     },
     ...downshiftProps
   });

package/es/components/ComboButton/index.js

@@ -22,6 +22,7 @@ import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 
 var _ChevronDown;
 const defaultTranslations = {
@@ -32,6 +33,19 @@ const defaultTranslations = {
  * Message ids that will be passed to translateWithId().
  */
 
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
@@ -191,7 +205,32 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  tooltipAlignment: deprecateValuesWithin(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']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -39,6 +39,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the Modal content should have any inner padding.
      */
@@ -70,6 +74,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
      */
     slug?: ReactNode;

package/es/components/ComposedModal/ComposedModal.js

@@ -22,6 +22,7 @@ import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } f
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';
 
@@ -98,6 +99,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: customClassName,
     containerClassName,
     danger,
+    decorator,
     isFullWidth,
     onClose,
     onKeyDown,
@@ -189,7 +191,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const modalClass = cx(`${prefix}--modal`, {
     'is-visible': isOpen,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, customClassName);
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
@@ -248,10 +251,10 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `sm`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
@@ -277,7 +280,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, normalizedSlug, childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -309,6 +314,10 @@ ComposedModal.propTypes = {
    * Note that this prop is not applied if you render primary/danger button by yourself
    */
   danger: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the Modal content should have any inner padding.
    */
@@ -348,10 +357,7 @@ ComposedModal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
-   */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 
 export { ModalBody, ComposedModal as default };

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -38,7 +38,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      */
     selectedIndex: number;
     /**
-     * Choose whether or not to automatically change selection on focus
+     * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
      */
     selectionMode?: 'automatic' | 'manual';
     /**
@@ -82,7 +82,7 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          */
         selectedIndex: PropTypes.Requireable<number>;
         /**
-         * Choose whether or not to automatically change selection on focus
+         * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
          */
         selectionMode: PropTypes.Requireable<string>;
         /**

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -163,7 +163,7 @@ _defineProperty(ContentSwitcher, "propTypes", {
    */
   selectedIndex: PropTypes.number,
   /**
-   * Choose whether or not to automatically change selection on focus
+   * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
    */
   selectionMode: PropTypes.oneOf(['automatic', 'manual']),
   /**

package/es/components/Copy/Copy.d.ts

@@ -6,11 +6,14 @@
  */
 import PropTypes from 'prop-types';
 import React, { AnimationEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
+export type DeprecatedCopyAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewCopyAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CopyAlignment = DeprecatedCopyAlignment | NewCopyAlignment;
 interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: CopyAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */
@@ -45,7 +48,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string>;
+        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip
          */