@carbon/react 1.62.1 → 1.63.0

package/es/components/Checkbox/Checkbox.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
@@ -39,7 +38,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId();
   const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -11,9 +11,8 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 
-const getInstanceId = setupGetInstanceId();
 const CheckboxGroup = _ref => {
   let {
     children,
@@ -33,7 +32,7 @@ const CheckboxGroup = _ref => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId();
   const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,

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

@@ -7,13 +7,22 @@
 import { UseComboboxProps } from 'downshift';
 import { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
+import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
     selectedItem: ItemType | null | undefined;
     inputValue?: string | null;
 }
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
-export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * Specify whether or not the ComboBox should allow a value that is
      * not in the list to be entered in the input
@@ -150,11 +159,6 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify whether the control is currently in warning state
      */

package/es/components/ComboBox/ComboBox.js

@@ -13,7 +13,7 @@ import React__default, { forwardRef, useEffect, useContext, useRef, useState, us
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -82,7 +82,15 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   }
   return -1;
 };
-const getInstanceId = setupGetInstanceId();
+
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+
 const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
@@ -144,7 +152,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     isFluid
   } = useContext(FormContext);
   const textInput = useRef(null);
-  const comboBoxInstanceId = getInstanceId();
+  const comboBoxInstanceId = useId();
   const [inputValue, setInputValue] = useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
