@carbon/react 1.70.0-rc.0 → 1.71.0-rc.0

package/es/components/TextArea/TextArea.js

@@ -25,6 +25,7 @@ import { Text } from '../Text/Text.js';
 const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     className,
+    decorator,
     disabled = false,
     id,
     labelText,
@@ -154,7 +155,8 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     [`${prefix}--text-area__wrapper--cols`]: other.cols,
     [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
     [`${prefix}--text-area__wrapper--warn`]: warn,
-    [`${prefix}--text-area__wrapper--slug`]: slug
+    [`${prefix}--text-area__wrapper--slug`]: slug,
+    [`${prefix}--text-area__wrapper--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
@@ -253,10 +255,10 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     ref: ref
   }));
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is 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'
     });
   }
@@ -271,7 +273,9 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--text-area__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -296,6 +300,10 @@ TextArea.propTypes = {
    * Specify the method used for calculating the counter number
    */
   counterMode: PropTypes.oneOf(['character', 'word']),
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -372,7 +380,7 @@ TextArea.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `TextArea` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Provide the current value of the `<textarea>`
    */

package/es/components/TextInput/TextInput.d.ts

@@ -11,6 +11,10 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Specify an optional className to be applied to the `<input>` node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Optionally provide the default value of the `<input>`
      */
@@ -86,6 +90,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNode;

package/es/components/TextInput/TextInput.js

@@ -23,6 +23,7 @@ import { Text } from '../Text/Text.js';
 const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
   let {
     className,
+    decorator,
     disabled = false,
     helperText,
     hideLabel,
@@ -115,7 +116,8 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   });
   const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
     [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input__field-wrapper--slug`]: slug
+    [`${prefix}--text-input__field-wrapper--slug`]: slug,
+    [`${prefix}--text-input__field-wrapper--decorator`]: decorator
   });
   const iconClasses = cx({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -179,10 +181,10 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   }, [ariaAnnouncement, prevAnnouncement]);
   const Icon = normalizedProps.icon;
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is 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'
     });
   }
