@carbon/react 1.92.1 → 1.93.0

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

@@ -1,18 +1,24 @@
 /**
- * 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.
  */
+import PropTypes from 'prop-types';
 import React, { type MouseEventHandler } from 'react';
 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 {
+declare const translationIds: {
+    readonly 'carbon.table.batch.cancel': "carbon.table.batch.cancel";
+    readonly 'carbon.table.batch.items.selected': "carbon.table.batch.items.selected";
+    readonly 'carbon.table.batch.item.selected': "carbon.table.batch.item.selected";
+    readonly 'carbon.table.batch.selectAll': "carbon.table.batch.selectAll";
+};
+type TranslationKey = keyof typeof translationIds;
+export type TableBatchActionsTranslationArgs = {
     totalSelected?: number;
     totalCount?: number;
-}
-export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+};
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TranslationKey, TableBatchActionsTranslationArgs> {
     /**
      * Provide elements to be rendered inside of the component.
      */
@@ -44,8 +50,41 @@ export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElem
      */
     totalCount?: number;
 }
-export interface TableBatchActionsComponent extends React.FC<TableBatchActionsProps> {
-    translationKeys: ReadonlyArray<TableBatchActionsTranslationKey>;
-}
-declare const TableBatchActions: TableBatchActionsComponent;
+declare const TableBatchActions: {
+    ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: TableBatchActionsProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * Hook required to listen for when the user initiates a cancel request
+         * through this component
+         */
+        onCancel: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Hook to listen for when the user initiates a select all
+         * request through this component. This _only_ controls the rendering
+         * of the `Select All` button and does not include built in functionality
+         */
+        onSelectAll: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Boolean specifier for whether or not the batch action bar should be
+         * displayed
+         */
+        shouldShowBatchActions: PropTypes.Requireable<boolean>;
+        /**
+         * Numeric representation of the total number of items in a table.
+         * This number is used in the select all button text
+         */
+        totalCount: PropTypes.Requireable<number>;
+        /**
+         * Numeric representation of the total number of items selected in a table.
+         * This number is used to derive the selection message
+         */
+        totalSelected: PropTypes.Validator<number>;
+        /**
+         * Translates component strings using your i18n tool.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
 export default TableBatchActions;

package/lib/components/DataTable/TableBatchActions.js

@@ -20,27 +20,35 @@ var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
-const TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
-const translationKeys = {
-  'carbon.table.batch.cancel': 'Cancel',
-  'carbon.table.batch.items.selected': 'items selected',
-  'carbon.table.batch.item.selected': 'item selected',
-  'carbon.table.batch.selectAll': 'Select all'
+const translationIds = {
+  'carbon.table.batch.cancel': 'carbon.table.batch.cancel',
+  'carbon.table.batch.items.selected': 'carbon.table.batch.items.selected',
+  'carbon.table.batch.item.selected': 'carbon.table.batch.item.selected',
+  'carbon.table.batch.selectAll': 'carbon.table.batch.selectAll'
 };
-const translateWithId = (id, {
-  totalSelected,
-  totalCount
-} = {
+const defaultTranslations = {
+  [translationIds['carbon.table.batch.cancel']]: 'Cancel',
+  [translationIds['carbon.table.batch.items.selected']]: 'items selected',
+  [translationIds['carbon.table.batch.item.selected']]: 'item selected',
+  [translationIds['carbon.table.batch.selectAll']]: 'Select all'
+};
+const defaultTranslateWithId = (messageId, args = {
   totalSelected: 0,
   totalCount: 0
 }) => {
-  if (id === 'carbon.table.batch.cancel') {
-    return translationKeys[id];
-  }
-  if (id === 'carbon.table.batch.selectAll') {
-    return `${translationKeys[id]} (${totalCount})`;
+  const {
+    totalSelected,
+    totalCount
+  } = args;
+  switch (messageId) {
+    case translationIds['carbon.table.batch.cancel']:
+      return defaultTranslations[messageId];
+    case translationIds['carbon.table.batch.selectAll']:
+      return `${defaultTranslations[messageId]} (${totalCount})`;
+    case translationIds['carbon.table.batch.items.selected']:
+    case translationIds['carbon.table.batch.item.selected']:
+      return `${totalSelected} ${defaultTranslations[messageId]}`;
   }
-  return `${totalSelected} ${translationKeys[id]}`;
 };
 const TableBatchActions = ({
   className,
@@ -50,7 +58,7 @@ const TableBatchActions = ({
   totalCount,
   onCancel,
   onSelectAll,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   ...rest
 }) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
@@ -89,7 +97,6 @@ const TableBatchActions = ({
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -120,9 +127,7 @@ TableBatchActions.propTypes = {
    */
   totalSelected: PropTypes.number.isRequired,
   /**
-   * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are available on the `translationKeys` field for
-   * this component.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/lib/components/DataTable/TableExpandHeader.js

@@ -96,9 +96,9 @@ TableExpandHeader.propTypes = {
    * Hook for when a listener initiates a request to expand the given row
    */
   onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func
-  // 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/20452
   ), requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func
