@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (229) hide show
  1. package/css/index-full-carbon.css +891 -178
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +779 -19
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +659 -77
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +683 -91
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/AddSelect/AddSelect.js +0 -3
  19. package/es/components/AddSelect/AddSelectBody.js +20 -3
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  21. package/es/components/AddSelect/AddSelectColumn.js +5 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectList.js +61 -27
  24. package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
  25. package/es/components/AddSelect/AddSelectSort.js +1 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  27. package/es/components/Card/Card.js +16 -6
  28. package/es/components/Card/CardFooter.js +3 -1
  29. package/es/components/Card/CardHeader.js +20 -1
  30. package/es/components/ComboButton/ComboButton.js +1 -1
  31. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  32. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  33. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  34. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  35. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  36. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  37. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  38. package/es/components/Datagrid/Datagrid/DatagridContent.js +149 -0
  39. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  40. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  41. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  43. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  44. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  45. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  46. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  50. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  51. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  61. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  62. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  63. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  64. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  70. package/es/components/Datagrid/index.js +3 -1
  71. package/es/components/Datagrid/useActionsColumn.js +28 -12
  72. package/es/components/Datagrid/useColumnOrder.js +8 -0
  73. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  74. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  75. package/es/components/Datagrid/useExpandedRow.js +0 -1
  76. package/es/components/Datagrid/useInlineEdit.js +71 -0
  77. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  78. package/es/components/Datagrid/useNestedRows.js +2 -2
  79. package/es/components/Datagrid/useRowExpander.js +1 -1
  80. package/es/components/Datagrid/useRowSize.js +17 -6
  81. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  82. package/es/components/Datagrid/useSelectRows.js +12 -2
  83. package/es/components/Datagrid/useSortableColumns.js +1 -1
  84. package/es/components/Datagrid/useStickyColumn.js +11 -0
  85. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  86. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  87. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  88. package/es/components/Datagrid/utils/getArgTypes.js +85 -0
  89. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  90. package/es/components/Datagrid/utils/makeData.js +46 -1
  91. package/es/components/ExportModal/ExportModal.js +1 -1
  92. package/es/components/ImportModal/ImportModal.js +3 -3
  93. package/es/components/InlineEdit/InlineEdit.js +11 -9
  94. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  95. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  96. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  97. package/es/components/OptionsTile/OptionsTile.js +1 -1
  98. package/es/components/PageHeader/PageHeader.js +1 -1
  99. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  100. package/es/components/Saving/Saving.js +1 -1
  101. package/es/components/SidePanel/SidePanel.js +1 -1
  102. package/es/components/StatusIcon/StatusIcon.js +1 -1
  103. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  104. package/es/components/WebTerminal/WebTerminal.js +1 -1
  105. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  106. package/es/components/index.js +1 -1
  107. package/es/global/js/hooks/useClickOutside.js +1 -1
  108. package/es/global/js/package-settings.js +3 -3
  109. package/es/global/js/utils/rangeWithCallback.js +13 -0
  110. package/es/global/js/utils/story-helper.js +5 -1
  111. package/es/global/js/utils/uuidv4.spec.js +4 -0
  112. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  113. package/lib/components/AddSelect/AddSelect.js +0 -4
  114. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  115. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  116. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  117. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  118. package/lib/components/AddSelect/AddSelectList.js +62 -28
  119. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  120. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  121. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  122. package/lib/components/Card/Card.js +16 -6
  123. package/lib/components/Card/CardFooter.js +3 -1
  124. package/lib/components/Card/CardHeader.js +21 -1
  125. package/lib/components/ComboButton/ComboButton.js +3 -3
  126. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  127. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  128. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  129. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  130. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  131. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  132. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  133. package/lib/components/Datagrid/Datagrid/DatagridContent.js +183 -0
  134. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  135. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  136. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  137. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  138. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  139. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  140. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  141. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +2 -2
  142. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  143. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  144. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  145. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  146. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  147. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  148. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  149. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  150. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  151. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  152. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  153. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  154. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  155. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  156. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  157. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  158. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  159. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  160. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  161. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  162. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  163. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  164. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  165. package/lib/components/Datagrid/index.js +17 -1
  166. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  167. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  168. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  169. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  170. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  171. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  172. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  173. package/lib/components/Datagrid/useNestedRows.js +3 -3
  174. package/lib/components/Datagrid/useRowExpander.js +3 -3
  175. package/lib/components/Datagrid/useRowSize.js +18 -13
  176. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  177. package/lib/components/Datagrid/useSelectRows.js +12 -2
  178. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  179. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  180. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  181. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  182. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  183. package/lib/components/Datagrid/utils/getArgTypes.js +93 -0
  184. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  185. package/lib/components/Datagrid/utils/makeData.js +47 -1
  186. package/lib/components/ExportModal/ExportModal.js +3 -3
  187. package/lib/components/ImportModal/ImportModal.js +4 -4
  188. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  189. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  190. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  191. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  192. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  193. package/lib/components/PageHeader/PageHeader.js +2 -2
  194. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  195. package/lib/components/Saving/Saving.js +5 -5
  196. package/lib/components/SidePanel/SidePanel.js +3 -3
  197. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  198. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  199. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  200. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  201. package/lib/components/index.js +12 -0
  202. package/lib/global/js/hooks/useClickOutside.js +1 -1
  203. package/lib/global/js/package-settings.js +3 -3
  204. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  205. package/lib/global/js/utils/story-helper.js +5 -1
  206. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  207. package/package.json +15 -15
  208. package/scss/components/AddSelect/_add-select.scss +127 -28
  209. package/scss/components/Card/_card.scss +1 -0
  210. package/scss/components/Cascade/_cascade.scss +1 -1
  211. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  212. package/scss/components/Datagrid/_datagrid.scss +7 -0
  213. package/scss/components/Datagrid/_storybook-styles.scss +8 -5
  214. package/scss/components/Datagrid/styles/_datagrid.scss +31 -15
  215. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  216. package/scss/components/Datagrid/styles/_index.scss +1 -0
  217. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  218. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  219. package/scss/components/Datagrid/styles/_useInlineEdit.scss +404 -0
  220. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  221. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  222. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +45 -6
  223. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  224. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  225. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  226. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  227. package/scss/components/SidePanel/_side-panel.scss +3 -6
  228. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  229. package/scss/components/_index-released-only.scss +1 -0
