@carbon/react 1.89.0 → 1.90.0

package/es/components/DataTable/TableSlugRow.js

@@ -30,6 +30,7 @@ const TableSlugRow = ({
   // Slug is always size `mini`
   let normalizedSlug;
   if (slug) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/DataTable/TableToolbarMenu.js

@@ -14,6 +14,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import OverflowMenu from '../OverflowMenu/index.js';
 
 const defaultIconDescription = 'Settings';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20071
+
 const TableToolbarMenu = ({
   className,
   renderIcon = Settings,

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

@@ -1,15 +1,58 @@
-export { sortStates };
-export const initialSortState: import("./sortStates").DataTableSortState;
-export function getNextSortDirection(prevHeader: string, header: string, prevState: string): string;
-export function getNextSortState(props: any, state: any, { key }: {
-    key: any;
-}): any;
-export function getSortedState(props: {
+/**
+ * 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 { type DataTableSortState } from './sortStates';
+import type { DataTableCell } from '../DataTable';
+export interface SortRowParams {
+    key: string;
+    sortDirection: DataTableSortState;
+    sortStates: Record<DataTableSortState, DataTableSortState>;
     locale: string;
-    sortRows: Function;
-}, state: {
-    rowIds: Array<string>;
-    cellsById: object;
-    initialRowOrder: Array<string>;
-}, key: string, sortDirection: string): object;
-import { sortStates } from './sortStates';
+    compare: (a: string | number, b: string | number, locale?: string) => number;
+}
+export type SortRowFn = (cellA: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+cellB: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+options: SortRowParams) => number;
+interface Props {
+    locale?: string;
+    sortRow?: SortRowFn;
+}
+interface State<ColTypes extends any[]> {
+    rowIds: string[];
+    cellsById: Record<string, DataTableCell<ColTypes[number]>>;
+    initialRowOrder: string[];
+    sortHeaderKey: string | null;
+    sortDirection: DataTableSortState;
+}
+export declare const initialSortState: DataTableSortState;
+/**
+ * Gets the next sort direction for a header.
+ *
+ * @param prevHeader - Key of the previously sorted header.
+ * @param currentHeader - Key of the currently selected header.
+ * @param prevState - Previous sort direction.
+ */
+export declare const getNextSortDirection: (prevHeader: string, currentHeader: string, prevState: DataTableSortState) => DataTableSortState;
+/**
+ * Gets the next sort state.
+ *
+ * @param props - Component props.
+ * @param state - Current table state.
+ * @param key - Header key to sort by.
+ */
+export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+    key: string;
+}) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
+/**
+ * Gets a sort state update.
+ *
+ * @param props - Component props.
+ * @param state - Current state of the table.
+ * @param key - Header key to sort by.
+ * @param sortDirection - Sort direction to apply.
+ */
+export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export {};

package/es/components/DataTable/state/sorting.js

@@ -8,37 +8,41 @@
 import { sortStates } from './sortStates.js';
 import { sortRows } from '../tools/sorting.js';
 
-// Our initialSortState should be `NONE`, unless a consumer has specified a
-// different initialSortState
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
 const initialSortState = sortStates.NONE;
 
 /**
- * Utility used to get the next sort state given the following pieces of
- * information:
+ * Gets the next sort direction for a header.
  *
- * @param {string} prevHeader the value of the previous header
- * @param {string} header the value of the currently selected header
- * @param {string} prevState the previous sort state of the table
- * @returns {string}
+ * @param prevHeader - Key of the previously sorted header.
+ * @param currentHeader - Key of the currently selected header.
+ * @param prevState - Previous sort direction.
  */
-const getNextSortDirection = (prevHeader, header, prevState) => {
-  // If the previous header is equivalent to the current header, we know that we
-  // have to derive the next sort state from the previous sort state
-  if (prevHeader === header) {
-    // When transitioning, we know that the sequence of states is as follows:
-    // NONE -> ASC -> DESC -> NONE
-    if (prevState === 'NONE') {
-      return sortStates.ASC;
-    }
-    if (prevState === 'ASC') {
-      return sortStates.DESC;
+const getNextSortDirection = (prevHeader, currentHeader, prevState) => {
+  // Cycle for sorting the same header: NONE -> ASC -> DESC -> NONE.
+  if (prevHeader === currentHeader) {
+    switch (prevState) {
+      case sortStates.NONE:
+        return sortStates.ASC;
+      case sortStates.ASC:
+        return sortStates.DESC;
+      case sortStates.DESC:
+        return sortStates.NONE;
     }
-    return sortStates.NONE;
   }
-  // Otherwise, we have selected a new header and need to start off by sorting
-  // in descending order by default
+
+  // Sorting a new header starts at ascending order.
   return sortStates.ASC;
 };
+
+/**
+ * Gets the next sort state.
+ *
+ * @param props - Component props.
+ * @param state - Current table state.
+ * @param key - Header key to sort by.
+ */
 const getNextSortState = (props, state, {
   key
 }) => {
@@ -46,38 +50,26 @@ const getNextSortState = (props, state, {
     sortDirection,
     sortHeaderKey
   } = state;
-  const nextSortDirection = getNextSortDirection(key, sortHeaderKey, sortDirection);
+  const nextSortDirection = getNextSortDirection(key, sortHeaderKey ?? '', sortDirection);
   return getSortedState(props, state, key, nextSortDirection);
 };
 
 /**
- * Derive the set of sorted state fields from props and state for the given
- * header key and sortDirection
+ * Gets a sort state update.
  *
- * @param {object} props
- * @param {string} props.locale The current locale
- * @param {Function} props.sortRows Method to handle sorting a collection of
- * rows
- * @param {object} state
- * @param {Array<string>} state.rowIds Array of row ids
- * @param {object} state.cellsById Lookup object for cells by id
- * @param {Array<string>} state.initialRowOrder Initial row order for the
- * current set of rows
- * @param {string} key The key for the given header we are serving the
- * sorted state for
- * @param {string} sortDirection The sortState that we want to order by
- * @returns {object}
+ * @param props - Component props.
+ * @param state - Current state of the table.
+ * @param key - Header key to sort by.
+ * @param sortDirection - Sort direction to apply.
  */
-const getSortedState = (props, state, key, sortDirection) => {
-  const {
-    rowIds,
-    cellsById,
-    initialRowOrder
-  } = state;
-  const {
-    locale,
-    sortRow
-  } = props;
+const getSortedState = ({
+  locale,
+  sortRow
+}, {
+  rowIds,
+  cellsById,
+  initialRowOrder
+}, key, sortDirection) => {
   const nextRowIds = sortDirection !== sortStates.NONE ? sortRows({
     rowIds,
     cellsById,
@@ -88,9 +80,9 @@ const getSortedState = (props, state, key, sortDirection) => {
   }) : initialRowOrder;
   return {
     sortHeaderKey: key,
-    sortDirection: sortDirection,
+    sortDirection,
     rowIds: nextRowIds
   };
 };
 
-export { getNextSortDirection, getNextSortState, getSortedState, initialSortState, sortStates };
+export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };

package/es/components/DataTable/tools/sorting.js

@@ -13,6 +13,7 @@ import { sortStates } from '../state/sortStates.js';
  * type, the default sort algorithm will be used for those types. Otherwise, the
  * values will be converted to strings for comparison.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 const compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';
@@ -42,6 +43,10 @@ const compareStrings = (a, b, locale = 'en') => {
     numeric: isNumeric
   });
 };
+
+// TODO: Should `SortRowParams` in
+// packages/react/src/components/DataTable/state/sorting.ts be used here?
+
 /**
  * Sorts table rows based on the provided column key and direction.
  */

package/es/components/DatePicker/DatePicker.js

@@ -69,7 +69,6 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
       elem.parentNode.removeChild(elem);
     });
     fp.monthElements.splice(0, fp.monthElements.length, ...fp.monthElements.map(() => {
-      // eslint-disable-next-line no-underscore-dangle
       const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
       monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
       fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
@@ -170,6 +169,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     isFluid
   } = useContext(FormContext);
   const [hasInput, setHasInput] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const startInputField = useCallback(node => {
     if (node !== null) {
       startInputField.current = node;
@@ -189,7 +189,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     if (onClose) {
       onClose(selectedDates, dateStr, instance);
     }
-  }, [onClose]);
+  },
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [onClose]);
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   const onCalendarClose = (selectedDates, dateStr, instance, e) => {
     if (e && e.type === 'clickOutside') {
       return;
@@ -226,7 +229,11 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   const wrapperClasses = cx(`${prefix}--form-item`, {
     [String(className)]: className
   });
-  const childrenWithProps = React.Children.toArray(children).map((child, index) => {
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  const childrenWithProps = React.Children.toArray(children).map(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  (child, index) => {
     if (index === 0 && child.type === /*#__PURE__*/React.createElement(DatePickerInput, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
@@ -332,6 +339,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     const {
       current: end
     } = endInputField;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
@@ -507,6 +515,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
   // need to be imperatively called on the calendar
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   useImperativeHandle(ref, () => ({
     get calendar() {
       return calendarRef.current;
@@ -563,6 +572,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         endInputField.current.value = '';
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [value]);
   useEffect(() => {
     const handleMouseDown = event => {
@@ -571,6 +581,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         closeCalendar();
       }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     const closeCalendar = event => {
       calendarRef.current?.close();
       // Remove focus from endDate calendar input

package/es/components/DatePickerInput/DatePickerInput.js

@@ -20,6 +20,8 @@ import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
 let didWarnAboutDatePickerInputValue = false;
 const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
   const {
@@ -93,6 +95,8 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
   });
   const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const inputProps = {
     ...rest,
     ...datePickerInputProps,
@@ -198,12 +202,14 @@ DatePickerInput.propTypes = {
   /**
    * Provide a regular expression that the input value must match
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   pattern: (props, propName, componentName) => {
     if (props[propName] === undefined) {
       return;
     }
     try {
       new RegExp(props[propName]);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     } catch (e) {
       return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
     }

package/es/components/Dialog/Dialog.js

@@ -93,6 +93,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(({
         ref.current.close();
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [modal, open]);
   useEffect(() => {
     if (!open && focusAfterCloseRef) {
@@ -123,6 +124,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(({
         ref.current.setAttribute('aria-labelledby', title.id);
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open, ariaLabel, ariaLabelledBy, prefix]);
   return /*#__PURE__*/React.createElement(DialogContext.Provider, {
     value: contextValue
@@ -227,6 +229,7 @@ const DialogControls = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix();
   return (
     /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
     // @ts-ignore
     React.createElement("div", _extends({
       className: `${prefix}--dialog__header-controls`,
@@ -255,6 +258,7 @@ const DialogCloseButton = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix();
   return (
     /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
     // @ts-ignore
     React.createElement(IconButton, _extends({
       kind: "ghost",
@@ -490,7 +494,9 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
     buttonText,
     onClick: onButtonClick
   }, i) => /*#__PURE__*/React.createElement(Button, {
-    key: `${buttonText}-${i}`,
+    key: `${buttonText}-${i}`
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    ,
     autoFocus: danger,
     kind: "secondary",
     ref: i === 0 && danger ? setSecondaryButtonRef : undefined,
@@ -498,7 +504,9 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
   }, buttonText)) : secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
     ref: danger ? setSecondaryButtonRef : undefined,
     disabled: loadingActive,
-    kind: "secondary",
+    kind: "secondary"
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    ,
     autoFocus: danger,
     onClick: onSecondaryButtonClick
   }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {

package/es/components/Dropdown/Dropdown.js

@@ -149,6 +149,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
         }
       });
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [floatingStyles, autoAlign, refs.floating]);
   const prefix = usePrefix();
   const {
@@ -163,6 +164,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
       });
     }
   }, [onChange]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const isItemDisabled = useCallback((item, _index) => {
     const isObject = item !== null && typeof item === 'object';
     return isObject && 'disabled' in item && item.disabled === true;
@@ -171,7 +174,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     const {
       highlightedIndex
     } = changes;
-    if (highlightedIndex !== undefined && highlightedIndex > -1 && typeof window !== undefined) {
+    if (highlightedIndex !== undefined && highlightedIndex > -1 &&
+    // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
+    typeof window !== undefined) {
       const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
       const highlightedItem = itemArray[highlightedIndex];
       if (highlightedItem) {
@@ -192,7 +197,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     isItemDisabled,
     onHighlightedIndexChange,
     ...downshiftProps
-  }), [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
+  }),
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
   const dropdownInstanceId = useId();
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
@@ -281,7 +288,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     if (toggleButtonProps.onKeyDown && (evt.key !== 'ArrowUp' || isOpen && evt.key === 'ArrowUp')) {
       toggleButtonProps.onKeyDown(evt);
     }
-  }, [isTyping, currTimer, toggleButtonProps]);
+  },
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [isTyping, currTimer, toggleButtonProps]);
   const readOnlyEventHandlers = useMemo(() => {
     if (readOnly) {
       return {
@@ -304,6 +313,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
         onKeyDown: onKeyDownHandler
       };
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [readOnly, onKeyDownHandler]);
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles || autoAlign ? refs.setFloating : null
@@ -354,7 +364,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     ref: mergedRef
   }), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React.createElement(ListBox.MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) :
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  label), /*#__PURE__*/React.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {

package/es/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -9,6 +9,7 @@ import { createContext } from 'react';
 
 const ErrorBoundaryContext = /*#__PURE__*/createContext({
   log(error, info) {
+    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
     console.log(info.componentStack);
   }
 });

package/es/components/FileUploader/FileUploader.js

@@ -20,6 +20,7 @@ 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(({
   accept,
   buttonKind,
@@ -43,6 +44,8 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   const enhancedFileUploaderEnabled = useFeatureFlag('enable-enhanced-file-uploader');
   const [fileItems, setFileItems] = useState([]);
   const [legacyFileNames, setLegacyFileNames] = useState([]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [fileObjects, setFileObjects] = useState(new Map());
   const nodes = [];
   const createFileItem = file => ({
@@ -95,7 +98,9 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         onChange(evt);
       }
     }
-  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
+  },
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
   const handleClick = useCallback((evt, {
     index,
     filenameStatus
@@ -150,7 +155,9 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
       uploaderButton.current?.focus?.();
     }
-  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
+  },
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
   useImperativeHandle(ref, () => ({
     clearFiles() {
       if (enhancedFileUploaderEnabled) {

package/es/components/FileUploader/FileUploaderButton.js

@@ -30,13 +30,13 @@ function FileUploaderButton({
   onChange = noopFn,
   name,
   size = 'md',
-  // eslint-disable-next-line react/prop-types
   innerRef,
   ...other
 }) {
   const prefix = usePrefix();
   const [labelText, setLabelText] = useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const {
     current: inputId
   } = useRef(id || useId());

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -28,12 +28,12 @@ function FileUploaderDropContainer({
   onAddFiles = noopFn,
   onClick,
   pattern = '.[0-9a-z]+$',
-  // eslint-disable-next-line react/prop-types
   innerRef,
   ...rest
 }) {
   const prefix = usePrefix();
   const inputRef = useRef(null);
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const {
     current: uid
   } = useRef(id || useId());

package/es/components/FileUploader/FileUploaderItem.js

@@ -36,6 +36,7 @@ function FileUploaderItem({
   const textRef = useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const {
     current: id
   } = useRef(uuid || useId());
@@ -48,6 +49,8 @@ function FileUploaderItem({
   const filterSpaceName = name => {
     return name?.replace(/\s+/g, '');
   };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
     return element.offsetWidth < element.scrollWidth;

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -30,12 +30,14 @@ const FluidMultiSelect = /*#__PURE__*/React.forwardRef(function FluidMultiSelect
     }
   }, isFilterable ?
   /*#__PURE__*/
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore
   React.createElement(FilterableMultiSelect, _extends({
     ref: ref,
     className: classNames
   }, other)) :
   /*#__PURE__*/
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore
   React.createElement(MultiSelect, _extends({
     ref: ref,

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -15,10 +15,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { NumberFormatOptionsPropType } from '../NumberInput/NumberFormatPropTypes.js';
 
-const FluidNumberInput = /*#__PURE__*/React.forwardRef(function FluidNumberInput({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const FluidNumberInput = /*#__PURE__*/React.forwardRef(({
   className,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--number-input--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidSearch/FluidSearch.js

@@ -14,10 +14,11 @@ import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidSearch = /*#__PURE__*/React.forwardRef(function FluidSearch({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const FluidSearch = /*#__PURE__*/React.forwardRef(({
   className,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--search--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidSelect/FluidSelect.js

@@ -14,11 +14,12 @@ import '../Select/Select.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidSelect = /*#__PURE__*/React.forwardRef(function FluidSelect({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const FluidSelect = /*#__PURE__*/React.forwardRef(({
   className,
   children,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--select--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidTextInput/FluidTextInput.js

@@ -16,11 +16,12 @@ import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidTextInput = /*#__PURE__*/React.forwardRef(function FluidTextInput({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const FluidTextInput = /*#__PURE__*/React.forwardRef(({
   className,
   isPassword,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--text-input--fluid`]: !isPassword