@wordpress/dataviews 17.1.0 → 17.1.2-next.v.202607070741.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 (96) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/build/components/dataform-controls/select.cjs +0 -1
  3. package/build/components/dataform-controls/select.cjs.map +2 -2
  4. package/build/components/dataform-controls/toggle-group.cjs +0 -1
  5. package/build/components/dataform-controls/toggle-group.cjs.map +2 -2
  6. package/build/components/dataform-controls/utils/relative-date-control.cjs +0 -1
  7. package/build/components/dataform-controls/utils/relative-date-control.cjs.map +2 -2
  8. package/build/components/dataviews-footer/index.cjs +6 -2
  9. package/build/components/dataviews-footer/index.cjs.map +2 -2
  10. package/build/components/dataviews-layouts/grid/preview-size-picker.cjs +0 -1
  11. package/build/components/dataviews-layouts/grid/preview-size-picker.cjs.map +2 -2
  12. package/build/components/dataviews-layouts/list/index.cjs +13 -1
  13. package/build/components/dataviews-layouts/list/index.cjs.map +2 -2
  14. package/build/components/dataviews-layouts/utils/density-picker.cjs +0 -1
  15. package/build/components/dataviews-layouts/utils/density-picker.cjs.map +2 -2
  16. package/build/components/dataviews-layouts/utils/preview-size-picker.cjs +0 -1
  17. package/build/components/dataviews-layouts/utils/preview-size-picker.cjs.map +2 -2
  18. package/build/components/dataviews-pagination/index.cjs +12 -13
  19. package/build/components/dataviews-pagination/index.cjs.map +2 -2
  20. package/build/components/dataviews-view-config/index.cjs +0 -3
  21. package/build/components/dataviews-view-config/index.cjs.map +2 -2
  22. package/build/dataform/index.cjs.map +2 -2
  23. package/build/dataviews/index.cjs.map +2 -2
  24. package/build/dataviews-picker/index.cjs.map +2 -2
  25. package/build/hooks/use-infinite-scroll.cjs +2 -1
  26. package/build/hooks/use-infinite-scroll.cjs.map +2 -2
  27. package/build-module/components/dataform-controls/select.mjs +0 -1
  28. package/build-module/components/dataform-controls/select.mjs.map +2 -2
  29. package/build-module/components/dataform-controls/toggle-group.mjs +0 -1
  30. package/build-module/components/dataform-controls/toggle-group.mjs.map +2 -2
  31. package/build-module/components/dataform-controls/utils/relative-date-control.mjs +0 -1
  32. package/build-module/components/dataform-controls/utils/relative-date-control.mjs.map +2 -2
  33. package/build-module/components/dataviews-footer/index.mjs +9 -3
  34. package/build-module/components/dataviews-footer/index.mjs.map +2 -2
  35. package/build-module/components/dataviews-layouts/grid/preview-size-picker.mjs +0 -1
  36. package/build-module/components/dataviews-layouts/grid/preview-size-picker.mjs.map +2 -2
  37. package/build-module/components/dataviews-layouts/list/index.mjs +13 -1
  38. package/build-module/components/dataviews-layouts/list/index.mjs.map +2 -2
  39. package/build-module/components/dataviews-layouts/utils/density-picker.mjs +0 -1
  40. package/build-module/components/dataviews-layouts/utils/density-picker.mjs.map +2 -2
  41. package/build-module/components/dataviews-layouts/utils/preview-size-picker.mjs +0 -1
  42. package/build-module/components/dataviews-layouts/utils/preview-size-picker.mjs.map +2 -2
  43. package/build-module/components/dataviews-pagination/index.mjs +10 -12
  44. package/build-module/components/dataviews-pagination/index.mjs.map +2 -2
  45. package/build-module/components/dataviews-view-config/index.mjs +0 -3
  46. package/build-module/components/dataviews-view-config/index.mjs.map +2 -2
  47. package/build-module/dataform/index.mjs.map +2 -2
  48. package/build-module/dataviews/index.mjs.map +2 -2
  49. package/build-module/dataviews-picker/index.mjs.map +2 -2
  50. package/build-module/hooks/use-infinite-scroll.mjs +2 -1
  51. package/build-module/hooks/use-infinite-scroll.mjs.map +2 -2
  52. package/build-style/style-rtl.css +9 -2
  53. package/build-style/style.css +9 -2
  54. package/build-types/components/dataform-controls/select.d.ts.map +1 -1
  55. package/build-types/components/dataform-controls/toggle-group.d.ts.map +1 -1
  56. package/build-types/components/dataform-controls/utils/relative-date-control.d.ts.map +1 -1
  57. package/build-types/components/dataviews-footer/index.d.ts +1 -1
  58. package/build-types/components/dataviews-footer/index.d.ts.map +1 -1
  59. package/build-types/components/dataviews-layouts/grid/preview-size-picker.d.ts.map +1 -1
  60. package/build-types/components/dataviews-layouts/list/index.d.ts.map +1 -1
  61. package/build-types/components/dataviews-layouts/utils/density-picker.d.ts.map +1 -1
  62. package/build-types/components/dataviews-layouts/utils/preview-size-picker.d.ts.map +1 -1
  63. package/build-types/components/dataviews-pagination/index.d.ts +6 -1
  64. package/build-types/components/dataviews-pagination/index.d.ts.map +1 -1
  65. package/build-types/components/dataviews-view-config/index.d.ts.map +1 -1
  66. package/build-types/dataform/index.d.ts +5 -0
  67. package/build-types/dataform/index.d.ts.map +1 -1
  68. package/build-types/dataviews/index.d.ts +5 -0
  69. package/build-types/dataviews/index.d.ts.map +1 -1
  70. package/build-types/dataviews/stories/async-infinite-scroll.d.ts +8 -0
  71. package/build-types/dataviews/stories/async-infinite-scroll.d.ts.map +1 -0
  72. package/build-types/dataviews/stories/index.story.d.ts +19 -0
  73. package/build-types/dataviews/stories/index.story.d.ts.map +1 -1
  74. package/build-types/dataviews-picker/index.d.ts +5 -0
  75. package/build-types/dataviews-picker/index.d.ts.map +1 -1
  76. package/build-types/hooks/use-infinite-scroll.d.ts.map +1 -1
  77. package/build-wp/index.js +1476 -1227
  78. package/package.json +17 -17
  79. package/src/components/dataform-controls/select.tsx +0 -1
  80. package/src/components/dataform-controls/toggle-group.tsx +0 -1
  81. package/src/components/dataform-controls/utils/relative-date-control.tsx +0 -1
  82. package/src/components/dataviews-footer/index.tsx +27 -26
  83. package/src/components/dataviews-layouts/grid/preview-size-picker.tsx +0 -1
  84. package/src/components/dataviews-layouts/list/index.tsx +14 -2
  85. package/src/components/dataviews-layouts/utils/density-picker.tsx +0 -1
  86. package/src/components/dataviews-layouts/utils/preview-size-picker.tsx +0 -1
  87. package/src/components/dataviews-pagination/index.tsx +82 -78
  88. package/src/components/dataviews-view-config/index.tsx +0 -3
  89. package/src/components/dataviews-view-config/style.scss +0 -1
  90. package/src/dataform/index.tsx +5 -0
  91. package/src/dataviews/index.tsx +5 -0
  92. package/src/dataviews/stories/async-infinite-scroll.tsx +115 -0
  93. package/src/dataviews/stories/index.story.tsx +27 -0
  94. package/src/dataviews/style.scss +5 -1
  95. package/src/dataviews-picker/index.tsx +5 -0
  96. package/src/hooks/use-infinite-scroll.ts +10 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 17.1.1-next.0 (2026-07-07)
