@carbon/react 1.76.0-rc.0 → 1.77.0-rc.0

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

@@ -27,7 +27,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Optionally specify an href for your Button to become an `<a>` element
      */
-    href?: string;
+    href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
     /**
      * If specifying the `renderIcon` prop, provide a description for that icon that can
      * be read by screen readers
@@ -45,6 +45,10 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify the kind of Button you want to create
      */
     kind?: ButtonBaseProps['hasIconOnly'] extends true ? IconButtonKind : ButtonKind;
+    /**
+     * Optionally specify a `rel` when using an `<a>` element.
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Optional prop to allow overriding the icon rendering.
      * Can be a React component class
@@ -54,6 +58,10 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify the size of the button, from the following list of sizes:
      */
     size?: ButtonSize;
+    /**
+     * Optionally specify a `target` when using an `<a>` element.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
      * Specify the alignment of the tooltip to the icon-only button.
      * Can be one of: start, center, or end.

package/es/components/Button/Button.js

@@ -185,6 +185,10 @@ Button.propTypes = {
    * leaves the button element
    */
   onMouseLeave: PropTypes.func,
+  /**
+   * Optionally specify a `rel` when using an `<a>` element.
+   */
+  rel: PropTypes.string,
   /**
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
@@ -202,6 +206,10 @@ Button.propTypes = {
    * Optional prop to specify the tabIndex of the Button
    */
   tabIndex: PropTypes.number,
+  /**
+   * Optionally specify a `target` when using an `<a>` element.
+   */
+  target: PropTypes.string,
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -7,8 +7,8 @@
 import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
 export type DeprecatedCodeSnippetAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCodeSnippetAlignmnet = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignmnet;
+export type NewCodeSnippetAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignment;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip

package/es/components/ComboBox/ComboBox.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.
@@ -184,7 +184,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     titleText?: ReactNode;
     /**
-     * **Experimental**: will enable autcomplete and typeahead for the input field
+     * **Experimental**: will enable autocomplete and typeahead for the input field
      */
     typeahead?: boolean;
     /**

package/es/components/ComboBox/ComboBox.js

@@ -22,8 +22,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { useFloating, flip, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -68,21 +67,24 @@ const autocompleteCustomFilter = _ref => {
 const getInputValue = _ref2 => {
   let {
     initialSelectedItem,
-    inputValue,
     itemToString,
     selectedItem,
     prevSelectedItem
   } = _ref2;
-  if (selectedItem) {
+  // If there's a current selection (even if it's an object or string), use it.
+  if (selectedItem !== null && typeof selectedItem !== 'undefined') {
     return itemToString(selectedItem);
   }
-  if (initialSelectedItem) {
+
+  // On the very first render (when no previous value exists), use
+  // `initialSelectedItem`.
+  if (typeof prevSelectedItem === 'undefined' && initialSelectedItem !== null && typeof initialSelectedItem !== 'undefined') {
     return itemToString(initialSelectedItem);
   }
-  if (!selectedItem && prevSelectedItem) {
-    return '';
-  }
-  return inputValue || '';
+
+  // Otherwise (i.e., after the user has cleared the selection), return an empty
+  // string.
+  return '';
 };
 const findHighlightedIndex = (_ref3, inputValue) => {
   let {
@@ -179,7 +181,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = useState(getInputValue({
     initialSelectedItem,
-    inputValue: '',
     itemToString,
     selectedItem: selectedItemProp
   }));
@@ -222,7 +223,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     if (prevSelectedItemProp.current !== selectedItemProp) {
       const currentInputValue = getInputValue({
         initialSelectedItem,
-        inputValue,
         itemToString,
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
@@ -301,6 +301,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           return changes;
         }
       case InputKeyDownEnter:
+        if (highlightedIndex === -1 && !allowCustomValue && state.selectedItem) {
+          return {
+            ...changes,
+            selectedItem: null,
+            inputValue: state.inputValue
+          };
+        }
         if (allowCustomValue) {
           setInputValue(inputValue);
           setHighlightedIndex(changes.selectedItem);
@@ -321,6 +328,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         }
       case FunctionToggleMenu:
       case ToggleButtonClick:
+        if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {
+          return {
+            ...changes,
+            inputValue: '' // Clear the input
+          };
+        }
         if (changes.isOpen && !changes.selectedItem) {
           return {
             ...changes
@@ -462,7 +475,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-      if (type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) {
+      if ((type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) && !isEqual(selectedItemProp, newSelectedItem) // Only fire if there's an actual change
+      ) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -512,6 +526,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus');
+    if (!inputRef.current?.value && evt.type === 'blur') {
+      selectItem(null);
+    }
   };
   const readOnlyEventHandlers = readOnly ? {
     onKeyDown: evt => {
@@ -634,6 +651,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           toggleMenu();
         }
       }
+      if (!inputValue && highlightedIndex == -1 && event.key == 'Enter') {
+        if (!isOpen) toggleMenu();
+        selectItem(null);
+        event.preventDownshiftDefault = true;
+        if (event.currentTarget.ariaExpanded === 'false') openMenu();
+      }
       if (typeahead && event.key === 'Tab') {
         //  event.preventDefault();
         const matchingItem = items.find(item => itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
@@ -860,7 +883,7 @@ ComboBox.propTypes = {
    */
   translateWithId: PropTypes.func,
   /**
-   * **Experimental**: will enable autcomplete and typeahead for the input field
+   * **Experimental**: will enable autocomplete and typeahead for the input field
    */
   typeahead: PropTypes.bool,
   /**

package/es/components/ComboButton/index.js

@@ -18,8 +18,7 @@ import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { flip, hide, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';

package/es/components/ComposedModal/ComposedModal.js

@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
-import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
@@ -23,6 +22,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';
 

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

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import { ContentSwitcherProps } from './ContentSwitcher';
 declare const ContentSwitcher: import("react").FunctionComponent<ContentSwitcherProps>;
 export default ContentSwitcher;

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

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

package/es/components/Copy/Copy.js

@@ -8,13 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback, useEffect } from 'react';
-import { debounce } from 'es-toolkit/compat';
 import cx from 'classnames';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const propMappingFunction = deprecatedValue => {
   const mapping = {

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

@@ -6,7 +6,6 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -100,7 +99,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         ['aria-label']: string;
         isExpanded: boolean;
         onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -111,7 +109,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         ['aria-label']: string;
         disabled: boolean | undefined;
         isExpanded?: boolean;
@@ -132,7 +129,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         'aria-label': string;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -349,13 +345,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getHeaderProps: ({ header, onClick, isSortable, ...rest }: {
-        [key: string]: unknown;
         header: DataTableHeader;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, sortState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
-        }) => void) | undefined;
-        isSortable?: boolean | undefined;
+        }) => void;
+        isSortable?: boolean;
+        [key: string]: unknown;
     }) => {
         key: string;
         sortDirection: DataTableSortState;
@@ -375,12 +371,11 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getExpandHeaderProps: ({ onClick, onExpand, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, expandState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded: boolean;
-        }) => void) | undefined;
-        onExpand?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        }) => void;
+        onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     }) => {
-        ariaLabel: any;
         'aria-label': any;
         'aria-controls': string;
         isExpanded: boolean;
@@ -411,14 +406,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getRowProps: ({ row, onClick, ...rest }: {
-        [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
     }) => {
         key: string;
         onExpand: any;
         isExpanded: boolean | undefined;
-        ariaLabel: any;
         'aria-label': any;
         'aria-controls': string;
         isSelected: boolean | undefined;
@@ -432,8 +426,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getExpandedRowProps: ({ row, ...rest }: {
-        [key: string]: unknown;
         row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
     }) => {
         id: string;
     };
@@ -449,19 +443,17 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
         onSelect: any;
         id: string;
         name: string;
-        ariaLabel: any;
         'aria-label': any;
         disabled: boolean | undefined;
         radio: boolean | undefined;
     } | {
-        ariaLabel: any;
         'aria-label': any;
         checked: boolean;
         id: string;
@@ -470,8 +462,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onSelect: any;
     };
     getToolbarProps: (props?: {}) => {
+        size: "sm" | undefined;
         [key: string]: unknown;
-        size: 'sm' | undefined;
     };
     getBatchActionProps: (props?: {}) => {
         shouldShowBatchActions: boolean;

package/es/components/DataTable/DataTable.js

@@ -150,8 +150,6 @@ class DataTable extends React__default.Component {
       const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
       return {
         ...rest,
-        ariaLabel: t(translationKey),
-        // TODO: remove in v12
         'aria-label': t(translationKey),
         // Provide a string of all the expanded row id's, separated by a space.
         'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
@@ -208,8 +206,6 @@ class DataTable extends React__default.Component {
         // handler
         onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
-        ariaLabel: t(translationKey),
-        // TODO remove in v12
         'aria-label': t(translationKey),
         'aria-controls': `expanded-row-${row.id}`,
         isSelected: row.isSelected,
@@ -262,8 +258,6 @@ class DataTable extends React__default.Component {
           onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
           name: `select-row-${_this.instanceId}`,
-          ariaLabel: t(translationKey),
-          // TODO remove in v12
           'aria-label': t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio
@@ -279,13 +273,11 @@ class DataTable extends React__default.Component {
       const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
       return {
         ...rest,
-        ariaLabel: t(translationKey),
-        // TODO remove in v12
         'aria-label': t(translationKey),
         checked,
         id: `${_this.getTablePrefix()}__select-all`,
         indeterminate,
-        name: 'select-all',
+        name: `select-all-${_this.instanceId}`,
         onSelect: composeEventHandlers([_this.handleSelectAll, onClick])
       };
     });

package/es/components/DataTable/Table.js

@@ -9,11 +9,11 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useContext, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { debounce } from 'es-toolkit/compat';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const isElementWrappingContent = (element, context) => {
   if (element.children.length > 0) {

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">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
 export default TableActionList;

package/es/components/DataTable/TableBody.js

@@ -16,7 +16,7 @@ const TableBody = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/React__default.createElement("tbody", _extends({
-    "aria-live": 'polite' ,
+    "aria-live": rest['aria-live'] ?? 'polite',
     className: className
   }, rest), children);
 };

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

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 interface TableContextType {
     titleId?: string;
     descriptionId?: string;

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">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement;
 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">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
 export default TableToolbarContent;

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -81,7 +81,7 @@ var carbonFlatpickrFixEventsPlugin = config => fp => {
       const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
       // The date should only be set if both dates are valid dates, and they don't match.
-      // When they don't match, this indiciates that the date selected in the calendar is stale,
+      // When they don't match, this indicates that the date selected in the calendar is stale,
       // and the current value in the input should be set for the calendar to update.
       if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
         // Update the calendar with the value of the `to` date input
@@ -89,7 +89,7 @@ var carbonFlatpickrFixEventsPlugin = config => fp => {
       }
     }
     const isValidDate = date => date?.toString() !== 'Invalid Date';
-    // save end date in calendar inmediately after it's been written down
+    // save end date in calendar immediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {
         fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);

package/es/components/DatePickerInput/DatePickerInput.js

@@ -84,7 +84,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
     [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
   });
-  const datePickerInputHelperId = !helperText ? undefined : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+  const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
   const inputProps = {
     ...rest,
     ...datePickerInputProps,

package/es/components/Dropdown/Dropdown.js

@@ -18,8 +18,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
-import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
-import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFloating, size, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 

package/es/components/FluidForm/FormContext.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export interface FormContextProps {
     isFluid?: boolean;
 }

package/es/components/FluidTextInput/FluidTextInput.d.ts

@@ -34,6 +34,14 @@ export interface FluidTextInputProps {
      * Specify whether the control is a password input
      */
     isPassword?: boolean;
+    /**
+     * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control

package/es/components/FluidTextInput/FluidTextInput.js

@@ -67,6 +67,14 @@ FluidTextInput.propTypes = {
    * Specify whether the control is a password input
    */
   isPassword: PropTypes.bool,
+  /**
+   * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

package/es/components/Grid/CSSGrid.js

@@ -63,7 +63,7 @@ function CSSGrid(_ref) {
 }
 CSSGrid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
   /**

package/es/components/Grid/Grid.js

@@ -20,7 +20,7 @@ function Grid(props) {
 }
 Grid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
   /**

package/es/components/Grid/GridTypes.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import { PolymorphicProps } from '../../types/common';
 export interface GridBaseProps {
     /**

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

@@ -11,6 +11,6 @@ type SectionBaseProps = {
     level?: HeadingLevel;
 };
 export type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
-export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType>, "ref"> & React.RefAttributes<unknown>>;
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};