@carbon/ibm-products 1.24.0 → 1.26.0

package/es/components/Datagrid/useActionsColumn.js

@@ -32,19 +32,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
 
           return [props, {
             children: /*#__PURE__*/React.createElement("div", {
-              className: "".concat(blockClass, "__actions-column-content")
+              className: "".concat(blockClass, "__actions-column-contents")
             }, isFetching && /*#__PURE__*/React.createElement(IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/React.createElement(OverflowMenu, {
+            }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/React.createElement("div", {
+              className: "".concat(blockClass, "_actions-column"),
+              style: {
+                display: 'flex'
+              }
+            }, rowActions.map(function (action) {
+              var id = action.id,
+                  itemText = action.itemText,
+                  _onClick = action.onClick,
+                  icon = action.icon;
+              return /*#__PURE__*/React.createElement("div", {
+                className: "".concat(blockClass, "__actions-column-button"),
+                key: ""
+              }, /*#__PURE__*/React.createElement(OverflowMenu, {
+                renderIcon: icon,
+                hasIconOnly: true,
+                light: true,
+                iconDescription: itemText,
+                kind: "ghost",
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+
+                  _onClick(id, row, e);
+                }
+              }));
+            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
               onClick: function onClick(e) {
-                return e.stopPropagation();
+                e.stopPropagation();
               }
             }, rowActions.map(function (action) {
               var id = action.id,
-                  _onClick = action.onClick,
+                  _onClick2 = action.onClick,
                   shouldHideMenuItem = action.shouldHideMenuItem,
                   shouldDisableMenuItem = action.shouldDisableMenuItem,
                   disabled = action.disabled,
@@ -64,11 +89,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 onClick: function onClick(e) {
                   e.stopPropagation();
 
-                  _onClick(id, row, e);
+                  _onClick2(id, row, e);
                 },
                 key: id
               }));
-            }))),
+            })))),
             className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx, "".concat(blockClass, "__cell"), true), _cx))
           }];
         }

package/es/components/Datagrid/useSelectRows.js

@@ -21,7 +21,7 @@ import cx from 'classnames';
 import { TableSelectRow } from 'carbon-components-react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
-import { pkg } from '../../settings';
+import { pkg, carbon } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -57,7 +57,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
     }];
   };
 

package/es/components/Datagrid/useStickyColumn.js

@@ -117,6 +117,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
       var _temp = newHeaders[spacerIdx];
       newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[spacerIdx].canResize = false;
+      newHeaders[spacerIdx].disableResizing = true;
+      delete newHeaders[spacerIdx].getResizerProps;
       newHeaders[stickyIdx] = _temp;
     }
   });

package/es/components/EmptyStates/EmptyStateContent.js

