@carbon/react 1.87.1 → 1.88.0

package/es/components/Notification/Notification.js

@@ -472,6 +472,7 @@ function ActionableNotification({
   ['aria-label']: ariaLabel,
   // @ts-expect-error: deprecated prop
   ariaLabel: deprecatedAriaLabel,
+  caption,
   children,
   role = 'alertdialog',
   onActionButtonClick,
@@ -586,7 +587,10 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), /*#__PURE__*/React.createElement("div", {
+  }, subtitle), caption && /*#__PURE__*/React.createElement(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, {
@@ -617,6 +621,10 @@ ActionableNotification.propTypes = {
    * Provide a description for "close" icon button that can be read by screen readers
    */
   ariaLabel: 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/es/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/es/components/NumberInput/NumberInput.js

@@ -76,6 +76,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     defaultValue = type === 'number' ? 0 : NaN,
     warn = false,
     warnText = '',
+    stepStartValue = 0,
     value: controlledValue,
     ...rest
   } = props;
@@ -236,14 +237,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;
         }
@@ -532,6 +533,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/es/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/es/components/OverflowMenu/next/index.js

@@ -132,7 +132,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/es/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;
     /**

package/es/components/Popover/index.js

@@ -62,7 +62,14 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (!popover.current?.contains(relatedTarget)) {
+    if (!relatedTarget) {
+      return;
+    }
+    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
+    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+
+    // Only close if focus moved outside both containers
+    if (isOutsideMainContainer && isOutsideFloating) {
       onRequestClose?.();
     }
   });
@@ -291,7 +298,10 @@ Popover.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
-   * 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: PropTypes.bool,
   /**

package/es/components/Switch/IconSwitch.d.ts

@@ -1,3 +1,45 @@
-export default IconSwitch;
-declare const IconSwitch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * 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 React from 'react';
+import { type IconButtonProps } from '../IconButton';
+import type { SwitchEventHandlersParams } from './Switch';
+interface IconSwitchProps extends Omit<IconButtonProps, 'onClick' | 'onKeyDown' | 'label' | 'name'> {
+    /**
+     * The index of the `IconSwitch`.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    index?: number;
+    /**
+     * The name of the `IconSwitch`.
+     */
+    name?: string | number;
+    /**
+     * A handler that is invoked when a user clicks on the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onClick?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * A handler that is invoked on the key down event for the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onKeyDown?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * Whether the `IconSwitch` is selected.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    selected?: boolean;
+    /**
+     * `Tooltip` text.
+     */
+    text?: string;
+}
+declare const IconSwitch: React.ForwardRefExoticComponent<IconSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconSwitch;

package/es/components/Switch/IconSwitch.js

@@ -7,13 +7,14 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import cx from 'classnames';
 import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
-const noopFn = () => {};
-const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
+const frFn = forwardRef;
+const IconSwitch = frFn((props, ref) => {
   const {
     align,
     children,
@@ -32,8 +33,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
   } = props;
   const prefix = usePrefix();
   const [isHovered, setIsHovered] = useState(false);
-  const handleClick = e => {
-    e.preventDefault();
+  const handleClick = event => {
+    event.preventDefault();
     onClick({
       index,
       name,
@@ -41,6 +42,7 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown({
       index,
@@ -62,20 +64,10 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     [`${prefix}--content-switcher-popover--selected`]: selected,
     [`${prefix}--content-switcher-popover--disabled`]: disabled
   });
-  const commonProps = {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    className: classes,
-    disabled,
-    align,
-    enterDelayMs,
-    leaveDelayMs,
-    size
-  };
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     label: text,
     type: "button",
-    ref: tabRef,
+    ref: ref,
     role: "tab",
     tabIndex: selected || isHovered ? 0 : -1,
     onMouseEnter: handleMouseEnter,
@@ -85,7 +77,16 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     "aria-selected": selected,
     "aria-label": text,
     wrapperClasses: iconButtonClasses
-  }, other, commonProps), children);
+  }, other, {
+    align: align,
+    className: classes,
+    disabled: disabled,
+    enterDelayMs: enterDelayMs,
+    leaveDelayMs: leaveDelayMs,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    size: size
+  }), children);
 });
 IconSwitch.displayName = 'IconSwitch';
 IconSwitch.propTypes = {
@@ -94,15 +95,15 @@ IconSwitch.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
-   * Provide child elements to be rendered inside of the Switch
+   * Children to be rendered inside of the `IconSwitch`.
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to your Switch
+   * Specify an optional className to be added to your `IconSwitch`.
    */
   className: PropTypes.string,
   /**
-   * Specify whether or not the Switch should be disabled
+   * Whether the `IconSwitch` should be disabled.
    */
   disabled: PropTypes.bool,
   /**
@@ -110,8 +111,9 @@ IconSwitch.propTypes = {
    */
   enterDelayMs: PropTypes.number,
   /**
-   * The index of your Switch in your ContentSwitcher that is used for event handlers.
-   * Reserved for usage in ContentSwitcher
+   * The index of the `IconSwitch`.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   index: PropTypes.number,
   /**
@@ -119,29 +121,34 @@ IconSwitch.propTypes = {
    */
   leaveDelayMs: PropTypes.number,
   /**
-   * Provide the name of your Switch that is used for event handlers
+   * The name of the `IconSwitch`.
    */
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * A handler that is invoked when a user clicks on the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onClick: PropTypes.func,
   /**
    * A handler that is invoked on the key down event for the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onKeyDown: PropTypes.func,
   /**
-   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   * Whether the `IconSwitch` is selected.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   selected: PropTypes.bool,
+  // TODO: Icon only variant of what? Isn't the `IconSwitch` always icon only?
   /**
    * Passed in from `ContentSwitcher` to render icon-only variant
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide the visible text displayed by the Tooltip
+   * `Tooltip` text.
    */
   text: PropTypes.string
 };

