@wordpress/dataviews 1.1.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/CHANGELOG.md +27 -5
  2. package/README.md +33 -30
  3. package/build/add-filter.js +30 -22
  4. package/build/add-filter.js.map +1 -1
  5. package/build/bulk-actions-toolbar.js +187 -0
  6. package/build/bulk-actions-toolbar.js.map +1 -0
  7. package/build/bulk-actions.js +75 -62
  8. package/build/bulk-actions.js.map +1 -1
  9. package/build/constants.js +17 -10
  10. package/build/constants.js.map +1 -1
  11. package/build/dataviews.js +64 -50
  12. package/build/dataviews.js.map +1 -1
  13. package/build/filter-and-sort-data-view.js +2 -2
  14. package/build/filter-and-sort-data-view.js.map +1 -1
  15. package/build/filter-summary.js +106 -96
  16. package/build/filter-summary.js.map +1 -1
  17. package/build/filters.js +18 -17
  18. package/build/filters.js.map +1 -1
  19. package/build/index.js.map +1 -1
  20. package/build/item-actions.js +101 -69
  21. package/build/item-actions.js.map +1 -1
  22. package/build/layouts.js.map +1 -1
  23. package/build/lock-unlock.js.map +1 -1
  24. package/build/normalize-fields.js.map +1 -1
  25. package/build/pagination.js +66 -57
  26. package/build/pagination.js.map +1 -1
  27. package/build/reset-filters.js +9 -4
  28. package/build/reset-filters.js.map +1 -1
  29. package/build/search-widget.js +108 -89
  30. package/build/search-widget.js.map +1 -1
  31. package/build/search.js +13 -6
  32. package/build/search.js.map +1 -1
  33. package/build/single-selection-checkbox.js +6 -2
  34. package/build/single-selection-checkbox.js.map +1 -1
  35. package/build/types.js.map +1 -1
  36. package/build/utils.js +3 -15
  37. package/build/utils.js.map +1 -1
  38. package/build/view-actions.js +168 -120
  39. package/build/view-actions.js.map +1 -1
  40. package/build/view-grid.js +119 -106
  41. package/build/view-grid.js.map +1 -1
  42. package/build/view-list.js +217 -83
  43. package/build/view-list.js.map +1 -1
  44. package/build/view-table.js +227 -199
  45. package/build/view-table.js.map +1 -1
  46. package/build-module/add-filter.js +30 -22
  47. package/build-module/add-filter.js.map +1 -1
  48. package/build-module/bulk-actions-toolbar.js +182 -0
  49. package/build-module/bulk-actions-toolbar.js.map +1 -0
  50. package/build-module/bulk-actions.js +77 -62
  51. package/build-module/bulk-actions.js.map +1 -1
  52. package/build-module/constants.js +16 -9
  53. package/build-module/constants.js.map +1 -1
  54. package/build-module/dataviews.js +65 -50
  55. package/build-module/dataviews.js.map +1 -1
  56. package/build-module/filter-and-sort-data-view.js +2 -2
  57. package/build-module/filter-and-sort-data-view.js.map +1 -1
  58. package/build-module/filter-summary.js +107 -97
  59. package/build-module/filter-summary.js.map +1 -1
  60. package/build-module/filters.js +18 -17
  61. package/build-module/filters.js.map +1 -1
  62. package/build-module/index.js.map +1 -1
  63. package/build-module/item-actions.js +102 -71
  64. package/build-module/item-actions.js.map +1 -1
  65. package/build-module/layouts.js.map +1 -1
  66. package/build-module/lock-unlock.js.map +1 -1
  67. package/build-module/normalize-fields.js.map +1 -1
  68. package/build-module/pagination.js +67 -57
  69. package/build-module/pagination.js.map +1 -1
  70. package/build-module/reset-filters.js +9 -4
  71. package/build-module/reset-filters.js.map +1 -1
  72. package/build-module/search-widget.js +109 -89
  73. package/build-module/search-widget.js.map +1 -1
  74. package/build-module/search.js +13 -6
  75. package/build-module/search.js.map +1 -1
  76. package/build-module/single-selection-checkbox.js +6 -2
  77. package/build-module/single-selection-checkbox.js.map +1 -1
  78. package/build-module/types.js.map +1 -1
  79. package/build-module/utils.js +2 -13
  80. package/build-module/utils.js.map +1 -1
  81. package/build-module/view-actions.js +170 -121
  82. package/build-module/view-actions.js.map +1 -1
  83. package/build-module/view-grid.js +121 -106
  84. package/build-module/view-grid.js.map +1 -1
  85. package/build-module/view-list.js +219 -85
  86. package/build-module/view-list.js.map +1 -1
  87. package/build-module/view-table.js +230 -201
  88. package/build-module/view-table.js.map +1 -1
  89. package/build-style/style-rtl.css +168 -44
  90. package/build-style/style.css +168 -44
  91. package/build-types/add-filter.d.ts +11 -0
  92. package/build-types/add-filter.d.ts.map +1 -0
  93. package/build-types/bulk-actions-toolbar.d.ts +12 -0
  94. package/build-types/bulk-actions-toolbar.d.ts.map +1 -0
  95. package/build-types/bulk-actions.d.ts +14 -0
  96. package/build-types/bulk-actions.d.ts.map +1 -0
  97. package/build-types/constants.d.ts +19 -32
  98. package/build-types/constants.d.ts.map +1 -1
  99. package/build-types/dataviews.d.ts +22 -0
  100. package/build-types/dataviews.d.ts.map +1 -0
  101. package/build-types/filter-and-sort-data-view.d.ts +3 -3
  102. package/build-types/filter-and-sort-data-view.d.ts.map +1 -1
  103. package/build-types/filter-summary.d.ts +14 -0
  104. package/build-types/filter-summary.d.ts.map +1 -0
  105. package/build-types/filters.d.ts +13 -0
  106. package/build-types/filters.d.ts.map +1 -0
  107. package/build-types/index.d.ts +4 -0
  108. package/build-types/index.d.ts.map +1 -0
  109. package/build-types/item-actions.d.ts +35 -0
  110. package/build-types/item-actions.d.ts.map +1 -0
  111. package/build-types/layouts.d.ts +24 -0
  112. package/build-types/layouts.d.ts.map +1 -0
  113. package/build-types/lock-unlock.d.ts +2 -0
  114. package/build-types/lock-unlock.d.ts.map +1 -0
  115. package/build-types/normalize-fields.d.ts +2 -2
  116. package/build-types/normalize-fields.d.ts.map +1 -1
  117. package/build-types/pagination.d.ts +16 -0
  118. package/build-types/pagination.d.ts.map +1 -0
  119. package/build-types/reset-filters.d.ts +13 -0
  120. package/build-types/reset-filters.d.ts.map +1 -0
  121. package/build-types/search-widget.d.ts +10 -0
  122. package/build-types/search-widget.d.ts.map +1 -0
  123. package/build-types/search.d.ts +13 -0
  124. package/build-types/search.d.ts.map +1 -0
  125. package/build-types/single-selection-checkbox.d.ts +17 -0
  126. package/build-types/single-selection-checkbox.d.ts.map +1 -0
  127. package/build-types/stories/fixtures.d.ts +114 -0
  128. package/build-types/stories/fixtures.d.ts.map +1 -0
  129. package/build-types/stories/index.story.d.ts +15 -0
  130. package/build-types/stories/index.story.d.ts.map +1 -0
  131. package/build-types/types.d.ts +221 -21
  132. package/build-types/types.d.ts.map +1 -1
  133. package/build-types/utils.d.ts +3 -0
  134. package/build-types/utils.d.ts.map +1 -0
  135. package/build-types/view-actions.d.ts +12 -0
  136. package/build-types/view-actions.d.ts.map +1 -0
  137. package/build-types/view-grid.d.ts +4 -0
  138. package/build-types/view-grid.d.ts.map +1 -0
  139. package/build-types/view-list.d.ts +4 -0
  140. package/build-types/view-list.d.ts.map +1 -0
  141. package/build-types/view-table.d.ts +5 -0
  142. package/build-types/view-table.d.ts.map +1 -0
  143. package/package.json +12 -13
  144. package/src/{add-filter.js → add-filter.tsx} +17 -1
  145. package/src/bulk-actions-toolbar.tsx +272 -0
  146. package/src/{bulk-actions.js → bulk-actions.tsx} +77 -17
  147. package/src/constants.ts +12 -5
  148. package/src/{dataviews.js → dataviews.tsx} +54 -14
  149. package/src/filter-and-sort-data-view.ts +13 -8
  150. package/src/{filter-summary.js → filter-summary.tsx} +38 -9
  151. package/src/{filters.js → filters.tsx} +18 -6
  152. package/src/{item-actions.js → item-actions.tsx} +119 -30
  153. package/src/normalize-fields.ts +4 -2
  154. package/src/{pagination.js → pagination.tsx} +29 -8
  155. package/src/{reset-filters.js → reset-filters.tsx} +17 -2
  156. package/src/{search-widget.js → search-widget.tsx} +27 -7
  157. package/src/{search.js → search.tsx} +22 -5
  158. package/src/{single-selection-checkbox.js → single-selection-checkbox.tsx} +17 -2
  159. package/src/style.scss +166 -43
  160. package/src/types.ts +286 -21
  161. package/src/{utils.js → utils.ts} +5 -13
  162. package/src/{view-actions.js → view-actions.tsx} +105 -49
  163. package/src/{view-grid.js → view-grid.tsx} +31 -18
  164. package/src/view-list.tsx +410 -0
  165. package/src/{view-table.js → view-table.tsx} +99 -40
  166. package/tsconfig.json +3 -4
  167. package/tsconfig.tsbuildinfo +1 -1
  168. package/build/dropdown-menu-helper.js +0 -71
  169. package/build/dropdown-menu-helper.js.map +0 -1
  170. package/build-module/dropdown-menu-helper.js +0 -64
  171. package/build-module/dropdown-menu-helper.js.map +0 -1
  172. package/src/dropdown-menu-helper.js +0 -61
  173. package/src/view-list.js +0 -207
  174. /package/src/{index.js → index.ts} +0 -0
  175. /package/src/{layouts.js → layouts.ts} +0 -0
  176. /package/src/{lock-unlock.js → lock-unlock.ts} +0 -0
