@carbon/ibm-products 2.0.0-rc.26 → 2.0.0-rc.28

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. package/css/index-full-carbon.css +131 -251
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -5
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +202 -219
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +131 -251
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -5
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +131 -251
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -5
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AboutModal/AboutModal.js +3 -4
  18. package/es/components/ActionBar/ActionBar.js +13 -29
  19. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +15 -21
  20. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  21. package/es/components/Card/Card.js +8 -6
  22. package/es/components/Card/CardHeader.js +2 -2
  23. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +15 -20
  24. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
  25. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  26. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -2
  27. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +7 -8
  28. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
  29. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  30. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -5
  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 +19 -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/useFiltering.js +4 -2
  37. package/es/components/Datagrid/useOnRowClick.js +11 -1
  38. package/es/components/Datagrid/useSelectRows.js +2 -0
  39. package/es/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +92 -30
  40. package/es/components/{InlineEdit → EditInPlace}/index.js +1 -1
  41. package/es/components/ExpressiveCard/ExpressiveCard.js +3 -3
  42. package/es/components/PageHeader/PageHeader.js +40 -38
  43. package/es/components/PageHeader/PageHeaderTitle.js +18 -18
  44. package/es/components/ProductiveCard/ProductiveCard.js +3 -3
  45. package/es/components/SidePanel/SidePanel.js +25 -26
  46. package/es/components/TagSet/TagSet.js +5 -7
  47. package/es/components/Tearsheet/TearsheetShell.js +4 -6
  48. package/es/components/index.js +1 -1
  49. package/es/global/js/hooks/useResizeObserver.js +79 -0
  50. package/es/global/js/hooks/useWindowResize.js +6 -0
  51. package/es/global/js/hooks/useWindowScroll.js +7 -0
  52. package/es/global/js/package-settings.js +2 -4
  53. package/lib/components/AboutModal/AboutModal.js +3 -4
  54. package/lib/components/ActionBar/ActionBar.js +13 -29
  55. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +13 -19
  56. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  57. package/lib/components/Card/Card.js +7 -5
  58. package/lib/components/Card/CardHeader.js +2 -2
  59. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +14 -19
  60. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
  61. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  62. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -2
  63. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  64. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
  65. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  66. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -5
  67. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  68. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
  69. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +19 -5
  70. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  71. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +18 -1
  72. package/lib/components/Datagrid/useFiltering.js +4 -2
  73. package/lib/components/Datagrid/useOnRowClick.js +11 -1
  74. package/lib/components/Datagrid/useSelectRows.js +2 -0
  75. package/lib/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +100 -34
  76. package/lib/components/{InlineEdit → EditInPlace}/index.js +3 -3
  77. package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -3
  78. package/lib/components/PageHeader/PageHeader.js +40 -38
  79. package/lib/components/PageHeader/PageHeaderTitle.js +19 -19
  80. package/lib/components/ProductiveCard/ProductiveCard.js +3 -3
  81. package/lib/components/SidePanel/SidePanel.js +25 -26
  82. package/lib/components/TagSet/TagSet.js +5 -7
  83. package/lib/components/Tearsheet/TearsheetShell.js +4 -6
  84. package/lib/components/index.js +7 -7
  85. package/lib/global/js/hooks/useResizeObserver.js +91 -0
  86. package/lib/global/js/hooks/useWindowScroll.js +6 -0
  87. package/lib/global/js/package-settings.js +2 -4
  88. package/package.json +3 -4
  89. package/scss/components/ActionBar/_action-bar.scss +0 -4
  90. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
  91. package/scss/components/Card/_card.scss +13 -6
  92. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -7
  93. package/scss/components/{InlineEditV2/_inline-edit-v2.scss → EditInPlace/_edit-in-place.scss} +56 -14
  94. package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss +1 -1
  95. package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss +1 -1
  96. package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss +3 -15
  97. package/scss/components/ExportModal/_export-modal.scss +0 -4
  98. package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
  99. package/scss/components/PageHeader/_page-header.scss +3 -10
  100. package/scss/components/ProductiveCard/_productive-card.scss +31 -2
  101. package/scss/components/TagSet/_tag-set.scss +1 -0
  102. package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
  103. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  104. package/scss/components/_index-released-only.scss +1 -1
  105. package/scss/components/_index-with-carbon.scss +1 -2
  106. package/scss/components/_index.scss +1 -2
  107. package/es/components/InlineEdit/InlineEdit.js +0 -47
  108. package/es/components/InlineEditV1/InlineEditV1.js +0 -442
  109. package/es/components/InlineEditV1/index.js +0 -7
  110. package/es/components/InlineEditV2/index.js +0 -7
  111. package/lib/components/InlineEdit/InlineEdit.js +0 -63
  112. package/lib/components/InlineEditV1/InlineEditV1.js +0 -459
  113. package/lib/components/InlineEditV1/index.js +0 -13
  114. package/lib/components/InlineEditV2/index.js +0 -13
  115. package/scss/components/InlineEditV1/_carbon-imports.scss +0 -6
  116. package/scss/components/InlineEditV1/_index.scss +0 -8
  117. package/scss/components/InlineEditV1/_inline-edit-v1.scss +0 -269
  118. package/scss/components/InlineEditV2/_index-with-carbon.scss +0 -9
  119. package/scss/components/InlineEditV2/_storybook-styles.scss +0 -9
  120. /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