@@ -2,16 +2,16 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
13
 
14
- var React = _interopRequireWildcard(require("react"));
14
+ var _react = _interopRequireDefault(require("react"));
15
15
 
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
 
@@ -29,9 +29,7 @@ var _DraggableElement = _interopRequireDefault(require("../../DraggableElement")
29
29
 
30
30
  var _common = require("./common");
31
31
 
32
- 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); }
33
-
34
- 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; }
32
+ var _classnames = _interopRequireDefault(require("classnames"));
35
33
 
36
34
  // @flow
37
35
 
@@ -59,36 +57,39 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
59
57
  };
60
58
 
61
59
  var Columns = function Columns(_ref) {
62
- var filterString = _ref.filterString,
60
+ var _classNames;
61
+
62
+ var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
63
+ filterString = _ref.filterString,
63
64
  columns = _ref.columns,
64
65
  setColumnsObject = _ref.setColumnsObject,
65
66
  onSelectColumn = _ref.onSelectColumn,
66
- _ref$instructionsLabe = _ref.instructionsLabel,
67
- instructionsLabel = _ref$instructionsLabe === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$instructionsLabe,
68
- _ref$disabledInstruct = _ref.disabledInstructionsLabel,
69
- disabledInstructionsLabel = _ref$disabledInstruct === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$disabledInstruct;
67
+ assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
68
+ assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
69
+ selectAllLabel = _ref.selectAllLabel;
70
70
 
71
- var _React$useState = React.useState(''),
71
+ var _React$useState = _react.default.useState(''),
72
72
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
73
73
  ariaRegionText = _React$useState2[0],
74
74
  setAriaRegionText = _React$useState2[1];
75
75
 
76
- var _React$useState3 = React.useState(-1),
76
+ var _React$useState3 = _react.default.useState(-1),
77
77
  _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
78
78
  focusIndex = _React$useState4[0],
79
79
  setFocusIndex = _React$useState4[1];
80
80
 
81
- var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
81
+ var moveElement = _react.default.useCallback(function (dragIndex, hoverIndex) {
82
82
  var dragCard = columns[dragIndex];
83
83
  setColumnsObject((0, _immutabilityHelper.default)(columns, {
84
84
  $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
85
85
  }));
86
86
  }, [columns, setColumnsObject]);
87
- return /*#__PURE__*/React.createElement("div", {
87
+
88
+ return /*#__PURE__*/_react.default.createElement("div", {
88
89
  className: "".concat(blockClass, "__customize-columns-column-list")
89
- }, /*#__PURE__*/React.createElement(_reactDnd.DndProvider, {
90
+ }, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
90
91
  backend: _reactDndHtml5Backend.HTML5Backend
91
- }, /*#__PURE__*/React.createElement("ol", {
92
+ }, /*#__PURE__*/_react.default.createElement("ol", {
92
93
  className: "".concat(blockClass, "__customize-columns-column-list--focus"),
93
94
  role: "listbox",
94
95
  "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
@@ -107,16 +108,30 @@ var Columns = function Columns(_ref) {
107
108
  setFocusIndex(0);
108
109
  }
109
110
  }
110
- }, /*#__PURE__*/React.createElement("span", {
111
+ }, /*#__PURE__*/_react.default.createElement("span", {
111
112
  "aria-live": "assertive",
112
113
  className: "".concat(blockClass, "__shared-ui--assistive-text")
113
- }, ariaRegionText), /*#__PURE__*/React.createElement("span", {
114
+ }, ariaRegionText), /*#__PURE__*/_react.default.createElement("span", {
114
115
  id: "".concat(blockClass, "__customize-columns--instructions"),
115
116
  className: "".concat(blockClass, "__shared-ui--assistive-text")
116
- }, filterString.length === 0 ? instructionsLabel : disabledInstructionsLabel), columns.filter(function (colDef) {
117
+ }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
118
+ id: "".concat(blockClass, "__customize-columns-select-all"),
119
+ className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _classNames)),
120
+ selected: getVisibleColumnsCount() > 0
121
+ }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
122
+ wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
123
+ checked: getVisibleColumnsCount() === columns.length,
124
+ empty: !!getVisibleColumnsCount() === 0,
125
+ indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
126
+ onChange: function onChange() {
127
+ onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
128
+ },
129
+ id: "".concat(blockClass, "__customization-column-select-all"),
130
+ labelText: selectAllLabel
131
+ })), columns.filter(function (colDef) {
117
132
  return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
118
133
  }).map(function (colDef, i) {
119
- return /*#__PURE__*/React.createElement(_DraggableElement.default, {
134
+ return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
120
135
  key: colDef.id,
121
136
  index: i,
122
137
  listData: columns,
@@ -142,24 +157,31 @@ var Columns = function Columns(_ref) {
142
157
  });
143
158
  }
144
159
  }
145
- }
146
- }, /*#__PURE__*/React.createElement(_react2.Checkbox, {
147
- wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
160
+ },
161
+ selected: (0, _common.isColumnVisible)(colDef)
162
+ }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
163
+ wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
148
164
  checked: (0, _common.isColumnVisible)(colDef),
