@carbon/ibm-products 2.0.0-rc.7 → 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.
Files changed (51) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +68 -6
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +2 -2
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +0 -6
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +68 -6
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +2 -2
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +68 -6
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +2 -2
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  19. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
  20. package/es/components/InlineEdit/InlineEdit.js +27 -427
  21. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  22. package/es/components/InlineEditV1/index.js +7 -0
  23. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  24. package/es/components/InlineEditV2/index.js +7 -0
  25. package/es/components/PageHeader/PageHeaderTitle.js +2 -4
  26. package/es/global/js/package-settings.js +3 -1
  27. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  28. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
  29. package/lib/components/InlineEdit/InlineEdit.js +27 -428
  30. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  31. package/lib/components/InlineEditV1/index.js +13 -0
  32. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  33. package/lib/components/InlineEditV2/index.js +13 -0
  34. package/lib/components/PageHeader/PageHeaderTitle.js +2 -4
  35. package/lib/global/js/package-settings.js +3 -1
  36. package/package.json +2 -2
  37. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  38. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  39. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  40. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
  41. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  42. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  43. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  44. package/scss/components/InlineEditV2/_index.scss +10 -0
  45. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  46. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  47. package/scss/components/PageHeader/_page-header.scss +0 -4
  48. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  49. package/scss/components/_index-released-only.scss +1 -1
  50. package/scss/components/_index-with-carbon.scss +2 -1
  51. 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
+ };
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright IBM Corp. 2022, 2022
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export { InlineEditV2 } from './InlineEditV2';
@@ -65,12 +65,10 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
65
65
  titleText = asText;
66
66
  }
67
67
 
68
- return /*#__PURE__*/React.createElement("div", {
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
- }, /*#__PURE__*/React.createElement("h1", {
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;
@@ -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
  },
@@ -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 selectionAreas = _ref.selectionAreas,
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;