@carbon/ibm-products 1.25.1 → 1.31.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (157) hide show
  1. package/css/index-full-carbon.css +562 -88
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +942 -23
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +561 -87
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +562 -88
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +0 -3
  18. package/es/components/AddSelect/AddSelectBody.js +20 -3
  19. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  20. package/es/components/AddSelect/AddSelectColumn.js +4 -3
  21. package/es/components/AddSelect/AddSelectFilter.js +4 -3
  22. package/es/components/AddSelect/AddSelectList.js +40 -14
  23. package/es/components/Card/Card.js +16 -6
  24. package/es/components/Card/CardFooter.js +3 -1
  25. package/es/components/Card/CardHeader.js +20 -1
  26. package/es/components/DataSpreadsheet/DataSpreadsheet.js +62 -11
  27. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  28. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  29. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  30. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  31. package/es/components/Datagrid/Datagrid/DatagridContent.js +106 -0
  32. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  33. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +139 -11
  34. package/es/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  35. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -40
  36. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  37. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  38. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  39. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +63 -0
  40. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  41. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +459 -0
  42. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  43. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  44. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  45. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  46. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +31 -0
  47. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  48. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +197 -0
  49. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  50. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  51. package/es/components/Datagrid/index.js +3 -1
  52. package/es/components/Datagrid/useActionsColumn.js +31 -6
  53. package/es/components/Datagrid/useColumnOrder.js +8 -0
  54. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  55. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  56. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  57. package/es/components/Datagrid/useInlineEdit.js +71 -0
  58. package/es/components/Datagrid/useRowSize.js +17 -6
  59. package/es/components/Datagrid/useSelectRows.js +14 -4
  60. package/es/components/Datagrid/useStickyColumn.js +14 -0
  61. package/es/components/Datagrid/utils/getInlineEditColumns.js +121 -0
  62. package/es/components/Datagrid/utils/makeData.js +18 -2
  63. package/es/components/ImportModal/ImportModal.js +2 -2
  64. package/es/components/InlineEdit/InlineEdit.js +4 -2
  65. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  66. package/es/components/WebTerminal/WebTerminal.js +1 -1
  67. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  68. package/es/components/WebTerminal/hooks/index.js +6 -0
  69. package/es/components/WebTerminal/index.js +6 -0
  70. package/es/components/WebTerminal/preview-components/Navigation.js +6 -0
  71. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  72. package/es/components/WebTerminal/preview-components/index.js +7 -0
  73. package/es/components/index.js +1 -1
  74. package/es/global/js/hooks/useClickOutside.js +1 -1
  75. package/es/global/js/package-settings.js +3 -3
  76. package/es/global/js/utils/rangeWithCallback.js +13 -0
  77. package/es/global/js/utils/uuidv4.spec.js +4 -0
  78. package/lib/components/AddSelect/AddSelect.js +0 -4
  79. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  80. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  81. package/lib/components/AddSelect/AddSelectColumn.js +3 -2
  82. package/lib/components/AddSelect/AddSelectFilter.js +3 -2
  83. package/lib/components/AddSelect/AddSelectList.js +39 -13
  84. package/lib/components/Card/Card.js +16 -6
  85. package/lib/components/Card/CardFooter.js +3 -1
  86. package/lib/components/Card/CardHeader.js +21 -1
  87. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +62 -10
  88. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  89. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  90. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  91. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  92. package/lib/components/Datagrid/Datagrid/DatagridContent.js +138 -0
  93. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  94. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +148 -9
  95. package/lib/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  96. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -41
  97. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  98. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  99. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  100. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +79 -0
  101. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  102. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +483 -0
  103. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  104. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  105. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  107. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +42 -0
  108. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  109. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +204 -0
  110. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  111. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  112. package/lib/components/Datagrid/index.js +17 -1
  113. package/lib/components/Datagrid/useActionsColumn.js +31 -6
  114. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  115. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  116. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  117. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  118. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  119. package/lib/components/Datagrid/useRowSize.js +18 -13
  120. package/lib/components/Datagrid/useSelectRows.js +13 -3
  121. package/lib/components/Datagrid/useStickyColumn.js +14 -0
  122. package/lib/components/Datagrid/utils/getInlineEditColumns.js +133 -0
  123. package/lib/components/Datagrid/utils/makeData.js +18 -2
  124. package/lib/components/ImportModal/ImportModal.js +2 -2
  125. package/lib/components/InlineEdit/InlineEdit.js +4 -2
  126. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  127. package/lib/components/WebTerminal/hooks/index.js +6 -0
  128. package/lib/components/WebTerminal/preview-components/Navigation.js +6 -0
  129. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  130. package/lib/components/index.js +12 -0
  131. package/lib/global/js/hooks/useClickOutside.js +1 -1
  132. package/lib/global/js/package-settings.js +3 -3
  133. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  134. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  135. package/package.json +13 -13
  136. package/scss/components/AddSelect/_add-select.scss +126 -28
  137. package/scss/components/Card/_card.scss +1 -0
  138. package/scss/components/Cascade/_cascade.scss +1 -1
  139. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
  140. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -1
  141. package/scss/components/Datagrid/_datagrid.scss +5 -0
  142. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  143. package/scss/components/Datagrid/styles/_datagrid.scss +81 -12
  144. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  145. package/scss/components/Datagrid/styles/_index.scss +1 -0
  146. package/scss/components/Datagrid/styles/_useInlineEdit.scss +211 -0
  147. package/scss/components/Datagrid/styles/_useStickyColumn.scss +24 -2
  148. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +44 -6
  149. package/scss/components/InlineEdit/_inline-edit.scss +1 -1
  150. package/scss/components/NotificationsPanel/_notifications-panel.scss +5 -6
  151. package/scss/components/ProductiveCard/_productive-card.scss +39 -0
  152. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  153. package/scss/components/SidePanel/_side-panel.scss +4 -6
  154. package/scss/components/WebTerminal/_index.scss +7 -0
  155. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  156. package/scss/components/WebTerminal/_web-terminal.scss +13 -0
  157. package/scss/components/_index-released-only.scss +1 -0
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.returnUpdatedActiveCell = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ 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; }
13
+
14
+ 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; }
15
+
16
+ /**
17
+ * Copyright IBM Corp. 2022, 2022
18
+ *
19
+ * This source code is licensed under the Apache-2.0 license found in the
20
+ * LICENSE file in the root directory of this source tree.
21
+ */
22
+ // This function returns the state back to the reducer after
23
+ // determining the new active cell value
24
+ var returnUpdatedActiveCell = function returnUpdatedActiveCell(_ref) {
25
+ var activeCellCoords = _ref.activeCellCoords,
26
+ direction = _ref.direction,
27
+ totalVisibleColumns = _ref.totalVisibleColumns,
28
+ state = _ref.state,
29
+ instance = _ref.instance;
30
+
31
+ var newActiveCoords = _objectSpread(_objectSpread({}, activeCellCoords), {}, {
32
+ column: direction === 'right' ? activeCellCoords.column < totalVisibleColumns.length - 1 ? activeCellCoords.column + 1 : activeCellCoords.column : direction === 'left' ? activeCellCoords.column === 0 ? 0 : activeCellCoords.column - 1 : activeCellCoords.column,
33
+ row: direction === 'up' ? activeCellCoords.row === 0 ? 0 : activeCellCoords.row - 1 : direction === 'down' ? activeCellCoords.row < instance.rows.length - 1 ? activeCellCoords.row + 1 : activeCellCoords.row : activeCellCoords.row
34
+ });
35
+
36
+ var newActiveCellId = "column-".concat(newActiveCoords.column, "-row-").concat(newActiveCoords.row);
37
+ return _objectSpread(_objectSpread({}, state), {}, {
38
+ activeCellId: newActiveCellId
39
+ });
40
+ };
41
+
42
+ exports.returnUpdatedActiveCell = returnUpdatedActiveCell;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.handleGridFocus = void 0;
7
+
8
+ /**
9
+ * Copyright IBM Corp. 2022, 2022
10
+ *
11
+ * This source code is licensed under the Apache-2.0 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ */
14
+ var handleGridFocus = function handleGridFocus(state, dispatch) {
15
+ var gridActive = state.gridActive,
16
+ previousActiveCellId = state.previousActiveCellId;
17
+
18
+ if (!gridActive) {
19
+ // Initialize grid active state
20
+ dispatch({
21
+ type: 'ADD_GRID_ACTIVE_FOCUS',
22
+ payload: previousActiveCellId || 'column-0-row-0' // If there is a previous active cell id that is found use that, otherwise use the first cell in the grid area
23
+
24
+ });
25
+ }
26
+ };
27
+
28
+ exports.handleGridFocus = handleGridFocus;
@@ -0,0 +1,204 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.handleGridKeyPress = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _settings = require("../../../../../settings");
13
+
14
+ 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; }
15
+
16
+ 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; }
17
+
18
+ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
19
+
20
+ var handleGridKeyPress = function handleGridKeyPress(event, dispatch, state, instance) {
21
+ var key = event.key;
22
+ var gridActive = state.gridActive,
23
+ activeCellId = state.activeCellId,
24
+ editId = state.editId;
25
+ var focusedCell = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(activeCellId, "\"]")); // If we reach this it means that tab was pressed while in
26
+ // edit mode which should not remove the focus from the grid
27
+
28
+ if (activeCellId === editId && key === 'Tab') {
29
+ // Attempting to exit date picker
30
+ if (focusedCell.getAttribute('data-inline-type') === 'date') {
31
+ dispatch({
32
+ type: 'EXIT_EDIT_MODE',
33
+ payload: activeCellId
34
+ });
35
+ }
36
+
37
+ event.preventDefault();
38
+ var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
39
+ inlineEditArea.focus();
40
+ return;
41
+ }
42
+
43
+ if (activeCellId === editId && key === 'Escape') {
44
+ if (focusedCell.getAttribute('data-inline-type') === 'date') {
45
+ dispatch({
46
+ type: 'EXIT_EDIT_MODE',
47
+ payload: activeCellId
48
+ });
49
+ event.preventDefault();
50
+
51
+ var _inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
52
+
53
+ _inlineEditArea.focus();
54
+
55
+ return;
56
+ }
57
+ } // Checks if the dropdown menu is open
58
+
59
+
60
+ var dropdownIsActive = function dropdownIsActive() {
61
+ var focusedElementRole = document.activeElement.getAttribute('role');
62
+
63
+ if (focusedElementRole === 'listbox' && document.activeElement.classList.contains("".concat(_settings.carbon.prefix, "--list-box__menu"))) {
64
+ // Prevents arrow keys from scrolling any other content when dropdown menu is open
65
+ event.preventDefault();
66
+ return true;
67
+ }
68
+
69
+ return false;
70
+ }; // Checks if the date picker is open
71
+
72
+
73
+ var datePickerIsActive = function datePickerIsActive() {
74
+ var focusedCalendarElement = document.querySelector(".".concat(_settings.carbon.prefix, "--date-picker__input.flatpickr-input.active"));
75
+
76
+ if (focusedCalendarElement || document.activeElement.classList.contains("flatpickr-day")) {
77
+ event.preventDefault();
78
+ return true;
79
+ }
80
+
81
+ return false;
82
+ }; // Stop grid key listener when in edit mode
83
+
84
+
85
+ var isEditing = document.activeElement.id === activeCellId && document.activeElement.id === editId || dropdownIsActive() || datePickerIsActive();
86
+
87
+ if (isEditing || !gridActive) {
88
+ return;
89
+ } // Command keys need to be returned as there is default browser behavior with these keys
90
+
91
+
92
+ if (key === 'Meta' || key === 'Control') {
93
+ return;
94
+ } // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
95
+
96
+
97
+ if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing) {
98
+ event.preventDefault();
99
+ }
100
+
101
+ var isDisabledCell = !!focusedCell.getAttribute('data-disabled');
102
+ var sharedUpdateParams = {
103
+ oldId: activeCellId,
104
+ instance: instance
105
+ };
106
+
107
+ switch (key) {
108
+ case 'Tab':
109
+ {
110
+ if (!editId) {
111
+ dispatch({
112
+ type: 'REMOVE_GRID_ACTIVE_FOCUS',
113
+ payload: activeCellId
114
+ });
115
+ }
116
+
117
+ break;
118
+ }
119
+
120
+ case 'ArrowRight':
121
+ {
122
+ dispatch({
123
+ type: 'UPDATE_ACTIVE_CELL_ID',
124
+ payload: _objectSpread({
125
+ direction: 'right'
126
+ }, sharedUpdateParams)
127
+ });
128
+ break;
129
+ }
130
+
131
+ case 'ArrowLeft':
132
+ {
133
+ dispatch({
134
+ type: 'UPDATE_ACTIVE_CELL_ID',
135
+ payload: _objectSpread({
136
+ direction: 'left'
137
+ }, sharedUpdateParams)
138
+ });
139
+ break;
140
+ }
141
+
142
+ case 'ArrowUp':
143
+ {
144
+ dispatch({
145
+ type: 'UPDATE_ACTIVE_CELL_ID',
146
+ payload: _objectSpread({
147
+ direction: 'up'
148
+ }, sharedUpdateParams)
149
+ });
150
+ break;
151
+ }
152
+
153
+ case 'ArrowDown':
154
+ {
155
+ dispatch({
156
+ type: 'UPDATE_ACTIVE_CELL_ID',
157
+ payload: _objectSpread({
158
+ direction: 'down'
159
+ }, sharedUpdateParams)
160
+ });
161
+ break;
162
+ }
163
+
164
+ case ' ':
165
+ case 'F2':
166
+ case 'Enter':
167
+ {
168
+ // Disabled cells are not allowed to go into edit mode
169
+ if (isDisabledCell) {
170
+ return;
171
+ } // Only go into edit mode if there is no editId, meaning that we're not already in edit mode
172
+
173
+
174
+ if (!editId) {
175
+ var focusedType = focusedCell.getAttribute('data-inline-type'); // Open dropdown immediately after entering edit mode for selection type
176
+
177
+ if (focusedType === 'selection') {
178
+ setTimeout(function () {
179
+ var dropdownTrigger = focusedCell.querySelector('button');
180
+ dropdownTrigger === null || dropdownTrigger === void 0 ? void 0 : dropdownTrigger.click();
181
+ }, 1);
182
+ }
183
+
184
+ if (focusedType === 'date') {
185
+ setTimeout(function () {
186
+ var dateInputTrigger = focusedCell.querySelector('input');
187
+ dateInputTrigger === null || dateInputTrigger === void 0 ? void 0 : dateInputTrigger.click();
188
+ dateInputTrigger === null || dateInputTrigger === void 0 ? void 0 : dateInputTrigger.focus();
189
+ }, 1);
190
+ }
191
+
192
+ dispatch({
193
+ type: 'ENTER_EDIT_MODE',
194
+ payload: {
195
+ activeCellId: activeCellId,
196
+ editId: activeCellId
197
+ }
198
+ });
199
+ }
200
+ }
201
+ }
202
+ };
203
+
204
+ exports.handleGridKeyPress = handleGridKeyPress;
@@ -31,7 +31,7 @@ var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
31
31
 
