@carbon/ibm-products 2.21.0 → 2.22.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 (60) hide show
  1. package/README.md +8 -5
  2. package/css/index-full-carbon.css +531 -251
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +199 -177
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +243 -189
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +1 -1
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +223 -192
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +1 -1
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  23. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  24. package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
  25. package/es/components/DelimitedList/DelimitedList.js +73 -0
  26. package/es/components/DelimitedList/index.js +8 -0
  27. package/es/components/SidePanel/SidePanel.js +145 -189
  28. package/es/components/TagSet/TagSet.js +21 -5
  29. package/es/components/TagSet/TagSetOverflow.js +13 -8
  30. package/es/components/index.js +2 -1
  31. package/es/global/js/hooks/useResizeObserver.js +5 -2
  32. package/es/global/js/package-settings.js +1 -0
  33. package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  35. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  38. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  39. package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
  40. package/lib/components/DelimitedList/DelimitedList.js +78 -0
  41. package/lib/components/DelimitedList/index.js +12 -0
  42. package/lib/components/SidePanel/SidePanel.js +145 -189
  43. package/lib/components/TagSet/TagSet.js +21 -5
  44. package/lib/components/TagSet/TagSetOverflow.js +12 -7
  45. package/lib/components/index.js +8 -1
  46. package/lib/global/js/hooks/useResizeObserver.js +5 -2
  47. package/lib/global/js/package-settings.js +1 -0
  48. package/package.json +9 -8
  49. package/scss/components/Datagrid/_datagrid.scss +4 -0
  50. package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
  51. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
  52. package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
  53. package/scss/components/DelimitedList/_delimited-list.scss +27 -0
  54. package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
  55. package/scss/components/DelimitedList/_index.scss +8 -0
  56. package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
  57. package/scss/components/SidePanel/_side-panel.scss +155 -187
  58. package/scss/components/_index-with-carbon.scss +1 -0
  59. package/scss/components/_index.scss +1 -0
  60. package/telemetry.yml +790 -0
@@ -119,9 +119,9 @@ var useFilters = function useFilters(_ref2) {
119
119
  if (type === DATE && value.length > 0 && !value[1]) {
120
120
  return;
121
121
  }
122
- var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
122
+ var filterCopy = _toConsumableArray(filtersObjectArray);
123
123
  // // check if the filter already exists in the array
124
- var filter = filtersObjectArrayCopy.find(function (item) {
124
+ var filter = filterCopy.find(function (item) {
125
125
  return item.id === column;
126
126
  });
127
127
 
@@ -129,81 +129,39 @@ var useFilters = function useFilters(_ref2) {
129
129
  if (filter) {
130
130
  filter.value = value;
131
131
  } else {
132
- filtersObjectArrayCopy.push({
132
+ filterCopy.push({
133
133
  id: column,
134
134
  value: value,
135
135
  type: type
136
136
  });
137
137
  }
138
-
139
- // ATTENTION: this is where you would reset or remove individual filters from the filters array
140
- if (type === CHECKBOX) {
141
- /**
142
- When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
143
- This checks if all the checkboxes are selected = false and removes it from the array
144
- */
145
- var index = filtersObjectArrayCopy.findIndex(function (filter) {
146
- return filter.id === column;
147
- });
148
-
149
- // If all the selected state is false remove from array
150
- var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
151
- return val.selected === false;
152
- });
153
- if (shouldRemoveFromArray) {
154
- filtersObjectArrayCopy.splice(index, 1);
155
- }
156
- } else if (type === DATE) {
157
- if (value.length === 0) {
158
- /**
159
- Checks to see if the date value is an empty array, if it is that means the user wants
160
- to reset the date filter
161
- */
162
- var _index = filtersObjectArrayCopy.findIndex(function (filter) {
163
- return filter.id === column;
164
- });
165
-
166
- // Remove it from the filters array since there is nothing to filter
167
- filtersObjectArrayCopy.splice(_index, 1);
168
- }
169
- } else if (type === DROPDOWN || type === RADIO) {
170
- if (value === 'Any') {
171
- /**
172
- Checks to see if the selected value is 'Any', that means the user wants
173
- to reset specific filter
174
- */
175
- var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
176
- return filter.id === column;
177
- });
178
-
179
- // Remove it from the filters array
180
- filtersObjectArrayCopy.splice(_index2, 1);
181
- }
182
- } else if (type === NUMBER) {
183
- // If the value is empty remove it from the filtersObjectArray
184
- if (value === '') {
185
- // Find the column that uses number and displays an empty string
186
- var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
187
- return filter.id === column;
188
- });
189
-
190
- // Remove it from the filters array
191
- filtersObjectArrayCopy.splice(_index3, 1);
192
- }
138
+ var index = filterCopy.findIndex(function (_ref4) {
139
+ var id = _ref4.id;
140
+ return id === column;
141
+ });
142
+ var clearCheckbox = type === CHECKBOX && filterCopy[index].value.every(function (_ref5) {
143
+ var selected = _ref5.selected;
144
+ return selected === false;
145
+ });
146
+ var clearDate = type === DATE && value.length === 0;
147
+ var clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
148
+ var clearNum = type === NUMBER && value === '';
149
+ var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
150
+ if (shouldClear) {
151
+ filterCopy.splice(index, 1);
193
152
  }
194
- setFiltersObjectArray(filtersObjectArrayCopy);
195
-
196
- // // Automatically apply the filters if the updateMethod is instant
153
+ setFiltersObjectArray(filterCopy);
197
154
  if (updateMethod === INSTANT) {
198
- setAllFilters(filtersObjectArrayCopy);
155
+ setAllFilters(filterCopy);
199
156
  }
200
157
  };
158
+
201
159
  /** Render the individual filter component */
202
- var renderFilter = function renderFilter(_ref4) {
160
+ var renderFilter = function renderFilter(_ref6) {
203
161
  var _filtersState$column3, _filtersState$column4;
204
- var type = _ref4.type,
205
- column = _ref4.column,
206
- components = _ref4.props;
162
+ var type = _ref6.type,
163
+ column = _ref6.column,
164
+ components = _ref6.props;
207
165
  var filter;
208
166
  var isPanel = variation === PANEL;
209
167
  if (!type) {
@@ -224,8 +182,8 @@ var useFilters = function useFilters(_ref2) {
224
182
  return /*#__PURE__*/React.createElement(Checkbox, _extends({
225
183
  key: option.id
226
184
  }, option, {
227
- onChange: function onChange(_, _ref5) {
228
- var checked = _ref5.checked;
185
+ onChange: function onChange(_, _ref7) {
186
+ var checked = _ref7.checked;
229
187
  handleCheckboxChange({
230
188
  checked: checked,
231
189
  filtersState: filtersState,
@@ -316,9 +274,9 @@ var useFilters = function useFilters(_ref2) {
316
274
  labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
317
275
  value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
318
276
  }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
319
- var _ref6, _radio$id;
277
+ var _ref8, _radio$id;
320
278
  return /*#__PURE__*/React.createElement(RadioButton, _extends({
321
- key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
279
+ key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
322
280
  }, radio));
323
281
  })));
324
282
  }
@@ -327,9 +285,9 @@ var useFilters = function useFilters(_ref2) {
327
285
  filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
328
286
  selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
329
287
  items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
330
- onChange: function onChange(_ref7) {
288
+ onChange: function onChange(_ref9) {
331
289
  var _components$Dropdown$, _components$Dropdown;
332
- var selectedItem = _ref7.selectedItem;
290
+ var selectedItem = _ref9.selectedItem;
333
291
  setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
334
292
  value: selectedItem,
335
293
  type: type
@@ -37,7 +37,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
37
37
  });
38
38
  });
39
39
  Object.assign(instance, {
40
- rows: rowsWithMouseOver
40
+ rows: rowsWithMouseOver,
41
+ withMouseHover: true,
42
+ setMouseOverRowIndex: setMouseOverRowIndex
41
43
  });
42
44
  hooks.getRowProps.push(getRowProps);
43
45
  };
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
3
+ import * as stories from './DelimitedList.stories';
4
+ var DocsPage = function DocsPage() {
5
+ return /*#__PURE__*/React.createElement(StoryDocsPage, {
6
+ blocks: [{
7
+ story: stories.delimited
8
+ }, {
9
+ story: stories.notDelimited
10
+ }, {
11
+ story: stories.empty
12
+ }]
13
+ });
14
+ };
15
+ export default DocsPage;
@@ -0,0 +1,73 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["className", "delimiter", "items", "truncate"];
4
+ /**
5
+ * Copyright IBM Corp. 2024, 2024
6
+ *
7
+ * This source code is licensed under the Apache-2.0 license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+
11
+ // Import portions of React that are needed.
12
+ import React from 'react';
13
+
14
+ // Other standard imports.
15
+ import PropTypes from 'prop-types';
16
+ import cx from 'classnames';
17
+ import { getDevtoolsProps } from '../../global/js/utils/devtools';
18
+ import { pkg } from '../../settings';
19
+ var blockClass = "".concat(pkg.prefix, "--delimited-list");
20
+ var componentName = 'DelimitedList';
21
+ var defaults = {
22
+ delimiter: ', ',
23
+ items: [],
24
+ truncate: true
25
+ };
26
+
27
+ /**
28
+ * `DelimitedList` converts an array of items into a single line of
29
+ * comma-separated values.
30
+ */
31
+ export var DelimitedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
32
+ var className = _ref.className,
33
+ _ref$delimiter = _ref.delimiter,
34
+ delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
35
+ _ref$items = _ref.items,
36
+ items = _ref$items === void 0 ? defaults.items : _ref$items,
37
+ _ref$truncate = _ref.truncate,
38
+ truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
39
+ rest = _objectWithoutProperties(_ref, _excluded);
40
+ return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
41
+ className: cx(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
42
+ ref: ref
43
+ }, getDevtoolsProps(componentName)), items.length > 0 ? items.join(delimiter) : '–');
44
+ });
45
+
46
+ // Return a placeholder if not released and not enabled by feature flag
47
+ DelimitedList = pkg.checkComponentEnabled(DelimitedList, componentName);
48
+
49
+ // The display name of the component, used by React. Note that displayName
50
+ // is used in preference to relying on function.name.
51
+ DelimitedList.displayName = componentName;
52
+
53
+ // The types and DocGen commentary for the component props,
54
+ // in alphabetical order (for consistency).
55
+ // See https://www.npmjs.com/package/prop-types#usage.
56
+ DelimitedList.propTypes = {
57
+ /**
58
+ * Provide an optional class to be applied to the containing node.
59
+ */
60
+ className: PropTypes.string,
61
+ /**
62
+ * The character(s) used to separate the items.
63
+ */
64
+ delimiter: PropTypes.string,
65
+ /**
66
+ * Array of items to be listed.
67
+ */
68
+ items: PropTypes.arrayOf(PropTypes.any),
69
+ /**
70
+ * Toggle the component's ability to truncate or not.
71
+ */
72
+ truncate: PropTypes.bool
73
+ };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024, 2024
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
+ export { DelimitedList } from './DelimitedList';