@carbon/react 1.88.0 → 1.89.0-rc.1

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { ToggletipBaseProps } from '../Toggletip';
 import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
@@ -17,15 +18,11 @@ export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActi
 export type DeprecatedAlignment = DeprecatedPopoverAlignment;
 export type NewAlignment = NewPopoverAlignment;
 export type Alignment = PopoverAlignment;
-export interface AILabelProps {
+export interface AILabelProps extends ToggletipBaseProps {
     AILabelContent?: React.ReactNode;
     aiText?: string;
     aiTextLabel?: string;
     textLabel?: string;
-    align?: Alignment;
-    autoAlign?: boolean;
-    children?: React.ReactNode;
-    className?: string;
     kind?: 'default' | 'inline';
     onRevertClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
     revertActive?: boolean;

package/es/components/AILabel/index.js

@@ -8,12 +8,10 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '../Toggletip/index.js';
+import { Toggletip, ToggletipContent, ToggletipActions, ToggletipButton } from '../Toggletip/index.js';
 import { IconButton } from '../IconButton/index.js';
-import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { deprecate } from '../../prop-types/deprecate.js';
@@ -143,6 +141,7 @@ const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
 });
 AILabel.displayName = 'AILabel';
 AILabel.propTypes = {
+  ...Toggletip.propTypes,
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
@@ -156,49 +155,10 @@ AILabel.propTypes = {
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
   aiTextLabel: deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
-  /**
-   * Specify how the popover should align with the button
-   */
-  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']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign),
   /**
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
   'aria-label': PropTypes.string,
-  /**
-   * 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,
-  /**
-   * Specify the content you want rendered inside the `AILabel` ToggleTip
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to the `AILabel`
-   */
-  className: PropTypes.string,
   /**
    * Specify the type of `AILabel`, from the following list of types:
    */

package/es/components/ContainedList/ContainedList.d.ts

@@ -7,9 +7,9 @@
 import React, { ReactNode } from 'react';
 import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-export interface ContainedListType extends React.FC<ContainedListProps> {
+export type ContainedListType = React.FC<ContainedListProps> & {
     ContainedListItem: typeof ContainedListItem;
-}
+};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**

package/es/components/Copy/Copy.js

@@ -57,6 +57,7 @@ function Copy({
     autoAlign: autoAlign,
     className: classNames,
     label: animation ? feedback : initialLabel,
+    leaveDelayMs: animation ? feedbackTimeout : undefined,
     onClick: composeEventHandlers([onClick, handleClick]),
     onAnimationEnd: composeEventHandlers([onAnimationEnd, handleAnimationEnd])
   }, other, {

package/es/components/Link/Link.js

@@ -48,9 +48,23 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     linkProps['aria-disabled'] = true;
   }
   const BaseComponentAsAny = BaseComponent ?? 'a';
+  const handleOnClick = event => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      // If the link is not disabled, we allow the onClick event to propagate
+      // so that any parent handlers can also respond to the click.
+      if (rest.onClick) {
+        rest.onClick(event);
+      }
+    }
+  };
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     ref: ref
-  }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
+  }, linkProps, rest, {
+    onClick: handleOnClick
+  }), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React.createElement(Icon, null)));
 });

package/es/components/Menu/MenuContext.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/Menu/MenuContext.js

@@ -28,10 +28,17 @@ function menuReducer(state, action) {
         hasSelectableItems: true
       };
     case 'registerItem':
-      return {
-        ...state,
-        items: [...state.items, action.payload].filter(item => item.ref.current !== null)
-      };
+      {
+        const newItem = action.payload;
+        const items = state.items.filter(item => item.ref.current);
+        const next = newItem.ref.current?.nextElementSibling;
+        const idx = items.findIndex(item => item.ref.current === next);
+        items.splice(idx < 0 ? items.length : idx, 0, newItem);
+        return {
+          ...state,
+          items
+        };
+      }
   }
 }
 const MenuContext = /*#__PURE__*/createContext({

package/es/components/Menu/MenuItem.js

@@ -128,18 +128,11 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
   });