@@ -1,8 +1,7 @@
1
- import { createElement, Fragment } from "react";
2
1
  /**
3
2
  * External dependencies
4
3
  */
5
- import classnames from 'classnames';
4
+ import clsx from 'clsx';
6
5
 
7
6
  /**
8
7
  * WordPress dependencies
@@ -16,6 +15,9 @@ import { __ } from '@wordpress/i18n';
16
15
  import ItemActions from './item-actions';
17
16
  import SingleSelectionCheckbox from './single-selection-checkbox';
18
17
  import { useHasAPossibleBulkAction } from './bulk-actions';
18
+ import { jsx as _jsx } from "react/jsx-runtime";
19
+ import { jsxs as _jsxs } from "react/jsx-runtime";
20
+ import { Fragment as _Fragment } from "react/jsx-runtime";
19
21
  function GridItem({
20
22
  selection,
21
23
  data,
@@ -32,10 +34,9 @@ function GridItem({
32
34
  const hasBulkAction = useHasAPossibleBulkAction(actions, item);
33
35
  const id = getItemId(item);
34
36
  const isSelected = selection.includes(id);
35
- return createElement(VStack, {
37
+ return /*#__PURE__*/_jsxs(VStack, {
36
38
  spacing: 0,
37
- key: id,
38
- className: classnames('dataviews-view-grid__card', {
39
+ className: clsx('dataviews-view-grid__card', {
39
40
  'is-selected': hasBulkAction && isSelected
40
41
  }),
41
42
  onClickCapture: event => {
@@ -57,87 +58,96 @@ function GridItem({
57
58
  }));
58
59
  }
59
60
  }
60
- }
61
- }, createElement("div", {
62
- className: "dataviews-view-grid__media"
63
- }, mediaField?.render({
64
- item
65
- })), createElement(HStack, {
66
- justify: "space-between",
67
- className: "dataviews-view-grid__title-actions"
68
- }, createElement(SingleSelectionCheckbox, {
69
- id: id,
70
- item: item,
71
- selection: selection,
72
- onSelectionChange: onSelectionChange,
73
- getItemId: getItemId,
74
- data: data,
75
- primaryField: primaryField,
76
- disabled: !hasBulkAction
77
- }), createElement(HStack, {
78
- className: "dataviews-view-grid__primary-field"
79
- }, primaryField?.render({
80
- item
81
- })), createElement(ItemActions, {
82
- item: item,
83
- actions: actions,
84
- isCompact: true
85
- })), !!badgeFields?.length && createElement(HStack, {
86
- className: "dataviews-view-grid__badge-fields",
87
- spacing: 2,
88
- wrap: true,
89
- align: "top",
90
- justify: "flex-start"
91
- }, badgeFields.map(field => {
92
- const renderedValue = field.render({
93
- item
94
- });
95
- if (!renderedValue) {
96
- return null;
97
- }
98
- return createElement(FlexItem, {
99
- key: field.id,
100
- className: 'dataviews-view-grid__field-value'
101
- }, renderedValue);
102
- })), !!visibleFields?.length && createElement(VStack, {
103
- className: "dataviews-view-grid__fields",
104
- spacing: 3
105
- }, visibleFields.map(field => {
106
- const renderedValue = field.render({
107
- item
108
- });
109
- if (!renderedValue) {
110
- return null;
111
- }
112
- return createElement(Flex, {
113
- className: classnames('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
114
- key: field.id,
115
- gap: 1,
61
+ },
62
+ children: [/*#__PURE__*/_jsx("div", {
63
+ className: "dataviews-view-grid__media",
64
+ children: mediaField?.render({
65
+ item
66
+ })
67
+ }), /*#__PURE__*/_jsxs(HStack, {
68
+ justify: "space-between",
69
+ className: "dataviews-view-grid__title-actions",
70
+ children: [/*#__PURE__*/_jsx(SingleSelectionCheckbox, {
71
+ item: item,
72
+ selection: selection,
73
+ onSelectionChange: onSelectionChange,
74
+ getItemId: getItemId,
75
+ data: data,
76
+ primaryField: primaryField,
77
+ disabled: !hasBulkAction
78
+ }), /*#__PURE__*/_jsx(HStack, {
79
+ className: "dataviews-view-grid__primary-field",
80
+ children: primaryField?.render({
81
+ item
82
+ })
83
+ }), /*#__PURE__*/_jsx(ItemActions, {
84
+ item: item,
85
+ actions: actions,
86
+ isCompact: true
87
+ })]
88
+ }), !!badgeFields?.length && /*#__PURE__*/_jsx(HStack, {
89
+ className: "dataviews-view-grid__badge-fields",
90
+ spacing: 2,
91
+ wrap: true,
92
+ alignment: "top",
116
93
  justify: "flex-start",
117
- expanded: true,
118
- style: {
119
- height: 'auto'
120
- },
121
- direction: columnFields?.includes(field.id) ? 'column' : 'row'
122
- }, createElement(Fragment, null, createElement(FlexItem, {
123
- className: "dataviews-view-grid__field-name"
124
- }, field.header), createElement(FlexItem, {
125
- className: "dataviews-view-grid__field-value",
126
- style: {
127
- maxHeight: 'none'
128
- }
129
- }, renderedValue)));
130
- })));
94
+ children: badgeFields.map(field => {
95
+ const renderedValue = field.render({
96
+ item
97
+ });
98
+ if (!renderedValue) {
99
+ return null;
100
+ }
101
+ return /*#__PURE__*/_jsx(FlexItem, {
102
+ className: "dataviews-view-grid__field-value",
103
+ children: renderedValue
104
+ }, field.id);
105
+ })
106
+ }), !!visibleFields?.length && /*#__PURE__*/_jsx(VStack, {
107
+ className: "dataviews-view-grid__fields",
108
+ spacing: 3,
109
+ children: visibleFields.map(field => {
110
+ const renderedValue = field.render({
111
+ item
112
+ });
113
+ if (!renderedValue) {
114
+ return null;
115
+ }
116
+ return /*#__PURE__*/_jsx(Flex, {
117
+ className: clsx('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
118
+ gap: 1,
119
+ justify: "flex-start",
120
+ expanded: true,
121
+ style: {
122
+ height: 'auto'
123
+ },
124
+ direction: columnFields?.includes(field.id) ? 'column' : 'row',
125
+ children: /*#__PURE__*/_jsxs(_Fragment, {
126
+ children: [/*#__PURE__*/_jsx(FlexItem, {
127
+ className: "dataviews-view-grid__field-name",
128
+ children: field.header
129
+ }), /*#__PURE__*/_jsx(FlexItem, {
130
+ className: "dataviews-view-grid__field-value",
131
+ style: {
132
+ maxHeight: 'none'
133
+ },
134
+ children: renderedValue
135
+ })]
136
+ })
137
+ }, field.id);
138
+ })
139
+ })]
140
+ }, id);
131
141
  }
