@wordpress/dataviews 2.2.0 → 4.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 (298) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +23 -8
  3. package/build/components/dataform/index.js +78 -0
  4. package/build/components/dataform/index.js.map +1 -0
  5. package/build/components/dataviews/index.js +115 -0
  6. package/build/components/dataviews/index.js.map +1 -0
  7. package/build/{bulk-actions.js → components/dataviews-bulk-actions/index.js} +39 -16
  8. package/build/components/dataviews-bulk-actions/index.js.map +1 -0
  9. package/build/{bulk-actions-toolbar.js → components/dataviews-bulk-actions-toolbar/index.js} +36 -20
  10. package/build/components/dataviews-bulk-actions-toolbar/index.js.map +1 -0
  11. package/build/components/dataviews-context/index.js +36 -0
  12. package/build/components/dataviews-context/index.js.map +1 -0
  13. package/build/{add-filter.js → components/dataviews-filters/add-filter.js} +3 -3
  14. package/build/components/dataviews-filters/add-filter.js.map +1 -0
  15. package/build/{filter-summary.js → components/dataviews-filters/filter-summary.js} +15 -14
  16. package/build/components/dataviews-filters/filter-summary.js.map +1 -0
  17. package/build/{filters.js → components/dataviews-filters/index.js} +15 -16
  18. package/build/components/dataviews-filters/index.js.map +1 -0
  19. package/build/{reset-filters.js → components/dataviews-filters/reset-filters.js} +1 -1
  20. package/build/components/dataviews-filters/reset-filters.js.map +1 -0
  21. package/build/{search-widget.js → components/dataviews-filters/search-widget.js} +21 -19
  22. package/build/components/dataviews-filters/search-widget.js.map +1 -0
  23. package/build/{item-actions.js → components/dataviews-item-actions/index.js} +3 -3
  24. package/build/components/dataviews-item-actions/index.js.map +1 -0
  25. package/build/components/dataviews-layout/index.js +53 -0
  26. package/build/components/dataviews-layout/index.js.map +1 -0
  27. package/build/{pagination.js → components/dataviews-pagination/index.js} +18 -15
  28. package/build/components/dataviews-pagination/index.js.map +1 -0
  29. package/build/{search.js → components/dataviews-search/index.js} +10 -6
  30. package/build/components/dataviews-search/index.js.map +1 -0
  31. package/build/components/dataviews-selection-checkbox/index.js +52 -0
  32. package/build/components/dataviews-selection-checkbox/index.js.map +1 -0
  33. package/build/{view-actions.js → components/dataviews-view-config/index.js} +94 -80
  34. package/build/components/dataviews-view-config/index.js.map +1 -0
  35. package/build/filter-and-sort-data-view.js +4 -1
  36. package/build/filter-and-sort-data-view.js.map +1 -1
  37. package/build/index.js +8 -1
  38. package/build/index.js.map +1 -1
  39. package/build/layouts/grid/density-picker.js +143 -0
  40. package/build/layouts/grid/density-picker.js.map +1 -0
  41. package/build/{view-grid.js → layouts/grid/index.js} +40 -53
  42. package/build/layouts/grid/index.js.map +1 -0
  43. package/build/layouts/index.js +52 -0
  44. package/build/layouts/index.js.map +1 -0
  45. package/build/{view-list.js → layouts/list/index.js} +31 -27
  46. package/build/layouts/list/index.js.map +1 -0
  47. package/build/layouts/table/column-header-menu.js +196 -0
  48. package/build/layouts/table/column-header-menu.js.map +1 -0
  49. package/build/layouts/table/index.js +350 -0
  50. package/build/layouts/table/index.js.map +1 -0
  51. package/build/normalize-fields.js +1 -1
  52. package/build/normalize-fields.js.map +1 -1
  53. package/build/private-types.js +6 -0
  54. package/build/private-types.js.map +1 -0
  55. package/build/types.js.map +1 -1
  56. package/build/utils.js.map +1 -1
  57. package/build-module/components/dataform/index.js +72 -0
  58. package/build-module/components/dataform/index.js.map +1 -0
  59. package/build-module/components/dataviews/index.js +108 -0
  60. package/build-module/components/dataviews/index.js.map +1 -0
  61. package/build-module/{bulk-actions.js → components/dataviews-bulk-actions/index.js} +39 -17
  62. package/build-module/components/dataviews-bulk-actions/index.js.map +1 -0
  63. package/build-module/{bulk-actions-toolbar.js → components/dataviews-bulk-actions-toolbar/index.js} +35 -20
  64. package/build-module/components/dataviews-bulk-actions-toolbar/index.js.map +1 -0
  65. package/build-module/components/dataviews-context/index.js +30 -0
  66. package/build-module/components/dataviews-context/index.js.map +1 -0
  67. package/build-module/{add-filter.js → components/dataviews-filters/add-filter.js} +3 -3
  68. package/build-module/components/dataviews-filters/add-filter.js.map +1 -0
  69. package/build-module/{filter-summary.js → components/dataviews-filters/filter-summary.js} +15 -14
  70. package/build-module/components/dataviews-filters/filter-summary.js.map +1 -0
  71. package/build-module/{filters.js → components/dataviews-filters/index.js} +16 -17
  72. package/build-module/components/dataviews-filters/index.js.map +1 -0
  73. package/build-module/{reset-filters.js → components/dataviews-filters/reset-filters.js} +1 -1
  74. package/build-module/components/dataviews-filters/reset-filters.js.map +1 -0
  75. package/build-module/{search-widget.js → components/dataviews-filters/search-widget.js} +21 -19
  76. package/build-module/components/dataviews-filters/search-widget.js.map +1 -0
  77. package/build-module/{item-actions.js → components/dataviews-item-actions/index.js} +3 -3
  78. package/build-module/components/dataviews-item-actions/index.js.map +1 -0
  79. package/build-module/components/dataviews-layout/index.js +45 -0
  80. package/build-module/components/dataviews-layout/index.js.map +1 -0
  81. package/build-module/{pagination.js → components/dataviews-pagination/index.js} +19 -17
  82. package/build-module/components/dataviews-pagination/index.js.map +1 -0
  83. package/build-module/{search.js → components/dataviews-search/index.js} +10 -7
  84. package/build-module/components/dataviews-search/index.js.map +1 -0
  85. package/build-module/components/dataviews-selection-checkbox/index.js +45 -0
  86. package/build-module/components/dataviews-selection-checkbox/index.js.map +1 -0
  87. package/build-module/{view-actions.js → components/dataviews-view-config/index.js} +98 -84
  88. package/build-module/components/dataviews-view-config/index.js.map +1 -0
  89. package/build-module/filter-and-sort-data-view.js +4 -1
  90. package/build-module/filter-and-sort-data-view.js.map +1 -1
  91. package/build-module/index.js +2 -1
  92. package/build-module/index.js.map +1 -1
  93. package/build-module/layouts/grid/density-picker.js +138 -0
  94. package/build-module/layouts/grid/density-picker.js.map +1 -0
  95. package/build-module/{view-grid.js → layouts/grid/index.js} +37 -50
  96. package/build-module/layouts/grid/index.js.map +1 -0
  97. package/build-module/layouts/index.js +43 -0
  98. package/build-module/layouts/index.js.map +1 -0
  99. package/build-module/{view-list.js → layouts/list/index.js} +29 -25
  100. package/build-module/layouts/list/index.js.map +1 -0
  101. package/build-module/layouts/table/column-header-menu.js +190 -0
  102. package/build-module/layouts/table/column-header-menu.js.map +1 -0
  103. package/build-module/layouts/table/index.js +344 -0
  104. package/build-module/layouts/table/index.js.map +1 -0
  105. package/build-module/normalize-fields.js +1 -1
  106. package/build-module/normalize-fields.js.map +1 -1
  107. package/build-module/private-types.js +2 -0
  108. package/build-module/private-types.js.map +1 -0
  109. package/build-module/types.js.map +1 -1
  110. package/build-module/utils.js.map +1 -1
  111. package/build-style/style-rtl.css +607 -561
  112. package/build-style/style.css +607 -561
  113. package/build-types/components/dataform/index.d.ts +17 -0
  114. package/build-types/components/dataform/index.d.ts.map +1 -0
  115. package/build-types/components/dataform/stories/index.story.d.ts +11 -0
  116. package/build-types/components/dataform/stories/index.story.d.ts.map +1 -0
  117. package/build-types/components/dataviews/index.d.ts +33 -0
  118. package/build-types/components/dataviews/index.d.ts.map +1 -0
  119. package/build-types/{stories → components/dataviews/stories}/fixtures.d.ts +18 -17
  120. package/build-types/components/dataviews/stories/fixtures.d.ts.map +1 -0
  121. package/build-types/components/dataviews/stories/index.story.d.ts +46 -0
  122. package/build-types/components/dataviews/stories/index.story.d.ts.map +1 -0
  123. package/build-types/components/dataviews-bulk-actions/index.d.ts +5 -0
  124. package/build-types/components/dataviews-bulk-actions/index.d.ts.map +1 -0
  125. package/build-types/components/dataviews-bulk-actions-toolbar/index.d.ts +2 -0
  126. package/build-types/components/dataviews-bulk-actions-toolbar/index.d.ts.map +1 -0
  127. package/build-types/components/dataviews-context/index.d.ts +26 -0
  128. package/build-types/components/dataviews-context/index.d.ts.map +1 -0
  129. package/build-types/{add-filter.d.ts → components/dataviews-filters/add-filter.d.ts} +1 -2
  130. package/build-types/components/dataviews-filters/add-filter.d.ts.map +1 -0
  131. package/build-types/{filter-summary.d.ts → components/dataviews-filters/filter-summary.d.ts} +1 -1
  132. package/build-types/components/dataviews-filters/filter-summary.d.ts.map +1 -0
  133. package/build-types/components/dataviews-filters/index.d.ts +4 -0
  134. package/build-types/components/dataviews-filters/index.d.ts.map +1 -0
  135. package/build-types/{reset-filters.d.ts → components/dataviews-filters/reset-filters.d.ts} +1 -2
  136. package/build-types/components/dataviews-filters/reset-filters.d.ts.map +1 -0
  137. package/build-types/{search-widget.d.ts → components/dataviews-filters/search-widget.d.ts} +1 -2
  138. package/build-types/components/dataviews-filters/search-widget.d.ts.map +1 -0
  139. package/build-types/components/dataviews-item-actions/index.d.ts +35 -0
  140. package/build-types/components/dataviews-item-actions/index.d.ts.map +1 -0
  141. package/build-types/components/dataviews-layout/index.d.ts +2 -0
  142. package/build-types/components/dataviews-layout/index.d.ts.map +1 -0
  143. package/build-types/components/dataviews-pagination/index.d.ts +4 -0
  144. package/build-types/components/dataviews-pagination/index.d.ts.map +1 -0
  145. package/build-types/components/dataviews-search/index.d.ts +6 -0
  146. package/build-types/components/dataviews-search/index.d.ts.map +1 -0
  147. package/build-types/components/dataviews-selection-checkbox/index.d.ts +16 -0
  148. package/build-types/components/dataviews-selection-checkbox/index.d.ts.map +1 -0
  149. package/build-types/components/dataviews-view-config/index.d.ts +8 -0
  150. package/build-types/components/dataviews-view-config/index.d.ts.map +1 -0
  151. package/build-types/filter-and-sort-data-view.d.ts +2 -2
  152. package/build-types/filter-and-sort-data-view.d.ts.map +1 -1
  153. package/build-types/index.d.ts +2 -1
  154. package/build-types/index.d.ts.map +1 -1
  155. package/build-types/layouts/grid/density-picker.d.ts +5 -0
  156. package/build-types/layouts/grid/density-picker.d.ts.map +1 -0
  157. package/build-types/layouts/grid/index.d.ts +3 -0
  158. package/build-types/layouts/grid/index.d.ts.map +1 -0
  159. package/build-types/{layouts.d.ts → layouts/index.d.ts} +6 -5
  160. package/build-types/layouts/index.d.ts.map +1 -0
  161. package/build-types/layouts/list/index.d.ts +3 -0
  162. package/build-types/layouts/list/index.d.ts.map +1 -0
  163. package/build-types/layouts/table/column-header-menu.d.ts +17 -0
  164. package/build-types/layouts/table/column-header-menu.d.ts.map +1 -0
  165. package/build-types/layouts/table/index.d.ts +4 -0
  166. package/build-types/layouts/table/index.d.ts.map +1 -0
  167. package/build-types/normalize-fields.d.ts +2 -2
  168. package/build-types/normalize-fields.d.ts.map +1 -1
  169. package/build-types/private-types.d.ts +3 -0
  170. package/build-types/private-types.d.ts.map +1 -0
  171. package/build-types/types.d.ts +106 -46
  172. package/build-types/types.d.ts.map +1 -1
  173. package/build-types/utils.d.ts +2 -2
  174. package/build-types/utils.d.ts.map +1 -1
  175. package/package.json +10 -10
  176. package/src/components/dataform/index.tsx +106 -0
  177. package/src/components/dataform/stories/index.story.tsx +42 -0
  178. package/src/components/dataviews/index.tsx +149 -0
  179. package/src/{stories → components/dataviews/stories}/fixtures.js +23 -11
  180. package/src/components/dataviews/stories/index.story.js +65 -0
  181. package/src/components/dataviews/style.scss +97 -0
  182. package/src/{bulk-actions.tsx → components/dataviews-bulk-actions/index.tsx} +58 -36
  183. package/src/components/dataviews-bulk-actions/style.scss +7 -0
  184. package/src/{bulk-actions-toolbar.tsx → components/dataviews-bulk-actions-toolbar/index.tsx} +48 -36
  185. package/src/components/dataviews-bulk-actions-toolbar/style.scss +45 -0
  186. package/src/components/dataviews-context/index.ts +49 -0
  187. package/src/{add-filter.tsx → components/dataviews-filters/add-filter.tsx} +4 -4
  188. package/src/{filter-summary.tsx → components/dataviews-filters/filter-summary.tsx} +36 -22
  189. package/src/{filters.tsx → components/dataviews-filters/index.tsx} +11 -25
  190. package/src/{reset-filters.tsx → components/dataviews-filters/reset-filters.tsx} +2 -2
  191. package/src/{search-widget.tsx → components/dataviews-filters/search-widget.tsx} +20 -20
  192. package/src/components/dataviews-filters/style.scss +252 -0
  193. package/src/{item-actions.tsx → components/dataviews-item-actions/index.tsx} +16 -17
  194. package/src/components/dataviews-item-actions/style.scss +3 -0
  195. package/src/components/dataviews-layout/index.tsx +51 -0
  196. package/src/{pagination.tsx → components/dataviews-pagination/index.tsx} +15 -23
  197. package/src/components/dataviews-pagination/style.scss +26 -0
  198. package/src/{search.tsx → components/dataviews-search/index.tsx} +5 -10
  199. package/src/components/dataviews-selection-checkbox/index.tsx +65 -0
  200. package/src/components/dataviews-selection-checkbox/style.scss +14 -0
  201. package/src/{view-actions.tsx → components/dataviews-view-config/index.tsx} +116 -119
  202. package/src/filter-and-sort-data-view.ts +13 -3
  203. package/src/index.ts +2 -1
  204. package/src/layouts/grid/density-picker.tsx +136 -0
  205. package/src/{view-grid.tsx → layouts/grid/index.tsx} +45 -63
  206. package/src/layouts/grid/style.scss +140 -0
  207. package/src/layouts/index.ts +66 -0
  208. package/src/{view-list.tsx → layouts/list/index.tsx} +40 -30
  209. package/src/layouts/list/style.scss +189 -0
  210. package/src/layouts/table/column-header-menu.tsx +268 -0
  211. package/src/layouts/table/index.tsx +471 -0
  212. package/src/layouts/table/style.scss +201 -0
  213. package/src/normalize-fields.ts +6 -4
  214. package/src/private-types.tsx +2 -0
  215. package/src/style.scss +11 -919
  216. package/src/test/filter-and-sort-data-view.js +17 -2
  217. package/src/types.ts +113 -55
  218. package/src/utils.ts +2 -4
  219. package/tsconfig.tsbuildinfo +1 -1
  220. package/build/add-filter.js.map +0 -1
  221. package/build/bulk-actions-toolbar.js.map +0 -1
  222. package/build/bulk-actions.js.map +0 -1
  223. package/build/dataviews.js +0 -136
  224. package/build/dataviews.js.map +0 -1
  225. package/build/filter-summary.js.map +0 -1
  226. package/build/filters.js.map +0 -1
  227. package/build/item-actions.js.map +0 -1
  228. package/build/layouts.js +0 -38
  229. package/build/layouts.js.map +0 -1
  230. package/build/pagination.js.map +0 -1
  231. package/build/reset-filters.js.map +0 -1
  232. package/build/search-widget.js.map +0 -1
  233. package/build/search.js.map +0 -1
  234. package/build/single-selection-checkbox.js +0 -63
  235. package/build/single-selection-checkbox.js.map +0 -1
  236. package/build/view-actions.js.map +0 -1
  237. package/build/view-grid.js.map +0 -1
  238. package/build/view-list.js.map +0 -1
  239. package/build/view-table.js +0 -409
  240. package/build/view-table.js.map +0 -1
  241. package/build-module/add-filter.js.map +0 -1
  242. package/build-module/bulk-actions-toolbar.js.map +0 -1
  243. package/build-module/bulk-actions.js.map +0 -1
  244. package/build-module/dataviews.js +0 -129
  245. package/build-module/dataviews.js.map +0 -1
  246. package/build-module/filter-summary.js.map +0 -1
  247. package/build-module/filters.js.map +0 -1
  248. package/build-module/item-actions.js.map +0 -1
  249. package/build-module/layouts.js +0 -30
  250. package/build-module/layouts.js.map +0 -1
  251. package/build-module/pagination.js.map +0 -1
  252. package/build-module/reset-filters.js.map +0 -1
  253. package/build-module/search-widget.js.map +0 -1
  254. package/build-module/search.js.map +0 -1
  255. package/build-module/single-selection-checkbox.js +0 -56
  256. package/build-module/single-selection-checkbox.js.map +0 -1
  257. package/build-module/view-actions.js.map +0 -1
  258. package/build-module/view-grid.js.map +0 -1
  259. package/build-module/view-list.js.map +0 -1
  260. package/build-module/view-table.js +0 -402
  261. package/build-module/view-table.js.map +0 -1
  262. package/build-types/add-filter.d.ts.map +0 -1
  263. package/build-types/bulk-actions-toolbar.d.ts +0 -12
  264. package/build-types/bulk-actions-toolbar.d.ts.map +0 -1
  265. package/build-types/bulk-actions.d.ts +0 -14
  266. package/build-types/bulk-actions.d.ts.map +0 -1
  267. package/build-types/dataviews.d.ts +0 -24
  268. package/build-types/dataviews.d.ts.map +0 -1
  269. package/build-types/filter-summary.d.ts.map +0 -1
  270. package/build-types/filters.d.ts +0 -13
  271. package/build-types/filters.d.ts.map +0 -1
  272. package/build-types/item-actions.d.ts +0 -35
  273. package/build-types/item-actions.d.ts.map +0 -1
  274. package/build-types/layouts.d.ts.map +0 -1
  275. package/build-types/pagination.d.ts +0 -16
  276. package/build-types/pagination.d.ts.map +0 -1
  277. package/build-types/reset-filters.d.ts.map +0 -1
  278. package/build-types/search-widget.d.ts.map +0 -1
  279. package/build-types/search.d.ts +0 -13
  280. package/build-types/search.d.ts.map +0 -1
  281. package/build-types/single-selection-checkbox.d.ts +0 -17
  282. package/build-types/single-selection-checkbox.d.ts.map +0 -1
  283. package/build-types/stories/fixtures.d.ts.map +0 -1
  284. package/build-types/stories/index.story.d.ts +0 -15
  285. package/build-types/stories/index.story.d.ts.map +0 -1
  286. package/build-types/view-actions.d.ts +0 -12
  287. package/build-types/view-actions.d.ts.map +0 -1
  288. package/build-types/view-grid.d.ts +0 -4
  289. package/build-types/view-grid.d.ts.map +0 -1
  290. package/build-types/view-list.d.ts +0 -4
  291. package/build-types/view-list.d.ts.map +0 -1
  292. package/build-types/view-table.d.ts +0 -5
  293. package/build-types/view-table.d.ts.map +0 -1
  294. package/src/dataviews.tsx +0 -189
  295. package/src/layouts.ts +0 -39
  296. package/src/single-selection-checkbox.tsx +0 -80
  297. package/src/stories/index.story.js +0 -64
  298. package/src/view-table.tsx +0 -603