-  // 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/20452
   )])
 };
 

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

@@ -33,6 +33,10 @@ export interface TableRowExpandInteropProps {
      * Specify if the row is selected.
      */
     isSelected?: boolean;
+    /**
+     * 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
+     */
+    expandHeader?: string;
 }
 export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**

package/lib/components/DataTable/TableExpandRow.js

@@ -96,7 +96,7 @@ TableExpandRow.propTypes = {
    * 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
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
   /**@ts-ignore*/
   'aria-label': PropTypes.string,
   /**

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

@@ -5,21 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 import { sortStates, type DataTableSortState } from './state/sortStates';
-export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
-export interface TableHeaderTranslationArgs {
+declare const translationIds: {
+    readonly 'carbon.table.header.icon.description': "carbon.table.header.icon.description";
+};
+type TranslationKey = keyof typeof translationIds;
+interface TableHeaderTranslationArgs {
     header: ReactNode;
     isSortHeader?: boolean;
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
 }
-export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
-    header: any;
-    sortDirection: any;
-    isSortHeader: any;
-    sortStates: any;
-}> {
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TranslationKey, TableHeaderTranslationArgs> {
     /**
      * Pass in children that will be embedded in the table header label
      */
@@ -69,7 +67,7 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement &
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.
      */
-    sortDirection?: string;
+    sortDirection?: DataTableSortState;
 }
 declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableHeader;

package/lib/components/DataTable/TableHeader.js

@@ -21,11 +21,14 @@ var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
 const defaultScope = 'col';