149
165
  onChange: onSelectColumn.bind(null, colDef),
150
166
  id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
151
167
  labelText: colDef.Header.props.title,
152
- title: colDef.Header.props.title
168
+ title: colDef.Header.props.title,
169
+ className: "".concat(blockClass, "__customize-columns-checkbox")
153
170
  }));
154
171
  }))));
155
172
  };
156
173
 
157
174
  Columns.propTypes = {
175
+ assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
176
+ assistiveTextInstructionsLabel: _propTypes.default.string,
158
177
  columns: _propTypes.default.array.isRequired,
159
178
  disabledInstructionsLabel: _propTypes.default.string,
160
179
  filterString: _propTypes.default.string.isRequired,
180
+ getVisibleColumnsCount: _propTypes.default.func.isRequired,
161
181
  instructionsLabel: _propTypes.default.string,
162
182
  onSelectColumn: _propTypes.default.func.isRequired,
183
+ selectAllLabel: _propTypes.default.string,
184
+ setColumnStatus: _propTypes.default.func,
163
185
  setColumnsObject: _propTypes.default.func.isRequired
164
186
  };
165
187
  var _default = Columns;
@@ -44,20 +44,40 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
44
44
  columnDefinitions = _ref.columnDefinitions,
45
45
  originalColumnDefinitions = _ref.originalColumnDefinitions,
46
46
  _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
47
- customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize display' : _ref$customizeModalHe,
47
+ customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
48
48
  _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
49
49
  primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
50
50
  _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
51
51
  secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
52
52
  _ref$instructionsLabe = _ref.instructionsLabel,
53
- instructionsLabel = _ref$instructionsLabe === void 0 ? 'Deselect columns to hide them. Click and drag the white box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe;
53
+ instructionsLabel = _ref$instructionsLabe === void 0 ? 'Select columns to display them. Click and drag the box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe,
54
+ _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
55
+ findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
56
+ _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
57
+ resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa,
58
+ _ref$assistiveTextIns = _ref.assistiveTextInstructionsLabel,
59
+ assistiveTextInstructionsLabel = _ref$assistiveTextIns === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$assistiveTextIns,
60
+ _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
61
+ assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
62
+ _ref$selectAllLabel = _ref.selectAllLabel,
63
+ selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
54
64
 
