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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/css/index-full-carbon.css +41 -5
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +3 -3
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +41 -5
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +41 -5
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +140 -12
  18. package/es/components/Datagrid/useActionsColumn.js +31 -6
  19. package/es/components/Datagrid/useSelectRows.js +1 -1
  20. package/es/components/Datagrid/useStickyColumn.js +3 -0
  21. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +149 -10
  22. package/lib/components/Datagrid/useActionsColumn.js +31 -6
  23. package/lib/components/Datagrid/useSelectRows.js +1 -1
  24. package/lib/components/Datagrid/useStickyColumn.js +3 -0
  25. package/package.json +2 -2
  26. package/scss/components/AboutModal/_about-modal.scss +2 -1
  27. package/scss/components/Datagrid/_datagrid.scss +8 -0
  28. package/scss/components/Datagrid/styles/_datagrid.scss +42 -2
  29. package/scss/components/InlineEdit/_inline-edit.scss +1 -1
@@ -2,33 +2,172 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.default = void 0;
9
11
 
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _iconsReact = require("@carbon/icons-react");
11
19
 
12
20
  var _react2 = require("@carbon/react");
13
21
 
22
+ var _reactResizeDetector = require("react-resize-detector");
23
+
24
+ var _ButtonMenu = require("../../ButtonMenu");
25
+
14
26
  var _settings = require("../../../settings");
15
27
 
16
- /*
17
- * Licensed Materials - Property of IBM
18
- * 5724-Q36
19
- * (c) Copyright IBM Corp. 2020
20
- * US Government Users Restricted Rights - Use, duplication or disclosure
21
- * restricted by GSA ADP Schedule Contract with IBM Corp.
28
+ var _classnames = _interopRequireDefault(require("classnames"));
29
+
30
+ 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); }
31
+
32
+ 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; }
33
+
34
+ /**
35
+ * Copyright IBM Corp. 2022, 2022
36
+ *
37
+ * This source code is licensed under the Apache-2.0 license found in the
38
+ * LICENSE file in the root directory of this source tree.
22
39
  */
23
40
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
24
41
  var TableToolbar = _react2.DataTable.TableToolbar;
25
42
 
43
+ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
44
+ var _useState = (0, _react.useState)(false),
45
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
+ displayAllInMenu = _useState2[0],
47
+ setDisplayAllInMenu = _useState2[1];
48
+
49
+ var _useState3 = (0, _react.useState)(null),
50
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
51
+ initialListWidth = _useState4[0],
52
+ setInitialListWidth = _useState4[1];
53
+
54
+ var _useState5 = (0, _react.useState)(false),
55
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
56
+ receivedInitialWidth = _useState6[0],
57
+ setReceivedInitialWidth = _useState6[1];
58
+
59
+ var selectedFlatRows = datagridState.selectedFlatRows,
60
+ toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
61
+ toolbarBatchActions = datagridState.toolbarBatchActions;
62
+ var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
63
+ // used to measure when all items are put inside
64
+ // the ButtonMenu
65
+
66
+ (0, _react.useEffect)(function () {
67
+ if (totalSelected === 1 && !receivedInitialWidth) {
68
+ var batchActionListWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--action-list")).offsetWidth;
69
+ setInitialListWidth(batchActionListWidth);
70
+ setReceivedInitialWidth(true);
71
+ }
72
+ }, [totalSelected, receivedInitialWidth, ref]);
73
+ (0, _react.useEffect)(function () {
74
+ var summaryWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--batch-summary")).offsetWidth;
75
+
76
+ if (width < summaryWidth + initialListWidth + 32) {
77
+ setDisplayAllInMenu(true);
78
+ } else {
79
+ setDisplayAllInMenu(false);
80
+ }
81
+ }, [width, ref, initialListWidth]); // Render batch actions in ButtonMenu
82
+
83
+ var renderBatchActionOverflow = function renderBatchActionOverflow() {
84
+ var minWidthBeforeOverflowIcon = 380; // Do not render ButtonMenu when there are 3 or less items
85
+ // and if there is enough available space to render all the items
86
+
87
+ if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
88
+ return null;
89
+ }
90
+
91
+ return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
92
+ label: width > minWidthBeforeOverflowIcon ? 'More' : null,
93
+ renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add : _iconsReact.OverflowMenuVertical,
94
+ className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
95
+ menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
96
+ flipped: true
97
+ }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
98
+ if (index < 2) {
99
+ if (displayAllInMenu) {
100
+ return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
101
+ key: "".concat(batchAction.label, "-").concat(index),
102
+ itemText: batchAction.label,
103
+ onClick: function onClick() {
104
+ batchAction.onClick();
105
+
106
+ if (batchAction.type === 'select_all') {
107
+ toggleAllRowsSelected(true);
108
+ }
109
+ }
110
+ });
111
+ }
112
+
113
+ return null;
114
+ }
115
+
116
+ return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
117
+ key: "".concat(batchAction.label, "-").concat(index),
118
+ itemText: batchAction.label,
119
+ onClick: function onClick() {
120
+ batchAction.onClick();
121
+
122
+ if (batchAction.type === 'select_all') {
123
+ toggleAllRowsSelected(true);
124
+ }
125
+ }
126
+ });
127
+ }));
128
+ }; // Only display the first two batch actions, the rest are
129
+ // displayed inside of the ButtonMenu if there are more than
130
+ // 3 batch actions
131
+
132
+
133
+ return /*#__PURE__*/_react.default.createElement(_react2.TableBatchActions, {
134
+ shouldShowBatchActions: totalSelected > 0,
135
+ totalSelected: totalSelected,
136
+ onCancel: function onCancel() {
137
+ return toggleAllRowsSelected(false);
138
+ }
139
+ }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
140
+ if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
141
+ return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
142
+ key: "".concat(batchAction.label, "-").concat(index),
143
+ renderIcon: batchAction.renderIcon,
144
+ onClick: function onClick() {
145
+ batchAction.onClick();
146
+
147
+ if (batchAction.type === 'select_all') {
148
+ toggleAllRowsSelected(true);
149
+ }
150
+ },
151
+ iconDescription: batchAction.label
152
+ }, batchAction.label);
153
+ }
154
+ })), renderBatchActionOverflow());
155
+ };
156
+
26
157
  var DatagridToolbar = function DatagridToolbar(datagridState) {
158
+ var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)(),
159
+ width = _useResizeDetector.width,
160
+ ref = _useResizeDetector.ref;
161
+
27
162
  var DatagridActions = datagridState.DatagridActions,
