@carbon/ibm-products 2.0.0-rc.21 → 2.0.0-rc.23

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 (53) hide show
  1. package/css/index-full-carbon.css +4849 -2937
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +61 -43
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +117 -73
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +342 -106
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Card/CardFooter.js +2 -2
  18. package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  19. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
  21. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
  22. package/es/components/Datagrid/useActionsColumn.js +29 -1
  23. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  24. package/es/components/Datagrid/useNestedRows.js +2 -4
  25. package/es/components/Datagrid/useSelectAllToggle.js +18 -2
  26. package/es/components/Datagrid/useSelectRows.js +19 -2
  27. package/es/components/Datagrid/useStickyColumn.js +22 -5
  28. package/es/components/PageHeader/PageHeaderTitle.js +1 -0
  29. package/es/components/SidePanel/SidePanel.js +14 -5
  30. package/es/components/Tearsheet/TearsheetShell.js +6 -4
  31. package/lib/components/Card/CardFooter.js +2 -2
  32. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  33. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
  36. package/lib/components/Datagrid/useActionsColumn.js +30 -1
  37. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  38. package/lib/components/Datagrid/useNestedRows.js +2 -4
  39. package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
  40. package/lib/components/Datagrid/useSelectRows.js +26 -2
  41. package/lib/components/Datagrid/useStickyColumn.js +22 -4
  42. package/lib/components/PageHeader/PageHeaderTitle.js +1 -0
  43. package/lib/components/SidePanel/SidePanel.js +14 -5
  44. package/lib/components/Tearsheet/TearsheetShell.js +4 -2
  45. package/package.json +8 -8
  46. package/scss/components/Datagrid/styles/_datagrid.scss +25 -3
  47. package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
  48. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  49. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
  50. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  51. package/scss/components/InlineEditV1/_inline-edit-v1.scss +1 -3
  52. package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
  53. package/scss/components/Tearsheet/_tearsheet.scss +4 -5
@@ -2,6 +2,8 @@
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
  });
@@ -9,7 +11,9 @@ exports.default = void 0;
9
11
 
10
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
13
 
12
- var _react = _interopRequireDefault(require("react"));
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
13
17
 
14
18
  var _classnames = _interopRequireDefault(require("classnames"));
15
19
 
