@carbon/react 1.62.1 → 1.63.0

package/es/components/Tag/SelectableTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -18,7 +18,6 @@ import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const SelectableTag = _ref => {
   let {
     className,
@@ -33,7 +32,7 @@ const SelectableTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag

package/es/components/Tag/Tag.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -21,7 +21,6 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Text } from '../Text/Text.js';
 
 var _Close;
-const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -63,7 +62,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   const prefix = usePrefix();
   const tagRef = useRef();
   const ref = useMergeRefs([forwardRef, tagRef]);
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useLayoutEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
@@ -117,8 +116,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   }
   const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   const labelClasses = cx({
-    [`${prefix}--tag__label`]: !isInteractiveTag,
-    [`${prefix}--tag--${type}`]: type && !isInteractiveTag
+    [`${prefix}--tag__label`]: !isInteractiveTag
   });
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
     ref: ref,

package/es/components/TextArea/TextArea.js

@@ -17,12 +17,11 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useAnnouncer } from '../../internal/useAnnouncer.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     className,
@@ -55,9 +54,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     defaultValue,
     value
   } = other;
-  const {
-    current: textAreaInstanceId
-  } = useRef(getInstanceId());
+  const textAreaInstanceId = useId();
   const textareaRef = useRef(null);
   const ref = useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
@@ -217,7 +214,33 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       textareaProps.maxLength = maxCount;
     }
   }
+  const announcerRef = useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = useState('');
   const ariaAnnouncement = useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
+  useEffect(() => {
+    if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
+      const announcer = announcerRef.current;
+      if (announcer) {
+        // Clear the content first
+        announcer.textContent = '';
+
+        // Set the new content after a small delay
+        const timeoutId = setTimeout(() => {
+          if (announcer) {
+            announcer.textContent = ariaAnnouncement;
+            setPrevAnnouncement(ariaAnnouncement);
+          }
+        }, counterMode === 'word' ? 2000 : 1000);
+
+        //clear the timeout
+        return () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+        };
+      }
+    }
+  }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     "aria-readonly": other.readOnly ? true : false,
@@ -250,7 +273,10 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
-    role: "alert"
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    ref: announcerRef
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--text-area__divider`
   }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);

package/es/components/TextInput/ControlledPasswordInput.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
@@ -14,10 +14,9 @@ import { textInputProps } from './util.js';
 import { warning } from '../../internal/warning.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const getInstanceId = setupGetInstanceId();
 let didWarnAboutDeprecation = false;
 const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function ControlledPasswordInput(_ref, ref) {
   let {
@@ -45,9 +44,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const {
-    current: controlledPasswordInstanceId
-  } = useRef(getInstanceId());
+  const controlledPasswordInstanceId = useId();
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
     didWarnAboutDeprecation = true;

package/es/components/TextInput/TextInput.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default, { useState, useContext } from 'react';
+import React__default, { useState, useContext, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import PasswordInput from './PasswordInput.js';
@@ -152,7 +152,31 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   const {
     isFluid
   } = useContext(FormContext);
+  const announcerRef = useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = useState('');
   const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  useEffect(() => {
+    if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
+      const announcer = announcerRef.current;
+      if (announcer) {
+        // Clear the content first
+        announcer.textContent = '';
+        // Set the new content after a small delay
+        const timeoutId = setTimeout(() => {
+          if (announcer) {
+            announcer.textContent = ariaAnnouncement;
+            setPrevAnnouncement(ariaAnnouncement);
+          }
+        }, 1000);
+        // clear the timeout
+        return () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+        };
+      }
+    }
+  }, [ariaAnnouncement, prevAnnouncement]);
   const Icon = normalizedProps.icon;
 
   // Slug is always size `mini`
@@ -175,7 +199,10 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     className: iconClasses
   }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
-    role: "alert"
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    ref: announcerRef
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--text-input__divider`
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));

package/es/index.d.ts

@@ -102,6 +102,7 @@ export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './compon
 export { FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, } from './components/FluidDropdown';
 export { FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, } from './components/FluidMultiSelect';
 export { FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, } from './components/FluidSelect';
+export { FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, } from './components/FluidSearch';
 export { FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, } from './components/FluidTextArea';
 export { FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, } from './components/FluidTextInput';
 export { FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, } from './components/FluidTimePicker';

package/es/index.js

@@ -175,6 +175,7 @@ export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
+export { default as unstable__FluidSearchSkeleton } from './components/FluidSearch/FluidSearch.Skeleton.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
@@ -198,6 +199,7 @@ export { default as unstable__FluidMultiSelect } from './components/FluidMultiSe
 export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
 export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
+export { default as unstable__FluidSearch } from './components/FluidSearch/FluidSearch.js';
 export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
 export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';

package/es/internal/Selection.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 
 function callOnChangeHandler(_ref) {
   let {

package/es/internal/useAnnouncer.js

@@ -7,10 +7,15 @@
 
 function useAnnouncer(textCount, maxCount) {
   let entityName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'characters';
-  const lastTen = maxCount - 10;
-  if (textCount >= lastTen) {
-    return `${maxCount - textCount} ${entityName} left.`;
+  const remaining = maxCount - textCount;
+  if (remaining <= 10 && remaining > 0) {
+    const entity = remaining === 1 ? entityName.slice(0, -1) : entityName;
+    return `${remaining} ${entity} left.`;
   }
+  if (remaining <= 0) {
+    return `Maximum ${entityName} reached.`;
+  }
+  return null;
 }
 
 export { useAnnouncer };

package/es/types/common.d.ts

@@ -9,10 +9,15 @@ export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<F
 export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
     as?: Element;
 };
-export interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
     /**
      * Supply a method to translate internal strings with your i18n tool of
      * choice.
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
+/**
+ * Alias of TranslateWithId. Will be removed in v12
+ * @deprecated Use TranslateWithId instead
+ */
+export type InternationalProps<MID = string, ARGS = Record<string, unknown>> = TranslateWithId<MID, ARGS>;

package/lib/components/Checkbox/Checkbox.js

@@ -16,7 +16,7 @@ var cx = require('classnames');
 require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 var Text = require('../Text/Text.js');
 
@@ -26,7 +26,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className,
@@ -49,7 +48,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId.useId();
   const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -15,7 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +23,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const CheckboxGroup = _ref => {
   let {
     children,
@@ -43,7 +42,7 @@ const CheckboxGroup = _ref => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId.useId();
   const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,

package/lib/components/ComboBox/ComboBox.d.ts

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

package/lib/components/ComboBox/ComboBox.js

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

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

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

package/lib/components/ComboButton/index.js

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

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

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

package/lib/components/DataTable/DataTable.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 var getDerivedStateFromProps = require('./state/getDerivedStateFromProps.js');
 var sorting = require('./state/sorting.js');
 var cells = require('./tools/cells.js');
@@ -59,6 +59,11 @@ const translationKeys = {
   selectRow: 'carbon.table.row.select',
   unselectRow: 'carbon.table.row.unselect'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationKeys.expandAll]: 'Expand all rows',
   [translationKeys.collapseAll]: 'Collapse all rows',

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

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

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

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