@carbon/ibm-products 1.69.0 → 1.71.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -4
- package/css/index-full-carbon.css +17 -12
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +16 -12
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +17 -12
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +17 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/ButtonMenu/ButtonMenu.js +11 -1
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +6 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +9 -4
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +11 -4
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +18 -6
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +34 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +7 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +3 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +4 -7
- package/es/components/Datagrid/useActionsColumn.js +18 -14
- package/es/components/Datagrid/useFiltering.js +3 -6
- package/es/components/Datagrid/useInfiniteScroll.js +7 -3
- package/es/components/Datagrid/useNestedRowExpander.js +2 -2
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/useSelectAllToggle.js +11 -10
- package/es/components/Datagrid/useSelectRows.js +2 -2
- package/es/components/Datagrid/utils/filterPropsForTesting.js +150 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/es/components/FilterSummary/FilterSummary.js +19 -15
- package/es/components/InterstitialScreen/InterstitialScreen.js +8 -7
- package/es/components/Tearsheet/TearsheetShell.js +6 -4
- package/es/global/js/hooks/index.js +3 -2
- package/es/global/js/hooks/useFocus.js +72 -0
- package/es/global/js/hooks/useIsomorphicEffect.js +12 -0
- package/es/global/js/package-settings.js +0 -1
- package/lib/components/ButtonMenu/ButtonMenu.js +11 -1
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +6 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +11 -4
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +18 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -11
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +30 -7
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +8 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +7 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +34 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +3 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +4 -7
- package/lib/components/Datagrid/useActionsColumn.js +17 -13
- package/lib/components/Datagrid/useFiltering.js +1 -4
- package/lib/components/Datagrid/useInfiniteScroll.js +7 -3
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -1
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/useSelectAllToggle.js +9 -9
- package/lib/components/Datagrid/useSelectRows.js +1 -1
- package/lib/components/Datagrid/utils/filterPropsForTesting.js +159 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/lib/components/FilterSummary/FilterSummary.js +18 -14
- package/lib/components/InterstitialScreen/InterstitialScreen.js +8 -6
- package/lib/components/Tearsheet/TearsheetShell.js +6 -4
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useFocus.js +79 -0
- package/lib/global/js/hooks/useIsomorphicEffect.js +18 -0
- package/lib/global/js/package-settings.js +0 -1
- package/package.json +6 -5
- package/scss/components/Datagrid/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +10 -4
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +6 -7
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +1 -0
- package/scss/components/SidePanel/_side-panel.scss +5 -1
- package/telemetry.yml +816 -0
@@ -96,7 +96,7 @@ var stateReducer = function stateReducer(newState, action) {
|
|
96
96
|
if (rows) {
|
97
97
|
var newSelectedRowData = {};
|
98
98
|
rows.forEach(function (row) {
|
99
|
-
newSelectedRowData[getRowId(row, row.index)] = row;
|
99
|
+
newSelectedRowData[getRowId(row.original, row.index)] = row.original;
|
100
100
|
});
|
101
101
|
return _objectSpread(_objectSpread({}, newState), {}, {
|
102
102
|
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
|
@@ -115,7 +115,7 @@ var stateReducer = function stateReducer(newState, action) {
|
|
115
115
|
}
|
116
116
|
if (_isChecked) {
|
117
117
|
return _objectSpread(_objectSpread({}, newState), {}, {
|
118
|
-
selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, (0, _defineProperty2.default)({}, _getRowId(rowData, rowData.index), rowData))
|
118
|
+
selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, (0, _defineProperty2.default)({}, _getRowId(rowData.original, rowData.index), rowData.original))
|
119
119
|
});
|
120
120
|
}
|
121
121
|
if (rowData && !_isChecked) {
|
@@ -123,7 +123,7 @@ var stateReducer = function stateReducer(newState, action) {
|
|
123
123
|
var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
|
124
124
|
var _ref6 = (0, _slicedToArray2.default)(_ref5, 1),
|
125
125
|
key = _ref6[0];
|
126
|
-
return parseInt(key) !== parseInt(rowData.index);
|
126
|
+
return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
|
127
127
|
}));
|
128
128
|
return _objectSpread(_objectSpread({}, newState), {}, {
|
129
129
|
selectedRowData: dataWithRemovedRow
|
@@ -181,10 +181,7 @@ var stateReducer = function stateReducer(newState, action) {
|
|
181
181
|
var currentColumn = {};
|
182
182
|
currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
|
183
183
|
var allChangedColumns = newState.columnResizing.columnWidths;
|
184
|
-
|
185
|
-
if (isResizing) {
|
186
|
-
onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
|
187
|
-
}
|
184
|
+
onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
|
188
185
|
if (!isKeyEvent) {
|
189
186
|
if (typeof isKeyEvent === 'undefined') {
|
190
187
|
// Blur resizer input if it has focus and is not from a key event resize
|
@@ -12,7 +12,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
13
13
|
var _carbonComponentsReact = require("carbon-components-react");
|
14
14
|
var _settings = require("../../settings");
|
15
|
-
var
|
15
|
+
var _propsHelper = require("../../global/js/utils/props-helper");
|
16
|
+
var _excluded = ["id", "itemText", "onClick", "shouldHideMenuItem", "align", "icon"],
|
16
17
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
17
18
|
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; }
|
18
19
|
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; }
|
@@ -50,12 +51,14 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
50
51
|
display: 'flex'
|
51
52
|
}
|
52
53
|
}, rowActions.map(function (action, index) {
|
53
|
-
var
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
shouldHideMenuItem =
|
58
|
-
|
54
|
+
var preparedActionProps = (0, _propsHelper.prepareProps)(action, ['isDelete']);
|
55
|
+
var id = preparedActionProps.id,
|
56
|
+
itemText = preparedActionProps.itemText,
|
57
|
+
_onClick = preparedActionProps.onClick,
|
58
|
+
shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
|
59
|
+
align = preparedActionProps.align,
|
60
|
+
icon = preparedActionProps.icon,
|
61
|
+
rest = (0, _objectWithoutProperties2.default)(preparedActionProps, _excluded);
|
59
62
|
var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
|
60
63
|
if (hidden) {
|
61
64
|
return null;
|
@@ -63,13 +66,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
63
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
64
67
|
className: (0, _classnames.default)("".concat(blockClass, "__actions-column-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
|
65
68
|
key: "".concat(itemText, "__").concat(index)
|
66
|
-
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.
|
69
|
+
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
|
70
|
+
tooltipPosition: align || 'top',
|
71
|
+
kind: "ghost",
|
72
|
+
name: itemText //for test use
|
73
|
+
,
|
67
74
|
renderIcon: icon,
|
68
|
-
hasIconOnly: true,
|
69
|
-
light: true,
|
70
75
|
iconDescription: itemText,
|
71
|
-
ariaLabel: itemText,
|
72
|
-
kind: "ghost",
|
73
76
|
className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
|
74
77
|
onClick: function onClick(e) {
|
75
78
|
if (getDisabledState(row.index)) {
|
@@ -78,7 +81,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
78
81
|
}
|
79
82
|
e.stopPropagation();
|
80
83
|
_onClick(id, row, e);
|
81
|
-
}
|
84
|
+
},
|
85
|
+
hasIconOnly: true
|
82
86
|
})));
|
83
87
|
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
|
84
88
|
size: "sm",
|
@@ -9,15 +9,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
9
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
11
|
var _react = require("react");
|
12
|
-
var _settings = require("../../settings");
|
13
12
|
var _Filtering = require("./Datagrid/addons/Filtering");
|
14
13
|
var _constants = require("./Datagrid/addons/Filtering/constants");
|
15
14
|
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; }
|
16
15
|
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; }
|
17
16
|
var useFiltering = function useFiltering(hooks) {
|
18
|
-
|
19
|
-
_settings.pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
|
20
|
-
}, []);
|
17
|
+
/* istanbul ignore next */
|
21
18
|
var filterTypes = (0, _react.useMemo)(function () {
|
22
19
|
return {
|
23
20
|
date: function date(rows, id, _ref) {
|
@@ -10,7 +10,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
10
10
|
var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
|
11
11
|
var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
|
12
12
|
/**
|
13
|
-
* Copyright IBM Corp. 2020,
|
13
|
+
* Copyright IBM Corp. 2020, 2024
|
14
14
|
*
|
15
15
|
* This source code is licensed under the Apache-2.0 license found in the
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
@@ -20,14 +20,18 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
20
20
|
(0, _useParentDimensions.default)(hooks);
|
21
21
|
(0, _useResizeTable.default)(hooks);
|
22
22
|
var useInstance = function useInstance(instance) {
|
23
|
+
var _tableElement;
|
23
24
|
var isFetching = instance.isFetching,
|
24
25
|
tableHeight = instance.tableHeight,
|
25
26
|
innerListRef = instance.innerListRef,
|
26
27
|
fetchMoreData = instance.fetchMoreData,
|
27
28
|
tableId = instance.tableId,
|
28
29
|
loadMoreThreshold = instance.loadMoreThreshold;
|
29
|
-
var tableElement
|
30
|
-
|
30
|
+
var tableElement;
|
31
|
+
if (typeof document !== 'undefined') {
|
32
|
+
tableElement = document.querySelector("#".concat(tableId));
|
33
|
+
}
|
34
|
+
var totalTableHeight = tableHeight || ((_tableElement = tableElement) === null || _tableElement === void 0 ? void 0 : _tableElement.clientHeight);
|
31
35
|
var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
|
32
36
|
var emptyFetchData = function emptyFetchData() {};
|
33
37
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
@@ -29,7 +29,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
29
29
|
instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
|
30
30
|
lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
|
31
31
|
blockClass: blockClass,
|
32
|
-
activeElement: document.activeElement
|
32
|
+
activeElement: typeof document !== 'undefined' && document.activeElement
|
33
33
|
});
|
34
34
|
var visibleColumns = function visibleColumns(columns) {
|
35
35
|
var expanderColumn = {
|
@@ -36,7 +36,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
|
|
36
36
|
});
|
37
37
|
});
|
38
38
|
Object.assign(instance, {
|
39
|
-
rows: rowsWithMouseOver
|
39
|
+
rows: rowsWithMouseOver,
|
40
|
+
withMouseHover: true,
|
41
|
+
setMouseOverRowIndex: setMouseOverRowIndex
|
40
42
|
});
|
41
43
|
hooks.getRowProps.push(getRowProps);
|
42
44
|
};
|
@@ -13,16 +13,15 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
13
|
var _commonColumnIds = require("./common-column-ids");
|
14
14
|
var _DatagridSelectAllWithToggle = _interopRequireDefault(require("./Datagrid/DatagridSelectAllWithToggle"));
|
15
15
|
var _settings = require("../../settings");
|
16
|
+
var _hooks = require("../../global/js/hooks");
|
16
17
|
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); }
|
17
18
|
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; }
|
18
|
-
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
19
|
+
/**
|
20
|
+
* Copyright IBM Corp. 2021, 2024
|
21
|
+
*
|
22
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
23
|
+
* LICENSE file in the root directory of this source tree.
|
24
24
|
*/
|
25
|
-
// @flow
|
26
25
|
|
27
26
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__select-all");
|
28
27
|
var useSelectAllToggle = function useSelectAllToggle(hooks) {
|
@@ -48,11 +47,12 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
|
|
48
47
|
hooks.useInstance.push(useInstance);
|
49
48
|
};
|
50
49
|
var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
51
|
-
var _useState = (0, _react.useState)(
|
50
|
+
var _useState = (0, _react.useState)(0),
|
52
51
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
53
52
|
windowSize = _useState2[0],
|
54
53
|
setWindowSize = _useState2[1];
|
55
|
-
(0,
|
54
|
+
(0, _hooks.useIsomorphicEffect)(function () {
|
55
|
+
setWindowSize(window.innerWidth);
|
56
56
|
function updateSize() {
|
57
57
|
setWindowSize(window.innerWidth);
|
58
58
|
}
|
@@ -90,7 +90,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
90
90
|
withStickyColumn = datagridState.withStickyColumn,
|
91
91
|
dispatch = datagridState.dispatch,
|
92
92
|
getRowId = datagridState.getRowId;
|
93
|
-
var _useState = (0, _react.useState)(window.innerWidth),
|
93
|
+
var _useState = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : ''),
|
94
94
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
95
95
|
windowSize = _useState2[0],
|
96
96
|
setWindowSize = _useState2[1];
|
@@ -0,0 +1,159 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.generateDummyCheckboxes = exports.filterProps = void 0;
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
10
|
+
var _handleFilterTagLabelText = require("./handleFilterTagLabelText");
|
11
|
+
/**
|
12
|
+
* Copyright IBM Corp. 2024, 2024
|
13
|
+
*
|
14
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
16
|
+
*/
|
17
|
+
|
18
|
+
var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
|
19
|
+
return {
|
20
|
+
id: "".concat(index),
|
21
|
+
labelText: "Dummy checkbox ".concat(index + 1),
|
22
|
+
value: 'dummy-checkbox',
|
23
|
+
disabled: true
|
24
|
+
};
|
25
|
+
});
|
26
|
+
exports.generateDummyCheckboxes = generateDummyCheckboxes;
|
27
|
+
var filterProps = function filterProps() {
|
28
|
+
var _Dropdown;
|
29
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
30
|
+
_ref$includeManyCheck = _ref.includeManyCheckboxes,
|
31
|
+
includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
|
32
|
+
_ref$dropdownOnChange = _ref.dropdownOnChange,
|
33
|
+
dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
|
34
|
+
var checkboxList = [{
|
35
|
+
id: 'normal',
|
36
|
+
labelText: 'Normal',
|
37
|
+
value: 'normal'
|
38
|
+
}, {
|
39
|
+
id: 'minor-warning',
|
40
|
+
labelText: 'Minor warning',
|
41
|
+
value: 'minor-warning'
|
42
|
+
}, {
|
43
|
+
id: 'critical',
|
44
|
+
labelText: 'Critical',
|
45
|
+
value: 'critical'
|
46
|
+
}].concat((0, _toConsumableArray2.default)(includeManyCheckboxes ? generateDummyCheckboxes : []));
|
47
|
+
return {
|
48
|
+
autoHideFilters: includeManyCheckboxes ? false : true,
|
49
|
+
variation: 'panel',
|
50
|
+
panelIconDescription: 'Open filters',
|
51
|
+
sections: [{
|
52
|
+
categoryTitle: 'Category title',
|
53
|
+
hasAccordion: true,
|
54
|
+
filters: [{
|
55
|
+
filterLabel: 'Joined',
|
56
|
+
filter: {
|
57
|
+
type: 'date',
|
58
|
+
column: 'joined',
|
59
|
+
props: {
|
60
|
+
DatePicker: {
|
61
|
+
datePickerType: 'range'
|
62
|
+
},
|
63
|
+
DatePickerInput: {
|
64
|
+
start: {
|
65
|
+
id: 'date-picker-input-id-start',
|
66
|
+
placeholder: 'mm/dd/yyyy',
|
67
|
+
labelText: 'Joined start date'
|
68
|
+
},
|
69
|
+
end: {
|
70
|
+
id: 'date-picker-input-id-end',
|
71
|
+
placeholder: 'mm/dd/yyyy',
|
72
|
+
labelText: 'Joined end date'
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}, {
|
78
|
+
filterLabel: 'Status',
|
79
|
+
filter: {
|
80
|
+
type: 'dropdown',
|
81
|
+
column: 'status',
|
82
|
+
props: {
|
83
|
+
Dropdown: (_Dropdown = {
|
84
|
+
id: 'marital-status-dropdown'
|
85
|
+
}, (0, _defineProperty2.default)(_Dropdown, 'aria-label', 'Marital status dropdown'), (0, _defineProperty2.default)(_Dropdown, "items", ['relationship', 'complicated', 'single']), (0, _defineProperty2.default)(_Dropdown, "label", 'Marital status'), (0, _defineProperty2.default)(_Dropdown, "titleText", 'Marital status'), (0, _defineProperty2.default)(_Dropdown, "onChange", dropdownOnChange), _Dropdown)
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}]
|
89
|
+
}, {
|
90
|
+
categoryTitle: 'Category title',
|
91
|
+
filters: [{
|
92
|
+
filterLabel: 'Role',
|
93
|
+
filter: {
|
94
|
+
type: 'radio',
|
95
|
+
column: 'role',
|
96
|
+
props: {
|
97
|
+
FormGroup: {
|
98
|
+
legendText: 'Role'
|
99
|
+
},
|
100
|
+
RadioButtonGroup: {
|
101
|
+
orientation: 'vertical',
|
102
|
+
legend: 'Role legend',
|
103
|
+
name: 'role-radio-button-group'
|
104
|
+
},
|
105
|
+
RadioButton: [{
|
106
|
+
id: 'developer',
|
107
|
+
labelText: 'Developer',
|
108
|
+
value: 'developer'
|
109
|
+
}, {
|
110
|
+
id: 'designer',
|
111
|
+
labelText: 'Designer',
|
112
|
+
value: 'designer'
|
113
|
+
}, {
|
114
|
+
id: 'researcher',
|
115
|
+
labelText: 'Researcher',
|
116
|
+
value: 'researcher'
|
117
|
+
}]
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}, {
|
121
|
+
filterLabel: 'Visits',
|
122
|
+
filter: {
|
123
|
+
type: 'number',
|
124
|
+
column: 'visits',
|
125
|
+
props: {
|
126
|
+
NumberInput: {
|
127
|
+
min: 0,
|
128
|
+
id: 'visits-number-input',
|
129
|
+
invalidText: 'A valid value is required',
|
130
|
+
label: 'Visits',
|
131
|
+
placeholder: 'Type a number amount of visits'
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}, {
|
136
|
+
filterLabel: 'Password strength',
|
137
|
+
filter: {
|
138
|
+
type: 'checkbox',
|
139
|
+
column: 'passwordStrength',
|
140
|
+
props: {
|
141
|
+
FormGroup: {
|
142
|
+
legendText: 'Password strength'
|
143
|
+
},
|
144
|
+
Checkbox: checkboxList
|
145
|
+
}
|
146
|
+
}
|
147
|
+
}]
|
148
|
+
}],
|
149
|
+
renderLabel: function renderLabel(key, value) {
|
150
|
+
return (0, _handleFilterTagLabelText.handleFilterTagLabelText)(key, value);
|
151
|
+
},
|
152
|
+
renderDateLabel: function renderDateLabel(start, end) {
|
153
|
+
var startDateObj = new Date(start);
|
154
|
+
var endDateObj = new Date(end);
|
155
|
+
return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
|
156
|
+
}
|
157
|
+
};
|
158
|
+
};
|
159
|
+
exports.filterProps = filterProps;
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _ErrorIllustration = require("../assets/ErrorIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -26,6 +26,7 @@ var componentName = 'ErrorEmptyState';
|
|
26
26
|
var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
|
+
illustrationDescription = _ref.illustrationDescription,
|
29
30
|
illustrationTheme = _ref.illustrationTheme,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
@@ -37,9 +38,9 @@ var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
37
38
|
className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--error")),
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ErrorIllustration.ErrorIllustration, {
|
40
|
-
title: title,
|
41
41
|
theme: illustrationTheme,
|
42
|
-
size: size
|
42
|
+
size: size,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,11 @@ ErrorEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
/**
|
80
|
+
* The alt text for empty state svg images. If not provided , title will be used.
|
81
|
+
*/
|
82
|
+
illustrationDescription: _propTypes.default.string,
|
77
83
|
/**
|
78
84
|
* Empty state illustration theme variations.
|
79
85
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _NoDataIllustration = require("../assets/NoDataIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -27,6 +27,7 @@ var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
29
|
illustrationTheme = _ref.illustrationTheme,
|
30
|
+
illustrationDescription = _ref.illustrationDescription,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
32
33
|
size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
|
@@ -37,9 +38,9 @@ var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
37
38
|
className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noData")),
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
|
40
|
-
title: title,
|
41
41
|
theme: illustrationTheme,
|
42
|
-
size: size
|
42
|
+
size: size,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,10 @@ NoDataEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
* The alt text for empty state svg images.If not provided , title will be used.
|
80
|
+
*/
|
81
|
+
illustrationDescription: _propTypes.default.string,
|
77
82
|
/**
|
78
83
|
* Empty state illustration theme variations.
|
79
84
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _NoTagsIllustration = require("../assets/NoTagsIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -27,6 +27,7 @@ var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
29
|
illustrationTheme = _ref.illustrationTheme,
|
30
|
+
illustrationDescription = _ref.illustrationDescription,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
32
33
|
size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
|
@@ -37,9 +38,9 @@ var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
37
38
|
className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noTags")),
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
|
40
|
-
title: title,
|
41
41
|
theme: illustrationTheme,
|
42
|
-
size: size
|
42
|
+
size: size,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,10 @@ NoTagsEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
* The alt text for empty state svg images.If not provided , title will be used.
|
80
|
+
*/
|
81
|
+
illustrationDescription: _propTypes.default.string,
|
77
82
|
/**
|
78
83
|
* Empty state illustration theme variations.
|
79
84
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _NotFoundIllustration = require("../assets/NotFoundIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -27,6 +27,7 @@ var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref,
|
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
29
|
illustrationTheme = _ref.illustrationTheme,
|
30
|
+
illustrationDescription = _ref.illustrationDescription,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
32
33
|
size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
|
@@ -37,9 +38,9 @@ var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref,
|
|
37
38
|
className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--notFound")),
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
|
40
|
-
title: title,
|
41
41
|
theme: illustrationTheme,
|
42
|
-
size: size
|
42
|
+
size: size,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,10 @@ NotFoundEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
* The alt text for empty state svg images.If not provided , title will be used.
|
80
|
+
*/
|
81
|
+
illustrationDescription: _propTypes.default.string,
|
77
82
|
/**
|
78
83
|
* Empty state illustration theme variations.
|
79
84
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _NotificationsIllustration = require("../assets/NotificationsIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -27,6 +27,7 @@ var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_
|
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
29
|
illustrationTheme = _ref.illustrationTheme,
|
30
|
+
illustrationDescription = _ref.illustrationDescription,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
32
33
|
size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
|
@@ -38,8 +39,8 @@ var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_
|
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
|
40
41
|
size: size,
|
41
|
-
|
42
|
-
|
42
|
+
theme: illustrationTheme,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,10 @@ NotificationsEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
* The alt text for empty state svg images.If not provided , title will be used.
|
80
|
+
*/
|
81
|
+
illustrationDescription: _propTypes.default.string,
|
77
82
|
/**
|
78
83
|
* Empty state illustration theme variations.
|
79
84
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
|
|
17
17
|
var _EmptyStateContent = require("../EmptyStateContent");
|
18
18
|
var _UnauthorizedIllustration = require("../assets/UnauthorizedIllustration");
|
19
19
|
var _EmptyState = require("../EmptyState");
|
20
|
-
var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
|
20
|
+
var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
|
21
21
|
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; }
|
22
22
|
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; }
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
@@ -27,6 +27,7 @@ var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_r
|
|
27
27
|
var action = _ref.action,
|
28
28
|
className = _ref.className,
|
29
29
|
illustrationTheme = _ref.illustrationTheme,
|
30
|
+
illustrationDescription = _ref.illustrationDescription,
|
30
31
|
link = _ref.link,
|
31
32
|
_ref$size = _ref.size,
|
32
33
|
size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
|
@@ -38,8 +39,8 @@ var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_r
|
|
38
39
|
ref: ref
|
39
40
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
|
40
41
|
size: size,
|
41
|
-
|
42
|
-
|
42
|
+
theme: illustrationTheme,
|
43
|
+
alt: illustrationDescription || title
|
43
44
|
}), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
|
44
45
|
action: action,
|
45
46
|
link: link,
|
@@ -74,6 +75,10 @@ UnauthorizedEmptyState.propTypes = {
|
|
74
75
|
* Provide an optional class to be applied to the containing node.
|
75
76
|
*/
|
76
77
|
className: _propTypes.default.string,
|
78
|
+
/**
|
79
|
+
* The alt text for empty state svg images.If not provided , title will be used.
|
80
|
+
*/
|
81
|
+
illustrationDescription: _propTypes.default.string,
|
77
82
|
/**
|
78
83
|
* Empty state illustration theme variations.
|
79
84
|
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|