@carbon/react 1.49.0 → 1.50.0

package/es/components/MultiSelect/MultiSelect.js

@@ -306,13 +306,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       size: 'mini'
     });
   }
+  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item.text);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
+  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,

package/es/components/Notification/Notification.d.ts

@@ -513,3 +513,78 @@ export declare namespace ActionableNotification {
         title: PropTypes.Requireable<string>;
     };
 }
+/**
+ * StaticNotification
+ * ==================
+ */
+export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the content
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the notification box
+     */
+    className?: string;
+    /**
+     * Specify what state the notification represents
+     */
+    kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+    /**
+     * Specify whether you are using the low contrast variant of the StaticNotification.
+     */
+    lowContrast?: boolean;
+    /**
+     * Provide a description for "status" icon that can be read by screen readers
+     */
+    statusIconDescription?: string;
+    /**
+     * Specify the subtitle
+     */
+    subtitle?: string;
+    /**
+     * Specify the title
+     */
+    title?: string;
+    /**
+     * Specify the id for the element containing the title
+     */
+    titleId?: string;
+}
+export declare function StaticNotification({ children, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StaticNotification {
+    var propTypes: {
+        /**
+         * Specify the content
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the notification box
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify what state the notification represents
+         */
+        kind: PropTypes.Requireable<string>;
+        /**
+         * Specify whether you are using the low contrast variant of the StaticNotification.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a description for "status" icon that can be read by screen readers
+         */
+        statusIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+        /**
+         * Specify the title
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the id for the element containing the title
+         */
+        titleId: PropTypes.Requireable<string>;
+    };
+}

package/es/components/Notification/Notification.js

@@ -15,7 +15,7 @@ import '../Text/index.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
+import { useNoInteractiveChildren, useInteractiveChildrenNeedDescription } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -678,4 +678,86 @@ ActionableNotification.propTypes = {
   title: PropTypes.string
 };
 
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification };
+/**
+ * StaticNotification
+ * ==================
+ */
+
+function StaticNotification(_ref8) {
+  let {
+    children,
+    title,
+    titleId,
+    subtitle,
+    statusIconDescription,
+    className,
+    kind = 'error',
+    lowContrast,
+    ...rest
+  } = _ref8;
+  const prefix = usePrefix();
+  const containerClassName = cx(className, {
+    [`${prefix}--inline-notification`]: true,
+    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
+    [`${prefix}--inline-notification--${kind}`]: kind,
+    [`${prefix}--inline-notification--hide-close-button`]: true
+  });
+  const ref = useRef(null);
+  useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: containerClassName
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--inline-notification__details`
+  }, /*#__PURE__*/React__default.createElement(NotificationIcon, {
+    notificationType: "inline",
+    kind: kind,
+    iconDescription: statusIconDescription || `${kind} icon`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--inline-notification__text-wrapper`
+  }, title && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
+    id: titleId,
+    className: `${prefix}--inline-notification__title`
+  }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
+    className: `${prefix}--inline-notification__subtitle`
+  }, subtitle), children)));
+}
+StaticNotification.propTypes = {
+  /**
+   * Specify the content
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the notification box
+   */
+  className: PropTypes.string,
+  /**
+   * Specify what state the notification represents
+   */
+  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
+  /**
+   * Specify whether you are using the low contrast variant of the StaticNotification.
+   */
+  lowContrast: PropTypes.bool,
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes.string,
+  /**
+   * Specify the subtitle
+   */
+  subtitle: PropTypes.string,
+  /**
+   * Specify the title
+   */
+  title: PropTypes.string,
+  /**
+   * Specify the id for the element containing the title
+   */
+  titleId: PropTypes.string
+};
+
+export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification };

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

@@ -4,4 +4,4 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, } from './Notification';
+export { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, StaticNotification, type StaticNotificationProps, } from './Notification';

package/es/components/OverflowMenu/next/index.js

@@ -25,6 +25,7 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     label = 'Options',
     renderIcon: IconElement = OverflowMenuVertical,
     size = defaultSize,
+    menuAlignment = 'bottom-start',
     tooltipAlignment,
     ...rest
   } = _ref;
@@ -35,11 +36,17 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     open,
     x,
     y,
-    handleClick,
+    handleClick: hookOnClick,
     handleMousedown,
     handleClose
   } = useAttachedMenu(triggerRef);
+  function handleTriggerClick() {
+    if (triggerRef.current) {
+      hookOnClick();
+    }
+  }
   const containerClasses = cx(className, `${prefix}--overflow-menu__container`);