6
+
7
+ ### Bug Fix
8
+
9
+ - DataViews: Stop the infinite-scroll list from jumping while pages load asynchronously. The scroll-anchor restoration no longer discards scrolling the user did during the load, and the footer's visibility no longer depends on the loading state, so it no longer mounts mid-load (resizing the scroll container). [#79546](https://github.com/WordPress/gutenberg/pull/79546)
10
+
11
+ ### Internal
12
+
13
+ - Update `@ariakit/react` to `0.4.32` ([#79860](https://github.com/WordPress/gutenberg/pull/79860)).
14
+
5
15
  ## 17.1.0 (2026-07-01)
6
16
 
7
17
  ## 17.0.0 (2026-06-24)
@@ -23,7 +33,8 @@
23
33
 
24
34
  ### Documentation
25
35
 
26
- - Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
36
+ - Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
37
+ - Add component documentation for `DataViews`, `DataViewsPicker`, and `DataForm` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
27
38
 
28
39
  ### Internal
29
40
 
@@ -74,7 +74,6 @@ function Select({
74
74
  help: description,
75
75
  options: elements,
76
76
  onChange: onChangeControl,
77
- __next40pxDefaultSize: true,
78
77
  hideLabelFromVision,
79
78
  multiple: isMultiple,
80
79
  disabled
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/dataform-controls/select.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAA4B;AAM5B,0BAAwB;AACxB,yBAAuB;AACvB,iCAA8B;AA8BrB;AA5BT,IAAM,EAAE,uBAAuB,QAAI,2BAAQ,6BAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAClE,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB;AAAA,MACA,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAA4B;AAM5B,0BAAwB;AACxB,yBAAuB;AACvB,iCAA8B;AA8BrB;AA5BT,IAAM,EAAE,uBAAuB,QAAI,2BAAQ,6BAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAClE,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA,MACA,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["useElements", "getCustomValidity"]
7
7
  }
@@ -72,7 +72,6 @@ function ToggleGroup({
72
72
  required: !!field.isValid?.required,
73
73
  markWhenOptional,
74
74
  customValidity: (0, import_get_custom_validity.default)(isValid, validity),
75
- __next40pxDefaultSize: true,
76
75
  isBlock: true,
77
76
  label: field.label,
78
77
  help: selectedOption?.description || field.description,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/dataform-controls/toggle-group.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AA4Bf;AA1BT,IAAM,EAAE,4BAA4B,QAAI,2BAAQ,6BAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA,UACX;AAAA;AAAA,QAHM,GAAG;AAAA,MAIV,CACC;AAAA;AAAA,EACH;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AA4Bf;AA1BT,IAAM,EAAE,4BAA4B,QAAI,2BAAQ,6BAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA,UACX;AAAA;AAAA,QAHM,GAAG;AAAA,MAIV,CACC;AAAA;AAAA,EACH;AAEF;",
6
6
  "names": ["useElements", "getCustomValidity", "ToggleGroupControlOption"]
7
7
  }
@@ -111,7 +111,6 @@ function RelativeDateControl({
111
111
  import_components.SelectControl,
112
112
  {
113
113
  className: "dataviews-controls__relative-date-unit",
114
- __next40pxDefaultSize: true,
115
114
  label: (0, import_i18n.__)("Unit"),
116
115
  value: unit,
117
116
  options,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/dataform-controls/utils/relative-date-control.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, description, getValue, setValue } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ description }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAIO;AACP,qBAA4B;AAC5B,kBAAmB;AACnB,gBAAsB;AAKtB,uBAAoD;AA4EjD;AAlEH,IAAM,qBAAkE;AAAA,EACvE,CAAE,qCAAqB,GAAG;AAAA,IACzB,EAAE,OAAO,QAAQ,WAAO,gBAAI,MAAO,EAAE;AAAA,IACrC,EAAE,OAAO,SAAS,WAAO,gBAAI,OAAQ,EAAE;AAAA,IACvC,EAAE,OAAO,UAAU,WAAO,gBAAI,QAAS,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,WAAO,gBAAI,OAAQ,EAAE;AAAA,EACxC;AAAA,EACA,CAAE,8BAAc,GAAG;AAAA,IAClB,EAAE,OAAO,QAAQ,WAAO,gBAAI,UAAW,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,WAAO,gBAAI,WAAY,EAAE;AAAA,IAC3C,EAAE,OAAO,UAAU,WAAO,gBAAI,YAAa,EAAE;AAAA,IAC7C,EAAE,OAAO,SAAS,WAAO,gBAAI,WAAY,EAAE;AAAA,EAC5C;AACD;AAEe,SAAR,oBAA8C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEI;AACH,QAAM,UACL,mBACC,aAAa,wCAAuB,cAAc,MACnD;AAED,QAAM,EAAE,IAAI,OAAO,aAAa,UAAU,SAAS,IAAI;AACvD,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,aAAa,SAAU,EAAE,MAAM,KAAK,CAAE;AAC5C,QAAM,EAAE,OAAO,WAAW,IAAI,OAAO,QAAS,CAAE,EAAE,MAAM,IACvD,cAAc,OAAO,eAAe,WAAW,aAAa,CAAC;AAE9D,QAAM,oBAAgB;AAAA,IACrB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,OAAQ,QAAS,GAAG,KAAK;AAAA,MAC1C,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,IAAK;AAAA,EAClC;AAEA,QAAM,mBAAe;AAAA,IACpB,CAAE,YACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,UAAU,MAAM,QAAQ;AAAA,MACzC,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,QAAS;AAAA,EACtC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAA,SAAM,WAAW,mCAAoC;AAAA,MACjE;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MAEP,uDAAC,mBAAM,WAAU,OAAM,KAAI,MAC1B;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,cAAa;AAAA,YACb,KAAM;AAAA,YACN,MAAO;AAAA,YACP,OAAQ;AAAA,YACR,UAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,uBAAqB;AAAA,YACrB,WAAQ,gBAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR;AAAA,YACA,UAAW;AAAA,YACX,qBAAmB;AAAA,YACnB;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, description, getValue, setValue } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ description }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAIO;AACP,qBAA4B;AAC5B,kBAAmB;AACnB,gBAAsB;AAKtB,uBAAoD;AA4EjD;AAlEH,IAAM,qBAAkE;AAAA,EACvE,CAAE,qCAAqB,GAAG;AAAA,IACzB,EAAE,OAAO,QAAQ,WAAO,gBAAI,MAAO,EAAE;AAAA,IACrC,EAAE,OAAO,SAAS,WAAO,gBAAI,OAAQ,EAAE;AAAA,IACvC,EAAE,OAAO,UAAU,WAAO,gBAAI,QAAS,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,WAAO,gBAAI,OAAQ,EAAE;AAAA,EACxC;AAAA,EACA,CAAE,8BAAc,GAAG;AAAA,IAClB,EAAE,OAAO,QAAQ,WAAO,gBAAI,UAAW,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,WAAO,gBAAI,WAAY,EAAE;AAAA,IAC3C,EAAE,OAAO,UAAU,WAAO,gBAAI,YAAa,EAAE;AAAA,IAC7C,EAAE,OAAO,SAAS,WAAO,gBAAI,WAAY,EAAE;AAAA,EAC5C;AACD;AAEe,SAAR,oBAA8C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEI;AACH,QAAM,UACL,mBACC,aAAa,wCAAuB,cAAc,MACnD;AAED,QAAM,EAAE,IAAI,OAAO,aAAa,UAAU,SAAS,IAAI;AACvD,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,aAAa,SAAU,EAAE,MAAM,KAAK,CAAE;AAC5C,QAAM,EAAE,OAAO,WAAW,IAAI,OAAO,QAAS,CAAE,EAAE,MAAM,IACvD,cAAc,OAAO,eAAe,WAAW,aAAa,CAAC;AAE9D,QAAM,oBAAgB;AAAA,IACrB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,OAAQ,QAAS,GAAG,KAAK;AAAA,MAC1C,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,IAAK;AAAA,EAClC;AAEA,QAAM,mBAAe;AAAA,IACpB,CAAE,YACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,UAAU,MAAM,QAAQ;AAAA,MACzC,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,QAAS;AAAA,EACtC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAA,SAAM,WAAW,mCAAoC;AAAA,MACjE;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MAEP,uDAAC,mBAAM,WAAU,OAAM,KAAI,MAC1B;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,cAAa;AAAA,YACb,KAAM;AAAA,YACN,MAAO;AAAA,YACP,OAAQ;AAAA,YACR,UAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,WAAQ,gBAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR;AAAA,YACA,UAAW;AAAA,YACX,qBAAmB;AAAA,YACnB;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["clsx", "NumberControl"]
7
7
  }
@@ -55,10 +55,14 @@ function DataViewsFooter() {
55
55
  const isRefreshing = !!isLoading && hasInitiallyLoaded && !!data?.length;
56
56
  const isDelayedRefreshing = (0, import_use_delayed_loading.useDelayedLoading)(!!isRefreshing);
57
57
  const hasBulkActions = (0, import_dataviews_bulk_actions.useSomeItemHasAPossibleBulkAction)(actions, data) && [import_constants.LAYOUT_TABLE, import_constants.LAYOUT_GRID].includes(view.type);
58
- if (!isRefreshing && (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions)) {
58
+ const hasPagination = (0, import_dataviews_pagination.hasPaginationControls)(view, {
59
+ totalItems,
60
+ totalPages
61
+ });
62
+ if (!totalItems || !hasBulkActions && !hasPagination) {
59
63
  return null;
60
64
  }
61
- return (!!totalItems || isRefreshing) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
65
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
66
  "div",
63
67
  {
64
68
  className: "dataviews-footer",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/dataviews-footer/index.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsPagination from '../dataviews-pagination';\nimport {\n\tBulkActionsFooter,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../dataviews-bulk-actions';\nimport { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';\nimport { useDelayedLoading } from '../../hooks/use-delayed-loading';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport default function DataViewsFooter() {\n\tconst {\n\t\tview,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t\tdata,\n\t\tactions = EMPTY_ARRAY,\n\t\tisLoading,\n\t\thasInitiallyLoaded,\n\t} = useContext( DataViewsContext );\n\n\tconst isRefreshing = !! isLoading && hasInitiallyLoaded && !! data?.length;\n\n\tconst isDelayedRefreshing = useDelayedLoading( !! isRefreshing );\n\n\tconst hasBulkActions =\n\t\tuseSomeItemHasAPossibleBulkAction( actions, data ) &&\n\t\t[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );\n\n\tif (\n\t\t! isRefreshing &&\n\t\t( ! totalItems ||\n\t\t\t! totalPages ||\n\t\t\t( totalPages <= 1 && ! hasBulkActions ) )\n\t) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t( !! totalItems || isRefreshing ) && (\n\t\t\t<div\n\t\t\t\tclassName=\"dataviews-footer\"\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={ isRefreshing ? 'true' : undefined }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-footer__content', {\n\t\t\t\t\t\t'is-refreshing': isDelayedRefreshing,\n\t\t\t\t\t} ) }\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t>\n\t\t\t\t\t{ hasBulkActions && <BulkActionsFooter /> }\n\t\t\t\t\t<DataViewsPagination />\n\t\t\t\t</Stack>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA2B;AAC3B,gBAAsB;AAKtB,+BAA6B;AAC7B,kCAAgC;AAChC,oCAGO;AACP,uBAA0C;AAC1C,iCAAkC;AAqC9B;AAnCJ,IAAM,cAAkB,CAAC;AAEV,SAAR,kBAAmC;AACzC,QAAM;AAAA,IACL;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,IAC7C;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACD,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,QAAM,eAAe,CAAC,CAAE,aAAa,sBAAsB,CAAC,CAAE,MAAM;AAEpE,QAAM,0BAAsB,8CAAmB,CAAC,CAAE,YAAa;AAE/D,QAAM,qBACL,iEAAmC,SAAS,IAAK,KACjD,CAAE,+BAAc,4BAAY,EAAE,SAAU,KAAK,IAAK;AAEnD,MACC,CAAE,iBACA,CAAE,cACH,CAAE,cACA,cAAc,KAAK,CAAE,iBACvB;AACD,WAAO;AAAA,EACR;AACA,UACG,CAAC,CAAE,cAAc,iBAClB;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MAEV,OAAQ,eAAe,SAAS;AAAA,MAEhC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,eAAY,YAAAC,SAAM,6BAA6B;AAAA,YAC9C,iBAAiB;AAAA,UAClB,CAAE;AAAA,UACF,KAAI;AAAA,UAEF;AAAA,8BAAkB,4CAAC,mDAAkB;AAAA,YACvC,4CAAC,4BAAAC,SAAA,EAAoB;AAAA;AAAA;AAAA,MACtB;AAAA;AAAA,EACD;AAGH;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsPagination, {\n\thasPaginationControls,\n} from '../dataviews-pagination';\nimport {\n\tBulkActionsFooter,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../dataviews-bulk-actions';\nimport { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';\nimport { useDelayedLoading } from '../../hooks/use-delayed-loading';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport default function DataViewsFooter() {\n\tconst {\n\t\tview,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t\tdata,\n\t\tactions = EMPTY_ARRAY,\n\t\tisLoading,\n\t\thasInitiallyLoaded,\n\t} = useContext( DataViewsContext );\n\n\tconst isRefreshing = !! isLoading && hasInitiallyLoaded && !! data?.length;\n\n\tconst isDelayedRefreshing = useDelayedLoading( !! isRefreshing );\n\n\tconst hasBulkActions =\n\t\tuseSomeItemHasAPossibleBulkAction( actions, data ) &&\n\t\t[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );\n\n\tconst hasPagination = hasPaginationControls( view, {\n\t\ttotalItems,\n\t\ttotalPages,\n\t} );\n\n\tif ( ! totalItems || ( ! hasBulkActions && ! hasPagination ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"dataviews-footer\"\n\t\t\t// @ts-ignore\n\t\t\tinert={ isRefreshing ? 'true' : undefined }\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tjustify=\"end\"\n\t\t\t\talign=\"center\"\n\t\t\t\tclassName={ clsx( 'dataviews-footer__content', {\n\t\t\t\t\t'is-refreshing': isDelayedRefreshing,\n\t\t\t\t} ) }\n\t\t\t\tgap=\"sm\"\n\t\t\t>\n\t\t\t\t{ hasBulkActions && <BulkActionsFooter /> }\n\t\t\t\t<DataViewsPagination />\n\t\t\t</Stack>\n\t\t</div>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA2B;AAC3B,gBAAsB;AAKtB,+BAA6B;AAC7B,kCAEO;AACP,oCAGO;AACP,uBAA0C;AAC1C,iCAAkC;AAqC/B;AAnCH,IAAM,cAAkB,CAAC;AAEV,SAAR,kBAAmC;AACzC,QAAM;AAAA,IACL;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,IAC7C;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACD,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,QAAM,eAAe,CAAC,CAAE,aAAa,sBAAsB,CAAC,CAAE,MAAM;AAEpE,QAAM,0BAAsB,8CAAmB,CAAC,CAAE,YAAa;AAE/D,QAAM,qBACL,iEAAmC,SAAS,IAAK,KACjD,CAAE,+BAAc,4BAAY,EAAE,SAAU,KAAK,IAAK;AAEnD,QAAM,oBAAgB,mDAAuB,MAAM;AAAA,IAClD;AAAA,IACA;AAAA,EACD,CAAE;AAEF,MAAK,CAAE,cAAgB,CAAE,kBAAkB,CAAE,eAAkB;AAC9D,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MAEV,OAAQ,eAAe,SAAS;AAAA,MAEhC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,eAAY,YAAAC,SAAM,6BAA6B;AAAA,YAC9C,iBAAiB;AAAA,UAClB,CAAE;AAAA,UACF,KAAI;AAAA,UAEF;AAAA,8BAAkB,4CAAC,mDAAkB;AAAA,YACvC,4CAAC,4BAAAC,SAAA,EAAoB;AAAA;AAAA;AAAA,MACtB;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["DataViewsContext", "clsx", "DataViewsPagination"]
7
7
  }
@@ -98,7 +98,6 @@ function PreviewSizePicker() {
98
98
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
99
99
  import_components.RangeControl,
100
100
  {
101
- __next40pxDefaultSize: true,
102
101
  showTooltip: false,
103
102
  label: (0, import_i18n.__)("Preview size"),
104
103
  value: previewSizeToUse,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/dataviews-layouts/grid/preview-size-picker.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type { ViewGrid } from '../../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\n// Default preview size is the third smallest image size if no preview size is set.\nconst DEFAULT_PREVIEW_SIZE = imageSizes[ 2 ].value;\n\n/**\n * Calculate the number of grid columns based on container width and preview size.\n * This matches how CSS grid auto-fill works: repeat(auto-fill, minmax(previewSize, 1fr)).\n */\nexport function useGridColumns() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\treturn useMemo( () => {\n\t\tconst containerWidth = context.containerWidth;\n\t\tconst gap = 32; // This is the value of the grid gap in CSS.\n\t\tconst previewSize = view.layout?.previewSize ?? DEFAULT_PREVIEW_SIZE;\n\t\tconst columns = Math.floor(\n\t\t\t( containerWidth + gap ) / ( previewSize + gap )\n\t\t);\n\t\treturn Math.max( 1, columns ); // Ensure at least 1 column.\n\t}, [ context.containerWidth, view.layout?.previewSize ] );\n}\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? DEFAULT_PREVIEW_SIZE;\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__next40pxDefaultSize\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA6B;AAC7B,kBAAmB;AACnB,qBAAoC;AAKpC,+BAA6B;AA2E3B;AAxEF,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AACD;AAGA,IAAM,uBAAuB,WAAY,CAAE,EAAE;AAMtC,SAAS,iBAAiB;AAChC,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AACrB,aAAO,wBAAS,MAAM;AACrB,UAAM,iBAAiB,QAAQ;AAC/B,UAAM,MAAM;AACZ,UAAM,cAAc,KAAK,QAAQ,eAAe;AAChD,UAAM,UAAU,KAAK;AAAA,OAClB,iBAAiB,QAAU,cAAc;AAAA,IAC5C;AACA,WAAO,KAAK,IAAK,GAAG,OAAQ;AAAA,EAC7B,GAAG,CAAE,QAAQ,gBAAgB,KAAK,QAAQ,WAAY,CAAE;AACzD;AAEe,SAAR,oBAAqC;AAC3C,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,WAAW,OAAQ,CAAE,SAAU;AAClD,WAAO,QAAQ,kBAAkB,KAAK;AAAA,EACvC,CAAE;AAEF,QAAM,oBAAoB,KAAK,QAAQ,eAAe;AAGtD,QAAM,mBACL,YACE,IAAK,CAAE,MAAM,WAAa,EAAE,GAAG,MAAM,MAAM,EAAI,EAC/C,OAAQ,CAAE,SAAU,KAAK,SAAS,iBAAkB,EACpD,KAAM,CAAE,GAAG,MAAO,EAAE,QAAQ,EAAE,KAAM,EAAG,CAAE,GAAG,SAAS;AAExD,QAAM,QAAQ,YAAY,IAAK,CAAE,MAAM,UAAW;AACjD,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,aAAc;AAAA,MACd,WAAQ,gBAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,KAAM;AAAA,MACN,KAAM,YAAY,SAAS;AAAA,MAC3B,gBAAiB;AAAA,MACjB,UAAW,CAAE,QAAQ,MAAO;AAC3B,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,aAAa,YAAa,KAAM,EAAE;AAAA,UACnC;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,MAAO;AAAA,MACP;AAAA;AAAA,EACD;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type { ViewGrid } from '../../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\n// Default preview size is the third smallest image size if no preview size is set.\nconst DEFAULT_PREVIEW_SIZE = imageSizes[ 2 ].value;\n\n/**\n * Calculate the number of grid columns based on container width and preview size.\n * This matches how CSS grid auto-fill works: repeat(auto-fill, minmax(previewSize, 1fr)).\n */\nexport function useGridColumns() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\treturn useMemo( () => {\n\t\tconst containerWidth = context.containerWidth;\n\t\tconst gap = 32; // This is the value of the grid gap in CSS.\n\t\tconst previewSize = view.layout?.previewSize ?? DEFAULT_PREVIEW_SIZE;\n\t\tconst columns = Math.floor(\n\t\t\t( containerWidth + gap ) / ( previewSize + gap )\n\t\t);\n\t\treturn Math.max( 1, columns ); // Ensure at least 1 column.\n\t}, [ context.containerWidth, view.layout?.previewSize ] );\n}\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? DEFAULT_PREVIEW_SIZE;\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA6B;AAC7B,kBAAmB;AACnB,qBAAoC;AAKpC,+BAA6B;AA2E3B;AAxEF,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AACD;AAGA,IAAM,uBAAuB,WAAY,CAAE,EAAE;AAMtC,SAAS,iBAAiB;AAChC,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AACrB,aAAO,wBAAS,MAAM;AACrB,UAAM,iBAAiB,QAAQ;AAC/B,UAAM,MAAM;AACZ,UAAM,cAAc,KAAK,QAAQ,eAAe;AAChD,UAAM,UAAU,KAAK;AAAA,OAClB,iBAAiB,QAAU,cAAc;AAAA,IAC5C;AACA,WAAO,KAAK,IAAK,GAAG,OAAQ;AAAA,EAC7B,GAAG,CAAE,QAAQ,gBAAgB,KAAK,QAAQ,WAAY,CAAE;AACzD;AAEe,SAAR,oBAAqC;AAC3C,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,WAAW,OAAQ,CAAE,SAAU;AAClD,WAAO,QAAQ,kBAAkB,KAAK;AAAA,EACvC,CAAE;AAEF,QAAM,oBAAoB,KAAK,QAAQ,eAAe;AAGtD,QAAM,mBACL,YACE,IAAK,CAAE,MAAM,WAAa,EAAE,GAAG,MAAM,MAAM,EAAI,EAC/C,OAAQ,CAAE,SAAU,KAAK,SAAS,iBAAkB,EACpD,KAAM,CAAE,GAAG,MAAO,EAAE,QAAQ,EAAE,KAAM,EAAG,CAAE,GAAG,SAAS;AAExD,QAAM,QAAQ,YAAY,IAAK,CAAE,MAAM,UAAW;AACjD,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAc;AAAA,MACd,WAAQ,gBAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,KAAM;AAAA,MACN,KAAM,YAAY,SAAS;AAAA,MAC3B,gBAAiB;AAAA,MACjB,UAAW,CAAE,QAAQ,MAAO;AAC3B,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,aAAa,YAAa,KAAM,EAAE;AAAA,UACnC;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,MAAO;AAAA,MACP;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["DataViewsContext"]
7
7
  }
@@ -374,6 +374,7 @@ function ViewList(props) {
374
374
  } = props;
375
375
  const baseId = (0, import_compose.useInstanceId)(ViewList, "view-list");
376
376
  const isDelayedLoading = (0, import_use_delayed_loading.useDelayedLoading)(!!isLoading);
377
+ const { paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
377
378
  const selectedItem = data?.findLast(
378
379
  (item) => selection.includes(getItemId(item))
379
380
  );
@@ -466,6 +467,7 @@ function ViewList(props) {
466
467
  const groupField = view.groupBy?.field ? fields.find((field) => field.id === view.groupBy?.field) : null;
467
468
  const dataByGroup = hasData && groupField ? (0, import_get_data_by_group.default)(data, groupField) : null;
468
469
  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
470
+ const hasMoreItems = isInfiniteScroll && (view.startPosition ?? 1) + (view.perPage ?? 0) < paginationInfo.totalItems;
469
471
  if (!hasData) {
470
472
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
471
473
  "div",
@@ -577,7 +579,17 @@ function ViewList(props) {
577
579
  })
578
580
  }
579
581
  ),
580
- isInfiniteScroll && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
582
+ (hasMoreItems || isInfiniteScroll && isLoading) && // Keep the spinner's height reserved while loading more so the
583
+ // scroll position doesn't bounce. Hidden, and silent to a11y,
584
+ // while idle.
585
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
586
+ "p",
587
+ {
588
+ className: "dataviews-loading-more",
589
+ "aria-hidden": !isLoading,
590
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
591
+ }
592
+ )
581
593
  ] });
582
594
  }
583
595
  //# sourceMappingURL=index.cjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/dataviews-layouts/list/index.tsx"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tComposite,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';\nimport DataViewsContext from '../../dataviews-context';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewList as ViewListType,\n\tViewListProps,\n\tActionModal as ActionModalType,\n} from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface ListViewItemProps< Item > {\n\tview: ViewListType;\n\tactions: Action< Item >[];\n\tidPrefix: string;\n\tisSelected: boolean;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\totherFields: NormalizedField< Item >[];\n\tonDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;\n\tposinset?: number;\n}\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nfunction generateItemWrapperCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-item-wrapper`;\n}\nfunction generatePrimaryActionCompositeId(\n\tidPrefix: string,\n\tprimaryActionId: string\n) {\n\treturn `${ idPrefix }-primary-action-${ primaryActionId }`;\n}\nfunction generateDropdownTriggerCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-dropdown`;\n}\n\nfunction PrimaryActionGridCell< Item >( {\n\tidPrefix,\n\tprimaryAction,\n\titem,\n}: {\n\tidPrefix: string;\n\tprimaryAction: Action< Item >;\n\titem: Item;\n} ) {\n\tconst registry = useRegistry();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst compositeItemId = generatePrimaryActionCompositeId(\n\t\tidPrefix,\n\t\tprimaryAction.id\n\t);\n\n\tconst label =\n\t\ttypeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] );\n\n\treturn 'RenderModal' in primaryAction ? (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ttext={ label }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Composite.Item>\n\t\t</div>\n\t) : (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tprimaryAction.callback( [ item ], { registry } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction ListItem< Item >( {\n\tview,\n\tactions,\n\tidPrefix,\n\tisSelected,\n\titem,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonSelect,\n\totherFields,\n\tonDropdownTriggerKeyDown,\n\tposinset,\n}: ListViewItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = view;\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst labelId = `${ idPrefix }-label`;\n\tconst descriptionId = `${ idPrefix }-description`;\n\n\tconst registry = useRegistry();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\tconst handleHover: React.MouseEventHandler = ( { type } ) => {\n\t\tconst isHover = type === 'mouseenter';\n\t\tsetIsHovered( isHover );\n\t};\n\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;\n\n\tconst renderedMediaField =\n\t\tshowMedia && mediaField?.render ? (\n\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t<mediaField.render\n\t\t\t\t\titem={ item }\n\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\tconfig={ { sizes: '52px' } }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t) : null;\n\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\tconst renderDescription = showDescription && descriptionField?.render;\n\t// When we have only the media and title fields, we want to center them vertically in the list item.\n\tconst hasOnlyMediaAndTitle =\n\t\t!! renderedMediaField && ! renderDescription && ! otherFields.length;\n\tconst usedActions = eligibleActions?.length > 0 && (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t>\n\t\t\t{ primaryAction && (\n\t\t\t\t<PrimaryActionGridCell\n\t\t\t\t\tidPrefix={ idPrefix }\n\t\t\t\t\tprimaryAction={ primaryAction }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! hasOnlyOnePrimaryAction && (\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tid={ generateDropdownTriggerCompositeId(\n\t\t\t\t\t\t\t\t\t\tidPrefix\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\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\t<Menu.Popover>\n\t\t\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t\t{ !! activeModalAction && (\n\t\t\t\t\t\t<ActionModal\n\t\t\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n\n\treturn (\n\t\t<Composite.Row\n\t\t\tref={ itemRef }\n\t\t\trender={\n\t\t\t\t/* aria-posinset breaks Composite.Row if passed to it directly. */\n\t\t\t\t<div\n\t\t\t\t\taria-posinset={ posinset }\n\t\t\t\t\taria-setsize={\n\t\t\t\t\t\tinfiniteScrollEnabled\n\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t\trole={ infiniteScrollEnabled ? 'article' : 'row' }\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleHover }\n\t\t\tonMouseLeave={ handleHover }\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\tid={ generateItemWrapperCompositeId( idPrefix ) }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\talign={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }\n\t\t\t\t\tstyle={ { flex: 1, minWidth: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-title-field dataviews-view-list__title-field\"\n\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ usedActions }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t{ renderDescription && (\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__field\">\n\t\t\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ otherFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\trender={ <span /> }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Composite.Row>\n\t);\n}\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t\tclassName,\n\t\tempty,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\tconst titleField = fields.find( ( field ) => field.id === view.titleField );\n\tconst mediaField = fields.find( ( field ) => field.id === view.mediaField );\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view.descriptionField\n\t);\n\tconst otherFields = ( view?.fields ?? [] )\n\t\t.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )\n\t\t.filter( isDefined );\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst generateCompositeItemIdPrefix = useCallback(\n\t\t( item: Item ) => `${ baseId }-${ getItemId( item ) }`,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst isActiveCompositeItem = useCallback(\n\t\t( item: Item, idToCheck: string ) => {\n\t\t\t// All composite items use the same prefix in their IDs.\n\t\t\treturn idToCheck.startsWith(\n\t\t\t\tgenerateCompositeItemIdPrefix( item )\n\t\t\t);\n\t\t},\n\t\t[ generateCompositeItemIdPrefix ]\n\t);\n\n\t// Controlled state for the active composite item.\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>( undefined );\n\n\tconst compositeRef = useRef< HTMLDivElement >( null );\n\n\t// Update the active composite item when the selected item changes.\n\tuseEffect( () => {\n\t\tif ( selectedItem ) {\n\t\t\tsetActiveCompositeId(\n\t\t\t\tgenerateItemWrapperCompositeId(\n\t\t\t\t\tgenerateCompositeItemIdPrefix( selectedItem )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selectedItem, generateCompositeItemIdPrefix ] );\n\n\tconst activeItemIndex = data.findIndex( ( item ) =>\n\t\tisActiveCompositeItem( item, activeCompositeId ?? '' )\n\t);\n\tconst previousActiveItemIndex = usePrevious( activeItemIndex );\n\tconst isActiveIdInList = activeItemIndex !== -1;\n\n\tconst selectCompositeItem = useCallback(\n\t\t(\n\t\t\ttargetIndex: number,\n\t\t\t// Allows invokers to specify a custom function to generate the\n\t\t\t// target composite item ID\n\t\t\tgenerateCompositeId: ( idPrefix: string ) => string\n\t\t) => {\n\t\t\t// Clamping between 0 and data.length - 1 to avoid out of bounds.\n\t\t\tconst clampedIndex = Math.min(\n\t\t\t\tdata.length - 1,\n\t\t\t\tMath.max( 0, targetIndex )\n\t\t\t);\n\t\t\tif ( ! data[ clampedIndex ] ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst itemIdPrefix = generateCompositeItemIdPrefix(\n\t\t\t\tdata[ clampedIndex ]\n\t\t\t);\n\t\t\tconst targetCompositeItemId = generateCompositeId( itemIdPrefix );\n\n\t\t\tsetActiveCompositeId( targetCompositeItemId );\n\t\t\t// The active composite item is controlled state that\n\t\t\t// can update without needing a focus move (e.g., searching\n\t\t\t// can trigger an active ID update). Only move DOM focus\n\t\t\t// when it's already within the list.\n\t\t\tif (\n\t\t\t\tcompositeRef.current?.contains(\n\t\t\t\t\tcompositeRef.current.ownerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tdocument.getElementById( targetCompositeItemId )?.focus();\n\t\t\t}\n\t\t},\n\t\t[ data, generateCompositeItemIdPrefix ]\n\t);\n\n\t// Select a new active composite item when the current active item\n\t// is removed from the list.\n\tuseEffect( () => {\n\t\tconst wasActiveIdInList =\n\t\t\tpreviousActiveItemIndex !== undefined &&\n\t\t\tpreviousActiveItemIndex !== -1;\n\t\tif ( ! isActiveIdInList && wasActiveIdInList ) {\n\t\t\t// By picking `previousActiveItemIndex` as the next item index, we are\n\t\t\t// basically picking the item that would have been after the deleted one.\n\t\t\t// If the previously active (and removed) item was the last of the list,\n\t\t\t// we will select the item before it — which is the new last item.\n\t\t\tselectCompositeItem(\n\t\t\t\tpreviousActiveItemIndex,\n\t\t\t\tgenerateItemWrapperCompositeId\n\t\t\t);\n\t\t}\n\t}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );\n\n\t// Prevent the default behavior (open dropdown menu) and instead select the\n\t// dropdown menu trigger on the previous/next row.\n\t// https://github.com/ariakit/ariakit/issues/3768\n\tconst onDropdownTriggerKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLButtonElement > ) => {\n\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the next row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex + 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the previous row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex - 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ selectCompositeItem, activeItemIndex ]\n\t);\n\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup =\n\t\thasData && groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'dataviews-no-results', {\n\t\t\t\t\t'is-refreshing': isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ empty }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render data grouped by field\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ `${ baseId }` }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName=\"dataviews-view-list__group\"\n\t\t\t\trole=\"grid\"\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\n\t\t\t\t>\n\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-list__group-header\">\n\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst id =\n\t\t\t\t\t\t\t\t\t\tgenerateCompositeItemIdPrefix( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Composite>\n\t\t);\n\t}\n\n\t// Render ungrouped data\n\treturn (\n\t\t<>\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className, {\n\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t),\n\t\t\t\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : 'grid' }\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={\n\t\t\t\t\t! isInfiniteScroll && !! isLoading ? 'true' : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\tconst id = generateCompositeItemIdPrefix( item );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tposinset={\n\t\t\t\t\t\t\t\tview.infiniteScrollEnabled\n\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t: undefined\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</Composite>\n\t\t\t{ isInfiniteScroll && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tComposite,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';\nimport DataViewsContext from '../../dataviews-context';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewList as ViewListType,\n\tViewListProps,\n\tActionModal as ActionModalType,\n} from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface ListViewItemProps< Item > {\n\tview: ViewListType;\n\tactions: Action< Item >[];\n\tidPrefix: string;\n\tisSelected: boolean;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\totherFields: NormalizedField< Item >[];\n\tonDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;\n\tposinset?: number;\n}\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nfunction generateItemWrapperCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-item-wrapper`;\n}\nfunction generatePrimaryActionCompositeId(\n\tidPrefix: string,\n\tprimaryActionId: string\n) {\n\treturn `${ idPrefix }-primary-action-${ primaryActionId }`;\n}\nfunction generateDropdownTriggerCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-dropdown`;\n}\n\nfunction PrimaryActionGridCell< Item >( {\n\tidPrefix,\n\tprimaryAction,\n\titem,\n}: {\n\tidPrefix: string;\n\tprimaryAction: Action< Item >;\n\titem: Item;\n} ) {\n\tconst registry = useRegistry();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst compositeItemId = generatePrimaryActionCompositeId(\n\t\tidPrefix,\n\t\tprimaryAction.id\n\t);\n\n\tconst label =\n\t\ttypeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] );\n\n\treturn 'RenderModal' in primaryAction ? (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ttext={ label }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Composite.Item>\n\t\t</div>\n\t) : (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tprimaryAction.callback( [ item ], { registry } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction ListItem< Item >( {\n\tview,\n\tactions,\n\tidPrefix,\n\tisSelected,\n\titem,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonSelect,\n\totherFields,\n\tonDropdownTriggerKeyDown,\n\tposinset,\n}: ListViewItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = view;\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst labelId = `${ idPrefix }-label`;\n\tconst descriptionId = `${ idPrefix }-description`;\n\n\tconst registry = useRegistry();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\tconst handleHover: React.MouseEventHandler = ( { type } ) => {\n\t\tconst isHover = type === 'mouseenter';\n\t\tsetIsHovered( isHover );\n\t};\n\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;\n\n\tconst renderedMediaField =\n\t\tshowMedia && mediaField?.render ? (\n\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t<mediaField.render\n\t\t\t\t\titem={ item }\n\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\tconfig={ { sizes: '52px' } }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t) : null;\n\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\tconst renderDescription = showDescription && descriptionField?.render;\n\t// When we have only the media and title fields, we want to center them vertically in the list item.\n\tconst hasOnlyMediaAndTitle =\n\t\t!! renderedMediaField && ! renderDescription && ! otherFields.length;\n\tconst usedActions = eligibleActions?.length > 0 && (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t>\n\t\t\t{ primaryAction && (\n\t\t\t\t<PrimaryActionGridCell\n\t\t\t\t\tidPrefix={ idPrefix }\n\t\t\t\t\tprimaryAction={ primaryAction }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! hasOnlyOnePrimaryAction && (\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tid={ generateDropdownTriggerCompositeId(\n\t\t\t\t\t\t\t\t\t\tidPrefix\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\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\t<Menu.Popover>\n\t\t\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t\t{ !! activeModalAction && (\n\t\t\t\t\t\t<ActionModal\n\t\t\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n\n\treturn (\n\t\t<Composite.Row\n\t\t\tref={ itemRef }\n\t\t\trender={\n\t\t\t\t/* aria-posinset breaks Composite.Row if passed to it directly. */\n\t\t\t\t<div\n\t\t\t\t\taria-posinset={ posinset }\n\t\t\t\t\taria-setsize={\n\t\t\t\t\t\tinfiniteScrollEnabled\n\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t\trole={ infiniteScrollEnabled ? 'article' : 'row' }\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleHover }\n\t\t\tonMouseLeave={ handleHover }\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\tid={ generateItemWrapperCompositeId( idPrefix ) }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\talign={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }\n\t\t\t\t\tstyle={ { flex: 1, minWidth: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-title-field dataviews-view-list__title-field\"\n\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ usedActions }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t{ renderDescription && (\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__field\">\n\t\t\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ otherFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\trender={ <span /> }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Composite.Row>\n\t);\n}\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t\tclassName,\n\t\tempty,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\tconst titleField = fields.find( ( field ) => field.id === view.titleField );\n\tconst mediaField = fields.find( ( field ) => field.id === view.mediaField );\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view.descriptionField\n\t);\n\tconst otherFields = ( view?.fields ?? [] )\n\t\t.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )\n\t\t.filter( isDefined );\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst generateCompositeItemIdPrefix = useCallback(\n\t\t( item: Item ) => `${ baseId }-${ getItemId( item ) }`,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst isActiveCompositeItem = useCallback(\n\t\t( item: Item, idToCheck: string ) => {\n\t\t\t// All composite items use the same prefix in their IDs.\n\t\t\treturn idToCheck.startsWith(\n\t\t\t\tgenerateCompositeItemIdPrefix( item )\n\t\t\t);\n\t\t},\n\t\t[ generateCompositeItemIdPrefix ]\n\t);\n\n\t// Controlled state for the active composite item.\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>( undefined );\n\n\tconst compositeRef = useRef< HTMLDivElement >( null );\n\n\t// Update the active composite item when the selected item changes.\n\tuseEffect( () => {\n\t\tif ( selectedItem ) {\n\t\t\tsetActiveCompositeId(\n\t\t\t\tgenerateItemWrapperCompositeId(\n\t\t\t\t\tgenerateCompositeItemIdPrefix( selectedItem )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selectedItem, generateCompositeItemIdPrefix ] );\n\n\tconst activeItemIndex = data.findIndex( ( item ) =>\n\t\tisActiveCompositeItem( item, activeCompositeId ?? '' )\n\t);\n\tconst previousActiveItemIndex = usePrevious( activeItemIndex );\n\tconst isActiveIdInList = activeItemIndex !== -1;\n\n\tconst selectCompositeItem = useCallback(\n\t\t(\n\t\t\ttargetIndex: number,\n\t\t\t// Allows invokers to specify a custom function to generate the\n\t\t\t// target composite item ID\n\t\t\tgenerateCompositeId: ( idPrefix: string ) => string\n\t\t) => {\n\t\t\t// Clamping between 0 and data.length - 1 to avoid out of bounds.\n\t\t\tconst clampedIndex = Math.min(\n\t\t\t\tdata.length - 1,\n\t\t\t\tMath.max( 0, targetIndex )\n\t\t\t);\n\t\t\tif ( ! data[ clampedIndex ] ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst itemIdPrefix = generateCompositeItemIdPrefix(\n\t\t\t\tdata[ clampedIndex ]\n\t\t\t);\n\t\t\tconst targetCompositeItemId = generateCompositeId( itemIdPrefix );\n\n\t\t\tsetActiveCompositeId( targetCompositeItemId );\n\t\t\t// The active composite item is controlled state that\n\t\t\t// can update without needing a focus move (e.g., searching\n\t\t\t// can trigger an active ID update). Only move DOM focus\n\t\t\t// when it's already within the list.\n\t\t\tif (\n\t\t\t\tcompositeRef.current?.contains(\n\t\t\t\t\tcompositeRef.current.ownerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tdocument.getElementById( targetCompositeItemId )?.focus();\n\t\t\t}\n\t\t},\n\t\t[ data, generateCompositeItemIdPrefix ]\n\t);\n\n\t// Select a new active composite item when the current active item\n\t// is removed from the list.\n\tuseEffect( () => {\n\t\tconst wasActiveIdInList =\n\t\t\tpreviousActiveItemIndex !== undefined &&\n\t\t\tpreviousActiveItemIndex !== -1;\n\t\tif ( ! isActiveIdInList && wasActiveIdInList ) {\n\t\t\t// By picking `previousActiveItemIndex` as the next item index, we are\n\t\t\t// basically picking the item that would have been after the deleted one.\n\t\t\t// If the previously active (and removed) item was the last of the list,\n\t\t\t// we will select the item before it — which is the new last item.\n\t\t\tselectCompositeItem(\n\t\t\t\tpreviousActiveItemIndex,\n\t\t\t\tgenerateItemWrapperCompositeId\n\t\t\t);\n\t\t}\n\t}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );\n\n\t// Prevent the default behavior (open dropdown menu) and instead select the\n\t// dropdown menu trigger on the previous/next row.\n\t// https://github.com/ariakit/ariakit/issues/3768\n\tconst onDropdownTriggerKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLButtonElement > ) => {\n\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the next row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex + 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the previous row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex - 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ selectCompositeItem, activeItemIndex ]\n\t);\n\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup =\n\t\thasData && groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\t// Whether the server has more rows beyond the current window.\n\tconst hasMoreItems =\n\t\tisInfiniteScroll &&\n\t\t( view.startPosition ?? 1 ) + ( view.perPage ?? 0 ) <\n\t\t\tpaginationInfo.totalItems;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'dataviews-no-results', {\n\t\t\t\t\t'is-refreshing': isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ empty }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render data grouped by field\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ `${ baseId }` }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName=\"dataviews-view-list__group\"\n\t\t\t\trole=\"grid\"\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\n\t\t\t\t>\n\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-list__group-header\">\n\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst id =\n\t\t\t\t\t\t\t\t\t\tgenerateCompositeItemIdPrefix( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Composite>\n\t\t);\n\t}\n\n\t// Render ungrouped data\n\treturn (\n\t\t<>\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className, {\n\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t),\n\t\t\t\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : 'grid' }\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={\n\t\t\t\t\t! isInfiniteScroll && !! isLoading ? 'true' : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\tconst id = generateCompositeItemIdPrefix( item );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tposinset={\n\t\t\t\t\t\t\t\tview.infiniteScrollEnabled\n\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t: undefined\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</Composite>\n\t\t\t{ ( hasMoreItems || ( isInfiniteScroll && isLoading ) ) && (\n\t\t\t\t// Keep the spinner's height reserved while loading more so the\n\t\t\t\t// scroll position doesn't bounce. Hidden, and silent to a11y,\n\t\t\t\t// while idle.\n\t\t\t\t<p\n\t\t\t\t\tclassName=\"dataviews-loading-more\"\n\t\t\t\t\taria-hidden={ ! isLoading }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["componentsPrivateApis", "DataViewsContext", "clsx", "getDataByGroup"]
7
7
  }
@@ -44,7 +44,6 @@ function DensityPicker() {
44
44
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
45
45
  import_components.__experimentalToggleGroupControl,
46
46
  {
47
- size: "__unstable-large",
48
47
  label: (0, import_i18n.__)("Density"),
49
48
  value: view.layout?.density || "balanced",
50
49
  onChange: (value) => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/dataviews-layouts/utils/density-picker.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type {\n\tViewTable,\n\tViewList,\n\tViewGrid,\n\tViewPickerGrid,\n\tDensity,\n} from '../../../types';\n\nexport default function DensityPicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as\n\t\t| ViewTable\n\t\t| ViewList\n\t\t| ViewGrid\n\t\t| ViewPickerGrid;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tsize=\"__unstable-large\"\n\t\t\tlabel={ __( 'Density' ) }\n\t\t\tvalue={ view.layout?.density || 'balanced' }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tdensity: value as Density,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisBlock\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"comfortable\"\n\t\t\t\tvalue=\"comfortable\"\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Comfortable',\n\t\t\t\t\t'Density option for DataView layout'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"balanced\"\n\t\t\t\tvalue=\"balanced\"\n\t\t\t\tlabel={ _x( 'Balanced', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"compact\"\n\t\t\t\tvalue=\"compact\"\n\t\t\t\tlabel={ _x( 'Compact', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAuB;AACvB,qBAA2B;AAK3B,+BAA6B;AAiB3B;AARa,SAAR,gBAAiC;AACvC,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAKrB,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAQ,gBAAI,SAAU;AAAA,MACtB,OAAQ,KAAK,QAAQ,WAAW;AAAA,MAChC,UAAW,CAAE,UAAW;AACvB,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,SAAS;AAAA,UACV;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,SAAO;AAAA,MAEP;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ;AAAA,cACP;AAAA,cACA;AAAA,YACD;AAAA;AAAA,UALI;AAAA,QAML;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ,gBAAI,YAAY,oCAAqC;AAAA;AAAA,UAFzD;AAAA,QAGL;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ,gBAAI,WAAW,oCAAqC;AAAA;AAAA,UAFxD;AAAA,QAGL;AAAA;AAAA;AAAA,EACD;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type {\n\tViewTable,\n\tViewList,\n\tViewGrid,\n\tViewPickerGrid,\n\tDensity,\n} from '../../../types';\n\nexport default function DensityPicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as\n\t\t| ViewTable\n\t\t| ViewList\n\t\t| ViewGrid\n\t\t| ViewPickerGrid;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tlabel={ __( 'Density' ) }\n\t\t\tvalue={ view.layout?.density || 'balanced' }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tdensity: value as Density,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisBlock\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"comfortable\"\n\t\t\t\tvalue=\"comfortable\"\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Comfortable',\n\t\t\t\t\t'Density option for DataView layout'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"balanced\"\n\t\t\t\tvalue=\"balanced\"\n\t\t\t\tlabel={ _x( 'Balanced', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"compact\"\n\t\t\t\tvalue=\"compact\"\n\t\t\t\tlabel={ _x( 'Compact', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAuB;AACvB,qBAA2B;AAK3B,+BAA6B;AAiB3B;AARa,SAAR,gBAAiC;AACvC,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAKrB,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAU;AAAA,MACtB,OAAQ,KAAK,QAAQ,WAAW;AAAA,MAChC,UAAW,CAAE,UAAW;AACvB,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,SAAS;AAAA,UACV;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,SAAO;AAAA,MAEP;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ;AAAA,cACP;AAAA,cACA;AAAA,YACD;AAAA;AAAA,UALI;AAAA,QAML;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ,gBAAI,YAAY,oCAAqC;AAAA;AAAA,UAFzD;AAAA,QAGL;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YAEA,OAAM;AAAA,YACN,WAAQ,gBAAI,WAAW,oCAAqC;AAAA;AAAA,UAFxD;AAAA,QAGL;AAAA;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["DataViewsContext", "ToggleGroupControl", "ToggleGroupControlOption"]
7
7
  }
@@ -83,7 +83,6 @@ function PreviewSizePicker() {
83
83
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
84
  import_components.RangeControl,
85
85
  {
86
- __next40pxDefaultSize: true,
87
86
  showTooltip: false,
88
87
  label: (0, import_i18n.__)("Preview size"),
89
88
  value: previewSizeToUse,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/dataviews-layouts/utils/preview-size-picker.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type { ViewGrid } from '../../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__next40pxDefaultSize\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA6B;AAC7B,kBAAmB;AACnB,qBAA2B;AAK3B,+BAA6B;AAsD3B;AAnDF,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AACD;AAEe,SAAR,oBAAqC;AAC3C,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,WAAW,OAAQ,CAAE,SAAU;AAClD,WAAO,QAAQ,kBAAkB,KAAK;AAAA,EACvC,CAAE;AAEF,QAAM,oBAAoB,KAAK,QAAQ,eAAe;AAGtD,QAAM,mBACL,YACE,IAAK,CAAE,MAAM,WAAa,EAAE,GAAG,MAAM,MAAM,EAAI,EAC/C,OAAQ,CAAE,SAAU,KAAK,SAAS,iBAAkB,EACpD,KAAM,CAAE,GAAG,MAAO,EAAE,QAAQ,EAAE,KAAM,EAAG,CAAE,GAAG,SAAS;AAExD,QAAM,QAAQ,YAAY,IAAK,CAAE,MAAM,UAAW;AACjD,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,aAAc;AAAA,MACd,WAAQ,gBAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,KAAM;AAAA,MACN,KAAM,YAAY,SAAS;AAAA,MAC3B,gBAAiB;AAAA,MACjB,UAAW,CAAE,QAAQ,MAAO;AAC3B,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,aAAa,YAAa,KAAM,EAAE;AAAA,UACnC;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,MAAO;AAAA,MACP;AAAA;AAAA,EACD;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type { ViewGrid } from '../../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA6B;AAC7B,kBAAmB;AACnB,qBAA2B;AAK3B,+BAA6B;AAsD3B;AAnDF,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AACD;AAEe,SAAR,oBAAqC;AAC3C,QAAM,cAAU,2BAAY,yBAAAA,OAAiB;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,WAAW,OAAQ,CAAE,SAAU;AAClD,WAAO,QAAQ,kBAAkB,KAAK;AAAA,EACvC,CAAE;AAEF,QAAM,oBAAoB,KAAK,QAAQ,eAAe;AAGtD,QAAM,mBACL,YACE,IAAK,CAAE,MAAM,WAAa,EAAE,GAAG,MAAM,MAAM,EAAI,EAC/C,OAAQ,CAAE,SAAU,KAAK,SAAS,iBAAkB,EACpD,KAAM,CAAE,GAAG,MAAO,EAAE,QAAQ,EAAE,KAAM,EAAG,CAAE,GAAG,SAAS;AAExD,QAAM,QAAQ,YAAY,IAAK,CAAE,MAAM,UAAW;AACjD,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAc;AAAA,MACd,WAAQ,gBAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,KAAM;AAAA,MACN,KAAM,YAAY,SAAS;AAAA,MAC3B,gBAAiB;AAAA,MACjB,UAAW,CAAE,QAAQ,MAAO;AAC3B,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,aAAa,YAAa,KAAM,EAAE;AAAA,UACnC;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,MAAO;AAAA,MACP;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": ["DataViewsContext"]
7
7
  }
@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  var dataviews_pagination_exports = {};
32
32
  __export(dataviews_pagination_exports, {
33
33
  DataViewsPagination: () => DataViewsPagination,
34
- default: () => dataviews_pagination_default
34
+ default: () => dataviews_pagination_default,
35
+ hasPaginationControls: () => hasPaginationControls
35
36
  });
36
37
  module.exports = __toCommonJS(dataviews_pagination_exports);
37
38
  var import_components = require("@wordpress/components");
@@ -41,15 +42,15 @@ var import_icons = require("@wordpress/icons");
41
42
  var import_ui = require("@wordpress/ui");
42
43
  var import_dataviews_context = __toESM(require("../dataviews-context/index.cjs"));
43
44
  var import_jsx_runtime = require("react/jsx-runtime");
45
+ function hasPaginationControls(view, paginationInfo) {
46
+ return !view.infiniteScrollEnabled && paginationInfo.totalItems > 0 && paginationInfo.totalPages > 1;
47
+ }
44
48
  function DataViewsPagination() {
45
- const {
46
- view,
47
- onChangeView,
48
- paginationInfo: { totalItems = 0, totalPages }
49
- } = (0, import_element.useContext)(import_dataviews_context.default);
50
- if (!totalItems || !totalPages || view.infiniteScrollEnabled) {
49
+ const { view, onChangeView, paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
50
+ if (!hasPaginationControls(view, paginationInfo)) {
51
51
  return null;
52
52
  }
53
+ const { totalPages } = paginationInfo;
53
54
  const currentPage = view.page ?? 1;
54
55
  const pageSelectOptions = Array.from(Array(totalPages)).map(
55
56
  (_, i) => {
@@ -66,7 +67,7 @@ function DataViewsPagination() {
66
67
  };
67
68
  }
68
69
  );
69
- return !!totalItems && totalPages !== 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
70
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
70
71
  import_ui.Stack,
71
72
  {
72
73
  direction: "row",
@@ -86,10 +87,7 @@ function DataViewsPagination() {
86
87
  children: (0, import_element.createInterpolateElement)(
87
88
  (0, import_i18n.sprintf)(
88
89
  // translators: 1: Current page number, 2: Total number of pages.
89
- (0, import_i18n._x)(
90
- "<div>Page</div>%1$s<div>of %2$d</div>",
91
- "paging"
92
- ),
90
+ (0, import_i18n._x)("<div>Page</div>%1$s<div>of %2$d</div>", "paging"),
93
91
  "<CurrentPage />",
94
92
  totalPages
95
93
  ),
@@ -154,6 +152,7 @@ function DataViewsPagination() {
154
152
  var dataviews_pagination_default = (0, import_element.memo)(DataViewsPagination);
155
153
  // Annotate the CommonJS export names for ESM import in node:
156
154
  0 && (module.exports = {
157
- DataViewsPagination
155
+ DataViewsPagination,
156
+ hasPaginationControls
158
157
  });
159
158
  //# sourceMappingURL=index.cjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/dataviews-pagination/index.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, SelectControl } from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport function DataViewsPagination() {\n\tconst {\n\t\tview,\n\t\tonChangeView,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t} = useContext( DataViewsContext );\n\n\tif ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst currentPage = view.page ?? 1;\n\tconst pageSelectOptions = Array.from( Array( totalPages ) ).map(\n\t\t( _, i ) => {\n\t\t\tconst page = i + 1;\n\t\t\treturn {\n\t\t\t\tvalue: page.toString(),\n\t\t\t\tlabel: page.toString(),\n\t\t\t\t'aria-label':\n\t\t\t\t\tcurrentPage === page\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: 1: current page number. 2: total number of pages.\n\t\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: page.toString(),\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t!! totalItems &&\n\t\ttotalPages !== 1 && (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-pagination\"\n\t\t\t\tjustify=\"end\"\n\t\t\t\talign=\"center\"\n\t\t\t\tgap=\"xl\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\tclassName=\"dataviews-pagination__page-select\"\n\t\t\t\t>\n\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\tvalue={ currentPage.toString() }\n\t\t\t\t\t\t\t\t\toptions={ pageSelectOptions }\n\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" align=\"center\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: currentPage - 1,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t)\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAsC;AACtC,qBAA2D;AAC3D,kBAAuC;AACvC,mBAA+B;AAC/B,gBAAsB;AAKtB,+BAA6B;AA6DjB;AA3DL,SAAS,sBAAsB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,EAC9C,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,MAAK,CAAE,cAAc,CAAE,cAAc,KAAK,uBAAwB;AACjE,WAAO;AAAA,EACR;AAEA,QAAM,cAAc,KAAK,QAAQ;AACjC,QAAM,oBAAoB,MAAM,KAAM,MAAO,UAAW,CAAE,EAAE;AAAA,IAC3D,CAAE,GAAG,MAAO;AACX,YAAM,OAAO,IAAI;AACjB,aAAO;AAAA,QACN,OAAO,KAAK,SAAS;AAAA,QACrB,OAAO,KAAK,SAAS;AAAA,QACrB,cACC,gBAAgB,WACb;AAAA;AAAA,cAEA,gBAAI,mBAAoB;AAAA,UACxB;AAAA,UACA;AAAA,QACA,IACA,KAAK,SAAS;AAAA,MACnB;AAAA,IACD;AAAA,EACD;AAEA,SACC,CAAC,CAAE,cACH,eAAe,KACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,KAAI;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,WAAU;AAAA,YAER;AAAA,kBACD;AAAA;AAAA,oBAEC;AAAA,kBACC;AAAA,kBACA;AAAA,gBACD;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,gBACC,KAAK,4CAAC,SAAI,eAAW,MAAC;AAAA;AAAA,gBAEtB,aACC;AAAA,kBAAC;AAAA;AAAA,oBACA,kBAAa,gBAAI,cAAe;AAAA,oBAChC,OAAQ,YAAY,SAAS;AAAA,oBAC7B,SAAU;AAAA,oBACV,UAAW,CAAE,aAAc;AAC1B,mCAAc;AAAA,wBACb,GAAG;AAAA,wBACH,MAAM,CAAC;AAAA,sBACR,CAAE;AAAA,oBACH;AAAA,oBACA,MAAK;AAAA,oBACL,SAAQ;AAAA;AAAA,gBACT;AAAA,cAEF;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UACrC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc;AAAA,gBACb,GAAG;AAAA,gBACH,MAAM,cAAc;AAAA,cACrB,CAAE;AAAA,cAEH,UAAW,gBAAgB;AAAA,cAC3B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,eAAgB;AAAA,cAC5B,UAAO,mBAAM,IAAI,oBAAO;AAAA,cACxB,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc,EAAE,GAAG,MAAM,MAAM,cAAc,EAAE,CAAE;AAAA,cAElD,UAAW,eAAe;AAAA,cAC1B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,WAAY;AAAA,cACxB,UAAO,mBAAM,IAAI,wBAAW;AAAA,cAC5B,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAGH;AAEA,IAAO,mCAAQ,qBAAM,mBAAoB;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, SelectControl } from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport type { View } from '../../types';\n\nexport function hasPaginationControls(\n\tview: View,\n\tpaginationInfo: { totalItems: number; totalPages: number }\n): boolean {\n\treturn (\n\t\t! view.infiniteScrollEnabled &&\n\t\tpaginationInfo.totalItems > 0 &&\n\t\tpaginationInfo.totalPages > 1\n\t);\n}\n\nexport function DataViewsPagination() {\n\tconst { view, onChangeView, paginationInfo } =\n\t\tuseContext( DataViewsContext );\n\n\tif ( ! hasPaginationControls( view, paginationInfo ) ) {\n\t\treturn null;\n\t}\n\n\tconst { totalPages } = paginationInfo;\n\tconst currentPage = view.page ?? 1;\n\tconst pageSelectOptions = Array.from( Array( totalPages ) ).map(\n\t\t( _, i ) => {\n\t\t\tconst page = i + 1;\n\t\t\treturn {\n\t\t\t\tvalue: page.toString(),\n\t\t\t\tlabel: page.toString(),\n\t\t\t\t'aria-label':\n\t\t\t\t\tcurrentPage === page\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: 1: current page number. 2: total number of pages.\n\t\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: page.toString(),\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tclassName=\"dataviews-pagination\"\n\t\t\tjustify=\"end\"\n\t\t\talign=\"center\"\n\t\t\tgap=\"xl\"\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talign=\"center\"\n\t\t\t\tgap=\"xs\"\n\t\t\t\tclassName=\"dataviews-pagination__page-select\"\n\t\t\t>\n\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t_x( '<div>Page</div>%1$s<div>of %2$d</div>', 'paging' ),\n\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\ttotalPages\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\tvalue={ currentPage.toString() }\n\t\t\t\t\t\t\t\toptions={ pageSelectOptions }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tvariant=\"minimal\"\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</Stack>\n\t\t\t<Stack direction=\"row\" gap=\"xs\" align=\"center\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\tpage: currentPage - 1,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tshowTooltip\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tshowTooltip\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAsC;AACtC,qBAA2D;AAC3D,kBAAuC;AACvC,mBAA+B;AAC/B,gBAAsB;AAKtB,+BAA6B;AAkElB;AA/DJ,SAAS,sBACf,MACA,gBACU;AACV,SACC,CAAE,KAAK,yBACP,eAAe,aAAa,KAC5B,eAAe,aAAa;AAE9B;AAEO,SAAS,sBAAsB;AACrC,QAAM,EAAE,MAAM,cAAc,eAAe,QAC1C,2BAAY,yBAAAA,OAAiB;AAE9B,MAAK,CAAE,sBAAuB,MAAM,cAAe,GAAI;AACtD,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,cAAc,KAAK,QAAQ;AACjC,QAAM,oBAAoB,MAAM,KAAM,MAAO,UAAW,CAAE,EAAE;AAAA,IAC3D,CAAE,GAAG,MAAO;AACX,YAAM,OAAO,IAAI;AACjB,aAAO;AAAA,QACN,OAAO,KAAK,SAAS;AAAA,QACrB,OAAO,KAAK,SAAS;AAAA,QACrB,cACC,gBAAgB,WACb;AAAA;AAAA,cAEA,gBAAI,mBAAoB;AAAA,UACxB;AAAA,UACA;AAAA,QACA,IACA,KAAK,SAAS;AAAA,MACnB;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,KAAI;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,WAAU;AAAA,YAER;AAAA,kBACD;AAAA;AAAA,oBAEC,gBAAI,yCAAyC,QAAS;AAAA,gBACtD;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,gBACC,KAAK,4CAAC,SAAI,eAAW,MAAC;AAAA;AAAA,gBAEtB,aACC;AAAA,kBAAC;AAAA;AAAA,oBACA,kBAAa,gBAAI,cAAe;AAAA,oBAChC,OAAQ,YAAY,SAAS;AAAA,oBAC7B,SAAU;AAAA,oBACV,UAAW,CAAE,aAAc;AAC1B,mCAAc;AAAA,wBACb,GAAG;AAAA,wBACH,MAAM,CAAC;AAAA,sBACR,CAAE;AAAA,oBACH;AAAA,oBACA,MAAK;AAAA,oBACL,SAAQ;AAAA;AAAA,gBACT;AAAA,cAEF;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UACrC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc;AAAA,gBACb,GAAG;AAAA,gBACH,MAAM,cAAc;AAAA,cACrB,CAAE;AAAA,cAEH,UAAW,gBAAgB;AAAA,cAC3B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,eAAgB;AAAA,cAC5B,UAAO,mBAAM,IAAI,oBAAO;AAAA,cACxB,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc,EAAE,GAAG,MAAM,MAAM,cAAc,EAAE,CAAE;AAAA,cAElD,UAAW,eAAe;AAAA,cAC1B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,WAAY;AAAA,cACxB,UAAO,mBAAM,IAAI,wBAAW;AAAA,cAC5B,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,mCAAQ,qBAAM,mBAAoB;",
6
6
  "names": ["DataViewsContext"]
7
7
  }