132
142
  export default function ViewGrid({
143
+ actions,
133
144
  data,
134
145
  fields,
135
- view,
136
- actions,
137
- isLoading,
138
146
  getItemId,
147
+ isLoading,
148
+ onSelectionChange,
139
149
  selection,
140
- onSelectionChange
150
+ view
141
151
  }) {
142
152
  const mediaField = fields.find(field => field.id === view.layout.mediaField);
143
153
  const primaryField = fields.find(field => field.id === view.layout.primaryField);
@@ -158,32 +168,37 @@ export default function ViewGrid({
158
168
  badgeFields: []
159
169
  });
160
170
  const hasData = !!data?.length;
161
- return createElement(Fragment, null, hasData && createElement(Grid, {
162
- gap: 6,
163
- columns: 2,
164
- alignment: "top",
165
- className: "dataviews-view-grid",
166
- "aria-busy": isLoading
167
- }, data.map(item => {
168
- return createElement(GridItem, {
169
- key: getItemId(item),
170
- selection: selection,
171
- data: data,
172
- onSelectionChange: onSelectionChange,
173
- getItemId: getItemId,
174
- item: item,
175
- actions: actions,
176
- mediaField: mediaField,
177
- primaryField: primaryField,
178
- visibleFields: visibleFields,
179
- badgeFields: badgeFields,
180
- columnFields: view.layout.columnFields
181
- });
182
- })), !hasData && createElement("div", {
183
- className: classnames({
184
- 'dataviews-loading': isLoading,
185
- 'dataviews-no-results': !isLoading
186
- })
187
- }, createElement("p", null, isLoading ? createElement(Spinner, null) : __('No results'))));
171
+ return /*#__PURE__*/_jsxs(_Fragment, {
172
+ children: [hasData && /*#__PURE__*/_jsx(Grid, {
173
+ gap: 8,
174
+ columns: 2,
175
+ alignment: "top",
176
+ className: "dataviews-view-grid",
177
+ "aria-busy": isLoading,
178
+ children: data.map(item => {
179
+ return /*#__PURE__*/_jsx(GridItem, {
180
+ selection: selection,
181
+ data: data,
182
+ onSelectionChange: onSelectionChange,
183
+ getItemId: getItemId,
184
+ item: item,
185
+ actions: actions,
186
+ mediaField: mediaField,
187
+ primaryField: primaryField,
188
+ visibleFields: visibleFields,
189
+ badgeFields: badgeFields,
190
+ columnFields: view.layout.columnFields
191
+ }, getItemId(item));
192
+ })
193
+ }), !hasData && /*#__PURE__*/_jsx("div", {
194
+ className: clsx({
195
+ 'dataviews-loading': isLoading,
196
+ 'dataviews-no-results': !isLoading
197
+ }),
198
+ children: /*#__PURE__*/_jsx("p", {
199
+ children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : __('No results')
200
+ })
201
+ })]
202
+ });
188
203
  }
189
204
  //# sourceMappingURL=view-grid.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","createElement","spacing","key","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","justify","disabled","isCompact","length","wrap","align","map","field","renderedValue","gap","expanded","style","height","direction","Fragment","header","maxHeight","ViewGrid","fields","view","isLoading","find","layout","reduce","accumulator","hiddenFields","push","hasData","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\twrap\n\t\t\t\t\talign=\"top\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName={ 'dataviews-view-grid__field-value' }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ !! visibleFields?.length && (\n\t\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t\t: 'row'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator, field ) => {\n\t\t\tif (\n\t\t\t\tview.hiddenFields.includes( field.id ) ||\n\t\t\t\t[ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout.badgeFields?.includes( field.id )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'visibleFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ visibleFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\tcolumnFields={ view.layout.columnFields }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["clsx","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","spacing","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","children","render","justify","disabled","isCompact","length","wrap","alignment","map","field","renderedValue","gap","expanded","style","height","direction","header","maxHeight","ViewGrid","fields","isLoading","view","find","layout","reduce","accumulator","hiddenFields","key","push","hasData","columns"],"sources":["@wordpress/dataviews/src/view-grid.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\nimport { useHasAPossibleBulkAction } from './bulk-actions';\nimport type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';\n\ninterface GridItemProps< Item extends AnyItem > {\n\tselection: string[];\n\tdata: Item[];\n\tonSelectionChange: ( items: Item[] ) => void;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\tactions: Action< Item >[];\n\tmediaField?: NormalizedField< Item >;\n\tprimaryField?: NormalizedField< Item >;\n\tvisibleFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tcolumnFields?: string[];\n}\n\nfunction GridItem< Item extends AnyItem >( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n}: GridItemProps< Item > ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\twrap\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ !! visibleFields?.length && (\n\t\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t\t: 'row'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid< Item extends AnyItem >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonSelectionChange,\n\tselection,\n\tview,\n}: ViewGridProps< Item > ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {\n\t\t\tif (\n\t\t\t\tview.hiddenFields.includes( field.id ) ||\n\t\t\t\t[ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout.badgeFields?.includes( field.id )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'visibleFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ visibleFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 8 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\tcolumnFields={ view.layout.columnFields }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}