@carbon/react 1.50.0-rc.0 → 1.51.0-rc.0

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -51,6 +51,10 @@ interface MultiSelectSortingProps<ItemType> {
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes that all items are deleted
+     */
+    clearAnnouncement?: string;
     /**
      * Specify the text that should be read for screen readers that describes total items selected
      */

package/es/components/MultiSelect/MultiSelect.js

@@ -71,6 +71,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     sortItems = defaultSortItems,
     compareItems = defaultCompareItems,
     clearSelectionText = 'To clear selection, press Delete or Backspace',
+    clearAnnouncement = 'all items have been cleared',
     clearSelectionDescription = 'Total items selected: ',
     light,
     invalid,
@@ -102,6 +103,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [isOpen, setIsOpen] = useState(open || false);
   const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
+  const [itemsCleared, setItemsCleared] = useState(false);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -148,7 +150,11 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           clearSelection();
           e.stopPropagation();
         }
+        if (!isOpen && match(e, Delete) && selectedItems.length > 0) {
+          setItemsCleared(true);
+        }
         if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setItemsCleared(false);
           setIsOpenWrapper(true);
         }
       }
@@ -383,7 +389,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }, itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemText)));
-  }))), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default.createElement("div", {
+  })), itemsCleared && /*#__PURE__*/React__default.createElement("span", {
+    "aria-live": "assertive",
+    "aria-label": clearAnnouncement
+  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText));

package/es/components/NumberInput/NumberInput.js

@@ -130,7 +130,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       return;
     }
     const state = {
-      value: event.target.value,
+      value: Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+     * Set this to true if you are having performance problems with large data sets.
+     */
+    disableOverflow?: boolean;
+    /**
+     * The number of items to be shown.
+     */
+    itemsShown?: number;
+    /**
+     * Whether user should be able to loop through the items when reaching first / last.
+     */
+    loop?: boolean;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (data: number) => void;
+    /**
+     * The index of current page.
+     */
+    page?: number;
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+    /**
+     * Specify a custom translation function that takes in a message identifier
+     * and returns the localized string for the message
+     */
+    translateWithId?: (id: string) => string;
+}
+declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
+export default PaginationNav;

package/es/components/PaginationNav/PaginationNav.js

@@ -27,23 +27,23 @@ function translateWithId(messageId) {
 
 // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef(null);
   useEffect(() => {
     ref.current = value;
   });
   return ref.current;
 }