-  const [isFocusable, setIsFocusable] = useState(false);
+
   // on first render, register this menuitem in the context's state
   // (used for keyboard navigation)
   useEffect(() => {
     registerItem();
-
-    // Detects if this is the first focusable item
-    const currentItems = context.state.items;
-    if (!disabled && menuItem.current && currentItems.length === 0) {
-      setIsFocusable(true);
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -178,7 +171,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: isFocusable ? 0 : -1,
+    tabIndex: !disabled ? 0 : -1,
     "aria-disabled": isDisabled ?? undefined,
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,

package/es/components/Modal/Modal.js

@@ -81,6 +81,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const innerModal = useRef(null);
   const startTrap = useRef(null);
   const endTrap = useRef(null);
+  const wrapFocusTimeout = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
   const prevOpen = usePreviousValue(open);
   const modalInstanceId = `modal-${useId()}`;
@@ -142,13 +143,20 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
       const {
         current: endTrapNode
       } = endTrap;
-      wrapFocus({
-        bodyNode,
-        startTrapNode,
-        endTrapNode,
-        currentActiveNode,
-        oldActiveNode,
-        selectorsFloatingMenus
+      // use setTimeout to ensure focus is set after all browser default focus behavior. Fixes issue of
+      // focus not wrapping in Firefox
+      wrapFocusTimeout.current = setTimeout(() => {
+        wrapFocus({
+          bodyNode,
+          startTrapNode,
+          endTrapNode,
+          currentActiveNode,
+          oldActiveNode,
+          selectorsFloatingMenus
+        });
+        if (wrapFocusTimeout.current) {
+          clearTimeout(wrapFocusTimeout.current);
+        }
       });
     }
 

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -122,11 +122,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     inputValue
   }), [items, inputValue, itemToString, filterItems]);
   const nonSelectAllItems = 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 selectAll = filteredItems.some(item => item.isSelectAll);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,

package/es/components/MultiSelect/MultiSelect.js

@@ -111,11 +111,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return true; // Return true if item is not an object with undefined values
     });
   }, [items]);
-  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 selectAll = filteredItems.some(item => item.isSelectAll);
   const prefix = usePrefix();
   const {
     isFluid
@@ -489,13 +485,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
-    const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,
       totalSelectableCount
     } = getSelectionStats(selectedItems, filteredItems);