@@ -36,7 +36,8 @@ export var EmptyStateContent = function EmptyStateContent(_ref) {
     className: "".concat(blockClass, "__action-button"),
     kind: action.kind || 'tertiary',
     onClick: action.onClick,
-    renderIcon: action.renderIcon || null
+    renderIcon: action.renderIcon || null,
+    size: 'sm'
   }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/React.createElement(Link, _extends({}, link, {
     className: "".concat(blockClass, "__link"),
     href: link.href

package/es/components/ImportModal/ImportModal.js

@@ -4,7 +4,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
+var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, forwardRef } from 'react';
+import { Add20 } from '@carbon/icons-react';
 import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropContainer, FileUploaderItem, TextInput, Button } from 'carbon-components-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -41,6 +42,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       fileDropHeader = _ref.fileDropHeader,
       fileDropLabel = _ref.fileDropLabel,
       fileUploadLabel = _ref.fileUploadLabel,
+      inputButtonIcon = _ref.inputButtonIcon,
       inputButtonText = _ref.inputButtonText,
       inputId = _ref.inputId,
       inputLabel = _ref.inputLabel,
@@ -252,7 +254,8 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: fetchFile,
     className: "".concat(blockClass, "__import-button"),
     size: "sm",
-    disabled: importButtonDisabled
+    disabled: importButtonDisabled,
+    renderIcon: inputButtonIcon ? Add20 : null
   }, inputButtonText)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/React.createElement("p", {
@@ -341,6 +344,11 @@ ImportModal.propTypes = {
    */
   fileUploadLabel: PropTypes.string,
 
+  /**
+   * Button icon for import by url button
+   */
+  inputButtonIcon: PropTypes.bool,
+
   /**
    * Button text for import by url button
    */

package/es/components/WebTerminal/WebTerminal.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -24,6 +24,7 @@ import { pkg } from '../../settings'; // Carbon and package components we use.
 import { Close16 as Close, Help16 as Help } from '@carbon/icons-react';
 import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import { moderate02 } from '@carbon/motion';
+import { useWebTerminal } from './hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'WebTerminal';
@@ -32,7 +33,8 @@ var blockClass = "".concat(pkg.prefix, "--web-terminal"); // Default values for
 var defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
-  documentationLinksIconDescription: 'Show documentation links'
+  documentationLinksIconDescription: 'Show documentation links',
+  isInitiallyOpen: false
 };
 export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref3;
@@ -42,14 +44,19 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children = _ref.children,
       className = _ref.className,
       closeIconDescription = _ref.closeIconDescription,
-      closeTerminal = _ref.closeTerminal,
       _ref$documentationLin = _ref.documentationLinks,
       documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
       _ref$documentationLin2 = _ref.documentationLinksIconDescription,
       documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
-      open = _ref.open,
+      _ref$isInitiallyOpen = _ref.isInitiallyOpen,
+      isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useWebTerminal = useWebTerminal(),
+      open = _useWebTerminal.open,
+      closeWebTerminal = _useWebTerminal.closeWebTerminal,
+      openWebTerminal = _useWebTerminal.openWebTerminal;
+
   var _useState = useState(open),
       _useState2 = _slicedToArray(_useState, 2),
       shouldRender = _useState2[0],
@@ -69,6 +76,16 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setRender(true);
     }
   }, [open]);
+  /**
+    On render, check if user want's the web terminal to be open by default
+  */
+
+  useEffect(function () {
+    if (isInitiallyOpen) {
+      openWebTerminal();
+    }
+  }, []); // eslint-disable-line
+
   /** 
     When the web terminal slide in animation is complete, sets render to false.
   */
@@ -88,7 +105,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setRender(false);
     }
 
-    closeTerminal();
+    closeWebTerminal();
   };
 
   return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
@@ -172,23 +189,18 @@ WebTerminal.propTypes = {
    */
   closeIconDescription: PropTypes.string.isRequired,
 
-  /**
-   * Function that should set the open prop to false
-   */
-  closeTerminal: PropTypes.func.isRequired,
-
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
   documentationLinks: PropTypes.arrayOf(PropTypes.shape(_objectSpread({}, OverflowMenuItem.propTypes))),
 
   /**
-   * Icon description for the documentation link overflow menu
+   * Description for the documentation link overflow menu tooltip
    */
   documentationLinksIconDescription: PropTypes.string,
 
   /**
-   * Boolean that determines if the web terminal is opened or closed
+   * Optionally pass if the web terminal should be open by default
    */
-  open: PropTypes.bool.isRequired
+  isInitiallyOpen: PropTypes.bool
 };

package/es/components/WebTerminal/WebTerminalContentWrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isTerminalOpen"];
+var _excluded = ["children"];
 
 /**
  * Copyright IBM Corp. 2020, 2021
@@ -14,18 +14,21 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { pkg } from '../../settings';
+import { useWebTerminal } from './hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'WebTerminalContentWrapper';
 var blockClass = "".concat(pkg.prefix, "--web-terminal-content-wrapper");
 export var WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      isTerminalOpen = _ref.isTerminalOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useWebTerminal = useWebTerminal(),
+      open = _useWebTerminal.open;
+
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), isTerminalOpen)])
+    className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), open)])
   }, rest), children);
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -40,10 +43,5 @@ WebTerminalContentWrapper.propTypes = {
   /**
    * Pass in content as children.
    */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
-  /**
-   * A boolean to determine if the terminal is open.
-   */
-  isTerminalOpen: PropTypes.bool.isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };

package/es/components/WebTerminal/hooks/index.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useCallback, createContext } from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { pkg } from '../../../settings';
+export var WebTerminalContext = /*#__PURE__*/createContext();
+var componentName = 'WebTerminalProvider';
+export var WebTerminalProvider = function WebTerminalProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var openWebTerminal = useCallback(function () {
+    return setOpen(true);
+  }, []);
+  var closeWebTerminal = useCallback(function () {
+    return setOpen(false);
+  }, []);
+  var toggleWebTerminal = useCallback(function () {
+    return setOpen(!open);
+  }, [open]);
+  return /*#__PURE__*/React.createElement(WebTerminalContext.Provider, {
+    value: {
+      open: open,
+      openWebTerminal: openWebTerminal,
+      closeWebTerminal: closeWebTerminal,
+      toggleWebTerminal: toggleWebTerminal
+    }
+  }, children);
+}; // Return a placeholder if not released and not enabled by feature flag
+
+WebTerminalProvider = pkg.checkComponentEnabled(WebTerminalProvider, componentName);
+WebTerminalProvider.propTypes = {
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+}; // Custom hook that exposes the provided value from context
+
+export var useWebTerminal = function useWebTerminal() {
+  return useContext(WebTerminalContext);
+};

package/es/components/WebTerminal/index.js

@@ -1,2 +1,3 @@
 export { WebTerminal } from './WebTerminal';
-export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
+export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
+export { useWebTerminal, WebTerminalProvider } from './hooks';

package/es/components/WebTerminal/preview-components/Navigation.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from 'carbon-components-react';
 import { Terminal20 as Terminal, Search20 as Search, User20 as User } from '@carbon/icons-react';
-import PropTypes from 'prop-types';
+import { useWebTerminal } from '../hooks';
+
+var Navigation = function Navigation() {
+  var _useWebTerminal = useWebTerminal(),
+      openWebTerminal = _useWebTerminal.openWebTerminal;
 
-var Navigation = function Navigation(_ref) {
-  var openTerminal = _ref.openTerminal;
   return /*#__PURE__*/React.createElement(Header, {
     "aria-label": "IBM Platform Name"
   }, /*#__PURE__*/React.createElement(HeaderName, {
@@ -12,7 +14,7 @@ var Navigation = function Navigation(_ref) {
     prefix: "IBM"
   }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Web terminal",
-    onClick: openTerminal
+    onClick: openWebTerminal
   }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
@@ -22,10 +24,4 @@ var Navigation = function Navigation(_ref) {
   }, /*#__PURE__*/React.createElement(User, null))));
 };
 
-Navigation.propTypes = {
-  /**
-   * Opens the terminal
-   */
-  openTerminal: PropTypes.func.isRequired
-};
 export default Navigation;

package/es/components/index.js

@@ -32,7 +32,7 @@ export { TagSet } from './TagSet';
 export { Tearsheet, TearsheetNarrow } from './Tearsheet';
 export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
 export { UserProfileImage } from './UserProfileImage';
-export { WebTerminal, WebTerminalContentWrapper } from './WebTerminal';
+export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';

package/es/global/js/package-settings.js