-function getCuts(page, totalItems, itemsThatFit) {
+function calculateCuts(page, totalItems, itemsDisplayedOnPage) {
   let splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  if (itemsThatFit >= totalItems) {
+  if (itemsDisplayedOnPage >= totalItems) {
     return {
       front: 0,
       back: 0
     };
   }
-  const split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
+  const split = splitPoint || Math.ceil(itemsDisplayedOnPage / 2) - 1;
   let frontHidden = page + 1 - split;
-  let backHidden = totalItems - page - (itemsThatFit - split) + 1;
+  let backHidden = totalItems - page - (itemsDisplayedOnPage - split) + 1;
   if (frontHidden <= 1) {
     backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;
     frontHidden = 0;
@@ -93,15 +93,15 @@ function PaginationItem(_ref2) {
     }),
     onClick: onClick,
     "data-page": page,
-    "aria-current": isActive ? 'page' : null
+    "aria-current": isActive ? 'page' : undefined
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
 function PaginationOverflow(_ref3) {
   let {
-    fromIndex,
-    count,
+    fromIndex = NaN,
+    count = NaN,
     onSelect,
     // eslint-disable-next-line react/prop-types
     disableOverflow,
@@ -135,7 +135,7 @@ function PaginationOverflow(_ref3) {
       "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
       onChange: e => {
         const index = Number(e.target.value);
-        onSelect(index);
+        onSelect?.(index);
       }
     }, _option || (_option = /*#__PURE__*/React__default.createElement("option", {
       value: "",
@@ -155,7 +155,7 @@ function PaginationOverflow(_ref3) {
       page: fromIndex + 1,
       translateWithId: t,
       onClick: () => {
-        onSelect(fromIndex);
+        onSelect?.(fromIndex);
       }
     });
   }
@@ -165,7 +165,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   let {
     className,
     onChange = () => {},
-    totalItems,
+    totalItems = NaN,
     disableOverflow,
     itemsShown = 10,
     page = 0,
@@ -174,8 +174,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     ...rest
   } = _ref4;
   const [currentPage, setCurrentPage] = useState(page);
-  const [itemsThatFit, setItemsThatFit] = useState(itemsShown >= 4 ? itemsShown : 4);
-  const [cuts, setCuts] = useState(getCuts(currentPage, totalItems, itemsThatFit));
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(itemsShown >= 4 ? itemsShown : 4);
+  const [cuts, setCuts] = useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
   const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
@@ -206,7 +206,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     }
   }
   function pageWouldBeHidden(page) {
-    const startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
+    const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
     const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
@@ -219,20 +219,20 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   useEffect(() => {
-    setItemsThatFit(itemsShown >= 4 ? itemsShown : 4);
-    setCuts(getCuts(currentPage, totalItems, itemsShown));
+    setItemsDisplayedOnPage(itemsShown >= 4 ? itemsShown : 4);
+    setCuts(calculateCuts(currentPage, totalItems, itemsShown));
   }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   useEffect(() => {
     if (pageWouldBeHidden(currentPage)) {
-      const delta = currentPage - prevPage || 0;
+      const delta = currentPage - (prevPage || 0);
       if (delta > 0) {
-        const splitPoint = itemsThatFit - 3;
-        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
+        const splitPoint = itemsDisplayedOnPage - 3;
+        setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
       } else {
-        const splitPoint = itemsThatFit > 4 ? 2 : 1;
-        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
+        const splitPoint = itemsDisplayedOnPage > 4 ? 2 : 1;
+        setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
       }
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -243,7 +243,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   const classNames = cx(`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
-  const startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
+  const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
   return /*#__PURE__*/React__default.createElement("nav", _extends({
     className: classNames,
     ref: ref
@@ -259,7 +259,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   }),
   // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
-  (itemsThatFit >= 5 || itemsThatFit <= 4 && currentPage <= 1) && /*#__PURE__*/React__default.createElement(PaginationItem, {
+  (itemsDisplayedOnPage >= 5 || itemsDisplayedOnPage <= 4 && currentPage <= 1) && /*#__PURE__*/React__default.createElement(PaginationItem, {
     page: 1,
     translateWithId: t,
     isActive: currentPage === 0,
@@ -401,6 +401,5 @@ PaginationNav.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-var PaginationNav$1 = PaginationNav;
 
-export { PaginationNav$1 as default };
+export { PaginationNav as default };

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * 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 PaginationNav from './PaginationNav';
+export default PaginationNav;
+export { PaginationNav };

package/es/components/Tabs/Tabs.js

@@ -228,7 +228,8 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      const activeTabs = tabs.current.filter(tab => !tab.disabled);
+      const filtredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {

package/es/components/Tile/Tile.d.ts

@@ -180,11 +180,11 @@ export interface TileAboveTheFoldContentProps {
      */
     children?: ReactNode;
 }
-export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface TileBelowTheFoldContentProps {
     /**
      * The child nodes.
      */
     children?: ReactNode;
 }
-export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Tile/Tile.js

@@ -604,7 +604,7 @@ const TileAboveTheFoldContent = /*#__PURE__*/React__default.forwardRef(function
     children
   } = _ref5;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: `${prefix}--tile-content__above-the-fold`
   }, children);
@@ -621,7 +621,7 @@ const TileBelowTheFoldContent = /*#__PURE__*/React__default.forwardRef(function
     children
   } = _ref6;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: `${prefix}--tile-content__below-the-fold`
   }, children);

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

@@ -72,6 +72,7 @@ export { default as OrderedList } from './components/OrderedList/OrderedList.js'
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
+export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
@@ -189,6 +190,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';
@@ -216,7 +219,6 @@ export { default as TableToolbarMenu } from './components/DataTable/TableToolbar
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
-export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';

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/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/ComposedModal/ComposedModal.js

@@ -15,6 +15,9 @@ var reactIs = require('react-is');
 var PropTypes = require('prop-types');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
+var debounce = require('lodash.debounce');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var cx = require('classnames');
 var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
@@ -27,6 +30,7 @@ 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) {
@@ -38,18 +42,39 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const contentClass = cx__default["default"](`${prefix}--modal-content`, hasForm && `${prefix}--modal-content--with-form`, hasScrollingContent && `${prefix}--modal-scroll-content`, customClassName);
-  const hasScrollingContentProps = hasScrollingContent ? {
+  const contentRef = React.useRef(null);
+  const [isScrollable, setIsScrollable] = React.useState(false);
+  const contentClass = cx__default["default"]({
+    [`${prefix}--modal-content`]: true,
+    [`${prefix}--modal-content--with-form`]: hasForm,
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+    customClassName
+  });
+  useIsomorphicEffect["default"](() => {
+    if (contentRef.current) {
+      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+    }
+    function handler() {
+      if (contentRef.current) {
+        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+      }
+    }
+    const debouncedHandler = debounce__default["default"](handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return () => {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []);
+  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region'
   } : {};
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: contentClass
   }, hasScrollingContentProps, rest, {
-    ref: ref
-  }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--modal-content--overflow-indicator`
-  }));
+    ref: mergeRefs["default"](contentRef, ref)
+  }), children);
 });
 ModalBody.propTypes = {
   /**

package/lib/components/Copy/Copy.js

@@ -52,7 +52,7 @@ function Copy(_ref) {
     handleFadeOut();
   }, [handleFadeOut]);
   const handleAnimationEnd = event => {
-    if (event.animationName === 'hide-feedback') {
+    if (event.animationName === `${prefix}--hide-feedback`) {
       setAnimation('');
     }
   };

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>> | undefined;
         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