@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +63 -157
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -9
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +8 -151
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -9
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +63 -157
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -9
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +63 -157
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -9
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelectBody.js +2 -2
- package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +3 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +10 -9
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +1 -2
- package/es/components/Datagrid/useInfiniteScroll.js +5 -2
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
- package/es/components/EditUpdateCards/index.js +7 -0
- package/es/components/PageHeader/PageHeader.js +3 -3
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +45 -0
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResetCreateComponent.js +6 -2
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/AddSelect/AddSelectBody.js +2 -2
- package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +3 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +9 -8
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +1 -2
- package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
- package/lib/components/EditUpdateCards/index.js +13 -0
- package/lib/components/PageHeader/PageHeader.js +3 -3
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +55 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +5 -3
- package/scss/components/AddSelect/_add-select.scss +2 -2
- package/scss/components/Datagrid/_storybook-styles.scss +4 -0
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +20 -5
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +2 -0
- package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
- package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
- package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
- package/scss/components/EditUpdateCards/_index.scss +8 -0
- package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +2 -78
- package/scss/components/SidePanel/_storybook-styles.scss +6 -1
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -124,9 +124,9 @@ CreateTearsheetNarrow.propTypes = {
|
|
124
124
|
formDescription: _propTypes.default.node,
|
125
125
|
|
126
126
|
/**
|
127
|
-
* Specifies a
|
127
|
+
* Specifies a field that provides a title for a form
|
128
128
|
*/
|
129
|
-
formTitle: _propTypes.default.node
|
129
|
+
formTitle: _propTypes.default.node,
|
130
130
|
|
131
131
|
/**
|
132
132
|
* A label for the tearsheet, displayed in the header area of the tearsheet
|
@@ -140,10 +140,15 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
140
140
|
}
|
141
141
|
|
142
142
|
var gridElement = document.querySelector("#".concat(tableId));
|
143
|
+
var tableHeader = document.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
|
143
144
|
gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
|
144
|
-
|
145
|
+
|
146
|
+
if (gridActive) {
|
147
|
+
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
148
|
+
}
|
149
|
+
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
145
150
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
|
146
|
-
className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
151
|
+
className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
147
152
|
title: gridTitle,
|
148
153
|
description: gridDescription
|
149
154
|
}, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
|
@@ -153,7 +158,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
153
158
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
154
159
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
155
160
|
ref: multiKeyTrackingRef
|
156
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination
|
161
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
157
162
|
instance: datagridState
|
158
163
|
}));
|
159
164
|
};
|
@@ -165,7 +170,7 @@ DatagridContent.propTypes = {
|
|
165
170
|
withVirtualScroll: _propTypes.default.bool,
|
166
171
|
DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
167
172
|
DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
168
|
-
CustomizeColumnsModal: _propTypes.default.element,
|
173
|
+
CustomizeColumnsModal: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
169
174
|
isFetching: _propTypes.default.bool,
|
170
175
|
leftPanel: _propTypes.default.object,
|
171
176
|
fullHeightDatagrid: _propTypes.default.bool,
|
@@ -53,6 +53,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
53
53
|
innerListRef = datagridState.innerListRef,
|
54
54
|
_datagridState$tableH = datagridState.tableHeight,
|
55
55
|
tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
|
56
|
+
virtualHeight = datagridState.virtualHeight,
|
56
57
|
listRef = datagridState.listRef,
|
57
58
|
rowSize = datagridState.rowSize,
|
58
59
|
DatagridPagination = datagridState.DatagridPagination,
|
@@ -72,7 +73,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
72
73
|
return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
|
73
74
|
onScroll: onScroll
|
74
75
|
}), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
|
75
|
-
height: tableHeight,
|
76
|
+
height: virtualHeight || tableHeight,
|
76
77
|
itemCount: visibleRows.length,
|
77
78
|
itemSize: function itemSize(index) {
|
78
79
|
return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
|
@@ -59,6 +59,9 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
|
|
59
59
|
}));
|
60
60
|
};
|
61
61
|
|
62
|
+
ButtonWrapper.defaultProps = {
|
63
|
+
onClick: function onClick() {}
|
64
|
+
};
|
62
65
|
ButtonWrapper.propTypes = {
|
63
66
|
iconTooltipLabel: _propTypes.default.string,
|
64
67
|
isModalOpen: _propTypes.default.bool.isRequired,
|
@@ -57,7 +57,7 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
|
|
57
57
|
};
|
58
58
|
|
59
59
|
var Columns = function Columns(_ref) {
|
60
|
-
var
|
60
|
+
var _cx;
|
61
61
|
|
62
62
|
var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
|
63
63
|
filterString = _ref.filterString,
|
@@ -116,12 +116,11 @@ var Columns = function Columns(_ref) {
|
|
116
116
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
117
117
|
}, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
|
118
118
|
id: "".concat(blockClass, "__customize-columns-select-all"),
|
119
|
-
className: (0, _classnames.default)((
|
119
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _cx)),
|
120
120
|
selected: getVisibleColumnsCount() > 0
|
121
121
|
}, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
|
122
|
-
|
122
|
+
className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
|
123
123
|
checked: getVisibleColumnsCount() === columns.length,
|
124
|
-
empty: !!getVisibleColumnsCount() === 0,
|
125
124
|
indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
|
126
125
|
onChange: function onChange() {
|
127
126
|
onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
|
@@ -160,13 +159,15 @@ var Columns = function Columns(_ref) {
|
|
160
159
|
},
|
161
160
|
selected: (0, _common.isColumnVisible)(colDef)
|
162
161
|
}, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
|
163
|
-
|
162
|
+
className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
164
163
|
checked: (0, _common.isColumnVisible)(colDef),
|
165
|
-
onChange:
|
164
|
+
onChange: function onChange(_, _ref2) {
|
165
|
+
var checked = _ref2.checked;
|
166
|
+
return onSelectColumn(colDef, checked);
|
167
|
+
},
|
166
168
|
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
167
169
|
labelText: colDef.Header.props.title,
|
168
|
-
title: colDef.Header.props.title
|
169
|
-
className: "".concat(blockClass, "__customize-columns-checkbox")
|
170
|
+
title: colDef.Header.props.title
|
170
171
|
}));
|
171
172
|
}))));
|
172
173
|
};
|
@@ -159,8 +159,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
159
159
|
primaryButtonDisabled: !isDirty,
|
160
160
|
onRequestClose: onRequestClose,
|
161
161
|
onRequestSubmit: onRequestSubmit,
|
162
|
-
size: "sm"
|
163
|
-
hasForm: true
|
162
|
+
size: "sm"
|
164
163
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
165
164
|
className: "".concat(blockClass, "__customize-columns-instructions")
|
166
165
|
}, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
|
@@ -30,7 +30,10 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
30
30
|
var isFetching = instance.isFetching,
|
31
31
|
tableHeight = instance.tableHeight,
|
32
32
|
innerListRef = instance.innerListRef,
|
33
|
-
fetchMoreData = instance.fetchMoreData
|
33
|
+
fetchMoreData = instance.fetchMoreData,
|
34
|
+
tableId = instance.tableId;
|
35
|
+
var tableElement = document.querySelector("#".concat(tableId));
|
36
|
+
var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
|
34
37
|
var loadMoreThreshold = 200;
|
35
38
|
|
36
39
|
var emptyFetchData = function emptyFetchData() {}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
@@ -46,7 +49,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
46
49
|
scrollOffset = _ref.scrollOffset;
|
47
50
|
|
48
51
|
if (innerListRef && innerListRef.current) {
|
49
|
-
if (!isFetching && scrollDirection === 'forward' && scrollOffset +
|
52
|
+
if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
|
50
53
|
if (fetchMoreData) {
|
51
54
|
fetchMore();
|
52
55
|
}
|
@@ -88,6 +88,10 @@ var ARG_TYPES = {
|
|
88
88
|
type: 'number'
|
89
89
|
},
|
90
90
|
description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
|
91
|
+
},
|
92
|
+
customizeColumnsProps: {
|
93
|
+
control: 'object',
|
94
|
+
description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
|
91
95
|
}
|
92
96
|
};
|
93
97
|
exports.ARG_TYPES = ARG_TYPES;
|
@@ -0,0 +1,152 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.EditUpdateCards = void 0;
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
|
+
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
|
+
|
16
|
+
var _react = _interopRequireDefault(require("react"));
|
17
|
+
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
|
+
|
20
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
21
|
+
|
22
|
+
var _devtools = require("../../global/js/utils/devtools");
|
23
|
+
|
24
|
+
var _settings = require("../../settings");
|
25
|
+
|
26
|
+
var _ProductiveCard = require("../ProductiveCard");
|
27
|
+
|
28
|
+
var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
|
29
|
+
// import { children } from 'cheerio/lib/api/traversing';
|
30
|
+
// Carbon and package components we use.
|
31
|
+
|
32
|
+
/* TODO: @import(s) of carbon components and other package components. */
|
33
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
34
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--edit-update-cards");
|
35
|
+
var componentName = 'EditUpdateCards'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
36
|
+
// Default values can be included here and then assigned to the prop params,
|
37
|
+
// e.g. prop = defaults.prop,
|
38
|
+
// This gathers default values together neatly and ensures non-primitive
|
39
|
+
// values are initialized early to avoid react making unnecessary re-renders.
|
40
|
+
// Note that default values are not required for props that are 'required',
|
41
|
+
// nor for props where the component can apply undefined values reasonably.
|
42
|
+
// Default values should be provided when the component needs to make a choice
|
43
|
+
// or assumption when a prop is not supplied.
|
44
|
+
// Default values for props
|
45
|
+
// const defaults = {
|
46
|
+
// /* TODO: add defaults for relevant props if needed */
|
47
|
+
// };
|
48
|
+
|
49
|
+
/**
|
50
|
+
* TODO: A description of the component.
|
51
|
+
*/
|
52
|
+
|
53
|
+
var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
54
|
+
var actionIcons = _ref.actionIcons,
|
55
|
+
actionsPlacement = _ref.actionsPlacement,
|
56
|
+
className = _ref.className,
|
57
|
+
description = _ref.description,
|
58
|
+
editChildren = _ref.editChildren,
|
59
|
+
editMode = _ref.editMode,
|
60
|
+
label = _ref.label,
|
61
|
+
previewChildren = _ref.previewChildren,
|
62
|
+
title = _ref.title,
|
63
|
+
titleSize = _ref.titleSize,
|
64
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
65
|
+
// const [editMode, setEditMode] = useState(false);
|
66
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
67
|
+
className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
|
68
|
+
className, // Apply any supplied class names to the main HTML element.
|
69
|
+
// example: `${blockClass}__template-string-class-${kind}-n-${size}`,
|
70
|
+
(0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
|
71
|
+
ref: ref,
|
72
|
+
role: "main"
|
73
|
+
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
|
74
|
+
actionIcons: actionIcons,
|
75
|
+
actionsPlacement: actionsPlacement,
|
76
|
+
className: className,
|
77
|
+
description: description,
|
78
|
+
label: label,
|
79
|
+
title: title,
|
80
|
+
titleSize: titleSize
|
81
|
+
}, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
|
82
|
+
}); // Return a placeholder if not released and not enabled by feature flag
|
83
|
+
|
84
|
+
|
85
|
+
exports.EditUpdateCards = EditUpdateCards;
|
86
|
+
exports.EditUpdateCards = EditUpdateCards = _settings.pkg.checkComponentEnabled(EditUpdateCards, componentName); // The display name of the component, used by React. Note that displayName
|
87
|
+
// is used in preference to relying on function.name.
|
88
|
+
|
89
|
+
EditUpdateCards.displayName = componentName; // The types and DocGen commentary for the component props,
|
90
|
+
// in alphabetical order (for consistency).
|
91
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
92
|
+
|
93
|
+
EditUpdateCards.propTypes = {
|
94
|
+
/**
|
95
|
+
* Icons that are displayed on card. Refer to design documentation for implementation guidelines
|
96
|
+
*/
|
97
|
+
actionIcons: _propTypes.default.arrayOf(_propTypes.default.shape({
|
98
|
+
id: _propTypes.default.string,
|
99
|
+
icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
100
|
+
onKeyDown: _propTypes.default.func,
|
101
|
+
onClick: _propTypes.default.func,
|
102
|
+
iconDescription: _propTypes.default.string,
|
103
|
+
href: _propTypes.default.string
|
104
|
+
})),
|
105
|
+
|
106
|
+
/**
|
107
|
+
* Determines if the action icons are on the top or bottom of the card
|
108
|
+
*/
|
109
|
+
actionsPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
110
|
+
|
111
|
+
/**
|
112
|
+
* Optional label for the top of the card.
|
113
|
+
*/
|
114
|
+
className: _propTypes.default.string,
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Optional header description
|
118
|
+
*/
|
119
|
+
description: _propTypes.default.string,
|
120
|
+
|
121
|
+
/**
|
122
|
+
* Edit mode children
|
123
|
+
*/
|
124
|
+
editChildren: _propTypes.default.node,
|
125
|
+
|
126
|
+
/**
|
127
|
+
* Edit mode
|
128
|
+
*/
|
129
|
+
editMode: _propTypes.default.bool,
|
130
|
+
|
131
|
+
/**
|
132
|
+
* Optional label for the top of the card
|
133
|
+
*/
|
134
|
+
label: _propTypes.default.string,
|
135
|
+
|
136
|
+
/**
|
137
|
+
* Preview mode children
|
138
|
+
*/
|
139
|
+
previewChildren: _propTypes.default.node,
|
140
|
+
|
141
|
+
/**
|
142
|
+
* Title that's displayed at the top of the card
|
143
|
+
*/
|
144
|
+
title: _propTypes.default.string,
|
145
|
+
|
146
|
+
/**
|
147
|
+
* Determines title size
|
148
|
+
*/
|
149
|
+
titleSize: _propTypes.default.oneOf(['default', 'large'])
|
150
|
+
/* TODO: add types and DocGen for all props. */
|
151
|
+
|
152
|
+
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "EditUpdateCards", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _EditUpdateCards.EditUpdateCards;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
|
13
|
+
var _EditUpdateCards = require("./EditUpdateCards");
|
@@ -330,7 +330,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
330
330
|
var current = _ref5.current;
|
331
331
|
// on window resize and other updates some values may have changed
|
332
332
|
checkUpdateVerticalSpace();
|
333
|
-
setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
|
333
|
+
setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
|
334
334
|
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
335
335
|
(0, _react.useEffect)(function () {
|
336
336
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
@@ -373,7 +373,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
373
373
|
};
|
374
374
|
|
375
375
|
(0, _react.useEffect)(function () {
|
376
|
-
if (
|
376
|
+
if (collapseHeader === true) {
|
377
377
|
(0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
378
378
|
}
|
379
379
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
@@ -513,7 +513,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
513
513
|
onWidthChange: handleWidthChange,
|
514
514
|
buttons: pageActions,
|
515
515
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
516
|
-
rightAlign:
|
516
|
+
rightAlign: !widthIsNarrow
|
517
517
|
})));
|
518
518
|
}
|
519
519
|
}
|
@@ -84,7 +84,9 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
84
84
|
return /*#__PURE__*/_react.default.createElement("div", {
|
85
85
|
className: (0, _classnames.default)("".concat(blockClass, "__title"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--editable"), isEditable), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
|
86
86
|
title: titleText
|
87
|
-
},
|
87
|
+
}, /*#__PURE__*/_react.default.createElement("h1", {
|
88
|
+
className: "".concat(blockClass, "__title-wrapper")
|
89
|
+
}, titleInnards));
|
88
90
|
};
|
89
91
|
|
90
92
|
exports.PageHeaderTitle = PageHeaderTitle;
|
@@ -19,6 +19,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
19
19
|
|
20
20
|
var _react = _interopRequireWildcard(require("react"));
|
21
21
|
|
22
|
+
var _framerMotion = require("framer-motion");
|
23
|
+
|
22
24
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
23
25
|
|
24
26
|
var _classnames = _interopRequireDefault(require("classnames"));
|
@@ -45,6 +47,8 @@ var _icons = require("@carbon/react/icons");
|
|
45
47
|
|
46
48
|
var _ActionSet = require("../ActionSet");
|
47
49
|
|
50
|
+
var _variants = require("./motion/variants");
|
51
|
+
|
48
52
|
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
|
49
53
|
_excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
|
50
54
|
|
@@ -106,20 +110,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
106
110
|
title = _ref.title,
|
107
111
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
108
112
|
|
109
|
-
var _useState = (0, _react.useState)(
|
113
|
+
var _useState = (0, _react.useState)(false),
|
110
114
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
111
|
-
|
112
|
-
|
115
|
+
animationComplete = _useState2[0],
|
116
|
+
setAnimationComplete = _useState2[1];
|
113
117
|
|
114
|
-
var _useState3 = (0, _react.useState)(
|
118
|
+
var _useState3 = (0, _react.useState)(0),
|
115
119
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
var _useState5 = (0, _react.useState)(0),
|
120
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
121
|
-
panelHeight = _useState6[0],
|
122
|
-
setPanelHeight = _useState6[1];
|
120
|
+
panelHeight = _useState4[0],
|
121
|
+
setPanelHeight = _useState4[1];
|
123
122
|
|
124
123
|
var sidePanelRef = (0, _react.useRef)();
|
125
124
|
var sidePanelOverlayRef = (0, _react.useRef)();
|
@@ -149,8 +148,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
149
148
|
// height css custom property
|
150
149
|
|
151
150
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
|
151
|
+
var _sidePanelOuter$style;
|
152
|
+
|
152
153
|
scrollableSection.scrollTop = 0;
|
153
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
154
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
154
155
|
}
|
155
156
|
}
|
156
157
|
}, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]); // set initial focus when side panel opens
|
@@ -178,12 +179,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
178
179
|
}, [selectorPrimaryFocus, open, animationComplete]);
|
179
180
|
(0, _react.useEffect)(function () {
|
180
181
|
if (open && actions && actions.length && animationComplete) {
|
182
|
+
var _sidePanelOuter$style2;
|
183
|
+
|
181
184
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
182
185
|
var actionsContainer = getActionsContainerElement();
|
183
186
|
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
184
187
|
|
185
188
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
186
|
-
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
189
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
187
190
|
}
|
188
191
|
}, [actions, condensedActions, open, animationComplete]); // Add console warning if labelText is provided without a title.
|
189
192
|
// This combination is not allowed.
|
@@ -196,13 +199,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
196
199
|
/* istanbul ignore next */
|
197
200
|
|
198
201
|
var handleResize = function handleResize(width, height) {
|
202
|
+
var _sidePanelOuter$style3;
|
203
|
+
|
199
204
|
setPanelHeight(height);
|
200
205
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
201
206
|
var actionsContainer = getActionsContainerElement();
|
202
|
-
var actionsHeight = actionsContainer.offsetHeight + 16; // add additional 1rem spacing to bottom padding
|
207
|
+
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
203
208
|
|
204
209
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
205
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
210
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
206
211
|
};
|
207
212
|
|
208
213
|
var getActionsContainerElement = function getActionsContainerElement() {
|
@@ -287,7 +292,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
287
292
|
});
|
288
293
|
}
|
289
294
|
|
290
|
-
if (open &&
|
295
|
+
if (open && !animateTitle) {
|
291
296
|
var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
292
297
|
|
293
298
|
var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
|
@@ -308,7 +313,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
308
313
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
|
309
314
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
|
310
315
|
}
|
311
|
-
}, [open, animateTitle, animationComplete,
|
316
|
+
}, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
|
312
317
|
|
313
318
|
(0, _react.useEffect)(function () {
|
314
319
|
var handleOutsideClick = function handleOutsideClick(event) {
|
@@ -334,18 +339,11 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
334
339
|
return function () {
|
335
340
|
document.removeEventListener('click', handleOutsideClick);
|
336
341
|
};
|
337
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); //
|
338
|
-
|
339
|
-
(0, _react.useEffect)(function () {
|
340
|
-
if (open) {
|
341
|
-
setRender(true);
|
342
|
-
}
|
343
|
-
}, [open]); // initializes the side panel to close
|
342
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initializes the side panel to close
|
344
343
|
|
345
344
|
var onAnimationEnd = function onAnimationEnd() {
|
346
345
|
if (!open) {
|
347
346
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
348
|
-
setRender(false);
|
349
347
|
}
|
350
348
|
|
351
349
|
setAnimationComplete(true);
|
@@ -359,13 +357,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
359
357
|
}
|
360
358
|
}, [reducedMotion.matches]); // initializes the side panel to open
|
361
359
|
|
362
|
-
var _onAnimationStart = function onAnimationStart(
|
363
|
-
|
364
|
-
var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
|
365
|
-
|
366
|
-
if (isPanelTarget) {
|
367
|
-
setAnimationComplete(false);
|
368
|
-
}
|
360
|
+
var _onAnimationStart = function onAnimationStart() {
|
361
|
+
setAnimationComplete(false);
|
369
362
|
}; // used to reset margins of the slide in panel when closed/closing
|
370
363
|
|
371
364
|
|
@@ -382,13 +375,12 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
382
375
|
}, [open, placement, selectorPageContent, slideIn]);
|
383
376
|
(0, _react.useEffect)(function () {
|
384
377
|
if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
|
385
|
-
setRender(false);
|
386
378
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
387
379
|
}
|
388
380
|
}, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
|
389
381
|
|
390
382
|
(0, _react.useEffect)(function () {
|
391
|
-
if (
|
383
|
+
if (open && slideIn) {
|
392
384
|
var pageContentElement = document.querySelector(selectorPageContent);
|
393
385
|
|
394
386
|
if (placement && placement === 'right' && pageContentElement) {
|
@@ -401,7 +393,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
401
393
|
pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
|
402
394
|
}
|
403
395
|
}
|
404
|
-
}, [slideIn, selectorPageContent, placement,
|
396
|
+
}, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]); // adds focus trap functionality
|
405
397
|
|
406
398
|
/* istanbul ignore next */
|
407
399
|
|
@@ -506,20 +498,22 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
506
498
|
onResize: handleResize,
|
507
499
|
targetRef: contentRef
|
508
500
|
});
|
509
|
-
return
|
501
|
+
return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
|
510
502
|
id: "".concat(blockClass, "-outer"),
|
511
503
|
className: mainPanelClassNames,
|
512
|
-
style: {
|
513
|
-
animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(_motion.moderate02) : "side-panel-entrance-left ".concat(_motion.moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(_motion.moderate02) : "side-panel-exit-left ".concat(_motion.moderate02)) : null
|
514
|
-
},
|
515
|
-
onAnimationEnd: onAnimationEnd,
|
516
|
-
onAnimationStart: function onAnimationStart(event) {
|
517
|
-
return _onAnimationStart(event);
|
518
|
-
},
|
519
504
|
onBlur: handleBlur,
|
520
505
|
ref: contentRef,
|
521
506
|
role: "complementary",
|
522
|
-
"aria-label": title
|
507
|
+
"aria-label": title,
|
508
|
+
onAnimationComplete: onAnimationEnd,
|
509
|
+
onAnimationStart: function onAnimationStart(event) {
|
510
|
+
return _onAnimationStart(event);
|
511
|
+
},
|
512
|
+
variants: _variants.panelVariants,
|
513
|
+
initial: "hidden",
|
514
|
+
animate: "visible",
|
515
|
+
exit: "exit",
|
516
|
+
custom: placement
|
523
517
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
524
518
|
ref: startTrapRef,
|
525
519
|
tabIndex: "0",
|
@@ -539,13 +533,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
539
533
|
tabIndex: "0",
|
540
534
|
role: "link",
|
541
535
|
className: "".concat(blockClass, "__visually-hidden")
|
542
|
-
}, "Focus sentinel")), includeOverlay && /*#__PURE__*/_react.default.createElement(
|
536
|
+
}, "Focus sentinel")), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
|
537
|
+
variants: _variants.overlayVariants,
|
538
|
+
initial: "hidden",
|
539
|
+
animate: "visible",
|
540
|
+
exit: "exit",
|
543
541
|
ref: sidePanelOverlayRef,
|
544
|
-
className: "".concat(blockClass, "__overlay")
|
545
|
-
|
546
|
-
animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
|
547
|
-
}
|
548
|
-
}));
|
542
|
+
className: "".concat(blockClass, "__overlay")
|
543
|
+
}))));
|
549
544
|
}); // Return a placeholder if not released and not enabled by feature flag
|
550
545
|
|
551
546
|
|
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.panelVariants = exports.overlayVariants = void 0;
|
7
|
+
|
8
|
+
var _motionConstants = require("../../../global/js/utils/motionConstants");
|
9
|
+
|
10
|
+
/**
|
11
|
+
* Copyright IBM Corp. 2022, 2022
|
12
|
+
*
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
15
|
+
*/
|
16
|
+
var overlayVariants = {
|
17
|
+
visible: {
|
18
|
+
opacity: 1,
|
19
|
+
transition: {
|
20
|
+
duration: _motionConstants.DURATIONS.moderate02,
|
21
|
+
ease: _motionConstants.EASINGS.productive.standard
|
22
|
+
}
|
23
|
+
},
|
24
|
+
hidden: {
|
25
|
+
opacity: 0
|
26
|
+
},
|
27
|
+
exit: {
|
28
|
+
opacity: 0
|
29
|
+
}
|
30
|
+
};
|
31
|
+
exports.overlayVariants = overlayVariants;
|
32
|
+
var panelVariants = {
|
33
|
+
visible: {
|
34
|
+
x: 0,
|
35
|
+
transition: {
|
36
|
+
duration: _motionConstants.DURATIONS.moderate02,
|
37
|
+
ease: _motionConstants.EASINGS.productive.standard
|
38
|
+
}
|
39
|
+
},
|
40
|
+
hidden: function hidden(placement) {
|
41
|
+
return {
|
42
|
+
x: placement === 'right' ? '100%' : -320
|
43
|
+
};
|
44
|
+
},
|
45
|
+
exit: function exit(placement) {
|
46
|
+
return {
|
47
|
+
x: placement === 'right' ? '100%' : -320,
|
48
|
+
transition: {
|
49
|
+
duration: _motionConstants.DURATIONS.moderate01,
|
50
|
+
ease: _motionConstants.EASINGS.productive.exit
|
51
|
+
}
|
52
|
+
};
|
53
|
+
}
|
54
|
+
};
|
55
|
+
exports.panelVariants = panelVariants;
|