package/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.0.0 (2024-07-24)
6
+
7
+ ### Breaking Changes
8
+
9
+ - `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids.
10
+ - `setSelection` prop has been removed. Please use `onChangeSelection` instead.
11
+ - `header` field property has been renamed to `label`.
12
+
13
+ ## 3.0.0 (2024-07-10)
14
+
15
+ ### Breaking Changes
16
+
17
+ - Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead.
18
+ - Replace the `supportedLayouts` prop in the `DataViews` component with a `defaultLayouts` prop that accepts an object whose keys are the layout names and values are the default view objects for these layouts.
19
+
20
+ ### New features
21
+
22
+ - Added a new `DataForm` component to render controls from a given configuration (fields, form), and data.
23
+
24
+ ### Internal
25
+
26
+ - Method style type signatures have been changed to function style ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
27
+
5
28
  ## 2.2.0 (2024-06-26)
6
29
 
7
30
  ## 2.1.0 (2024-06-15)
package/README.md CHANGED
@@ -22,6 +22,7 @@ const Example = () => {
22
22
  fields={ fields }
23
23
  view={ view }
24
24
  onChangeView={ onChangeView }
25
+ defaultLayouts={ defaultLayouts }
25
26
  actions={ actions }
26
27
  paginationInfo={ paginationInfo }
27
28
  />
@@ -149,7 +150,7 @@ const view = {
149
150
  field: 'date',
150
151
  direction: 'desc',
151
152
  },
152
- hiddenFields: [ 'date', 'featured-image' ],
153
+ fields: [ 'author', 'status' ],
153
154
  layout: {},
154
155
  };
155
156
  ```
