@carbon/react 1.80.0 → 1.81.0-rc.0

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

@@ -33,12 +33,12 @@ export interface AccordionItemProps {
      * removed in the next major release of Carbon. Use the
      * `renderToggle` prop instead.
      */
-    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The callback function to render the expand button.
      * Can be a React component class.
      */
-    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The accordion title.
      */

package/es/components/AspectRatio/AspectRatio.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { PropsWithChildren, ReactHTML } from 'react';
+import { PropsWithChildren, HTMLElementType } from 'react';
 export interface AspectRatioProps {
     /**
      * Provide a custom component or string to be rendered as
@@ -17,7 +17,7 @@ export interface AspectRatioProps {
      * <AspectRatio as="article">My content</AspectRatio>
      * ```
      */
-    as?: keyof ReactHTML;
+    as?: HTMLElementType;
     /**
      * Specify a class name for the outermost node
      * of the component.

package/es/components/Button/Button.js

@@ -44,6 +44,9 @@ const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     tooltipPosition = 'top',
     ...rest
   } = props;
+  if (ButtonImageElement && !children && !iconDescription) {
+    console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
+  }
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {

package/es/components/Button/ButtonBase.d.ts

@@ -4,7 +4,7 @@
  * 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 from 'react';
+import React, { type JSX } from 'react';
 import { ButtonProps } from './Button';
-declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default ButtonBase;

package/es/components/ChatButton/ChatButton.js

@@ -37,8 +37,11 @@ const ChatButton = /*#__PURE__*/React__default.forwardRef(function ChatButton(_r
     kind = 'ghost';
     size = 'sm';
   } else {
-    // Do not allow size larger than `lg`
-    size = allowedSizes.includes(size) ? size : 'lg';
+    // Check if size is valid and warn if not
+    if (size && !allowedSizes.includes(size)) {
+      console.error(`Invalid size "${size}" provided to ChatButton. Size must be one of: ${allowedSizes.join(', ')}. Defaulting to "lg".`);
+      size = 'lg';
+    }
   }
   return /*#__PURE__*/React__default.createElement(Button, _extends({
     disabled: disabled,
@@ -77,7 +80,6 @@ ChatButton.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:

package/es/components/CodeSnippet/CodeSnippet.js

@@ -113,6 +113,8 @@ function CodeSnippet(_ref) {
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   useResizeObserver({
+    // Cast the ref until the hook supports React 19
+    // https://github.com/ZeeCoder/use-resize-observer/issues/108
     ref: getCodeRef(),
     onResize: () => {
       if (codeContentRef?.current && type === 'multi') {

package/es/components/ComboBox/ComboBox.d.ts

@@ -198,7 +198,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
 }
 type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
 export interface ComboBoxComponent {
-    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement<any> | null;
 }
 declare const _default: ComboBoxComponent;
 export default _default;

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

@@ -56,7 +56,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: RefObject<HTMLButtonElement>;
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
     /**
      * Specify an optional handler for closing modal.
      * Returning `false` here prevents closing modal.

package/es/components/ComposedModal/ComposedModal.js

@@ -15,16 +15,17 @@ import { ModalFooter } from './ModalFooter.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
-import toggleClass from '../../tools/toggleClass.js';
+import { toggleClass } from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape } from '../../internal/keyboard/keys.js';
+import { Escape, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
@@ -121,9 +122,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
   const onMouseDownTarget = useRef(null);
-  const enableDialogElement =
-  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
-  useFeatureFlag('enable-dialog-element');
+  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
@@ -149,6 +150,13 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       if (match(event, Escape)) {
         closeModal(event);
       }
+      if (focusTrapWithoutSentinels && open && match(event, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: event.target,
+          event: event
+        });
+      }
     }
     onKeyDown?.(event);
   }
@@ -283,7 +291,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -292,7 +300,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -302,7 +310,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,
@@ -346,7 +354,6 @@ ComposedModal.propTypes = {
   /**
    * Provide a ref to return focus to once the modal is closed.
    */
-  // @ts-expect-error: Invalid derived type
   launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),

package/es/components/ComposedModal/ModalFooter.js

@@ -149,7 +149,6 @@ ModalFooter.propTypes = {
   /**
    * The `ref` callback for the primary button.
    */
-  // @ts-expect-error: Invalid derived type
   inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -73,7 +73,6 @@ ContainedListItem.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -16,7 +16,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher
      */
-    children?: ReactElement[];
+    children?: ReactElement<any>[];
     /**
      * Specify an optional className to be added to the container node
      */

package/es/components/ContextMenu/useContextMenu.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-type TriggerType = Element | Document | Window | React.RefObject<Element>;
+type TriggerType = Element | Document | Window | React.RefObject<Element | null>;
 export interface ContextMenuProps {
     open: boolean;
     x: number;

package/es/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
@@ -69,8 +69,8 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
-    slug?: React.ReactElement;
-    decorator?: React.ReactElement;
+    slug?: React.ReactElement<any>;
+    decorator?: React.ReactElement<any>;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -184,7 +184,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     radio: boolean | undefined;
 }
 export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
-    children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
+    children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement<any>;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
         cellsById: Record<string, DataTableCell<ColTypes>>;
@@ -198,7 +198,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     locale?: string;
     overflowMenuOnHover?: boolean;
     radio?: boolean;
-    render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
+    render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement<any>;
     rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
     size?: DataTableSize;
     sortRow?: (cellA: any, cellB: any, sortRowOptions: {

package/es/components/DataTable/DataTable.js

@@ -15,7 +15,7 @@ import { getCellId } from './tools/cells.js';
 import denormalize from './tools/denormalize.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { defaultFilterRows } from './tools/filter.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { Table } from './Table.js';
 import TableActionList from './TableActionList.js';
 import TableBatchAction from './TableBatchAction.js';

package/es/components/DataTable/TableActionList.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default TableActionList;

package/es/components/DataTable/TableExpandHeader.d.ts

@@ -99,7 +99,7 @@ declare const TableExpandHeader: {
          * Specify whether this row is expanded or not. This helps coordinate data
          * attributes so that `TableExpandRow` and `TableExpandedRow` work together
          */
-        isExpanded: any;
+        isExpanded: React.Validator;
         /**
          * Hook for when a listener initiates a request to expand the given row
          */

package/es/components/DataTable/TableHead.d.ts

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement<any>;
 export default TableHead;

package/es/components/DataTable/TableToolbarContent.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default TableToolbarContent;

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -4,11 +4,11 @@
  * 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 { ReactElementLike, ReactNodeArray } from 'prop-types';
+import { ReactElementLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
-export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
+export type ReactNodeLike = ReactElementLike | ReadonlyArray<ReactNode> | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
 export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**

package/es/components/Dropdown/Dropdown.d.ts

@@ -149,7 +149,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
 export interface DropdownComponent {
-    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement | null;
+    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement<any> | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, type JSX } from 'react';
 export interface FeatureFlagsProps {
     children?: ReactNode;
     flags?: Record<string, boolean>;

package/es/components/FileUploader/FileUploader.d.ts

@@ -79,5 +79,10 @@ export interface FileUploaderHandle {
      */
     clearFiles: () => void;
 }
-declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<FileUploaderHandle>>;
+declare const FileUploader: {
+    <ItemType>(props: FileUploaderProps): React.ReactElement<any>;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+};
 export default FileUploader;

package/es/components/FileUploader/FileUploader.js

@@ -117,7 +117,9 @@ const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
     key: index,
     className: selectedFileClasses,
-    ref: node => nodes[index] = node // eslint-disable-line
+    ref: node => {
+      nodes[index] = node;
+    } // eslint-disable-line
   }, other), /*#__PURE__*/React__default.createElement(Text, {
     as: "p",
     className: `${prefix}--file-filename`,

package/es/components/FileUploader/FileUploaderButton.d.ts

@@ -69,7 +69,7 @@ export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElemen
      * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
      */
     tabIndex?: number | string;
-    innerRef?: React.RefObject<HTMLLabelElement>;
+    innerRef?: React.RefObject<HTMLLabelElement | null>;
 }
 declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderButton {

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -55,7 +55,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
     /**
      * Ref to pass to the inner button element
      */
-    innerRef?: React.LegacyRef<HTMLButtonElement>;
+    innerRef?: React.Ref<HTMLButtonElement>;
     /**
      * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
      */

package/es/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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, { FunctionComponent } from 'react';
-import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
-import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+import type { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { type FilterableMultiSelectProps } from '../MultiSelect';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 from 'react';
+import { type MultiSelectProps } from '../MultiSelect';
 import { UseSelectProps } from 'downshift';
-import { MultiSelectProps } from '../MultiSelect/MultiSelect';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -9,11 +9,10 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
-import '../MultiSelect/index.js';
+import { FilterableMultiSelect } from '../MultiSelect/FilterableMultiSelect.js';
+import { MultiSelect } from '../MultiSelect/MultiSelect.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import FilterableMultiSelect from '../MultiSelect/FilterableMultiSelect.js';
-import MultiSelect from '../MultiSelect/MultiSelect.js';
 
 const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMultiSelect(_ref, ref) {
   let {
@@ -36,7 +35,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMu
   React__default.createElement(FilterableMultiSelect, _extends({
     ref: ref,
     className: classNames
-  }, other)) : /*#__PURE__*/React__default.createElement(MultiSelect, _extends({
+  }, other)) :
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default.createElement(MultiSelect, _extends({
     ref: ref,
     className: classNames
   }, other)));

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -0,0 +1,40 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidNumberInputSkeleton = _ref => {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-input`
+  })));
+};
+FluidNumberInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidNumberInputSkeleton as default };

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -0,0 +1,123 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import '../NumberInput/NumberInput.Skeleton.js';
+import { NumberInput } from '../NumberInput/NumberInput.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidNumberInput = /*#__PURE__*/React__default.forwardRef(function FluidNumberInput(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--number-input--fluid`, className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidNumberInput.propTypes = {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes.bool,
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription: PropTypes.string,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node,
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+  /**
+   * Provide an optional handler that is called when the internal state of
+   * NumberInput changes. This handler is called with event and state info.
+   * `(event, { value, direction }) => void`
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func,
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
+};
+
+export { FluidNumberInput as default };

package/es/components/FluidTextInput/FluidTextInput.js

@@ -9,12 +9,12 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
-import '../TextInput/index.js';
+import TextInput from '../TextInput/TextInput.js';
+import '../TextInput/TextInput.Skeleton.js';
 import '../TextInput/ControlledPasswordInput.js';
 import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import TextInput from '../TextInput/TextInput.js';
 
 const FluidTextInput = /*#__PURE__*/React__default.forwardRef(function FluidTextInput(_ref, ref) {
   let {