@carbon/react 1.91.0 → 1.92.0-rc.0

package/es/components/Accordion/AccordionItem.d.ts

@@ -12,6 +12,11 @@ export interface AccordionItemProps {
      * this value will be managed by the parent Accordion.
      */
     disabled?: boolean;
+    /**
+     * Specify a custom label for the accordion button.
+     * This is important for accessibility when the accordion has no visible title.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
     /**
      * The handler of the massaged `click` event.
      */
@@ -52,6 +57,7 @@ export interface AccordionItemProps {
 export interface AccordionToggleProps {
     'aria-controls'?: AriaAttributes['aria-controls'];
     'aria-expanded'?: AriaAttributes['aria-expanded'];
+    'aria-label'?: AriaAttributes['aria-label'];
     className?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -59,7 +65,7 @@ export interface AccordionToggleProps {
     type?: 'button';
 }
 declare function AccordionItem({ children, className: customClassName, open, onHeadingClick, renderExpando, // remove renderExpando in next major release
-renderToggle, title, disabled: controlledDisabled, handleAnimationEnd, ...rest }: PropsWithChildren<AccordionItemProps>): import("react/jsx-runtime").JSX.Element;
+renderToggle, title, disabled: controlledDisabled, handleAnimationEnd, 'aria-label': ariaLabel, ...rest }: PropsWithChildren<AccordionItemProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionItem {
     var propTypes: {
         /**
@@ -74,6 +80,11 @@ declare namespace AccordionItem {
          * Specify whether an individual AccordionItem should be disabled
          */
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify a custom label for the accordion button.
+         * This is important for accessibility when the accordion has no visible title.
+         */
+        'aria-label': PropTypes.Requireable<string>;
         /**
          * The handler of the massaged `click` event.
          */

package/es/components/Accordion/AccordionItem.js

@@ -10,14 +10,14 @@ import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState, useContext } from 'react';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AccordionContext } from './AccordionProvider.js';
-import { Text } from '../Text/Text.js';
 
 const defaultRenderToggle = props => /*#__PURE__*/React.createElement("button", _extends({
   type: "button"
@@ -33,6 +33,7 @@ function AccordionItem({
   title = 'title',
   disabled: controlledDisabled,
   handleAnimationEnd,
+  'aria-label': ariaLabel,
   ...rest
 }) {
   const [isOpen, setIsOpen] = useState(open);
@@ -96,6 +97,7 @@ function AccordionItem({
     disabled: disabled,
     "aria-controls": id,
     "aria-expanded": isOpen,
+    "aria-label": ariaLabel,
     className: `${prefix}--accordion__heading`,
     onClick: onClick,
     onKeyDown: onKeyDown,
@@ -127,6 +129,11 @@ AccordionItem.propTypes = {
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify a custom label for the accordion button.
+   * This is important for accessibility when the accordion has no visible title.
+   */
+  'aria-label': PropTypes.string,
   /**
    * The handler of the massaged `click` event.
    */

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -12,8 +12,8 @@ import cx from 'classnames';
 import Link from '../Link/Link.js';
 import { OverflowMenuHorizontal } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 
 const frFn = forwardRef;
 const BreadcrumbItem = frFn((props, ref) => {

package/es/components/Checkbox/Checkbox.js

@@ -9,7 +9,8 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { cloneElement } from 'react';
 import cx from 'classnames';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -17,7 +18,6 @@ import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 const Checkbox = /*#__PURE__*/React.forwardRef(({
   className,

package/es/components/ComboBox/ComboBox.js

@@ -10,7 +10,8 @@ import cx from 'classnames';
 import { useCombobox } from 'downshift';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo, cloneElement } from 'react';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import isEqual from 'react-fast-compare';
 import ListBox from '../ListBox/index.js';
@@ -19,7 +20,7 @@ import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
@@ -30,7 +31,6 @@ import { AILabel } from '../AILabel/index.js';
 import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
-import { Text } from '../Text/Text.js';
 
 const {
   InputBlur,
@@ -281,9 +281,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     switch (type) {
       case InputBlur:
         {
-          if (allowCustomValue && highlightedIndex == '-1') {
-            const customValue = inputValue;
-            changes.selectedItem = customValue;
+          // If custom values are allowed, treat whatever the user typed as
+          // the value.
+          if (allowCustomValue && highlightedIndex === -1) {
+            const {
+              inputValue
+            } = state;
+            changes.selectedItem = inputValue;
             if (onChange) {
               onChange({
                 selectedItem: inputValue,
@@ -292,17 +296,28 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
             }
             return changes;
           }
-          if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
+
+          // If a new item was selected, keep its label in the input.
+          if (state.inputValue && highlightedIndex === -1 && changes.selectedItem) {
             return {
               ...changes,
               inputValue: itemToString(changes.selectedItem)
             };
           }
-          if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
-            return {
-              ...changes,
-              inputValue: ''
-            };
+
+          // If custom values are not allowed, normalize any non-matching
+          // text. If the input isn’t an exact item label, restore the
+          // selected label if there is one, or clear it.
+          if (!allowCustomValue) {
+            const currentInput = state.inputValue ?? '';
+            const hasExactMatch = !!currentInput && items.some(item => itemToString(item) === currentInput);
+            if (!hasExactMatch) {
+              const restoredInput = state.selectedItem !== null ? itemToString(state.selectedItem) : '';
+              return {
+                ...changes,
+                inputValue: restoredInput
+              };
+            }
           }
           return changes;
         }
@@ -355,16 +370,17 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         };
       case FunctionToggleMenu:
       case ToggleButtonClick:
-        if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {
-          return {
-            ...changes,
-            inputValue: '' // Clear the input
-          };
-        }
-        if (changes.isOpen && !changes.selectedItem) {
-          return {
-            ...changes
-          };
+        // When closing the menu, apply the same normalization as blur.
+        if (state.isOpen && !changes.isOpen && !allowCustomValue) {
+          const currentInput = state.inputValue ?? '';
+          const hasExactMatch = !!currentInput && items.some(item => itemToString(item) === currentInput);
+          if (!hasExactMatch) {
+            const restoredInput = state.selectedItem !== null ? itemToString(state.selectedItem) : '';
+            return {
+              ...changes,
+              inputValue: restoredInput
+            };
+          }
         }
         return changes;
       case MenuMouseLeave:
@@ -391,7 +407,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [allowCustomValue, inputValue, onChange]);
+  [allowCustomValue, inputValue, itemToString, items, onChange]);
   const handleToggleClick = isOpen => event => {
     if (onToggleClick) {
       onToggleClick(event);

package/es/components/ComboButton/index.js

@@ -20,7 +20,7 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, hide, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 

package/es/components/ComposedModal/ComposedModal.js

@@ -6,14 +6,14 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useEffect, Children, cloneElement } from 'react';
+import React, { useRef, useState, useContext, useEffect, Children, cloneElement } from 'react';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import { toggleClass } from '../../tools/toggleClass.js';
 import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPropIsTruthy.js';
@@ -28,6 +28,10 @@ import { Dialog } from '../Dialog/Dialog.js';
 import { warning } from '../../internal/warning.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import { useMergeRefs } from '@floating-ui/react';
+import { ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext, ComposedModalPresence } from './ComposedModalPresence.js';
+import { useId } from '../../internal/useId.js';
+import { useComposedModalState } from './useComposedModalState.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
@@ -95,6 +99,34 @@ ModalBody.propTypes = {
   hasScrollingContent: PropTypes.bool
 };
 const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
+  open,
+  ...props
+}, ref) {
+  const id = useId();
+  const enablePresence = useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(useContext(ComposedModalPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = useExclusiveComposedModalPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React.createElement(ComposedModalPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React.createElement(ComposedModalDialog, _extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React.createElement(ComposedModalDialog, _extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModalDialog({
   ['aria-labelledby']: ariaLabelledBy,
   ['aria-label']: ariaLabel,
   children,
@@ -105,7 +137,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   isFullWidth,
   onClose,
   onKeyDown,
-  open,
+  open: externalOpen,
   preventCloseOnClickOutside,
   selectorPrimaryFocus = '[data-modal-primary-focus]',
   selectorsFloatingMenus,
@@ -115,27 +147,30 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   ...rest
 }, ref) {
   const prefix = usePrefix();
-  const [isOpen, setIsOpen] = useState(!!open);
-  const [wasOpen, setWasOpen] = useState(!!open);
   const innerModal = useRef(null);
   const button = useRef(null);
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
   const onMouseDownTarget = useRef(null);
+  const presenceContext = useContext(ComposedModalPresenceContext);
+  const mergedRefs = useMergeRefs([ref, presenceContext?.presenceRef]);
+  const enablePresence = useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const modalState = useComposedModalState(open);
+  const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
   const enableDialogElement = useFeatureFlag('enable-dialog-element');
   const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
-  // Keep track of modal open/close state
-  // and propagate it to the document.body
+  // Propagate open/close state to the document.body
   useEffect(() => {
-    if (!enableDialogElement && open !== wasOpen) {
-      setIsOpen(!!open);
-      setWasOpen(!!open);
+    if (!enableDialogElement) {
       toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
     }
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
-  }, [open, wasOpen, prefix]);
+  }, [open, prefix]);
   // Remove the document.body className on unmount
   useEffect(() => {
     if (!enableDialogElement) {
@@ -226,7 +261,8 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     }
   }
   const modalClass = cx(`${prefix}--modal`, {
-    'is-visible': isOpen,
+    'is-visible': enablePresence || isOpen,
+    [`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
     [`${prefix}--modal--danger`]: danger,
     [`${prefix}--modal--slug`]: slug,
     [`${prefix}--modal--decorator`]: decorator
@@ -280,12 +316,23 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open]);
   useEffect(() => {
-    if (!enableDialogElement && !open && launcherButtonRef) {
+    if (!enableDialogElement && !enablePresence && !open && launcherButtonRef) {
       setTimeout(() => {
         launcherButtonRef.current?.focus();
       });
     }
-  }, [enableDialogElement, open, launcherButtonRef]);
+  }, [enableDialogElement, enablePresence, open, launcherButtonRef]);
+  // Focus launcherButtonRef on unmount
+  useEffect(() => {
+    const launcherButton = launcherButtonRef?.current;
+    return () => {
+      if (enablePresence && launcherButton) {
+        setTimeout(() => {
+          launcherButton.focus();
+        });
+      }
+    };
+  }, [enablePresence, launcherButtonRef]);
   useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -324,7 +371,8 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     modal: true,
     className: containerClass,
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
-    "aria-labelledby": ariaLabelledBy
+    "aria-labelledby": ariaLabelledBy,
+    "data-exiting": presenceContext?.isExiting || undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
@@ -353,13 +401,14 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   return /*#__PURE__*/React.createElement(Layer, _extends({}, rest, {
     level: 0,
     role: "presentation",
-    ref: ref,
+    ref: mergedRefs,
     "aria-hidden": !open,
     onBlur: handleBlur,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,
-    className: modalClass
+    className: modalClass,
+    "data-exiting": presenceContext?.isExiting || undefined
   }), modalBody);
 });
 ComposedModal.propTypes = {

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+import React, { type PropsWithChildren } from 'react';
+import { type PresenceContext } from '../../internal/usePresenceContext';
+import { useComposedModalState } from './useComposedModalState';
+export interface ComposedModalPresenceProps {
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open: boolean;
+    /**
+     * Internal property for backwards compatibility. Specify whether the Modal should opt in to presence mode.
+     */
+    _autoEnablePresence?: boolean;
+    /**
+     * Internal property to predefine the presence context's id for exclusivity.
+     */
+    _presenceId?: string;
+}
+export declare const ComposedModalPresence: ({ open, _presenceId: presenceId, _autoEnablePresence: autoEnablePresence, children, }: PropsWithChildren<ComposedModalPresenceProps>) => import("react/jsx-runtime").JSX.Element | null;
+interface ComposedModalPresenceContextProps extends PresenceContext {
+    modalState: ReturnType<typeof useComposedModalState>;
+    autoEnablePresence: boolean;
+}
+export declare const ComposedModalPresenceContext: React.Context<ComposedModalPresenceContextProps | undefined>;
+/**
+ * Handles occurrences where only a single composed modal must consume a context.
+ */
+export declare const useExclusiveComposedModalPresenceContext: (id: string) => ComposedModalPresenceContextProps | undefined;
+export {};

package/es/components/ComposedModal/ComposedModalPresence.js

@@ -0,0 +1,42 @@
+/**
+ * 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, { createContext, useContext, useMemo } from 'react';
+import { usePresenceContext } from '../../internal/usePresenceContext.js';
+import { useComposedModalState } from './useComposedModalState.js';
+
+const ComposedModalPresence = ({
+  open,
+  _presenceId: presenceId,
+  _autoEnablePresence: autoEnablePresence = true,
+  children
+}) => {
+  // Since the modal could be used without an onClose callback, we need to be aware of the internal isOpen state
+  const modalState = useComposedModalState(open);
+  const [isOpen] = modalState;
+  const [isPresent, context] = usePresenceContext(isOpen, presenceId);
+  const presenceContextValue = useMemo(() => ({
+    modalState,
+    autoEnablePresence,
+    ...context
+  }), [modalState, autoEnablePresence, context]);
+  if (!isPresent) return null;
+  return /*#__PURE__*/React.createElement(ComposedModalPresenceContext, {
+    value: presenceContextValue
+  }, children);
+};
+const ComposedModalPresenceContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Handles occurrences where only a single composed modal must consume a context.
+ */
+const useExclusiveComposedModalPresenceContext = id => {
+  const ctx = useContext(ComposedModalPresenceContext);
+  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+};
+
+export { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext };

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

@@ -6,6 +6,7 @@
  */
 import ComposedModal from './ComposedModal';
 export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
+export { ComposedModalPresence, type ComposedModalPresenceProps, } from './ComposedModalPresence';
 export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalFooter, type ModalFooterProps } from './ModalFooter';
 export default ComposedModal;

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+export declare const useComposedModalState: (open: boolean | undefined) => readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/es/components/ComposedModal/useComposedModalState.js

@@ -0,0 +1,24 @@
+/**
+ * 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 { useState, useEffect, useMemo } from 'react';
+
+const useComposedModalState = open => {
+  const [isOpen, setIsOpen] = useState(!!open);
+  const [wasOpen, setWasOpen] = useState(!!open);
+
+  // Keep track of modal open/close state
+  useEffect(() => {
+    if (open !== wasOpen) {
+      setIsOpen(!!open);
+      setWasOpen(!!open);
+    }
+  }, [open, wasOpen]);
+  return useMemo(() => [isOpen, setIsOpen], [isOpen]);
+};
+
+export { useComposedModalState };

package/es/components/DataTable/TableBatchActions.js

@@ -12,9 +12,9 @@ import React from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import TableActionList from './TableActionList.js';
-import '../Text/index.js';
-import { usePrefix } from '../../internal/usePrefix.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
 const translationKeys = {

package/es/components/DatePickerInput/DatePickerInput.js

@@ -14,11 +14,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 

package/es/components/Dialog/Dialog.js

@@ -14,7 +14,8 @@ import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { Layer } from '../Layer/index.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
 import Button from '../Button/Button.js';
@@ -22,7 +23,6 @@ import '../Button/Button.Skeleton.js';
 import { useId } from '../../internal/useId.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
-import { Text } from '../Text/Text.js';
 
 const DialogContext = /*#__PURE__*/createContext({});
 

package/es/components/Dropdown/Dropdown.js

@@ -6,13 +6,13 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useEffect, useContext, useCallback, useMemo, useState, isValidElement, cloneElement } from 'react';
+import React, { useEffect, useContext, useCallback, useMemo, useState, useRef, isValidElement, cloneElement } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
@@ -251,7 +251,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' && !selectedItem ? true : false);
   };
-  const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
+  const buttonRef = useRef(null);
+  const mergedRef = mergeRefs(toggleButtonProps.ref, ref, buttonRef);
   const [currTimer, setCurrTimer] = useState();
   const [isTyping, setIsTyping] = useState(false);
   const onKeyDownHandler = useCallback(evt => {
@@ -287,7 +288,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
           // NOTE: does not prevent click
           evt.preventDefault();
           // focus on the element as per readonly input behavior
-          mergedRef?.current?.focus();
+          buttonRef.current?.focus();
         },
         onKeyDown: evt => {
           const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
@@ -302,7 +303,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
         onKeyDown: onKeyDownHandler
       };
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [readOnly, onKeyDownHandler]);
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles || autoAlign ? refs.setFloating : null

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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/ExpandableSearch/ExpandableSearch.js

@@ -14,7 +14,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 
 const ExpandableSearch = /*#__PURE__*/React.forwardRef(function ExpandableSearch({
   onBlur,