@wordpress/dataviews 10.1.5 → 10.3.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.
- package/CHANGELOG.md +19 -0
- package/README.md +109 -1
- package/build/components/dataform/index.js +6 -2
- package/build/components/dataform/index.js.map +3 -3
- package/build/components/dataform-context/index.js +4 -2
- package/build/components/dataform-context/index.js.map +1 -1
- package/build/components/dataviews/index.js +8 -6
- package/build/components/dataviews/index.js.map +1 -1
- package/build/components/dataviews-bulk-actions/index.js +4 -2
- package/build/components/dataviews-bulk-actions/index.js.map +1 -1
- package/build/components/dataviews-context/index.js +3 -1
- package/build/components/dataviews-context/index.js.map +1 -1
- package/build/components/dataviews-filters/add-filter.js +4 -2
- package/build/components/dataviews-filters/add-filter.js.map +1 -1
- package/build/components/dataviews-filters/filter.js +20 -5
- package/build/components/dataviews-filters/filter.js.map +3 -3
- package/build/components/dataviews-filters/filters-toggled.js +3 -1
- package/build/components/dataviews-filters/filters-toggled.js.map +1 -1
- package/build/components/dataviews-filters/filters.js +3 -1
- package/build/components/dataviews-filters/filters.js.map +1 -1
- package/build/components/dataviews-filters/index.js +2 -0
- package/build/components/dataviews-filters/index.js.map +1 -1
- package/build/components/dataviews-filters/input-widget.js +3 -1
- package/build/components/dataviews-filters/input-widget.js.map +1 -1
- package/build/components/dataviews-filters/reset-filters.js +3 -1
- package/build/components/dataviews-filters/reset-filters.js.map +1 -1
- package/build/components/dataviews-filters/search-widget.js +8 -6
- package/build/components/dataviews-filters/search-widget.js.map +2 -2
- package/build/components/dataviews-filters/toggle.js +3 -1
- package/build/components/dataviews-filters/toggle.js.map +1 -1
- package/build/components/dataviews-filters/use-filters.js +2 -0
- package/build/components/dataviews-filters/use-filters.js.map +1 -1
- package/build/components/dataviews-filters/utils.js +4 -2
- package/build/components/dataviews-filters/utils.js.map +1 -1
- package/build/components/dataviews-footer/index.js +4 -2
- package/build/components/dataviews-footer/index.js.map +1 -1
- package/build/components/dataviews-item-actions/index.js +23 -4
- package/build/components/dataviews-item-actions/index.js.map +2 -2
- package/build/components/dataviews-layout/index.js +3 -1
- package/build/components/dataviews-layout/index.js.map +1 -1
- package/build/components/dataviews-pagination/index.js +3 -1
- package/build/components/dataviews-pagination/index.js.map +1 -1
- package/build/components/dataviews-picker/footer.js +4 -2
- package/build/components/dataviews-picker/footer.js.map +1 -1
- package/build/components/dataviews-picker/index.js +8 -6
- package/build/components/dataviews-picker/index.js.map +1 -1
- package/build/components/dataviews-search/index.js +4 -2
- package/build/components/dataviews-search/index.js.map +1 -1
- package/build/components/dataviews-selection-checkbox/index.js +3 -1
- package/build/components/dataviews-selection-checkbox/index.js.map +1 -1
- package/build/components/dataviews-view-config/index.js +17 -400
- package/build/components/dataviews-view-config/index.js.map +3 -3
- package/build/components/dataviews-view-config/infinite-scroll-toggle.js +3 -1
- package/build/components/dataviews-view-config/infinite-scroll-toggle.js.map +1 -1
- package/build/components/dataviews-view-config/properties-section.js +177 -0
- package/build/components/dataviews-view-config/properties-section.js.map +7 -0
- package/build/constants.js +39 -34
- package/build/constants.js.map +2 -2
- package/build/dataform-controls/array.js +4 -2
- package/build/dataform-controls/array.js.map +1 -1
- package/build/dataform-controls/checkbox.js +4 -2
- package/build/dataform-controls/checkbox.js.map +1 -1
- package/build/dataform-controls/color.js +5 -3
- package/build/dataform-controls/color.js.map +1 -1
- package/build/dataform-controls/date.js +8 -6
- package/build/dataform-controls/date.js.map +1 -1
- package/build/dataform-controls/datetime.js +11 -15
- package/build/dataform-controls/datetime.js.map +3 -3
- package/build/dataform-controls/email.js +3 -1
- package/build/dataform-controls/email.js.map +1 -1
- package/build/dataform-controls/index.js +4 -2
- package/build/dataform-controls/index.js.map +1 -1
- package/build/dataform-controls/integer.js +3 -1
- package/build/dataform-controls/integer.js.map +1 -1
- package/build/dataform-controls/number.js +3 -1
- package/build/dataform-controls/number.js.map +1 -1
- package/build/dataform-controls/password.js +6 -5
- package/build/dataform-controls/password.js.map +3 -3
- package/build/dataform-controls/radio.js +4 -2
- package/build/dataform-controls/radio.js.map +1 -1
- package/build/dataform-controls/select.js +4 -2
- package/build/dataform-controls/select.js.map +1 -1
- package/build/dataform-controls/telephone.js +3 -1
- package/build/dataform-controls/telephone.js.map +1 -1
- package/build/dataform-controls/text.js +3 -1
- package/build/dataform-controls/text.js.map +1 -1
- package/build/dataform-controls/textarea.js +4 -2
- package/build/dataform-controls/textarea.js.map +1 -1
- package/build/dataform-controls/toggle-group.js +4 -2
- package/build/dataform-controls/toggle-group.js.map +1 -1
- package/build/dataform-controls/toggle.js +4 -2
- package/build/dataform-controls/toggle.js.map +1 -1
- package/build/dataform-controls/url.js +3 -1
- package/build/dataform-controls/url.js.map +1 -1
- package/build/dataform-controls/utils/get-custom-validity.js +2 -0
- package/build/dataform-controls/utils/get-custom-validity.js.map +1 -1
- package/build/dataform-controls/utils/relative-date-control.js +4 -2
- package/build/dataform-controls/utils/relative-date-control.js.map +1 -1
- package/build/dataform-controls/utils/validated-input.js +4 -2
- package/build/dataform-controls/utils/validated-input.js.map +1 -1
- package/build/dataform-controls/utils/validated-number.js +4 -2
- package/build/dataform-controls/utils/validated-number.js.map +1 -1
- package/build/dataform-layouts/card/index.js +91 -42
- package/build/dataform-layouts/card/index.js.map +3 -3
- package/build/dataform-layouts/data-form-layout.js +8 -14
- package/build/dataform-layouts/data-form-layout.js.map +3 -3
- package/build/dataform-layouts/details/index.js +78 -0
- package/build/dataform-layouts/details/index.js.map +7 -0
- package/build/dataform-layouts/get-summary-fields.js +3 -1
- package/build/dataform-layouts/get-summary-fields.js.map +1 -1
- package/build/dataform-layouts/index.js +9 -2
- package/build/dataform-layouts/index.js.map +3 -3
- package/build/dataform-layouts/{normalize-form-fields.js → normalize-form.js} +48 -24
- package/build/dataform-layouts/normalize-form.js.map +7 -0
- package/build/dataform-layouts/panel/dropdown.js +9 -8
- package/build/dataform-layouts/panel/dropdown.js.map +2 -2
- package/build/dataform-layouts/panel/index.js +10 -14
- package/build/dataform-layouts/panel/index.js.map +2 -2
- package/build/dataform-layouts/panel/modal.js +9 -8
- package/build/dataform-layouts/panel/modal.js.map +2 -2
- package/build/dataform-layouts/panel/summary-button.js +3 -1
- package/build/dataform-layouts/panel/summary-button.js.map +1 -1
- package/build/dataform-layouts/regular/index.js +8 -10
- package/build/dataform-layouts/regular/index.js.map +2 -2
- package/build/dataform-layouts/row/index.js +10 -33
- package/build/dataform-layouts/row/index.js.map +3 -3
- package/build/dataviews-layouts/grid/index.js +4 -2
- package/build/dataviews-layouts/grid/index.js.map +1 -1
- package/build/dataviews-layouts/grid/preview-size-picker.js +4 -2
- package/build/dataviews-layouts/grid/preview-size-picker.js.map +1 -1
- package/build/dataviews-layouts/index.js +12 -1
- package/build/dataviews-layouts/index.js.map +3 -3
- package/build/dataviews-layouts/list/index.js +4 -2
- package/build/dataviews-layouts/list/index.js.map +1 -1
- package/build/dataviews-layouts/picker-grid/index.js +4 -2
- package/build/dataviews-layouts/picker-grid/index.js.map +1 -1
- package/build/dataviews-layouts/picker-table/index.js +422 -0
- package/build/dataviews-layouts/picker-table/index.js.map +7 -0
- package/build/dataviews-layouts/table/column-header-menu.js +6 -4
- package/build/dataviews-layouts/table/column-header-menu.js.map +2 -2
- package/build/dataviews-layouts/table/column-primary.js +4 -7
- package/build/dataviews-layouts/table/column-primary.js.map +2 -2
- package/build/dataviews-layouts/table/density-picker.js +3 -1
- package/build/dataviews-layouts/table/density-picker.js.map +1 -1
- package/build/dataviews-layouts/table/index.js +36 -2
- package/build/dataviews-layouts/table/index.js.map +2 -2
- package/build/dataviews-layouts/table/use-is-horizontal-scroll-end.js +3 -1
- package/build/dataviews-layouts/table/use-is-horizontal-scroll-end.js.map +1 -1
- package/build/dataviews-layouts/utils/get-data-by-group.js +2 -0
- package/build/dataviews-layouts/utils/get-data-by-group.js.map +1 -1
- package/build/dataviews-layouts/utils/grid-items.js +4 -2
- package/build/dataviews-layouts/utils/grid-items.js.map +1 -1
- package/build/dataviews-layouts/utils/item-click-wrapper.js +3 -1
- package/build/dataviews-layouts/utils/item-click-wrapper.js.map +1 -1
- package/build/dataviews-layouts/utils/preview-size-picker.js +4 -2
- package/build/dataviews-layouts/utils/preview-size-picker.js.map +1 -1
- package/build/field-types/array.js +3 -1
- package/build/field-types/array.js.map +1 -1
- package/build/field-types/boolean.js +3 -1
- package/build/field-types/boolean.js.map +1 -1
- package/build/field-types/color.js +3 -1
- package/build/field-types/color.js.map +1 -1
- package/build/field-types/date.js +4 -2
- package/build/field-types/date.js.map +1 -1
- package/build/field-types/datetime.js +17 -2
- package/build/field-types/datetime.js.map +3 -3
- package/build/field-types/email.js +4 -2
- package/build/field-types/email.js.map +1 -1
- package/build/field-types/index.js +3 -1
- package/build/field-types/index.js.map +1 -1
- package/build/field-types/integer.js +3 -1
- package/build/field-types/integer.js.map +1 -1
- package/build/field-types/media.js +2 -0
- package/build/field-types/media.js.map +1 -1
- package/build/field-types/number.js +3 -1
- package/build/field-types/number.js.map +1 -1
- package/build/field-types/password.js +3 -1
- package/build/field-types/password.js.map +1 -1
- package/build/field-types/telephone.js +3 -1
- package/build/field-types/telephone.js.map +1 -1
- package/build/field-types/text.js +3 -1
- package/build/field-types/text.js.map +1 -1
- package/build/field-types/url.js +3 -1
- package/build/field-types/url.js.map +1 -1
- package/build/{dataform-layouts/is-combined-field.js → field-types/utils/parse-date-time.js} +15 -11
- package/build/field-types/utils/parse-date-time.js.map +7 -0
- package/build/field-types/utils/render-from-elements.js +2 -0
- package/build/field-types/utils/render-from-elements.js.map +1 -1
- package/build/hooks/index.js +2 -0
- package/build/hooks/index.js.map +1 -1
- package/build/hooks/use-elements.js +3 -1
- package/build/hooks/use-elements.js.map +1 -1
- package/build/hooks/use-form-validity.js +425 -321
- package/build/hooks/use-form-validity.js.map +3 -3
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/lock-unlock.js +3 -1
- package/build/lock-unlock.js.map +1 -1
- package/build/types/dataform.js +2 -0
- package/build/types/dataform.js.map +2 -2
- package/build/types/dataviews.js +2 -0
- package/build/types/dataviews.js.map +2 -2
- package/build/types/field-api.js +2 -0
- package/build/types/field-api.js.map +1 -1
- package/build/types/index.js +2 -0
- package/build/types/index.js.map +1 -1
- package/build/types/private.js +2 -0
- package/build/types/private.js.map +1 -1
- package/build/utils/filter-sort-and-paginate.js +3 -1
- package/build/utils/filter-sort-and-paginate.js.map +1 -1
- package/build/utils/has-elements.js +2 -0
- package/build/utils/has-elements.js.map +1 -1
- package/build/utils/normalize-fields.js +4 -2
- package/build/utils/normalize-fields.js.map +1 -1
- package/build-module/components/dataform/index.js +5 -2
- package/build-module/components/dataform/index.js.map +2 -2
- package/build-module/components/dataform-context/index.js +3 -2
- package/build-module/components/dataform-context/index.js.map +1 -1
- package/build-module/components/dataviews/index.js +7 -6
- package/build-module/components/dataviews/index.js.map +1 -1
- package/build-module/components/dataviews-bulk-actions/index.js +3 -2
- package/build-module/components/dataviews-bulk-actions/index.js.map +1 -1
- package/build-module/components/dataviews-context/index.js +2 -1
- package/build-module/components/dataviews-context/index.js.map +1 -1
- package/build-module/components/dataviews-filters/add-filter.js +3 -2
- package/build-module/components/dataviews-filters/add-filter.js.map +1 -1
- package/build-module/components/dataviews-filters/filter.js +19 -5
- package/build-module/components/dataviews-filters/filter.js.map +2 -2
- package/build-module/components/dataviews-filters/filters-toggled.js +2 -1
- package/build-module/components/dataviews-filters/filters-toggled.js.map +1 -1
- package/build-module/components/dataviews-filters/filters.js +2 -1
- package/build-module/components/dataviews-filters/filters.js.map +1 -1
- package/build-module/components/dataviews-filters/index.js +1 -0
- package/build-module/components/dataviews-filters/index.js.map +1 -1
- package/build-module/components/dataviews-filters/input-widget.js +2 -1
- package/build-module/components/dataviews-filters/input-widget.js.map +1 -1
- package/build-module/components/dataviews-filters/reset-filters.js +2 -1
- package/build-module/components/dataviews-filters/reset-filters.js.map +1 -1
- package/build-module/components/dataviews-filters/search-widget.js +7 -6
- package/build-module/components/dataviews-filters/search-widget.js.map +2 -2
- package/build-module/components/dataviews-filters/toggle.js +2 -1
- package/build-module/components/dataviews-filters/toggle.js.map +1 -1
- package/build-module/components/dataviews-filters/use-filters.js +1 -0
- package/build-module/components/dataviews-filters/use-filters.js.map +1 -1
- package/build-module/components/dataviews-filters/utils.js +3 -2
- package/build-module/components/dataviews-filters/utils.js.map +1 -1
- package/build-module/components/dataviews-footer/index.js +3 -2
- package/build-module/components/dataviews-footer/index.js.map +1 -1
- package/build-module/components/dataviews-item-actions/index.js +22 -4
- package/build-module/components/dataviews-item-actions/index.js.map +2 -2
- package/build-module/components/dataviews-layout/index.js +2 -1
- package/build-module/components/dataviews-layout/index.js.map +1 -1
- package/build-module/components/dataviews-pagination/index.js +2 -1
- package/build-module/components/dataviews-pagination/index.js.map +1 -1
- package/build-module/components/dataviews-picker/footer.js +3 -2
- package/build-module/components/dataviews-picker/footer.js.map +1 -1
- package/build-module/components/dataviews-picker/index.js +7 -6
- package/build-module/components/dataviews-picker/index.js.map +1 -1
- package/build-module/components/dataviews-search/index.js +3 -2
- package/build-module/components/dataviews-search/index.js.map +1 -1
- package/build-module/components/dataviews-selection-checkbox/index.js +2 -1
- package/build-module/components/dataviews-selection-checkbox/index.js.map +1 -1
- package/build-module/components/dataviews-view-config/index.js +20 -416
- package/build-module/components/dataviews-view-config/index.js.map +2 -2
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js +2 -1
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js.map +1 -1
- package/build-module/components/dataviews-view-config/properties-section.js +149 -0
- package/build-module/components/dataviews-view-config/properties-section.js.map +7 -0
- package/build-module/constants.js +37 -34
- package/build-module/constants.js.map +2 -2
- package/build-module/dataform-controls/array.js +3 -2
- package/build-module/dataform-controls/array.js.map +1 -1
- package/build-module/dataform-controls/checkbox.js +3 -2
- package/build-module/dataform-controls/checkbox.js.map +1 -1
- package/build-module/dataform-controls/color.js +4 -3
- package/build-module/dataform-controls/color.js.map +1 -1
- package/build-module/dataform-controls/date.js +7 -6
- package/build-module/dataform-controls/date.js.map +1 -1
- package/build-module/dataform-controls/datetime.js +7 -12
- package/build-module/dataform-controls/datetime.js.map +2 -2
- package/build-module/dataform-controls/email.js +2 -1
- package/build-module/dataform-controls/email.js.map +1 -1
- package/build-module/dataform-controls/index.js +3 -2
- package/build-module/dataform-controls/index.js.map +1 -1
- package/build-module/dataform-controls/integer.js +2 -1
- package/build-module/dataform-controls/integer.js.map +1 -1
- package/build-module/dataform-controls/number.js +2 -1
- package/build-module/dataform-controls/number.js.map +1 -1
- package/build-module/dataform-controls/password.js +9 -6
- package/build-module/dataform-controls/password.js.map +2 -2
- package/build-module/dataform-controls/radio.js +3 -2
- package/build-module/dataform-controls/radio.js.map +1 -1
- package/build-module/dataform-controls/select.js +3 -2
- package/build-module/dataform-controls/select.js.map +1 -1
- package/build-module/dataform-controls/telephone.js +2 -1
- package/build-module/dataform-controls/telephone.js.map +1 -1
- package/build-module/dataform-controls/text.js +2 -1
- package/build-module/dataform-controls/text.js.map +1 -1
- package/build-module/dataform-controls/textarea.js +3 -2
- package/build-module/dataform-controls/textarea.js.map +1 -1
- package/build-module/dataform-controls/toggle-group.js +3 -2
- package/build-module/dataform-controls/toggle-group.js.map +1 -1
- package/build-module/dataform-controls/toggle.js +3 -2
- package/build-module/dataform-controls/toggle.js.map +1 -1
- package/build-module/dataform-controls/url.js +2 -1
- package/build-module/dataform-controls/url.js.map +1 -1
- package/build-module/dataform-controls/utils/get-custom-validity.js +1 -0
- package/build-module/dataform-controls/utils/get-custom-validity.js.map +1 -1
- package/build-module/dataform-controls/utils/relative-date-control.js +3 -2
- package/build-module/dataform-controls/utils/relative-date-control.js.map +1 -1
- package/build-module/dataform-controls/utils/validated-input.js +3 -2
- package/build-module/dataform-controls/utils/validated-input.js.map +1 -1
- package/build-module/dataform-controls/utils/validated-number.js +3 -2
- package/build-module/dataform-controls/utils/validated-number.js.map +1 -1
- package/build-module/dataform-layouts/card/index.js +95 -42
- package/build-module/dataform-layouts/card/index.js.map +3 -3
- package/build-module/dataform-layouts/data-form-layout.js +8 -15
- package/build-module/dataform-layouts/data-form-layout.js.map +2 -2
- package/build-module/dataform-layouts/details/index.js +47 -0
- package/build-module/dataform-layouts/details/index.js.map +7 -0
- package/build-module/dataform-layouts/get-summary-fields.js +2 -1
- package/build-module/dataform-layouts/get-summary-fields.js.map +1 -1
- package/build-module/dataform-layouts/index.js +8 -2
- package/build-module/dataform-layouts/index.js.map +2 -2
- package/build-module/dataform-layouts/{normalize-form-fields.js → normalize-form.js} +43 -19
- package/build-module/dataform-layouts/normalize-form.js.map +7 -0
- package/build-module/dataform-layouts/panel/dropdown.js +7 -7
- package/build-module/dataform-layouts/panel/dropdown.js.map +2 -2
- package/build-module/dataform-layouts/panel/index.js +9 -14
- package/build-module/dataform-layouts/panel/index.js.map +2 -2
- package/build-module/dataform-layouts/panel/modal.js +7 -7
- package/build-module/dataform-layouts/panel/modal.js.map +2 -2
- package/build-module/dataform-layouts/panel/summary-button.js +2 -1
- package/build-module/dataform-layouts/panel/summary-button.js.map +1 -1
- package/build-module/dataform-layouts/regular/index.js +6 -9
- package/build-module/dataform-layouts/regular/index.js.map +2 -2
- package/build-module/dataform-layouts/row/index.js +9 -23
- package/build-module/dataform-layouts/row/index.js.map +2 -2
- package/build-module/dataviews-layouts/grid/index.js +3 -2
- package/build-module/dataviews-layouts/grid/index.js.map +1 -1
- package/build-module/dataviews-layouts/grid/preview-size-picker.js +3 -2
- package/build-module/dataviews-layouts/grid/preview-size-picker.js.map +1 -1
- package/build-module/dataviews-layouts/index.js +13 -2
- package/build-module/dataviews-layouts/index.js.map +2 -2
- package/build-module/dataviews-layouts/list/index.js +3 -2
- package/build-module/dataviews-layouts/list/index.js.map +1 -1
- package/build-module/dataviews-layouts/picker-grid/index.js +3 -2
- package/build-module/dataviews-layouts/picker-grid/index.js.map +1 -1
- package/build-module/dataviews-layouts/picker-table/index.js +397 -0
- package/build-module/dataviews-layouts/picker-table/index.js.map +7 -0
- package/build-module/dataviews-layouts/table/column-header-menu.js +5 -4
- package/build-module/dataviews-layouts/table/column-header-menu.js.map +2 -2
- package/build-module/dataviews-layouts/table/column-primary.js +3 -7
- package/build-module/dataviews-layouts/table/column-primary.js.map +2 -2
- package/build-module/dataviews-layouts/table/density-picker.js +2 -1
- package/build-module/dataviews-layouts/table/density-picker.js.map +1 -1
- package/build-module/dataviews-layouts/table/index.js +36 -3
- package/build-module/dataviews-layouts/table/index.js.map +2 -2
- package/build-module/dataviews-layouts/table/use-is-horizontal-scroll-end.js +2 -1
- package/build-module/dataviews-layouts/table/use-is-horizontal-scroll-end.js.map +1 -1
- package/build-module/dataviews-layouts/utils/get-data-by-group.js +1 -0
- package/build-module/dataviews-layouts/utils/get-data-by-group.js.map +1 -1
- package/build-module/dataviews-layouts/utils/grid-items.js +3 -2
- package/build-module/dataviews-layouts/utils/grid-items.js.map +1 -1
- package/build-module/dataviews-layouts/utils/item-click-wrapper.js +2 -1
- package/build-module/dataviews-layouts/utils/item-click-wrapper.js.map +1 -1
- package/build-module/dataviews-layouts/utils/preview-size-picker.js +3 -2
- package/build-module/dataviews-layouts/utils/preview-size-picker.js.map +1 -1
- package/build-module/field-types/array.js +2 -1
- package/build-module/field-types/array.js.map +1 -1
- package/build-module/field-types/boolean.js +2 -1
- package/build-module/field-types/boolean.js.map +1 -1
- package/build-module/field-types/color.js +2 -1
- package/build-module/field-types/color.js.map +1 -1
- package/build-module/field-types/date.js +3 -2
- package/build-module/field-types/date.js.map +1 -1
- package/build-module/field-types/datetime.js +16 -2
- package/build-module/field-types/datetime.js.map +2 -2
- package/build-module/field-types/email.js +3 -2
- package/build-module/field-types/email.js.map +1 -1
- package/build-module/field-types/index.js +2 -1
- package/build-module/field-types/index.js.map +1 -1
- package/build-module/field-types/integer.js +2 -1
- package/build-module/field-types/integer.js.map +1 -1
- package/build-module/field-types/media.js +1 -0
- package/build-module/field-types/media.js.map +1 -1
- package/build-module/field-types/number.js +2 -1
- package/build-module/field-types/number.js.map +1 -1
- package/build-module/field-types/password.js +2 -1
- package/build-module/field-types/password.js.map +1 -1
- package/build-module/field-types/telephone.js +2 -1
- package/build-module/field-types/telephone.js.map +1 -1
- package/build-module/field-types/text.js +2 -1
- package/build-module/field-types/text.js.map +1 -1
- package/build-module/field-types/url.js +2 -1
- package/build-module/field-types/url.js.map +1 -1
- package/build-module/field-types/utils/parse-date-time.js +14 -0
- package/build-module/field-types/utils/parse-date-time.js.map +7 -0
- package/build-module/field-types/utils/render-from-elements.js +1 -0
- package/build-module/field-types/utils/render-from-elements.js.map +1 -1
- package/build-module/hooks/index.js +1 -0
- package/build-module/hooks/index.js.map +1 -1
- package/build-module/hooks/use-elements.js +2 -1
- package/build-module/hooks/use-elements.js.map +1 -1
- package/build-module/hooks/use-form-validity.js +424 -321
- package/build-module/hooks/use-form-validity.js.map +3 -3
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/build-module/lock-unlock.js +2 -1
- package/build-module/lock-unlock.js.map +1 -1
- package/build-module/utils/filter-sort-and-paginate.js +2 -1
- package/build-module/utils/filter-sort-and-paginate.js.map +1 -1
- package/build-module/utils/has-elements.js +1 -0
- package/build-module/utils/has-elements.js.map +1 -1
- package/build-module/utils/normalize-fields.js +3 -2
- package/build-module/utils/normalize-fields.js.map +1 -1
- package/build-style/style-rtl.css +41 -51
- package/build-style/style.css +41 -51
- package/build-types/components/dataform/index.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/filter.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/utils.d.ts.map +1 -1
- package/build-types/components/dataviews-item-actions/index.d.ts.map +1 -1
- package/build-types/components/dataviews-view-config/index.d.ts.map +1 -1
- package/build-types/components/dataviews-view-config/properties-section.d.ts +4 -0
- package/build-types/components/dataviews-view-config/properties-section.d.ts.map +1 -0
- package/build-types/constants.d.ts +1 -0
- package/build-types/constants.d.ts.map +1 -1
- package/build-types/dataform-controls/datetime.d.ts.map +1 -1
- package/build-types/dataform-controls/password.d.ts.map +1 -1
- package/build-types/dataform-layouts/card/index.d.ts +3 -3
- package/build-types/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/data-form-layout.d.ts +4 -4
- package/build-types/dataform-layouts/data-form-layout.d.ts.map +1 -1
- package/build-types/dataform-layouts/details/index.d.ts +6 -0
- package/build-types/dataform-layouts/details/index.d.ts.map +1 -0
- package/build-types/dataform-layouts/get-summary-fields.d.ts.map +1 -1
- package/build-types/dataform-layouts/index.d.ts +7 -2
- package/build-types/dataform-layouts/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/normalize-form.d.ts +8 -0
- package/build-types/dataform-layouts/normalize-form.d.ts.map +1 -0
- package/build-types/dataform-layouts/panel/dropdown.d.ts +2 -2
- package/build-types/dataform-layouts/panel/dropdown.d.ts.map +1 -1
- package/build-types/dataform-layouts/panel/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/panel/modal.d.ts +2 -2
- package/build-types/dataform-layouts/panel/modal.d.ts.map +1 -1
- package/build-types/dataform-layouts/regular/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/row/index.d.ts.map +1 -1
- package/build-types/dataviews-layouts/index.d.ts +8 -0
- package/build-types/dataviews-layouts/index.d.ts.map +1 -1
- package/build-types/dataviews-layouts/picker-table/index.d.ts +4 -0
- package/build-types/dataviews-layouts/picker-table/index.d.ts.map +1 -0
- package/build-types/dataviews-layouts/table/column-header-menu.d.ts +3 -3
- package/build-types/dataviews-layouts/table/column-header-menu.d.ts.map +1 -1
- package/build-types/dataviews-layouts/table/column-primary.d.ts.map +1 -1
- package/build-types/dataviews-layouts/table/index.d.ts.map +1 -1
- package/build-types/field-types/datetime.d.ts +1 -1
- package/build-types/field-types/datetime.d.ts.map +1 -1
- package/build-types/field-types/utils/parse-date-time.d.ts +2 -0
- package/build-types/field-types/utils/parse-date-time.d.ts.map +1 -0
- package/build-types/hooks/use-form-validity.d.ts.map +1 -1
- package/build-types/stories/dataform.story.d.ts +13 -11
- package/build-types/stories/dataform.story.d.ts.map +1 -1
- package/build-types/stories/dataviews-picker.story.d.ts +33 -0
- package/build-types/stories/dataviews-picker.story.d.ts.map +1 -1
- package/build-types/stories/dataviews.story.d.ts +7 -1
- package/build-types/stories/dataviews.story.d.ts.map +1 -1
- package/build-types/test/normalize-form.d.ts +2 -0
- package/build-types/test/normalize-form.d.ts.map +1 -0
- package/build-types/types/dataform.d.ts +27 -9
- package/build-types/types/dataform.d.ts.map +1 -1
- package/build-types/types/dataviews.d.ts +23 -2
- package/build-types/types/dataviews.d.ts.map +1 -1
- package/build-wp/index.js +2258 -1817
- package/package.json +15 -15
- package/src/components/dataform/index.tsx +3 -1
- package/src/components/dataviews/style.scss +1 -1
- package/src/components/dataviews-bulk-actions/style.scss +1 -1
- package/src/components/dataviews-filters/filter.tsx +16 -1
- package/src/components/dataviews-filters/style.scss +1 -1
- package/src/components/dataviews-item-actions/index.tsx +37 -14
- package/src/components/dataviews-pagination/style.scss +2 -2
- package/src/components/dataviews-view-config/index.tsx +8 -504
- package/src/components/dataviews-view-config/properties-section.tsx +201 -0
- package/src/components/dataviews-view-config/style.scss +2 -39
- package/src/constants.ts +1 -0
- package/src/dataform-controls/datetime.tsx +3 -10
- package/src/dataform-controls/password.tsx +16 -12
- package/src/dataform-layouts/card/index.tsx +89 -33
- package/src/dataform-layouts/data-form-layout.tsx +12 -23
- package/src/dataform-layouts/details/index.tsx +71 -0
- package/src/dataform-layouts/details/style.scss +5 -0
- package/src/dataform-layouts/index.tsx +10 -3
- package/src/dataform-layouts/{normalize-form-fields.ts → normalize-form.ts} +50 -23
- package/src/dataform-layouts/panel/dropdown.tsx +10 -13
- package/src/dataform-layouts/panel/index.tsx +9 -24
- package/src/dataform-layouts/panel/modal.tsx +15 -15
- package/src/dataform-layouts/regular/index.tsx +7 -12
- package/src/dataform-layouts/row/index.tsx +13 -26
- package/src/dataviews-layouts/index.ts +10 -0
- package/src/dataviews-layouts/picker-table/index.tsx +487 -0
- package/src/dataviews-layouts/picker-table/style.scss +45 -0
- package/src/dataviews-layouts/table/column-header-menu.tsx +3 -2
- package/src/dataviews-layouts/table/column-primary.tsx +4 -7
- package/src/dataviews-layouts/table/index.tsx +37 -2
- package/src/dataviews-layouts/table/style.scss +2 -2
- package/src/field-types/datetime.tsx +16 -5
- package/src/field-types/utils/parse-date-time.ts +17 -0
- package/src/hooks/use-form-validity.ts +572 -422
- package/src/stories/dataform.story.tsx +604 -456
- package/src/stories/dataviews-picker.story.tsx +166 -38
- package/src/stories/dataviews.story.tsx +10 -2
- package/src/stories/field-types.story.tsx +7 -7
- package/src/style.scss +2 -0
- package/src/test/normalize-form.ts +568 -0
- package/src/test/use-form-validity.ts +318 -33
- package/src/types/dataform.ts +36 -11
- package/src/types/dataviews.ts +36 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/dataform-layouts/is-combined-field.js.map +0 -7
- package/build/dataform-layouts/normalize-form-fields.js.map +0 -7
- package/build-module/dataform-layouts/is-combined-field.js +0 -7
- package/build-module/dataform-layouts/is-combined-field.js.map +0 -7
- package/build-module/dataform-layouts/normalize-form-fields.js.map +0 -7
- package/build-types/dataform-layouts/is-combined-field.d.ts +0 -6
- package/build-types/dataform-layouts/is-combined-field.d.ts.map +0 -1
- package/build-types/dataform-layouts/normalize-form-fields.d.ts +0 -19
- package/build-types/dataform-layouts/normalize-form-fields.d.ts.map +0 -1
- package/build-types/test/normalize-form-fields.d.ts +0 -2
- package/build-types/test/normalize-form-fields.d.ts.map +0 -1
- package/src/dataform-layouts/is-combined-field.ts +0 -10
- package/src/test/normalize-form-fields.ts +0 -317
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataviews-layouts/list/index.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\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';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport DataViewsContext from '../../components/dataviews-context';\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 usedActions = eligibleActions?.length > 0 && (\n\t\t<HStack spacing={ 3 } className=\"dataviews-view-list__item-actions\">\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</HStack>\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<HStack className=\"dataviews-view-list__item-wrapper\" spacing={ 0 }>\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<HStack spacing={ 3 } justify=\"start\" alignment=\"flex-start\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 1 }\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<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-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</HStack>\n\t\t\t\t\t\t{ showDescription && descriptionField?.render && (\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\tas=\"span\"\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>\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</VStack>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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\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\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\tdocument.getElementById( targetCompositeItemId )?.focus();\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 \u2014 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\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( field ) => field.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\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<VStack\n\t\t\t\t\tspacing={ 4 }\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\tgroupName\n\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</VStack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\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\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\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>\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{ hasData && 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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["componentsPrivateApis", "DataViewsContext", "HStack", "clsx", "VStack", "getDataByGroup"]
|
|
7
7
|
}
|
|
@@ -26,12 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// packages/dataviews/src/dataviews-layouts/picker-grid/index.tsx
|
|
29
31
|
var picker_grid_exports = {};
|
|
30
32
|
__export(picker_grid_exports, {
|
|
31
33
|
default: () => picker_grid_default
|
|
32
34
|
});
|
|
33
35
|
module.exports = __toCommonJS(picker_grid_exports);
|
|
34
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
36
|
var import_clsx = __toESM(require("clsx"));
|
|
36
37
|
var import_components = require("@wordpress/components");
|
|
37
38
|
var import_i18n = require("@wordpress/i18n");
|
|
@@ -43,7 +44,8 @@ var import_dataviews_context = __toESM(require("../../components/dataviews-conte
|
|
|
43
44
|
var import_footer = require("../../components/dataviews-picker/footer");
|
|
44
45
|
var import_grid_items = require("../utils/grid-items");
|
|
45
46
|
var import_get_data_by_group = __toESM(require("../utils/get-data-by-group"));
|
|
46
|
-
|
|
47
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
|
+
var { Badge } = (0, import_lock_unlock.unlock)(import_components.privateApis);
|
|
47
49
|
function GridItem({
|
|
48
50
|
view,
|
|
49
51
|
multiselect,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataviews-layouts/picker-grid/index.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n\tComposite,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport DataViewsContext from '../../components/dataviews-context';\nimport { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';\nimport type {\n\tNormalizedField,\n\tViewPickerGrid as ViewPickerGridType,\n\tViewPickerGridProps,\n} from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface GridItemProps< Item > {\n\tview: ViewPickerGridType;\n\tmultiselect?: boolean;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nfunction GridItem< Item >( {\n\tview,\n\tmultiselect,\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\tconfig,\n\tposinset,\n\tsetsize,\n}: GridItemProps< Item > ) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : null;\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\treturn (\n\t\t<Composite.Item\n\t\t\taria-label={\n\t\t\t\ttitleField\n\t\t\t\t\t? titleField.getValue( { item } ) || __( '(no title)' )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tkey={ id }\n\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t<VStack spacing={ 0 } children={ children } { ...props } />\n\t\t\t) }\n\t\t\trole=\"option\"\n\t\t\taria-posinset={ posinset }\n\t\t\taria-setsize={ setsize }\n\t\t\tclassName={ clsx( 'dataviews-view-picker-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\taria-selected={ isSelected }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tconst newSelection = multiselect\n\t\t\t\t\t\t? [ ...selection, id ]\n\t\t\t\t\t\t: [ id ];\n\t\t\t\t\tonChangeSelection( newSelection );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<div className=\"dataviews-view-picker-grid__media\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ false }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews-view-picker-grid__title-actions\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-picker-grid__title-field dataviews-title-field\">\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</div>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__badge-fields\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\twrap\n\t\t\t\t\t\talignment=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__fields\"\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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\t\t<FlexItem className=\"dataviews-view-picker-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Composite.Item>\n\t);\n}\n\nfunction GridGroup< Item >( {\n\tgroupName,\n\tgroupField,\n\tchildren,\n}: {\n\tgroupName: string;\n\tgroupField: NormalizedField< Item >;\n\tchildren: ReactNode;\n} ) {\n\tconst headerId = useInstanceId(\n\t\tGridGroup,\n\t\t'dataviews-view-picker-grid-group__header'\n\t);\n\treturn (\n\t\t<VStack\n\t\t\tkey={ groupName }\n\t\t\tspacing={ 2 }\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headerId }\n\t\t>\n\t\t\t<h3\n\t\t\t\tclassName=\"dataviews-view-picker-grid-group__header\"\n\t\t\t\tid={ headerId }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\tgroupField.label,\n\t\t\t\t\tgroupName\n\t\t\t\t) }\n\t\t\t</h3>\n\t\t\t{ children }\n\t\t</VStack>\n\t);\n}\n\nfunction ViewPickerGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewPickerGridProps< Item > ) {\n\tconst { resizeObserverRef, paginationInfo, itemListLabel } =\n\t\tuseContext( DataViewsContext );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\tconst usedPreviewSize = view.layout?.previewSize;\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( f ) => f.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\n\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\n\tconst currentPage = view?.page ?? 1;\n\tconst perPage = view?.perPage ?? 0;\n\tconst setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render multiple groups.\n\t\t\t\thasData && groupField && dataByGroup && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t) }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\t\tchildren={ children }\n\t\t\t\t\t\t\t\t{ ...props }\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\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t\t<GridGroup\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns:\n\t\t\t\t\t\t\t\t\t\t\t\tusedPreviewSize &&\n\t\t\t\t\t\t\t\t\t\t\t\t`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\t\t\tconst posInSet =\n\t\t\t\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage +\n\t\t\t\t\t\t\t\t\t\t\t\tdata.indexOf( item ) +\n\t\t\t\t\t\t\t\t\t\t\t\t1;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmultiselect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMultiselect\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tposinset={ posInSet }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetsize={ setSize }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\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</GridItems>\n\t\t\t\t\t\t\t\t</GridGroup>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t{\n\t\t\t\t// Render a single grid with all data.\n\t\t\t\thasData && ! dataByGroup && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\t\t\tlet posinset = isInfiniteScroll\n\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif ( ! isInfiniteScroll ) {\n\t\t\t\t\t\t\t\t// When infinite scroll isn't active, take pagination into account\n\t\t\t\t\t\t\t\t// when calculating the posinset.\n\t\t\t\t\t\t\t\tposinset =\n\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage + index + 1;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tmultiselect={ isMultiselect }\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tposinset={ posinset }\n\t\t\t\t\t\t\t\t\tsetsize={ setSize }\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</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render empty state.\n\t\t\t\t! hasData && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isLoading ? (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{ hasData && 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\nexport default ViewPickerGrid;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["componentsPrivateApis", "VStack", "clsx", "DataViewsSelectionCheckbox", "HStack", "DataViewsContext", "getDataByGroup"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,422 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// packages/dataviews/src/dataviews-layouts/picker-table/index.tsx
|
|
31
|
+
var picker_table_exports = {};
|
|
32
|
+
__export(picker_table_exports, {
|
|
33
|
+
default: () => picker_table_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(picker_table_exports);
|
|
36
|
+
var import_clsx = __toESM(require("clsx"));
|
|
37
|
+
var import_i18n = require("@wordpress/i18n");
|
|
38
|
+
var import_components = require("@wordpress/components");
|
|
39
|
+
var import_element = require("@wordpress/element");
|
|
40
|
+
var import_dataviews_context = __toESM(require("../../components/dataviews-context"));
|
|
41
|
+
var import_dataviews_selection_checkbox = __toESM(require("../../components/dataviews-selection-checkbox"));
|
|
42
|
+
var import_footer = require("../../components/dataviews-picker/footer");
|
|
43
|
+
var import_dataviews_bulk_actions = require("../../components/dataviews-bulk-actions");
|
|
44
|
+
var import_constants = require("../../constants");
|
|
45
|
+
var import_column_header_menu = __toESM(require("../table/column-header-menu"));
|
|
46
|
+
var import_column_primary = __toESM(require("../table/column-primary"));
|
|
47
|
+
var import_get_data_by_group = __toESM(require("../utils/get-data-by-group"));
|
|
48
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
|
+
function TableColumnField({
|
|
50
|
+
item,
|
|
51
|
+
fields,
|
|
52
|
+
column,
|
|
53
|
+
align
|
|
54
|
+
}) {
|
|
55
|
+
const field = fields.find((f) => f.id === column);
|
|
56
|
+
if (!field) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
const className = (0, import_clsx.default)("dataviews-view-table__cell-content-wrapper", {
|
|
60
|
+
"dataviews-view-table__cell-align-end": align === "end",
|
|
61
|
+
"dataviews-view-table__cell-align-center": align === "center"
|
|
62
|
+
});
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(field.render, { item, field }) });
|
|
64
|
+
}
|
|
65
|
+
function TableRow({
|
|
66
|
+
item,
|
|
67
|
+
fields,
|
|
68
|
+
id,
|
|
69
|
+
view,
|
|
70
|
+
titleField,
|
|
71
|
+
mediaField,
|
|
72
|
+
descriptionField,
|
|
73
|
+
selection,
|
|
74
|
+
getItemId,
|
|
75
|
+
onChangeSelection,
|
|
76
|
+
multiselect,
|
|
77
|
+
posinset
|
|
78
|
+
}) {
|
|
79
|
+
const { paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
|
|
80
|
+
const isSelected = selection.includes(id);
|
|
81
|
+
const [isHovered, setIsHovered] = (0, import_element.useState)(false);
|
|
82
|
+
const {
|
|
83
|
+
showTitle = true,
|
|
84
|
+
showMedia = true,
|
|
85
|
+
showDescription = true,
|
|
86
|
+
infiniteScrollEnabled
|
|
87
|
+
} = view;
|
|
88
|
+
const handleMouseEnter = () => {
|
|
89
|
+
setIsHovered(true);
|
|
90
|
+
};
|
|
91
|
+
const handleMouseLeave = () => {
|
|
92
|
+
setIsHovered(false);
|
|
93
|
+
};
|
|
94
|
+
const columns = view.fields ?? [];
|
|
95
|
+
const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
|
|
96
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
97
|
+
import_components.Composite.Item,
|
|
98
|
+
{
|
|
99
|
+
render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
"tr",
|
|
101
|
+
{
|
|
102
|
+
className: (0, import_clsx.default)("dataviews-view-table__row", {
|
|
103
|
+
"is-selected": isSelected,
|
|
104
|
+
"is-hovered": isHovered
|
|
105
|
+
}),
|
|
106
|
+
onMouseEnter: handleMouseEnter,
|
|
107
|
+
onMouseLeave: handleMouseLeave,
|
|
108
|
+
children,
|
|
109
|
+
...props
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
"aria-selected": isSelected,
|
|
113
|
+
"aria-setsize": paginationInfo.totalItems || void 0,
|
|
114
|
+
"aria-posinset": posinset,
|
|
115
|
+
role: infiniteScrollEnabled ? "article" : "option",
|
|
116
|
+
onClick: () => {
|
|
117
|
+
if (isSelected) {
|
|
118
|
+
onChangeSelection(
|
|
119
|
+
selection.filter((itemId) => id !== itemId)
|
|
120
|
+
);
|
|
121
|
+
} else {
|
|
122
|
+
const newSelection = multiselect ? [...selection, id] : [id];
|
|
123
|
+
onChangeSelection(newSelection);
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
children: [
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
"td",
|
|
129
|
+
{
|
|
130
|
+
className: "dataviews-view-table__checkbox-column",
|
|
131
|
+
role: "presentation",
|
|
132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
|
+
import_dataviews_selection_checkbox.default,
|
|
134
|
+
{
|
|
135
|
+
item,
|
|
136
|
+
selection,
|
|
137
|
+
onChangeSelection,
|
|
138
|
+
getItemId,
|
|
139
|
+
titleField,
|
|
140
|
+
disabled: false,
|
|
141
|
+
"aria-hidden": true,
|
|
142
|
+
tabIndex: -1
|
|
143
|
+
}
|
|
144
|
+
) })
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
148
|
+
import_column_primary.default,
|
|
149
|
+
{
|
|
150
|
+
item,
|
|
151
|
+
titleField: showTitle ? titleField : void 0,
|
|
152
|
+
mediaField: showMedia ? mediaField : void 0,
|
|
153
|
+
descriptionField: showDescription ? descriptionField : void 0,
|
|
154
|
+
isItemClickable: () => false
|
|
155
|
+
}
|
|
156
|
+
) }),
|
|
157
|
+
columns.map((column) => {
|
|
158
|
+
const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
|
|
159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
160
|
+
"td",
|
|
161
|
+
{
|
|
162
|
+
style: {
|
|
163
|
+
width,
|
|
164
|
+
maxWidth,
|
|
165
|
+
minWidth
|
|
166
|
+
},
|
|
167
|
+
role: "presentation",
|
|
168
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
169
|
+
TableColumnField,
|
|
170
|
+
{
|
|
171
|
+
fields,
|
|
172
|
+
item,
|
|
173
|
+
column,
|
|
174
|
+
align
|
|
175
|
+
}
|
|
176
|
+
)
|
|
177
|
+
},
|
|
178
|
+
column
|
|
179
|
+
);
|
|
180
|
+
})
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
id
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
function ViewPickerTable({
|
|
187
|
+
actions,
|
|
188
|
+
data,
|
|
189
|
+
fields,
|
|
190
|
+
getItemId,
|
|
191
|
+
isLoading = false,
|
|
192
|
+
onChangeView,
|
|
193
|
+
onChangeSelection,
|
|
194
|
+
selection,
|
|
195
|
+
setOpenedFilter,
|
|
196
|
+
view,
|
|
197
|
+
className,
|
|
198
|
+
empty
|
|
199
|
+
}) {
|
|
200
|
+
const headerMenuRefs = (0, import_element.useRef)(/* @__PURE__ */ new Map());
|
|
201
|
+
const headerMenuToFocusRef = (0, import_element.useRef)();
|
|
202
|
+
const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, import_element.useState)();
|
|
203
|
+
const isMultiselect = (0, import_footer.useIsMultiselectPicker)(actions) ?? false;
|
|
204
|
+
(0, import_element.useEffect)(() => {
|
|
205
|
+
if (headerMenuToFocusRef.current) {
|
|
206
|
+
headerMenuToFocusRef.current.focus();
|
|
207
|
+
headerMenuToFocusRef.current = void 0;
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
const tableNoticeId = (0, import_element.useId)();
|
|
211
|
+
if (nextHeaderMenuToFocus) {
|
|
212
|
+
headerMenuToFocusRef.current = nextHeaderMenuToFocus;
|
|
213
|
+
setNextHeaderMenuToFocus(void 0);
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
const onHide = (field) => {
|
|
217
|
+
const hidden = headerMenuRefs.current.get(field.id);
|
|
218
|
+
const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : void 0;
|
|
219
|
+
setNextHeaderMenuToFocus(fallback?.node);
|
|
220
|
+
};
|
|
221
|
+
const hasData = !!data?.length;
|
|
222
|
+
const titleField = fields.find((field) => field.id === view.titleField);
|
|
223
|
+
const mediaField = fields.find((field) => field.id === view.mediaField);
|
|
224
|
+
const descriptionField = fields.find(
|
|
225
|
+
(field) => field.id === view.descriptionField
|
|
226
|
+
);
|
|
227
|
+
const groupField = view.groupByField ? fields.find((f) => f.id === view.groupByField) : null;
|
|
228
|
+
const dataByGroup = groupField ? (0, import_get_data_by_group.default)(data, groupField) : null;
|
|
229
|
+
const { showTitle = true, showMedia = true, showDescription = true } = view;
|
|
230
|
+
const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
|
|
231
|
+
const columns = view.fields ?? [];
|
|
232
|
+
const headerMenuRef = (column, index) => (node) => {
|
|
233
|
+
if (node) {
|
|
234
|
+
headerMenuRefs.current.set(column, {
|
|
235
|
+
node,
|
|
236
|
+
fallback: columns[index > 0 ? index - 1 : 1]
|
|
237
|
+
});
|
|
238
|
+
} else {
|
|
239
|
+
headerMenuRefs.current.delete(column);
|
|
240
|
+
}
|
|
241
|
+
};
|
|
242
|
+
const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
|
|
243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
244
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
245
|
+
"table",
|
|
246
|
+
{
|
|
247
|
+
className: (0, import_clsx.default)(
|
|
248
|
+
"dataviews-view-table",
|
|
249
|
+
"dataviews-view-picker-table",
|
|
250
|
+
className,
|
|
251
|
+
{
|
|
252
|
+
[`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
|
|
253
|
+
view.layout.density
|
|
254
|
+
)
|
|
255
|
+
}
|
|
256
|
+
),
|
|
257
|
+
"aria-busy": isLoading,
|
|
258
|
+
"aria-describedby": tableNoticeId,
|
|
259
|
+
role: isInfiniteScroll ? "feed" : "listbox",
|
|
260
|
+
children: [
|
|
261
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
262
|
+
"tr",
|
|
263
|
+
{
|
|
264
|
+
className: "dataviews-view-table__row",
|
|
265
|
+
role: "presentation",
|
|
266
|
+
children: [
|
|
267
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "dataviews-view-table__checkbox-column", children: isMultiselect && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
268
|
+
import_dataviews_bulk_actions.BulkSelectionCheckbox,
|
|
269
|
+
{
|
|
270
|
+
selection,
|
|
271
|
+
onChangeSelection,
|
|
272
|
+
data,
|
|
273
|
+
actions,
|
|
274
|
+
getItemId
|
|
275
|
+
}
|
|
276
|
+
) }),
|
|
277
|
+
hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: titleField && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
278
|
+
import_column_header_menu.default,
|
|
279
|
+
{
|
|
280
|
+
ref: headerMenuRef(
|
|
281
|
+
titleField.id,
|
|
282
|
+
0
|
|
283
|
+
),
|
|
284
|
+
fieldId: titleField.id,
|
|
285
|
+
view,
|
|
286
|
+
fields,
|
|
287
|
+
onChangeView,
|
|
288
|
+
onHide,
|
|
289
|
+
setOpenedFilter,
|
|
290
|
+
canMove: false
|
|
291
|
+
}
|
|
292
|
+
) }),
|
|
293
|
+
columns.map((column, index) => {
|
|
294
|
+
const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
|
|
295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
296
|
+
"th",
|
|
297
|
+
{
|
|
298
|
+
style: {
|
|
299
|
+
width,
|
|
300
|
+
maxWidth,
|
|
301
|
+
minWidth,
|
|
302
|
+
textAlign: align
|
|
303
|
+
},
|
|
304
|
+
"aria-sort": view.sort?.direction && view.sort?.field === column ? import_constants.sortValues[view.sort.direction] : void 0,
|
|
305
|
+
scope: "col",
|
|
306
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
307
|
+
import_column_header_menu.default,
|
|
308
|
+
{
|
|
309
|
+
ref: headerMenuRef(column, index),
|
|
310
|
+
fieldId: column,
|
|
311
|
+
view,
|
|
312
|
+
fields,
|
|
313
|
+
onChangeView,
|
|
314
|
+
onHide,
|
|
315
|
+
setOpenedFilter,
|
|
316
|
+
canMove: view.layout?.enableMoving ?? true
|
|
317
|
+
}
|
|
318
|
+
)
|
|
319
|
+
},
|
|
320
|
+
column
|
|
321
|
+
);
|
|
322
|
+
})
|
|
323
|
+
]
|
|
324
|
+
}
|
|
325
|
+
) }),
|
|
326
|
+
hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(
|
|
327
|
+
([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
328
|
+
import_components.Composite,
|
|
329
|
+
{
|
|
330
|
+
virtualFocus: true,
|
|
331
|
+
orientation: "vertical",
|
|
332
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { role: "group" }),
|
|
333
|
+
children: [
|
|
334
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
335
|
+
"tr",
|
|
336
|
+
{
|
|
337
|
+
className: "dataviews-view-table__group-header-row",
|
|
338
|
+
role: "presentation",
|
|
339
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
340
|
+
"td",
|
|
341
|
+
{
|
|
342
|
+
colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + 1,
|
|
343
|
+
className: "dataviews-view-table__group-header-cell",
|
|
344
|
+
role: "presentation",
|
|
345
|
+
children: (0, import_i18n.sprintf)(
|
|
346
|
+
// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
|
|
347
|
+
(0, import_i18n.__)("%1$s: %2$s"),
|
|
348
|
+
groupField.label,
|
|
349
|
+
groupName
|
|
350
|
+
)
|
|
351
|
+
}
|
|
352
|
+
)
|
|
353
|
+
}
|
|
354
|
+
),
|
|
355
|
+
groupItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
356
|
+
TableRow,
|
|
357
|
+
{
|
|
358
|
+
item,
|
|
359
|
+
fields,
|
|
360
|
+
id: getItemId(item) || index.toString(),
|
|
361
|
+
view,
|
|
362
|
+
titleField,
|
|
363
|
+
mediaField,
|
|
364
|
+
descriptionField,
|
|
365
|
+
selection,
|
|
366
|
+
getItemId,
|
|
367
|
+
onChangeSelection,
|
|
368
|
+
multiselect: isMultiselect
|
|
369
|
+
},
|
|
370
|
+
getItemId(item)
|
|
371
|
+
))
|
|
372
|
+
]
|
|
373
|
+
},
|
|
374
|
+
`group-${groupName}`
|
|
375
|
+
)
|
|
376
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
377
|
+
import_components.Composite,
|
|
378
|
+
{
|
|
379
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { role: "presentation" }),
|
|
380
|
+
virtualFocus: true,
|
|
381
|
+
orientation: "vertical",
|
|
382
|
+
children: hasData && data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
383
|
+
TableRow,
|
|
384
|
+
{
|
|
385
|
+
item,
|
|
386
|
+
fields,
|
|
387
|
+
id: getItemId(item) || index.toString(),
|
|
388
|
+
view,
|
|
389
|
+
titleField,
|
|
390
|
+
mediaField,
|
|
391
|
+
descriptionField,
|
|
392
|
+
selection,
|
|
393
|
+
getItemId,
|
|
394
|
+
onChangeSelection,
|
|
395
|
+
multiselect: isMultiselect,
|
|
396
|
+
posinset: index + 1
|
|
397
|
+
},
|
|
398
|
+
getItemId(item)
|
|
399
|
+
))
|
|
400
|
+
}
|
|
401
|
+
)
|
|
402
|
+
]
|
|
403
|
+
}
|
|
404
|
+
),
|
|
405
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
406
|
+
"div",
|
|
407
|
+
{
|
|
408
|
+
className: (0, import_clsx.default)({
|
|
409
|
+
"dataviews-loading": isLoading,
|
|
410
|
+
"dataviews-no-results": !hasData && !isLoading
|
|
411
|
+
}),
|
|
412
|
+
id: tableNoticeId,
|
|
413
|
+
children: [
|
|
414
|
+
!hasData && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }) : empty),
|
|
415
|
+
hasData && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
|
|
416
|
+
]
|
|
417
|
+
}
|
|
418
|
+
)
|
|
419
|
+
] });
|
|
420
|
+
}
|
|
421
|
+
var picker_table_default = ViewPickerTable;
|
|
422
|
+
//# sourceMappingURL=index.js.map
|