@carbon/react 1.91.0 → 1.92.0-rc.0

package/lib/components/Modal/Modal.js

@@ -24,13 +24,15 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useId = require('../../internal/useId.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var usePreviousValue = require('../../internal/usePreviousValue.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var index$2 = 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 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -38,12 +40,40 @@ var Dialog = require('../Dialog/Dialog.js');
 var index$1 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 var warning = require('../../internal/warning.js');
+var ModalPresence = require('./ModalPresence.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
-var Text = require('../Text/Text.js');
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal({
+  open,
+  ...props
+}, ref) {
+  const id = useId.useId();
+  const enablePresence = index.useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(React.useContext(ModalPresence.ModalPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = ModalPresence.useExclusiveModalPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React.createElement(ModalPresence.ModalPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React.createElement(ModalDialog, _rollupPluginBabelHelpers.extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React.createElement(ModalDialog, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   'aria-label': ariaLabelProp,
   children,
   className,
@@ -54,7 +84,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   passiveModal = false,
   secondaryButtonText,
   primaryButtonText,
-  open,
+  open: externalOpen,
   onRequestClose = noopFn.noopFn,
   onRequestSubmit = noopFn.noopFn,
   onSecondarySubmit,
@@ -87,7 +117,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const endTrap = React.useRef(null);
   const wrapFocusTimeout = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
-  const prevOpen = usePreviousValue.usePreviousValue(open);
   const modalInstanceId = `modal-${useId.useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -97,6 +126,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
+  const presenceContext = React.useContext(ModalPresence.ModalPresenceContext);
+  const mergedRefs = useMergedRefs.useMergedRefs([ref, presenceContext?.presenceRef]);
+  const enablePresence = index.useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const prevOpen = usePreviousValue.usePreviousValue(open);
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   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;
@@ -192,7 +228,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
-    'is-visible': open,
+    'is-visible': enablePresence || open,
+    [`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
     [`${prefix}--modal--danger`]: danger,
     [`${prefix}--modal--slug`]: slug,
     [`${prefix}--modal--decorator`]: decorator
@@ -256,14 +293,25 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     }
   }, [open, prefix, enableDialogElement]);
   React.useEffect(() => {
-    if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
+    if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, prevOpen, launcherButtonRef, enableDialogElement]);
+  }, [open, prevOpen, launcherButtonRef, enableDialogElement, enablePresence]);
+  // 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 => {
@@ -335,7 +383,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     role: isAlertDialog ? 'alertdialog' : '',
     "aria-describedby": isAlertDialog ? modalBodyId : '',
     className: containerClasses,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "data-exiting": presenceContext?.isExiting || undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-header`
   }, modalLabel && /*#__PURE__*/React.createElement(Text.Text, {
@@ -462,7 +511,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     onBlur: handleBlur,
     className: modalClasses,
     role: "presentation",
-    ref: ref
+    ref: mergedRefs,
+    "data-exiting": presenceContext?.isExiting || undefined
   }), modalBody);
 });
 Modal.propTypes = {

package/lib/components/Modal/ModalPresence.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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';
+export interface ModalPresenceProps {
+    /**
+     * 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 ModalPresence: ({ open, _presenceId: presenceId, _autoEnablePresence: autoEnablePresence, children, }: PropsWithChildren<ModalPresenceProps>) => import("react/jsx-runtime").JSX.Element | null;
+interface ModalPresenceContextProps extends PresenceContext {
+    autoEnablePresence: boolean;
+}
+export declare const ModalPresenceContext: React.Context<ModalPresenceContextProps | undefined>;
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+export declare const useExclusiveModalPresenceContext: (id: string) => ModalPresenceContextProps | undefined;
+export {};

package/lib/components/Modal/ModalPresence.js

@@ -0,0 +1,41 @@
+/**
+ * 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');
+
+const ModalPresence = ({
+  open,
+  _presenceId: presenceId,
+  _autoEnablePresence: autoEnablePresence = true,
+  children
+}) => {
+  const [isPresent, context] = usePresenceContext.usePresenceContext(open, presenceId);
+  const contextValue = React.useMemo(() => ({
+    autoEnablePresence,
+    ...context
+  }), [autoEnablePresence, context]);
+  if (!isPresent) return null;
+  return /*#__PURE__*/React.createElement(ModalPresenceContext.Provider, {
+    value: contextValue
+  }, children);
+};
+const ModalPresenceContext = /*#__PURE__*/React.createContext(undefined);
+
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+const useExclusiveModalPresenceContext = id => {
+  const ctx = React.useContext(ModalPresenceContext);
+  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+};
+
+exports.ModalPresence = ModalPresence;
+exports.ModalPresenceContext = ModalPresenceContext;
+exports.useExclusiveModalPresenceContext = useExclusiveModalPresenceContext;

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

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Modal, { type ModalProps } from './Modal';
+import { ModalPresence, type ModalPresenceProps } from './ModalPresence';
 export default Modal;
-export { Modal, type ModalProps };
+export { Modal, ModalPresence, type ModalProps, type ModalPresenceProps };

package/lib/components/Modal/index.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Modal = require('./Modal.js');
+require('react');
 
 
 

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -625,14 +625,14 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
-  const mergedRef = mergeRefs.default(textInput, inputProp.ref);
+  const mergedRef = mergeRefs.mergeRefs(textInput, inputProp.ref);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
       evt.preventDefault();
       // focus on the element as per readonly input behavior
-      if (mergedRef.current !== undefined) {
-        mergedRef.current.focus();
+      if (textInput.current) {
+        textInput.current.focus();
       }
     },
     onKeyDown: evt => {

package/lib/components/MultiSelect/MultiSelect.js

@@ -235,7 +235,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       }
     }
   });
-  const mergedRef = mergeRefs.default(toggleButtonProps.ref, ref);
+  const toggleButtonRef = React.useRef(null);
+  const mergedRef = mergeRefs.mergeRefs(toggleButtonProps.ref, ref, toggleButtonRef);
   const selectedItems = selectedItem;
 
   /**
@@ -390,8 +391,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       // NOTE: does not prevent click
       evt.preventDefault();
       // focus on the element as per readonly input behavior
-      if (mergedRef.current !== undefined) {
-        mergedRef.current.focus();
+      if (toggleButtonRef.current) {
+        toggleButtonRef.current.focus();
       }
     },
     onKeyDown: evt => {

package/lib/components/Notification/Notification.js

@@ -13,7 +13,8 @@ var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
@@ -27,7 +28,6 @@ var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
 var warning = require('../../internal/warning.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
-var Text = require('../Text/Text.js');
 
 /**
  * Conditionally call a callback when the escape key is pressed

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

@@ -17,6 +17,26 @@ export declare const translationIds: {
 type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
 export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
+    /**
+     * Optional validation function that is called with the input value and locale.
+     * This is called before other validations, giving consumers the ability
+     * to short-circuit or extend validation without replacing built-in rules
+     * @example
+     * // Using the built-in separator validation
+     * <NumberInput validate={validateNumberSeparators} />
+     *
+     * // Combining with custom validation
+     * <NumberInput
+     *   validate={(value, locale) => {
+     *     return validateNumberSeparators(value, locale) && customValidation(value)
+     *   }}
+     * />
+     * - Return `false` to immediately fail validation.
+     * - Return `true` to pass this validation, but still run other checks (min, max, required, etc.).
+     * - Return `undefined` to defer entirely to built-in validation logic.
+     *
+     */
+    validate?: (value: string, locale: string) => boolean | undefined;
     /**
      * `true` to allow empty string.
      */
@@ -186,16 +206,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     warnText?: ReactNode;
 }
+export declare const validateNumberSeparators: (input: string, locale: string) => boolean;
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
-export interface Label {
-    disabled?: boolean;
-    hideLabel?: boolean;
-    id?: string;
-    label?: ReactNode;
-}
-export interface HelperTextProps {
-    id?: string;
-    description?: ReactNode;
-    disabled?: boolean;
-}
 export { NumberInput };

package/lib/components/NumberInput/NumberInput.js

@@ -18,7 +18,8 @@ var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var clamp = require('../../internal/clamp.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var utilities = require('@carbon/utilities');
@@ -27,7 +28,6 @@ var match = require('../../internal/keyboard/match.js');
 var NumberFormatPropTypes = require('./NumberFormatPropTypes.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _Subtract, _Add;
 const translationIds = {
@@ -43,6 +43,7 @@ const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'
 };
+
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const {
@@ -77,6 +78,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     translateWithId: t = id => defaultTranslations[id],
     type = 'number',
     defaultValue = type === 'number' ? 0 : NaN,
+    validate,
     warn = false,
     warnText = '',
     stepStartValue = 0,
@@ -123,7 +125,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
    * Only used when type="text"
    */
   const [previousNumberValue, setPreviousNumberValue] = React.useState(numberValue);
-
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -154,9 +155,11 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const isInputValid = getInputValidity({
     allowEmpty,
     invalid,
-    value: type === 'number' ? value : numberValue,
+    value: validate ? inputValue : type === 'number' ? value : numberValue,
     max,
-    min
+    min,
+    validate,
+    locale
   });
   const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
     id,
@@ -214,8 +217,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     }
     if (type === 'text') {
       const _value = allowEmpty && event.target.value === '' ? '' : event.target.value;
-
-      // When isControlled, setNumberValue will not update numberValue in useControllableState.
       setNumberValue(numberParser.parse(_value));
       setInputValue(_value);
       // The onChange prop isn't called here because it will be called on blur
@@ -265,7 +266,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         rawValue = currentValue - step;
       }
       const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
-      const floatValue = parseFloat(rawValue.toFixed(precision));
+      const floatValue = parseFloat(Number(rawValue).toFixed(precision));
       const newValue = clamp.clamp(floatValue, min ?? -Infinity, max ?? Infinity);
       const state = {
         value: newValue,
@@ -376,13 +377,15 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // they've passed in.
         const _numberValue = isControlled ? numberParser.parse(inputValue) : numberValue;
         const formattedValue = isNaN(_numberValue) ? '' : format(_numberValue);
-        setInputValue(formattedValue);
-
+        const rawValue = e.target.value;
+        // Validate raw input
+        const isValid = validate ? validate(rawValue, locale) : true;
+        setInputValue(isValid ? formattedValue : rawValue);
         // Calling format() can alter the number (such as rounding it)
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
-        if (onChange) {
+        if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
             direction: previousNumberValue < parsedFormattedNewValue ? 'up' : 'down'
@@ -616,7 +619,18 @@ NumberInput.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Optional validation function that is called with the input value and locale.
+   *
+   * - Return `false` to immediately fail validation.
+   * - Return `true` to pass this validation, but still run other checks (min, max, required, etc.).
+   * - Return `undefined` to defer entirely to built-in validation logic.
+   *
+   * This is called before other validations, giving consumers the ability
+   * to short-circuit or extend validation without replacing built-in rules.
+   */
+  validate: PropTypes.func
 };
 const Label = ({
   disabled,
@@ -639,17 +653,11 @@ const Label = ({
   }
   return null;
 };
-Label.propTypes = {
-  disabled: PropTypes.bool,
-  hideLabel: PropTypes.bool,
-  id: PropTypes.string,
-  label: PropTypes.node
-};
-function HelperText({
+const HelperText = ({
   disabled,
   description,
   id
-}) {
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -662,11 +670,6 @@ function HelperText({
     }, description);
   }
   return null;
-}
-HelperText.propTypes = {
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  id: PropTypes.string
 };
 
 /**
@@ -680,6 +683,8 @@ HelperText.propTypes = {
  * @param {number} config.value
  * @param {number} config.max
  * @param {number} config.min
+ * @param {Function} config.validate
+ * @param {string} config.locale
  * @returns {boolean}
  */
 function getInputValidity({
@@ -687,8 +692,17 @@ function getInputValidity({
   invalid,
   value,
   max,
-  min
+  min,
+  validate,
+  locale
 }) {
+  if (typeof validate === 'function') {
+    const result = validate(value, locale);
+    if (result === false) {
+      return false; // immediate invalid
+    }
+    // If true or undefined, continue to further validations
+  }
   if (invalid) {
     return false;
   }

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -175,8 +175,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
     if (onCloseMenu) {
       onCloseMenu();
     }
-    onClose();
-  }, [onClose]);
+  }, []);
   const closeMenuAndFocus = React.useCallback(() => {
     const wasClicked = click;
     const wasOpen = open;
@@ -321,7 +320,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.cloneElement(menuBody, {
     'data-floating-menu-direction': direction
   }));
-  const combinedRef = innerRef ? mergeRefs.default(triggerRef, innerRef, ref) : mergeRefs.default(triggerRef, ref);
+  const combinedRef = innerRef ? mergeRefs.mergeRefs(triggerRef, innerRef, ref) : mergeRefs.mergeRefs(triggerRef, ref);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--overflow-menu__wrapper`,
     "aria-owns": open ? menuBodyId : undefined,

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

@@ -99,7 +99,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
-  const floatingRef = mergeRefs.default(triggerRef, refs.setReference);
+  const floatingRef = mergeRefs.mergeRefs(triggerRef, refs.setReference);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: containerClasses,
     "aria-owns": open ? id : undefined,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -17,8 +17,8 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 const frFn = React.forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {

package/lib/components/PageHeader/PageHeader.js

@@ -14,7 +14,8 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index$1 = require('../MenuButton/index.js');
 require('../Menu/Menu.js');
 var MenuItem = require('../Menu/MenuItem.js');
@@ -36,7 +37,6 @@ require('../Grid/Row.js');
 var Column = require('../Grid/Column.js');
 require('../Grid/ColumnHang.js');
 require('../Grid/GridContext.js');
-var Text = require('../Text/Text.js');
 
 /**
  * ----------

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -15,8 +15,8 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',

package/lib/components/RadioButton/RadioButton.js

@@ -13,14 +13,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -65,7 +65,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefix}--radio-button`,
     onChange: handleOnChange,
     id: uniqueId,
-    ref: mergeRefs.default(inputRef, ref),
+    ref: mergeRefs.mergeRefs(inputRef, ref),
     disabled: disabled,
     value: value,
     name: name,

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var index$1 = require('../Text/index.js');
+var createTextComponent = require('../Text/createTextComponent.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -117,13 +117,13 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses,
-    ref: mergeRefs.default(divRef, ref)
+    ref: mergeRefs.mergeRefs(divRef, ref)
   }, /*#__PURE__*/React.createElement("fieldset", _rollupPluginBabelHelpers.extends({
     className: fieldsetClasses,
     disabled: disabled,
     "data-invalid": invalid ? true : undefined,
     "aria-describedby": showHelper && helperText ? helperId : undefined
-  }, rest), legendText && /*#__PURE__*/React.createElement(index$1.Legend, {
+  }, rest), legendText && /*#__PURE__*/React.createElement(createTextComponent.Legend, {
     className: `${prefix}--label`
   }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button-group-inner--decorator`

package/lib/components/RadioTile/RadioTile.js

@@ -20,11 +20,11 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
 const RadioTile = /*#__PURE__*/React.forwardRef(({