@carbon/ibm-products 1.14.0 → 1.15.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 (64) hide show
  1. package/css/index-full-carbon.css +23 -5
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +4 -4
  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 +23 -5
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +23 -5
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +25 -19
  18. package/es/components/AddSelect/AddSelectFilter.js +5 -5
  19. package/es/components/DataSpreadsheet/DataSpreadsheet.js +174 -127
  20. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
  21. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +31 -6
  22. package/es/components/DataSpreadsheet/hooks/index.js +2 -1
  23. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +68 -0
  25. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +20 -8
  26. package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +18 -0
  27. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +121 -0
  28. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +108 -0
  29. package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +87 -0
  30. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +42 -8
  31. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +153 -15
  32. package/es/components/DataSpreadsheet/utils/selectAllCells.js +53 -0
  33. package/es/components/MultiAddSelect/MultiAddSelect.js +150 -3
  34. package/es/components/PageHeader/PageHeader.js +3 -1
  35. package/es/components/SingleAddSelect/SingleAddSelect.js +90 -4
  36. package/es/components/TagSet/TagSet.js +13 -6
  37. package/es/components/Tearsheet/TearsheetShell.js +34 -10
  38. package/es/global/js/package-settings.js +2 -1
  39. package/lib/components/AddSelect/AddSelect.js +25 -19
  40. package/lib/components/AddSelect/AddSelectFilter.js +5 -5
  41. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +178 -126
  42. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
  43. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +32 -6
  44. package/lib/components/DataSpreadsheet/hooks/index.js +9 -1
  45. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
  46. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +79 -0
  47. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +21 -8
  48. package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +27 -0
  49. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +127 -0
  50. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +118 -0
  51. package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +94 -0
  52. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +44 -8
  53. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +161 -22
  54. package/lib/components/DataSpreadsheet/utils/selectAllCells.js +60 -0
  55. package/lib/components/MultiAddSelect/MultiAddSelect.js +150 -2
  56. package/lib/components/PageHeader/PageHeader.js +3 -1
  57. package/lib/components/SingleAddSelect/SingleAddSelect.js +91 -3
  58. package/lib/components/TagSet/TagSet.js +13 -6
  59. package/lib/components/Tearsheet/TearsheetShell.js +36 -10
  60. package/lib/global/js/package-settings.js +2 -1
  61. package/package.json +11 -11
  62. package/scss/components/AboutModal/_about-modal.scss +4 -0
  63. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +22 -1
  64. package/scss/components/ExportModal/_export-modal.scss +0 -4
@@ -97,9 +97,13 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
97
97
  };
98
98
 
99
99
  useEffect(function () {
100
- var _document;
101
-
102
- setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
100
+ if (allTagsModalTargetIn) {
101
+ setAllTagsModalTarget(allTagsModalTargetIn);
102
+ } else {
103
+ if (pkg.isFeatureEnabled('default-portal-target-body')) {
104
+ setAllTagsModalTarget(document.body);
105
+ }
106
+ }
103
107
  }, [allTagsModalTargetIn]);
104
108
  useEffect(function () {
105
109
  var newSizingTags = []; // create sizing tags
@@ -237,14 +241,16 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
237
241
  }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
238
242
  className: "".concat(blockClass, "__tag-container"),
239
243
  ref: displayedArea
240
- }, displayedTags)), allTagsModalTarget && tags && displayCount < tags.length ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TagSetModal, {
244
+ }, displayedTags)), (allTagsModalTarget ? createPortal : function (children) {
245
+ return children;
246
+ })( /*#__PURE__*/React.createElement(TagSetModal, {
241
247
  allTags: tags,
242
248
  open: showAllModalOpen,
243
249
  title: allTagsModalTitle,
244
250
  onClose: handleModalClose,
245
251
  searchLabel: allTagsModalSearchLabel,
246
252
  searchPlaceholder: allTagsModalSearchPlaceholderText
247
- }), allTagsModalTarget) : null);
253
+ }), allTagsModalTarget));
248
254
  }); // Return a placeholder if not released and not enabled by feature flag