@@ -197,7 +199,9 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
-  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--text-input__field-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -215,6 +219,10 @@ TextInput.propTypes = {
    * Specify an optional className to be applied to the `<input>` node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optionally provide the default value of the `<input>`
    */
@@ -290,7 +298,7 @@ TextInput.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `TextInput` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the type of the `<input>`
    */

package/es/components/TreeView/TreeNode.js

@@ -63,7 +63,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     }
   };
   const nodesWithProps = React__default.Children.map(children, node => {
-    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+    if (/*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, {
         active,
         depth: depth + 1,

package/es/components/TreeView/TreeView.js

@@ -121,7 +121,7 @@ const TreeView = _ref => {
       sharedNodeProps.tabIndex = 0;
       focusTarget = true;
     }
-    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+    if (/*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
     }
   });

package/es/components/UIShell/HeaderMenu.js

@@ -124,7 +124,7 @@ class HeaderMenu extends React__default.Component {
      * sequence when they might not want to go through all the items.
      */
     _defineProperty(this, "_renderMenuItem", (item, index) => {
-      if ( /*#__PURE__*/React__default.isValidElement(item)) {
+      if (/*#__PURE__*/React__default.isValidElement(item)) {
         return /*#__PURE__*/React__default.cloneElement(item, {
           ref: this.handleItemRef(index)
         });

package/es/components/UIShell/SideNav.js

@@ -96,7 +96,7 @@ function SideNavRenderFunction(_ref, ref) {
   childrenToRender = React__default.Children.map(children, child => {
     // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
     const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       const childJsxElement = child;
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       return /*#__PURE__*/React__default.cloneElement(childJsxElement, {

package/es/components/UIShell/SideNavItems.js

@@ -20,7 +20,7 @@ const SideNavItems = _ref => {
   const prefix = usePrefix();
   const className = cx([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React__default.Children.map(children, child => {
-    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       const childDisplayName = child.type?.displayName;
       return /*#__PURE__*/React__default.cloneElement(child, {

package/es/components/UIShell/SideNavMenu.js

@@ -148,7 +148,7 @@ function hasActiveDescendant(children) {
 
   // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
 
-  if ( /*#__PURE__*/React__default.isValidElement(children)) {
+  if (/*#__PURE__*/React__default.isValidElement(children)) {
     const props = children.props;
     if (props.isActive === true || props['aria-current']) {
       return true;

package/es/components/UIShell/SideNavMenuItem.d.ts

@@ -4,7 +4,7 @@
  * 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, { ComponentProps } from 'react';
+import React, { ElementType, ComponentProps } from 'react';
 import Link from './Link';
 interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
@@ -25,6 +25,10 @@ interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Optional component to render instead of default Link
+     */
+    as?: ElementType;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -18,6 +18,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   const {
     children,
     className: customClassName,
+    as: Component = Link,
     isActive,
     ...rest
   } = props;
@@ -28,7 +29,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Component, _extends({}, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
@@ -52,7 +53,11 @@ SideNavMenuItem.propTypes = {
    * has an href that is the same as the current page. Can also pass in
    * `aria-current="page"`, as well.
    */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType
 };
 
 export { SideNavMenuItem as default };

package/es/components/UIShell/Switcher.js

@@ -62,7 +62,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   };
   const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,

package/lib/components/AILabel/index.js

@@ -41,8 +41,8 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
     item.type?.displayName === 'AILabelActions';
   });
   const aiLabelContentClasses = cx__default["default"](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["default"].createElement(index.ToggletipContent, {
     className: aiLabelContentClasses
@@ -51,11 +51,11 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
 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__default["default"].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__default["default"].string
 };
@@ -67,7 +67,7 @@ const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(functio
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const aiLabelActionsClasses = cx__default["default"](className, {
-    [`${prefix}--slug-actions`]: true
+    [`${prefix}--ai-label-actions`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
     className: aiLabelActionsClasses
@@ -76,11 +76,11 @@ const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(functio
 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__default["default"].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__default["default"].string
 };
@@ -114,14 +114,14 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
   const prefix = usePrefix.usePrefix();
   const id = useId.useId('AILabel');
   const aiLabelClasses = cx__default["default"](className, {
-    [`${prefix}--slug`]: true,
-    [`${prefix}--slug--revert`]: revertActive
+    [`${prefix}--ai-label`]: true,
+    [`${prefix}--ai-label--revert`]: revertActive
   });
   const aiLabelButtonClasses = cx__default["default"]({
-    [`${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) {
@@ -145,9 +145,9 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
     className: aiLabelButtonClasses,
     label: ariaLabelText
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--slug__text`
+    className: `${prefix}--ai-label__text`
   }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--slug__additional-text`
+    className: `${prefix}--ai-label__additional-text`
   }, aiTextLabel || textLabel)), children));
 });
 AILabel.displayName = 'AILabel';

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
+  if (/*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/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/lib/components/CodeSnippet/CodeSnippet.js

@@ -23,6 +23,7 @@ var uniqueId = require('../../tools/uniqueId.js');
 var copy = require('copy-to-clipboard');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +38,19 @@ 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',
@@ -244,7 +258,32 @@ CodeSnippet.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', 'right']),
+  align: deprecateValuesWithin["default"](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']),
+  //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/lib/components/ComboBox/ComboBox.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
+var isEqual = require('react-fast-compare');
 var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -38,6 +39,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 const {
   InputBlur,
@@ -235,11 +237,14 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
       });
-      setInputValue(currentInputValue);
-      onChange({
-        selectedItem: selectedItemProp,
-        inputValue: currentInputValue
-      });
+      // selectedItem has been updated externally, need to update state and call onChange
+      if (inputValue !== currentInputValue) {
+        setInputValue(currentInputValue);
+        onChange({
+          selectedItem: selectedItemProp,
+          inputValue: currentInputValue
+        });
+      }
       prevSelectedItemProp.current = selectedItemProp;
     }
   }, [selectedItemProp]);
@@ -440,27 +445,12 @@ const ComboBox = /*#__PURE__*/React.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;
-      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];
@@ -472,11 +462,27 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }
     },
+    onStateChange: _ref6 => {
+      let {
+        type,
+        selectedItem: newSelectedItem
+      } = _ref6;
+      if (type === '__item_click__' && !isEqual__default["default"](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/lib/components/ComboButton/index.js

@@ -26,6 +26,7 @@ var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,6 +43,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];
 }
@@ -201,7 +215,32 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  tooltipAlignment: deprecateValuesWithin["default"](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']),
+  //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/lib/components/ComposedModal/ComposedModal.js

@@ -221,7 +221,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
           const el = child;
           return /*#__PURE__*/React__default["default"].cloneElement(el, {
             closeModal,
-            inputref: button
+            inputref: button,
+            danger
           });
         }
       default:
@@ -238,7 +239,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(() => {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
-      const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
@@ -246,8 +247,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
+      const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
       if (target) {
         target.focus();
+      } else if (!target && closeButton) {
+        closeButton?.focus();
       }
     };
     if (open && isOpen) {

package/lib/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>;
         /**