55
65
  var _useState = (0, _react.useState)(''),
56
66
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
57
- searchText = _useState2[0],
58
- setSearchText = _useState2[1];
67
+ visibleColumnsCount = _useState2[0],
68
+ setVisibleColumnsCount = _useState2[1];
59
69
 
60
- var _useState3 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
70
+ var _useState3 = (0, _react.useState)(''),
71
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
72
+ totalColumns = _useState4[0],
73
+ setTotalColumns = _useState4[1];
74
+
75
+ var _useState5 = (0, _react.useState)(''),
76
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
77
+ searchText = _useState6[0],
78
+ setSearchText = _useState6[1];
79
+
80
+ var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
61
81
  .filter(function (colDef) {
62
82
  return !!colDef.Header.props;
63
83
  }) // only sort the hidden column to the end when modal reopen
@@ -75,14 +95,14 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
75
95
 
76
96
  return 0;
77
97
  })),
78
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
79
- columnObjects = _useState4[0],
80
- _setColumnsObject = _useState4[1];
98
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
99
+ columnObjects = _useState8[0],
100
+ setColumnObjects = _useState8[1];
81
101
 
82
- var _useState5 = (0, _react.useState)(false),
83
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
84
- isDirty = _useState6[0],
85
- setIsDirty = _useState6[1];
102
+ var _useState9 = (0, _react.useState)(false),
103
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
104
+ isDirty = _useState10[0],
105
+ setIsDirty = _useState10[1];
86
106
 
87
107
  var onRequestClose = function onRequestClose() {
88
108
  setIsModalOpen(false);
@@ -101,7 +121,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
101
121
 
102
122
  var onCheckboxCheck = function onCheckboxCheck(col, value) {
103
123
  var changedDefinitions = columnObjects.map(function (definition) {
104
- if (definition.id === col.id) {
124
+ if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
105
125
  return _objectSpread(_objectSpread({}, definition), {}, {
106
126
  isVisible: value
107
127
  });
@@ -109,9 +129,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
109
129
 
110
130
  return definition;
111
131
  });
112
-
113
- _setColumnsObject(changedDefinitions);
114
-
132
+ setColumnObjects(changedDefinitions);
115
133
  setDirty();
116
134
  };
117
135
 
@@ -121,11 +139,20 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
121
139
  }
122
140
  };
123
141
 
142
+ var getVisibleColumnsCount = (0, _react.useCallback)(function () {
143
+ return columnObjects.filter(function (col) {
144
+ return col.isVisible;
145
+ }).length;
146
+ }, [columnObjects]);
124
147
  var string = searchText.trim().toLowerCase();
148
+ (0, _react.useEffect)(function () {
149
+ setVisibleColumnsCount(getVisibleColumnsCount());
150
+ setTotalColumns(columnObjects.length);
151
+ }, [getVisibleColumnsCount, columnObjects.length]);
125
152
  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
126
153
  className: "".concat(blockClass, "__customize-columns-modal"),
127
154
  open: isOpen,
128
- modalHeading: customizeModalHeadingLabel,
155
+ modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
129
156
  primaryButtonText: primaryButtonTextLabel,
130
157
  secondaryButtonText: secondaryButtonTextLabel,
131
158
  selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
@@ -141,32 +168,41 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
141
168
  originalColumnDefinitions: originalColumnDefinitions,
142
169
  searchText: searchText,
143
170
  setColumnsObject: function setColumnsObject(cols) {
144
- _setColumnsObject(cols);
145
-
171
+ setColumnObjects(cols);
146
172
  setDirty();
147
173
  },
148
- setSearchText: setSearchText
174
+ setSearchText: setSearchText,
175
+ findColumnPlaceholderLabel: findColumnPlaceholderLabel,
176
+ resetToDefaultLabel: resetToDefaultLabel
149
177
  }), isOpen && /*#__PURE__*/_react.default.createElement(_Columns.default, {
178
+ assistiveTextInstructionsLabel: assistiveTextInstructionsLabel,
179
+ assistiveTextDisabledInstructionsLabel: assistiveTextDisabledInstructionsLabel,
180
+ getVisibleColumnsCount: getVisibleColumnsCount,
150
181
  columns: columnObjects,
151
182
  filterString: string,
152
183
  onSelectColumn: onCheckboxCheck,
153
184
  setColumnsObject: function setColumnsObject(cols) {
154
- _setColumnsObject(cols);
155
-
185
+ setColumnObjects(cols);
156
186
  setDirty();
157
- }
187
+ },
188
+ selectAllLabel: selectAllLabel
158
189
  }));