+  const menuClasses = cx(`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
@@ -52,7 +59,7 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     "aria-haspopup": true,
     "aria-expanded": open,
     className: triggerClasses,
-    onClick: handleClick,
+    onClick: handleTriggerClick,
     onMouseDown: handleMousedown,
     ref: triggerRef,
     label: label,
@@ -60,6 +67,9 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
   }, /*#__PURE__*/React__default.createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default.createElement(Menu, {
+    containerRef: triggerRef,
+    menuAlignment: menuAlignment,
+    className: menuClasses,
     id: id,
     size: size,
     open: open,
@@ -82,6 +92,10 @@ OverflowMenu.propTypes = {
    * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
    */
   label: PropTypes.string,
+  /**
+   * Experimental property. Specify how the menu should align with the button element
+   */
+  menuAlignment: PropTypes.oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
    * Otionally provide a custom icon to be rendered on the trigger button.
    */

package/es/index.d.ts

@@ -115,6 +115,7 @@ export { PageSelector as unstable_PageSelector, Pagination as unstable_Paginatio
 export * from './components/Popover';
 export * from './components/ProgressBar';
 export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
+export { ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, } from './components/ChatButton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/es/index.js

@@ -65,7 +65,7 @@ export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemS
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
+export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
@@ -189,6 +189,8 @@ export { default as unstable__FluidTimePickerSkeleton } from './components/Fluid
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
+export { default as unstable__ChatButton } from './components/ChatButton/ChatButton.js';
+export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';

package/es/internal/useNoInteractiveChildren.js

@@ -19,6 +19,18 @@ function useNoInteractiveChildren(ref) {
     });
   }
 }
+function useInteractiveChildrenNeedDescription(ref) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : `interactive child node(s) should have an \`aria-describedby\` property`;
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const node = ref.current ? getInteractiveContent(ref.current) : false;
+      if (node && !node.hasAttribute('aria-describedby')) {
+        throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
+      }
+    });
+  }
+}
 
 /**
  * Determines if a given DOM node has interactive content, or is itself
@@ -90,4 +102,4 @@ function isFocusable(element) {
   }
 }
 
-export { getInteractiveContent, getRoleContent, useNoInteractiveChildren };
+export { getInteractiveContent, getRoleContent, useInteractiveChildrenNeedDescription, useNoInteractiveChildren };

package/lib/components/Accordion/AccordionItem.js

@@ -61,7 +61,15 @@ function AccordionItem(_ref) {
   });
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  const content = React.useRef(null);
+  const content = React__default["default"].useCallback(node => {
+    if (!node) {
+      return;
+    }
+    if (isOpen) {
+      // accordion closes
+      node.style.maxBlockSize = '';
+    }
+  }, [isOpen]);
   if (open !== prevIsOpen) {
     setIsOpen(open);
     setPrevIsOpen(open);
@@ -70,19 +78,6 @@ function AccordionItem(_ref) {
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {
-    // type guard for ref
-    if (!content.current) {
-      return;
-    }
-    if (isOpen) {
-      // accordion closes
-      content.current.style.maxBlockSize = '';
-    } else {
-      // accordion opens
-      content.current.style.maxBlockSize =
-      // Scroll height plus top/bottom padding
-      content.current.scrollHeight + 32 + 'px';
-    }
     const nextValue = !isOpen;
     setIsOpen(nextValue);
     if (onHeadingClick) {

package/lib/components/Button/Button.js

@@ -100,12 +100,13 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   let component = 'button';
   const assistiveId = useId.useId('danger-description');
   const {
-    'aria-pressed': ariaPressed
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedBy
   } = rest;
   let otherProps = {
     disabled,
     type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : undefined,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
     'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
   };
   const anchorProps = {

package/lib/components/ChatButton/ChatButton.Skeleton.js

@@ -0,0 +1,50 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+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 ChatButtonSkeleton = _ref => {
+  let {
+    className,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const skeletonClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
+    [`${prefix}--layout--size-${size}`]: size
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: skeletonClasses
+  }, rest));
+};
+ChatButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+};
+var ChatButtonSkeleton$1 = ChatButtonSkeleton;
+
+exports["default"] = ChatButtonSkeleton$1;

package/lib/components/ChatButton/ChatButton.js

@@ -0,0 +1,91 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
+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 ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton(_ref, ref) {
+  let {
+    className,
+    children,
+    disabled,
+    isQuickAction,
+    isSelected,
+    kind,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](className, {
+    [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--quick-action`]: isQuickAction,
+    [`${prefix}--chat-btn--quick-action--selected`]: isSelected
+  });
+  const allowedSizes = ['sm', 'md', 'lg'];
+  if (isQuickAction) {
+    kind = 'ghost';
+    size = 'sm';
+  } else {
+    // Do not allow size larger than `lg`
+    size = allowedSizes.includes(size) ? size : 'lg';
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+    disabled: disabled,
+    className: classNames,
+    kind: kind,
+    ref: ref,
+    size: size
+  }, other), children);
+});
+ChatButton.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify whether the `ChatButton` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify whether the `ChatButton` should be rendered as a quick action button
+   */
+  isQuickAction: PropTypes__default["default"].bool,
+  /**
+   * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+   */
+  isSelected: PropTypes__default["default"].bool,
+  /**
+   * Specify the kind of `ChatButton` you want to create
+   */
+  kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
+  /**
+   * Specify the size of the `ChatButton`, from the following list of sizes:
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+};
+var ChatButton$1 = ChatButton;
+
+exports["default"] = ChatButton$1;

package/lib/components/ComboButton/index.js

@@ -46,6 +46,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     label,
     onClick,
     size = 'lg',
+    menuAlignment = 'bottom',
     tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
     ...rest
@@ -80,10 +81,15 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
   function handleOpen() {
     menuRef.current.style.inlineSize = `${width}px`;
+    menuRef.current.style.minInlineSize = `${width}px`;
+    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+      menuRef.current.style.inlineSize = `fit-content`;
+    }
   }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
+  const menuClasses = cx__default["default"](`${prefix}--combo-button__${menuAlignment}`);
   const primaryActionClasses = cx__default["default"](`${prefix}--combo-button__primary-action`);
   const triggerClasses = cx__default["default"](`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -93,6 +99,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    title: label,
     size: size,
     disabled: disabled,
     onClick: handlePrimaryActionClick
@@ -108,6 +115,9 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     onMouseDown: handleTriggerMousedown,
     "aria-controls": open ? id : null
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    containerRef: containerRef,
+    menuAlignment: menuAlignment,
+    className: menuClasses,
     ref: menuRef,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
@@ -137,6 +147,10 @@ ComboButton.propTypes = {
    * Provide the label to be renderd on the primary action button.
    */
   label: PropTypes__default["default"].string.isRequired,
