@carbon/ibm-products 2.0.0-rc.27 → 2.0.0-rc.29

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. package/css/config.css +3 -0
  2. package/css/config.css.map +1 -0
  3. package/css/index-full-carbon.css +126 -355
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +6 -6
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +196 -252
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +4 -4
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +126 -355
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +6 -6
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +126 -355
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +6 -6
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/AboutModal/AboutModal.js +44 -66
  20. package/es/components/ActionBar/ActionBar.js +13 -29
  21. package/es/components/AddSelect/AddSelectBody.js +4 -2
  22. package/es/components/AddSelect/AddSelectColumn.js +11 -5
  23. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  24. package/es/components/AddSelect/AddSelectRow.js +3 -3
  25. package/es/components/AddSelect/AddSelectSort.js +2 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +15 -21
  27. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  28. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +7 -8
  29. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  30. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  31. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
  33. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -5
  34. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  35. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +19 -1
  36. package/es/components/Datagrid/index.js +1 -0
  37. package/es/components/Datagrid/useEditableCell.js +13 -0
  38. package/es/components/Datagrid/useFiltering.js +4 -2
  39. package/es/components/Datagrid/useInlineEdit.js +16 -11
  40. package/es/components/Datagrid/useOnRowClick.js +11 -1
  41. package/es/components/Datagrid/useSelectRows.js +2 -0
  42. package/es/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +92 -30
  43. package/es/components/{InlineEdit → EditInPlace}/index.js +1 -1
  44. package/es/components/ExampleComponent/ExampleDeprecatedComponent.js +24 -0
  45. package/es/components/PageHeader/PageHeader.js +36 -35
  46. package/es/components/PageHeader/PageHeaderTitle.js +18 -18
  47. package/es/components/SidePanel/SidePanel.js +25 -26
  48. package/es/components/TagSet/TagSet.js +5 -7
  49. package/es/components/Tearsheet/Tearsheet.js +5 -0
  50. package/es/components/Tearsheet/TearsheetShell.js +4 -6
  51. package/es/components/index.js +1 -2
  52. package/es/global/js/hooks/useResizeObserver.js +79 -0
  53. package/es/global/js/hooks/useWindowResize.js +6 -0
  54. package/es/global/js/hooks/useWindowScroll.js +7 -0
  55. package/es/global/js/package-settings.js +4 -6
  56. package/es/settings.js +40 -20
  57. package/lib/components/AboutModal/AboutModal.js +43 -66
  58. package/lib/components/ActionBar/ActionBar.js +13 -29
  59. package/lib/components/AddSelect/AddSelectBody.js +4 -2
  60. package/lib/components/AddSelect/AddSelectColumn.js +11 -5
  61. package/lib/components/AddSelect/AddSelectFilter.js +4 -3
  62. package/lib/components/AddSelect/AddSelectRow.js +2 -2
  63. package/lib/components/AddSelect/AddSelectSort.js +2 -1
  64. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +13 -19
  65. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  66. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  67. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  68. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  69. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  70. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
  71. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -5
  72. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  73. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +18 -1
  74. package/lib/components/Datagrid/index.js +8 -0
  75. package/lib/components/Datagrid/useEditableCell.js +23 -0
  76. package/lib/components/Datagrid/useFiltering.js +4 -2
  77. package/lib/components/Datagrid/useInlineEdit.js +22 -11
  78. package/lib/components/Datagrid/useOnRowClick.js +11 -1
  79. package/lib/components/Datagrid/useSelectRows.js +2 -0
  80. package/lib/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +100 -34
  81. package/lib/components/{InlineEdit → EditInPlace}/index.js +3 -3
  82. package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js +38 -0
  83. package/lib/components/PageHeader/PageHeader.js +36 -35
  84. package/lib/components/PageHeader/PageHeaderTitle.js +19 -19
  85. package/lib/components/SidePanel/SidePanel.js +25 -26
  86. package/lib/components/TagSet/TagSet.js +5 -7
  87. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  88. package/lib/components/Tearsheet/TearsheetShell.js +4 -6
  89. package/lib/components/index.js +7 -15
  90. package/lib/global/js/hooks/useResizeObserver.js +91 -0
  91. package/lib/global/js/hooks/useWindowScroll.js +6 -0
  92. package/lib/global/js/package-settings.js +4 -6
  93. package/lib/settings.js +43 -21
  94. package/package.json +3 -4
  95. package/scss/components/AboutModal/_about-modal.scss +34 -53
  96. package/scss/components/AboutModal/_storybook-styles.scss +10 -4
  97. package/scss/components/AddSelect/_add-select.scss +7 -3
  98. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
  99. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
  100. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -7
  101. package/scss/components/{InlineEditV2/_inline-edit-v2.scss → EditInPlace/_edit-in-place.scss} +56 -14
  102. package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss +1 -1
  103. package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss +1 -1
  104. package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss +3 -15
  105. package/scss/components/PageHeader/_page-header.scss +1 -7
  106. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  107. package/scss/components/_index-released-only.scss +1 -1
  108. package/scss/components/_index-with-carbon.scss +1 -3
  109. package/scss/components/_index.scss +1 -3
  110. package/scss/config.scss +1 -0
  111. package/es/components/InlineEdit/InlineEdit.js +0 -47
  112. package/es/components/InlineEditV1/InlineEditV1.js +0 -442
  113. package/es/components/InlineEditV1/index.js +0 -7
  114. package/es/components/InlineEditV2/index.js +0 -7
  115. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
  116. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
  117. package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
  118. package/es/components/ModifiedTabs/index.js +0 -1
  119. package/lib/components/InlineEdit/InlineEdit.js +0 -63
  120. package/lib/components/InlineEditV1/InlineEditV1.js +0 -459
  121. package/lib/components/InlineEditV1/index.js +0 -13
  122. package/lib/components/InlineEditV2/index.js +0 -13
  123. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
  124. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
  125. package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
  126. package/lib/components/ModifiedTabs/index.js +0 -13
  127. package/scss/components/InlineEditV1/_carbon-imports.scss +0 -6
  128. package/scss/components/InlineEditV1/_index.scss +0 -8
  129. package/scss/components/InlineEditV1/_inline-edit-v1.scss +0 -269
  130. package/scss/components/InlineEditV2/_index-with-carbon.scss +0 -9
  131. package/scss/components/InlineEditV2/_storybook-styles.scss +0 -9
  132. package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
  133. package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
  134. package/scss/components/ModifiedTabs/_index.scss +0 -8
  135. package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
  136. package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
  137. /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