@@ -19,6 +23,10 @@ var _DatagridSelectAllWithToggle = _interopRequireDefault(require("./Datagrid/Da
19
23
 
20
24
  var _settings = require("../../settings");
21
25
 
26
+ 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); }
27
+
28
+ 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; }
29
+
22
30
  /*
23
31
  * Licensed Materials - Property of IBM
24
32
  * 5724-Q36
@@ -56,6 +64,21 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
56
64
  };
57
65
 
58
66
  var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
67
+ var _useState = (0, _react.useState)(window.innerWidth),
68
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
69
+ windowSize = _useState2[0],
70
+ setWindowSize = _useState2[1];
71
+
72
+ (0, _react.useLayoutEffect)(function () {
73
+ function updateSize() {
74
+ setWindowSize(window.innerWidth);
75
+ }
76
+
77
+ window.addEventListener('resize', updateSize);
78
+ return function () {
79
+ return window.removeEventListener('resize', updateSize);
80
+ };
81
+ }, []);
59
82
  hooks.getCellProps.push(function (props, data) {
60
83
  var _columns$;
61
84
 
@@ -68,7 +91,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
68
91
 
69
92
  if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
70
93
  return [props, {
71
- className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
94
+ className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
72
95
  }];
73
96
  }
74
97
 
@@ -2,6 +2,8 @@
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
  });
@@ -11,11 +13,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
13
 
12
14
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
15
 
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
14
18
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
19
 
16
20
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
21
 
18
- var _react = _interopRequireDefault(require("react"));
22
+ var _react = _interopRequireWildcard(require("react"));
19
23
 
20
24
  var _classnames = _interopRequireDefault(require("classnames"));
21
25
 
@@ -29,6 +33,10 @@ var _settings = require("../../settings");
29
33
 
30
34
  var _excluded = ["onChange"];
31
35
 
36
+ 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); }
37
+
38
+ 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; }
39
+
32
40
  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; }
33
41
 
34
42
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -93,6 +101,22 @@ var SelectRow = function SelectRow(datagridState) {
93
101
  onRadioSelect = datagridState.onRadioSelect,
94
102
  columns = datagridState.columns,
95
103
  withStickyColumn = datagridState.withStickyColumn;
104
+
105
+ var _useState = (0, _react.useState)(window.innerWidth),
106
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
107
+ windowSize = _useState2[0],
108
+ setWindowSize = _useState2[1];
109
+
110
+ (0, _react.useLayoutEffect)(function () {
111
+ function updateSize() {
112
+ setWindowSize(window.innerWidth);
113
+ }
114
+
115
+ window.addEventListener('resize', updateSize);
116
+ return function () {
117
+ return window.removeEventListener('resize', updateSize);
118
+ };
119
+ }, []);
96
120
  var selectDisabled = isFetching || row.getRowProps().selectDisabled;
97
121
 
98
122
  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
@@ -118,7 +142,7 @@ var SelectRow = function SelectRow(datagridState) {
118
142
  },
119
143
  id: "".concat(tableId, "-").concat(row.index),
120
144
  name: "".concat(tableId, "-").concat(row.index, "-name"),
121
- className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
145
+ className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
122
146
  ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
123
147
  ,
124
148
  disabled: selectDisabled
@@ -9,6 +9,8 @@ exports.default = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
12
14
  var _react = require("react");
13
15
 
14
16
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -29,8 +31,24 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
29
31
  var useStickyColumn = function useStickyColumn(hooks) {
30
32
  var tableBodyRef = (0, _react.useRef)();
31
33
  var stickyHeaderCellRef = (0, _react.useRef)();
32
- hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
33
- hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
34
+
35
+ var _useState = (0, _react.useState)(window.innerWidth),
36
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
37
+ windowSize = _useState2[0],
38
+ setWindowSize = _useState2[1];
39
+
40
+ (0, _react.useLayoutEffect)(function () {
41
+ function updateSize() {
42
+ setWindowSize(window.innerWidth);
43
+ }
44
+
45
+ window.addEventListener('resize', updateSize);
46
+ return function () {
47
+ return window.removeEventListener('resize', updateSize);
48
+ };
49
+ }, []);
50
+ hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
51
+ hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
34
52
  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
35
53
  hooks.getHeaderGroupProps.push(function (props) {
36
54
  return [props, {
@@ -138,7 +156,7 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
138
156
  }];
139
157
  };
140
158
 
141
- var changeProps = function changeProps(elementName, headerCellRef, props, data) {
159
+ var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
142
160
  var column = data.column || data.cell.column;
143
161
 
144
162
  if (column.sticky === 'right') {
@@ -155,7 +173,7 @@ var changeProps = function changeProps(elementName, headerCellRef, props, data)
155
173
  var _data$instance, _cx2;
156
174
 
157
175
  return [props, _objectSpread({
158
- className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows), _cx2))
176
+ className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
159
177
  }, headerCellRef && {
160
178
  ref: headerCellRef
161
179
  })];
@@ -64,6 +64,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
64
64
  }) : null, loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, {
65
65
  className: "".concat(blockClass, "__title-skeleton")
66
66
  }) : isEditable ? /*#__PURE__*/_react.default.createElement(_.InlineEdit, (0, _extends2.default)({
67
+ v1: true,
67
68
  hideLabel: true,
68
69
  value: text,
69
70
  editDescription: editDescription,
@@ -50,7 +50,7 @@ var _ActionSet = require("../ActionSet");
50
50
  var _variants = require("./motion/variants");
51
51
 
52
52
  var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
53
- _excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
53
+ _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
54
54
 
55
55
  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); }
56
56
 
@@ -459,6 +459,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
459
459
  var label = _ref5.label,
460
460
  kind = _ref5.kind,
461
461
  icon = _ref5.icon,
462
+ tooltipPosition = _ref5.tooltipPosition,
463
+ tooltipAlignment = _ref5.tooltipAlignment,
462
464
  leading = _ref5.leading,
463
465
  disabled = _ref5.disabled,
464
466
  className = _ref5.className,
@@ -470,8 +472,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
470
472
  size: "sm",
471
473
  renderIcon: icon,
472
474
  iconDescription: label,
473
- tooltipPosition: "bottom",
474
- tooltipAlignment: "center",
475
+ tooltipPosition: tooltipPosition || 'bottom',
476
+ tooltipAlignment: tooltipAlignment || 'center',
475
477
  hasIconOnly: !leading,
476
478
  disabled: disabled,
477
479
  className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-icon-only-button"), icon && !leading), (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-leading-button"), leading), _ref6)]),
@@ -555,14 +557,19 @@ SidePanel.propTypes = {
555
557
  leading: _propTypes.default.bool,
556
558
  icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
557
559
  onClick: _propTypes.default.func,
558
- kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
560
+ kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
561
+ tooltipAlignment: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
562
+ tooltipPosition: _propTypes.default.oneOf(['start', 'center', 'end'])
559
563
  })),