249
255
 
250
256
  TagSet = pkg.checkComponentEnabled(TagSet, componentName);
@@ -269,7 +275,8 @@ var TYPES = {
269
275
  gray: 'Gray',
270
276
  'cool-gray': 'Cool-Gray',
271
277
  'warm-gray': 'Warm-Gray',
272
- 'high-contrast': 'High-Contrast'
278
+ 'high-contrast': 'High-Contrast',
279
+ outline: 'Outline'
273
280
  };
274
281
  var tagTypes = Object.keys(TYPES);
275
282
  TagSet.types = tagTypes;
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "title", "verticalPosition"];
5
+ var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
6
6
 
7
7
  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; }
8
8
 
@@ -16,6 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
16
16
  */
17
17
  // Import portions of React that are needed.
18
18
  import React, { useEffect, useState, useRef } from 'react';
19
+ import { createPortal } from 'react-dom';
19
20
  import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
20
21
 
21
22
  import PropTypes from 'prop-types';
@@ -68,10 +69,26 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
68
69
  open = _ref.open,
69
70
  selectorPrimaryFocus = _ref.selectorPrimaryFocus,
70
71
  size = _ref.size,
72
+ portalTargetIn = _ref.portalTarget,
71
73
  title = _ref.title,
72
74
  verticalPosition = _ref.verticalPosition,
73
75
  rest = _objectWithoutProperties(_ref, _excluded);
74
76
 
77
+ // node the modal tearsheet is hosted in
78
+ var _useState = useState(null),
79
+ _useState2 = _slicedToArray(_useState, 2),
80
+ portalTarget = _useState2[0],
81
+ setPortalTarget = _useState2[1];
82
+
83
+ useEffect(function () {
84
+ if (portalTargetIn) {
85
+ setPortalTarget(portalTargetIn);
86
+ } else {
87
+ if (pkg.isFeatureEnabled('default-portal-target-body')) {
88
+ setPortalTarget(document.body);
89
+ }
90
+ }
91
+ }, [portalTargetIn]);
75
92
  var localRef = useRef();
76
93
  var modalRef = ref || localRef;
77
94
 
@@ -82,15 +99,15 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
82
99
  resizer = _useResizeDetector.ref; // Keep track of the stack depth and our position in it (1-based, 0=closed)
83
100
 
84
101
 
85
- var _useState = useState(0),
86
- _useState2 = _slicedToArray(_useState, 2),
87
- depth = _useState2[0],
88
- setDepth = _useState2[1];
89
-
90
102
  var _useState3 = useState(0),
91
103
  _useState4 = _slicedToArray(_useState3, 2),
92
- position = _useState4[0],
93
- setPosition = _useState4[1]; // Keep a record of the previous value of depth.
104
+ depth = _useState4[0],
105
+ setDepth = _useState4[1];
106
+
107
+ var _useState5 = useState(0),
108
+ _useState6 = _slicedToArray(_useState5, 2),
109
+ position = _useState6[0],
110
+ setPosition = _useState6[1]; // Keep a record of the previous value of depth.
94
111
 
95
112
 
96
113
  var prevDepth = useRef();
@@ -176,7 +193,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
176
193
  var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon; // Include an ActionSet if and only if one or more actions is given.
177
194
 
178
195
  var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