+  /**
+   * Experimental property. Specify how the menu should align with the button element
+   */
+  menuAlignment: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Provide an optional function to be called when the primary action element is clicked.
    */

package/lib/components/ContainedList/ContainedList.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
@@ -54,7 +55,8 @@ function ContainedList(_ref) {
     isInset,
     kind = variants[0],
     label,
-    size
+    size,
+    ...rest
   } = _ref;
   const labelId = `${useId.useId('contained-list')}-header`;
   const prefix = usePrefix.usePrefix();
@@ -67,9 +69,9 @@ function ContainedList(_ref) {
   const filteredChildren = filterChildren(children);
   const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
   const renderedChildren = renderChildren(children);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classes
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--contained-list__header`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     id: labelId,

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
@@ -28,7 +29,8 @@ function ContainedListItem(_ref) {
     className,
     disabled = false,
     onClick,
-    renderIcon: IconElement
+    renderIcon: IconElement,
+    ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const isClickable = onClick !== undefined;
@@ -40,9 +42,9 @@ function ContainedListItem(_ref) {
   const content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, IconElement && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--contained-list-item__icon`
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("div", null, children));
-  return /*#__PURE__*/React__default["default"].createElement("li", {
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: classes
-  }, isClickable ? /*#__PURE__*/React__default["default"].createElement("button", {
+  }, rest), isClickable ? /*#__PURE__*/React__default["default"].createElement("button", {
     className: `${prefix}--contained-list-item__content`,
     type: "button",
     disabled: disabled,

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

@@ -53,6 +53,7 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
+    slug: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -152,6 +153,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         stickyHeader?: boolean;
         useStaticWidth?: boolean;
     };
+    getCellProps: (getCellPropsArgs: {
+        cell: DataTableCell<ColTypes>;
+    }) => {
+        [key: string]: unknown;
+        hasSlugHeader?: boolean;
+    };
     onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
     selectAll: () => void;
@@ -334,6 +341,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         sortDirection: DataTableSortState;
         isSortable: boolean | undefined;
         isSortHeader: boolean;
+        slug: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         onClick: (event: any) => void;
     };
     /**
@@ -468,6 +476,19 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         stickyHeader: boolean | undefined;
         useStaticWidth: boolean | undefined;
     };
+    /**
+     * Get the props associated with the given table cell.
+     *
+     * @param {object} config
+     * @param {object} config.cell the cell we want the props for
+     * @returns {object}
+     */
+    getCellProps: ({ cell, ...rest }: {
+        [x: string]: any;
+        cell: any;
+    }) => {
+        hasSlugHeader: any;
+    };
     /**
      * Helper utility to get all the currently selected rows
      * @returns {Array<string>} the array of rowIds that are currently selected