@@ -62,6 +62,7 @@ var defaults = {
     ToolbarGroup: false,
     WebTerminal: false,
     WebTerminalContentWrapper: false,
+    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -2,33 +2,172 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _iconsReact = require("@carbon/icons-react");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _reactResizeDetector = require("react-resize-detector");
+
+var _ButtonMenu = require("../../ButtonMenu");
+
 var _settings = require("../../../settings");
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
 
+var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      displayAllInMenu = _useState2[0],
+      setDisplayAllInMenu = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      initialListWidth = _useState4[0],
+      setInitialListWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      receivedInitialWidth = _useState6[0],
+      setReceivedInitialWidth = _useState6[1];
+
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+      toolbarBatchActions = datagridState.toolbarBatchActions;
+  var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
+  // used to measure when all items are put inside
+  // the ButtonMenu
+
+  (0, _react.useEffect)(function () {
+    if (totalSelected === 1 && !receivedInitialWidth) {
+      var batchActionListWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--action-list")).offsetWidth;
+      setInitialListWidth(batchActionListWidth);
+      setReceivedInitialWidth(true);
+    }
+  }, [totalSelected, receivedInitialWidth, ref]);
+  (0, _react.useEffect)(function () {
+    var summaryWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--batch-summary")).offsetWidth;
+
+    if (width < summaryWidth + initialListWidth + 32) {
+      setDisplayAllInMenu(true);
+    } else {
+      setDisplayAllInMenu(false);
+    }
+  }, [width, ref, initialListWidth]); // Render batch actions in ButtonMenu
+
+  var renderBatchActionOverflow = function renderBatchActionOverflow() {
+    var minWidthBeforeOverflowIcon = 380; // Do not render ButtonMenu when there are 3 or less items
+    // and if there is enough available space to render all the items
+
+    if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add16 : _iconsReact.OverflowMenuVertical16,
+      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
+      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      flipped: true
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2) {
+        if (displayAllInMenu) {
+          return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+            key: "".concat(batchAction.label, "-").concat(index),
+            itemText: batchAction.label,
+            onClick: function onClick() {
+              batchAction.onClick();
+
+              if (batchAction.type === 'select_all') {
+                toggleAllRowsSelected(true);
+              }
+            }
+          });
+        }
+
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        itemText: batchAction.label,
+        onClick: function onClick() {
+          batchAction.onClick();
+
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        }
+      });
+    }));
+  }; // Only display the first two batch actions, the rest are
+  // displayed inside of the ButtonMenu if there are more than
+  // 3 batch actions
+
+
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchActions, {
+    shouldShowBatchActions: totalSelected > 0,
+    totalSelected: totalSelected,
+    onCancel: function onCancel() {
+      return toggleAllRowsSelected(false);
+    }
+  }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
+      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchAction, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        renderIcon: batchAction.renderIcon,
+        onClick: function onClick() {
+          batchAction.onClick();
+
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        },
+        iconDescription: batchAction.label
+      }, batchAction.label);
+    }
+  })), renderBatchActionOverflow());
+};
+
 var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)(),
+      width = _useResizeDetector.width,
+      ref = _useResizeDetector.ref;
+
   var DatagridActions = datagridState.DatagridActions,
-      DatagridBatchActions = datagridState.DatagridBatchActions;
-  return DatagridActions || DatagridBatchActions ? /*#__PURE__*/_react.default.createElement("div", {
+      DatagridBatchActions = datagridState.DatagridBatchActions,
+      batchActions = datagridState.batchActions;
+  return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "".concat(blockClass, "__table-toolbar")
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
 };
 
 var _default = DatagridToolbar;

package/lib/components/Datagrid/useActionsColumn.js

@@ -40,19 +40,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
 
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
-              className: "".concat(blockClass, "__actions-column-content")
+              className: "".concat(blockClass, "__actions-column-contents")
             }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+            }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
+              className: "".concat(blockClass, "_actions-column"),
+              style: {
+                display: 'flex'
+              }
+            }, rowActions.map(function (action) {
+              var id = action.id,
+                  itemText = action.itemText,
+                  _onClick = action.onClick,
+                  icon = action.icon;
+              return /*#__PURE__*/_react.default.createElement("div", {
+                className: "".concat(blockClass, "__actions-column-button"),
+                key: ""
+              }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+                renderIcon: icon,
+                hasIconOnly: true,
+                light: true,
+                iconDescription: itemText,
+                kind: "ghost",
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+
+                  _onClick(id, row, e);
+                }
+              }));
+            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
               onClick: function onClick(e) {
-                return e.stopPropagation();
+                e.stopPropagation();
               }
             }, rowActions.map(function (action) {
               var id = action.id,
-                  _onClick = action.onClick,
+                  _onClick2 = action.onClick,
                   shouldHideMenuItem = action.shouldHideMenuItem,
                   shouldDisableMenuItem = action.shouldDisableMenuItem,
                   disabled = action.disabled,
@@ -71,11 +96,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 onClick: function onClick(e) {
                   e.stopPropagation();
 
-                  _onClick(id, row, e);
+                  _onClick2(id, row, e);
                 },
                 key: id
               }));
-            }))),
+            })))),
             className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
           }];
         }