159
190
  };
160
191
 
161
192
  CustomizeColumnsModal.propTypes = {
193
+ assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
194
+ assistiveTextInstructionsLabel: _propTypes.default.string,
162
195
  columnDefinitions: _propTypes.default.array.isRequired,
163
196
  customizeModalHeadingLabel: _propTypes.default.string,
197
+ findColumnPlaceholderLabel: _propTypes.default.string,
164
198
  instructionsLabel: _propTypes.default.string,
165
199
  isOpen: _propTypes.default.bool.isRequired,
166
200
  onSaveColumnPrefs: _propTypes.default.func.isRequired,
167
201
  originalColumnDefinitions: _propTypes.default.array.isRequired,
168
202
  primaryButtonTextLabel: _propTypes.default.string,
203
+ resetToDefaultLabel: _propTypes.default.string,
169
204
  secondaryButtonTextLabel: _propTypes.default.string,
205
+ selectAllLabel: _propTypes.default.string,
170
206
  setIsModalOpen: _propTypes.default.func.isRequired
171
207
  };
172
208
  var _default = CustomizeColumnsModal;
@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
19
19
 
20
20
  var _CustomizeColumnsModal = _interopRequireDefault(require("./CustomizeColumnsModal"));
21
21
 
22
- var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
22
+ var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
23
23
 
24
24
  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); }
25
25
 
@@ -31,10 +31,11 @@ var ModalWrapper = function ModalWrapper(_ref) {
31
31
  _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
32
32
  isModalOpen = _instance$customizeCo.isModalOpen,
33
33
  setIsModalOpen = _instance$customizeCo.setIsModalOpen,
34
+ labels = _instance$customizeCo.labels,
34
35
  rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
35
36
 
36
37
  if (isModalOpen) {
37
- return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, {
38
+ return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, labels, {
38
39
  isOpen: isModalOpen,
39
40
  setIsModalOpen: setIsModalOpen,
40
41
  columnDefinitions: instance.allColumns,
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.InlineEditButton = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _classnames = _interopRequireDefault(require("classnames"));
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _settings = require("../../../../../../settings");
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 InlineEditButton = function InlineEditButton(_ref) {
30
+ var _cx, _cx2;
31
+
32
+ var label = _ref.label,
33
+ Icon = _ref.renderIcon,
34
+ disabled = _ref.disabled,
35
+ LabelIcon = _ref.labelIcon,
36
+ placeholder = _ref.placeholder,
37
+ nonEditCell = _ref.nonEditCell,
38
+ isActiveCell = _ref.isActiveCell,
39
+ columnConfig = _ref.columnConfig,
40
+ totalInlineEditColumns = _ref.totalInlineEditColumns,
41
+ totalColumns = _ref.totalColumns,
42
+ type = _ref.type;
43
+ var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
44
+ return /*#__PURE__*/_react.default.createElement("div", {
45
+ className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
46
+ tabIndex: isActiveCell ? 0 : -1,
47
+ "data-disabled": disabled || nonEditCell,
48
+ "aria-disabled": disabled || nonEditCell,
49
+ role: "button",
50
+ title: label
51
+ }, LabelIcon && /*#__PURE__*/_react.default.createElement("div", {
52
+ className: "".concat(blockClass, "__label-icon")
53
+ }, /*#__PURE__*/_react.default.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/_react.default.createElement("span", {
54
+ className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
55
+ }, label) : /*#__PURE__*/_react.default.createElement("span", {
56
+ className: "".concat(blockClass, "__placeholder")
57
+ }, placeholder), !nonEditCell && Icon && /*#__PURE__*/_react.default.createElement("div", {
58
+ className: "".concat(blockClass, "__inline-edit-button-icon")
59
+ }, /*#__PURE__*/_react.default.createElement(Icon, null)));
60
+ };
61
+
62
+ exports.InlineEditButton = InlineEditButton;
63
+ InlineEditButton.propTypes = {
64
+ columnConfig: _propTypes.default.object,
65
+ disabled: _propTypes.default.bool,
66
+ isActiveCell: _propTypes.default.bool,
67
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
68
+ labelIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
69
+ nonEditCell: _propTypes.default.bool,
70
+ placeholder: _propTypes.default.string,
71
+ renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
72
+ totalColumns: _propTypes.default.number,
73
+ totalInlineEditColumns: _propTypes.default.number,
74
+ type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
75
+ value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
76
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "InlineEditButton", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _InlineEditButton.InlineEditButton;
10
+ }
11
+ });
12
+
13
+ var _InlineEditButton = require("./InlineEditButton");