@carbon/react 1.89.0 → 1.90.0

package/lib/components/DataTable/DataTable.js

@@ -70,6 +70,17 @@ const defaultTranslations = {
   [translationKeys.unselectRow]: 'Unselect row'
 };
 const translateWithId = id => defaultTranslations[id];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -80,6 +91,7 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 const DataTable = props => {
   const {
     children,
@@ -128,6 +140,7 @@ const DataTable = props => {
     if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) {
       setState(prev => getDerivedStateFromProps.default(props, prev));
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [headers, rows]);
 
   /**
@@ -160,6 +173,7 @@ const DataTable = props => {
           ...prev,
           ...nextSortState
         }));
+        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
         onClick && handleOnHeaderClick(onClick, {
           sortHeaderKey: header.key,
           sortDirection: nextSortState.sortDirection

package/lib/components/DataTable/Table.js

@@ -76,9 +76,11 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = React.useCallback((alignTop = false) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
   }, [prefix]);
   const toggleTableHeaderAlignmentClass = React.useCallback((alignTop = false) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
   }, [prefix]);
   const setTableAlignment = React.useCallback(() => {
@@ -128,9 +130,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
+    className: `${prefix}--data-table-content`,
     tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
   }, /*#__PURE__*/React.createElement("table", _rollupPluginBabelHelpers.extends({
     "aria-labelledby": titleId,

package/lib/components/DataTable/TableExpandHeader.js

@@ -95,7 +95,11 @@ TableExpandHeader.propTypes = {
   /**
    * Hook for when a listener initiates a request to expand the given row
    */
-  onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy.default('enableExpando', PropTypes.func), requiredIfGivenPropIsTruthy.default('enableToggle', PropTypes.func)])
+  onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy.default('enableExpando', PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  ), requiredIfGivenPropIsTruthy.default('enableToggle', PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  )])
 };
 
 exports.default = TableExpandHeader;

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -4,13 +4,41 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type MouseEventHandler, type PropsWithChildren } from 'react';
-import { TableRowProps } from './TableRow';
-export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+import React, { type HTMLAttributes, type MouseEventHandler, type PropsWithChildren } from 'react';
+/** Props shared between `TableRow` and `TableExpandRow`. */
+export interface TableRowExpandInteropProps {
+    /**
+     * @deprecated Use `aria-label` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    'aria-label'?: string;
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+     */
+    'aria-controls'?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded?: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify if the row is selected.
+     */
+    isSelected?: boolean;
+}
+export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']?: string;
+    'aria-controls'?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the
@@ -21,7 +49,7 @@ export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    'aria-label': string;
     /**
      * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
      */

package/lib/components/DataTable/TableExpandRow.js