-    const isIndeterminate = item['isSelectAll'] && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
+    const isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some(selected => isEqual(selected, item));
+    const isIndeterminate = item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
     const itemProps = getItemProps({
       item,
       // we don't want Downshift to set aria-selected for us

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

@@ -25,6 +25,10 @@ export interface PopoverBaseProps {
      * Specify how the popover should align with the trigger element.
      */
     align?: PopoverAlignment;
+    /**
+     * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
+     */
+    alignmentAxisOffset?: number;
     /**
      * 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

package/es/components/Popover/index.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -17,7 +17,6 @@ import { useEvent, useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { useFloating, autoUpdate, offset, flip, arrow, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { ToggletipButton } from '../Toggletip/index.js';
 
 const PopoverContext = /*#__PURE__*/React.createContext({
   setFloating: {
@@ -62,7 +61,10 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
+
+    // No relatedTarget, focus moved to nowhere, so close the popover
     if (!relatedTarget) {
+      onRequestClose?.();
       return;
     }
     const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
@@ -235,7 +237,7 @@ forwardRef) {
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these cases we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type === ToggletipButton) {
+          if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type['displayName'] === 'ToggletipButton') {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }
@@ -292,6 +294,10 @@ Popover.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),
+  /**
+   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
+   */
+  alignmentAxisOffset: PropTypes.number,
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -361,29 +367,12 @@ function PopoverContentRenderFunction(
     caretRef,
     autoAlign
   } = React.useContext(PopoverContext);
-  const textRef = useRef(null);
-  const [isMultiLine, setIsMultiLine] = React.useState(false);
-  const ref = useMergedRefs([setFloating, textRef, forwardRef]);
+  const ref = useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  useEffect(() => {
-    checkIfMultiLine();
-  }, [children]);
-  const checkIfMultiLine = () => {
-    const el = textRef.current;
-    if (el) {
-      const style = getComputedStyle(el);
-      const lineHeight = parseFloat(style.lineHeight);
-      const height = el.offsetHeight;
-      const lines = Math.floor(height / lineHeight);
-      setIsMultiLine(lines > 1);
-    }
-  };
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React.createElement("span", {
-    className: cx(`${prefix}--popover-content`, className, {
-      [`${prefix}--tooltip-content--multiline`]: isMultiLine
-    }),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
     className: cx({

package/es/components/StructuredList/StructuredList.d.ts

@@ -32,6 +32,10 @@ export interface StructuredListWrapperProps extends DivAttrs {
      * Specify whether your StructuredListWrapper should have selections
      */
     selection?: boolean;
+    /**
+     * Specify which row will be selected initially
+     */
+    selectedInitialRow?: string;
 }
 export declare function StructuredListWrapper(props: StructuredListWrapperProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListWrapper {
@@ -65,6 +69,10 @@ export declare namespace StructuredListWrapper {
          * Specify whether your StructuredListWrapper should have selections
          */
         selection: PropTypes.Requireable<boolean>;
+        /**
+         * Specify which row will be selected initially
+         */
+        selectedInitialRow: PropTypes.Requireable<string>;
     };
 }
 export interface StructuredListHeadProps extends DivAttrs {
@@ -148,6 +156,10 @@ export interface StructuredListRowProps extends DivAttrs {
      * Mark if this row should be selectable
      */
     selection?: boolean;
+    /**
+     * Specify row id so that it can be used for initial selection
+     */
+    id?: string;
 }
 export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
@@ -180,6 +192,10 @@ export declare namespace StructuredListRow {
          * Mark if this row should be selectable
          */
         selection: PropTypes.Requireable<boolean>;
+        /**
+         * Specify row id so that it can be used for initial selection
+         */
+        id: PropTypes.Requireable<string>;
     };
 }
 export interface StructuredListInputProps extends DivAttrs {

package/es/components/StructuredList/StructuredList.js

@@ -30,6 +30,7 @@ function StructuredListWrapper(props) {
     ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
+    selectedInitialRow,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -38,7 +39,7 @@ function StructuredListWrapper(props) {
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush && !selection
   }, className);
-  const [selectedRow, setSelectedRow] = React.useState(null);
+  const [selectedRow, setSelectedRow] = React.useState(selectedInitialRow ?? null);
   return /*#__PURE__*/React.createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
   }, /*#__PURE__*/React.createElement(GridSelectedRowDispatchContext.Provider, {
@@ -79,7 +80,11 @@ StructuredListWrapper.propTypes = {
   /**
    * Specify whether your StructuredListWrapper should have selections
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify which row will be selected initially
+   */
+  selectedInitialRow: PropTypes.string
 };
 function StructuredListHead(props) {
   const {
@@ -141,21 +146,22 @@ function StructuredListRow(props) {
     head,
     onClick,
     selection,
+    id,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  const id = useId('grid-input');
+  const rowId = id ?? useId('grid-input');
   const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix();
   const value = {
-    id
+    id: rowId
   };
   const classes = cx(`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
     // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
-    [`${prefix}--structured-list-row--selected`]: selectedRow === id
+    [`${prefix}--structured-list-row--selected`]: selectedRow === rowId
   }, className);
   const itemRef = useRef(null);
   const handleClick = () => {
@@ -176,7 +182,7 @@ function StructuredListRow(props) {
     className: classes,
     ref: itemRef,
     onClick: event => {
-      setSelectedRow?.(id);
+      setSelectedRow?.(rowId);
       onClick && onClick(event);
       if (selection) {
         // focus items only when selection is enabled
@@ -192,7 +198,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React.createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React.createElement(RadioButtonChecked, {
+  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === rowId ? /*#__PURE__*/React.createElement(RadioButtonChecked, {
     className: `${prefix}--structured-list__icon`
   }) : /*#__PURE__*/React.createElement(RadioButton, {
     className: `${prefix}--structured-list__icon`
@@ -226,7 +232,11 @@ StructuredListRow.propTypes = {
   /**
    * Mark if this row should be selectable
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify row id so that it can be used for initial selection
+   */
+  id: PropTypes.string
 };
 function StructuredListInput(props) {
   const defaultId = useId('structureListInput');

package/es/components/TextArea/TextArea.js

@@ -59,7 +59,11 @@ const TextArea = frFn((props, forwardRef) => {
     value
   } = other;
   const textAreaInstanceId = useId();
+  const wrapperRef = useRef(null);
   const textareaRef = useRef(null);
+  const helperTextRef = useRef(null);
+  const errorTextRef = useRef(null);
+  const warnTextRef = useRef(null);
   const ref = useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
     const targetValue = defaultValue || value || textareaRef.current?.value || '';
@@ -76,13 +80,20 @@ const TextArea = frFn((props, forwardRef) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, defaultValue, counterMode]);
   useIsomorphicEffect(() => {
+    const measuredWidth = wrapperRef.current?.scrollWidth;
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
       textareaRef.current.style.resize = 'none';
     } else if (textareaRef.current) {
       textareaRef.current.style.width = `100%`;
     }
-  }, [other.cols]);
+    [helperTextRef, errorTextRef, warnTextRef].forEach(r => {
+      if (r.current) {
+        r.current.style.maxWidth = `${measuredWidth}px`;
+        r.current.style.overflowWrap = 'break-word';
+      }
+    });
+  }, [other.cols, invalid, warn]);
   const textareaProps = {
     id,
     onKeyDown: evt => {
@@ -190,21 +201,26 @@ const TextArea = frFn((props, forwardRef) => {
   const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperId,
-    className: helperTextClasses
+    className: helperTextClasses,
+    ref: helperTextRef
   }, helperText) : null;
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
-    id: errorId
+    id: errorId,
+    ref: errorTextRef
   }, invalidText, isFluid && /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
+  const warnId = id + '-warn-msg';
   const warning = warn ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     role: "alert",
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnId,
+    ref: warnTextRef
   }, warnText, isFluid && /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
@@ -270,6 +286,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React.createElement(WarningFilled, {

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

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ElementType, type ReactNode } from 'react';
-import { type PopoverAlignment } from '../Popover';
+import { type PopoverAlignment, PopoverBaseProps } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ToggletipLabelProps<E extends ElementType> = {
@@ -36,12 +36,7 @@ export declare namespace ToggletipLabel {
         className: PropTypes.Requireable<string>;
     };
 }
-export interface ToggletipBaseProps {
-    align?: PopoverAlignment;
-    alignmentAxisOffset?: number;
-    autoAlign?: boolean;
-    className?: string;
-    children?: ReactNode;
+export interface ToggletipBaseProps extends Omit<PopoverBaseProps, 'open'> {
     defaultOpen?: boolean;
 }
 export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, ToggletipBaseProps>;
@@ -53,39 +48,21 @@ export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWith
 export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
-        /**
-         * Specify how the toggletip should align with the button
-         */
-        align: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
-         */
-        alignmentAxisOffset: PropTypes.Requireable<number>;
-        /**
-         * Provide a custom element or component to render the top-level node for the
-         * component.
-         */
-        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. Requires
-         * React v17+
-         * @see https://github.com/carbon-design-system/carbon/issues/18714
-         */
-        autoAlign: PropTypes.Requireable<boolean>;
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
         /**
          * Specify if the toggletip should be open by default
          */
         defaultOpen: PropTypes.Requireable<boolean>;
+        align?: PopoverAlignment;
+        alignmentAxisOffset?: number;
+        autoAlign?: boolean;
+        autoAlignBoundary?: import("@floating-ui/dom").Boundary;
+        caret?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        dropShadow?: boolean;
+        highContrast?: boolean;
+        isTabTip?: boolean;
+        onRequestClose?: () => void;
     };
 }
 export interface ToggletipButtonBaseProps {