@carbon/react 1.91.0 → 1.92.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -32,6 +32,10 @@ var Dialog = require('../Dialog/Dialog.js');
 var warning = require('../../internal/warning.js');
 var index$2 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var react = require('@floating-ui/react');
+var ComposedModalPresence = require('./ComposedModalPresence.js');
+var useId = require('../../internal/useId.js');
+var useComposedModalState = require('./useComposedModalState.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
@@ -72,7 +76,7 @@ const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
   return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({
     className: contentClass
   }, hasScrollingContentProps, rest, {
-    ref: mergeRefs.default(contentRef, ref)
+    ref: mergeRefs.mergeRefs(contentRef, ref)
   }), children);
 });
 ModalBody.propTypes = {
@@ -99,6 +103,34 @@ ModalBody.propTypes = {
   hasScrollingContent: PropTypes.bool
 };
 const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
+  open,
+  ...props
+}, ref) {
+  const id = useId.useId();
+  const enablePresence = index$1.useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(React.useContext(ComposedModalPresence.ComposedModalPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = ComposedModalPresence.useExclusiveComposedModalPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React.createElement(ComposedModalPresence.ComposedModalPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React.createElement(ComposedModalDialog, _rollupPluginBabelHelpers.extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React.createElement(ComposedModalDialog, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModalDialog({
   ['aria-labelledby']: ariaLabelledBy,
   ['aria-label']: ariaLabel,
   children,
@@ -109,7 +141,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   isFullWidth,
   onClose,
   onKeyDown,
-  open,
+  open: externalOpen,
   preventCloseOnClickOutside,
   selectorPrimaryFocus = '[data-modal-primary-focus]',
   selectorsFloatingMenus,
@@ -119,27 +151,30 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
-  const [isOpen, setIsOpen] = React.useState(!!open);
-  const [wasOpen, setWasOpen] = React.useState(!!open);
   const innerModal = React.useRef(null);
   const button = React.useRef(null);
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
   const onMouseDownTarget = React.useRef(null);
+  const presenceContext = React.useContext(ComposedModalPresence.ComposedModalPresenceContext);
+  const mergedRefs = react.useMergeRefs([ref, presenceContext?.presenceRef]);
+  const enablePresence = index$1.useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const modalState = useComposedModalState.useComposedModalState(open);
+  const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
   const enableDialogElement = index$1.useFeatureFlag('enable-dialog-element');
   const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   process.env.NODE_ENV !== "production" ? warning.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
   React.useEffect(() => {
-    if (!enableDialogElement && open !== wasOpen) {
-      setIsOpen(!!open);
-      setWasOpen(!!open);
+    if (!enableDialogElement) {
       toggleClass.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
   React.useEffect(() => {
     if (!enableDialogElement) {
@@ -230,7 +265,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
@@ -284,12 +320,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]);
   React.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
+  React.useEffect(() => {
+    const launcherButton = launcherButtonRef?.current;
+    return () => {
+      if (enablePresence && launcherButton) {
+        setTimeout(() => {
+          launcherButton.focus();
+        });
+      }
+    };
+  }, [enablePresence, launcherButtonRef]);
   React.useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -328,7 +375,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`
@@ -357,13 +405,14 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({}, rest, {
     level: 0,
     role: "presentation",
-    ref: ref,
+    ref: mergedRefs,
     "aria-hidden": !open,
     onBlur: handleBlur,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,
-    className: modalClass
+    className: modalClass,
+    "data-exiting": presenceContext?.isExiting || undefined
   }), modalBody);
 });
 ComposedModal.propTypes = {

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

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var usePresenceContext = require('../../internal/usePresenceContext.js');
+var useComposedModalState = require('./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.useComposedModalState(open);
+  const [isOpen] = modalState;
+  const [isPresent, context] = usePresenceContext.usePresenceContext(isOpen, presenceId);
+  const presenceContextValue = React.useMemo(() => ({
+    modalState,
+    autoEnablePresence,
+    ...context
+  }), [modalState, autoEnablePresence, context]);
+  if (!isPresent) return null;
+  return /*#__PURE__*/React.createElement(ComposedModalPresenceContext, {
+    value: presenceContextValue
+  }, children);
+};
+const ComposedModalPresenceContext = /*#__PURE__*/React.createContext(undefined);
+
+/**
+ * Handles occurrences where only a single composed modal must consume a context.
+ */
+const useExclusiveComposedModalPresenceContext = id => {
+  const ctx = React.useContext(ComposedModalPresenceContext);
+  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+};
+
+exports.ComposedModalPresence = ComposedModalPresence;
+exports.ComposedModalPresenceContext = ComposedModalPresenceContext;
+exports.useExclusiveComposedModalPresenceContext = useExclusiveComposedModalPresenceContext;

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

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

package/lib/components/DataTable/TableBatchActions.js

@@ -16,9 +16,9 @@ var React = require('react');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var TableActionList = require('./TableActionList.js');
-require('../Text/index.js');
-var usePrefix = require('../../internal/usePrefix.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
+var usePrefix = require('../../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/lib/components/DatePickerInput/DatePickerInput.js

@@ -18,11 +18,11 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 

package/lib/components/Dialog/Dialog.js

@@ -16,7 +16,8 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index$1 = require('../Layer/index.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var Button = require('../Button/Button.js');
@@ -24,7 +25,6 @@ require('../Button/Button.Skeleton.js');
 var useId = require('../../internal/useId.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
-var Text = require('../Text/Text.js');
 
 const DialogContext = /*#__PURE__*/React.createContext({});
 

package/lib/components/Dropdown/Dropdown.js

@@ -255,7 +255,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' && !selectedItem ? true : false);
   };
-  const mergedRef = mergeRefs.default(toggleButtonProps.ref, ref);
+  const buttonRef = React.useRef(null);
+  const mergedRef = mergeRefs.mergeRefs(toggleButtonProps.ref, ref, buttonRef);
   const [currTimer, setCurrTimer] = React.useState();
   const [isTyping, setIsTyping] = React.useState(false);
   const onKeyDownHandler = React.useCallback(evt => {
@@ -291,7 +292,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'];
@@ -306,7 +307,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 = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles || autoAlign ? refs.setFloating : null

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

@@ -65,7 +65,7 @@ const ExpandableSearch = /*#__PURE__*/React.forwardRef(function ExpandableSearch
   return /*#__PURE__*/React.createElement(Search.default, _rollupPluginBabelHelpers.extends({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: mergeRefs.default(searchRef, forwardedRef),
+    ref: mergeRefs.mergeRefs(searchRef, forwardedRef),
     className: classes,
     onBlur: events.composeEventHandlers([onBlur, handleBlur]),
     onChange: events.composeEventHandlers([onChange, handleChange]),

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

@@ -17,6 +17,7 @@ export interface FeatureFlagsProps {
     enableDialogElement?: boolean;
     enableV12DynamicFloatingStyles?: boolean;
     enableEnhancedFileUploader?: boolean;
+    enablePresence?: boolean;
 }
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -28,7 +29,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/FeatureFlags/index.js

@@ -34,7 +34,8 @@ function FeatureFlags({
   enableExperimentalFocusWrapWithoutSentinels = false,
   enableDialogElement = false,
   enableV12DynamicFloatingStyles = false,
-  enableEnhancedFileUploader = false
+  enableEnhancedFileUploader = false,
+  enablePresence = false
 }) {
   const parentScope = React.useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
@@ -47,6 +48,7 @@ function FeatureFlags({
     'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     'enable-enhanced-file-uploader': enableEnhancedFileUploader,
+    'enable-presence': enablePresence,
     ...flags
   };
   const [scope, updateScope] = React.useState(() => {

package/lib/components/FileUploader/FileUploader.js

@@ -19,10 +19,10 @@ var Button = require('../Button/Button.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
-var Text = require('../Text/Text.js');
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const FileUploader = /*#__PURE__*/React.forwardRef(({

package/lib/components/FileUploader/FileUploaderItem.js

@@ -19,10 +19,10 @@ var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-var Text = require('../Text/Text.js');
 
 function FileUploaderItem({
   uuid,

package/lib/components/FluidTextInput/FluidPasswordInput.js

@@ -7,13 +7,32 @@
 
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-require('react');
-require('classnames');
+var React = require('react');
+var cx = require('classnames');
 require('../TextInput/ControlledPasswordInput.js');
-require('../TextInput/PasswordInput.js');
+var PasswordInput = require('../TextInput/PasswordInput.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 
-({
+const FluidPasswordInput = ({
+  className,
+  ...other
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx(className, `${prefix}--text-input--fluid`);
+  return /*#__PURE__*/React.createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React.createElement(PasswordInput.default, _rollupPluginBabelHelpers.extends({
+    className: classNames
+  }, other)));
+};
+FluidPasswordInput.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper
    */
@@ -90,4 +109,6 @@ require('../TextInput/PasswordInput.js');
    * Whether or not the component is readonly
    */
   readOnly: PropTypes.bool
-});
+};
+
+exports.default = FluidPasswordInput;

package/lib/components/FluidTextInput/index.js

@@ -10,11 +10,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var FluidTextInput = require('./FluidTextInput.js');
-require('./FluidPasswordInput.js');
+var FluidPasswordInput = require('./FluidPasswordInput.js');
 var FluidTextInput_Skeleton = require('./FluidTextInput.Skeleton.js');
 
 
 
 exports.FluidTextInput = FluidTextInput.default;
 exports.default = FluidTextInput.default;
+exports.FluidPasswordInput = FluidPasswordInput.default;
 exports.FluidTextInputSkeleton = FluidTextInput_Skeleton.default;

package/lib/components/FormLabel/FormLabel.js

@@ -14,8 +14,8 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 function FormLabel({
   className: customClassName,

package/lib/components/ListBox/ListBox.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-import { type ListBoxSize, type ListBoxType } from '.';
+import { type ListBoxSize, type ListBoxType } from './ListBoxPropTypes';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
 export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
     /**

package/lib/components/ListBox/ListBox.js

@@ -14,11 +14,10 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var deprecate = require('../../prop-types/deprecate.js');
-require('./index.js');
+var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 
 const handleOnKeyDown = event => {
   if (event.keyCode === 27) {

package/lib/components/ListItem/ListItem.js

@@ -14,8 +14,8 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 function ListItem({
   className,

package/lib/components/Menu/MenuItem.js

@@ -22,9 +22,9 @@ var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
-require('../Text/index.js');
-var defaultItemToString = require('../../internal/defaultItemToString.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 
 var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({

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

@@ -88,7 +88,7 @@ const MenuButton = /*#__PURE__*/React.forwardRef(({
     middleware: middlewares,
     whileElementsMounted: react.autoUpdate
   });
-  const ref = mergeRefs.default(forwardRef, triggerRef);
+  const ref = mergeRefs.mergeRefs(forwardRef, triggerRef);
   const {
     open,
     handleClick: hookOnClick,