@@ -383,10 +391,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({

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

@@ -9,7 +9,15 @@ import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
 import { MenuAlignment } from '../MenuButton';
-interface ComboButtonProps {
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    'carbon.combo-button.additional-actions': string;
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
+interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
      */
@@ -42,11 +50,6 @@ interface ComboButtonProps {
      * Specify how the trigger tooltip should be aligned.
      */
     tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
-    /**
-     * Optional method that takes in a message `id` and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const ComboButton: React.ForwardRefExoticComponent<ComboButtonProps & React.RefAttributes<HTMLDivElement>>;
 export { ComboButton, type ComboButtonProps };

package/es/components/ComboButton/index.js

@@ -25,6 +25,11 @@ var _ChevronDown;
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }

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

@@ -28,6 +28,21 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
+import { TranslateWithId } from '../../types/common';
+declare const translationKeys: {
+    readonly expandRow: "carbon.table.row.expand";
+    readonly collapseRow: "carbon.table.row.collapse";
+    readonly expandAll: "carbon.table.all.expand";
+    readonly collapseAll: "carbon.table.all.collapse";
+    readonly selectAll: "carbon.table.all.select";
+    readonly unselectAll: "carbon.table.all.unselect";
+    readonly selectRow: "carbon.table.row.select";
+    readonly unselectRow: "carbon.table.row.unselect";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableCell<T> {
     id: string;
@@ -168,7 +183,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     expandAll: () => void;
     radio: boolean | undefined;
 }
-export interface DataTableProps<RowType, ColTypes extends any[]> {
+export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
     children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
@@ -192,7 +207,6 @@ export interface DataTableProps<RowType, ColTypes extends any[]> {
         locale: string;
     }) => number;
     stickyHeader?: boolean;
-    translateWithId?: (id: string) => string;
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
 }
@@ -295,7 +309,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
     };
-    static translationKeys: string[];
+    static translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
     static Table: typeof Table;
     static TableActionList: typeof TableActionList;
     static TableBatchAction: typeof TableBatchAction;
@@ -360,8 +374,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         }) => void) | undefined;
         onExpand?: ((e: MouseEvent) => void) | undefined;
     }) => {
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         'aria-controls': string;
         isExpanded: boolean;
         onExpand: any;
@@ -398,8 +412,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         key: string;
         onExpand: any;
         isExpanded: boolean | undefined;
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         'aria-controls': string;
         isSelected: boolean | undefined;
         disabled: boolean | undefined;
@@ -436,13 +450,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onSelect: any;
         id: string;
         name: string;
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         disabled: boolean | undefined;
         radio: true | null;
     } | {
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         checked: boolean;
         id: string;
         indeterminate: boolean;

package/es/components/DataTable/DataTable.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 import getDerivedStateFromProps from './state/getDerivedStateFromProps.js';
 import { getNextSortState } from './state/sorting.js';
 import { getCellId } from './tools/cells.js';
@@ -49,6 +49,11 @@ const translationKeys = {
   selectRow: 'carbon.table.row.select',
   unselectRow: 'carbon.table.row.unselect'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationKeys.expandAll]: 'Expand all rows',
   [translationKeys.collapseAll]: 'Collapse all rows',

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type MouseEventHandler } from 'react';
-import type { InternationalProps } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 declare const TableBatchActionsTranslationKeys: readonly ["carbon.table.batch.cancel", "carbon.table.batch.items.selected", "carbon.table.batch.item.selected", "carbon.table.batch.selectAll"];
 export type TableBatchActionsTranslationKey = (typeof TableBatchActionsTranslationKeys)[number];
 export interface TableBatchActionsTranslationArgs {
     totalSelected?: number;
     totalCount?: number;
 }
-export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, InternationalProps<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
     /**
      * Provide elements to be rendered inside of the component.
      */

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

@@ -6,7 +6,7 @@
  */
 import React, { type MouseEventHandler, ReactNode } from 'react';
 import { sortStates } from './state/sorting';
-import { ReactAttr } from '../../types/common';
+import { TranslateWithId, ReactAttr } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
@@ -15,7 +15,12 @@ export interface TableHeaderTranslationArgs {
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
 }
-interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
+interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
+    header: any;
+    sortDirection: any;
+    isSortHeader: any;
+    sortStates: any;
+}> {
     /**
      * Pass in children that will be embedded in the table header label
      */
@@ -61,17 +66,6 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * NONE, or ASC.
      */
     sortDirection?: string;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationKeys` field for
-     * this component.
-     */
-    translateWithId?: (key: TableHeaderTranslationKey, { header, sortDirection, isSortHeader, sortStates }: {
-        header: any;
-        sortDirection: any;
-        isSortHeader: any;
-        sortStates: any;
-    }) => string;
 }
 declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableHeader;

package/es/components/DataTable/TableSelectRow.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useId } from 'react';
 import cx from 'classnames';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import RadioButton from '../RadioButton/RadioButton.js';
@@ -28,9 +28,10 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix();
+  const uniqueNameId = useId();
   const selectionInputProps = {
     id,
-    name,
+    name: name ? name : uniqueNameId,
     onClick: onSelect,
     onChange,
     checked,

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

@@ -7,11 +7,14 @@
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import { SearchProps } from '../Search';
-import { InternationalProps } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
+/**
+ * Message ids that will be passed to translateWithId().
+ */
 export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
 type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
-export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, InternationalProps<TableToolbarTranslationKey> {
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TableToolbarTranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */

package/es/components/DataTable/TableToolbarSearch.js

@@ -8,14 +8,17 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
-import setupGetInstanceId from './tools/instanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const getInstanceId = setupGetInstanceId();
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
@@ -51,7 +54,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useMemo(getInstanceId, []);
+  const uniqueId = useId();
   const [focusTarget, setFocusTarget] = useState(null);
   const prefix = usePrefix();
   useEffect(() => {

package/es/components/DatePickerInput/DatePickerInput.js

@@ -12,11 +12,10 @@ import React__default, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
@@ -42,7 +41,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   const {
     isFluid
   } = useContext(FormContext);
-  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputInstanceId = useId();
   const datePickerInputProps = {
     id,
     onChange: event => {

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

@@ -7,12 +7,12 @@
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
-import { ReactAttr } from '../../types/common';
+import { TranslateWithId, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -123,10 +123,6 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * visiting this control
      */
     titleText?: ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
     /**
      * The dropdown type, `default` or `inline`
      */

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useContext, useRef, useState, useMemo } from 'react';
+import React__default, { useEffect, useContext, useState, useMemo } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,11 +17,10 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
-const getInstanceId = setupGetInstanceId();
 const {
   ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp,
@@ -125,9 +124,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       return isObject && 'disabled' in item && item.disabled === true;
     }
   };
-  const {
-    current: dropdownInstanceId
-  } = useRef(getInstanceId());
+  const dropdownInstanceId = useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,

package/es/components/FluidSearch/FluidSearch.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';
+
+function FluidSearchSkeleton(_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`
+  })));
+}
+FluidSearchSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidSearchSkeleton as default };

package/es/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,96 @@
+/**
+ * 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 Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidSearch = /*#__PURE__*/React__default.forwardRef(function FluidSearch(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--search--fluid`, className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Search, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes.string,
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes.node.isRequired,
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes.string,
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+var FluidSearch$1 = FluidSearch;
+
+export { FluidSearch$1 as default };

package/es/components/FormGroup/FormGroup.d.ts

@@ -16,6 +16,10 @@ export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
      * Provide a custom className to be applied to the containing <fieldset> node
      */
     className?: string;
+    /**
+     * Specify whether the FormGroup should be disabled
+     */
+    disabled?: boolean;
     /**
      * Specify whether the <FormGroup> is invalid
      */
@@ -39,7 +43,7 @@ export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
     messageText?: string;
 }
 declare const FormGroup: {
-    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ disabled, legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide the children form elements to be rendered inside of the <fieldset>
@@ -49,6 +53,10 @@ declare const FormGroup: {
          * Provide a custom className to be applied to the containing <fieldset> node
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the FormGroup should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
         /**
          * Specify whether the <FormGroup> is invalid
          */