32
32
  var _settings = require("../../../../../settings");
33
33
 
34
- var _excluded = ["buttonLabel"];
34
+ var _excluded = ["legendText"];
35
35
 
36
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
37
 
@@ -40,8 +40,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
40
40
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
41
41
 
42
42
  var RowSizeDropdown = function RowSizeDropdown(_ref) {
43
- var _ref$buttonLabel = _ref.buttonLabel,
44
- buttonLabel = _ref$buttonLabel === void 0 ? 'Row height' : _ref$buttonLabel,
43
+ var _ref$legendText = _ref.legendText,
44
+ legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
45
45
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
46
46
  var buttonRef = React.useRef({});
47
47
 
@@ -59,9 +59,10 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
59
59
  onClick: function onClick() {
60
60
  return setIsOpen(!isOpen);
61
61
  },
62
- iconDescription: buttonLabel,
62
+ iconDescription: legendText,
63
63
  className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
64
64
  }), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
65
+ legendText: legendText,
65
66
  buttonRef: buttonRef,
66
67
  hideRadioGroup: function hideRadioGroup() {
67
68
  setIsOpen(false);
@@ -70,8 +71,8 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
70
71
  };
71
72
 
72
73
  RowSizeDropdown.propTypes = {
73
- buttonLabel: _propTypes.default.string,
74
74
  datagridName: _propTypes.default.string,
75
+ legendText: _propTypes.default.string,
75
76
  light: _propTypes.default.bool,
76
77
  onChange: _propTypes.default.func.isRequired,
77
78
  selectedOption: _propTypes.default.string
@@ -42,8 +42,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
42
42
  buttonRef = _ref.buttonRef,
43
43
  onChange = _ref.onChange,
44
44
  hideRadioGroup = _ref.hideRadioGroup,
45
- _ref$legendText = _ref.legendText,
46
- legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
45
+ legendText = _ref.legendText,
47
46
  _ref$rowSizeLabels = _ref.rowSizeLabels,
48
47
  rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
49
48
  xl: 'Extra large',
@@ -23,6 +23,12 @@ Object.defineProperty(exports, "useColumnCenterAlign", {
23
23
  return _useColumnCenterAlign.default;
24
24
  }
25
25
  });