17
17
  //
18
18
  import React, { forwardRef } from 'react';
19
19
  import cx from 'classnames';
20
- import { Button, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
20
+ import { Button, IconButton, OverflowMenu, OverflowMenuItem, Layer } from '@carbon/react';
21
21
  import PropTypes from 'prop-types';
22
22
  import { CardHeader } from './CardHeader';
23
23
  import { CardFooter } from './CardFooter';
@@ -94,7 +94,9 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
94
94
  if (overflowActions.length > 0) {
95
95
  var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
96
96
  var size = actionsPlacement === 'top' ? 'sm' : 'md';
97
- return /*#__PURE__*/React.createElement(OverflowMenu, {
97
+ return /*#__PURE__*/React.createElement(Layer, {
98
+ level: 2
99
+ }, /*#__PURE__*/React.createElement(OverflowMenu, {
98
100
  size: size,
99
101
  direction: pos,
100
102
  flipped: true,
@@ -106,7 +108,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
106
108
  return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({
107
109
  key: id
108
110
  }, rest));
109
- }));
111
+ })));
110
112
  }
111
113
 
112
114
  var icons = actionIcons.map(function (_ref3) {
@@ -248,8 +250,8 @@ Card.propTypes = {
248
250
  children: PropTypes.node,
249
251
  className: PropTypes.string,
250
252
  clickZone: PropTypes.oneOf(['one', 'two', 'three']),
251
- description: PropTypes.string,
252
- label: PropTypes.string,
253
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
254
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
253
255
  media: PropTypes.node,
254
256
  mediaPosition: PropTypes.oneOf(['top', 'left']),
255
257
  onClick: PropTypes.func,
@@ -274,7 +276,7 @@ Card.propTypes = {
274
276
  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
275
277
  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
276
278
  secondaryButtonText: PropTypes.string,
277
- title: PropTypes.string,
279
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
278
280
  titleSize: PropTypes.oneOf(['default', 'large'])
279
281
  };
280
282
  Card.displayName = componentName;
@@ -60,7 +60,7 @@ export var CardHeader = function CardHeader(_ref) {
60
60
  };
61
61
  CardHeader.propTypes = {
62
62
  actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
63
- description: PropTypes.string,
63
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
64
64
  hasActions: PropTypes.bool,
65
65
  label: PropTypes.string,
66
66
  noActionIcons: PropTypes.bool,
@@ -68,7 +68,7 @@ CardHeader.propTypes = {
68
68
  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
69
69
  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
70
70
  primaryButtonText: PropTypes.string,
71
- title: PropTypes.string,
71
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
72
72
  titleSize: PropTypes.oneOf(['default', 'large'])
73
73
  };
74
74
  CardHeader.displayName = componentName;
@@ -1,16 +1,15 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
 
3
- /*
4
- * Licensed Materials - Property of IBM
5
- * 5724-Q36
6
- * (c) Copyright IBM Corp. 2020
7
- * US Government Users Restricted Rights - Use, duplication or disclosure
8
- * restricted by GSA ADP Schedule Contract with IBM Corp.
3
+ /**
4
+ * Copyright IBM Corp. 2020, 2023
5
+ *
6
+ * This source code is licensed under the Apache-2.0 license found in the
7
+ * LICENSE file in the root directory of this source tree.
9
8
  */
10
9
  import React from 'react';
11
10
  import { pkg } from '../../../settings';
12
11
  import { TableBody, TableRow, TableCell } from '@carbon/react';
13
- import { NoDataEmptyState, ErrorEmptyState } from '../../EmptyStates';
12
+ import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState } from '../../EmptyStates';
14
13
  var blockClass = "".concat(pkg.prefix, "--datagrid");
15
14
 
16
15
  var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
@@ -24,25 +23,21 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
24
23
  illustrationTheme = datagridState.illustrationTheme,
25
24
  emptyStateAction = datagridState.emptyStateAction,
26
25
  emptyStateLink = datagridState.emptyStateLink;
27
- return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
28
- className: "".concat(blockClass, "__empty-state-body")
29
- }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
30
- colSpan: headers.length
31
- }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, {
32
- illustrationTheme: illustrationTheme,
33
- size: emptyStateSize,
34
- title: emptyStateTitle,
35
- subtitle: emptyStateDescription,
36
- action: emptyStateAction,
37
- link: emptyStateLink
38
- }), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, {
26
+ var emptyStateProps = {
39
27
  illustrationTheme: illustrationTheme,
40
28
  size: emptyStateSize,
41
29
  title: emptyStateTitle,
42
30
  subtitle: emptyStateDescription,
43
31
  action: emptyStateAction,
44
32
  link: emptyStateLink
45
- }))));
33
+ };
34
+ return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
35
+ role: false
36
+ }), {
37
+ className: "".concat(blockClass, "__empty-state-body")
38
+ }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
39
+ colSpan: headers.length
40
+ }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState, emptyStateProps))));
46
41
  };
