@carbon/ibm-products 2.1.0 → 2.1.2
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +215 -57
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +58 -10
- 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 +91 -29
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +113 -27
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +1 -3
- package/es/components/ActionBar/ActionBar.js +2 -6
- package/es/components/AddSelect/AddSelectFormControl.js +6 -6
- package/es/components/AddSelect/AddSelectRow.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/es/components/ButtonMenu/ButtonMenu.js +4 -4
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +5 -11
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
- package/es/components/Datagrid/useStickyColumn.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +6 -14
- package/es/components/ImportModal/ImportModal.js +13 -6
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/es/components/PageHeader/PageHeader.js +2 -6
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/SidePanel/SidePanel.js +1 -3
- package/es/components/TagSet/TagSet.js +4 -7
- package/es/components/Tearsheet/TearsheetShell.js +4 -5
- package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/es/global/js/hooks/useResizeObserver.js +14 -28
- package/es/global/js/utils/story-helper.js +1 -1
- package/lib/components/AboutModal/AboutModal.js +1 -3
- package/lib/components/ActionBar/ActionBar.js +2 -6
- package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
- package/lib/components/AddSelect/AddSelectRow.js +15 -5
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +4 -10
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
- package/lib/components/Datagrid/useStickyColumn.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +5 -13
- package/lib/components/ImportModal/ImportModal.js +13 -6
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/lib/components/PageHeader/PageHeader.js +2 -6
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/SidePanel/SidePanel.js +1 -3
- package/lib/components/TagSet/TagSet.js +4 -7
- package/lib/components/Tearsheet/TearsheetShell.js +4 -5
- package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/lib/global/js/hooks/useResizeObserver.js +13 -27
- package/lib/global/js/utils/story-helper.js +1 -1
- package/package.json +17 -17
- package/scss/components/AddSelect/_add-select.scss +4 -0
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
- package/scss/components/ButtonMenu/_button-menu.scss +32 -1
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/Datagrid/_datagrid.scss +4 -2
- package/scss/components/Datagrid/_storybook-styles.scss +15 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +12 -13
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/HTTPErrors/_storybook-styles.scss +16 -2
- package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -4
- package/scss/components/PageHeader/_page-header.scss +0 -1
- package/scss/components/PageHeader/_storybook-styles.scss +42 -14
- package/scss/components/SidePanel/_side-panel.scss +0 -2
- package/scss/components/Tearsheet/_tearsheet.scss +7 -6
- package/scss/components/WebTerminal/_storybook-styles.scss +16 -1
- package/scss/global/styles/_display-box.scss +1 -0
@@ -82,7 +82,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
82
82
|
return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
83
83
|
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
84
84
|
role: withInlineEdit && 'grid',
|
85
|
-
tabIndex: withInlineEdit
|
85
|
+
tabIndex: withInlineEdit ? 0 : -1,
|
86
86
|
onKeyDown: withInlineEdit ? function (event) {
|
87
87
|
return handleGridKeyPress({
|
88
88
|
event: event,
|
@@ -50,9 +50,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
50
50
|
var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
|
51
51
|
gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
|
52
52
|
};
|
53
|
-
useResizeObserver(gridRef,
|
54
|
-
callback: handleVirtualGridResize
|
55
|
-
});
|
53
|
+
useResizeObserver(gridRef, handleVirtualGridResize);
|
56
54
|
var syncScroll = function syncScroll(e) {
|
57
55
|
var virtualBody = e.target;
|
58
56
|
document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
|
@@ -20,7 +20,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
|
|
20
20
|
rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
|
21
21
|
return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
|
22
22
|
isOpen: isTearsheetOpen,
|
23
|
-
isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
|
23
|
+
isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
|
24
24
|
setIsTearsheetOpen: setIsTearsheetOpen,
|
25
25
|
columnDefinitions: instance.allColumns,
|
26
26
|
originalColumnDefinitions: instance.columns,
|
@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
9
9
|
*/
|
10
10
|
|
11
11
|
import { Filter } from '@carbon/react/icons';
|
12
|
-
import {
|
12
|
+
import { IconButton, usePrefix } from '@carbon/react';
|
13
13
|
import cx from 'classnames';
|
14
14
|
import PropTypes from 'prop-types';
|
15
15
|
import React, { useRef, useState, useEffect } from 'react';
|
@@ -153,20 +153,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
153
153
|
}, [reactTableFiltersState, lastAppliedFilters]);
|
154
154
|
return /*#__PURE__*/React.createElement("div", {
|
155
155
|
className: "".concat(componentClass, "__container")
|
156
|
-
}, /*#__PURE__*/React.createElement(
|
156
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
157
|
+
label: flyoutIconDescription,
|
157
158
|
kind: "ghost",
|
158
|
-
|
159
|
-
tooltipPosition: "bottom",
|
160
|
-
renderIcon: function renderIcon() {
|
161
|
-
return /*#__PURE__*/React.createElement(Filter, {
|
162
|
-
size: 16
|
163
|
-
});
|
164
|
-
},
|
165
|
-
iconDescription: flyoutIconDescription,
|
159
|
+
align: "bottom",
|
166
160
|
onClick: open ? closeFlyout : openFlyout,
|
167
161
|
className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
|
168
162
|
disabled: data.length === 0
|
169
|
-
}), /*#__PURE__*/React.createElement("div", {
|
163
|
+
}, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
|
170
164
|
ref: filterFlyoutRef,
|
171
165
|
className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
|
172
166
|
}, /*#__PURE__*/React.createElement("div", {
|
@@ -72,6 +72,23 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
72
72
|
var dropdownRef = useRef();
|
73
73
|
var datePickerRef = useRef();
|
74
74
|
var outerButtonElement = useRef();
|
75
|
+
var rowSize = instance.rowSize,
|
76
|
+
onDataUpdate = instance.onDataUpdate;
|
77
|
+
|
78
|
+
// Saves the new cell data, onDataUpdate is a required function to be
|
79
|
+
// passed to useDatagrid when using useInlineEdit
|
80
|
+
var saveCellData = useCallback(function (newValue) {
|
81
|
+
var columnId = cell.column.id;
|
82
|
+
var rowIndex = cell.row.index;
|
83
|
+
onDataUpdate(function (prev) {
|
84
|
+
return prev.map(function (row, index) {
|
85
|
+
if (index === rowIndex) {
|
86
|
+
return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, newValue));
|
87
|
+
}
|
88
|
+
return row;
|
89
|
+
});
|
90
|
+
});
|
91
|
+
}, [cell, onDataUpdate]);
|
75
92
|
useEffect(function () {
|
76
93
|
setInitialValue(value);
|
77
94
|
var columnId = cell.column.id;
|
@@ -145,8 +162,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
145
162
|
}, 1);
|
146
163
|
}
|
147
164
|
};
|
148
|
-
var rowSize = instance.rowSize,
|
149
|
-
onDataUpdate = instance.onDataUpdate;
|
150
165
|
|
151
166
|
// Auto focus text input when entering edit mode
|
152
167
|
useEffect(function () {
|
@@ -164,21 +179,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
164
179
|
useEffect(function () {
|
165
180
|
setCellValue(value);
|
166
181
|
}, [value]);
|
167
|
-
|
168
|
-
// Saves the new cell data, onDataUpdate is a required function to be
|
169
|
-
// passed to useDatagrid when using useInlineEdit
|
170
|
-
var saveCellData = useCallback(function (newValue) {
|
171
|
-
var columnId = cell.column.id;
|
172
|
-
var rowIndex = cell.row.index;
|
173
|
-
onDataUpdate(function (prev) {
|
174
|
-
return prev.map(function (row, index) {
|
175
|
-
if (index === rowIndex) {
|
176
|
-
return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, newValue));
|
177
|
-
}
|
178
|
-
return row;
|
179
|
-
});
|
180
|
-
});
|
181
|
-
}, [cell, onDataUpdate]);
|
182
182
|
var sendFocusBackToGrid = function sendFocusBackToGrid() {
|
183
183
|
// Allows the onKeyDown listener to go back to the entire grid area
|
184
184
|
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
@@ -21,10 +21,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
|
|
21
21
|
var useStickyColumn = function useStickyColumn(hooks) {
|
22
22
|
var tableBodyRef = useRef();
|
23
23
|
var stickyHeaderCellRef = useRef();
|
24
|
-
var _useState = useState(
|
24
|
+
var _useState = useState(null),
|
25
25
|
_useState2 = _slicedToArray(_useState, 2),
|
26
26
|
windowSize = _useState2[0],
|
27
27
|
setWindowSize = _useState2[1];
|
28
|
+
useEffect(function () {
|
29
|
+
setWindowSize(window.innerWidth);
|
30
|
+
}, []);
|
28
31
|
useLayoutEffect(function () {
|
29
32
|
function updateSize() {
|
30
33
|
setWindowSize(window.innerWidth);
|
@@ -53,9 +56,13 @@ var useStickyColumn = function useStickyColumn(hooks) {
|
|
53
56
|
headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
|
54
57
|
}
|
55
58
|
var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
|
56
|
-
window
|
59
|
+
if (typeof window !== 'undefined') {
|
60
|
+
window.addEventListener('resize', boundListener);
|
61
|
+
}
|
57
62
|
return function () {
|
58
|
-
window
|
63
|
+
if (typeof window !== 'undefined') {
|
64
|
+
window.removeEventListener('resize', boundListener);
|
65
|
+
}
|
59
66
|
};
|
60
67
|
}, [instance.rows, instance.isFetching]);
|
61
68
|
useEffect(function () {
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
3
2
|
/**
|
4
3
|
* Copyright IBM Corp. 2020, 2022
|
5
4
|
*
|
@@ -8,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
8
7
|
*/
|
9
8
|
|
10
9
|
import React, { useLayoutEffect, useState, useContext } from 'react';
|
11
|
-
import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
|
10
|
+
import { TableToolbarContent, TableToolbarSearch, Button, IconButton, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
|
12
11
|
import { Download, Add, Restart, ChevronDown, Filter } from '@carbon/react/icons';
|
13
12
|
import { action } from '@storybook/addon-actions';
|
14
13
|
import { pkg } from '../../../settings';
|
@@ -45,25 +44,18 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
45
44
|
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
|
46
45
|
};
|
47
46
|
var renderFilterPanelButton = function renderFilterPanelButton() {
|
48
|
-
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(
|
47
|
+
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(IconButton, {
|
49
48
|
kind: "ghost",
|
50
|
-
|
51
|
-
|
52
|
-
renderIcon: function renderIcon(props) {
|
53
|
-
return /*#__PURE__*/React.createElement(Filter, _extends({
|
54
|
-
size: 16
|
55
|
-
}, props));
|
56
|
-
},
|
57
|
-
iconDescription: filterProps.panelIconDescription,
|
49
|
+
align: "bottom",
|
50
|
+
label: filterProps.panelIconDescription,
|
58
51
|
className: "".concat(blockClass, "-filter-panel-open-button"),
|
59
52
|
onClick: function onClick() {
|
60
53
|
return setPanelOpen(function (open) {
|
61
54
|
return !open;
|
62
55
|
});
|
63
56
|
},
|
64
|
-
disabled: data.length === 0
|
65
|
-
|
66
|
-
});
|
57
|
+
disabled: data.length === 0
|
58
|
+
}, /*#__PURE__*/React.createElement(Filter, null));
|
67
59
|
};
|
68
60
|
var _useState = useState(false),
|
69
61
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -179,6 +179,13 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
179
179
|
var inputHandler = function inputHandler(evt) {
|
180
180
|
setImportUrl(evt.target.value);
|
181
181
|
};
|
182
|
+
var onCloseHandler = function onCloseHandler() {
|
183
|
+
setFiles([]);
|
184
|
+
setImportUrl('');
|
185
|
+
if (onClose) {
|
186
|
+
onClose();
|
187
|
+
}
|
188
|
+
};
|
182
189
|
var numberOfFiles = files.length;
|
183
190
|
var numberOfValidFiles = files.filter(function (f) {
|
184
191
|
return !f.invalid;
|
@@ -190,13 +197,13 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
190
197
|
var blockClass = "".concat(pkg.prefix, "--import-modal");
|
191
198
|
return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, _objectSpread({
|
192
199
|
open: open,
|
193
|
-
ref: ref
|
194
|
-
onClose: onClose
|
200
|
+
ref: ref
|
195
201
|
}, getDevtoolsProps(componentName)), {
|
196
202
|
"aria-label": title,
|
197
203
|
className: cx(blockClass, className),
|
198
204
|
size: "sm",
|
199
|
-
preventCloseOnClickOutside: true
|
205
|
+
preventCloseOnClickOutside: true,
|
206
|
+
onClose: onCloseHandler
|
200
207
|
}), /*#__PURE__*/React.createElement(ModalHeader, {
|
201
208
|
className: "".concat(blockClass, "__header"),
|
202
209
|
title: title
|
@@ -259,7 +266,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
259
266
|
}, /*#__PURE__*/React.createElement(Button, {
|
260
267
|
type: "button",
|
261
268
|
kind: "secondary",
|
262
|
-
onClick:
|
269
|
+
onClick: onCloseHandler
|
263
270
|
}, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
|
264
271
|
type: "submit",
|
265
272
|
kind: "primary",
|
@@ -362,11 +369,11 @@ ImportModal.propTypes = {
|
|
362
369
|
/**
|
363
370
|
* Specify a handler for "submitting" modal. Access the imported file via `file => {}`
|
364
371
|
*/
|
365
|
-
onRequestSubmit: PropTypes.func,
|
372
|
+
onRequestSubmit: PropTypes.func.isRequired,
|
366
373
|
/**
|
367
374
|
* Specify whether the Modal is currently open
|
368
375
|
*/
|
369
|
-
open: PropTypes.bool,
|
376
|
+
open: PropTypes.bool.isRequired,
|
370
377
|
/**
|
371
378
|
* Specify the text for the primary button
|
372
379
|
*/
|
@@ -15,34 +15,19 @@ var UnreadNotificationBell = function UnreadNotificationBell() {
|
|
15
15
|
xmlns: "http://www.w3.org/2000/svg",
|
16
16
|
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
17
17
|
}, /*#__PURE__*/React.createElement("title", null, "Unread notification bell"), /*#__PURE__*/React.createElement("g", {
|
18
|
-
id: "Page-1",
|
19
|
-
stroke: "none",
|
20
|
-
strokeWidth: "1",
|
21
|
-
fill: "none",
|
22
|
-
fillRule: "evenodd"
|
23
|
-
}, /*#__PURE__*/React.createElement("g", {
|
24
18
|
id: "Group",
|
25
19
|
transform: "translate(-1.000000, 0.000000)"
|
26
|
-
}, /*#__PURE__*/React.createElement("g", {
|
27
|
-
id: "notification"
|
28
20
|
}, /*#__PURE__*/React.createElement("path", {
|
29
21
|
d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
|
30
22
|
id: "Shape",
|
31
|
-
fill: "#FFFFFF",
|
32
23
|
fillRule: "nonzero"
|
33
|
-
}), /*#__PURE__*/React.createElement("
|
34
|
-
id: "_Transparent_Rectangle_",
|
35
|
-
x: "0",
|
36
|
-
y: "0",
|
37
|
-
width: "20",
|
38
|
-
height: "20"
|
39
|
-
})), /*#__PURE__*/React.createElement("circle", {
|
24
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
40
25
|
id: "Oval",
|
41
26
|
stroke: "#161616",
|
42
27
|
fill: "#DA1E28",
|
43
28
|
cx: "15",
|
44
29
|
cy: "4.375",
|
45
30
|
r: "2.5"
|
46
|
-
})))
|
31
|
+
})));
|
47
32
|
};
|
48
33
|
export { UnreadNotificationBell };
|
@@ -314,12 +314,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
314
314
|
utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
315
315
|
}
|
316
316
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
317
|
-
useResizeObserver(sizingContainerRef,
|
318
|
-
|
319
|
-
});
|
320
|
-
useResizeObserver(headerRef, {
|
321
|
-
callback: handleResize
|
322
|
-
});
|
317
|
+
useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
|
318
|
+
useResizeObserver(headerRef, handleResize);
|
323
319
|
|
324
320
|
// Determine what form of title to display in the breadcrumb
|
325
321
|
var breadcrumbItemForTitle = utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title);
|
@@ -65,11 +65,11 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
|
|
65
65
|
var scrollableContainer = scrollableAncestor(headerRef.current);
|
66
66
|
|
67
67
|
/* istanbul ignore next */
|
68
|
-
var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.
|
68
|
+
var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
|
69
69
|
|
70
70
|
// The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
|
71
71
|
// top and the measuring ref top, or the difference between. It does not change on scroll or resize.
|
72
|
-
update.headerOffset =
|
72
|
+
update.headerOffset = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
|
73
73
|
|
74
74
|
/* istanbul ignore next */
|
75
75
|
update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
|
@@ -444,9 +444,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
444
444
|
}, title));
|
445
445
|
};
|
446
446
|
var contentRef = ref || sidePanelRef;
|
447
|
-
useResizeObserver(contentRef,
|
448
|
-
callback: handleResize
|
449
|
-
});
|
447
|
+
useResizeObserver(contentRef, handleResize);
|
450
448
|
return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
451
449
|
id: "".concat(blockClass, "-outer"),
|
452
450
|
className: mainPanelClassNames,
|
@@ -156,7 +156,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
156
156
|
if (sizingTags.length > 0) {
|
157
157
|
var spaceAvailable = tagSetRef.current.offsetWidth;
|
158
158
|
for (var i in sizingTags) {
|
159
|
-
var
|
159
|
+
var _sizingTags$i;
|
160
|
+
var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
|
160
161
|
if (spaceAvailable >= tagWidth) {
|
161
162
|
spaceAvailable -= tagWidth;
|
162
163
|
willFit += 1;
|
@@ -198,12 +199,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
198
199
|
var handleModalClose = function handleModalClose() {
|
199
200
|
setShowAllModalOpen(false);
|
200
201
|
};
|
201
|
-
useResizeObserver(sizingContainerRef,
|
202
|
-
|
203
|
-
});
|
204
|
-
useResizeObserver(tagSetRef, {
|
205
|
-
callback: handleResize
|
206
|
-
});
|
202
|
+
useResizeObserver(sizingContainerRef, handleSizerTagsResize);
|
203
|
+
useResizeObserver(tagSetRef, handleResize);
|
207
204
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
208
205
|
className: cx([blockClass, className]),
|
209
206
|
ref: tagSetRef
|
@@ -216,7 +216,8 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
216
216
|
closeModal: onClose,
|
217
217
|
iconDescription: closeIconDescription
|
218
218
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
219
|
-
className: "".concat(bc, "__header-content")
|
219
|
+
className: "".concat(bc, "__header-content"),
|
220
|
+
element: wide ? Layer : undefined
|
220
221
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
221
222
|
className: "".concat(bc, "__header-fields")
|
222
223
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
@@ -241,12 +242,10 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
241
242
|
className: "".concat(bc, "__right")
|
242
243
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
243
244
|
className: "".concat(bc, "__main"),
|
244
|
-
alwaysRender: includeActions
|
245
|
-
element: wide ? Layer : undefined
|
245
|
+
alwaysRender: includeActions
|
246
246
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
247
247
|
className: "".concat(bc, "__content"),
|
248
|
-
alwaysRender: influencer && influencerPosition === 'right'
|
249
|
-
element: wide ? Layer : undefined
|
248
|
+
alwaysRender: influencer && influencerPosition === 'right'
|
250
249
|
}, children), /*#__PURE__*/React.createElement(Wrap, {
|
251
250
|
className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
|
252
251
|
neverRender: influencerPosition !== 'right'
|
@@ -30,6 +30,20 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
30
30
|
componentBlockClass = _ref.componentBlockClass,
|
31
31
|
setCreateComponentActions = _ref.setCreateComponentActions,
|
32
32
|
setModalIsOpen = _ref.setModalIsOpen;
|
33
|
+
var continueToNextStep = useCallback(function () {
|
34
|
+
setIsSubmitting(false);
|
35
|
+
setCurrentStep(function (prev) {
|
36
|
+
// Find next included step to render
|
37
|
+
// There will always be a next step otherwise we will
|
38
|
+
// have reach the onSubmit
|
39
|
+
do {
|
40
|
+
var _stepData;
|
41
|
+
prev++;
|
42
|
+
} while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
|
43
|
+
return prev;
|
44
|
+
});
|
45
|
+
}, [setCurrentStep, setIsSubmitting, stepData]);
|
46
|
+
|
33
47
|
// useEffect to handle multi step logic
|
34
48
|
useEffect(function () {
|
35
49
|
var onUnmount = function onUnmount() {
|
@@ -157,9 +171,9 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
157
171
|
// There will always be a previous step otherwise we will
|
158
172
|
// have disabled the back button since we have reached the first visible step
|
159
173
|
do {
|
160
|
-
var
|
174
|
+
var _stepData2;
|
161
175
|
prev--;
|
162
|
-
} while (!((
|
176
|
+
} while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
|
163
177
|
return prev;
|
164
178
|
});
|
165
179
|
},
|
@@ -187,17 +201,4 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
187
201
|
setCreateComponentActions(buttons);
|
188
202
|
}
|
189
203
|
}, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
|
190
|
-
var continueToNextStep = useCallback(function () {
|
191
|
-
setIsSubmitting(false);
|
192
|
-
setCurrentStep(function (prev) {
|
193
|
-
// Find next included step to render
|
194
|
-
// There will always be a next step otherwise we will
|
195
|
-
// have reach the onSubmit
|
196
|
-
do {
|
197
|
-
var _stepData2;
|
198
|
-
prev++;
|
199
|
-
} while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
|
200
|
-
return prev;
|
201
|
-
});
|
202
|
-
}, [setCurrentStep, setIsSubmitting, stepData]);
|
203
204
|
};
|
@@ -5,14 +5,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
* This source code is licensed under the Apache-2.0 license found in the
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
7
7
|
*/
|
8
|
-
import { useRef, useState, useLayoutEffect } from 'react';
|
9
|
-
export var useResizeObserver = function useResizeObserver(ref) {
|
10
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
11
|
-
callback: null,
|
12
|
-
throttleInterval: 0
|
13
|
-
};
|
14
|
-
var callback = options.callback,
|
15
|
-
throttleInterval = options.throttleInterval;
|
8
|
+
import { useRef, useState, useLayoutEffect, useEffect } from 'react';
|
9
|
+
export var useResizeObserver = function useResizeObserver(ref, callback) {
|
16
10
|
var _useState = useState(0),
|
17
11
|
_useState2 = _slicedToArray(_useState, 2),
|
18
12
|
width = _useState2[0],
|
@@ -21,8 +15,14 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
21
15
|
_useState4 = _slicedToArray(_useState3, 2),
|
22
16
|
height = _useState4[0],
|
23
17
|
setHeight = _useState4[1];
|
24
|
-
var throttleTimeout = useRef(null);
|
25
18
|
var entriesToHandle = useRef(null);
|
19
|
+
var cb = useRef(callback);
|
20
|
+
useEffect(function () {
|
21
|
+
// ref for callback removes it as dependency fro useLayoutEffect
|
22
|
+
// This significantly reduces repeated calls if a function is redefined on every
|
23
|
+
// render
|
24
|
+
cb.current = callback;
|
25
|
+
}, [callback]);
|
26
26
|
useLayoutEffect(function () {
|
27
27
|
if (!(ref !== null && ref !== void 0 && ref.current)) {
|
28
28
|
return;
|
@@ -34,29 +34,15 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
34
34
|
var entry = entriesToHandle.current[0];
|
35
35
|
setWidth(entry.contentRect.width);
|
36
36
|
setHeight(entry.contentRect.height);
|
37
|
-
|
38
|
-
callback && callback(entry.contentRect);
|
37
|
+
cb.current && cb.current(entry.contentRect);
|
39
38
|
};
|
40
39
|
var observer = new ResizeObserver(function (entries) {
|
41
40
|
// always update entriesToHandle
|
42
41
|
entriesToHandle.current = entries;
|
43
|
-
|
44
|
-
//
|
45
|
-
if (throttleTimeout.current === null) {
|
46
|
-
// no live timeout set entries to handle and move on
|
47
|
-
|
48
|
-
// set up throttle
|
49
|
-
throttleTimeout.current = setTimeout(function () {
|
50
|
-
// do callbacks
|
51
|
-
doCallbacks();
|
52
|
-
// reset throttle
|
53
|
-
throttleTimeout.current = null;
|
54
|
-
}, throttleInterval);
|
55
|
-
}
|
56
|
-
} else {
|
57
|
-
// no throttle do callbacks every time
|
42
|
+
window.requestAnimationFrame(function () {
|
43
|
+
// do callbacks
|
58
44
|
doCallbacks();
|
59
|
-
}
|
45
|
+
});
|
60
46
|
});
|
61
47
|
|
62
48
|
// observe all refs passed
|
@@ -66,7 +52,7 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
66
52
|
observer = null;
|
67
53
|
};
|
68
54
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
69
|
-
}, [ref
|
55
|
+
}, [ref]);
|
70
56
|
return {
|
71
57
|
width: width,
|
72
58
|
height: height
|
@@ -103,6 +103,6 @@ StackblitzLink.propTypes = {
|
|
103
103
|
* @returns "dark" or "light"
|
104
104
|
*/
|
105
105
|
export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
|
106
|
-
var themeId = document.querySelector('
|
106
|
+
var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
|
107
107
|
return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
|
108
108
|
};
|
@@ -81,9 +81,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
81
81
|
}, [bodyRef]);
|
82
82
|
|
83
83
|
// Detect resize of the ModalBody to recalculate whether scrolling is enabled
|
84
|
-
(0, _useResizeObserver.useResizeObserver)(bodyRef,
|
85
|
-
callback: handleResize
|
86
|
-
});
|
84
|
+
(0, _useResizeObserver.useResizeObserver)(bodyRef, handleResize);
|
87
85
|
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
88
86
|
className: (0, _classnames.default)(blockClass,
|
89
87
|
// Apply the block class to the main HTML element
|
@@ -192,12 +192,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
192
192
|
};
|
193
193
|
|
194
194
|
// // resize of the items
|
195
|
-
(0, _useResizeObserver.useResizeObserver)(sizingRef,
|
196
|
-
|
197
|
-
});
|
198
|
-
(0, _useResizeObserver.useResizeObserver)(localRef, {
|
199
|
-
callback: handleResize
|
200
|
-
});
|
195
|
+
(0, _useResizeObserver.useResizeObserver)(sizingRef, handleResize);
|
196
|
+
(0, _useResizeObserver.useResizeObserver)(localRef, handleResize);
|
201
197
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
202
198
|
className: (0, _classnames.default)([blockClass, className]),
|
203
199
|
ref: localRef
|
@@ -14,16 +14,15 @@ var _UserProfileImage = require("../UserProfileImage");
|
|
14
14
|
var componentName = 'AddSelectFormControl';
|
15
15
|
var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
|
16
16
|
var AddSelectFormControl = function AddSelectFormControl(_ref) {
|
17
|
-
var _controlProps;
|
18
17
|
var item = _ref.item,
|
19
18
|
onClick = _ref.onClick,
|
20
19
|
selected = _ref.selected,
|
21
20
|
type = _ref.type;
|
22
|
-
var controlProps = (
|
21
|
+
var controlProps = (0, _defineProperty2.default)({
|
23
22
|
onClick: onClick,
|
24
|
-
|
25
|
-
|
26
|
-
},
|
23
|
+
className: "".concat(blockClass, "-form-control-wrapper ").concat(blockClass, "-form-control-wrapper--").concat(type),
|
24
|
+
size: 20
|
25
|
+
}, "aria-labelledby", "control-label-".concat(item.id));
|
27
26
|
var getCheckbox = function getCheckbox() {
|
28
27
|
if (selected) {
|
29
28
|
return /*#__PURE__*/_react.default.createElement(_icons.CheckboxCheckedFilled, controlProps);
|
@@ -75,7 +74,8 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
|
|
75
74
|
}, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
|
76
75
|
className: "".concat(blockClass, "-form-control-label-text")
|
77
76
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
78
|
-
className: "".concat(blockClass, "-cell-title")
|
77
|
+
className: "".concat(blockClass, "-cell-title"),
|
78
|
+
id: "control-label-".concat(item.id)
|
79
79
|
}, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
|
80
80
|
className: "".concat(blockClass, "-cell-subtitle")
|
81
81
|
}, item.subtitle))));
|
@@ -47,6 +47,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
47
47
|
setMultiSelection = _ref.setMultiSelection,
|
48
48
|
setParentSelected = _ref.setParentSelected,
|
49
49
|
setSingleSelection = _ref.setSingleSelection,
|
50
|
+
setSize = _ref.setSize,
|
50
51
|
singleSelection = _ref.singleSelection;
|
51
52
|
var ref = (0, _react.useRef)(null);
|
52
53
|
(0, _react.useEffect)(function () {
|
@@ -129,14 +130,20 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
129
130
|
var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
|
130
131
|
var tabIndex = getTabIndex();
|
131
132
|
var selected = isSelected();
|
133
|
+
var expanded = parentSelected === item.id;
|
132
134
|
return /*#__PURE__*/_react.default.createElement("div", {
|
133
|
-
className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(
|
135
|
+
className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected()), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), expanded), _cx)),
|
134
136
|
onKeyDown: onSelectKeyDown,
|
135
137
|
tabIndex: tabIndex,
|
136
138
|
ref: ref,
|
137
|
-
role: "row"
|
139
|
+
role: "row",
|
140
|
+
"aria-selected": selected,
|
141
|
+
"aria-posinset": index,
|
142
|
+
"aria-setsize": setSize,
|
143
|
+
"aria-expanded": expanded
|
138
144
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
139
|
-
className: "".concat(blockClass, "-cell")
|
145
|
+
className: "".concat(blockClass, "-cell"),
|
146
|
+
role: "gridcell"
|
140
147
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
141
148
|
className: "".concat(blockClass, "-cell-wrapper")
|
142
149
|
}, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
|
@@ -149,7 +156,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
149
156
|
type: "inline",
|
150
157
|
items: modifiers.options,
|
151
158
|
label: modifiers.label,
|
152
|
-
disabled: !isSelected(
|
159
|
+
disabled: !isSelected(),
|
153
160
|
className: "".concat(blockClass, "-dropdown"),
|
154
161
|
initialSelectedItem: item[modifiers.id],
|
155
162
|
onChange: function onChange(_ref3) {
|
@@ -174,7 +181,9 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
174
181
|
hasIconOnly: true,
|
175
182
|
onClick: onNavigateItem,
|
176
183
|
kind: "ghost",
|
177
|
-
size: "sm"
|
184
|
+
size: "sm",
|
185
|
+
tabIndex: -1,
|
186
|
+
"aria-hidden": true
|
178
187
|
}), item.meta && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
179
188
|
className: "".concat(blockClass, "-view-meta"),
|
180
189
|
renderIcon: function renderIcon(props) {
|
@@ -212,6 +221,7 @@ AddSelectRow.propTypes = {
|
|
212
221
|
setMultiSelection: _propTypes.default.func,
|
213
222
|
setParentSelected: _propTypes.default.func,
|
214
223
|
setSingleSelection: _propTypes.default.func,
|
224
|
+
setSize: _propTypes.default.number,
|
215
225
|
singleSelection: _propTypes.default.string
|
216
226
|
};
|
217
227
|
AddSelectRow.displayName = componentName;
|