@carbon/react 1.72.0 → 1.73.0

package/es/components/Slider/Slider.d.ts

@@ -387,7 +387,7 @@ declare class Slider extends PureComponent<SliderProps> {
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    onDrag: any;
+    onDrag: import("es-toolkit/dist/compat/function/debounce").DebouncedFunction<(evt: any, activeHandle?: HandlePosition | null) => void>;
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.

package/es/components/Slider/Slider.js

@@ -9,7 +9,7 @@ import { defineProperty as _defineProperty, extends as _extends } from '../../_v
 import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import throttle from 'lodash.throttle';
+import { throttle } from 'es-toolkit/compat';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -22,7 +22,6 @@ import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './
 import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
 
-var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
 const ThumbWrapper = _ref => {
   let {
     hasTooltip = false,
@@ -947,6 +946,7 @@ class Slider extends PureComponent {
     return Object.entries(derivedState).length > 0 ? derivedState : null;
   }
   render() {
+    var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
     const {
       ariaLabelInput,
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
@@ -1114,7 +1114,15 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${formatLabel(valueUpper || 0, '')}`,
@@ -1131,7 +1139,15 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : undefined)) : null, /*#__PURE__*/React__default.createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : undefined)) : null, /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;

package/es/components/Slider/SliderHandles.d.ts

@@ -1,4 +1,4 @@
-export declare const LowerHandle: () => import("react/jsx-runtime").JSX.Element;
-export declare const LowerHandleFocus: () => import("react/jsx-runtime").JSX.Element;
-export declare const UpperHandle: () => import("react/jsx-runtime").JSX.Element;
-export declare const UpperHandleFocus: () => import("react/jsx-runtime").JSX.Element;
+export declare const LowerHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const LowerHandleFocus: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandleFocus: (props: any) => import("react/jsx-runtime").JSX.Element;

package/es/components/Slider/SliderHandles.js

@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import React__default from 'react';
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
-const LowerHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const LowerHandle = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
-}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+}, props), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
   d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
 })), _path2 || (_path2 = /*#__PURE__*/React__default.createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const LowerHandleFocus = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
-}, _path3 || (_path3 = /*#__PURE__*/React__default.createElement("path", {
+}, props), _path3 || (_path3 = /*#__PURE__*/React__default.createElement("path", {
   d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
 })), _path4 || (_path4 = /*#__PURE__*/React__default.createElement("path", {
   fill: "none",
@@ -35,21 +36,21 @@ const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixC
 })), _path7 || (_path7 = /*#__PURE__*/React__default.createElement("path", {
   d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
 }))));
-const UpperHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const UpperHandle = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
-}, _path8 || (_path8 = /*#__PURE__*/React__default.createElement("path", {
+}, props), _path8 || (_path8 = /*#__PURE__*/React__default.createElement("path", {
   d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
 })), _path9 || (_path9 = /*#__PURE__*/React__default.createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const UpperHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const UpperHandleFocus = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, _path10 || (_path10 = /*#__PURE__*/React__default.createElement("path", {
+}, props), _path10 || (_path10 = /*#__PURE__*/React__default.createElement("path", {
   d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
 })), _path11 || (_path11 = /*#__PURE__*/React__default.createElement("path", {
   fill: "none",

package/es/components/Stack/Stack.js

@@ -52,7 +52,9 @@ const Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref)
     [`${prefix}--stack-${orientation}`]: true,
     [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number'
   });
-  const style = {};
+  const style = {
+    ...rest.style
+  };
   if (typeof gap === 'string') {
     style[`--${prefix}-stack-gap`] = gap;
   }

package/es/components/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import '../Grid/FlexGrid.js';

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

@@ -9,9 +9,9 @@ import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
-    as?: E | undefined;
+    as?: E;
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 };
 /**
  * Used to render the label for a Toggletip
@@ -36,12 +36,13 @@ export declare namespace ToggletipLabel {
     };
 }
 interface ToggletipProps<E extends ElementType> {
-    align?: PopoverAlignment | undefined;
-    as?: E | undefined;
-    autoAlign?: boolean | undefined;
-    className?: string | undefined;
+    align?: PopoverAlignment;
+    alignmentAxisOffset?: number;
+    as?: E;
+    autoAlign?: boolean;
+    className?: string;
     children?: ReactNode;
-    defaultOpen?: boolean | undefined;
+    defaultOpen?: boolean;
 }
 /**
  * Used as a container for the button and content of a toggletip. This component
@@ -55,6 +56,10 @@ export declare namespace Toggletip {
          * Specify how the toggletip should align with the button
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
         /**
          * Provide a custom element or component to render the top-level node for the
          * component.
@@ -81,8 +86,8 @@ export declare namespace Toggletip {
 }
 interface ToggletipButtonBaseProps {
     children?: ReactNode;
-    className?: string | undefined;
-    label?: string | undefined;
+    className?: string;
+    label?: string;
 }
 export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
@@ -92,7 +97,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
 export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 interface ToggletipContentProps {
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 }
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
@@ -103,7 +108,7 @@ declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContent
 export { ToggletipContent };
 interface ToggleTipActionsProps {
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 }
 /**
  * `ToggletipActions` is a container for one or two actions present at the base

package/es/components/Toggletip/index.js

@@ -173,6 +173,10 @@ Toggletip.propTypes = {
 
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -200,6 +204,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
+
 const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,

package/es/index.js

@@ -220,6 +220,7 @@ export { default as TableBatchActions } from './components/DataTable/TableBatchA
 export { default as TableBody } from './components/DataTable/TableBody.js';
 export { default as TableCell } from './components/DataTable/TableCell.js';
 export { default as TableContainer } from './components/DataTable/TableContainer.js';
+export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
 export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
 export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
 export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';

package/es/prop-types/deprecateComponent.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { warning } from '../internal/warning.js';
+
+const didWarnAboutDeprecation = {};
+function deprecateComponent(componentName, message) {
+  if (!componentName) {
+    return;
+  }
+  if (!didWarnAboutDeprecation[componentName]) {
+    didWarnAboutDeprecation[componentName] = true;
+    process.env.NODE_ENV !== "production" ? warning(false, message || `The ${componentName} component has been deprecated and will be removed in the next major release.`) : void 0;
+  }
+  return componentName;
+}
+
+export { deprecateComponent as default };

package/lib/components/AILabel/index.js

@@ -128,7 +128,8 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
       onRevertClick(evt);
     }
   };
-  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
+  const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: aiLabelClasses,
     ref: ref,
@@ -140,7 +141,8 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
     label: revertLabel
   }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
     align: align,
-    autoAlign: autoAlign
+    autoAlign: autoAlign,
+    alignmentAxisOffset: isSmallIcon ? -24 : 0
   }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
     className: aiLabelButtonClasses,
     label: ariaLabelText

package/lib/components/ComposedModal/ComposedModal.js

@@ -16,7 +16,7 @@ var PropTypes = require('prop-types');
 var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var cx = require('classnames');
@@ -34,7 +34,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
@@ -62,7 +61,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
         setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
       }
     }
-    const debouncedHandler = debounce__default["default"](handler, 200);
+    const debouncedHandler = compat.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();

package/lib/components/Copy/Copy.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 debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var cx = require('classnames');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,7 +24,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const propMappingFunction = deprecatedValue => {
@@ -59,7 +58,7 @@ function Copy(_ref) {
     [`${prefix}--copy-btn--${animation}`]: animation
   });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleFadeOut = React.useCallback(debounce__default["default"](() => {
+  const handleFadeOut = React.useCallback(compat.debounce(() => {
     setAnimation('fade-out');
   }, feedbackTimeout), [feedbackTimeout]);
   const handleClick = React.useCallback(() => {

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

@@ -15,6 +15,7 @@ import TableBatchActions from './TableBatchActions';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
@@ -70,6 +71,7 @@ export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
     slug?: React.ReactElement;
+    decorator?: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -174,7 +176,8 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         cell: DataTableCell<ColTypes>;
     }) => {
         [key: string]: unknown;
-        hasSlugHeader?: boolean;
+        hasAILabelHeader?: boolean;
+        hasDecoratorHeader?: boolean;
     };
     onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
@@ -318,6 +321,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     static TableBody: typeof TableBody;
     static TableCell: typeof TableCell;
     static TableContainer: typeof TableContainer;
+    static TableDecoratorRow: typeof TableDecoratorRow;
     static TableExpandHeader: typeof TableExpandHeader;
     static TableExpandRow: typeof TableExpandRow;
     static TableExpandedRow: typeof TableExpandedRow;
@@ -358,6 +362,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         slug: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        decorator: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         onClick: (event: any) => void;
     };
     /**
@@ -505,7 +510,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         [x: string]: any;
         cell: any;
     }) => {
-        hasSlugHeader: any;
+        hasAILabelHeader: any;
+        hasDecoratorHeader: any;
     };
     /**
      * Helper utility to get all the currently selected rows

package/lib/components/DataTable/DataTable.js

@@ -27,6 +27,7 @@ var TableBatchActions = require('./TableBatchActions.js');
 var TableBody = require('./TableBody.js');
 var TableCell = require('./TableCell.js');
 var TableContainer = require('./TableContainer.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
 var TableExpandHeader = require('./TableExpandHeader.js');
 var TableExpandRow = require('./TableExpandRow.js');
 var TableExpandedRow = require('./TableExpandedRow.js');
@@ -119,6 +120,7 @@ class DataTable extends React__default["default"].Component {
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
         slug: header.slug,
+        decorator: header.decorator,
         onClick: event => {
           const nextSortState = sorting.getNextSortState(this.props, this.state, {
             key: header.key
@@ -373,7 +375,8 @@ class DataTable extends React__default["default"].Component {
       } = _ref4;
       return {
         ...rest,
-        hasSlugHeader: cell.hasSlugHeader
+        hasAILabelHeader: cell.hasAILabelHeader,
+        hasDecoratorHeader: cell.hasDecoratorHeader
       };
     });
     /**
@@ -753,6 +756,7 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchActions", void 0)
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableBody", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableCell", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableContainer", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableDecoratorRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandHeader", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandedRow", void 0);
@@ -774,6 +778,7 @@ DataTable.TableBatchActions = TableBatchActions["default"];
 DataTable.TableBody = TableBody["default"];
 DataTable.TableCell = TableCell["default"];
 DataTable.TableContainer = TableContainer["default"];
+DataTable.TableDecoratorRow = TableDecoratorRow["default"];
 DataTable.TableExpandHeader = TableExpandHeader["default"];
 DataTable.TableExpandRow = TableExpandRow["default"];
 DataTable.TableExpandedRow = TableExpandedRow["default"];

package/lib/components/DataTable/Table.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var usePrefix = require('../../internal/usePrefix.js');
 var TableContext = require('./TableContext.js');
 var useEvent = require('../../internal/useEvent.js');
@@ -24,7 +24,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 const isElementWrappingContent = (element, context) => {
   if (element.children.length > 0) {
@@ -109,7 +108,7 @@ const Table = _ref => {
       toggleTableHeaderAlignmentClass(false);
     }
   }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
-  const debouncedSetTableAlignment = debounce__default["default"](setTableAlignment, 100);
+  const debouncedSetTableAlignment = compat.debounce(setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
   // Used to set a tabIndex when the Table is horizontally scrollable
@@ -122,7 +121,7 @@ const Table = _ref => {
       setIsScrollable(false);
     }
   }, []);
-  const debouncedSetTabIndex = debounce__default["default"](setTabIndex, 100);
+  const debouncedSetTabIndex = compat.debounce(setTabIndex, 100);
   useEvent.useWindowEvent('resize', debouncedSetTabIndex);
   useIsomorphicEffect["default"](() => {
     setTabIndex();

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

@@ -22,7 +22,7 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
     /**
      * Specify if the table cell is in an AI column
      */
-    hasSlugHeader?: boolean;
+    hasAILabelHeader?: 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
      */

package/lib/components/DataTable/TableCell.js

@@ -23,13 +23,13 @@ const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   let {
     children,
     className,
-    hasSlugHeader,
+    hasAILabelHeader,
     colSpan,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tableCellClassNames = cx__default["default"](className, {
-    [`${prefix}--table-cell--column-slug`]: hasSlugHeader
+    [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
   });
   return /*#__PURE__*/React__default["default"].createElement("td", _rollupPluginBabelHelpers["extends"]({
     className: tableCellClassNames ? tableCellClassNames : undefined,

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { ReactNode } from 'react';
+export interface TableDecoratorRowProps {
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
+}
+declare const TableDecoratorRow: {
+    ({ className, decorator, }: TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default TableDecoratorRow;

package/lib/components/DataTable/TableDecoratorRow.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const TableDecoratorRow = _ref => {
+  let {
+    className,
+    decorator
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const TableDecoratorRowClasses = cx__default["default"]({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-decorator`]: true,
+    [`${prefix}--table-column-decorator--active`]: decorator
+  });
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(decorator) ? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement("td", {
+    className: TableDecoratorRowClasses
+  }, normalizedDecorator);
+};
+TableDecoratorRow.displayName = 'TableDecoratorRow';
+TableDecoratorRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator: PropTypes__default["default"].node
+};
+
+exports["default"] = TableDecoratorRow;