@@ -1,63 +0,0 @@
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.InlineEdit = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _propTypes = _interopRequireDefault(require("prop-types"));
19
-
20
- var _settings = require("../../settings");
21
-
22
- var _InlineEditV = require("../InlineEditV1");
23
-
24
- var _InlineEditV2 = require("../InlineEditV2");
25
-
26
- var _excluded = ["v1"];
27
-
28
- 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); }
29
-
30
- 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; }
31
-
32
- 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; }
33
-
34
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
35
-
36
- /**
37
- * this is a wrapper component that will allow us to support v1 and v2 versions of InlineEdit
38
- * in the V11 branch, v2 is the set by default.
39
- * if the user passes in the v1 feature flag the v1 version of the component will be rendered
40
- * since this is a temporary solution the named export should just remain InlineEdit unlike how
41
- * Card works as a base layer for Productive and Expressive cards.
42
- */
43
- var componentName = 'InlineEdit';
44
- var InlineEdit = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
45
- var v1 = _ref.v1,
46
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
47
-
48
- var props = _objectSpread(_objectSpread({}, rest), {}, {
49
- ref: ref
50
- });
51
-
52
- if (v1 === true) {
53
- return /*#__PURE__*/_react.default.createElement(_InlineEditV.InlineEditV1, props);
54
- }
55
-
56
- return /*#__PURE__*/_react.default.createElement(_InlineEditV2.InlineEditV2, props);
57
- });
58
- exports.InlineEdit = InlineEdit;
59
- exports.InlineEdit = InlineEdit = _settings.pkg.checkComponentEnabled(InlineEdit, componentName);
60
- InlineEdit.displayName = componentName;
61
- InlineEdit.propTypes = {
62
- v1: _propTypes.default.bool
63
- };
@@ -1,459 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.InlineEditV1 = 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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
21
-
22
- var _react = _interopRequireWildcard(require("react"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _classnames = _interopRequireDefault(require("classnames"));
27
-
28
- var _devtools = require("../../global/js/utils/devtools");
29
-
30
- var _settings = require("../../settings");
31
-
32
- var _react2 = require("@carbon/react");
33
-
34
- var _icons = require("@carbon/react/icons");
35
-
36
- var _excluded = ["buttonTooltipAlignment", "buttonTooltipPosition", "cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
37
-
38
- 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); }
39
-
40
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
41
-
42
- // The block part of our conventional BEM class names (blockClass__E--M).
43
- var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit");
44
- var componentName = 'InlineEditV1'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
45
-
46
- var defaults = {
47
- buttonTooltipAlignment: 'center',
48
- buttonTooltipPosition: 'top',
49
- light: true,
50
- // defaults to true to reflect design
51
- size: 'md'
52
- };
53
- var buttons = ['cancel', 'edit', 'save'];
54
- /**
55
- * TODO: A description of the component.
56
- */
57
-
58
- var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
59
- var _cx, _refInput$current, _refInput$current$tex, _cx3;
60
-
61
- var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
62
- buttonTooltipPosition = _ref.buttonTooltipPosition,
63
- cancelDescription = _ref.cancelDescription,
64
- className = _ref.className,
65
- disabled = _ref.disabled,
66
- editAlwaysVisible = _ref.editAlwaysVisible,
67
- editDescription = _ref.editDescription,
68
- id = _ref.id,
69
- invalid = _ref.invalid,
70
- invalidText = _ref.invalidText,
71
- labelText = _ref.labelText,
72
- _ref$light = _ref.light,
73
- light = _ref$light === void 0 ? defaults.light : _ref$light,
74
- onCancel = _ref.onCancel,
75
- onSave = _ref.onSave,
76
- onChange = _ref.onChange,
77
- placeholder = _ref.placeholder,
78
- saveDescription = _ref.saveDescription,
79
- _ref$size = _ref.size,
80
- size = _ref$size === void 0 ? defaults.size : _ref$size,
81
- value = _ref.value,
82
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
83
- var carbonPrefix = (0, _react2.usePrefix)();
84
- var refInput = (0, _react.useRef)({
85
- textContent: value
86
- });
87
- var localRef = (0, _react.useRef)(null);
88
- var ref = refIn || localRef;
89
-
90
- var _useState = (0, _react.useState)(false),
91
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
92
- editing = _useState2[0],
93
- setEditing = _useState2[1];
94
-
95
- var _useState3 = (0, _react.useState)(value),
96
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
97
- internalValue = _useState4[0],
98
- setInternalValue = _useState4[1];
99
-
100
- var showValidation = invalid; // || warn;
101
-
102
- var validationText = invalidText; // || warnText;
103
-
104
- var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_icons.WarningFilled, {
105
- size: 16
106
- }) : null; // sanitize the tooltip values
107
-
108
- var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
109
- var directionIsObject = (0, _typeof2.default)(buttonTooltipPosition) === 'object';
110
- var tipPositions = buttons.reduce(function (acc, button) {
111
- var _ref2, _ref3;
112
-
113
- var tooltipAlignment = (_ref2 = alignIsObject ? buttonTooltipAlignment[button] : buttonTooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.buttonTooltipAlignment;
114
- var tooltipPosition = (_ref3 = directionIsObject ? buttonTooltipPosition[button] : buttonTooltipPosition) !== null && _ref3 !== void 0 ? _ref3 : defaults.buttonTooltipPosition;
115
- acc[button] = {
116
- tooltipAlignment: tooltipAlignment,
117
- tooltipPosition: tooltipPosition
118
- };
119
- return acc;
120
- }, {});
121
-
122
- var doSetEditing = function doSetEditing(value) {
123
- if (value === false) {
124
- // move scroll to start
125
- refInput.current.scrollLeft = 0;
126
- }
127
-
128
- setEditing(!disabled && value);
129
- };
130
-
131
- var handleEdit = function handleEdit(ev) {
132
- /* istanbul ignore else */
133
- if (!disabled) {
134
- var rightOfInput = ev.currentTarget.classList.contains("".concat(blockClass, "__edit")) || ev.target.classList.contains("".concat(blockClass, "__after-input-elements"));
135
- var leftOfInput = ev.currentTarget = ev.target.classList.contains("".concat(blockClass)); // clicking on the content editable element should not set either of these to true
136
-
137
- if (rightOfInput || leftOfInput) {
138
- doSetEditing(true);
139
- setTimeout(function () {
140
- refInput.current.focus(); // select all the content
141
-
142
- document.getSelection().selectAllChildren(refInput.current);
143
-
144
- if (rightOfInput) {
145
- document.getSelection().collapseToEnd();
146
- refInput.current.scrollLeft = 9999; // never going to get there but ensures at end.
147
- } else {
148
- document.getSelection().collapseToStart();
149
- refInput.current.scrollLeft = 0; // scroll to start
150
- }
151
- }, 0);
152
- }
153
- }
154
- };
155
-
156
- var handleFocus = function handleFocus(ev) {
157
- ev.preventDefault();
158
-
159
- if (!editing && ev.target.classList.contains("".concat(blockClass, "__input"))) {
160
- doSetEditing(true);
161
- }
162
- };
163
-
164
- var handleSave = function handleSave() {
165
- doSetEditing(false);
166
- document.getSelection().removeAllRanges();
167
-
168
- if (onSave) {
169
- onSave(refInput.current.textContent);
170
- }
171
- };
172
-
173
- var handleInput = function handleInput() {
174
- setInternalValue(refInput.current.textContent);
175
-
176
- if (onChange) {
177
- onChange(refInput.current.textContent);
178
- }
179
- }; // pasting into contentEditable not supported by userEvent
180
-
181
-
182
- var handlePaste =
183
- /* istanbul ignore next */
184
- function handlePaste(ev) {
185
- ev.preventDefault(); // Get clipboard as plain text
186
-
187
- var text = (ev.clipboardData || window.clipboardData).getData('text/plain'); // remove \n
188
-
189
- var sanitizedText = text.replaceAll(/\n/g, '') // remove carriage returns
190
- .replaceAll(/\t/g, ' '); // replace tab with two spaces
191
-
192
- if (document.queryCommandSupported('insertText')) {
193
- document.execCommand('insertText', false, sanitizedText);
194
- } else {
195
- // Insert text at the current position of caret
196
- var range = document.getSelection().getRangeAt(0);
197
- range.deleteContents();
198
- var textNode = document.createTextNode(sanitizedText);
199
- range.insertNode(textNode); // move selection end of textNode
200
-
201
- range.selectNodeContents(textNode);
202
- range.collapse(false); // remove existing range
203
-
204
- var selection = document.getSelection();
205
- selection.removeAllRanges(); // set the new range
206
-
207
- selection.addRange(range);
208
- }
209
- };
210
-
211
- var handleCancel = function handleCancel() {
212
- refInput.current.textContent = value;
213
- handleInput(value);
214
- doSetEditing(false);
215
- document.getSelection().removeAllRanges();
216
-
217
- if (onCancel) {
218
- onCancel(value);
219
- }
220
- };
221
-
222
- var handleBlur = function handleBlur(ev) {
223
- if (!ref.current.contains(ev.relatedTarget)) {
224
- handleSave();
225
- }
226
- };
227
-
228
- var handleKeyDown = function handleKeyDown(ev) {
229
- switch (ev.key) {
230
- case 'Enter':
231
- ev.preventDefault();
232
- refInput.current.blur(); // will cause save
233
-
234
- break;
235
-
236
- case 'Escape':
237
- handleCancel();
238
- break;
239
- }
240
- };
241
- /*
242
- The HTML is structured as follows:
243
- <container>
244
- <!-- margin left of input to match Carbon -->
245
- <content-editable>
246
- <-- margin right of input space for after-input-elements -->
247
- <after-input-elements>
248
- </container>
249
- NOTE:
250
- - An input is not used as this would not permit a heading tag e.g. <h2>.
251
- - Some padding is added to the left 16px standard for a Carbon text input
252
- - The after-input-elements are position absolute with a margin to on the input to reserve space. Using inline-flex
253
- - does not measure space properly for the input otherwise.
254
- - The content editable is not expected to change size when buttons are added, to ensure the text does not move space
255
- is reserved up front for buttons and invalid icon. Mostly this is only noticed if the width of the component is not 100%.
256
- which can be shown by setting inlineEditFullWidth to false in storybook.
257
- In making content-editable behave like an input of type text we have to account for.
258
- - Enforcing a single line
259
- - Pasting of non-text e.g. html or text with carriage returns
260
- - The padding and border not hiding typed in text.
261
- - Placing the cursor at the start or end depending on area clicked (before for left-padding)
262
- */
263
-
264
-
265
- var toolbarAnimation = true;
266
- return (
267
- /*#__PURE__*/
268
- // eslint-disable-next-line
269
- _react.default.createElement("div", {
270
- className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
271
- className, // Apply any supplied class names to the main HTML element.
272
- "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), refInput.current && refInput.current.scrollWidth > refInput.current.offsetWidth), _cx)),
273
- onClick: handleEdit // disabled eslint for click handler
274
- ,
275
- onBlur: handleBlur,
276
- ref: ref
277
- }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
278
- id: id,
279
- size: size,
280
- className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
281
- contentEditable: true,
282
- "aria-label": labelText,
283
- role: "textbox",
284
- tabIndex: disabled ? -1 : 0,
285
- onFocus: handleFocus,
286
- onInput: handleInput,
287
- onKeyDown: handleKeyDown,
288
- onPaste: handlePaste,
289
- suppressContentEditableWarning: true,
290
- ref: refInput,
291
- "data-placeholder": placeholder
292
- }), value), /*#__PURE__*/_react.default.createElement("div", {
293
- className: (0, _classnames.default)("".concat(blockClass, "__after-input-elements")) // tabindex -1 fixes blur target test when clicking on after-input-elements background
294
- ,
295
- tabIndex: "-1"
296
- }, /*#__PURE__*/_react.default.createElement("div", {
297
- className: "".concat(blockClass, "__ellipsis"),
298
- "aria-hidden": !editing
299
- }, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
300
- className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
301
- }, showValidation && /*#__PURE__*/_react.default.createElement("div", {
302
- className: "".concat(blockClass, "__validation-icon")
303
- }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
304
- className: "".concat(blockClass, "__cancel"),
305
- kind: "ghost",
306
- label: cancelDescription,
307
- onClick: handleCancel,
308
- size: size
309
- }, tipPositions.cancel), /*#__PURE__*/_react.default.createElement(_icons.Close, {
310
- size: 16
311
- })), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
312
- className: "".concat(blockClass, "__save"),
313
- kind: "ghost",
314
- label: saveDescription,
315
- onClick: handleSave,
316
- disabled: value === internalValue,
317
- size: size
318
- }, tipPositions.save), /*#__PURE__*/_react.default.createElement(_icons.Checkmark, {
319
- size: 16
320
- }))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
321
- className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
322
- kind: "ghost",
323
- label: editDescription,
324
- onClick: handleEdit,
325
- disabled: disabled,
326
- size: size
327
- }, tipPositions.edit), disabled ? /*#__PURE__*/_react.default.createElement(_icons.EditOff, {
328
- size: 16
329
- }) : /*#__PURE__*/_react.default.createElement(_icons.Edit, {
330
- size: 16
331
- })))), /*#__PURE__*/_react.default.createElement("div", {
332
- className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
333
- }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
334
- className: "".concat(blockClass, "__validation-text ").concat(carbonPrefix, "--form-requirement")
335
- }, validationText))
336
- );
337
- }); // Return a placeholder if not released and not enabled by feature flag
338
-
339
-
340
- exports.InlineEditV1 = InlineEditV1;
341
- exports.InlineEditV1 = InlineEditV1 = _settings.pkg.checkComponentEnabled(InlineEditV1, componentName); // The display name of the component, used by React. Note that displayName
342
- // is used in preference to relying on function.name.
343
-
344
- InlineEditV1.displayName = componentName; // The types and DocGen commentary for the component props,
345
- // in alphabetical order (for consistency).
346
- // See https://www.npmjs.com/package/prop-types#usage.
347
-
348
- InlineEditV1.propTypes = {
349
- /**
350
- * buttonTooltipAlignment from the standard tooltip. Default center.
351
- *
352
- * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
353
- */
354
- buttonTooltipAlignment: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'center', 'end']), _propTypes.default.shape({
355
- cancel: _propTypes.default.oneOf(['start', 'center', 'end']),
356
- edit: _propTypes.default.oneOf(['start', 'center', 'end']),
357
- save: _propTypes.default.oneOf(['start', 'center', 'end'])
358
- })]),
359
-
360
- /**
361
- * buttonTooltipPosition from the standard tooltip
362
- *
363
- * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
364
- */
365
- buttonTooltipPosition: _propTypes.default.oneOfType([_propTypes.default.oneOf(['top', 'right', 'bottom', 'left']), _propTypes.default.shape({
366
- cancel: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
367
- edit: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
368
- save: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left'])
369
- })]),
370
-
371
- /**
372
- * label for cancel button
373
- */
374
- cancelDescription: _propTypes.default.string.isRequired,
375
-
376
- /**
377
- * Provide an optional class to be applied to the containing node.
378
- */
379
- className: _propTypes.default.string,
380
-
381
- /**
382
- * disable edit
383
- */
384
- disabled: _propTypes.default.bool,
385
-
386
- /**
387
- * By default the edit icon is shown on hover only.
388
- */
389
- editAlwaysVisible: _propTypes.default.bool,
390
-
391
- /**
392
- * Label for the edit button
393
- */
394
- editDescription: _propTypes.default.string.isRequired,
395
-
396
- /**
397
- * ID for inline edit
398
- */
399
- id: _propTypes.default.string,
400
-
401
- /**
402
- * set invalid state for input
403
- */
404
- invalid: _propTypes.default.bool,
405
-
406
- /**
407
- * text shown when invalid is true
408
- */
409
- invalidText: _propTypes.default.string,
410
-
411
- /**
412
- * label for text input
413
- */
414
- labelText: _propTypes.default.string,
415
-
416
- /**
417
- * change background to light version (mimic React TextInput)
418
- */
419
- light: _propTypes.default.bool,
420
-
421
- /**
422
- * method called on cancel event
423
- */
424
- onCancel: _propTypes.default.func,
425
-
426
- /**
427
- * method called on input event (it's a React thing onChange behaves like on input).
428
- *
429
- * NOTE: caller to handle invalid states and associated text
430
- */
431
- onChange: _propTypes.default.func,
432
-
433
- /**
434
- * method called on change event
435
- *
436
- * NOTE: caller to handle invalid states and associated text
437
- */
438
- onSave: _propTypes.default.func,
439
-
440
- /**
441
- * placeholder for text input
442
- */
443
- placeholder: _propTypes.default.string,
444
-
445
- /**
446
- * label for save button
447
- */
448
- saveDescription: _propTypes.default.string.isRequired,
449
-
450
- /**
451
- * vertical size of control
452
- */
453
- size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
454
-
455
- /**
456
- * initial/unedited value
457
- */
458
- value: _propTypes.default.string
459
- };
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "InlineEditV1", {
7
- enumerable: true,
8
- get: function get() {
9
- return _InlineEditV.InlineEditV1;
10
- }
11
- });
12
-
13
- var _InlineEditV = require("./InlineEditV1");
@@ -1,13 +0,0 @@
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");
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.ModifiedTabLabelNew = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
- var _icons = require("@carbon/react/icons");
15
-
16
- var _settings = require("../../settings");
17
-
18
- //
19
- // Copyright IBM Corp. 2020, 2020
20
- //
21
- // This source code is licensed under the Apache-2.0 license found in the
22
- // LICENSE file in the root directory of this source tree.
23
- //
24
- var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
25
-
26
- var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {
27
- var label = _ref.label;
28
- return /*#__PURE__*/_react.default.createElement("span", {
29
- className: "".concat(blockClass, "__tab-new")
30
- }, /*#__PURE__*/_react.default.createElement("span", {
31
- className: "".concat(blockClass, "__tab-new__label")
32
- }, label), /*#__PURE__*/_react.default.createElement("span", {
33
- className: "".concat(blockClass, "__tab-new-img")
34
- }, /*#__PURE__*/_react.default.createElement(_icons.Add, {
35
- size: 20
36
- })));
37
- };
38
-
39
- exports.ModifiedTabLabelNew = ModifiedTabLabelNew;
40
- ModifiedTabLabelNew.propTypes = {
41
- /**
42
- * Label content of the tab
43
- */
44
- label: _propTypes.default.string,
45
-
46
- /**
47
- * Optional onClick handler
48
- */
49
- onClick: _propTypes.default.func
50
- };
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.ModifiedTabLabelWithClose = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
- var _icons = require("@carbon/react/icons");
15
-
16
- var _settings = require("../../settings");
17
-
18
- var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
19
-
20
- var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
21
- var unsavedContent = _ref.unsavedContent,
22
- label = _ref.label,
23
- onClose = _ref.onClose;
24
-
25
- var handleClose = function handleClose() {
26
- if (onClose) {
27
- onClose();
28
- }
29
- };
30
-
31
- return /*#__PURE__*/_react.default.createElement("span", {
32
- className: "".concat(blockClass, "__tab")
33
- }, /*#__PURE__*/_react.default.createElement("span", {
34
- className: "".concat(blockClass, "__tab-label")
35
- }, label), /*#__PURE__*/_react.default.createElement("button", {
36
- title: "Close button",
37
- onClick: handleClose,
38
- className: "".concat(blockClass, "__tab-close"),
39
- type: "button"
40
- }, unsavedContent ? /*#__PURE__*/_react.default.createElement(_icons.CloseFilled, {
41
- size: 16
42
- }) : /*#__PURE__*/_react.default.createElement(_icons.Close, {
43
- size: 16
44
- })));
45
- };
46
-
47
- exports.ModifiedTabLabelWithClose = ModifiedTabLabelWithClose;
48
- ModifiedTabLabelWithClose.propTypes = {
49
- /**
50
- * Label content of the tab
51
- */
52
- label: _propTypes.default.string.isRequired,
53
-
54
- /**
55
- * Optional onClose handler
56
- */
57
- onClose: _propTypes.default.func,
58
-
59
- /**
60
- * unsavedContent indicates tab contents have not been saved
61
- */
62
- unsavedContent: _propTypes.default.bool
63
- };