560
564
 
561
565
  /**
562
566
  * The primary actions to be shown in the side panel. Each action is
563
567
  * specified as an object with optional fields: 'label' to supply the button
564
568
  * label, 'kind' to select the button kind (must be 'primary', 'secondary' or
565
- * 'ghost'), 'loading' to display a loading indicator, and 'onClick' to
569
+ * 'ghost'), 'tooltipPosition' to select where the tooltip is placed around
570
+ * the button (must be 'top', 'right', 'bottom', or 'left'), 'tooltipAlignment'
571
+ * to select how the tooltip is aligned with the button (must be 'start',
572
+ * 'center', or 'end', 'loading' to display a loading indicator, and 'onClick' to
566
573
  * receive notifications when the button is clicked. Additional fields in the
567
574
  * object will be passed to the Button component, and these can include
568
575
  * 'disabled', 'ref', 'className', and any other Button props. Any other
@@ -573,6 +580,8 @@ SidePanel.propTypes = {
573
580
  */
574
581
  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
575
582
  kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
583
+ tooltipPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
584
+ tooltipAlignment: _propTypes.default.oneOf(['start', 'center', 'end']),
576
585
  label: _propTypes.default.string,
577
586
  loading: _propTypes.default.bool,
578
587
  // we duplicate this Button prop to improve the DocGen here
@@ -267,11 +267,13 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
267
267
  }, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
268
268
  className: "".concat(bc, "__right")
269
269
  }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
270
+ className: "".concat(bc, "__main"),
270
271
  alwaysRender: includeActions,
271
- className: "".concat(bc, "__main")
272
+ element: _react2.Layer
272
273
  }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
274
+ className: "".concat(bc, "__content"),
273
275
  alwaysRender: influencer && influencerPosition === 'right',
274
- className: "".concat(bc, "__content")
276
+ element: _react2.Layer
275
277
  }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
276
278
  className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
277
279
  neverRender: influencerPosition !== 'right'
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.21",
4
+ "version": "2.0.0-rc.23",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -85,14 +85,14 @@
85
85
  "react-window": "^1.8.7"
86
86
  },
87
87
  "peerDependencies": {
88
- "@carbon/grid": "^11.3.0",
89
- "@carbon/layout": "^11.3.0",
90
- "@carbon/motion": "^11.2.0",
91
- "@carbon/react": "^1.13.0",
92
- "@carbon/themes": "^11.4.0",
93
- "@carbon/type": "^11.4.0",
88
+ "@carbon/grid": "^11.12.0",
89
+ "@carbon/layout": "^11.12.0",
90
+ "@carbon/motion": "^11.10.0",
91
+ "@carbon/react": "~1.15.0",
92
+ "@carbon/themes": "^11.17.0",
93
+ "@carbon/type": "^11.16.0",
94
94
  "react": "^16.8.6 || ^17.0.1",
95
95
  "react-dom": "^16.8.6 || ^17.0.1"
96
96
  },
97
- "gitHead": "18e39051d3cdcf186d14a87665f958dd14429927"
97
+ "gitHead": "9c7b2779466691e363e1c111f7049aa52623aba9"
98
98
  }
@@ -39,6 +39,7 @@
39
39
  align-items: center;
40
40
  color: $text-primary;
41
41
  }
42
+
42
43
  .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
43
44
  position: sticky;
44
45
  z-index: 1;
@@ -62,6 +63,7 @@
62
63
  align-items: center;
63
64
  padding-top: 0;
64
65
  }
66
+
65
67
  &.#{$block-class}__checkbox-cell-sticky-left {
66
68
  position: sticky;
67
69
  left: 0;
@@ -147,6 +149,7 @@
147
149
  }
148
150
  }
149
151
  }
152
+
150
153
  .#{$block-class}__grid-container::-webkit-scrollbar-thumb {
151
154
  background-color: $text-placeholder;
152
155
  }
@@ -155,6 +158,7 @@
155
158
  width: 6px;
156
159
  background-color: $background;
157
160
  }
161
+
158
162
  .#{$block-class}__grid-container {
159
163
  display: block;
160
164
  width: 100%;
@@ -247,7 +251,9 @@
247
251
  td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
248
252
  th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
249
253
  /* stylelint-disable-next-line declaration-no-important */
250
- padding-right: $spacing-06 !important;
254
+ width: $spacing-09 !important;
255
+ /* stylelint-disable-next-line declaration-no-important */
256
+ padding-right: $spacing-05 !important;
251
257
  }
