@carbon/ibm-products 2.0.0-rc.0 → 2.0.0-rc.1

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 _react2 = require("@carbon/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 = _react2.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.Add : _iconsReact.OverflowMenuVertical,
+      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(_react2.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(_react2.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(_react2.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/_react.default.createElement(_react2.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(_react2.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(_react2.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))
           }];
         }

package/lib/components/Datagrid/useSelectRows.js

@@ -69,7 +69,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected") : '')
+      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
     }];
   };
 

package/lib/components/Datagrid/useStickyColumn.js

@@ -123,6 +123,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,5 +92,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "a6d3c1295dbe9918e95c1eb75d53188b7770fb8e"
+  "gitHead": "9399021bf42348f451fa0c51089d8ff60e791ab9"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -54,7 +54,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 
 .#{$block-class}.#{$block-class}--with-tabs
   .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
-  bottom: calc(#{$spacing-09} +#{$spacing-08});
+  // stylelint-disable-next-line carbon/layout-token-use
+  bottom: calc(#{$spacing-09} + #{$spacing-08});
 }
 
 .#{$block-class}

package/scss/components/Datagrid/_datagrid.scss

@@ -6,6 +6,7 @@
 //
 
 // Standard imports.
+@use '@carbon/styles/scss/spacing' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
@@ -31,6 +32,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   }
 }
 
+.#{$block-class}__datagridWrap
+  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
+  > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
+  left: $spacing-01;
+  width: 112px;
+}
+
 .#{$block-class}__datagridWrap-simple {
   display: flex;
   overflow: hidden;

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -454,11 +454,13 @@
   }
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table--selected {
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
   position: relative;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table--selected::before {
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
   left: 0;
   width: $spacing-02;
@@ -466,3 +468,41 @@
   background-color: $background-brand;
   content: '';
 }
+
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$carbon-prefix}--batch-summary__para {
+  white-space: nowrap;
+}
+
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$carbon-prefix}--batch-actions
+  .#{c4p-settings.$carbon-prefix}--batch-actions--active {
+  overflow-x: hidden;
+}
+
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu {
+  display: flex;
+  min-width: $spacing-08;
+  justify-content: center;
+  margin-right: $spacing-04;
+}
+
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu {
+  min-width: calc(#{$spacing-12} + #{$spacing-03});
+}
+
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu
+  .#{c4p-settings.$pkg-prefix}--button-menu__trigger {
+  display: flex;
+  width: 100%;
+  min-width: $spacing-09;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  .#{c4p-settings.$carbon-prefix}--btn__icon {
+    margin: 0;
+  }
+}

package/scss/components/InlineEdit/_inline-edit.scss

@@ -25,7 +25,7 @@
 @mixin input-outline($color: $focus) {
   /* stylelint-disable-next-line carbon/theme-token-use */
   outline: $spacing-01 solid $color;
-  outline-offset: calc(-1 * $spacing-01);
+  outline-offset: calc(-1 * #{$spacing-01});
 
   @media screen and (prefers-contrast) {
     outline-style: dotted;