@@ -167,10 +168,12 @@ Properties:
167
168
  - `sort`:
168
169
  - `field`: the field used for sorting the dataset.
169
170
  - `direction`: the direction to use for sorting, one of `asc` or `desc`.
170
- - `hiddenFields`: the `id` of the fields that are hidden in the UI.
171
+ - `fields`: the `id` of the fields that are visible in the UI.
171
172
  - `layout`: config that is specific to a particular layout type.
172
- - `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
173
- - `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
173
+ - `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item. This field is not hiddable.
174
+ - `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media. This field is not hiddable.
175
+ - `badgeFields`: used by the `grid` layout. It renders these fields without a label and styled as badges.
176
+ - `columnFields`: used by the `grid` layout. It renders the label and the field data vertically stacked instead of horizontally (the default).
174
177
 
175
178
  ### `onChangeView`: `function`
176
179
 
@@ -199,7 +202,7 @@ function MyCustomPageTable() {
199
202
  value: [ 'publish', 'draft' ],
200
203
  },
201
204
  ],
202
- hiddenFields: [ 'date', 'featured-image' ],
205
+ fields: [ 'author', 'status' ],
203
206
  layout: {},
204
207
  } );
205
208
 
@@ -274,11 +277,23 @@ Function that receives an item and returns an unique identifier for it. By defau
274
277
 