252
258
  }
253
259
 
@@ -311,6 +317,7 @@
311
317
 
312
318
  .#{$block-class}__resizableColumn:hover {
313
319
  background-color: $background-selected-hover;
320
+
314
321
  .#{$block-class}__resizer {
315
322
  border-right: $spacing-01 solid $border-strong-01;
316
323
  background-color: $background-selected-hover;
@@ -318,7 +325,7 @@
318
325
  }
319
326
 
320
327
  .#{$block-class}__head-hidden-select-all {
321
- padding-right: $spacing-08;
328
+ padding-right: $spacing-09;
322
329
  &.#{$block-class}__select-all-sticky-left {
323
330
  position: sticky;
324
331
  z-index: 1;
@@ -360,6 +367,14 @@
360
367
  width: 100% !important;
361
368
  }
362
369
 
370
+ .#{$block-class}__sticky thead {
371
+ display: flex;
372
+
373
+ tr.#{$block-class}__sticky {
374
+ width: auto;
375
+ }
376
+ }
377
+
363
378
  .#{$block-class}__displayFlex {
364
379
  position: relative;
365
380
  display: flex;
@@ -399,6 +414,10 @@
399
414
  border-bottom: 1px solid $layer-03;
400
415
  }
401
416
 
417
+ .#{$block-class}__table-container {
418
+ overflow: hidden;
419
+ }
420
+
402
421
  .#{c4p-settings.$pkg-prefix}--datagrid__table-simple {
403
422
  height: 100%;
404
423
  }
@@ -415,6 +434,7 @@
415
434
 
416
435
  .#{$block-class}__carbon-row-expanded {
417
436
  position: relative;
437
+
418
438
  &.#{$block-class}__carbon-row-expanded-hover-active::before {
419
439
  position: absolute;
420
440
  z-index: 2;
@@ -426,7 +446,7 @@
426
446
  );
427
447
  width: 1px;
428
448
  height: var(--#{$block-class}--indicator-height);
429
- border-left: 1px solid $background-brand;
449
+ border-left: 1px solid $border-subtle-selected-01;
430
450
  content: '';
431
451
  }
432
452
  }
@@ -478,6 +498,7 @@
478
498
  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
479
499
  position: relative;
480
500
  }
501
+
481
502
  .#{$block-class}
482
503
  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
483
504
  position: absolute;
@@ -522,6 +543,7 @@
522
543
  justify-content: center;
523
544
  padding: 0;
524
545
  margin: 0;
546
+
525
547
  .#{c4p-settings.$carbon-prefix}--btn__icon {
526
548
  margin: 0;
527
549
  }
@@ -409,6 +409,10 @@ $row-heights: (
409
409
  outline-color: $support-error;
410
410
  }
411
411
 
412
+ .#{variables.$block-class} .#{c4p-settings.$carbon-prefix}--text-input:focus {
413
+ background: $field-01;
414
+ }
415
+
412
416
  .#{variables.$block-class}
413
417
  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
414
418
  .#{c4p-settings.$carbon-prefix}--number
@@ -7,6 +7,7 @@
7
7
  */
8
8
 
9
9
  @use '@carbon/styles/scss/theme' as *;
10
+ @use '@carbon/styles/scss/spacing' as *;
10
11
  @use '../../../global/styles/project-settings' as c4p-settings;
11
12
  @use '@carbon/styles/scss/motion' as *;
12
13
  @use './variables' as *;
@@ -50,3 +51,21 @@
50
51
  background-color: $border-subtle;
51
52
  content: '';
52
53
  }
54
+
55
+ .#{$block-class} tr.#{$block-class}__carbon-nested-row {
56
+ td:first-child:empty,
57
+ .#{$block-class}__expandable-row-cell {
58
+ border-bottom: none;
59
+ }
60
+ }
61
+
62
+ .#{c4p-settings.$carbon-prefix}--data-table
63
+ td.#{$block-class}__expandable-row-cell {
64
+ padding-left: $spacing-03;
65
+ }
66
+
67
+ .#{$block-class}__carbon-row-expanded {
68
+ .#{$block-class}__expandable-row-cell {
69
+ border-bottom: none;
70
+ }
71
+ }
@@ -7,17 +7,21 @@
7
7
  */
8
8
 
9
9
  @use '@carbon/styles/scss/spacing' as *;
10
+ @use '@carbon/styles/scss/theme' as *;
10
11
  @use './variables';
11
12
 