@@ -21,6 +21,8 @@ var TableDecoratorRow = require('./TableDecoratorRow.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
+/** Props shared between `TableRow` and `TableExpandRow`. */
+
 const TableExpandRow = /*#__PURE__*/React.forwardRef(({
   ['aria-controls']: ariaControls,
   ['aria-label']: ariaLabel,
@@ -89,13 +91,14 @@ TableExpandRow.propTypes = {
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
-  ['aria-controls']: PropTypes.string,
+  'aria-controls': PropTypes.string,
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   /**@ts-ignore*/
-  ['aria-label']: PropTypes.string,
+  'aria-label': PropTypes.string,
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is

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

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
-import { sortStates } from './state/sorting';
 import { TranslateWithId } from '../../types/common';
-import { DataTableSortState } from './state/sortStates';
+import { sortStates, type DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
     header: ReactNode;

package/lib/components/DataTable/TableHeader.js

@@ -14,12 +14,11 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var iconsReact = require('@carbon/icons-react');
-require('./state/sorting.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var sortStates = require('./state/sortStates.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var sortStates = require('./state/sortStates.js');
 
 const defaultScope = 'col';
 const translationKeys = {
@@ -193,6 +192,8 @@ TableHeader.propTypes = {
    */
   translateWithId: PropTypes.func
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';
 

package/lib/components/DataTable/TableRow.d.ts

@@ -5,15 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+import type { TableRowExpandInteropProps } from './TableExpandRow';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, TableRowExpandInteropProps {
     /**
      * Specify an optional className to be applied to the container node
      */
     className?: string;
-    /**
-     * Specify if the row is selected
-     */
-    isSelected?: boolean;
 }
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

package/lib/components/DataTable/TableRow.js

@@ -19,37 +19,35 @@ var TableDecoratorRow = require('./TableDecoratorRow.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
-const TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const prefix = usePrefix.usePrefix();
-  let rowHasAILabel;
-  if (props?.children) {
-    // TODO: Why is this loop a `map`? It's not returning anything. Ideally,
-    // it seems that it should be a `some`. Maybe I'm missing something?
-    React.Children.toArray(props.children).map(child => {
-      if (utils.isComponentElement(child, TableSlugRow.default)) {
-        if (child.props.slug) {
-          rowHasAILabel = true;
-        }
-      } else if (utils.isComponentElement(child, TableDecoratorRow.default) && utils.isComponentElement(child.props.decorator, index.AILabel)) {
-        rowHasAILabel = true;
-      }
-    });
-  }
+const frFn = React.forwardRef;
+const TableRow = frFn((props, ref) => {
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
-  const className = cx(props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
-  });
   const {
     ariaLabel,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     'aria-label': ariaLabelAlt,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     'aria-controls': ariaControls,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     onExpand,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isExpanded,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isSelected,
     ...cleanProps
   } = props;
+  const prefix = usePrefix.usePrefix();
+  const rowHasAILabel = React.Children.toArray(props.children).some(child => {
+    if (utils.isComponentElement(child, TableSlugRow.default)) {
+      return !!child.props.slug;
+    }
+    return utils.isComponentElement(child, TableDecoratorRow.default) && utils.isComponentElement(child.props.decorator, index.AILabel);
+  });
+  const className = cx(props.className, {
+    [`${prefix}--data-table--selected`]: isSelected,
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
+  });
   if (className) {
     cleanProps.className = className;
   }
@@ -65,7 +63,27 @@ TableRow.propTypes = {
   /**
    * Specify if the row is selected
    */
-  isSelected: PropTypes.bool
+  isSelected: PropTypes.bool,
+  /**
+   * Non-standard alias for `aria-label`.
+   */
+  ariaLabel: PropTypes.string,
+  /**
+   * Accessible label for the row element.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * Associates this row with the id of the corresponding expanded row content.
+   */
+  'aria-controls': PropTypes.string,
+  /**
+   * Handler called when the row’s expand toggle is clicked.
+   */
+  onExpand: PropTypes.func,
+  /**
+   * Flag indicating whether the row is currently expanded.
+   */
+  isExpanded: PropTypes.bool
 };
 
 exports.default = TableRow;

package/lib/components/DataTable/TableSlugRow.js

@@ -34,6 +34,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/lib/components/DataTable/TableToolbarMenu.js

@@ -18,6 +18,9 @@ var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../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 = iconsReact.Settings,

package/lib/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/lib/components/DataTable/state/sorting.js

@@ -10,37 +10,41 @@
 var sortStates = require('./sortStates.js');
 var sorting = require('../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.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.sortStates.ASC;
-    }
-    if (prevState === 'ASC') {
-      return sortStates.sortStates.DESC;
+const getNextSortDirection = (prevHeader, currentHeader, prevState) => {
+  // Cycle for sorting the same header: NONE -> ASC -> DESC -> NONE.
+  if (prevHeader === currentHeader) {
+    switch (prevState) {
+      case sortStates.sortStates.NONE:
+        return sortStates.sortStates.ASC;
+      case sortStates.sortStates.ASC:
+        return sortStates.sortStates.DESC;
+      case sortStates.sortStates.DESC:
+        return sortStates.sortStates.NONE;
     }
-    return sortStates.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.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
 }) => {
@@ -48,38 +52,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.sortStates.NONE ? sorting.sortRows({
     rowIds,
     cellsById,
@@ -90,12 +82,11 @@ const getSortedState = (props, state, key, sortDirection) => {
   }) : initialRowOrder;
   return {
     sortHeaderKey: key,
-    sortDirection: sortDirection,
+    sortDirection,
     rowIds: nextRowIds
   };
 };
 
-exports.sortStates = sortStates.sortStates;
 exports.getNextSortDirection = getNextSortDirection;
 exports.getNextSortState = getNextSortState;
 exports.getSortedState = getSortedState;

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

@@ -15,6 +15,7 @@ var sortStates = require('../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 = '';
@@ -44,6 +45,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/lib/components/DatePicker/DatePicker.js

@@ -73,7 +73,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));
@@ -174,6 +173,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [hasInput, setHasInput] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const startInputField = React.useCallback(node => {
     if (node !== null) {
       startInputField.current = node;
@@ -193,7 +193,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;
@@ -230,7 +233,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.default, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
@@ -336,6 +343,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,
@@ -511,6 +519,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
   React.useImperativeHandle(ref, () => ({
     get calendar() {
       return calendarRef.current;
@@ -567,6 +576,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]);
   React.useEffect(() => {
     const handleMouseDown = event => {
@@ -575,6 +585,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/lib/components/DatePickerInput/DatePickerInput.js

@@ -24,6 +24,8 @@ var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 var Text = require('../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 {
@@ -97,6 +99,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,
@@ -202,12 +206,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`);
     }