179
- return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
196
+ return (portalTarget ? createPortal : function (children) {
197
+ return children;
198
+ })( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
180
199
  "aria-label": title,
181
200
  className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
182
201
  depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), size === 'wide'), _defineProperty(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
@@ -237,7 +256,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
237
256
  })))), /*#__PURE__*/React.createElement("div", {
238
257
  className: "".concat(bc, "__resize-detector"),
239
258
  ref: resizer
240
- }));
259
+ })), portalTarget);
241
260
  } else {
242
261
  pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
243
262
  return null;
@@ -377,6 +396,11 @@ TearsheetShell.propTypes = _objectSpread({
377
396
  */
378
397
  open: PropTypes.bool,
379
398
 
399
+ /**
400
+ * portal target for the all tags modal
401
+ */
402
+ portalTarget: PropTypes.node,
403
+
380
404
  /**
381
405
  * Specifies the width of the tearsheet, 'narrow' or 'wide'.
382
406
  */
@@ -70,7 +70,8 @@ var defaults = {
70
70
  },
71
71
  // feature level flags
72
72
  feature: {
73
- 'a-new-feature': false
73
+ 'a-new-feature': false,
74
+ 'default-portal-target-body': true
74
75
  }
75
76
  };
76
77
 
@@ -43,7 +43,7 @@ var _addSelectUtils = require("./add-select-utils");
43
43
 
44
44
  var _AddSelectFilter = require("./AddSelectFilter");
45
45
 
46
- var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
46
+ var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "influencerTitle", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
47
47
 
48
48
  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); }
49
49
 
@@ -61,8 +61,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
61
61
  globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
62
62
  globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
63
63
  globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
64
+ globalSearchLabel = _ref.globalSearchLabel,
65
+ globalSearchPlaceholder = _ref.globalSearchPlaceholder,
64
66
  influencerTitle = _ref.influencerTitle,
65
- inputPlaceholder = _ref.inputPlaceholder,
66
67
  items = _ref.items,
67
68
  itemsLabel = _ref.itemsLabel,
68
69
  multi = _ref.multi,
@@ -72,13 +73,12 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
72
73
  noSelectionTitle = _ref.noSelectionTitle,
73
74
  onClose = _ref.onClose,
74
75
  onCloseButtonText = _ref.onCloseButtonText,
75
- onSearchFilter = _ref.onSearchFilter,
76
76
  onSubmit = _ref.onSubmit,
77
77
  onSubmitButtonText = _ref.onSubmitButtonText,
78
78
  open = _ref.open,
79
+ portalTarget = _ref.portalTarget,
79
80
  removeIconDescription = _ref.removeIconDescription,
80
81
  searchResultsLabel = _ref.searchResultsLabel,
81
- textInputLabel = _ref.textInputLabel,
82
82
  title = _ref.title,
83
83
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
84
84
  var blockClass = "".concat(_settings.pkg.prefix, "--add-select"); // hooks
@@ -209,11 +209,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
209
209
  var results = itemsToFilter.filter(function (item) {
210
210
  if (!searchTerm) {
211
211
  return item;
212
- } // if user provides their own filter function use that
213
-
214
-
215
- if (onSearchFilter) {
216
- return onSearchFilter(item, searchTerm);
217
212
  } // otherwise use the default label filter
218
213
 
219
214
 
@@ -282,7 +277,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
282
277
  kind: 'primary',
283
278
  onClick: submitHandler,
284
279
  disabled: multi ? multiSelection.length === 0 : !singleSelection
285
- }]
280
+ }],
281
+ portalTarget: portalTarget
286
282
  };