28
- DatagridBatchActions = datagridState.DatagridBatchActions;
29
- return DatagridActions || DatagridBatchActions ? /*#__PURE__*/_react.default.createElement("div", {
163
+ DatagridBatchActions = datagridState.DatagridBatchActions,
164
+ batchActions = datagridState.batchActions;
165
+ return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
166
+ ref: ref,
167
+ className: "".concat(blockClass, "__table-toolbar")
168
+ }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/_react.default.createElement("div", {
30
169
  className: "".concat(blockClass, "__table-toolbar")
31
- }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
170
+ }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
32
171
  };
33
172
 
34
173
  var _default = DatagridToolbar;
@@ -40,19 +40,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
40
40
 
41
41
  return [props, {
42
42
  children: /*#__PURE__*/_react.default.createElement("div", {
43
- className: "".concat(blockClass, "__actions-column-content")
43
+ className: "".concat(blockClass, "__actions-column-contents")
44
44
  }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
45
45
  className: "".concat(blockClass, "__actions-column-loading")
46
- }), !isFetching && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
46
+ }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
47
+ className: "".concat(blockClass, "_actions-column"),
48
+ style: {
49
+ display: 'flex'
50
+ }
51
+ }, rowActions.map(function (action) {
52
+ var id = action.id,
53
+ itemText = action.itemText,
54
+ _onClick = action.onClick,
55
+ icon = action.icon;
56
+ return /*#__PURE__*/_react.default.createElement("div", {
57
+ className: "".concat(blockClass, "__actions-column-button"),
58
+ key: ""
59
+ }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
60
+ renderIcon: icon,
61
+ hasIconOnly: true,
62
+ light: true,
63
+ iconDescription: itemText,
64
+ kind: "ghost",
65
+ onClick: function onClick(e) {
66
+ e.stopPropagation();
67
+
68
+ _onClick(id, row, e);
69
+ }
70
+ }));
71
+ })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
47
72
  size: "sm",
48
73
  light: true,
49
74
  flipped: true,
50
75
  onClick: function onClick(e) {
51
- return e.stopPropagation();
76
+ e.stopPropagation();
52
77
  }
53
78
  }, rowActions.map(function (action) {
54
79
  var id = action.id,
55
- _onClick = action.onClick,
80
+ _onClick2 = action.onClick,
56
81
  shouldHideMenuItem = action.shouldHideMenuItem,
57
82
  shouldDisableMenuItem = action.shouldDisableMenuItem,
58
83
  disabled = action.disabled,
@@ -71,11 +96,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
71
96
  onClick: function onClick(e) {
72
97
  e.stopPropagation();
73
98
 
74
- _onClick(id, row, e);
99
+ _onClick2(id, row, e);
75
100
  },
76
101
  key: id
77
102
  }));
78
- }))),
103
+ })))),
79
104
  className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