26
+ Object.defineProperty(exports, "useColumnOrder", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _useColumnOrder.default;
30
+ }
31
+ });
26
32
  Object.defineProperty(exports, "useColumnRightAlign", {
27
33
  enumerable: true,
28
34
  get: function get() {
@@ -59,6 +65,12 @@ Object.defineProperty(exports, "useInfiniteScroll", {
59
65
  return _useInfiniteScroll.default;
60
66
  }
61
67
  });
68
+ Object.defineProperty(exports, "useInlineEdit", {
69
+ enumerable: true,
70
+ get: function get() {
71
+ return _useInlineEdit.default;
72
+ }
73
+ });
62
74
  Object.defineProperty(exports, "useNestedRows", {
63
75
  enumerable: true,
64
76
  get: function get() {
@@ -132,4 +144,8 @@ var _useCustomizeColumns = _interopRequireDefault(require("./useCustomizeColumns
132
144
 
133
145
  var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));
134
146
 
135
- var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
147
+ var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
148
+
149
+ var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
150
+
151
+ var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
@@ -40,19 +40,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
40
40
 
41
41
  return [props, {
42
42
  children: /*#__PURE__*/_react.default.createElement("div", {
43
- className: "".concat(blockClass, "__actions-column-content")
43
+ className: "".concat(blockClass, "__actions-column-contents")
44
44
  }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
45
45
  className: "".concat(blockClass, "__actions-column-loading")
46
- }), !isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
46
+ }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
47
+ className: "".concat(blockClass, "_actions-column"),
48
+ style: {
49
+ display: 'flex'
50
+ }
51
+ }, rowActions.map(function (action) {
52
+ var id = action.id,
53
+ itemText = action.itemText,
54
+ _onClick = action.onClick,
55
+ icon = action.icon;
56
+ return /*#__PURE__*/_react.default.createElement("div", {
57
+ className: "".concat(blockClass, "__actions-column-button"),
58
+ key: ""
59
+ }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
60
+ renderIcon: icon,
61
+ hasIconOnly: true,
62
+ light: true,
63
+ iconDescription: itemText,
64
+ kind: "ghost",
65
+ onClick: function onClick(e) {
66
+ e.stopPropagation();
67
+
68
+ _onClick(id, row, e);
69
+ }
70
+ }));
71
+ })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
47
72
  size: "sm",
48
73
  light: true,
49
74
  flipped: true,
50
75
  onClick: function onClick(e) {
51
- return e.stopPropagation();
76
+ e.stopPropagation();
52
77
  }
53
78
  }, rowActions.map(function (action) {
54
79
  var id = action.id,
55
- _onClick = action.onClick,
80
+ _onClick2 = action.onClick,
56
81
  shouldHideMenuItem = action.shouldHideMenuItem,
57
82
  shouldDisableMenuItem = action.shouldDisableMenuItem,
58
83
  disabled = action.disabled,
@@ -71,11 +96,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
71
96
  onClick: function onClick(e) {
72
97
  e.stopPropagation();
73
98
 
74
- _onClick(id, row, e);
99
+ _onClick2(id, row, e);
75
100
  },
76
101
  key: id
77
102
  }));