287
283
  var sidebarProps = {
288
284
  influencerTitle: influencerTitle,
@@ -326,8 +322,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
326
322
  var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
327
323
  className: "".concat(blockClass, "__header")
328
324
  }, /*#__PURE__*/_react.default.createElement(_AddSelectFilter.AddSelectFilter, {
329
- textInputLabel: textInputLabel,
330
- inputPlaceholder: inputPlaceholder,
325
+ inputLabel: globalSearchLabel,
326
+ inputPlaceholder: globalSearchPlaceholder,
331
327
  searchTerm: searchTerm,
332
328
  handleSearch: handleSearch,
333
329
  multi: multi,
@@ -390,21 +386,28 @@ AddSelect.propTypes = {
390
386
  globalFiltersPlaceholderText: _propTypes.default.string,
391
387
  globalFiltersPrimaryButtonText: _propTypes.default.string,
392
388
  globalFiltersSecondaryButtonText: _propTypes.default.string,
389
+ globalSearchLabel: _propTypes.default.string,
390
+ globalSearchPlaceholder: _propTypes.default.string,
393
391
  influencerTitle: _propTypes.default.string,
394
- inputPlaceholder: _propTypes.default.string,
395
392
  items: _propTypes.default.shape({
396
393
  modifiers: _propTypes.default.shape({
397
394
  label: _propTypes.default.string,
398
- options: _propTypes.default.array,
399
- property: _propTypes.default.string
395
+ options: _propTypes.default.array
400
396
  }),
401
397
  sortBy: _propTypes.default.array,
402
398
  filterBy: _propTypes.default.array,
403
399
  entries: _propTypes.default.arrayOf(_propTypes.default.shape({
400
+ avatar: _propTypes.default.shape({
401
+ alt: _propTypes.default.string,
402
+ icon: _propTypes.default.object,
403
+ src: _propTypes.default.string
404
+ }),
405
+ children: _propTypes.default.object,
406
+ icon: _propTypes.default.object,
404
407
  id: _propTypes.default.string.isRequired,
408
+ subtitle: _propTypes.default.string,
405
409
  title: _propTypes.default.string.isRequired,
406
- value: _propTypes.default.string.isRequired,
407
- children: _propTypes.default.object
410
+ value: _propTypes.default.string.isRequired
408
411
  }))
409
412
  }),
410
413
  itemsLabel: _propTypes.default.string,
@@ -415,13 +418,16 @@ AddSelect.propTypes = {
415
418
  noSelectionTitle: _propTypes.default.string,
416
419
  onClose: _propTypes.default.func,
417
420
  onCloseButtonText: _propTypes.default.string,
418
- onSearchFilter: _propTypes.default.func,
419
421
  onSubmit: _propTypes.default.func,
420
422
  onSubmitButtonText: _propTypes.default.string,
421
423
  open: _propTypes.default.bool,
424
+
425
+ /**
426
+ * portal target for the all tags modal
427
+ */
428
+ portalTarget: _propTypes.default.node,
422
429
  removeIconDescription: _propTypes.default.string,
423
430
  searchResultsLabel: _propTypes.default.string,
424
- textInputLabel: _propTypes.default.string,
425
431
  title: _propTypes.default.string
426
432
  };
427
433
  AddSelect.defaultProps = {
@@ -38,13 +38,13 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
38
38
  handleFilter = _ref.handleFilter,
39
39
  handleSearch = _ref.handleSearch,
40
40
  iconDescription = _ref.iconDescription,
41
+ inputLabel = _ref.inputLabel,
41
42
  inputPlaceholder = _ref.inputPlaceholder,
42
43
  multi = _ref.multi,
43
44
  placeholder = _ref.placeholder,
44
45
  primaryButtonText = _ref.primaryButtonText,
45
46
  searchTerm = _ref.searchTerm,
46
- secondaryButtonText = _ref.secondaryButtonText,
47
- textInputLabel = _ref.textInputLabel;
47
+ secondaryButtonText = _ref.secondaryButtonText;
48
48
 
49
49
  var _useState = (0, _react.useState)({}),
50
50
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -84,7 +84,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
84
84
  className: "".concat(blockClass, "-search")
85
85
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
86
86
  id: "temp-id",
87
- labelText: textInputLabel,
87
+ labelText: inputLabel,
88
88
  placeholder: inputPlaceholder,
89
89
  value: searchTerm,
90
90
  onChange: searchHandler
@@ -136,12 +136,12 @@ AddSelectFilter.propTypes = {
136
136
  handleFilter: _propTypes.default.func,
137
137
  handleSearch: _propTypes.default.func,
138
138
  iconDescription: _propTypes.default.string,
139
+ inputLabel: _propTypes.default.string,
139
140
  inputPlaceholder: _propTypes.default.string,
140
141
  multi: _propTypes.default.bool,
141
142
  placeholder: _propTypes.default.string,
142
143
  primaryButtonText: _propTypes.default.string,
143
144
  searchTerm: _propTypes.default.string,
144
- secondaryButtonText: _propTypes.default.string,
145
- textInputLabel: _propTypes.default.string
145
+ secondaryButtonText: _propTypes.default.string
146
146
  };
147
147
  AddSelectFilter.displayName = componentName;