package/es/components/Switch/Switch.js

@@ -35,6 +35,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown?.({
       index,

package/es/components/Toggletip/index.d.ts

@@ -67,7 +67,10 @@ export declare namespace Toggletip {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * 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: PropTypes.Requireable<boolean>;
         /**

package/es/components/Toggletip/index.js

@@ -185,7 +185,10 @@ Toggletip.propTypes = {
    */
   as: PropTypes.elementType,
   /**
-   * 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: PropTypes.bool,
   /**

package/es/components/Tooltip/DefinitionTooltip.d.ts

@@ -12,13 +12,15 @@ export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+     * Will auto-align Definition Tooltip. 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;
     /**
      * The `children` prop will be used as the value that is being defined
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
      * Specify an optional className to be applied to the container node
      */

package/es/components/Tooltip/DefinitionTooltip.js

@@ -101,7 +101,9 @@ DefinitionTooltip.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. 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: PropTypes.bool,
   /**

package/es/components/Tooltip/Tooltip.d.ts

@@ -54,9 +54,6 @@ interface TooltipBaseProps {
     /**
      * 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 already has an `aria-label`, the tooltip will not apply
-     * `aria-labelledby`. If the child has its own `aria-labelledby`, that value
-     * will be kept. Otherwise, the tooltip will use its own ID to label the child.
      * This means that if you have text in the child node, that it will not be
      * announced to the screen reader.
      *

package/es/components/Tooltip/Tooltip.js

@@ -46,20 +46,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix();
   const child = React.Children.only(children);
   const {
-    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy
   } = child?.props ?? {};
   const hasLabel = !!label;
-  const hasAriaLabel = typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
-
-  // An `aria-label` takes precedence over `aria-describedby`, but when it's
-  // needed and the user doesn't specify one, the fallback `id` is used.
-  const labelledBy = hasAriaLabel ? undefined : hasLabel ? ariaLabelledBy ?? id : undefined;
-
-  // If `aria-label` is present, use any provided `aria-describedby`.
-  // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
-  const describedBy = hasAriaLabel ? ariaDescribedBy : ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined);
+  const labelledBy = ariaLabelledBy ?? (hasLabel ? id : undefined);
+  const describedBy = ariaDescribedBy ?? (!hasLabel ? id : undefined);
   const triggerProps = {
     onFocus: () => !focusByMouse && setOpen(true),
     onBlur: () => {

package/es/components/TreeView/TreeNode.d.ts

@@ -88,7 +88,8 @@ export type TreeNodeProps = {
     /**
      * **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;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
@@ -173,7 +174,8 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **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;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;

package/es/components/TreeView/TreeNode.js

@@ -490,7 +490,8 @@ TreeNode.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/es/components/UIShell/HeaderPanel.js

@@ -15,8 +15,8 @@ import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import Switcher from './Switcher.js';
+import { noopFn } from '../../internal/noopFn.js';
 
-const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
   children,
   className: customClassName,

package/es/internal/Selection.d.ts

@@ -18,6 +18,7 @@ interface UseSelectionProps<ItemType> {
 export declare const useSelection: <ItemType>({ disabled, onChange, initialSelectedItems, selectedItems: controlledItems, selectAll, filteredItems, }: UseSelectionProps<ItemType>) => {
     clearSelection: () => void;
     onItemChange: (item: ItemType) => void;
+    toggleAll: (items: ItemType[]) => void;
     selectedItems: ItemType[];
 };
 interface SelectionRenderProps<ItemType> {

package/es/internal/Selection.js

@@ -90,6 +90,15 @@ const useSelection = ({
       selectedItems: []
     });
   }, [disabled, isControlled]);
+  const toggleAll = useCallback(items => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: items
+    });
+  }, [isControlled]);
   useEffect(() => {
     savedOnChange.current = onChange;
   }, [onChange]);
@@ -109,6 +118,7 @@ const useSelection = ({
   return {
     clearSelection,
     onItemChange,
+    toggleAll,
     selectedItems
   };
 };

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
 export type AILabelActionsProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -13,9 +14,9 @@ export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActi
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
  */
-export type DeprecatedAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type Alignment = DeprecatedAlignment | NewAlignment;
+export type DeprecatedAlignment = DeprecatedPopoverAlignment;
+export type NewAlignment = NewPopoverAlignment;
+export type Alignment = PopoverAlignment;
 export interface AILabelProps {
     AILabelContent?: React.ReactNode;
     aiText?: string;

package/lib/components/AILabel/index.js

@@ -188,7 +188,9 @@ AILabel.propTypes = {
    */
   'aria-label': PropTypes.string,
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. 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: PropTypes.bool,
   /**

package/lib/components/Button/Button.js

@@ -113,7 +113,9 @@ Button.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
   /**
-   * **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/CodeSnippet/CodeSnippet.d.ts

@@ -6,16 +6,18 @@
  */
 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 NewCodeSnippetAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignment;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCodeSnippetAlignment = DeprecatedPopoverAlignment;
+export type NewCodeSnippetAlignment = NewPopoverAlignment;
+export type CodeSnippetAlignment = PopoverAlignment;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CodeSnippetAlignment;
     /**
-     * **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;
     /**
@@ -122,7 +124,9 @@ declare namespace CodeSnippet {
          */
         ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...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/CodeSnippet/CodeSnippet.js

@@ -272,7 +272,9 @@ CodeSnippet.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 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/ComboBox/ComboBox.d.ts

@@ -41,7 +41,8 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
     /**
      * **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;
     /**

package/lib/components/ComboBox/ComboBox.js

@@ -780,7 +780,8 @@ ComboBox.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,
   /**