80
105
  }];
81
106
  }
@@ -69,7 +69,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
69
69
  var getRowProps = function getRowProps(props, _ref) {
70
70
  var row = _ref.row;
71
71
  return [props, {
72
- className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected") : '')
72
+ className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
73
73
  }];
74
74
  };
75
75
 
@@ -123,6 +123,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
123
123
  if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
124
124
  var _temp = newHeaders[spacerIdx];
125
125
  newHeaders[spacerIdx] = newHeaders[stickyIdx];
126
+ newHeaders[spacerIdx].canResize = false;
127
+ newHeaders[spacerIdx].disableResizing = true;
128
+ delete newHeaders[spacerIdx].getResizerProps;
126
129
  newHeaders[stickyIdx] = _temp;
127
130
  }
128
131
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.0.0-rc.0",
4
+ "version": "2.0.0-rc.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -92,5 +92,5 @@
92
92
  "react": "^16.8.6 || ^17.0.1",
93
93
  "react-dom": "^16.8.6 || ^17.0.1"
94
94
  },
95
- "gitHead": "a6d3c1295dbe9918e95c1eb75d53188b7770fb8e"
95
+ "gitHead": "9399021bf42348f451fa0c51089d8ff60e791ab9"
96
96
  }
@@ -54,7 +54,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
54
54
 
55
55
  .#{$block-class}.#{$block-class}--with-tabs
56
56
  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
57
- bottom: calc(#{$spacing-09} +#{$spacing-08});
57
+ // stylelint-disable-next-line carbon/layout-token-use
58
+ bottom: calc(#{$spacing-09} + #{$spacing-08});
58
59
  }
59
60
 
60
61
  .#{$block-class}
@@ -6,6 +6,7 @@
6
6
  //
7
7
 
8
8
  // Standard imports.
9
+ @use '@carbon/styles/scss/spacing' as *;
9
10
  @use '../../global/styles/project-settings' as c4p-settings;
10
11
  @use '../../global/styles/mixins';
11
12
 
@@ -31,6 +32,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
31
32
  }
32
33
  }
33
34
 
35
+ .#{$block-class}__datagridWrap
36
+ .#{c4p-settings.$carbon-prefix}--overflow-menu-options
37
+ > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
38
+ left: $spacing-01;
39
+ width: 112px;
40
+ }
41
+
34
42
  .#{$block-class}__datagridWrap-simple {
35
43
  display: flex;
36
44
  overflow: hidden;
@@ -454,11 +454,13 @@
454
454
  }
455
455
  }
456
456
 
457
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table--selected {
457
+ .#{$block-class}
458
+ .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
458
459
  position: relative;
459
460
  }
460
461
 
461
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table--selected::before {
462
+ .#{$block-class}
463
+ .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
462
464
  position: absolute;
463
465
  left: 0;
464
466
  width: $spacing-02;
@@ -466,3 +468,41 @@
466
468
  background-color: $background-brand;
467
469
  content: '';
468
470
  }
471
+
472
+ .#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
473
+ .#{c4p-settings.$carbon-prefix}--batch-summary__para {
474
+ white-space: nowrap;
475
+ }
476
+
477
+ .#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
478
+ .#{c4p-settings.$carbon-prefix}--batch-actions
479
+ .#{c4p-settings.$carbon-prefix}--batch-actions--active {
480
+ overflow-x: hidden;
481
+ }
482
+
483
+ .#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
484
+ .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu {
485
+ display: flex;
486
+ min-width: $spacing-08;
487
+ justify-content: center;
488
+ margin-right: $spacing-04;
489
+ }
490
+
491
+ .#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
492
+ .#{c4p-settings.$pkg-prefix}--datagrid__button-menu {
493
+ min-width: calc(#{$spacing-12} + #{$spacing-03});
494
+ }
495
+
496
+ .#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
497
+ .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu
498
+ .#{c4p-settings.$pkg-prefix}--button-menu__trigger {
499
+ display: flex;
500
+ width: 100%;
501
+ min-width: $spacing-09;
502
+ justify-content: center;
503
+ padding: 0;
504
+ margin: 0;
505
+ .#{c4p-settings.$carbon-prefix}--btn__icon {
506
+ margin: 0;
507
+ }
508
+ }
@@ -25,7 +25,7 @@
25
25
  @mixin input-outline($color: $focus) {
26
26
  /* stylelint-disable-next-line carbon/theme-token-use */
27
27
  outline: $spacing-01 solid $color;
28
- outline-offset: calc(-1 * $spacing-01);
28
+ outline-offset: calc(-1 * #{$spacing-01});
29
29
 
30
30
  @media screen and (prefers-contrast) {
31
31
  outline-style: dotted;