275
278
  Whether the data is loading. `false` by default.
276
279
 
277
- ### `supportedLayouts`: `String[]`
280
+ ### `defaultLayouts`: `Record< string, view >`
278
281
 
279
- Array of layouts supported. By default, all are: `table`, `grid`, `list`.
282
+ This property provides layout information about the view types that are active. If empty, enables all layout types (see "Layout Types") with empty layout data.
280
283
 
281
- ### `onSelectionChange`: `function`
284
+ For example, this is how you'd enable only the table view type:
285
+
286
+ ```js
287
+ const defaultLayouts = {
288
+ table: {
289
+ layout: {
290
+ primaryKey: 'my-key',
291
+ }
292
+ }
293
+ };
294
+ ```
295
+
296
+ ### `onChangeSelection`: `function`
282
297
 
283
298
  Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
284
299
 
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = DataForm;
7
+ var _components = require("@wordpress/components");
8
+ var _element = require("@wordpress/element");
9
+ var _normalizeFields = require("../../normalize-fields");
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ /**
12
+ * External dependencies
13
+ */
14
+
15
+ /**
16
+ * WordPress dependencies
17
+ */
18
+
19
+ /**
20
+ * Internal dependencies
21
+ */
22
+
23
+ function DataFormTextControl({
24
+ data,
25
+ field,
26
+ onChange
27
+ }) {
28
+ const {
29
+ id,
30
+ label,
31
+ placeholder
32
+ } = field;
33
+ const value = field.getValue({
34
+ item: data
35
+ });
36
+ const onChangeControl = (0, _element.useCallback)(newValue => onChange(prevItem => ({
37
+ ...prevItem,
38
+ [id]: newValue
39
+ })), [id, onChange]);
40
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
41
+ label: label,
42
+ placeholder: placeholder,
43
+ value: value !== null && value !== void 0 ? value : '',
44
+ onChange: onChangeControl,
45
+ __next40pxDefaultSize: true
46
+ });
47
+ }
48
+ const controls = {
49
+ text: DataFormTextControl
50
+ };
51
+ function getControlForField(field) {
52
+ if (!field.type) {
53
+ return null;
54
+ }
55
+ if (!Object.keys(controls).includes(field.type)) {
56
+ return null;
57
+ }
58
+ return controls[field.type];
59
+ }
60
+ function DataForm({
61
+ data,
62
+ fields,
63
+ form,
64
+ onChange
65
+ }) {
66
+ const visibleFields = (0, _element.useMemo)(() => (0, _normalizeFields.normalizeFields)(fields.filter(({
67
+ id
68
+ }) => !!form.visibleFields?.includes(id))), [fields, form.visibleFields]);
69
+ return visibleFields.map(field => {
70
+ const DataFormControl = getControlForField(field);
71
+ return DataFormControl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DataFormControl, {
72
+ data: data,
73
+ field: field,
74
+ onChange: onChange
75
+ }, field.id) : null;
76
+ });
77
+ }
78
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_components","require","_element","_normalizeFields","_jsxRuntime","DataFormTextControl","data","field","onChange","id","label","placeholder","value","getValue","item","onChangeControl","useCallback","newValue","prevItem","jsx","TextControl","__next40pxDefaultSize","controls","text","getControlForField","type","Object","keys","includes","DataForm","fields","form","visibleFields","useMemo","normalizeFields","filter","map","DataFormControl"],"sources":["@wordpress/dataviews/src/components/dataform/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Dispatch, SetStateAction } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Form, Field, NormalizedField } from '../../types';\nimport { normalizeFields } from '../../normalize-fields';\n\ntype DataFormProps< Item > = {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: Dispatch< SetStateAction< Item > >;\n};\n\ntype DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: Dispatch< SetStateAction< Item > >;\n};\n\nfunction DataFormTextControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, placeholder } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( ( prevItem: Item ) => ( {\n\t\t\t\t...prevItem,\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ) ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<TextControl\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n\nconst controls: {\n\t[ key: string ]: < Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) => JSX.Element;\n} = {\n\ttext: DataFormTextControl,\n};\n\nfunction getControlForField< Item >( field: NormalizedField< Item > ) {\n\tif ( ! field.type ) {\n\t\treturn null;\n\t}\n\n\tif ( ! Object.keys( controls ).includes( field.type ) ) {\n\t\treturn null;\n\t}\n\n\treturn controls[ field.type ];\n}\n\nexport default function DataForm< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter(\n\t\t\t\t\t( { id } ) => !! form.visibleFields?.includes( id )\n\t\t\t\t)\n\t\t\t),\n\t\t[ fields, form.visibleFields ]\n\t);\n\n\treturn visibleFields.map( ( field ) => {\n\t\tconst DataFormControl = getControlForField( field );\n\t\treturn DataFormControl ? (\n\t\t\t<DataFormControl\n\t\t\t\tkey={ field.id }\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t) : null;\n\t} );\n}\n"],"mappings":";;;;;;AAQA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,gBAAA,GAAAF,OAAA;AAAyD,IAAAG,WAAA,GAAAH,OAAA;AAfzD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAiBA,SAASI,mBAAmBA,CAAU;EACrCC,IAAI;EACJC,KAAK;EACLC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGJ,KAAK;EACxC,MAAMK,KAAK,GAAGL,KAAK,CAACM,QAAQ,CAAE;IAAEC,IAAI,EAAER;EAAK,CAAE,CAAC;EAE9C,MAAMS,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAgB,IACjBT,QAAQ,CAAIU,QAAc,KAAQ;IACjC,GAAGA,QAAQ;IACX,CAAET,EAAE,GAAIQ;EACT,CAAC,CAAG,CAAC,EACN,CAAER,EAAE,EAAED,QAAQ,CACf,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAe,GAAA,EAACnB,WAAA,CAAAoB,WAAW;IACXV,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BC,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBJ,QAAQ,EAAGO,eAAiB;IAC5BM,qBAAqB;EAAA,CACrB,CAAC;AAEJ;AAEA,MAAMC,QAIL,GAAG;EACHC,IAAI,EAAElB;AACP,CAAC;AAED,SAASmB,kBAAkBA,CAAUjB,KAA8B,EAAG;EACrE,IAAK,CAAEA,KAAK,CAACkB,IAAI,EAAG;IACnB,OAAO,IAAI;EACZ;EAEA,IAAK,CAAEC,MAAM,CAACC,IAAI,CAAEL,QAAS,CAAC,CAACM,QAAQ,CAAErB,KAAK,CAACkB,IAAK,CAAC,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,OAAOH,QAAQ,CAAEf,KAAK,CAACkB,IAAI,CAAE;AAC9B;AAEe,SAASI,QAAQA,CAAU;EACzCvB,IAAI;EACJwB,MAAM;EACNC,IAAI;EACJvB;AACsB,CAAC,EAAG;EAC1B,MAAMwB,aAAa,GAAG,IAAAC,gBAAO,EAC5B,MACC,IAAAC,gCAAe,EACdJ,MAAM,CAACK,MAAM,CACZ,CAAE;IAAE1B;EAAG,CAAC,KAAM,CAAC,CAAEsB,IAAI,CAACC,aAAa,EAAEJ,QAAQ,CAAEnB,EAAG,CACnD,CACD,CAAC,EACF,CAAEqB,MAAM,EAAEC,IAAI,CAACC,aAAa,CAC7B,CAAC;EAED,OAAOA,aAAa,CAACI,GAAG,CAAI7B,KAAK,IAAM;IACtC,MAAM8B,eAAe,GAAGb,kBAAkB,CAAEjB,KAAM,CAAC;IACnD,OAAO8B,eAAe,gBACrB,IAAAjC,WAAA,CAAAe,GAAA,EAACkB,eAAe;MAEf/B,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA;IAAU,GAHfD,KAAK,CAACE,EAIZ,CAAC,GACC,IAAI;EACT,CAAE,CAAC;AACJ","ignoreList":[]}
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = DataViews;
8
+ var _components = require("@wordpress/components");
9
+ var _element = require("@wordpress/element");
10
+ var _dataviewsBulkActions = _interopRequireDefault(require("../dataviews-bulk-actions"));
11
+ var _dataviewsBulkActionsToolbar = _interopRequireDefault(require("../dataviews-bulk-actions-toolbar"));
12
+ var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
13
+ var _dataviewsFilters = _interopRequireDefault(require("../dataviews-filters"));
14
+ var _dataviewsLayout = _interopRequireDefault(require("../dataviews-layout"));
15
+ var _dataviewsPagination = _interopRequireDefault(require("../dataviews-pagination"));
16
+ var _dataviewsSearch = _interopRequireDefault(require("../dataviews-search"));
17
+ var _dataviewsViewConfig = _interopRequireDefault(require("../dataviews-view-config"));
18
+ var _normalizeFields = require("../../normalize-fields");
19
+ var _densityPicker = _interopRequireDefault(require("../../layouts/grid/density-picker"));
20
+ var _constants = require("../../constants");
21
+ var _jsxRuntime = require("react/jsx-runtime");
22
+ /**
23
+ * External dependencies
24
+ */
25
+
26
+ /**
27
+ * WordPress dependencies
28
+ */
29
+
30
+ /**
31
+ * Internal dependencies
32
+ */
33
+
34
+ const defaultGetItemId = item => item.id;
35
+ function DataViews({
36
+ view,
37
+ onChangeView,
38
+ fields,
39
+ search = true,
40
+ searchLabel = undefined,
41
+ actions = [],
42
+ data,
43
+ getItemId = defaultGetItemId,
44
+ isLoading = false,
45
+ paginationInfo,
46
+ defaultLayouts,
47
+ selection: selectionProperty,
48
+ onChangeSelection,
49
+ header
50
+ }) {
51
+ const [selectionState, setSelectionState] = (0, _element.useState)([]);
52
+ const [density, setDensity] = (0, _element.useState)(0);
53
+ const isUncontrolled = selectionProperty === undefined || onChangeSelection === undefined;
54
+ const selection = isUncontrolled ? selectionState : selectionProperty;
55
+ const [openedFilter, setOpenedFilter] = (0, _element.useState)(null);
56
+ function setSelectionWithChange(value) {
57
+ const newValue = typeof value === 'function' ? value(selection) : value;
58
+ if (isUncontrolled) {
59
+ setSelectionState(newValue);
60
+ }
61
+ if (onChangeSelection) {
62
+ onChangeSelection(newValue);
63
+ }
64
+ }
65
+ const _fields = (0, _element.useMemo)(() => (0, _normalizeFields.normalizeFields)(fields), [fields]);
66
+ const _selection = (0, _element.useMemo)(() => {
67
+ return selection.filter(id => data.some(item => getItemId(item) === id));
68
+ }, [selection, data, getItemId]);
69
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsContext.default.Provider, {
70
+ value: {
71
+ view,
72
+ onChangeView,
73
+ fields: _fields,
74
+ actions,
75
+ data,
76
+ isLoading,
77
+ paginationInfo,
78
+ selection: _selection,
79
+ onChangeSelection: setSelectionWithChange,
80
+ openedFilter,
81
+ setOpenedFilter,
82
+ getItemId,
83
+ density
84
+ },
85
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
86
+ className: "dataviews-wrapper",
87
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
88
+ alignment: "top",
89
+ justify: "start",
90
+ className: "dataviews__view-actions",
91
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
92
+ justify: "start",
93
+ className: "dataviews-filters__container",
94
+ wrap: true,
95
+ children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSearch.default, {
96
+ label: searchLabel
97
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.default, {})]
98
+ }), view.type === _constants.LAYOUT_GRID && /*#__PURE__*/(0, _jsxRuntime.jsx)(_densityPicker.default, {
99
+ density: density,
100
+ setDensity: setDensity
101
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsBulkActions.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
102
+ spacing: 1,
103
+ expanded: false,
104
+ style: {
105
+ flexShrink: 0
106
+ },
107
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsViewConfig.default, {
108
+ defaultLayouts: defaultLayouts
109
+ }), header]
110
+ })]
111
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsLayout.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsPagination.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsBulkActionsToolbar.default, {})]
112
+ })
113
+ });
114
+ }
115
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_components","require","_element","_dataviewsBulkActions","_interopRequireDefault","_dataviewsBulkActionsToolbar","_dataviewsContext","_dataviewsFilters","_dataviewsLayout","_dataviewsPagination","_dataviewsSearch","_dataviewsViewConfig","_normalizeFields","_densityPicker","_constants","_jsxRuntime","defaultGetItemId","item","id","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","header","selectionState","setSelectionState","useState","density","setDensity","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","useMemo","normalizeFields","_selection","filter","some","jsx","default","Provider","children","jsxs","className","__experimentalHStack","alignment","justify","wrap","label","type","LAYOUT_GRID","spacing","expanded","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DataViewsBulkActions } from '../dataviews-bulk-actions';\nimport DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsFilters from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataviewsPagination from '../dataviews-pagination';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\nimport DensityPicker from '../../layouts/grid/density-picker';\nimport { LAYOUT_GRID } from '../../constants';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = [],\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst [ density, setDensity ] = useState< number >( 0 );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tdensity,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<DataViewsFilters />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ view.type === LAYOUT_GRID && (\n\t\t\t\t\t\t<DensityPicker\n\t\t\t\t\t\t\tdensity={ density }\n\t\t\t\t\t\t\tsetDensity={ setDensity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DataViewsBulkActions />\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataviewsPagination />\n\t\t\t\t<DataViewsBulkActionsToolbar />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
@@ -10,7 +11,9 @@ var _components = require("@wordpress/components");
10
11
  var _i18n = require("@wordpress/i18n");
11
12
  var _element = require("@wordpress/element");
12
13
  var _data = require("@wordpress/data");
13
- var _lockUnlock = require("./lock-unlock");
14
+ var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
15
+ var _constants = require("../../constants");
16
+ var _lockUnlock = require("../../lock-unlock");
14
17
  var _jsxRuntime = require("react/jsx-runtime");
15
18
  /**
16
19
  * WordPress dependencies
@@ -63,7 +66,7 @@ function ActionWithModal({
63
66
  title: !hideModalHeader ? label : undefined,
64
67
  __experimentalHideHeader: !!hideModalHeader,
65
68
  onRequestClose: onCloseModal,
66
- overlayClassName: "dataviews-action-modal",
69
+ overlayClassName: "dataviews-bulk-actions__modal",
67
70
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderModal, {
68
71
  items: eligibleItems,
69
72
  closeModal: onCloseModal,
@@ -82,7 +85,6 @@ function BulkActionItem({
82
85
  }, [action, selectedItems]);
83
86
  const shouldShowModal = ('RenderModal' in action);
84
87
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
85
- disabled: eligibleItems.length === 0,
86
88
  hideOnClick: !shouldShowModal,
87
89
  onClick: async () => {
88
90
  if (shouldShowModal) {
@@ -93,7 +95,7 @@ function BulkActionItem({
93
95
  });
94
96
  }
95
97
  },
96
- suffix: eligibleItems.length > 0 ? eligibleItems.length : undefined,
98
+ suffix: eligibleItems.length,
97
99
  children: action.label
98
100
  }, action.id);
99
101
  }
@@ -102,9 +104,17 @@ function ActionsMenuGroup({
102
104
  selectedItems,
103
105
  setActionWithModal
104
106
  }) {
107
+ const elligibleActions = (0, _element.useMemo)(() => {
108
+ return actions.filter(action => {
109
+ return selectedItems.some(item => !action.isEligible || action.isEligible(item));
110
+ });
111
+ }, [actions, selectedItems]);
112
+ if (!elligibleActions.length) {
113
+ return null;
114
+ }
105
115
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
106
116
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuGroup, {
107
- children: actions.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(BulkActionItem, {
117
+ children: elligibleActions.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(BulkActionItem, {
108
118
  action: action,
109
119
  selectedItems: selectedItems,
110
120
  setActionWithModal: setActionWithModal
@@ -112,13 +122,14 @@ function ActionsMenuGroup({
112
122
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuSeparator, {})]
113
123
  });
114
124
  }
115
- function BulkActions({
116
- data,
117
- actions,
118
- selection,
119
- onSelectionChange,
120
- getItemId
121
- }) {
125
+ function _BulkActions() {
126
+ const {
127
+ data,
128
+ actions = [],
129
+ selection,
130
+ onChangeSelection,
131
+ getItemId
132
+ } = (0, _element.useContext)(_dataviewsContext.default);
122
133
  const bulkActions = (0, _element.useMemo)(() => actions.filter(action => action.supportsBulk), [actions]);
123
134
  const [isMenuOpen, onMenuOpenChange] = (0, _element.useState)(false);
124
135
  const [actionWithModal, setActionWithModal] = (0, _element.useState)();
@@ -144,7 +155,7 @@ function BulkActions({
144
155
  minWidth: '240px'
145
156
  },
146
157
  trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
147
- className: "dataviews-bulk-edit-button",
158
+ className: "dataviews-bulk-actions__edit-button",
148
159
  __next40pxDefaultSize: true,
149
160
  variant: "tertiary",
150
161
  size: "compact",
@@ -160,7 +171,7 @@ function BulkActions({
160
171
  disabled: areAllSelected,
161
172
  hideOnClick: false,
162
173
  onClick: () => {
163
- onSelectionChange(selectableItems);
174
+ onChangeSelection(selectableItems.map(item => getItemId(item)));
164
175
  },
165
176
  suffix: numberSelectableItems,
166
177
  children: (0, _i18n.__)('Select all')
@@ -168,7 +179,7 @@ function BulkActions({
168
179
  disabled: selection.length === 0,
169
180
  hideOnClick: false,
170
181
  onClick: () => {
171
- onSelectionChange([]);
182
+ onChangeSelection([]);
172
183
  },
173
184
  children: (0, _i18n.__)('Deselect')
174
185
  })]
@@ -181,4 +192,16 @@ function BulkActions({
181
192
  })]
182
193
  });
183
194
  }
184
- //# sourceMappingURL=bulk-actions.js.map
195
+ function BulkActions() {
196
+ const {
197
+ data,
198
+ actions = [],
199
+ view
200
+ } = (0, _element.useContext)(_dataviewsContext.default);
201
+ const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
202
+ if (![_constants.LAYOUT_TABLE, _constants.LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
203
+ return null;
204
+ }
205
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BulkActions, {});
206
+ }
207
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_components","require","_i18n","_element","_data","_dataviewsContext","_interopRequireDefault","_constants","_lockUnlock","_jsxRuntime","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuSeparatorV2","DropdownMenuSeparator","unlock","componentsPrivateApis","useHasAPossibleBulkAction","actions","item","useMemo","some","action","supportsBulk","isEligible","useSomeItemHasAPossibleBulkAction","data","ActionWithModal","selectedItems","setActionWithModal","onMenuOpenChange","eligibleItems","filter","RenderModal","hideModalHeader","onCloseModal","useCallback","undefined","label","jsx","Modal","title","__experimentalHideHeader","onRequestClose","overlayClassName","children","items","closeModal","onActionPerformed","BulkActionItem","registry","useRegistry","shouldShowModal","hideOnClick","onClick","callback","suffix","length","id","ActionsMenuGroup","elligibleActions","jsxs","Fragment","map","_BulkActions","selection","onChangeSelection","getItemId","useContext","DataViewsContext","bulkActions","isMenuOpen","useState","actionWithModal","selectableItems","numberSelectableItems","includes","areAllSelected","open","onOpenChange","__","style","minWidth","trigger","Button","className","__next40pxDefaultSize","variant","size","sprintf","_n","disabled","BulkActions","view","hasPossibleBulkAction","LAYOUT_TABLE","LAYOUT_GRID","type"],"sources":["@wordpress/dataviews/src/components/dataviews-bulk-actions/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useCallback, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type { Action, ActionModal } from '../../types';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuSeparatorV2: DropdownMenuSeparator,\n} = unlock( componentsPrivateApis );\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModal< Item >;\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n\tonMenuOpenChange: ( isOpen: boolean ) => void;\n}\n\ninterface BulkActionsItemProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n}\n\ninterface ActionsMenuGroupProps< Item > {\n\tactions: Action< Item >[];\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\tselectedItems,\n\tsetActionWithModal,\n\tonMenuOpenChange,\n}: ActionWithModalProps< Item > ) {\n\tconst eligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter(\n\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t}, [ action, selectedItems ] );\n\tconst { RenderModal, hideModalHeader } = action;\n\tconst onCloseModal = useCallback( () => {\n\t\tsetActionWithModal( undefined );\n\t}, [ setActionWithModal ] );\n\tconst label =\n\t\ttypeof action.label === 'string'\n\t\t\t? action.label\n\t\t\t: action.label( selectedItems );\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ ! hideModalHeader ? label : undefined }\n\t\t\t__experimentalHideHeader={ !! hideModalHeader }\n\t\t\tonRequestClose={ onCloseModal }\n\t\t\toverlayClassName=\"dataviews-bulk-actions__modal\"\n\t\t>\n\t\t\t<RenderModal\n\t\t\t\titems={ eligibleItems }\n\t\t\t\tcloseModal={ onCloseModal }\n\t\t\t\tonActionPerformed={ () => onMenuOpenChange( false ) }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n\nfunction BulkActionItem< Item >( {\n\taction,\n\tselectedItems,\n\tsetActionWithModal,\n}: BulkActionsItemProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst eligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter(\n\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t}, [ action, selectedItems ] );\n\n\tconst shouldShowModal = 'RenderModal' in action;\n\n\treturn (\n\t\t<DropdownMenuItem\n\t\t\tkey={ action.id }\n\t\t\thideOnClick={ ! shouldShowModal }\n\t\t\tonClick={ async () => {\n\t\t\t\tif ( shouldShowModal ) {\n\t\t\t\t\tsetActionWithModal( action );\n\t\t\t\t} else {\n\t\t\t\t\taction.callback( eligibleItems, { registry } );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsuffix={ eligibleItems.length }\n\t\t>\n\t\t\t{ action.label }\n\t\t</DropdownMenuItem>\n\t);\n}\n\nfunction ActionsMenuGroup< Item >( {\n\tactions,\n\tselectedItems,\n\tsetActionWithModal,\n}: ActionsMenuGroupProps< Item > ) {\n\tconst elligibleActions = useMemo( () => {\n\t\treturn actions.filter( ( action ) => {\n\t\t\treturn selectedItems.some(\n\t\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ actions, selectedItems ] );\n\tif ( ! elligibleActions.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t{ elligibleActions.map( ( action ) => (\n\t\t\t\t\t<BulkActionItem\n\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</DropdownMenuGroup>\n\t\t\t<DropdownMenuSeparator />\n\t\t</>\n\t);\n}\n\nfunction _BulkActions() {\n\tconst {\n\t\tdata,\n\t\tactions = [],\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst [ isMenuOpen, onMenuOpenChange ] = useState( false );\n\tconst [ actionWithModal, setActionWithModal ] = useState<\n\t\tActionModal< any > | undefined\n\t>();\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst numberSelectableItems = selectableItems.length;\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst areAllSelected = selectedItems.length === numberSelectableItems;\n\n\tif ( bulkActions.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu\n\t\t\t\topen={ isMenuOpen }\n\t\t\t\tonOpenChange={ onMenuOpenChange }\n\t\t\t\tlabel={ __( 'Bulk actions' ) }\n\t\t\t\tstyle={ { minWidth: '240px' } }\n\t\t\t\ttrigger={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"dataviews-bulk-actions__edit-button\"\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedItems.length\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %d: Number of items. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'Edit %d item',\n\t\t\t\t\t\t\t\t\t\t'Edit %d items',\n\t\t\t\t\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'Bulk edit' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\tactions={ bulkActions }\n\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t/>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tdisabled={ areAllSelected }\n\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\t\t\tselectableItems.map( ( item ) =>\n\t\t\t\t\t\t\t\t\tgetItemId( item )\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\tsuffix={ numberSelectableItems }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select all' ) }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tdisabled={ selection.length === 0 }\n\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Deselect' ) }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenu>\n\t\t\t{ actionWithModal && (\n\t\t\t\t<ActionWithModal\n\t\t\t\t\taction={ actionWithModal }\n\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\tonMenuOpenChange={ onMenuOpenChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function BulkActions() {\n\tconst { data, actions = [], view } = useContext( DataViewsContext );\n\tconst hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(\n\t\tactions,\n\t\tdata\n\t);\n\tif (\n\t\t! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||\n\t\t! hasPossibleBulkAction\n\t) {\n\t\treturn null;\n\t}\n\n\treturn <_BulkActions />;\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
@@ -10,7 +11,10 @@ var _i18n = require("@wordpress/i18n");
10
11
  var _icons = require("@wordpress/icons");
11
12
  var _compose = require("@wordpress/compose");
12
13
  var _data = require("@wordpress/data");
13
- var _itemActions = require("./item-actions");
14
+ var _dataviewsBulkActions = require("../dataviews-bulk-actions");
15
+ var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
16
+ var _dataviewsItemActions = require("../dataviews-item-actions");
17
+ var _constants = require("../../constants");
14
18
  var _jsxRuntime = require("react/jsx-runtime");
15
19
  /**
16
20
  * WordPress dependencies
@@ -61,7 +65,6 @@ function ActionTrigger({
61
65
  size: "compact",
62
66
  onClick: onClick,
63
67
  isBusy: isBusy,
64
- __experimentalIsFocusable: true,
65
68
  tooltipPosition: "top"
66
69
  });
67
70
  }
@@ -79,7 +82,7 @@ function ActionButton({
79
82
  });
80
83
  }, [action, selectedItems]);
81
84
  if ('RenderModal' in action) {
82
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemActions.ActionWithModal, {
85
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionWithModal, {
83
86
  action: action,
84
87
  items: selectedEligibleItems,
85
88
  ActionTrigger: ActionTrigger
@@ -97,11 +100,11 @@ function ActionButton({
97
100
  isBusy: actionInProgress === action.id
98
101
  }, action.id);
99
102
  }
100
- function renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange) {
103
+ function renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection) {
101
104
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
102
105
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
103
106
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
104
- className: "dataviews-bulk-actions__selection-count",
107
+ className: "dataviews-bulk-actions-toolbar__selection-count",
105
108
  children: selection.length === 1 ? (0, _i18n.__)('1 item selected') : (0, _i18n.sprintf)(
106
109
  // translators: %s: Total number of selected items.
107
110
  (0, _i18n._n)('%s item selected', '%s items selected', selection.length), selection.length)
@@ -123,7 +126,7 @@ function renderToolbarContent(selection, actionsToShow, selectedItems, actionInP
123
126
  label: (0, _i18n.__)('Cancel'),
124
127
  disabled: !!actionInProgress,
125
128
  onClick: () => {
126
- onSelectionChange(EMPTY_ARRAY);
129
+ onChangeSelection(EMPTY_ARRAY);
127
130
  }
128
131
  })
129
132
  })]
@@ -133,7 +136,7 @@ function ToolbarContent({
133
136
  selection,
134
137
  actionsToShow,
135
138
  selectedItems,
136
- onSelectionChange
139
+ onChangeSelection
137
140
  }) {
138
141
  const [actionInProgress, setActionInProgress] = (0, _element.useState)(null);
139
142
  const buttons = (0, _element.useRef)(null);
@@ -141,19 +144,20 @@ function ToolbarContent({
141
144
  if (buttons.current) {
142
145
  buttons.current = null;
143
146
  }
144
- return renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange);
147
+ return renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
145
148
  } else if (!buttons.current) {
146
- buttons.current = renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange);
149
+ buttons.current = renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
147
150
  }
148
151
  return buttons.current;
149
152
  }
150
- function BulkActionsToolbar({
151
- data,
152
- selection,
153
- actions = EMPTY_ARRAY,
154
- onSelectionChange,
155
- getItemId
156
- }) {
153
+ function _BulkActionsToolbar() {
154
+ const {
155
+ data,
156
+ selection,
157
+ actions = EMPTY_ARRAY,
158
+ onChangeSelection,
159
+ getItemId
160
+ } = (0, _element.useContext)(_dataviewsContext.default);
157
161
  const isReducedMotion = (0, _compose.useReducedMotion)();
158
162
  const selectedItems = (0, _element.useMemo)(() => {
159
163
  return data.filter(item => selection.includes(getItemId(item)));
@@ -172,20 +176,32 @@ function BulkActionsToolbar({
172
176
  animate: "open",
173
177
  exit: "exit",
174
178
  variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS,
175
- className: "dataviews-bulk-actions",
179
+ className: "dataviews-bulk-actions-toolbar",
176
180
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Toolbar, {
177
181
  label: (0, _i18n.__)('Bulk actions'),
178
182
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
179
- className: "dataviews-bulk-actions-toolbar-wrapper",
183
+ className: "dataviews-bulk-actions-toolbar__wrapper",
180
184
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarContent, {
181
185
  selection: selection,
182
186
  actionsToShow: actionsToShow,
183
187
  selectedItems: selectedItems,
184
- onSelectionChange: onSelectionChange
188
+ onChangeSelection: onChangeSelection
185
189
  })
186
190
  })
187
191
  })
188
192
  })
189
193
  });
190
194
  }
191
- //# sourceMappingURL=bulk-actions-toolbar.js.map
195
+ function BulkActionsToolbar() {
196
+ const {
197
+ data,
198
+ actions = [],
199
+ view
200
+ } = (0, _element.useContext)(_dataviewsContext.default);
201
+ const hasPossibleBulkAction = (0, _dataviewsBulkActions.useSomeItemHasAPossibleBulkAction)(actions, data);
202
+ if (![_constants.LAYOUT_TABLE, _constants.LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
203
+ return null;
204
+ }
205
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BulkActionsToolbar, {});
206
+ }
207
+ //# sourceMappingURL=index.js.map