@carbon/ibm-products 2.0.0-rc.6 → 2.0.0-rc.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/css/index-full-carbon.css +96 -12
- 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 +6 -9
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +96 -12
- 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 +89 -9
- 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/ActionSet/ActionSet.js +7 -3
- package/es/components/AddSelect/add-select-utils.js +2 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
- package/es/components/Datagrid/useNestedRowExpander.js +7 -2
- package/es/components/InlineEdit/InlineEdit.js +27 -427
- package/es/components/InlineEditV1/InlineEditV1.js +447 -0
- package/es/components/InlineEditV1/index.js +7 -0
- package/es/components/InlineEditV2/InlineEditV2.js +289 -0
- package/es/components/InlineEditV2/index.js +7 -0
- package/es/components/OptionsTile/OptionsTile.js +28 -12
- package/es/components/PageHeader/PageHeaderTitle.js +2 -4
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useControllableState.js +83 -0
- package/es/global/js/package-settings.js +3 -1
- package/lib/components/ActionSet/ActionSet.js +7 -3
- package/lib/components/AddSelect/add-select-utils.js +2 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +7 -1
- package/lib/components/InlineEdit/InlineEdit.js +27 -428
- package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
- package/lib/components/InlineEditV1/index.js +13 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/OptionsTile/OptionsTile.js +28 -11
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -4
- package/lib/global/js/hooks/index.js +9 -1
- package/lib/global/js/hooks/useControllableState.js +94 -0
- package/lib/global/js/package-settings.js +3 -1
- package/package.json +2 -2
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
- package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
- package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
- package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
- package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
- package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
- package/scss/components/PageHeader/_page-header.scss +0 -4
- package/scss/components/_index-released-only-with-carbon.scss +1 -1
- package/scss/components/_index-released-only.scss +1 -1
- package/scss/components/_index-with-carbon.scss +2 -1
- package/scss/components/_index.scss +2 -1
@@ -0,0 +1,289 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
+
var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Copyright IBM Corp. 2022, 2022
|
9
|
+
*
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
12
|
+
*/
|
13
|
+
import React, { useState, useEffect, forwardRef, useRef } from 'react';
|
14
|
+
import { Button } from '@carbon/react';
|
15
|
+
import cx from 'classnames';
|
16
|
+
import PropTypes from 'prop-types';
|
17
|
+
import { Edit, Checkmark, Close, // EditOff,
|
18
|
+
WarningFilled } from '@carbon/react/icons';
|
19
|
+
import { pkg, carbon } from '../../settings';
|
20
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
21
|
+
var componentName = 'InlineEditV2';
|
22
|
+
var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
|
23
|
+
export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
24
|
+
var cancelLabel = _ref.cancelLabel,
|
25
|
+
editLabel = _ref.editLabel,
|
26
|
+
id = _ref.id,
|
27
|
+
invalid = _ref.invalid,
|
28
|
+
invalidLabel = _ref.invalidLabel,
|
29
|
+
labelText = _ref.labelText,
|
30
|
+
onCancel = _ref.onCancel,
|
31
|
+
onChange = _ref.onChange,
|
32
|
+
onSave = _ref.onSave,
|
33
|
+
saveLabel = _ref.saveLabel,
|
34
|
+
value = _ref.value,
|
35
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
36
|
+
|
37
|
+
var _useState = useState(false),
|
38
|
+
_useState2 = _slicedToArray(_useState, 2),
|
39
|
+
focused = _useState2[0],
|
40
|
+
setFocused = _useState2[1];
|
41
|
+
|
42
|
+
var _useState3 = useState(''),
|
43
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
44
|
+
initialValue = _useState4[0],
|
45
|
+
setInitialValue = _useState4[1];
|
46
|
+
|
47
|
+
var _useState5 = useState(false),
|
48
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
49
|
+
dirtyInput = _useState6[0],
|
50
|
+
setDirtyInput = _useState6[1];
|
51
|
+
|
52
|
+
var inputRef = useRef(null);
|
53
|
+
var canSave = value !== initialValue && !invalid;
|
54
|
+
var escaping = useRef(false);
|
55
|
+
useEffect(function () {
|
56
|
+
if (!initialValue && !dirtyInput) {
|
57
|
+
setInitialValue(value);
|
58
|
+
}
|
59
|
+
}, [initialValue, dirtyInput, value]);
|
60
|
+
|
61
|
+
var isTargetingChild = function isTargetingChild(_ref2) {
|
62
|
+
var currentTarget = _ref2.currentTarget,
|
63
|
+
relatedTarget = _ref2.relatedTarget;
|
64
|
+
return currentTarget.contains(relatedTarget);
|
65
|
+
};
|
66
|
+
|
67
|
+
var onChangeHandler = function onChangeHandler(_ref3) {
|
68
|
+
var target = _ref3.target;
|
69
|
+
|
70
|
+
if (!dirtyInput) {
|
71
|
+
setDirtyInput(true);
|
72
|
+
}
|
73
|
+
|
74
|
+
onChange(target.value);
|
75
|
+
};
|
76
|
+
|
77
|
+
var onFocusHandler = function onFocusHandler(e) {
|
78
|
+
// if (readOnly) {
|
79
|
+
// return;
|
80
|
+
// }
|
81
|
+
if (!isTargetingChild(e)) {
|
82
|
+
inputRef.current.focus();
|
83
|
+
setFocused(true);
|
84
|
+
}
|
85
|
+
};
|
86
|
+
|
87
|
+
var onSaveHandler = function onSaveHandler() {
|
88
|
+
setInitialValue(value);
|
89
|
+
setFocused(false);
|
90
|
+
setDirtyInput(false);
|
91
|
+
onSave();
|
92
|
+
};
|
93
|
+
|
94
|
+
var onCancelHandler = function onCancelHandler() {
|
95
|
+
setFocused(false);
|
96
|
+
setDirtyInput(false);
|
97
|
+
onCancel(initialValue);
|
98
|
+
};
|
99
|
+
|
100
|
+
var onBlurHandler = function onBlurHandler(e) {
|
101
|
+
// if (readOnly || escaping.current) {
|
102
|
+
if (escaping.current) {
|
103
|
+
return;
|
104
|
+
}
|
105
|
+
|
106
|
+
if (!isTargetingChild(e)) {
|
107
|
+
if (canSave) {
|
108
|
+
onSaveHandler();
|
109
|
+
} else {
|
110
|
+
onCancelHandler();
|
111
|
+
}
|
112
|
+
}
|
113
|
+
};
|
114
|
+
|
115
|
+
var returnHandler = function returnHandler() {
|
116
|
+
if (canSave) {
|
117
|
+
onSaveHandler();
|
118
|
+
}
|
119
|
+
};
|
120
|
+
|
121
|
+
var escapeHandler = function escapeHandler() {
|
122
|
+
onCancelHandler();
|
123
|
+
};
|
124
|
+
|
125
|
+
var onKeyHandler = function onKeyHandler(e) {
|
126
|
+
// to prevent blur handler from being called twice add additional state to check if escape is being used
|
127
|
+
escaping.current = true;
|
128
|
+
|
129
|
+
switch (e.key) {
|
130
|
+
case 'Escape':
|
131
|
+
inputRef.current.blur();
|
132
|
+
escapeHandler();
|
133
|
+
break;
|
134
|
+
|
135
|
+
case 'Enter':
|
136
|
+
inputRef.current.blur();
|
137
|
+
returnHandler();
|
138
|
+
break;
|
139
|
+
|
140
|
+
default:
|
141
|
+
break;
|
142
|
+
}
|
143
|
+
|
144
|
+
escaping.current = false;
|
145
|
+
};
|
146
|
+
|
147
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
148
|
+
ref: ref
|
149
|
+
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
|
150
|
+
className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "-focused"), focused)),
|
151
|
+
onFocus: onFocusHandler,
|
152
|
+
onBlur: onBlurHandler
|
153
|
+
}, /*#__PURE__*/React.createElement("label", {
|
154
|
+
className: "".concat(blockClass, "__text-input-label"),
|
155
|
+
htmlFor: id
|
156
|
+
}, labelText), /*#__PURE__*/React.createElement("input", {
|
157
|
+
id: id,
|
158
|
+
className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--sm")),
|
159
|
+
type: "text",
|
160
|
+
value: value,
|
161
|
+
onChange: onChangeHandler,
|
162
|
+
ref: inputRef // readOnly={readOnly}
|
163
|
+
,
|
164
|
+
onKeyDown: onKeyHandler
|
165
|
+
}), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
|
166
|
+
size: 16,
|
167
|
+
className: "".concat(blockClass, "__warning-icon")
|
168
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
169
|
+
hasIconOnly: true,
|
170
|
+
renderIcon: function renderIcon() {
|
171
|
+
return /*#__PURE__*/React.createElement(Close, {
|
172
|
+
size: 24
|
173
|
+
});
|
174
|
+
},
|
175
|
+
size: "sm",
|
176
|
+
iconDescription: cancelLabel,
|
177
|
+
onClick: onCancelHandler,
|
178
|
+
kind: "ghost",
|
179
|
+
tabIndex: 0,
|
180
|
+
key: "cancel",
|
181
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
|
182
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
183
|
+
hasIconOnly: true,
|
184
|
+
renderIcon: function renderIcon() {
|
185
|
+
return /*#__PURE__*/React.createElement(Checkmark, {
|
186
|
+
size: 24
|
187
|
+
});
|
188
|
+
},
|
189
|
+
size: "sm",
|
190
|
+
iconDescription: saveLabel,
|
191
|
+
onClick: onSaveHandler,
|
192
|
+
kind: "ghost",
|
193
|
+
tabIndex: 0,
|
194
|
+
key: "save",
|
195
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
196
|
+
disabled: !canSave
|
197
|
+
})) : /*#__PURE__*/React.createElement(Button, {
|
198
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
199
|
+
hasIconOnly: true // renderIcon={readOnly ? EditOff24 : Edit24}
|
200
|
+
,
|
201
|
+
renderIcon: function renderIcon() {
|
202
|
+
return /*#__PURE__*/React.createElement(Edit, {
|
203
|
+
size: 24
|
204
|
+
});
|
205
|
+
},
|
206
|
+
size: "sm" // iconDescription={readOnly ? readOnlyLabel : editLabel}
|
207
|
+
,
|
208
|
+
iconDescription: editLabel,
|
209
|
+
onClick: onFocusHandler,
|
210
|
+
kind: "ghost",
|
211
|
+
tabIndex: 0,
|
212
|
+
key: "edit"
|
213
|
+
})), focused && invalid && /*#__PURE__*/React.createElement("p", {
|
214
|
+
className: "".concat(blockClass, "__warning-text")
|
215
|
+
}, invalidLabel));
|
216
|
+
});
|
217
|
+
InlineEditV2 = pkg.checkComponentEnabled(InlineEditV2, componentName);
|
218
|
+
InlineEditV2.displayName = componentName;
|
219
|
+
InlineEditV2.propTypes = {
|
220
|
+
/**
|
221
|
+
* label for cancel button
|
222
|
+
*/
|
223
|
+
cancelLabel: PropTypes.string.isRequired,
|
224
|
+
|
225
|
+
/**
|
226
|
+
* label for edit button
|
227
|
+
*/
|
228
|
+
editLabel: PropTypes.string.isRequired,
|
229
|
+
|
230
|
+
/**
|
231
|
+
* Specify a custom id for the input
|
232
|
+
*/
|
233
|
+
id: PropTypes.string.isRequired,
|
234
|
+
|
235
|
+
/**
|
236
|
+
* determines if the input is invalid
|
237
|
+
*/
|
238
|
+
invalid: PropTypes.bool,
|
239
|
+
|
240
|
+
/**
|
241
|
+
* text that is displayed if the input is invalid
|
242
|
+
*/
|
243
|
+
invalidLabel: PropTypes.string,
|
244
|
+
|
245
|
+
/**
|
246
|
+
* Provide the text that will be read by a screen reader when visiting this control
|
247
|
+
*/
|
248
|
+
labelText: PropTypes.string.isRequired,
|
249
|
+
|
250
|
+
/**
|
251
|
+
* 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
|
252
|
+
*/
|
253
|
+
onCancel: PropTypes.func.isRequired,
|
254
|
+
|
255
|
+
/**
|
256
|
+
* handler that is called when the input is updated
|
257
|
+
*/
|
258
|
+
onChange: PropTypes.func.isRequired,
|
259
|
+
|
260
|
+
/**
|
261
|
+
* 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
|
262
|
+
*/
|
263
|
+
onSave: PropTypes.func.isRequired,
|
264
|
+
|
265
|
+
/**
|
266
|
+
* determines if the input is in readOnly mode
|
267
|
+
*/
|
268
|
+
// readOnly: PropTypes.bool,
|
269
|
+
|
270
|
+
/**
|
271
|
+
* label for the edit button that displays when in read only mode
|
272
|
+
*/
|
273
|
+
// readOnlyLabel: PropTypes.string,
|
274
|
+
|
275
|
+
/**
|
276
|
+
* label for save button
|
277
|
+
*/
|
278
|
+
saveLabel: PropTypes.string.isRequired,
|
279
|
+
|
280
|
+
/**
|
281
|
+
* current value of the input
|
282
|
+
*/
|
283
|
+
value: PropTypes.string.isRequired
|
284
|
+
};
|
285
|
+
InlineEditV2.defaultProps = {
|
286
|
+
invalid: false,
|
287
|
+
invalidLabel: '' // readOnly: false,
|
288
|
+
|
289
|
+
};
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
|
5
|
+
var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
|
6
6
|
|
7
7
|
/**
|
8
8
|
* Copyright IBM Corp. 2021, 2022
|
@@ -17,7 +17,8 @@ import PropTypes from 'prop-types';
|
|
17
17
|
import cx from 'classnames';
|
18
18
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
19
19
|
import uuidv4 from '../../global/js/utils/uuidv4';
|
20
|
-
import { pkg } from '../../settings';
|
20
|
+
import { pkg } from '../../settings';
|
21
|
+
import { useControllableState } from '../../global/js/hooks'; // Carbon and package components we use.
|
21
22
|
|
22
23
|
import { Toggle } from '@carbon/react';
|
23
24
|
import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/react/icons';
|
@@ -28,6 +29,7 @@ var componentName = 'OptionsTile'; // NOTE: the component SCSS is not imported h
|
|
28
29
|
// Default values for props
|
29
30
|
|
30
31
|
var defaults = {
|
32
|
+
onChange: function onChange() {},
|
31
33
|
size: 'xl'
|
32
34
|
};
|
33
35
|
/**
|
@@ -42,6 +44,8 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
42
44
|
invalidText = _ref.invalidText,
|
43
45
|
locked = _ref.locked,
|
44
46
|
lockedText = _ref.lockedText,
|
47
|
+
_ref$onChange = _ref.onChange,
|
48
|
+
_onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
|
45
49
|
onToggle = _ref.onToggle,
|
46
50
|
open = _ref.open,
|
47
51
|
_ref$size = _ref.size,
|
@@ -55,18 +59,24 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
55
59
|
|
56
60
|
var _useState = useState(open),
|
57
61
|
_useState2 = _slicedToArray(_useState, 2),
|
58
|
-
|
59
|
-
|
62
|
+
prevIsOpen = _useState2[0],
|
63
|
+
setPrevIsOpen = _useState2[1];
|
60
64
|
|
61
|
-
var _useState3 = useState(
|
65
|
+
var _useState3 = useState(false),
|
62
66
|
_useState4 = _slicedToArray(_useState3, 2),
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
var
|
67
|
-
|
68
|
-
|
69
|
-
|
67
|
+
closing = _useState4[0],
|
68
|
+
setClosing = _useState4[1];
|
69
|
+
|
70
|
+
var _useControllableState = useControllableState({
|
71
|
+
value: open,
|
72
|
+
defaultValue: open || null,
|
73
|
+
onChange: function onChange(value) {
|
74
|
+
return _onChange(value);
|
75
|
+
}
|
76
|
+
}),
|
77
|
+
_useControllableState2 = _slicedToArray(_useControllableState, 2),
|
78
|
+
isOpen = _useControllableState2[0],
|
79
|
+
setIsOpen = _useControllableState2[1];
|
70
80
|
|
71
81
|
var detailsRef = useRef(null);
|
72
82
|
var contentRef = useRef(null);
|
@@ -297,6 +307,12 @@ OptionsTile.propTypes = {
|
|
297
307
|
*/
|
298
308
|
lockedText: PropTypes.string,
|
299
309
|
|
310
|
+
/**
|
311
|
+
* Provide a function which will be called each time the user
|
312
|
+
* toggles the open state of the OptionsTile.
|
313
|
+
*/
|
314
|
+
onChange: PropTypes.func,
|
315
|
+
|
300
316
|
/**
|
301
317
|
* Provide a function which will be called each time the user
|
302
318
|
* interacts with the toggle.
|
@@ -65,12 +65,10 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
65
65
|
titleText = asText;
|
66
66
|
}
|
67
67
|
|
68
|
-
return /*#__PURE__*/React.createElement("
|
68
|
+
return /*#__PURE__*/React.createElement("h1", {
|
69
69
|
className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
|
70
70
|
title: titleText
|
71
|
-
},
|
72
|
-
className: "".concat(blockClass, "__title-wrapper")
|
73
|
-
}, titleInnards));
|
71
|
+
}, titleInnards);
|
74
72
|
};
|
75
73
|
export var inlineEditRequired = function inlineEditRequired(_ref2) {
|
76
74
|
var onSave = _ref2.onSave;
|
@@ -13,4 +13,5 @@ export { useCreateComponentStepChange } from './useCreateComponentStepChange';
|
|
13
13
|
export { usePreviousValue } from './usePreviousValue';
|
14
14
|
export { useResetCreateComponent } from './useResetCreateComponent';
|
15
15
|
export { useRetrieveStepData } from './useRetrieveStepData';
|
16
|
-
export { useValidCreateStepCount } from './useValidCreateStepCount';
|
16
|
+
export { useValidCreateStepCount } from './useValidCreateStepCount';
|
17
|
+
export { useControllableState } from './useControllableState';
|
@@ -0,0 +1,83 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Copyright IBM Corp. 2016, 2022
|
5
|
+
*
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
9
|
+
import { useEffect, useRef, useState } from 'react';
|
10
|
+
import pconsole from '../utils/pconsole';
|
11
|
+
/**
|
12
|
+
* This custom hook simplifies the behavior of a component if it has state that
|
13
|
+
* can be both controlled and uncontrolled. It functions identical to a
|
14
|
+
* useState() hook and provides [state, setState] for you to use. You can use
|
15
|
+
* the `onChange` argument to allow updates to the `state` to be communicated to
|
16
|
+
* owners of controlled components.
|
17
|
+
*
|
18
|
+
* Note: this hook will warn if a component is switching from controlled to
|
19
|
+
* uncontrolled, or vice-versa.
|
20
|
+
*
|
21
|
+
* @param {object} config
|
22
|
+
* @param {string} config.name - the name of the custom component
|
23
|
+
* @param {any} config.defaultValue - the default value used for the state. This will be
|
24
|
+
* the fallback value used if `value` is not defined.
|
25
|
+
* @param {Function} config.onChange - an optional function that is called when
|
26
|
+
* the value of the state changes. This is useful for communicating to parents of
|
27
|
+
* controlled components that the value is requesting to be changed.
|
28
|
+
* @param {any} config.value - a controlled value. Omitting this means that the state is
|
29
|
+
* uncontrolled
|
30
|
+
* @returns {[any, Function]}
|
31
|
+
*/
|
32
|
+
|
33
|
+
export function useControllableState(_ref) {
|
34
|
+
var defaultValue = _ref.defaultValue,
|
35
|
+
_ref$name = _ref.name,
|
36
|
+
name = _ref$name === void 0 ? 'custom' : _ref$name,
|
37
|
+
onChange = _ref.onChange,
|
38
|
+
value = _ref.value;
|
39
|
+
|
40
|
+
var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
|
41
|
+
_useState2 = _slicedToArray(_useState, 2),
|
42
|
+
state = _useState2[0],
|
43
|
+
internalSetState = _useState2[1];
|
44
|
+
|
45
|
+
var controlled = useRef(null);
|
46
|
+
|
47
|
+
if (controlled.current === null) {
|
48
|
+
controlled.current = value !== undefined;
|
49
|
+
}
|
50
|
+
|
51
|
+
function setState(stateOrUpdater) {
|
52
|
+
var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
|
53
|
+
|
54
|
+
if (controlled.current === false) {
|
55
|
+
internalSetState(value);
|
56
|
+
}
|
57
|
+
|
58
|
+
if (onChange) {
|
59
|
+
onChange(value);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
useEffect(function () {
|
64
|
+
var controlledValue = value !== undefined; // Uncontrolled -> Controlled
|
65
|
+
// If the component prop is uncontrolled, the prop value should be undefined
|
66
|
+
|
67
|
+
if (controlled.current === false && controlledValue) {
|
68
|
+
pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n This is likely caused by the value changing to a defined value\n from undefined. Decide between using a controlled or uncontrolled\n value for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components");
|
69
|
+
} // Controlled -> Uncontrolled
|
70
|
+
// If the component prop is controlled, the prop value should be defined
|
71
|
+
|
72
|
+
|
73
|
+
if (controlled.current === true && !controlledValue) {
|
74
|
+
pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n 'This is likely caused by the value changing to an undefined value\n 'from a defined one. Decide between using a controlled or\n 'uncontrolled value for the lifetime of the component.\n 'More info: https://reactjs.org/link/controlled-components");
|
75
|
+
}
|
76
|
+
}, [name, value]);
|
77
|
+
|
78
|
+
if (controlled.current === true) {
|
79
|
+
return [value, setState];
|
80
|
+
}
|
81
|
+
|
82
|
+
return [state, setState];
|
83
|
+
}
|
@@ -36,6 +36,7 @@ var defaults = {
|
|
36
36
|
HTTPErrorOther: true,
|
37
37
|
ImportModal: true,
|
38
38
|
InlineEdit: true,
|
39
|
+
InlineEditV1: true,
|
39
40
|
NotificationsPanel: true,
|
40
41
|
NoDataEmptyState: true,
|
41
42
|
NoTagsEmptyState: true,
|
@@ -70,7 +71,8 @@ var defaults = {
|
|
70
71
|
EditTearsheet: false,
|
71
72
|
EditTearsheetNarrow: false,
|
72
73
|
EditFullPage: false,
|
73
|
-
EditUpdateCards: false
|
74
|
+
EditUpdateCards: false,
|
75
|
+
InlineEditV2: false
|
74
76
|
/* new component flags here - comment used by generate CLI */
|
75
77
|
|
76
78
|
},
|
@@ -25,7 +25,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
|
|
25
25
|
|
26
26
|
var _react2 = require("@carbon/react");
|
27
27
|
|
28
|
-
var _excluded = ["className", "disabled", "kind", "label", "loading"],
|
28
|
+
var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpressive"],
|
29
29
|
_excluded2 = ["actions", "buttonSize", "className", "size"];
|
30
30
|
|
31
31
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
@@ -36,15 +36,19 @@ var blockClass = "".concat(_settings.pkg.prefix, "--action-set");
|
|
36
36
|
var componentName = 'ActionSet'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
37
37
|
|
38
38
|
var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
39
|
+
var _ref2;
|
40
|
+
|
39
41
|
var className = _ref.className,
|
40
42
|
disabled = _ref.disabled,
|
41
43
|
kind = _ref.kind,
|
42
44
|
label = _ref.label,
|
43
45
|
loading = _ref.loading,
|
46
|
+
_ref$isExpressive = _ref.isExpressive,
|
47
|
+
isExpressive = _ref$isExpressive === void 0 ? true : _ref$isExpressive,
|
44
48
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
45
49
|
return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
|
46
|
-
isExpressive:
|
47
|
-
className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)(
|
50
|
+
isExpressive: isExpressive,
|
51
|
+
className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--expressive"), isExpressive), _ref2)]),
|
48
52
|
disabled: disabled || loading || false,
|
49
53
|
kind: kind,
|
50
54
|
ref: ref
|
@@ -104,7 +104,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
|
|
104
104
|
|
105
105
|
if (searchTerm || globalFiltersApplied) {
|
106
106
|
var results = itemIds.reduce(function (prev, cur) {
|
107
|
-
if (normalizedItems[cur].title.toLowerCase().includes(searchTerm)) {
|
107
|
+
if (normalizedItems[cur].title.toLowerCase().includes(searchTerm.toLowerCase())) {
|
108
108
|
prev.push(normalizedItems[cur]);
|
109
109
|
}
|
110
110
|
|
@@ -151,7 +151,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
|
|
151
151
|
} else {
|
152
152
|
if (searchTerm) {
|
153
153
|
return items.entries.filter(function (item) {
|
154
|
-
return item.title.toLowerCase().includes(searchTerm);
|
154
|
+
return item.title.toLowerCase().includes(searchTerm.toLowerCase());
|
155
155
|
});
|
156
156
|
}
|
157
157
|
|
@@ -421,7 +421,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
421
421
|
currentMatcher: currentMatcher,
|
422
422
|
rows: rows,
|
423
423
|
setActiveCellContent: setActiveCellContent,
|
424
|
-
updateData: updateData
|
424
|
+
updateData: updateData,
|
425
|
+
activeCellCoordinates: activeCellCoordinates
|
425
426
|
}; // Allow arrow key navigation if there are less than two activeKeys OR
|
426
427
|
// if one of the activeCellCoordinates is in a header position
|
427
428
|
|
@@ -16,11 +16,20 @@ var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
17
17
|
*/
|
18
18
|
var handleCellDeletion = function handleCellDeletion(_ref) {
|
19
|
-
var
|
19
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
20
|
+
selectionAreas = _ref.selectionAreas,
|
20
21
|
currentMatcher = _ref.currentMatcher,
|
21
22
|
rows = _ref.rows,
|
22
23
|
setActiveCellContent = _ref.setActiveCellContent,
|
23
24
|
updateData = _ref.updateData;
|
25
|
+
|
26
|
+
// This means that the delete key has been pressed when the active cell is in a header,
|
27
|
+
// not within the spreadsheet body. To delete an entire row/column, it must first be
|
28
|
+
// selected, and then can be deleted.
|
29
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header') {
|
30
|
+
return;
|
31
|
+
}
|
32
|
+
|
24
33
|
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
25
34
|
var indexOfCurrentSelectionArea = selectionAreaClone.findIndex(function (item) {
|
26
35
|
return item.matcher === currentMatcher;
|
@@ -9,6 +9,8 @@ exports.default = void 0;
|
|
9
9
|
|
10
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
11
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
12
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
15
|
|
14
16
|
var _react = _interopRequireDefault(require("react"));
|
@@ -38,7 +40,11 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
38
40
|
var _cx;
|
39
41
|
|
40
42
|
var row = _ref.row;
|
41
|
-
return row.canExpand && /*#__PURE__*/_react.default.createElement("
|
43
|
+
return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
|
44
|
+
type: "button",
|
45
|
+
"aria-label": "Expand current row",
|
46
|
+
className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
|
47
|
+
}, row.getToggleRowExpandedProps()), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
|
42
48
|
className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
|
43
49
|
}));
|
44
50
|
},
|