-const translationKeys = {
-  buttonDescription: 'carbon.table.header.icon.description'
+const translationIds = {
+  'carbon.table.header.icon.description': 'carbon.table.header.icon.description'
 };
-const translateWithId = (key, args) => {
-  if (args && key === translationKeys.buttonDescription) {
+const defaultTranslations = {
+  [translationIds['carbon.table.header.icon.description']]: 'Click to sort rows by header in ascending order'
+};
+const defaultTranslateWithId = (messageId, args) => {
+  if (args && messageId === translationIds['carbon.table.header.icon.description']) {
     if (args.isSortHeader && sortStates.sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
@@ -39,7 +42,7 @@ const translateWithId = (key, args) => {
     }
     return `Click to sort rows by ${args.header} header in ascending order`;
   }
-  return '';
+  return defaultTranslations[messageId];
 };
 const sortDirections = {
   [sortStates.sortStates.NONE]: 'none',
@@ -56,7 +59,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   onClick,
   scope = defaultScope,
   sortDirection,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   slug,
   id,
   ...rest
@@ -72,7 +75,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini',
     ref: AILableRef
-  }) : null;
+  }) : candidate;
   const headerLabelClassNames = cx({
     [`${prefix}--table-header-label`]: true,
     [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
@@ -186,15 +189,10 @@ TableHeader.propTypes = {
    */
   sortDirection: PropTypes.oneOf(Object.values(sortStates.sortStates)),
   /**
-   * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are available on the `translationKeys` field for
-   * this component.
+   * Translates component strings using your i18n tool.
    */
   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';
 
 exports.default = TableHeader;

package/lib/components/DataTable/TableRow.js

@@ -25,16 +25,18 @@ const TableRow = frFn((props, ref) => {
   // only useful in `TableExpandRow`
   const {
     ariaLabel,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     'aria-label': ariaLabelAlt,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     'aria-controls': ariaControls,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     onExpand,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isExpanded,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isSelected,
+    expandHeader,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     ...cleanProps
   } = props;
   const prefix = usePrefix.usePrefix();

package/lib/components/DataTable/TableSlugRow.js

@@ -34,7 +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
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/DataTable/TableToolbarMenu.js

@@ -19,7 +19,7 @@ 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
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20452
 
 const TableToolbarMenu = ({
   className,

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

@@ -7,14 +7,15 @@
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import { SearchProps } from '../Search';
-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';
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.table.toolbar.search.label': "carbon.table.toolbar.search.label";
+    readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
+};
+type TranslationKey = keyof typeof translationIds;
 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>, TranslateWithId<TableToolbarTranslationKey> {
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */
@@ -138,7 +139,7 @@ declare const TableToolbarSearch: {
          */
         tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         /**
-         * Provide custom text for the component for each translation id
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/lib/components/DataTable/TableToolbarSearch.js

@@ -19,23 +19,23 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-const translationKeys = {
-  'carbon.table.toolbar.search.label': 'Filter table',
-  'carbon.table.toolbar.search.placeholder': 'Filter table'
+const translationIds = {
+  'carbon.table.toolbar.search.label': 'carbon.table.toolbar.search.label',
+  'carbon.table.toolbar.search.placeholder': 'carbon.table.toolbar.search.placeholder'
+};
+const defaultTranslations = {
+  [translationIds['carbon.table.toolbar.search.label']]: 'Filter table',
+  [translationIds['carbon.table.toolbar.search.placeholder']]: 'Filter table'
 };
-const translateWithId = id => {
-  return translationKeys[id];
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
 const TableToolbarSearch = ({
   className,
   searchContainerClass,
   onChange: onChangeProp,
   onClear = noopFn.noopFn,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   placeholder,
   labelText,
   expanded: expandedProp,
@@ -192,7 +192,7 @@ TableToolbarSearch.propTypes = {
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * Provide custom text for the component for each translation id
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

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

@@ -17,7 +17,7 @@ import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
-import TableHeader, { TableHeaderTranslationKey, TableHeaderTranslationArgs } from './TableHeader';
+import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
@@ -28,5 +28,5 @@ import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
 import type { DataTableSortState } from './state/sortStates';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

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

@@ -13,8 +13,8 @@ export interface SortRowParams {
     locale: string;
     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
+export type SortRowFn = (cellA: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+cellB: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 options: SortRowParams) => number;
 interface Props {
     locale?: string;

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

@@ -10,7 +10,7 @@
 var sortStates = require('./sortStates.js');
 var sorting = require('../tools/sorting.js');
 
-// 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/20452
 
 const initialSortState = sortStates.sortStates.NONE;
 

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

@@ -15,7 +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
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 const compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';

package/lib/components/DatePicker/DatePicker.js

@@ -173,7 +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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const startInputField = React.useCallback(node => {
     if (node !== null) {
       startInputField.current = node;
@@ -194,9 +194,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       onClose(selectedDates, dateStr, instance);
     }
   },
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   [onClose]);
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   const onCalendarClose = (selectedDates, dateStr, instance, e) => {
     if (e && e.type === 'clickOutside') {
       return;
@@ -235,9 +235,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     [String(className)]: className
   });
 
-  // 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/20452
   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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   (child, index) => {
     if (index === 0 && child.type === /*#__PURE__*/React.createElement(DatePickerInput.default, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -352,7 +352,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
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
@@ -528,7 +528,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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   React.useImperativeHandle(ref, () => ({
     get calendar() {
       return calendarRef.current;
@@ -585,7 +585,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
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [value]);
   React.useEffect(() => {
     const handleMouseDown = event => {
@@ -594,7 +594,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
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     const closeCalendar = event => {
       calendarRef.current?.close();
       // Remove focus from endDate calendar input

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -24,7 +24,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
-// 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/20452
 
 let didWarnAboutDatePickerInputValue = false;
 const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
@@ -100,7 +100,7 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
   });
   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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const inputProps = {
     ...rest,
     ...datePickerInputProps,
@@ -119,7 +119,7 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
   const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React.createElement(Text.Text, {
@@ -206,14 +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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   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
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     } catch (e) {
       return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
     }

package/lib/components/Dialog/Dialog.js

@@ -95,7 +95,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
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [modal, open]);
   React.useEffect(() => {
     if (!open && focusAfterCloseRef) {
@@ -126,7 +126,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
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open, ariaLabel, ariaLabelledBy, prefix]);
   return /*#__PURE__*/React.createElement(DialogContext.Provider, {
     value: contextValue
@@ -231,7 +231,7 @@ const DialogControls = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
     // @ts-ignore
     React.createElement("div", _rollupPluginBabelHelpers.extends({
       className: `${prefix}--dialog__header-controls`,
@@ -260,7 +260,7 @@ const DialogCloseButton = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
     // @ts-ignore
     React.createElement(index.IconButton, _rollupPluginBabelHelpers.extends({
       kind: "ghost",
@@ -497,7 +497,7 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
     onClick: onButtonClick
   }, i) => /*#__PURE__*/React.createElement(Button.default, {
     key: `${buttonText}-${i}`
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
     ,
     autoFocus: danger,
     kind: "secondary",
@@ -507,7 +507,7 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
     ref: danger ? setSecondaryButtonRef : undefined,
     disabled: loadingActive,
     kind: "secondary"
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
     ,
     autoFocus: danger,
     onClick: onSecondaryButtonClick