@carbon/ibm-products 1.32.1 → 1.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +210 -158
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +7 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +12 -144
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +7 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +193 -156
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +7 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +208 -156
- package/css/index.css.map +1 -1
- package/css/index.min.css +7 -3
- package/css/index.min.css.map +1 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +30 -7
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +21 -0
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +10 -1
- package/es/components/InlineEditV2/InlineEditV2.js +249 -0
- package/es/components/InlineEditV2/index.js +1 -0
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +39 -0
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +29 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +22 -0
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +10 -1
- package/lib/components/InlineEditV2/InlineEditV2.js +277 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +49 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +14 -13
- package/scss/components/Datagrid/_storybook-styles.scss +11 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +0 -5
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +177 -2
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +81 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +0 -75
- package/scss/components/_index.scss +2 -0
@@ -42,11 +42,11 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
|
|
42
42
|
type: 'EXIT_EDIT_MODE',
|
43
43
|
payload: activeCellId
|
44
44
|
});
|
45
|
+
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
46
|
+
inlineEditArea.focus();
|
45
47
|
}
|
46
48
|
|
47
49
|
event.preventDefault();
|
48
|
-
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
49
|
-
inlineEditArea.focus();
|
50
50
|
return;
|
51
51
|
}
|
52
52
|
|
@@ -9,6 +9,8 @@ var _handleMultipleKeys = require("../../../../DataSpreadsheet/utils/handleMulti
|
|
9
9
|
|
10
10
|
var _settings = require("../../../../../settings");
|
11
11
|
|
12
|
+
var _getFocusableElements = require("../../../../../global/js/utils/getFocusableElements");
|
13
|
+
|
12
14
|
/**
|
13
15
|
* Copyright IBM Corp. 2022, 2022
|
14
16
|
*
|
@@ -72,6 +74,26 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
72
74
|
});
|
73
75
|
}, 250);
|
74
76
|
}
|
77
|
+
} // Shift + Tab
|
78
|
+
// This should remove the active grid state
|
79
|
+
|
80
|
+
|
81
|
+
if ((keysPressedList.includes('ShiftLeft') || keysPressedList.includes('ShiftRight')) && keysPressedList.includes('Tab')) {
|
82
|
+
dispatch({
|
83
|
+
type: 'REMOVE_GRID_ACTIVE_FOCUS',
|
84
|
+
payload: activeCellId
|
85
|
+
});
|
86
|
+
var tableElement = document.querySelector("#".concat(instance.tableId));
|
87
|
+
var datagridFocusableElements = (0, _getFocusableElements.getFocusableElements)(tableElement);
|
88
|
+
var indexOfTable = datagridFocusableElements.findIndex(function (item) {
|
89
|
+
return item instanceof HTMLTableElement;
|
90
|
+
});
|
91
|
+
|
92
|
+
if (indexOfTable && Number.isFinite(indexOfTable)) {
|
93
|
+
var _datagridFocusableEle;
|
94
|
+
|
95
|
+
(_datagridFocusableEle = datagridFocusableElements[indexOfTable]) === null || _datagridFocusableEle === void 0 ? void 0 : _datagridFocusableEle.focus();
|
96
|
+
}
|
75
97
|
}
|
76
98
|
};
|
77
99
|
|
@@ -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;
|
@@ -41,25 +41,43 @@ var getInlineEditColumns = function getInlineEditColumns() {
|
|
41
41
|
accessor: 'firstName',
|
42
42
|
inlineEdit: {
|
43
43
|
type: 'text',
|
44
|
-
|
45
|
-
|
44
|
+
// required for including validation, this is used to set the invalid prop internally
|
45
|
+
validator: function validator(n) {
|
46
|
+
return n.length >= 40;
|
47
|
+
},
|
48
|
+
// These props are passed to the Carbon component used for inline editing
|
49
|
+
inputProps: {
|
50
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
51
|
+
}
|
46
52
|
}
|
47
53
|
}, {
|
48
54
|
Header: 'Last Name',
|
49
55
|
accessor: 'lastName',
|
50
56
|
inlineEdit: {
|
51
57
|
type: 'text',
|
52
|
-
|
53
|
-
|
58
|
+
// required for including validation, this is used to set the invalid prop internally
|
59
|
+
validator: function validator(n) {
|
60
|
+
return n.length >= 40;
|
61
|
+
},
|
62
|
+
// These props are passed to the Carbon component used for inline editing
|
63
|
+
inputProps: {
|
64
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
65
|
+
}
|
54
66
|
}
|
55
67
|
}, {
|
56
68
|
Header: 'Age',
|
57
69
|
accessor: 'age',
|
58
70
|
width: 120,
|
59
71
|
inlineEdit: {
|
72
|
+
// required for including validation, this is used to set the invalid prop internally
|
73
|
+
validator: function validator(n) {
|
74
|
+
return n && n < 18;
|
75
|
+
},
|
60
76
|
type: 'number',
|
61
|
-
|
62
|
-
|
77
|
+
// These props are passed to the Carbon component used for inline editing
|
78
|
+
inputProps: {
|
79
|
+
invalidText: 'Invalid number, must be 18 or greater'
|
80
|
+
}
|
63
81
|
}
|
64
82
|
}, {
|
65
83
|
Header: 'Visits',
|
@@ -96,7 +114,7 @@ var getInlineEditColumns = function getInlineEditColumns() {
|
|
96
114
|
// These props are passed to the Carbon component used for inline editing
|
97
115
|
items: inlineEditSelectItems,
|
98
116
|
onChange: function onChange(item) {
|
99
|
-
|
117
|
+
console.log(item);
|
100
118
|
}
|
101
119
|
}
|
102
120
|
}
|
@@ -76,6 +76,14 @@ var renderStatusIcon = function renderStatusIcon(statusChance) {
|
|
76
76
|
return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
|
77
77
|
};
|
78
78
|
|
79
|
+
var renderDocLink = function renderDocLink(statusChance) {
|
80
|
+
var docLinkObj = {
|
81
|
+
href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
|
82
|
+
text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
|
83
|
+
};
|
84
|
+
return docLinkObj;
|
85
|
+
};
|
86
|
+
|
79
87
|
var newPerson = function newPerson() {
|
80
88
|
var statusChance = Math.random();
|
81
89
|
var initialChartTypeIndex = getRandomInteger(0, 2);
|
@@ -180,7 +188,8 @@ var newPerson = function newPerson() {
|
|
180
188
|
chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
|
181
189
|
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
|
182
190
|
bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
|
183
|
-
status_icon: renderStatusIcon(statusChance)
|
191
|
+
status_icon: renderStatusIcon(statusChance),
|
192
|
+
doc_link: renderDocLink(statusChance)
|
184
193
|
};
|
185
194
|
};
|
186
195
|
|
@@ -0,0 +1,277 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
exports.InlineEditV2 = void 0;
|
11
|
+
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17
|
+
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
19
|
+
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
21
|
+
|
22
|
+
var _carbonComponentsReact = require("carbon-components-react");
|
23
|
+
|
24
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
25
|
+
|
26
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
27
|
+
|
28
|
+
var _iconsReact = require("@carbon/icons-react");
|
29
|
+
|
30
|
+
var _settings = require("../../settings");
|
31
|
+
|
32
|
+
var _devtools = require("../../global/js/utils/devtools");
|
33
|
+
|
34
|
+
var _excluded = ["cancelLabel", "editLabel", "invalid", "invalidLabel", "onCancel", "onChange", "onSave", "readOnly", "saveLabel", "value"];
|
35
|
+
|
36
|
+
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); }
|
37
|
+
|
38
|
+
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; }
|
39
|
+
|
40
|
+
var componentName = 'InlineEditV2';
|
41
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
|
42
|
+
var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
43
|
+
var _cx;
|
44
|
+
|
45
|
+
var cancelLabel = _ref.cancelLabel,
|
46
|
+
editLabel = _ref.editLabel,
|
47
|
+
invalid = _ref.invalid,
|
48
|
+
invalidLabel = _ref.invalidLabel,
|
49
|
+
onCancel = _ref.onCancel,
|
50
|
+
onChange = _ref.onChange,
|
51
|
+
onSave = _ref.onSave,
|
52
|
+
readOnly = _ref.readOnly,
|
53
|
+
saveLabel = _ref.saveLabel,
|
54
|
+
value = _ref.value,
|
55
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
56
|
+
|
57
|
+
var _useState = (0, _react.useState)(false),
|
58
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
59
|
+
focused = _useState2[0],
|
60
|
+
setFocused = _useState2[1];
|
61
|
+
|
62
|
+
var _useState3 = (0, _react.useState)(''),
|
63
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
64
|
+
initialValue = _useState4[0],
|
65
|
+
setInitialValue = _useState4[1];
|
66
|
+
|
67
|
+
var _useState5 = (0, _react.useState)(false),
|
68
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
69
|
+
dirtyInput = _useState6[0],
|
70
|
+
setDirtyInput = _useState6[1];
|
71
|
+
|
72
|
+
var inputRef = (0, _react.useRef)(null);
|
73
|
+
var canSave = value !== initialValue && !invalid;
|
74
|
+
var escaping = (0, _react.useRef)(false);
|
75
|
+
(0, _react.useEffect)(function () {
|
76
|
+
if (!initialValue && !dirtyInput) {
|
77
|
+
setInitialValue(value);
|
78
|
+
}
|
79
|
+
}, [initialValue, dirtyInput, value]);
|
80
|
+
|
81
|
+
var isTargetingChild = function isTargetingChild(_ref2) {
|
82
|
+
var currentTarget = _ref2.currentTarget,
|
83
|
+
relatedTarget = _ref2.relatedTarget;
|
84
|
+
return currentTarget.contains(relatedTarget);
|
85
|
+
};
|
86
|
+
|
87
|
+
var onChangeHandler = function onChangeHandler(_ref3) {
|
88
|
+
var target = _ref3.target;
|
89
|
+
|
90
|
+
if (!dirtyInput) {
|
91
|
+
setDirtyInput(true);
|
92
|
+
}
|
93
|
+
|
94
|
+
onChange(target.value);
|
95
|
+
};
|
96
|
+
|
97
|
+
var onFocusHandler = function onFocusHandler(e) {
|
98
|
+
if (readOnly) {
|
99
|
+
return;
|
100
|
+
}
|
101
|
+
|
102
|
+
if (!isTargetingChild(e)) {
|
103
|
+
inputRef.current.focus();
|
104
|
+
setFocused(true);
|
105
|
+
}
|
106
|
+
};
|
107
|
+
|
108
|
+
var onSaveHandler = function onSaveHandler() {
|
109
|
+
setInitialValue(value);
|
110
|
+
setFocused(false);
|
111
|
+
setDirtyInput(false);
|
112
|
+
onSave();
|
113
|
+
};
|
114
|
+
|
115
|
+
var onCancelHandler = function onCancelHandler() {
|
116
|
+
setFocused(false);
|
117
|
+
setDirtyInput(false);
|
118
|
+
onCancel(initialValue);
|
119
|
+
};
|
120
|
+
|
121
|
+
var onBlurHandler = function onBlurHandler(e) {
|
122
|
+
if (readOnly || escaping.current) {
|
123
|
+
return;
|
124
|
+
}
|
125
|
+
|
126
|
+
if (!isTargetingChild(e)) {
|
127
|
+
if (canSave) {
|
128
|
+
onSaveHandler();
|
129
|
+
} else {
|
130
|
+
onCancelHandler();
|
131
|
+
}
|
132
|
+
}
|
133
|
+
};
|
134
|
+
|
135
|
+
var returnHandler = function returnHandler() {
|
136
|
+
if (canSave) {
|
137
|
+
onSaveHandler();
|
138
|
+
}
|
139
|
+
};
|
140
|
+
|
141
|
+
var escapeHandler = function escapeHandler() {
|
142
|
+
onCancelHandler();
|
143
|
+
};
|
144
|
+
|
145
|
+
var onKeyHandler = function onKeyHandler(e) {
|
146
|
+
// to prevent blur handler from being called twice add additional state to check if escape is being used
|
147
|
+
escaping.current = true;
|
148
|
+
|
149
|
+
switch (e.key) {
|
150
|
+
case 'Escape':
|
151
|
+
inputRef.current.blur();
|
152
|
+
escapeHandler();
|
153
|
+
break;
|
154
|
+
|
155
|
+
case 'Enter':
|
156
|
+
inputRef.current.blur();
|
157
|
+
returnHandler();
|
158
|
+
break;
|
159
|
+
|
160
|
+
default:
|
161
|
+
break;
|
162
|
+
}
|
163
|
+
|
164
|
+
escaping.current = false;
|
165
|
+
};
|
166
|
+
|
167
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
168
|
+
ref: ref
|
169
|
+
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
|
170
|
+
className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-readonly"), readOnly), _cx)),
|
171
|
+
onFocus: onFocusHandler,
|
172
|
+
onBlur: onBlurHandler
|
173
|
+
}, /*#__PURE__*/_react.default.createElement("input", {
|
174
|
+
className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input")),
|
175
|
+
type: "text",
|
176
|
+
value: value,
|
177
|
+
onChange: onChangeHandler,
|
178
|
+
ref: inputRef,
|
179
|
+
readOnly: readOnly,
|
180
|
+
onKeyDown: onKeyHandler
|
181
|
+
}), focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
|
182
|
+
className: "".concat(blockClass, "__warning-icon")
|
183
|
+
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
184
|
+
hasIconOnly: true,
|
185
|
+
renderIcon: _iconsReact.Close24,
|
186
|
+
size: "sm",
|
187
|
+
iconDescription: cancelLabel,
|
188
|
+
onClick: onCancelHandler,
|
189
|
+
kind: "ghost",
|
190
|
+
tabIndex: 0,
|
191
|
+
key: "cancel",
|
192
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
|
193
|
+
}), canSave && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
194
|
+
hasIconOnly: true,
|
195
|
+
renderIcon: _iconsReact.Checkmark24,
|
196
|
+
size: "sm",
|
197
|
+
iconDescription: saveLabel,
|
198
|
+
onClick: onSaveHandler,
|
199
|
+
kind: "ghost",
|
200
|
+
tabIndex: 0,
|
201
|
+
key: "save",
|
202
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
203
|
+
disabled: !canSave
|
204
|
+
})) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
205
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
206
|
+
hasIconOnly: true,
|
207
|
+
renderIcon: readOnly ? _iconsReact.EditOff24 : _iconsReact.Edit24,
|
208
|
+
size: "sm",
|
209
|
+
iconDescription: editLabel,
|
210
|
+
onClick: onFocusHandler,
|
211
|
+
kind: "ghost",
|
212
|
+
disabled: readOnly,
|
213
|
+
tabIndex: 0,
|
214
|
+
key: "edit"
|
215
|
+
})), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
|
216
|
+
className: "".concat(blockClass, "__warning-text")
|
217
|
+
}, invalidLabel));
|
218
|
+
});
|
219
|
+
exports.InlineEditV2 = InlineEditV2;
|
220
|
+
exports.InlineEditV2 = InlineEditV2 = _settings.pkg.checkComponentEnabled(InlineEditV2, componentName);
|
221
|
+
InlineEditV2.displayName = componentName;
|
222
|
+
InlineEditV2.propTypes = {
|
223
|
+
/**
|
224
|
+
* label for cancel button
|
225
|
+
*/
|
226
|
+
cancelLabel: _propTypes.default.string.isRequired,
|
227
|
+
|
228
|
+
/**
|
229
|
+
* label for edit button
|
230
|
+
*/
|
231
|
+
editLabel: _propTypes.default.string.isRequired,
|
232
|
+
|
233
|
+
/**
|
234
|
+
* determines if the input is invalid
|
235
|
+
*/
|
236
|
+
invalid: _propTypes.default.bool,
|
237
|
+
|
238
|
+
/**
|
239
|
+
* text that is displayed if the input is invalid
|
240
|
+
*/
|
241
|
+
invalidLabel: _propTypes.default.string,
|
242
|
+
|
243
|
+
/**
|
244
|
+
* handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
|
245
|
+
*/
|
246
|
+
onCancel: _propTypes.default.func.isRequired,
|
247
|
+
|
248
|
+
/**
|
249
|
+
* handler that is called when the input is updated
|
250
|
+
*/
|
251
|
+
onChange: _propTypes.default.func.isRequired,
|
252
|
+
|
253
|
+
/**
|
254
|
+
* handler that is called when the save button is pressed or when the user removes focus from the input if it has a new value
|
255
|
+
*/
|
256
|
+
onSave: _propTypes.default.func.isRequired,
|
257
|
+
|
258
|
+
/**
|
259
|
+
* determines if the input is in readOnly mode
|
260
|
+
*/
|
261
|
+
readOnly: _propTypes.default.bool,
|
262
|
+
|
263
|
+
/**
|
264
|
+
* label for save button
|
265
|
+
*/
|
266
|
+
saveLabel: _propTypes.default.string.isRequired,
|
267
|
+
|
268
|
+
/**
|
269
|
+
* current value of the input
|
270
|
+
*/
|
271
|
+
value: _propTypes.default.string.isRequired
|
272
|
+
};
|
273
|
+
InlineEditV2.defaultProps = {
|
274
|
+
invalid: false,
|
275
|
+
invalidLabel: '',
|
276
|
+
readOnly: false
|
277
|
+
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "InlineEditV2", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _InlineEditV.InlineEditV2;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
|
13
|
+
var _InlineEditV = require("./InlineEditV2");
|
@@ -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 _iconsReact = require("@carbon/icons-react");
|
|
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
|
|
@@ -498,20 +490,22 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
498
490
|
onResize: handleResize,
|
499
491
|
targetRef: contentRef
|
500
492
|
});
|
501
|
-
return
|
493
|
+
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, {
|
502
494
|
id: "".concat(blockClass, "-outer"),
|
503
495
|
className: mainPanelClassNames,
|
504
|
-
style: {
|
505
|
-
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
|
506
|
-
},
|
507
|
-
onAnimationEnd: onAnimationEnd,
|
508
|
-
onAnimationStart: function onAnimationStart(event) {
|
509
|
-
return _onAnimationStart(event);
|
510
|
-
},
|
511
496
|
onBlur: handleBlur,
|
512
497
|
ref: contentRef,
|
513
498
|
role: "complementary",
|
514
|
-
"aria-label": title
|
499
|
+
"aria-label": title,
|
500
|
+
onAnimationComplete: onAnimationEnd,
|
501
|
+
onAnimationStart: function onAnimationStart(event) {
|
502
|
+
return _onAnimationStart(event);
|
503
|
+
},
|
504
|
+
variants: _variants.panelVariants,
|
505
|
+
initial: "hidden",
|
506
|
+
animate: "visible",
|
507
|
+
exit: "exit",
|
508
|
+
custom: placement
|
515
509
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
516
510
|
ref: startTrapRef,
|
517
511
|
tabIndex: "0",
|
@@ -531,13 +525,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
531
525
|
tabIndex: "0",
|
532
526
|
role: "link",
|
533
527
|
className: "".concat(blockClass, "__visually-hidden")
|
534
|
-
}, "Focus sentinel")), includeOverlay && /*#__PURE__*/_react.default.createElement(
|
528
|
+
}, "Focus sentinel")), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
|
529
|
+
variants: _variants.overlayVariants,
|
530
|
+
initial: "hidden",
|
531
|
+
animate: "visible",
|
532
|
+
exit: "exit",
|
535
533
|
ref: sidePanelOverlayRef,
|
536
|
-
className: "".concat(blockClass, "__overlay")
|
537
|
-
|
538
|
-
animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
|
539
|
-
}
|
540
|
-
}));
|
534
|
+
className: "".concat(blockClass, "__overlay")
|
535
|
+
}))));
|
541
536
|
}); // Return a placeholder if not released and not enabled by feature flag
|
542
537
|
|
543
538
|
|