12
- th.#{variables.$block-class}__select-all-toggle-on,
13
- td.#{variables.$block-class}__select-all-toggle-on {
14
- /* stylelint-disable-next-line declaration-no-important */
15
- width: 4.5rem !important;
16
- /* stylelint-disable-next-line declaration-no-important */
17
- min-width: initial !important;
18
- box-sizing: border-box;
19
- flex: 0 0 auto;
13
+ .#{variables.$block-class}__grid-container {
14
+ th.#{variables.$block-class}__select-all-toggle-on,
15
+ td.#{variables.$block-class}__select-all-toggle-on {
16
+ /* stylelint-disable-next-line declaration-no-important */
17
+ width: 4.5rem !important;
18
+ /* stylelint-disable-next-line declaration-no-important */
19
+ min-width: initial !important;
20
+ box-sizing: border-box;
21
+ flex: 0 0 auto;
22
+ }
20
23
  }
24
+
21
25
  th.#{variables.$block-class}__select-all-toggle-on {
22
26
  display: flex;
23
27
  align-items: center;
@@ -16,7 +16,7 @@
16
16
  right: 0;
17
17
  display: flex;
18
18
  align-items: center;
19
- border-left: 1px solid $layer-accent-01;
19
+ border-left: 1px solid $layer-active-02;
20
20
  }
21
21
 
22
22
  .#{variables.$block-class}__right-sticky-column-header {
@@ -31,7 +31,7 @@
31
31
  left: 0;
32
32
  display: flex;
33
33
  align-items: center;
34
- border-right: 1px solid $layer-accent-01;
34
+ border-right: 1px solid $layer-active-02;
35
35
  }
36
36
 
37
37
  .#{variables.$block-class}__left-sticky-column-header {
@@ -43,7 +43,7 @@
43
43
 
44
44
  .#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
45
45
  .#{variables.$block-class}__left-sticky-column-header.#{variables.$block-class}__left-sticky-column-header--with-extra-select-column {
46
- left: $spacing-08;
46
+ left: $spacing-09;
47
47
  }
48
48
 
49
49
  .#{variables.$block-class}__sticky-noShadow {
@@ -34,8 +34,6 @@
34
34
 
35
35
  @mixin input-button-defaults($block-class) {
36
36
  display: inline-flex;
37
- width: var(--#{$block-class}--size);
38
- max-width: var(--#{$block-class}--size);
39
37
  height: 100%;
40
38
  min-height: initial;
41
39
  max-height: var(--#{$block-class}--size);
@@ -194,7 +192,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
194
192
  right: 0;
195
193
  display: flex;
196
194
  // width: room for validation, and two buttons
197
- width: var(--#{$block-class}--toolbar-width);
195
+ // width: var(--#{$block-class}--toolbar-width);
198
196
  height: 100%;
199
197
  justify-content: space-between;
200
198
  cursor: text;
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2022, 2022
2
+ // Copyright IBM Corp. 2022, 2023
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -8,3 +8,4 @@
8
8
  // Tearsheets use the following Carbon components:
9
9
  // Button, ComposedModal, ModalHeader, ModalBody,
10
10
  @use '@carbon/react/scss/components/modal';
11
+ @use '@carbon/react/scss/layer';
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2020, 2022
2
+ // Copyright IBM Corp. 2020, 2023
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -266,6 +266,7 @@ $motion-duration: $duration-moderate-02;
266
266
  .#{$block-class}__main {
267
267
  display: flex;
268
268
  flex-direction: row;
269
+ background-color: $layer;
269
270
  grid-column: 1 / -1;
270
271
  grid-row: 1 / -1;
271
272
  }
@@ -281,9 +282,7 @@ $motion-duration: $duration-moderate-02;
281
282
  }
282
283
 
283
284
  &.#{$block-class}--wide .#{$block-class}__content {
284
- background: $background;
285
-
286
- // revert the background color overridden by #{$carbon-prefix}--modal styles
285
+ // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
287
286
  .#{$carbon-prefix}--pagination,
288
287
  .#{$carbon-prefix}--pagination__control-buttons,
289
288
  .#{$carbon-prefix}--text-input,
@@ -294,7 +293,7 @@ $motion-duration: $duration-moderate-02;
294
293
  .#{$carbon-prefix}--dropdown-list,
295
294
  .#{$carbon-prefix}--number input[type='number'],
296
295
  .#{$carbon-prefix}--date-picker__input {
297
- background-color: $field-01;
296
+ background-color: $field;
298
297
  }
299
298
 
300
299
  .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {