@carbon/ibm-products 1.6.1 → 1.7.0

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 (47) hide show
  1. package/css/index-full-carbon.css +119 -8
  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.css +73 -7
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +2 -2
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +73 -7
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +2 -2
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionSet/ActionSet.js +1 -1
  14. package/es/components/AddSelect/AddSelect.js +11 -5
  15. package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  16. package/es/components/AddSelect/AddSelectList.js +4 -4
  17. package/es/components/AddSelect/AddSelectSidebar.js +37 -5
  18. package/es/components/ButtonMenu/ButtonMenu.js +1 -1
  19. package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
  20. package/es/components/DataSpreadsheet/generateData.js +47 -0
  21. package/es/components/DataSpreadsheet/index.js +7 -0
  22. package/es/components/InlineEdit/InlineEdit.js +19 -22
  23. package/es/components/Tearsheet/TearsheetShell.js +3 -4
  24. package/es/components/index.js +2 -1
  25. package/es/global/js/package-settings.js +2 -1
  26. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  27. package/lib/components/ActionSet/ActionSet.js +1 -1
  28. package/lib/components/AddSelect/AddSelect.js +11 -5
  29. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  30. package/lib/components/AddSelect/AddSelectList.js +4 -4
  31. package/lib/components/AddSelect/AddSelectSidebar.js +37 -4
  32. package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
  33. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
  34. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  35. package/lib/components/DataSpreadsheet/index.js +13 -0
  36. package/lib/components/InlineEdit/InlineEdit.js +19 -22
  37. package/lib/components/Tearsheet/TearsheetShell.js +2 -3
  38. package/lib/components/index.js +9 -1
  39. package/lib/global/js/package-settings.js +2 -1
  40. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  41. package/package.json +11 -9
  42. package/scss/components/AddSelect/_add-select.scss +20 -0
  43. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
  44. package/scss/components/DataSpreadsheet/_index.scss +8 -0
  45. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  46. package/scss/components/InlineEdit/_inline-edit.scss +6 -4
  47. package/scss/components/_index.scss +1 -0
@@ -0,0 +1,171 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.DataSpreadsheet = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _reactTable = require("react-table");
19
+
20
+ var _reactWindow = require("react-window");
21
+
22
+ var _propTypes = _interopRequireDefault(require("prop-types"));
23
+
24
+ var _classnames = _interopRequireDefault(require("classnames"));
25
+
26
+ var _devtools = require("../../global/js/utils/devtools");
27
+
28
+ var _settings = require("../../settings");
29
+
30
+ var _getScrollbarWidth = require("../../global/js/utils/getScrollbarWidth");
31
+
32
+ var _excluded = ["className", "columns", "data"];
33
+
34
+ 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); }
35
+
36
+ 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; }
37
+
38
+ // The block part of our conventional BEM class names (blockClass__E--M).
39
+ var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
40
+ var componentName = 'DataSpreadsheet';
41
+ /**
42
+ * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
43
+ */
44
+
45
+ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
46
+ var className = _ref.className,
47
+ columns = _ref.columns,
48
+ data = _ref.data,
49
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
50
+ var defaultColumn = (0, _react.useMemo)(function () {
51
+ return {
52
+ width: 150,
53
+ rowHeaderWidth: 64
54
+ };
55
+ }, []);
56
+ var scrollBarSize = (0, _react.useMemo)(function () {
57
+ return (0, _getScrollbarWidth.getScrollbarWidth)();
58
+ }, []);
59
+
60
+ var _useTable = (0, _reactTable.useTable)({
61
+ columns: columns,
62
+ data: data,
63
+ defaultColumn: defaultColumn
64
+ }, _reactTable.useBlockLayout),
65
+ getTableProps = _useTable.getTableProps,
66
+ getTableBodyProps = _useTable.getTableBodyProps,
67
+ headerGroups = _useTable.headerGroups,
68
+ rows = _useTable.rows,
69
+ totalColumnsWidth = _useTable.totalColumnsWidth,
70
+ prepareRow = _useTable.prepareRow;
71
+
72
+ var RenderRow = _react.default.useCallback(function (_ref2) {
73
+ var index = _ref2.index,
74
+ style = _ref2.style;
75
+ var row = rows[index];
76
+ prepareRow(row);
77
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
78
+ style: style
79
+ }), {
80
+ className: "tr",
81
+ "data-row-index": index
82
+ }), /*#__PURE__*/_react.default.createElement("button", {
83
+ type: "button",
84
+ className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th")),
85
+ style: {
86
+ width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
87
+ display: 'flex',
88
+ justifyContent: 'flex-end',
89
+ alignItems: 'center'
90
+ }
91
+ }, index + 1), row.cells.map(function (cell, index) {
92
+ return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
93
+ key: "cell_".concat(index)
94
+ }, cell.getCellProps(), {
95
+ type: "button",
96
+ className: "".concat(blockClass, "__td")
97
+ }), cell.render('Cell'));
98
+ }));
99
+ }, [prepareRow, rows, defaultColumn.rowHeaderWidth]);
100
+
101
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
102
+ className: (0, _classnames.default)(blockClass, className),
103
+ ref: ref,
104
+ role: "grid"
105
+ }), /*#__PURE__*/_react.default.createElement("div", null, headerGroups.map(function (headerGroup, index) {
106
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
107
+ key: "header_".concat(index)
108
+ }, headerGroup.getHeaderGroupProps(), {
109
+ className: "".concat(blockClass, "__tr")
110
+ }), /*#__PURE__*/_react.default.createElement("button", {
111
+ type: "button",
112
+ className: "".concat(blockClass, "__th"),
113
+ style: {
114
+ width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
115
+ }
116
+ }, "\xA0"), headerGroup.headers.map(function (column, index) {
117
+ return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
118
+ key: "column_".concat(index)
119
+ }, column.getHeaderProps(), {
120
+ type: "button",
121
+ className: "".concat(blockClass, "__th")
122
+ }), column.render('Header'));
123
+ }));
124
+ })), /*#__PURE__*/_react.default.createElement("div", getTableBodyProps(), /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
125
+ height: 400,
126
+ itemCount: rows.length,
127
+ itemSize: 36,
128
+ width: totalColumnsWidth + scrollBarSize
129
+ }, RenderRow)));
130
+ }); // Return a placeholder if not released and not enabled by feature flag
131
+
132
+
133
+ exports.DataSpreadsheet = DataSpreadsheet;
134
+ exports.DataSpreadsheet = DataSpreadsheet = _settings.pkg.checkComponentEnabled(DataSpreadsheet, componentName); // The display name of the component, used by React. Note that displayName
135
+ // is used in preference to relying on function.name.
136
+
137
+ DataSpreadsheet.displayName = componentName; // The types and DocGen commentary for the component props,
138
+ // in alphabetical order (for consistency).
139
+ // See https://www.npmjs.com/package/prop-types#usage.
140
+
141
+ DataSpreadsheet.propTypes = {
142
+ /**
143
+ * Provide an optional class to be applied to the containing node.
144
+ */
145
+ className: _propTypes.default.string,
146
+
147
+ /**
148
+ * The data that will build the column headers
149
+ */
150
+ columns: _propTypes.default.arrayOf(_propTypes.default.shape({
151
+ Header: _propTypes.default.string,
152
+ accessor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
153
+ Cell: _propTypes.default.func // optional cell formatter
154
+
155
+ })),
156
+
157
+ /**
158
+ * The spreadsheet data that will be rendered in the body of the spreadsheet component
159
+ */
160
+ data: _propTypes.default.arrayOf(_propTypes.default.shape)
161
+ /* TODO: add types and DocGen for all props. */
162
+
163
+ }; // Default values for component props. Default values are not required for
164
+ // props that are required, nor for props where the component can apply
165
+ // 'undefined' values reasonably. Default values should be provided when the
166
+ // component needs to make a choice or assumption when a prop is not supplied.
167
+
168
+ DataSpreadsheet.defaultProps = {
169
+ data: [],
170
+ columns: []
171
+ };
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.generateData = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ 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; }
13
+
14
+ 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; }
15
+
16
+ // cspell:disable
17
+ var pets = ['dog', 'cat', 'bird', 'lizard', 'frog', 'hamster', 'fish', 'rabbit', 'snake'];
18
+ var petNames = ['Bruno', 'Willow', 'Kona', 'Heidi', 'Rusty', 'Bonnie', 'Cash', 'Gucci', 'Brody', 'Emma', 'Loki', 'Angel', 'Astro', 'Sherman', 'Layla', 'Peanut', 'Grace', 'Mickey', 'Sasha', 'Finn', 'Tucker', 'Bear', 'Mocha', 'Roscoe']; // cspell:enable
19
+
20
+ var range = function range(len) {
21
+ var arr = [];
22
+
23
+ for (var i = 0; i < len; i++) {
24
+ arr.push(i);
25
+ }
26
+
27
+ return arr;
28
+ };
29
+
30
+ var newPet = function newPet() {
31
+ return {
32
+ petType: pets[Math.floor(Math.random() * pets.length)],
33
+ firstName: petNames[Math.floor(Math.random() * petNames.length)],
34
+ age: Math.floor(Math.random() * 30),
35
+ visits: Math.floor(Math.random() * 40),
36
+ health: Math.floor(Math.random() * 100)
37
+ };
38
+ };
39
+
40
+ var generateData = function generateData() {
41
+ for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
42
+ lens[_key] = arguments[_key];
43
+ }
44
+
45
+ var makeDataLevel = function makeDataLevel() {
46
+ var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
47
+ var len = lens[depth];
48
+ return range(len).map(function () {
49
+ return _objectSpread(_objectSpread({}, newPet()), {}, {
50
+ subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
51
+ });
52
+ });
53
+ };
54
+
55
+ return makeDataLevel();
56
+ };
57
+
58
+ exports.generateData = generateData;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "DataSpreadsheet", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _DataSpreadsheet.DataSpreadsheet;
10
+ }
11
+ });
12
+
13
+ var _DataSpreadsheet = require("./DataSpreadsheet");
@@ -31,7 +31,7 @@ var _carbonComponentsReact = require("carbon-components-react");
31
31
 
32
32
  var _iconsReact = require("@carbon/icons-react");
33
33
 
34
- var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
34
+ var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value", "warn", "warnText"];
35
35
 
36
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
37
 
@@ -63,7 +63,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
63
63
  onChange = _ref.onChange,
64
64
  placeholder = _ref.placeholder,
65
65
  saveDescription = _ref.saveDescription,
66
- saveDisabled = _ref.saveDisabled,
67
66
  size = _ref.size,
68
67
  value = _ref.value,
69
68
  warn = _ref.warn,
@@ -83,9 +82,9 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
83
82
  internalValue = _useState4[0],
84
83
  setInternalValue = _useState4[1];
85
84
 
86
- var showValidationText = invalid || warn;
85
+ var showValidation = invalid || warn;
87
86
  var validationText = invalidText || warnText;
88
- var validationIcon = showValidationText ? invalid ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, null) : null;
87
+ var validationIcon = showValidation ? invalid ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, null) : null;
89
88
 
90
89
  var doSetEditing = function doSetEditing(value) {
91
90
  if (value === false) {
@@ -137,6 +136,14 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
137
136
  }
138
137
  };
139
138
 
139
+ var handleInput = function handleInput() {
140
+ setInternalValue(refInput.current.innerText);
141
+
142
+ if (onChange) {
143
+ onChange(refInput.current.innerText);
144
+ }
145
+ };
146
+
140
147
  var handlePaste = function handlePaste(ev) {
141
148
  ev.preventDefault(); // Get clipboard as plain text
142
149
 
@@ -164,14 +171,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
164
171
  }
165
172
  };
166
173
 
167
- var handleInput = function handleInput() {
168
- setInternalValue(refInput.current.innerText);
169
-
170
- if (onChange) {
171
- onChange(refInput.current.innerText);
172
- }
173
- };
174
-
175
174
  var handleCancel = function handleCancel() {
176
175
  refInput.current.innerText = value;
177
176
  handleInput(value);
@@ -185,7 +184,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
185
184
 
186
185
  var handleBlur = function handleBlur(ev) {
187
186
  if (!ref.current.contains(ev.relatedTarget)) {
188
- doSetEditing(false);
189
187
  handleSave();
190
188
  }
191
189
  };
@@ -256,7 +254,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
256
254
  "aria-hidden": !editing
257
255
  }, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
258
256
  className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
259
- }, showValidationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
257
+ }, showValidation && /*#__PURE__*/_react.default.createElement("div", {
260
258
  className: "".concat(blockClass, "__validation-icon")
261
259
  }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
262
260
  className: "".concat(blockClass, "__cancel"),
@@ -272,7 +270,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
272
270
  iconDescription: saveDescription,
273
271
  onClick: handleSave,
274
272
  renderIcon: _iconsReact.Checkmark16,
275
- disabled: invalid || saveDisabled || value === internalValue
273
+ disabled: value === internalValue
276
274
  })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
277
275
  "aria-hidden": "true",
278
276
  className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--hover-visible"), editVisibleOnHoverOnly)),
@@ -285,7 +283,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
285
283
  tabIndex: -1
286
284
  }))), /*#__PURE__*/_react.default.createElement("div", {
287
285
  className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
288
- }), showValidationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
286
+ }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
289
287
  className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
290
288
  }, validationText))
291
289
  );
@@ -358,12 +356,16 @@ InlineEdit.propTypes = {
358
356
  onCancel: _propTypes.default.func,
359
357
 
360
358
  /**
361
- * method called on input event (it's a React thing onChange behaves like on input)
359
+ * method called on input event (it's a React thing onChange behaves like on input).
360
+ *
361
+ * NOTE: caller to handle invalid/warn states and associated text
362
362
  */
363
363
  onChange: _propTypes.default.func,
364
364
 
365
365
  /**
366
366
  * method called on change event
367
+ *
368
+ * NOTE: caller to handle invalid/warn states and associated text
367
369
  */
368
370
  onSave: _propTypes.default.func,
369
371
 
@@ -377,11 +379,6 @@ InlineEdit.propTypes = {
377
379
  */
378
380
  saveDescription: _propTypes.default.string.isRequired,
379
381
 
380
- /**
381
- * disabled state of the save button
382
- */
383
- saveDisabled: _propTypes.default.bool,
384
-
385
382
  /**
386
383
  * vertical size of control
387
384
  */
@@ -146,10 +146,9 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
146
146
  setTimeout(function () {
147
147
  return element.focus();
148
148
  }, 1);
149
- }; // Hook called whenever the tearsheet mounts, unmounts, or 'open' changes.
149
+ };
150
150
 
151
-
152
- (0, _react.useLayoutEffect)(function () {
151
+ (0, _react.useEffect)(function () {
153
152
  var notify = function notify() {
154
153
  return stack.all.forEach(function (handler) {
155
154
  handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
@@ -87,6 +87,12 @@ Object.defineProperty(exports, "CreateTearsheetStep", {
87
87
  return _CreateTearsheet.CreateTearsheetStep;
88
88
  }
89
89
  });
90
+ Object.defineProperty(exports, "DataSpreadsheet", {
91
+ enumerable: true,
92
+ get: function get() {
93
+ return _DataSpreadsheet.DataSpreadsheet;
94
+ }
95
+ });
90
96
  Object.defineProperty(exports, "EditSidePanel", {
91
97
  enumerable: true,
92
98
  get: function get() {
@@ -364,4 +370,6 @@ var _OptionsTile = require("./OptionsTile");
364
370
 
365
371
  var _CancelableTextEdit = require("./CancelableTextEdit");
366
372
 
367
- var _InlineEdit = require("./InlineEdit");
373
+ var _InlineEdit = require("./InlineEdit");
374
+
375
+ var _DataSpreadsheet = require("./DataSpreadsheet");
@@ -67,7 +67,8 @@ var defaults = {
67
67
  EditSidePanel: false,
68
68
  OptionsTile: false,
69
69
  CancelableTextEdit: false,
70
- InlineEdit: false
70
+ InlineEdit: false,
71
+ DataSpreadsheet: false
71
72
  /* new component flags here - comment used by generate CLI */
72
73
 
73
74
  },
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getScrollbarWidth = void 0;
7
+
8
+ /**
9
+ * Copyright IBM Corp. 2022, 2022
10
+ *
11
+ * This source code is licensed under the Apache-2.0 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ */
14
+ var getScrollbarWidth = function getScrollbarWidth() {
15
+ var scrollDiv = document.createElement('div');
16
+ scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
17
+ document.body.appendChild(scrollDiv);
18
+ var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
19
+ document.body.removeChild(scrollDiv);
20
+ return scrollbarWidth;
21
+ };
22
+
23
+ exports.getScrollbarWidth = getScrollbarWidth;
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": "1.6.1",
4
+ "version": "1.7.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -70,21 +70,23 @@
70
70
  "dependencies": {
71
71
  "@babel/runtime": "^7.17.2",
72
72
  "@carbon/telemetry": "^0.0.0-alpha.6",
73
- "react-resize-detector": "^7.0.0"
73
+ "react-resize-detector": "^7.0.0",
74
+ "react-table": "^7.7.0",
75
+ "react-window": "^1.8.6"
74
76
  },
75
77
  "peerDependencies": {
76
- "@carbon/colors": "^10.35.0",
77
- "@carbon/icons-react": "^10.45.0",
78
+ "@carbon/colors": "^10.36.0",
79
+ "@carbon/icons-react": "^10.46.0",
78
80
  "@carbon/import-once": "^10.5.0",
79
- "@carbon/layout": "^10.35.0",
80
- "@carbon/motion": "^10.27.0",
81
+ "@carbon/layout": "^10.36.0",
82
+ "@carbon/motion": "^10.28.0",
81
83
  "@carbon/themes": "^10.50.0",
82
84
  "@carbon/type": "^10.40.0",
83
- "carbon-components": "^10.52.0",
84
- "carbon-components-react": "^7.52.0",
85
+ "carbon-components": "^10.53.0",
86
+ "carbon-components-react": "^7.53.0",
85
87
  "carbon-icons": "^7.0.7",
86
88
  "react": "^16.8.6 || ^17.0.1",
87
89
  "react-dom": "^16.8.6 || ^17.0.1"
88
90
  },
89
- "gitHead": "86c37c0c58a654ada45a703c5524237e9abb2664"
91
+ "gitHead": "f4a8ee412f5ddb54722b47478e35d469f49ac411"
90
92
  }
@@ -79,6 +79,16 @@
79
79
  margin-bottom: $spacing-03;
80
80
  }
81
81
 
82
+ .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
83
+ background: $disabled-02;
84
+ }
85
+
86
+ .#{$block-class} .#{$block-class}__sidebar-accordion-title {
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: space-between;
90
+ }
91
+
82
92
  // overrides
83
93
 
84
94
  // the influencer sidebar needs to be even with the buttons
@@ -111,6 +121,16 @@
111
121
  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
112
122
  cursor: pointer;
113
123
  }
124
+
125
+ .#{$carbon-prefix}--accordion__item {
126
+ &:hover .#{$block-class}__sidebar-accordion-title button {
127
+ opacity: 1;
128
+ }
129
+
130
+ .#{$block-class}__sidebar-accordion-title button {
131
+ opacity: 0;
132
+ }
133
+ }
114
134
  }
115
135
 
116
136
  @include exports('add-select') {
@@ -0,0 +1,79 @@
1
+ //
2
+ // Copyright IBM Corp. 2022, 2022
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ // Standard imports.
9
+ @import '../../global/styles/project-settings';
10
+ @import '../../global/styles/mixins';
11
+
12
+ // Define all component styles in a mixin which is then exported using
13
+ // the Carbon import-once mechanism.
14
+ @mixin set-header-borders {
15
+ border-right: 1px solid $text-03;
16
+ border-bottom: 1px solid $text-03;
17
+ }
18
+ @mixin set-body-borders {
19
+ border-right: 1px solid $ui-03;
20
+ border-bottom: 1px solid $ui-03;
21
+ }
22
+ @mixin data-spreadsheet {
23
+ // The block part of our conventional BEM class names (blockClass__E--M).
24
+ $block-class: #{$pkg-prefix}--data-spreadsheet;
25
+
26
+ .#{$block-class} {
27
+ display: inline-block;
28
+ border-spacing: 0;
29
+ // border: 1px solid black;
30
+
31
+ button.#{$block-class}__td {
32
+ margin: 0;
33
+ background-color: transparent;
34
+ }
35
+ .#{$block-class}__tr {
36
+ :last-child {
37
+ .td {
38
+ border-bottom: 0;
39
+ }
40
+ }
41
+ }
42
+
43
+ .#{$block-class}__th,
44
+ .#{$block-class}__td {
45
+ height: 2.25rem; // update to be controlled by cellSize prop later
46
+ padding: 0 $spacing-03;
47
+ border: 0;
48
+ margin: 0;
49
+ color: $text-01;
50
+ }
51
+ .#{$block-class}__th:last-child,
52
+ .#{$block-class}__td:last-child {
53
+ border-right: 1px solid $text-03;
54
+ }
55
+ .#{$block-class}__th,
56
+ button.#{$block-class}__td-th {
57
+ @include set-header-borders();
58
+
59
+ background-color: $ui-01;
60
+ cursor: pointer;
61
+ }
62
+ .#{$block-class}__td {
63
+ @include set-body-borders();
64
+
65
+ cursor: cell;
66
+ text-align: left;
67
+ }
68
+ .#{$block-class}__th {
69
+ @include carbon--type-style('productive-heading-01');
70
+
71
+ color: $text-01;
72
+ text-align: left;
73
+ }
74
+ }
75
+ }
76
+
77
+ @include exports('data-spreadsheet') {
78
+ @include data-spreadsheet;
79
+ }
@@ -0,0 +1,8 @@
1
+ //
2
+ // Copyright IBM Corp. 2022, 2022
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @import './data-spreadsheet';
@@ -0,0 +1,6 @@
1
+ //
2
+ // Copyright IBM Corp. 2022, 2022
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
@@ -89,6 +89,7 @@
89
89
  transition: background-color $duration--fast-01 motion(entrance, productive),
90
90
  box-shadow $duration--fast-01 motion(entrance, productive),
91
91
  border-color $duration--fast-01 motion(entrance, productive);
92
+ vertical-align: middle; // mis-aligned items cause height to grow beyond setting.
92
93
 
93
94
  white-space: nowrap;
94
95
 
@@ -102,16 +103,17 @@
102
103
  --#{$block-class}--icon-size: #{$spacing-05};
103
104
  }
104
105
 
106
+ &.#{$block-class}--invalid {
107
+ // editing takes precedence over invalid
108
+ @include input-outline($support-01);
109
+ }
110
+
105
111
  &.#{$block-class}--editing {
106
112
  @include input-outline($focus);
107
113
 
108
114
  background-color: $ui-01;
109
115
  }
110
116
 
111
- .#{$block-class}--invalid {
112
- @include input-outline($support-01);
113
- }
114
-
115
117
  .#{$block-class}__input {
116
118
  display: inline-block;
117
119
  overflow: hidden;
@@ -45,3 +45,4 @@
45
45
  @import './OptionsTile/index';
46
46
  @import './CancelableTextEdit/index';
47
47
  @import './InlineEdit/index';
48
+ @import './DataSpreadsheet/index';