78
- }))),
103
+ })))),
79
104
  className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
80
105
  }];
81
106
  }
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _reactTable = require("react-table");
9
+
10
+ /**
11
+ * Copyright IBM Corp. 2022, 2022
12
+ *
13
+ * This source code is licensed under the Apache-2.0 license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ */
16
+ var _default = _reactTable.useColumnOrder;
17
+ exports.default = _default;
@@ -35,6 +35,10 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
35
35
 
36
36
  hooks.useInstance.push(function (instance) {
37
37
  var customizeColumnsProps = instance.customizeColumnsProps;
38
+
39
+ var _ref = customizeColumnsProps || {},
40
+ labels = _ref.labels;
41
+
38
42
  Object.assign(instance, {
39
43
  customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
40
44
  isModalOpen: isModalOpen,
@@ -42,6 +46,7 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
42
46
  }),
43
47
  CustomizeColumnsButton: function CustomizeColumnsButton(props) {
44
48
  return /*#__PURE__*/React.createElement(_CustomizeColumns.ToggleButtonWrapper, (0, _extends2.default)({
49
+ iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
45
50
  isModalOpen: isModalOpen,
46
51
  setIsModalOpen: setIsModalOpen
47
52
  }, props));
@@ -13,6 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
13
13
 
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
 
16
+ var _classnames = _interopRequireDefault(require("classnames"));
17
+
16
18
  var _settings = require("../../settings");
17
19
 
18
20
  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; }
@@ -23,8 +25,10 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
23
25
 
24
26
  var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
25
27
  var StringRenderer = function StringRenderer(tableProps) {
28
+ var _tableProps$column;
29
+
26
30
  return /*#__PURE__*/_react.default.createElement("div", {
27
- className: "".concat(blockClass, "__defaultStringRenderer"),
31
+ className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap)),
28
32
  title: tableProps.value
29
33
  }, tableProps.value);
30
34
  };
