@carbon/react 1.87.1 → 1.88.0

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -6,12 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type HTMLAttributes, type ReactElement } from 'react';
-export interface SwitchEventHandlersParams {
-    index?: number;
-    name?: string | number;
-    text?: string;
-    key?: string | number;
-}
+import type { SwitchEventHandlersParams } from '../Switch/Switch';
 export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher

package/lib/components/Copy/Copy.d.ts

@@ -6,16 +6,18 @@
  */
 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;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCopyAlignment = DeprecatedPopoverAlignment;
+export type NewCopyAlignment = NewPopoverAlignment;
+export type CopyAlignment = PopoverAlignment;
 export interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CopyAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -50,7 +52,9 @@ declare namespace Copy {
          */
         align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
-         * **Experimental**: Will attempt to automatically align the tooltip
+         * **Experimental**: Will attempt to automatically align the tooltip. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/lib/components/Copy/Copy.js

@@ -94,7 +94,9 @@ Copy.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/CopyButton/CopyButton.d.ts

@@ -7,16 +7,18 @@
 import PropTypes from 'prop-types';
 import { MouseEventHandler } from 'react';
 import { ButtonProps } from '../Button';
-export type DeprecatedCopyButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCopyButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CopyButtonAlignment = DeprecatedCopyButtonAlignment | NewCopyButtonAlignment;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCopyButtonAlignment = DeprecatedPopoverAlignment;
+export type NewCopyButtonAlignment = NewPopoverAlignment;
+export type CopyButtonAlignment = PopoverAlignment;
 export interface CopyButtonProps extends ButtonProps<'button'> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CopyButtonAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -51,7 +53,9 @@ declare namespace CopyButton {
          */
         align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
-         * **Experimental**: Will attempt to automatically align the tooltip
+         * **Experimental**: Will attempt to automatically align the tooltip. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/lib/components/CopyButton/CopyButton.js

@@ -76,7 +76,9 @@ CopyButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/Dropdown/Dropdown.d.ts

@@ -24,7 +24,10 @@ export interface DropdownProps<ItemType> extends Omit<HTMLAttributes<HTMLDivElem
      */
     ariaLabel?: string;
     /**
-     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     * **Experimental**: Will attempt to automatically align the floating element
+     * to avoid collisions with the viewport and being clipped by ancestor
+     * elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/lib/components/Dropdown/Dropdown.js

@@ -400,7 +400,10 @@ Dropdown.propTypes = {
    */
   ariaLabel: deprecate.deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/FileUploader/FileUploaderButton.js

@@ -67,9 +67,12 @@ function FileUploaderButton({
     }
   }
   function onKeyDown(event) {
-    if (match.matches(event, [keys.Enter, keys.Space]) && inputNode.current) {
-      inputNode.current.value = '';
-      inputNode.current.click();
+    if (match.matches(event, [keys.Enter, keys.Space])) {
+      event.preventDefault();
+      if (inputNode.current) {
+        inputNode.current.value = '';
+        inputNode.current.click();
+      }
     }
   }
   function handleOnChange(event) {

package/lib/components/IconButton/index.d.ts

@@ -6,18 +6,20 @@
  */
 import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
-export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
+export type DeprecatedIconButtonAlignment = DeprecatedPopoverAlignment;
+export type NewIconButtonAlignment = NewPopoverAlignment;
+export type IconButtonAlignment = PopoverAlignment;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: IconButtonAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/lib/components/IconButton/index.js

@@ -101,7 +101,9 @@ IconButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**
@@ -156,9 +158,6 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
-   * If the child node already has an `aria-label`, the tooltip will not apply
-   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
-   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
    * If using `badgeCount={0}`, make sure the label explains that there is a

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -28,7 +28,8 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     className?: string;
@@ -62,7 +63,9 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**
-     * Default sorter is assigned if not provided.
+     * Provide a method that filters the dropdown options based on the current input. Overriding this
+     * prop means that you have to handle the filtering logic when the user types in the text input.
+     * Otherwise, a default built-in filtering function will be used.
      */
     filterItems?(items: readonly ItemType[], extra: {
         inputValue: string | null;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -17,6 +17,8 @@ var React = require('react');
 var filter = require('./filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index$1 = require('../ListBox/index.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+require('../Checkbox/Checkbox.Skeleton.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -117,16 +119,56 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const [inputValue, setInputValue] = React.useState('');
   const [topItems, setTopItems] = React.useState(initialSelectedItems ?? []);
   const [inputFocused, setInputFocused] = React.useState(false);
+  const filteredItems = React.useMemo(() => filterItems(items, {
+    itemToString: itemToString$1,
+    inputValue
+  }), [items, inputValue, itemToString$1, filterItems]);
+  const nonSelectAllItems = React.useMemo(() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
+  let selectAll = filteredItems.some(item => item.isSelectAll);
+  if ((selected ?? []).length > 0 && selectAll) {
+    console.warn('Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.');
+    selectAll = false;
+  }
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
-    clearSelection
+    clearSelection,
+    toggleAll
   } = Selection.useSelection({
     disabled,
     initialSelectedItems,
     onChange,
-    selectedItems: selected
+    selectedItems: selected,
+    selectAll,
+    filteredItems
   });
+  const selectAllStatus = React.useMemo(() => {
+    const selectable = nonSelectAllItems.filter(item => !item.disabled);
+    const nonSelectedCount = selectable.filter(item => !controlledSelectedItems.some(sel => isEqual(sel, item))).length;
+    const totalCount = selectable.length;
+    return {
+      checked: totalCount > 0 && nonSelectedCount === 0,
+      indeterminate: nonSelectedCount > 0 && nonSelectedCount < totalCount
+    };
+  }, [controlledSelectedItems, nonSelectAllItems]);
+  const handleSelectAllClick = React.useCallback(() => {
+    const selectable = nonSelectAllItems.filter(i => !i.disabled);
+    const {
+      checked,
+      indeterminate
+    } = selectAllStatus;
+
+    // clear all options if select-all state is checked or indeterminate
+    if (checked || indeterminate) {
+      const remainingSelectedItems = controlledSelectedItems.filter(sel => !filteredItems.some(e => isEqual(e, sel)));
+      toggleAll(remainingSelectedItems);
+
+      // select all options if select-all state is empty
+    } else {
+      const toSelect = selectable.filter(e => !controlledSelectedItems.some(sel => isEqual(sel, e)));
+      toggleAll([...controlledSelectedItems, ...toSelect]);
+    }
+  }, [nonSelectAllItems, selectAllStatus, controlledSelectedItems, toggleAll]);
   const {
     refs,
     floatingStyles,
@@ -177,10 +219,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = React.useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return sortItems(filterItems(items, {
-      itemToString: itemToString$1,
-      inputValue
-    }), {
+    const selectAllItem = items.find(item => item.isSelectAll);
+    const selectableRealItems = nonSelectAllItems.filter(item => !item.disabled);
+
+    // Sort only non-select-all items, select-all item must stay at the top
+    const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
         fixed: [],
@@ -190,7 +233,13 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       compareItems,
       locale
     });
-  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale]);
+
+    // Only show select-all-item if there exist non-disabled filtered items to select
+    if (selectAllItem && selectableRealItems.length > 0) {
+      return [selectAllItem, ...sortedReal];
+    }
+    return sortedReal;
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -313,8 +362,15 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     }
     switch (type) {
       case InputKeyDownEnter:
+        if (sortedItems.length === 0) {
+          return changes;
+        }
         if (changes.selectedItem && changes.selectedItem.disabled !== true) {
-          onItemChange(changes.selectedItem);
+          if (changes.selectedItem.isSelectAll) {
+            handleSelectAllClick();
+          } else {
+            onItemChange(changes.selectedItem);
+          }
         }
         setHighlightedIndex(changes.selectedItem);
         return {
@@ -322,7 +378,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
           highlightedIndex: state.highlightedIndex
         };
       case ItemClick:
-        if (changes.selectedItem) {
+        if (changes.selectedItem.isSelectAll) {
+          handleSelectAllClick();
+        } else {
           onItemChange(changes.selectedItem);
         }
         setHighlightedIndex(changes.selectedItem);
@@ -455,6 +513,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
   }) : null;
+
+  // exclude the select-all item from the count
+  const selectedItemsLength = controlledSelectedItems.filter(item => !item.isSelectAll).length;
   const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
@@ -462,7 +523,8 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
     [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
-    [`${prefix}--multi-select--readonly`]: readOnly
+    [`${prefix}--multi-select--readonly`]: readOnly,
+    [`${prefix}--multi-select--selectall`]: selectAll
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -600,7 +662,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         textInput.current.focus();
       }
     },
-    selectionCount: controlledSelectedItems.length,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
@@ -632,7 +694,14 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
-    const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    let isChecked;
+    let isIndeterminate = false;
+    if (item.isSelectAll) {
+      isChecked = selectAllStatus.checked;
+      isIndeterminate = selectAllStatus.indeterminate;
+    } else {
+      isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    }
     const itemProps = getItemProps({
       item,
       ['aria-selected']: isChecked
@@ -652,20 +721,23 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     return /*#__PURE__*/React.createElement(index$1.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       "aria-label": itemText,
-      isActive: isChecked,
+      isActive: isChecked && !item['isSelectAll'],
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: disabled
     }, modifiedItemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(Checkbox.default, {
+      id: `${itemProps.id}-item`,
+      labelText: ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
+        key: itemProps.id
+      }, item)) : itemText,
+      checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
-      className: `${prefix}--checkbox-label`,
-      "data-contained-checkbox-state": isChecked,
-      id: `${itemProps.id}-item`
-    }, ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-      key: itemProps.id
-    }, item)) : itemText)));
+      indeterminate: isIndeterminate,
+      disabled: disabled,
+      tabIndex: -1
+    })));
   }) : null)), !inline && !invalid && !warn ? helper : null);
 });
 FilterableMultiSelect.displayName = 'FilterableMultiSelect';
@@ -683,7 +755,8 @@ FilterableMultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**
@@ -698,6 +771,12 @@ FilterableMultiSelect.propTypes = {
    * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
    */
   decorator: PropTypes.node,
+  /**
+   * Provide a method that filters the dropdown options based on the current input. Overriding this
+   * prop means that you have to handle the filtering logic when the user types in the text input.
+   * Otherwise, a default built-in filtering function will be used.
+   */
+  filterItems: PropTypes.func,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -17,7 +17,8 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     className?: string;

package/lib/components/MultiSelect/MultiSelect.js

@@ -538,7 +538,8 @@ MultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/Notification/Notification.d.ts

@@ -367,6 +367,10 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      * Provide a description for "close" icon button that can be read by screen readers
      */
     'aria-label'?: string;
+    /**
+     * Specify the caption
+     */
+    caption?: string;
     /**
      * Specify the content
      */
@@ -430,7 +434,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     title?: string;
 }
-export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, caption, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ActionableNotification {
     var propTypes: {
         /**
@@ -446,6 +450,10 @@ export declare namespace ActionableNotification {
          * Provide a description for "close" icon button that can be read by screen readers
          */
         ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Specify the caption
+         */
+        caption: PropTypes.Requireable<string>;
         /**
          * Specify the content
          */

package/lib/components/Notification/Notification.js

@@ -474,6 +474,7 @@ function ActionableNotification({
   ['aria-label']: ariaLabel,
   // @ts-expect-error: deprecated prop
   ariaLabel: deprecatedAriaLabel,
+  caption,
   children,
   role = 'alertdialog',
   onActionButtonClick,
@@ -588,7 +589,10 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), /*#__PURE__*/React.createElement("div", {
+  }, subtitle), caption && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "div",
+    className: `${prefix}--actionable-notification__caption`
+  }, caption), children))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--actionable-notification__button-wrapper`,
     ref: innerModal
   }, actionButtonLabel && /*#__PURE__*/React.createElement(NotificationActionButton, {
@@ -619,6 +623,10 @@ ActionableNotification.propTypes = {
    * Provide a description for "close" icon button that can be read by screen readers
    */
   ariaLabel: deprecate.deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes.string,
   /**
    * Specify the content
    */

package/lib/components/NumberInput/NumberInput.d.ts

@@ -51,6 +51,10 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
      */
     formatOptions?: NumberFormatOptions;
+    /**
+     * Provide the value stepping should begin at when the input is empty
+     */
+    stepStartValue?: number;
     /**
      * Provide text that is used alongside the control label for additional help
      */

package/lib/components/NumberInput/NumberInput.js

@@ -78,6 +78,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     defaultValue = type === 'number' ? 0 : NaN,
     warn = false,
     warnText = '',
+    stepStartValue = 0,
     value: controlledValue,
     ...rest
   } = props;
@@ -238,14 +239,14 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     if (inputRef.current) {
       const currentValue = type === 'number' ? Number(inputRef.current.value) : numberValue;
       let rawValue;
-      if (Number.isNaN(currentValue)) {
-        // When the field is empty (NaN), incrementing begins at min,
-        // decrementing begins at max.
-        // When there's no min or max to use, it begins at 0.
-        if (direction === `up` && min) {
+      if (Number.isNaN(currentValue) || !currentValue) {
+        if (typeof stepStartValue === 'number' && stepStartValue) {
+          rawValue = stepStartValue;
+        } else if (min && min < 0 && max && max > 0 || !max && !min || max) {
+          if (direction === `up`) rawValue = 1;
+          if (direction === `down`) rawValue = -1;
+        } else if (min && min > 0 && max && max > 0 || min) {
           rawValue = min;
-        } else if (direction === `down` && max) {
-          rawValue = max;
         } else {
           rawValue = 0;
         }
@@ -534,6 +535,10 @@ NumberInput.propTypes = {
    * The minimum value.
    */
   min: PropTypes.number,
+  /**
+   * Provide the value stepping should begin at when the input is empty
+   */
+  stepStartValue: PropTypes.number,
   /**
    * Provide an optional handler that is called when the input or stepper
    * buttons are blurred.

package/lib/components/OverflowMenu/next/index.d.ts

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ElementType } from 'react';
+import type { PopoverAlignment } from '../../Popover';
 interface OverflowMenuProps {
     /**
-     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     * **Experimental**: Will attempt to automatically align the floating element
+     * to avoid collisions with the viewport and being clipped by ancestor
+     * elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -37,7 +41,7 @@ interface OverflowMenuProps {
     /**
      * Specify how the trigger tooltip should be aligned.
      */
-    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    tooltipAlignment?: PopoverAlignment;
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */

package/lib/components/OverflowMenu/next/index.js

@@ -134,7 +134,10 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
 });
 OverflowMenu.propTypes = {
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/Popover/index.d.ts

@@ -26,7 +26,10 @@ export interface PopoverBaseProps {
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+     * Will auto-align the popover on first render if it is not visible. This prop
+     * is currently experimental and is subject to future changes. Requires
+     * React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**