@carbon/ibm-products 1.25.1 → 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/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))
           }];
         }

package/lib/components/Datagrid/useSelectRows.js

@@ -68,7 +68,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 ? 'bx--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": "1.25.1",
+  "version": "1.26.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -60,13 +60,13 @@
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
     "jest": "^28.1.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.3",
+    "jest-config-ibm-cloud-cognitive": "^0.24.4",
     "jest-environment-jsdom": "^28.1.3",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.0.5",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.0",
+    "sass": "^1.54.4",
     "yargs": "^17.5.1"
   },
   "dependencies": {
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "72a6dbc4c1456c4c8dd8778cedbb532ecf0df711"
+  "gitHead": "69eb4ba877913337300fd0dc0fd64bf6fd07a50c"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -49,6 +49,11 @@
       }
     }
   }
+
+  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+    left: $spacing-01;
+    width: 112px;
+  }
 }
 
 @include exports('datagrid') {

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

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

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

@@ -22,7 +22,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;