@@ -29,6 +29,8 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
29
29
 
30
30
  var updateSelectAll = function updateSelectAll(hooks) {
31
31
  var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
32
+ var _instance$disableSele, _instance$disableSele2;
33
+
32
34
  var instance = _ref2.instance;
33
35
  var selectableRows = instance.rows.filter(function (row) {
34
36
  return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -48,7 +50,7 @@ var updateSelectAll = function updateSelectAll(hooks) {
48
50
  },
49
51
  checked: isAllRowsSelected,
50
52
  disabled: instance.disableSelectAll,
51
- title: 'Toggle All Rows Selected',
53
+ title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 ? void 0 : (_instance$disableSele2 = _instance$disableSele.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
52
54
  indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
53
55
  }];
54
56
  };
@@ -58,6 +60,8 @@ var updateSelectAll = function updateSelectAll(hooks) {
58
60
 
59
61
  var updatePageSelectAll = function updatePageSelectAll(hooks) {
60
62
  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
63
+ var _instance$disableSele3, _instance$disableSele4;
64
+
61
65
  var instance = _ref4.instance;
62
66
  var selectableRows = instance.page.filter(function (row) {
63
67
  return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -77,7 +81,7 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
77
81
  },
78
82
  checked: isAllRowsSelected,
79
83
  disabled: instance.disableSelectAll,
80
- title: 'Toggle All Rows Selected',
84
+ title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele3 = instance.disableSelectRowsProps) === null || _instance$disableSele3 === void 0 ? void 0 : (_instance$disableSele4 = _instance$disableSele3.labels) === null || _instance$disableSele4 === void 0 ? void 0 : _instance$disableSele4.toggleAllRowsLabel) || 'Toggle All Rows Selected',
81
85
  indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
82
86
  var id = _ref6.id;
83
87
  return instance.state.selectedRowIds[id];
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _settings = require("../../settings");
15
+
16
+ var _classnames = _interopRequireDefault(require("classnames"));
17
+
18
+ var _InlineEditCell = require("./Datagrid/addons/InlineEdit/InlineEditCell");
19
+
20
+ /*
21
+ * Licensed Materials - Property of IBM
22
+ * 5724-Q36
23
+ * (c) Copyright IBM Corp. 2022
24
+ * US Government Users Restricted Rights - Use, duplication or disclosure
25
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
26
+ */
27
+ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
28
+
29
+ var useInlineEdit = function useInlineEdit(hooks) {
30
+ var addInlineEdit = function addInlineEdit(props, _ref) {
31
+ var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
32
+
33
+ var cell = _ref.cell,
34
+ instance = _ref.instance;
35
+ var columnInlineEditConfig = cell.column.inlineEdit;
36
+ var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : (_cell$column$inlineEd = _cell$column.inlineEdit) === null || _cell$column$inlineEd === void 0 ? void 0 : _cell$column$inlineEd.type;
37
+ var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
38
+ return item.inlineEdit;
39
+ })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;
40
+
41
+ var renderInlineEditComponent = function renderInlineEditComponent(type) {
42
+ return /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
43
+ config: columnInlineEditConfig,
44
+ tabIndex: -1,
45
+ value: cell.value,
46
+ cell: cell,
47
+ instance: instance,
48
+ totalInlineEditColumns: totalInlineEditColumns,
49
+ type: type
50
+ });
51
+ };
52
+
53
+ if (cell.column.id === 'spacer') {
54
+ return [props, {
55
+ className: (0, _classnames.default)("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell--spacer"))
56
+ }];
57
+ }
58
+
59
+ return [props, {
60
+ className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-inline-edit"), true)),
61
+ role: 'gridcell',
62
+ children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
63
+ config: columnInlineEditConfig,
64
+ tabIndex: -1,
65
+ value: cell.value,
66
+ cell: cell,
67
+ instance: instance,
68
+ disabled: true,
69
+ nonEditCell: true,
70
+ totalInlineEditColumns: totalInlineEditColumns,
71
+ type: "text"
72
+ }))
73
+ }];
74
+ };
75
+
76
+ hooks.getCellProps.push(addInlineEdit);
77
+ hooks.useInstance.push(function (instance) {
78
+ Object.assign(instance, {
79
+ withInlineEdit: true
80
+ });
81
+ });
82
+ };
83
+
84
+ var _default = useInlineEdit;
85
+ exports.default = _default;