47
42
 
48
43
  export default DatagridEmptyBody;
@@ -16,7 +16,9 @@ import { pkg } from '../../../settings';
16
16
  var blockClass = "".concat(pkg.prefix, "--datagrid");
17
17
 
18
18
  var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
19
- return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps(), {
19
+ return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
20
+ role: false
21
+ }), {
20
22
  className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
21
23
  ref: headRef
22
24
  }), datagridState.headers.filter(function (_ref) {
@@ -32,7 +34,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
32
34
  });
33
35
  }
34
36
 
35
- return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps(), {
37
+ return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
38
+ role: false
39
+ }), {
36
40
  className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
37
41
  key: header.id
38
42
  }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
@@ -24,7 +24,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
24
24
  var getTableBodyProps = datagridState.getTableBodyProps,
25
25
  rows = datagridState.rows,
26
26
  prepareRow = datagridState.prepareRow;
27
- return /*#__PURE__*/React.createElement("tbody", _extends({}, getTableBodyProps(), {
27
+ return /*#__PURE__*/React.createElement("tbody", _extends({}, getTableBodyProps({
28
+ role: false
29
+ }), {
28
30
  className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
29
31
  }), rows.map(function (row) {
30
32
  prepareRow(row);
@@ -71,7 +71,9 @@ var DatagridRow = function DatagridRow(datagridState) {
71
71
 
72
72
  return /*#__PURE__*/React.createElement(TableRow, _extends({
73
73
  className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
74
- }, row.getRowProps(), {
74
+ }, row.getRowProps({
75
+ role: false
76
+ }), {
75
77
  key: row.id,
76
78
  onMouseEnter: function onMouseEnter(event) {
77
79
  if (!withNestedRows) {
@@ -105,7 +107,9 @@ var DatagridRow = function DatagridRow(datagridState) {
105
107
  }
106
108
  }
107
109
  }), row.cells.map(function (cell, index) {
108
- var cellProps = cell.getCellProps();
110
+ var cellProps = cell.getCellProps({
111
+ role: false
112
+ });
109
113
 
110
114
  var children = cellProps.children,
111
115
  restProps = _objectWithoutProperties(cellProps, _excluded);
@@ -4,14 +4,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
5
  var _excluded = ["onChange"];
6
6
 
7
- /*
8
- * Licensed Materials - Property of IBM
9
- * 5724-Q36
10
- * (c) Copyright IBM Corp. 2020, 2021
11
- * US Government Users Restricted Rights - Use, duplication or disclosure
12
- * restricted by GSA ADP Schedule Contract with IBM Corp.
7
+ /**
8
+ * Copyright IBM Corp. 2020, 2023
9
+ *
10
+ * This source code is licensed under the Apache-2.0 license found in the
11
+ * LICENSE file in the root directory of this source tree.
13
12
  */
14
- // @flow
15
13
  import React, { useEffect, useState, useLayoutEffect } from 'react';
16
14
  import PropTypes from 'prop-types';
17
15
  import cx from 'classnames';
@@ -103,7 +101,8 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
103
101
  }, props));
104
102
  },
105
103
  size: "sm",
106
- ariaLabel: allRowsLabel
104
+ ariaLabel: allRowsLabel,
105
+ menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
107
106
  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
108
107
  itemText: allPageRowsLabel,
109
108
  requireTitle: true,
@@ -22,7 +22,9 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
22
22
  var getTableBodyProps = datagridState.getTableBodyProps,
23
23
  rows = datagridState.rows,
24
24
  prepareRow = datagridState.prepareRow;
25
- return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
25
+ return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
26
+ role: false
27
+ }), {
26
28
  className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
27
29
  }), rows.map(function (row) {
28
30
  prepareRow(row);
@@ -7,10 +7,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
7
7
  * This source code is licensed under the Apache-2.0 license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import React, { useEffect, useState } from 'react';
10
+ import React, { useEffect, useRef, useState } from 'react';
11
11
  import { Add, OverflowMenuVertical } from '@carbon/react/icons';
12
12
  import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
13
- import { useResizeDetector } from 'react-resize-detector';
13
+ import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
14
14
  import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
15
15
  import { pkg, carbon } from '../../../settings';
16
16
  import cx from 'classnames';
@@ -134,9 +134,10 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
134
134
  };
135
135
 
136
136
  var DatagridToolbar = function DatagridToolbar(datagridState) {
137
- var _useResizeDetector = useResizeDetector(),
138
- width = _useResizeDetector.width,
139
- ref = _useResizeDetector.ref;
137
+ var ref = useRef(null);
138
+
139
+ var _useResizeObserver = useResizeObserver(ref),
140
+ width = _useResizeObserver.width;
140
141
 
141
142
  var DatagridActions = datagridState.DatagridActions,
142
143
  DatagridBatchActions = datagridState.DatagridBatchActions,
@@ -18,7 +18,7 @@ import { TableBody } from '@carbon/react';
18
18
  import { pkg } from '../../../settings';
19
19
  import DatagridHead from './DatagridHead';
20
20
  import { px } from '@carbon/layout';
21
- import { useResizeDetector } from 'react-resize-detector';
21
+ import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
22
22
  var blockClass = "".concat(pkg.prefix, "--datagrid");
23
23
  var rowSizeMap = {
24
24
  xs: 24,
@@ -57,9 +57,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
57
57
  gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
58
58
  };
59
59
 
60
- useResizeDetector({
61
- onResize: handleVirtualGridResize,
62
- targetRef: gridRef
60
+ useResizeObserver(gridRef, {
61
+ callback: handleVirtualGridResize
63
62
  });
64
63
 
65
64
  var syncScroll = function syncScroll(e) {
@@ -85,7 +84,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
85
84
  width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
86
85
  overflow: 'hidden'
87
86
  }
88
- }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
87
+ }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
88
+ role: false
89
+ }), {
89
90
  onScroll: function onScroll(e) {
90
91
  return syncScroll(e);
91
92
  }
@@ -46,9 +46,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
46
46
  secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
47
47
  setAllFilters = _ref.setAllFilters,
48
48
  _ref$data = _ref.data,
49
- data = _ref$data === void 0 ? [] : _ref$data;
50
-
49
+ data = _ref$data === void 0 ? [] : _ref$data,
50
+ _ref$initialFilters = _ref.initialFilters,
51
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
52
+ // Save the initial filters we only need the filters once when it loads
53
+ var initialFiltersRef = useRef(initialFilters);
51
54
  /** State */
55
+
52
56
  var _useState = useState(false),
53
57
  _useState2 = _slicedToArray(_useState, 2),
54
58
  open = _useState2[0],
@@ -58,7 +62,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
58
62
  updateMethod: updateMethod,
59
63
  filters: filters,
60
64
  setAllFilters: setAllFilters,
61
- variation: FLYOUT
65
+ variation: FLYOUT,
66
+ initialFilters: initialFiltersRef.current
62
67
  }),
63
68
  filtersState = _useFilters.filtersState,
64
69
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -208,6 +213,15 @@ FilterFlyout.propTypes = {
208
213
  */
209
214
  flyoutIconDescription: PropTypes.string,
210
215
 
216
+ /**
217
+ * Filters that should be applied on load
218
+ */
219
+ initialFilters: PropTypes.arrayOf(PropTypes.shape({
220
+ id: PropTypes.string.isRequired,
221
+ type: PropTypes.string.isRequired,
222
+ value: PropTypes.any.isRequired
223
+ })),
224
+
211
225
  /**
212
226
  * Callback when the apply button is clicked
213
227
  */
@@ -57,9 +57,13 @@ var FilterPanel = function FilterPanel(_ref) {
57
57
  _ref$searchLabelText = _ref.searchLabelText,
58
58
  searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
59
59
  _ref$searchPlaceholde = _ref.searchPlaceholder,
60
- searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde;
61
-
60
+ searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
61
+ _ref$initialFilters = _ref.initialFilters,
62
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
63
+ // Save the initial filters we only need the filters once
64
+ var initialFiltersRef = useRef(initialFilters);
62
65
  /** State */
66
+
63
67
  var _useState = useState(false),
64
68
  _useState2 = _slicedToArray(_useState, 2),
65
69
  showDividerLine = _useState2[0],
@@ -69,7 +73,8 @@ var FilterPanel = function FilterPanel(_ref) {
69
73
  updateMethod: updateMethod,
70
74
  filters: filterSections,
71
75
  setAllFilters: setAllFilters,
72
- variation: PANEL
76
+ variation: PANEL,
77
+ initialFilters: initialFiltersRef.current
73
78
  }),
74
79
  filtersState = _useFilters.filtersState,
75
80
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -225,13 +230,14 @@ var FilterPanel = function FilterPanel(_ref) {
225
230
  height: getScrollableContainerHeight()
226
231
  },
227
232
  onScroll: onInnerContainerScroll
228
- }, filterSections.map(function (_ref2) {
233
+ }, filterSections.map(function (_ref2, index) {
229
234
  var _ref2$categoryTitle = _ref2.categoryTitle,
230
235
  categoryTitle = _ref2$categoryTitle === void 0 ? null : _ref2$categoryTitle,
231
236
  _ref2$filters = _ref2.filters,
232
237
  filters = _ref2$filters === void 0 ? [] : _ref2$filters,
233
238
  hasAccordion = _ref2.hasAccordion;
234
239
  return /*#__PURE__*/React.createElement("div", {
240
+ key: index,
235
241
  className: "".concat(componentClass, "__category")
236
242
  }, categoryTitle && /*#__PURE__*/React.createElement("div", {
237
243
  className: "".concat(componentClass, "__category-title")
@@ -253,6 +259,15 @@ FilterPanel.propTypes = {
253
259
  closeIconDescription: PropTypes.string,
254
260
  filterPanelMinHeight: PropTypes.number,
255
261
  filterSections: PropTypes.array,
262
+
263
+ /**
264
+ * Filters that should be applied on load
265
+ */
266
+ initialFilters: PropTypes.arrayOf(PropTypes.shape({
267
+ id: PropTypes.string.isRequired,
268
+ type: PropTypes.string.isRequired,
269
+ value: PropTypes.any.isRequired
270
+ })),
256
271
  onApply: PropTypes.func,
257
272
  onCancel: PropTypes.func,
258
273
  onPanelClose: PropTypes.func,
@@ -25,15 +25,16 @@ var useFilters = function useFilters(_ref) {
25
25
  _ref$filters = _ref.filters,
26
26
  filters = _ref$filters === void 0 ? [] : _ref$filters,
27
27
  setAllFilters = _ref.setAllFilters,
28
- variation = _ref.variation;
28
+ variation = _ref.variation,
29
+ initialFilters = _ref.initialFilters;
29
30
 
30
31
  /** State */
31
- var _useInitialStateFromF = useInitialStateFromFilters(filters, variation),
32
+ var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
32
33
  _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
33
34
  filtersState = _useInitialStateFromF2[0],
34
35
  setFiltersState = _useInitialStateFromF2[1];
35
36
 
36
- var _useState = useState([]),
37
+ var _useState = useState(initialFilters),
37
38
  _useState2 = _slicedToArray(_useState, 2),
38
39
  filtersObjectArray = _useState2[0],
39
40
  setFiltersObjectArray = _useState2[1]; // When using batch actions we have to store the filters to then apply them later
@@ -51,8 +52,10 @@ var useFilters = function useFilters(_ref) {
51
52
  };
52
53
 
53
54
  var reset = function reset() {
54
- // Get the initial values for the filters
55
- var initialFiltersState = getInitialStateFromFilters(filters, variation);
55
+ // When we reset we want the "initialFilters" to be an empty array
56
+ var resetFiltersArray = []; // Get the initial values for the filters
57
+
58
+ var initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
56
59
  var initialFiltersObjectArray = []; // Set the state to the initial values
57
60
 
58
61
  setFiltersState(initialFiltersState);
@@ -133,6 +136,17 @@ var useFilters = function useFilters(_ref) {
133
136
 
134
137
  filtersObjectArrayCopy.splice(_index2, 1);
135
138
  }
139
+ } else if (type === NUMBER) {
140
+ // If the value is empty remove it from the filtersObjectArray
141
+ if (value === '') {
142
+ // Find the column that uses number and displays an empty string
143
+ var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
144
+ return filter.id === column;
145
+ }); // Remove it from the filters array
146
+
147
+
148
+ filtersObjectArrayCopy.splice(_index3, 1);
149
+ }
136
150
  }
137
151
 
138
152
  setFiltersObjectArray(filtersObjectArrayCopy); // // Automatically apply the filters if the updateMethod is instant
@@ -13,8 +13,9 @@ import { getInitialStateFromFilters } from '../utils';
13
13
 
14
14
  var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
15
15
  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
16
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
16
17
 
17
- var _useState = useState(getInitialStateFromFilters(filters, variation)),
18
+ var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
18
19
  _useState2 = _slicedToArray(_useState, 2),
19
20
  state = _useState2[0],
20
21
  setState = _useState2[1];
@@ -4,10 +4,24 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants'; // This functions takes the filters passed in and makes an object to track it's state
7
+ import { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants';
8
+
9
+ var applyInitialFilters = function applyInitialFilters(filterState, initialFilters) {
10
+ Object.keys(filterState).forEach(function (key) {
11
+ var hasInitialFilter = initialFilters.find(function (filter) {
12
+ return filter.id === key;
13
+ });
14
+
15
+ if (hasInitialFilter) {
16
+ filterState[key].value = hasInitialFilter.value;
17
+ }
18
+ });
19
+ }; // This functions takes the filters passed in and makes an object to track it's state
20
+
8
21
 
9
22
  export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
10
23
  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
24
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
11
25
  var initialFilterState = {};
12
26
 
13
27
  var setInitialState = function setInitialState(_ref) {
@@ -68,5 +82,9 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
68
82
  console.error('No variation passed into useInitialStateFromFilters');
69
83
  }
70
84
 
85
+ if (initialFilters.length > 0) {
86
+ applyInitialFilters(initialFilterState, initialFilters);
87
+ }
88
+
71
89
  return initialFilterState;
72
90
  };
@@ -71,11 +71,13 @@ var useFiltering = function useFiltering(hooks) {
71
71
  setAllFilters = instance.setAllFilters,
72
72
  setFilter = instance.setFilter,
73
73
  headers = instance.headers,
74
- data = instance.data;
74
+ data = instance.data,
75
+ state = instance.state;
75
76
  var defaultProps = {
76
77
  variation: 'flyout',
77
78
  updateMethod: BATCH,
78
- panelIconDescription: 'Open filter panel'
79
+ panelIconDescription: 'Open filter panel',
80
+ initialFilters: state.filters
79
81
  };
80
82
 
81
83
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
@@ -26,9 +26,19 @@ var useOnRowClick = function useOnRowClick(hooks) {
26
26
  }
27
27
  };
28
28
 
29
+ var onKeyDown = function onKeyDown(event) {
30
+ var key = event.key;
31
+
32
+ if (key === 'Enter') {
33
+ onClick();
34
+ }
35
+ };
36
+
29
37
  return [props, {
30
- onClick: onClick
38
+ onClick: onClick,
39
+ onKeyDown: onKeyDown
31
40
  }, {
41
+ tabIndex: 0,
32
42
  style: {
33
43
  cursor: 'pointer'
34
44
  }
@@ -81,6 +81,7 @@ var SelectRow = function SelectRow(datagridState) {
81
81
  radio = datagridState.radio,
82
82
  toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
83
83
  onRadioSelect = datagridState.onRadioSelect,
84
+ onRowSelect = datagridState.onRowSelect,
84
85
  columns = datagridState.columns,
85
86
  withStickyColumn = datagridState.withStickyColumn;
86
87
 
@@ -121,6 +122,7 @@ var SelectRow = function SelectRow(datagridState) {
121
122
  }
122
123
 
123
124
  onChange(e);
125
+ onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
124
126
  },
125
127
  id: "".concat(tableId, "-").concat(row.index),
126
128
  name: "".concat(tableId, "-").concat(row.index, "-name"),