@carbon/react 1.91.0 → 1.92.0-rc.0

package/es/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/es/components/FeatureFlags/index.js

@@ -32,7 +32,8 @@ function FeatureFlags({
   enableExperimentalFocusWrapWithoutSentinels = false,
   enableDialogElement = false,
   enableV12DynamicFloatingStyles = false,
-  enableEnhancedFileUploader = false
+  enableEnhancedFileUploader = false,
+  enablePresence = false
 }) {
   const parentScope = useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
@@ -45,6 +46,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] = useState(() => {

package/es/components/FileUploader/FileUploader.js

@@ -15,10 +15,10 @@ import { ButtonKinds } from '../Button/Button.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { Text } from '../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/es/components/FileUploader/FileUploaderItem.js

@@ -15,10 +15,10 @@ import { matches } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Text } from '../Text/Text.js';
 
 function FileUploaderItem({
   uuid,

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -5,13 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import 'react';
-import 'classnames';
+import React from 'react';
+import cx from 'classnames';
 import '../TextInput/ControlledPasswordInput.js';
-import '../TextInput/PasswordInput.js';
+import PasswordInput from '../TextInput/PasswordInput.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
-({
+const FluidPasswordInput = ({
+  className,
+  ...other
+}) => {
+  const prefix = usePrefix();
+  const classNames = cx(className, `${prefix}--text-input--fluid`);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React.createElement(PasswordInput, _extends({
+    className: classNames
+  }, other)));
+};
+FluidPasswordInput.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper
    */
@@ -88,4 +105,6 @@ import '../TextInput/PasswordInput.js';
    * Whether or not the component is readonly
    */
   readOnly: PropTypes.bool
-});
+};
+
+export { FluidPasswordInput as default };

package/es/components/FluidTextInput/index.js

@@ -6,7 +6,7 @@
  */
 
 import FluidTextInput from './FluidTextInput.js';
-import './FluidPasswordInput.js';
+export { default as FluidPasswordInput } from './FluidPasswordInput.js';
 export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton.js';
 
 

package/es/components/FormLabel/FormLabel.js

@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 
 function FormLabel({
   className: customClassName,

package/es/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/es/components/ListBox/ListBox.js

@@ -10,11 +10,10 @@ import cx from 'classnames';
 import React, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { deprecate } from '../../prop-types/deprecate.js';
-import './index.js';
+import { ListBoxTypePropType, ListBoxSizePropType } from './ListBoxPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { ListBoxTypePropType, ListBoxSizePropType } from './ListBoxPropTypes.js';
 
 const handleOnKeyDown = event => {
   if (event.keyCode === 27) {

package/es/components/ListItem/ListItem.js

@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 
 function ListItem({
   className,

package/es/components/Menu/MenuItem.js

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

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

@@ -19,7 +19,7 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, 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';
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';

package/es/components/Modal/Modal.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect, cloneElement } from 'react';
+import React, { useContext, useRef, useState, useEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { toggleClass } from '../../tools/toggleClass.js';
@@ -20,13 +20,15 @@ import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPro
 import { wrapFocus, wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { usePreviousValue } from '../../internal/usePreviousValue.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 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 { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { deprecate } from '../../prop-types/deprecate.js';
@@ -34,12 +36,40 @@ import { Dialog } from '../Dialog/Dialog.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { warning } from '../../internal/warning.js';
+import { ModalPresenceContext, useExclusiveModalPresenceContext, ModalPresence } from './ModalPresence.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
-import { Text } from '../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();
+  const enablePresence = useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(useContext(ModalPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = useExclusiveModalPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React.createElement(ModalPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React.createElement(ModalDialog, _extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React.createElement(ModalDialog, _extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   'aria-label': ariaLabelProp,
   children,
   className,
@@ -50,7 +80,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   passiveModal = false,
   secondaryButtonText,
   primaryButtonText,
-  open,
+  open: externalOpen,
   onRequestClose = noopFn,
   onRequestSubmit = noopFn,
   onSecondarySubmit,
@@ -83,7 +113,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const endTrap = useRef(null);
   const wrapFocusTimeout = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
-  const prevOpen = usePreviousValue(open);
   const modalInstanceId = `modal-${useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -93,6 +122,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
+  const presenceContext = useContext(ModalPresenceContext);
+  const mergedRefs = useMergedRefs([ref, presenceContext?.presenceRef]);
+  const enablePresence = useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const prevOpen = usePreviousValue(open);
   const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = useFeatureFlag('enable-dialog-element');
   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;
@@ -188,7 +224,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
@@ -252,14 +289,25 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     }
   }, [open, prefix, enableDialogElement]);
   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
+  useEffect(() => {
+    const launcherButton = launcherButtonRef?.current;
+    return () => {
+      if (enablePresence && launcherButton) {
+        setTimeout(() => {
+          launcherButton.focus();
+        });
+      }
+    };
+  }, [enablePresence, launcherButtonRef]);
   useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -331,7 +379,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, {
@@ -458,7 +507,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/es/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/es/components/Modal/ModalPresence.js

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

package/es/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/es/components/Modal/index.js

@@ -6,6 +6,7 @@
  */
 
 import Modal from './Modal.js';
+import 'react';
 
 
 

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -21,7 +21,7 @@ import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { useId } from '../../internal/useId.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -629,8 +629,8 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       // 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/es/components/MultiSelect/MultiSelect.js

@@ -11,13 +11,13 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback, cloneElement } from 'react';
+import React, { useMemo, useContext, useState, useLayoutEffect, useRef, isValidElement, useCallback, cloneElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
 import { useSelection } from '../../internal/Selection.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 { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -233,7 +233,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       }
     }
   });
-  const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
+  const toggleButtonRef = useRef(null);
+  const mergedRef = mergeRefs(toggleButtonProps.ref, ref, toggleButtonRef);
   const selectedItems = selectedItem;
 
   /**
@@ -388,8 +389,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/es/components/Notification/Notification.js

@@ -11,7 +11,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import { deprecate } from '../../prop-types/deprecate.js';
 import cx from 'classnames';
 import { Close, InformationSquareFilled, InformationFilled, WarningAltFilled, WarningFilled, CheckmarkFilled, ErrorFilled } from '@carbon/icons-react';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
@@ -25,7 +26,6 @@ import { wrapFocusWithoutSentinels, wrapFocus } from '../../internal/wrapFocus.j
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
-import { Text } from '../Text/Text.js';
 
 /**
  * Conditionally call a callback when the escape key is pressed

package/es/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 };