@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.
- package/README.md +8 -5
- package/css/index-full-carbon.css +531 -251
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +199 -177
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +243 -189
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +223 -192
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
- package/es/components/DelimitedList/DelimitedList.js +73 -0
- package/es/components/DelimitedList/index.js +8 -0
- package/es/components/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +21 -5
- package/es/components/TagSet/TagSetOverflow.js +13 -8
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +5 -2
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
- package/lib/components/DelimitedList/DelimitedList.js +78 -0
- package/lib/components/DelimitedList/index.js +12 -0
- package/lib/components/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +21 -5
- package/lib/components/TagSet/TagSetOverflow.js +12 -7
- package/lib/components/index.js +8 -1
- package/lib/global/js/hooks/useResizeObserver.js +5 -2
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +9 -8
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
- package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
- package/scss/components/DelimitedList/_delimited-list.scss +27 -0
- package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
- package/scss/components/DelimitedList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +155 -187
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- 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
|
122
|
+
var filterCopy = _toConsumableArray(filtersObjectArray);
|
123
123
|
// // check if the filter already exists in the array
|
124
|
-
var filter =
|
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
|
-
|
132
|
+
filterCopy.push({
|
133
133
|
id: column,
|
134
134
|
value: value,
|
135
135
|
type: type
|
136
136
|
});
|
137
137
|
}
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
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(
|
195
|
-
|
196
|
-
// // Automatically apply the filters if the updateMethod is instant
|
153
|
+
setFiltersObjectArray(filterCopy);
|
197
154
|
if (updateMethod === INSTANT) {
|
198
|
-
setAllFilters(
|
155
|
+
setAllFilters(filterCopy);
|
199
156
|
}
|
200
157
|
};
|
158
|
+
|
201
159
|
/** Render the individual filter component */
|
202
|
-
var renderFilter = function renderFilter(
|
160
|
+
var renderFilter = function renderFilter(_ref6) {
|
203
161
|
var _filtersState$column3, _filtersState$column4;
|
204
|
-
var type =
|
205
|
-
column =
|
206
|
-
components =
|
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(_,
|
228
|
-
var 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
|
277
|
+
var _ref8, _radio$id;
|
320
278
|
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
321
|
-
key: (
|
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(
|
288
|
+
onChange: function onChange(_ref9) {
|
331
289
|
var _components$Dropdown$, _components$Dropdown;
|
332
|
-
var 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
|
+
};
|