@wordpress/dataviews 0.7.0 → 0.9.0

package/build-module/search-widget.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","removeAccents","__","sprintf","useState","useMemo","useDeferredValue","VisuallyHidden","Icon","privateApis","componentsPrivateApis","search","SVG","Circle","unlock","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","radioCheck","createElement","xmlns","viewBox","cx","cy","r","normalizeSearchInput","input","trim","toLowerCase","ListBox","view","filter","onChangeView","compositeStore","virtualFocus","focusLoop","defaultActiveId","operators","length","undefined","selectedFilter","filters","find","_filter","field","selectedValues","value","store","role","className","name","onFocusVisible","getState","activeId","move","first","render","CompositeTypeahead","elements","map","element","CompositeHover","key","label","onClick","currentFilter","newFilters","operator","page","icon","description","ComboboxList","searchValue","setSearchValue","deferredSearchValue","matches","normalizedSearch","item","includes","ComboboxProvider","setSelectedValue","setValue","ComboboxLabel","Combobox","autoSelect","placeholder","alwaysVisible","ComboboxItem","hideOnClick","setValueOnClick","focusOnHover","ComboboxItemValue","SearchWidget","props","Widget"],"sources":["@wordpress/dataviews/src/search-widget.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { search } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nfunction ListBox( { view, filter, onChangeView } ) {\n\tconst compositeStore = useCompositeStore( {\n\t\tvirtualFocus: true,\n\t\tfocusLoop: true,\n\t\t// When we have no or just one operators, we can set the first item as active.\n\t\t// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,\n\t\t// so the first item is not selected, since the focus is on the operators control.\n\t\tdefaultActiveId: filter.operators?.length === 1 ? undefined : null,\n\t} );\n\tconst selectedFilter = view.filters.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst selectedValues = selectedFilter?.value;\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\tif ( ! compositeStore.getState().activeId ) {\n\t\t\t\t\tcompositeStore.move( compositeStore.first() );\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Ariakit.CompositeHover\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst currentFilter = view.filters.find(\n\t\t\t\t\t\t\t\t\t( _filter ) =>\n\t\t\t\t\t\t\t\t\t\t_filter.field === filter.field\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...view.filters.map(\n\t\t\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\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\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: element.value,\n\t\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\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn _filter;\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  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...view.filters,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: element.value,\n\t\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\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-check\">\n\t\t\t\t\t\t{ selectedValues === element.value && (\n\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t</Ariakit.CompositeHover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst selectedFilter = view.filters.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst selectedValues = selectedFilter?.value;\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tvalue={ searchValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst currentFilter = view.filters.find(\n\t\t\t\t\t( _filter ) => _filter.field === filter.field\n\t\t\t\t);\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...view.filters.map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...view.filters,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-check\">\n\t\t\t\t\t\t\t\t{ selectedValues === element.value && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props ) {\n\tconst Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } />;\n}\n"],"mappings":"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"}
+{"version":3,"names":["Ariakit","removeAccents","__","sprintf","useState","useMemo","useDeferredValue","VisuallyHidden","Icon","privateApis","componentsPrivateApis","search","check","SVG","Circle","unlock","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","radioCheck","createElement","xmlns","viewBox","cx","cy","r","normalizeSearchInput","input","trim","toLowerCase","getCurrentValue","filterDefinition","currentFilter","singleSelection","value","Array","isArray","getNewValue","includes","filter","v","ListBox","view","onChangeView","compositeStore","virtualFocus","focusLoop","defaultActiveId","operators","length","undefined","filters","find","f","field","currentValue","store","role","className","name","onFocusVisible","getState","activeId","move","first","render","CompositeTypeahead","elements","map","element","CompositeHover","key","label","onClick","newFilters","_filter","operator","page","icon","description","ComboboxList","searchValue","setSearchValue","deferredSearchValue","matches","normalizedSearch","item","ComboboxProvider","selectedValue","setSelectedValue","setValue","ComboboxLabel","Combobox","autoSelect","placeholder","alwaysVisible","ComboboxItem","hideOnClick","setValueOnClick","focusOnHover","ComboboxItemValue","SearchWidget","props","Widget"],"sources":["@wordpress/dataviews/src/search-widget.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { search, check } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst getCurrentValue = ( filterDefinition, currentFilter ) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn currentFilter?.value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value;\n\t}\n\n\tif ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {\n\t\treturn [ currentFilter.value ];\n\t}\n\n\treturn [];\n};\n\nconst getNewValue = ( filterDefinition, currentFilter, value ) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value.includes( value )\n\t\t\t? currentFilter.value.filter( ( v ) => v !== value )\n\t\t\t: [ ...currentFilter.value, value ];\n\t}\n\n\treturn [ value ];\n};\n\nfunction ListBox( { view, filter, onChangeView } ) {\n\tconst compositeStore = useCompositeStore( {\n\t\tvirtualFocus: true,\n\t\tfocusLoop: true,\n\t\t// When we have no or just one operators, we can set the first item as active.\n\t\t// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,\n\t\t// so the first item is not selected, since the focus is on the operators control.\n\t\tdefaultActiveId: filter.operators?.length === 1 ? undefined : null,\n\t} );\n\tconst currentFilter = view.filters.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\tif ( ! compositeStore.getState().activeId ) {\n\t\t\t\t\tcompositeStore.move( compositeStore.first() );\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Ariakit.CompositeHover\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...view.filters.map(\n\t\t\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\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\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\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\t\t};\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\treturn _filter;\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  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...view.filters,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\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  ];\n\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-check\">\n\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t</Ariakit.CompositeHover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst currentFilter = view.filters.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tvalue={ searchValue }\n\t\t\tselectedValue={ currentValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...view.filters.map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...view.filters,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-check\">\n\t\t\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props ) {\n\tconst Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } />;\n}\n"],"mappings":"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"}

package/build-module/utils.js

@@ -1,75 +1,34 @@
 /**
  * Internal dependencies
  */
-import { OPERATORS } from './constants';
-
-/**
- * Helper util to sort data by text fields, when sorting is done client side.
- *
- * @param {Object}   params            Function params.
- * @param {Object[]} params.data       Data to sort.
- * @param {Object}   params.view       Current view object.
- * @param {Object[]} params.fields     Array of available fields.
- * @param {string[]} params.textFields Array of the field ids to sort.
- *
- * @return {Object[]} Sorted data.
- */
-export const sortByTextFields = ({
-  data,
-  view,
-  fields,
-  textFields
-}) => {
-  const sortedData = [...data];
-  const fieldId = view.sort.field;
-  if (textFields.includes(fieldId)) {
-    const fieldToSort = fields.find(field => {
-      return field.id === fieldId;
-    });
-    sortedData.sort((a, b) => {
-      var _fieldToSort$getValue, _fieldToSort$getValue2;
-      const valueA = (_fieldToSort$getValue = fieldToSort.getValue({
-        item: a
-      })) !== null && _fieldToSort$getValue !== void 0 ? _fieldToSort$getValue : '';
-      const valueB = (_fieldToSort$getValue2 = fieldToSort.getValue({
-        item: b
-      })) !== null && _fieldToSort$getValue2 !== void 0 ? _fieldToSort$getValue2 : '';
-      return view.sort.direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
-    });
-  }
-  return sortedData;
-};
-
-/**
- * Helper util to get the paginated data and the paginateInfo needed,
- * when pagination is done client side.
- *
- * @param {Object}   params      Function params.
- * @param {Object[]} params.data Available data.
- * @param {Object}   params.view Current view object.
- *
- * @return {Object} Paginated data and paginationInfo.
- */
-export function getPaginationResults({
-  data,
-  view
-}) {
-  const start = (view.page - 1) * view.perPage;
-  const totalItems = data?.length || 0;
-  data = data?.slice(start, start + view.perPage);
-  return {
-    data,
-    paginationInfo: {
-      totalItems,
-      totalPages: Math.ceil(totalItems / view.perPage)
-    }
-  };
-}
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE } from './constants';
 export const sanitizeOperators = field => {
   let operators = field.filterBy?.operators;
+
+  // Assign default values.
   if (!operators || !Array.isArray(operators)) {
-    operators = Object.keys(OPERATORS);
+    operators = [OPERATOR_IS_ANY, OPERATOR_IS_NONE];
+  }
+
+  // Transform legacy in, notIn operators to is, isNot.
+  // To be removed in the future.
+  if (operators.includes('in')) {
+    operators = operators.filter(operator => operator !== 'is');
+    operators.push('is');
+  }
+  if (operators.includes('notIn')) {
+    operators = operators.filter(operator => operator !== 'notIn');
+    operators.push('isNot');
+  }
+
+  // Make sure only valid operators are used.
+  operators = operators.filter(operator => ALL_OPERATORS.includes(operator));
+
+  // Do not allow mixing single & multiselection operators.
+  // Remove multiselection operators if any of the single selection ones is present.
+  if (operators.includes(OPERATOR_IS) || operators.includes(OPERATOR_IS_NOT)) {
+    operators = operators.filter(operator => [OPERATOR_IS, OPERATOR_IS_NOT].includes(operator));
   }
-  return operators.filter(operator => Object.keys(OPERATORS).includes(operator));
+  return operators;
 };
 //# sourceMappingURL=utils.js.map

package/build-module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["OPERATORS","sortByTextFields","data","view","fields","textFields","sortedData","fieldId","sort","field","includes","fieldToSort","find","id","a","b","_fieldToSort$getValue","_fieldToSort$getValue2","valueA","getValue","item","valueB","direction","localeCompare","getPaginationResults","start","page","perPage","totalItems","length","slice","paginationInfo","totalPages","Math","ceil","sanitizeOperators","operators","filterBy","Array","isArray","Object","keys","filter","operator"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { OPERATORS } from './constants';\n\n/**\n * Helper util to sort data by text fields, when sorting is done client side.\n *\n * @param {Object}   params            Function params.\n * @param {Object[]} params.data       Data to sort.\n * @param {Object}   params.view       Current view object.\n * @param {Object[]} params.fields     Array of available fields.\n * @param {string[]} params.textFields Array of the field ids to sort.\n *\n * @return {Object[]} Sorted data.\n */\nexport const sortByTextFields = ( { data, view, fields, textFields } ) => {\n\tconst sortedData = [ ...data ];\n\tconst fieldId = view.sort.field;\n\tif ( textFields.includes( fieldId ) ) {\n\t\tconst fieldToSort = fields.find( ( field ) => {\n\t\t\treturn field.id === fieldId;\n\t\t} );\n\t\tsortedData.sort( ( a, b ) => {\n\t\t\tconst valueA = fieldToSort.getValue( { item: a } ) ?? '';\n\t\t\tconst valueB = fieldToSort.getValue( { item: b } ) ?? '';\n\t\t\treturn view.sort.direction === 'asc'\n\t\t\t\t? valueA.localeCompare( valueB )\n\t\t\t\t: valueB.localeCompare( valueA );\n\t\t} );\n\t}\n\treturn sortedData;\n};\n\n/**\n * Helper util to get the paginated data and the paginateInfo needed,\n * when pagination is done client side.\n *\n * @param {Object}   params      Function params.\n * @param {Object[]} params.data Available data.\n * @param {Object}   params.view Current view object.\n *\n * @return {Object} Paginated data and paginationInfo.\n */\nexport function getPaginationResults( { data, view } ) {\n\tconst start = ( view.page - 1 ) * view.perPage;\n\tconst totalItems = data?.length || 0;\n\tdata = data?.slice( start, start + view.perPage );\n\treturn {\n\t\tdata,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages: Math.ceil( totalItems / view.perPage ),\n\t\t},\n\t};\n}\n\nexport const sanitizeOperators = ( field ) => {\n\tlet operators = field.filterBy?.operators;\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = Object.keys( OPERATORS );\n\t}\n\treturn operators.filter( ( operator ) =>\n\t\tObject.keys( OPERATORS ).includes( operator )\n\t);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,aAAa;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAE;EAAEC,IAAI;EAAEC,IAAI;EAAEC,MAAM;EAAEC;AAAW,CAAC,KAAM;EACzE,MAAMC,UAAU,GAAG,CAAE,GAAGJ,IAAI,CAAE;EAC9B,MAAMK,OAAO,GAAGJ,IAAI,CAACK,IAAI,CAACC,KAAK;EAC/B,IAAKJ,UAAU,CAACK,QAAQ,CAAEH,OAAQ,CAAC,EAAG;IACrC,MAAMI,WAAW,GAAGP,MAAM,CAACQ,IAAI,CAAIH,KAAK,IAAM;MAC7C,OAAOA,KAAK,CAACI,EAAE,KAAKN,OAAO;IAC5B,CAAE,CAAC;IACHD,UAAU,CAACE,IAAI,CAAE,CAAEM,CAAC,EAAEC,CAAC,KAAM;MAAA,IAAAC,qBAAA,EAAAC,sBAAA;MAC5B,MAAMC,MAAM,IAAAF,qBAAA,GAAGL,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEN;MAAE,CAAE,CAAC,cAAAE,qBAAA,cAAAA,qBAAA,GAAI,EAAE;MACxD,MAAMK,MAAM,IAAAJ,sBAAA,GAAGN,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEL;MAAE,CAAE,CAAC,cAAAE,sBAAA,cAAAA,sBAAA,GAAI,EAAE;MACxD,OAAOd,IAAI,CAACK,IAAI,CAACc,SAAS,KAAK,KAAK,GACjCJ,MAAM,CAACK,aAAa,CAAEF,MAAO,CAAC,GAC9BA,MAAM,CAACE,aAAa,CAAEL,MAAO,CAAC;IAClC,CAAE,CAAC;EACJ;EACA,OAAOZ,UAAU;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASkB,oBAAoBA,CAAE;EAAEtB,IAAI;EAAEC;AAAK,CAAC,EAAG;EACtD,MAAMsB,KAAK,GAAG,CAAEtB,IAAI,CAACuB,IAAI,GAAG,CAAC,IAAKvB,IAAI,CAACwB,OAAO;EAC9C,MAAMC,UAAU,GAAG1B,IAAI,EAAE2B,MAAM,IAAI,CAAC;EACpC3B,IAAI,GAAGA,IAAI,EAAE4B,KAAK,CAAEL,KAAK,EAAEA,KAAK,GAAGtB,IAAI,CAACwB,OAAQ,CAAC;EACjD,OAAO;IACNzB,IAAI;IACJ6B,cAAc,EAAE;MACfH,UAAU;MACVI,UAAU,EAAEC,IAAI,CAACC,IAAI,CAAEN,UAAU,GAAGzB,IAAI,CAACwB,OAAQ;IAClD;EACD,CAAC;AACF;AAEA,OAAO,MAAMQ,iBAAiB,GAAK1B,KAAK,IAAM;EAC7C,IAAI2B,SAAS,GAAG3B,KAAK,CAAC4B,QAAQ,EAAED,SAAS;EACzC,IAAK,CAAEA,SAAS,IAAI,CAAEE,KAAK,CAACC,OAAO,CAAEH,SAAU,CAAC,EAAG;IAClDA,SAAS,GAAGI,MAAM,CAACC,IAAI,CAAEzC,SAAU,CAAC;EACrC;EACA,OAAOoC,SAAS,CAACM,MAAM,CAAIC,QAAQ,IAClCH,MAAM,CAACC,IAAI,CAAEzC,SAAU,CAAC,CAACU,QAAQ,CAAEiC,QAAS,CAC7C,CAAC;AACF,CAAC"}
+{"version":3,"names":["ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","OPERATOR_IS_ANY","OPERATOR_IS_NONE","sanitizeOperators","field","operators","filterBy","Array","isArray","includes","filter","operator","push"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tALL_OPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n} from './constants';\n\nexport const sanitizeOperators = ( field ) => {\n\tlet operators = field.filterBy?.operators;\n\n\t// Assign default values.\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];\n\t}\n\n\t// Transform legacy in, notIn operators to is, isNot.\n\t// To be removed in the future.\n\tif ( operators.includes( 'in' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'is' );\n\t\toperators.push( 'is' );\n\t}\n\tif ( operators.includes( 'notIn' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'notIn' );\n\t\toperators.push( 'isNot' );\n\t}\n\n\t// Make sure only valid operators are used.\n\toperators = operators.filter( ( operator ) =>\n\t\tALL_OPERATORS.includes( operator )\n\t);\n\n\t// Do not allow mixing single & multiselection operators.\n\t// Remove multiselection operators if any of the single selection ones is present.\n\tif (\n\t\toperators.includes( OPERATOR_IS ) ||\n\t\toperators.includes( OPERATOR_IS_NOT )\n\t) {\n\t\toperators = operators.filter( ( operator ) =>\n\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )\n\t\t);\n\t}\n\n\treturn operators;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,WAAW,EACXC,eAAe,EACfC,eAAe,EACfC,gBAAgB,QACV,aAAa;AAEpB,OAAO,MAAMC,iBAAiB,GAAKC,KAAK,IAAM;EAC7C,IAAIC,SAAS,GAAGD,KAAK,CAACE,QAAQ,EAAED,SAAS;;EAEzC;EACA,IAAK,CAAEA,SAAS,IAAI,CAAEE,KAAK,CAACC,OAAO,CAAEH,SAAU,CAAC,EAAG;IAClDA,SAAS,GAAG,CAAEJ,eAAe,EAAEC,gBAAgB,CAAE;EAClD;;EAEA;EACA;EACA,IAAKG,SAAS,CAACI,QAAQ,CAAE,IAAK,CAAC,EAAG;IACjCJ,SAAS,GAAGA,SAAS,CAACK,MAAM,CAAIC,QAAQ,IAAMA,QAAQ,KAAK,IAAK,CAAC;IACjEN,SAAS,CAACO,IAAI,CAAE,IAAK,CAAC;EACvB;EACA,IAAKP,SAAS,CAACI,QAAQ,CAAE,OAAQ,CAAC,EAAG;IACpCJ,SAAS,GAAGA,SAAS,CAACK,MAAM,CAAIC,QAAQ,IAAMA,QAAQ,KAAK,OAAQ,CAAC;IACpEN,SAAS,CAACO,IAAI,CAAE,OAAQ,CAAC;EAC1B;;EAEA;EACAP,SAAS,GAAGA,SAAS,CAACK,MAAM,CAAIC,QAAQ,IACvCb,aAAa,CAACW,QAAQ,CAAEE,QAAS,CAClC,CAAC;;EAED;EACA;EACA,IACCN,SAAS,CAACI,QAAQ,CAAEV,WAAY,CAAC,IACjCM,SAAS,CAACI,QAAQ,CAAET,eAAgB,CAAC,EACpC;IACDK,SAAS,GAAGA,SAAS,CAACK,MAAM,CAAIC,QAAQ,IACvC,CAAEZ,WAAW,EAAEC,eAAe,CAAE,CAACS,QAAQ,CAAEE,QAAS,CACrD,CAAC;EACF;EAEA,OAAON,SAAS;AACjB,CAAC"}

package/build-module/view-grid.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, Tooltip, Spinner } from '@wordpress/components';
+import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, Spinner, Flex, FlexItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -26,7 +26,8 @@ function GridItem({
   actions,
   mediaField,
   primaryField,
-  visibleFields
+  visibleFields,
+  displayAsColumnFields
 }) {
   const hasBulkAction = useHasAPossibleBulkAction(actions, item);
   const id = getItemId(item);
@@ -38,9 +39,12 @@ function GridItem({
       'is-selected': hasBulkAction && isSelected
     }),
     onClickCapture: event => {
-      if (hasBulkAction && (event.ctrlKey || event.metaKey)) {
+      if (event.ctrlKey || event.metaKey) {
         event.stopPropagation();
         event.preventDefault();
+        if (!hasBulkAction) {
+          return;
+        }
         if (!isSelected) {
           onSelectionChange(data.filter(_item => {
             const itemId = getItemId?.(_item);
@@ -88,16 +92,24 @@ function GridItem({
     if (!renderedValue) {
       return null;
     }
-    return createElement(VStack, {
-      className: "dataviews-view-grid__field",
+    return createElement(Flex, {
+      className: classnames('dataviews-view-grid__field', displayAsColumnFields?.includes(field.id) ? 'is-column' : 'is-row'),
       key: field.id,
-      spacing: 1
-    }, createElement(Tooltip, {
-      text: field.header,
-      placement: "left"
-    }, createElement("div", {
-      className: "dataviews-view-grid__field-value"
-    }, renderedValue)));
+      gap: 1,
+      justify: "flex-start",
+      expanded: true,
+      style: {
+        height: 'auto'
+      },
+      direction: displayAsColumnFields?.includes(field.id) ? 'column' : 'row'
+    }, createElement(FlexItem, {
+      className: "dataviews-view-grid__field-name"
+    }, field.header), createElement(FlexItem, {
+      className: "dataviews-view-grid__field-value",
+      style: {
+        maxHeight: 'none'
+      }
+    }, renderedValue));
   })));
 }
 export default function ViewGrid({
@@ -136,7 +148,8 @@ export default function ViewGrid({
       actions: actions,
       mediaField: mediaField,
       primaryField: primaryField,
-      visibleFields: visibleFields
+      visibleFields: visibleFields,
+      displayAsColumnFields: view.layout.displayAsColumnFields
     });
   })), !hasData && createElement("div", {
     className: classnames({

package/build-module/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Tooltip","Spinner","__","useAsyncList","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasBulkAction","id","isSelected","includes","createElement","spacing","key","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","justify","disabled","isCompact","map","field","renderedValue","text","header","placement","ViewGrid","fields","view","isLoading","deferredRendering","find","layout","hiddenFields","shownData","step","usedData","hasData","length","Fragment","gap","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n\tSpinner,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst hasData = !! usedData?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","useAsyncList","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","displayAsColumnFields","hasBulkAction","id","isSelected","includes","createElement","spacing","key","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","justify","disabled","isCompact","map","field","renderedValue","gap","expanded","style","height","direction","header","maxHeight","ViewGrid","fields","view","isLoading","deferredRendering","find","layout","hiddenFields","shownData","step","usedData","hasData","length","Fragment","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tdisplayAsColumnFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\tdisplayAsColumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\tdisplayAsColumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t: 'row'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst hasData = !! usedData?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tdisplayAsColumnFields={\n\t\t\t\t\t\t\t\t\tview.layout.displayAsColumnFields\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</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/build-module/view-list.js

@@ -7,11 +7,105 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useAsyncList } from '@wordpress/compose';
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, Button, Spinner } from '@wordpress/components';
-import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useAsyncList, useInstanceId } from '@wordpress/compose';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, privateApis as componentsPrivateApis, Button, Spinner, VisuallyHidden } from '@wordpress/components';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { info } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+const {
+  useCompositeStoreV2: useCompositeStore,
+  CompositeV2: Composite,
+  CompositeItemV2: CompositeItem,
+  CompositeRowV2: CompositeRow
+} = unlock(componentsPrivateApis);
+function ListItem({
+  id,
+  item,
+  isSelected,
+  onSelect,
+  onDetailsChange,
+  mediaField,
+  primaryField,
+  visibleFields
+}) {
+  const itemRef = useRef(null);
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  useEffect(() => {
+    if (isSelected) {
+      itemRef.current?.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [isSelected]);
+  return createElement(CompositeRow, {
+    ref: itemRef,
+    render: createElement("li", null),
+    role: "row",
+    className: classNames({
+      'is-selected': isSelected
+    })
+  }, createElement(HStack, {
+    className: "dataviews-view-list__item-wrapper"
+  }, createElement("div", {
+    role: "gridcell"
+  }, createElement(CompositeItem, {
+    render: createElement("div", null),
+    role: "button",
+    id: id,
+    "aria-pressed": isSelected,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    className: "dataviews-view-list__item",
+    onClick: () => onSelect(item)
+  }, createElement(HStack, {
+    spacing: 3,
+    justify: "start",
+    alignment: "flex-start"
+  }, createElement("div", {
+    className: "dataviews-view-list__media-wrapper"
+  }, mediaField?.render({
+    item
+  }) || createElement("div", {
+    className: "dataviews-view-list__media-placeholder"
+  })), createElement(VStack, {
+    spacing: 1
+  }, createElement("span", {
+    className: "dataviews-view-list__primary-field",
+    id: labelId
+  }, primaryField?.render({
+    item
+  })), createElement("div", {
+    className: "dataviews-view-list__fields",
+    id: descriptionId
+  }, visibleFields.map(field => createElement("div", {
+    key: field.id,
+    className: "dataviews-view-list__field"
+  }, createElement(VisuallyHidden, {
+    as: "span",
+    className: "dataviews-view-list__field-label"
+  }, field.header), createElement("span", {
+    className: "dataviews-view-list__field-value"
+  }, field.render({
+    item
+  }))))))))), onDetailsChange && createElement("div", {
+    role: "gridcell"
+  }, createElement(CompositeItem, {
+    render: createElement(Button, null),
+    className: "dataviews-view-list__details-button",
+    onClick: () => onDetailsChange([item]),
+    icon: info,
+    label: __('View details'),
+    size: "compact"
+  }))));
+}
 export default function ViewList({
   view,
   fields,
@@ -21,23 +115,23 @@ export default function ViewList({
   onSelectionChange,
   onDetailsChange,
   selection,
-  deferredRendering
+  deferredRendering,
+  id: preferredId
 }) {
+  const baseId = useInstanceId(ViewList, 'view-list', preferredId);
   const shownData = useAsyncList(data, {
     step: 3
   });
   const usedData = deferredRendering ? shownData : data;
+  const selectedItem = usedData?.findLast(item => selection.includes(item.id));
   const mediaField = fields.find(field => field.id === view.layout.mediaField);
   const primaryField = fields.find(field => field.id === view.layout.primaryField);
   const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.primaryField, view.layout.mediaField].includes(field.id));
-  const onEnter = item => event => {
-    const {
-      keyCode
-    } = event;
-    if ([ENTER, SPACE].includes(keyCode)) {
-      onSelectionChange([item]);
-    }
-  };
+  const onSelect = useCallback(item => onSelectionChange([item]), [onSelectionChange]);
+  const getItemDomId = useCallback(item => item ? `${baseId}-${getItemId(item)}` : undefined, [baseId, getItemId]);
+  const store = useCompositeStore({
+    defaultActiveId: getItemDomId(selectedItem)
+  });
   const hasData = usedData?.length;
   if (!hasData) {
     return createElement("div", {
@@ -47,55 +141,25 @@ export default function ViewList({
       })
     }, !hasData && createElement("p", null, isLoading ? createElement(Spinner, null) : __('No results')));
   }
-  return createElement("ul", {
-    className: "dataviews-view-list"
+  return createElement(Composite, {
+    id: baseId,
+    render: createElement("ul", null),
+    className: "dataviews-view-list",
+    role: "grid",
+    store: store
   }, usedData.map(item => {
-    return createElement("li", {
-      key: getItemId(item),
-      className: classNames({
-        'is-selected': selection.includes(item.id)
-      })
-    }, createElement(HStack, {
-      className: "dataviews-view-list__item-wrapper"
-    }, createElement("div", {
-      role: "button",
-      tabIndex: 0,
-      "aria-pressed": selection.includes(item.id),
-      onKeyDown: onEnter(item),
-      className: "dataviews-view-list__item",
-      onClick: () => onSelectionChange([item])
-    }, createElement(HStack, {
-      spacing: 3,
-      justify: "start",
-      alignment: "flex-start"
-    }, createElement("div", {
-      className: "dataviews-view-list__media-wrapper"
-    }, mediaField?.render({
-      item
-    }) || createElement("div", {
-      className: "dataviews-view-list__media-placeholder"
-    })), createElement(VStack, {
-      spacing: 1
-    }, createElement("span", {
-      className: "dataviews-view-list__primary-field"
-    }, primaryField?.render({
-      item
-    })), createElement("div", {
-      className: "dataviews-view-list__fields"
-    }, visibleFields.map(field => {
-      return createElement("span", {
-        key: field.id,
-        className: "dataviews-view-list__field"
-      }, field.render({
-        item
-      }));
-    }))))), onDetailsChange && createElement(Button, {
-      className: "dataviews-view-list__details-button",
-      onClick: () => onDetailsChange([item]),
-      icon: info,
-      label: __('View details'),
-      size: "compact"
-    })));
+    const id = getItemDomId(item);
+    return createElement(ListItem, {
+      key: id,
+      id: id,
+      item: item,
+      isSelected: item === selectedItem,
+      onSelect: onSelect,
+      onDetailsChange: onDetailsChange,
+      mediaField: mediaField,
+      primaryField: primaryField,
+      visibleFields: visibleFields
+    });
   }));
 }
 //# sourceMappingURL=view-list.js.map

package/build-module/view-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","Button","Spinner","ENTER","SPACE","info","__","ViewList","view","fields","data","isLoading","getItemId","onSelectionChange","onDetailsChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","hasData","length","createElement","className","map","key","role","tabIndex","onKeyDown","onClick","spacing","justify","alignment","render","icon","label","size"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tSpinner,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport { info } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tisLoading,\n\tgetItemId,\n\tonSelectionChange,\n\tonDetailsChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\tconst hasData = usedData?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ classNames( {\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<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ul className=\"dataviews-view-list\">\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tclassName={ classNames( {\n\t\t\t\t\t\t\t'is-selected': selection.includes( item.id ),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack className=\"dataviews-view-list__item-wrapper\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__primary-field\">\n\t\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\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\t\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\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\t</span>\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</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ onDetailsChange && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__details-button\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonDetailsChange( [ item ] )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'View details' ) }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classNames","useAsyncList","useInstanceId","__experimentalHStack","HStack","__experimentalVStack","VStack","privateApis","componentsPrivateApis","Button","Spinner","VisuallyHidden","useCallback","useEffect","useRef","info","__","unlock","useCompositeStoreV2","useCompositeStore","CompositeV2","Composite","CompositeItemV2","CompositeItem","CompositeRowV2","CompositeRow","ListItem","id","item","isSelected","onSelect","onDetailsChange","mediaField","primaryField","visibleFields","itemRef","labelId","descriptionId","current","scrollIntoView","behavior","block","inline","createElement","ref","render","role","className","onClick","spacing","justify","alignment","map","field","key","as","header","icon","label","size","ViewList","view","fields","data","isLoading","getItemId","onSelectionChange","selection","deferredRendering","preferredId","baseId","shownData","step","usedData","selectedItem","findLast","includes","find","layout","filter","hiddenFields","getItemDomId","undefined","store","defaultActiveId","hasData","length"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList, useInstanceId } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tSpinner,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\nimport { info } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseCompositeStoreV2: useCompositeStore,\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tCompositeRowV2: CompositeRow,\n} = unlock( componentsPrivateApis );\n\nfunction ListItem( {\n\tid,\n\titem,\n\tisSelected,\n\tonSelect,\n\tonDetailsChange,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst itemRef = useRef( null );\n\tconst labelId = `${ id }-label`;\n\tconst descriptionId = `${ id }-description`;\n\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\treturn (\n\t\t<CompositeRow\n\t\t\tref={ itemRef }\n\t\t\trender={ <li /> }\n\t\t\trole=\"row\"\n\t\t\tclassName={ classNames( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t>\n\t\t\t<HStack className=\"dataviews-view-list__item-wrapper\">\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\trender={ <div /> }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tid={ id }\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\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\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\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__primary-field\"\n\t\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\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\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\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\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\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\t\t{ field.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</CompositeItem>\n\t\t\t\t</div>\n\t\t\t\t{ onDetailsChange && (\n\t\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={ <Button /> }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-list__details-button\"\n\t\t\t\t\t\t\tonClick={ () => onDetailsChange( [ item ] ) }\n\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\tlabel={ __( 'View details' ) }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</CompositeRow>\n\t);\n}\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tisLoading,\n\tgetItemId,\n\tonSelectionChange,\n\tonDetailsChange,\n\tselection,\n\tdeferredRendering,\n\tid: preferredId,\n} ) {\n\tconst baseId = useInstanceId( ViewList, 'view-list', preferredId );\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst selectedItem = usedData?.findLast( ( item ) =>\n\t\tselection.includes( item.id )\n\t);\n\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onSelect = useCallback(\n\t\t( item ) => onSelectionChange( [ item ] ),\n\t\t[ onSelectionChange ]\n\t);\n\n\tconst getItemDomId = useCallback(\n\t\t( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst store = useCompositeStore( {\n\t\tdefaultActiveId: getItemDomId( selectedItem ),\n\t} );\n\n\tconst hasData = usedData?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ classNames( {\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<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Composite\n\t\t\tid={ baseId }\n\t\t\trender={ <ul /> }\n\t\t\tclassName=\"dataviews-view-list\"\n\t\t\trole=\"grid\"\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\tconst id = getItemDomId( item );\n\t\t\t\treturn (\n\t\t\t\t\t<ListItem\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tonDetailsChange={ onDetailsChange }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Composite>\n\t);\n}\n"],"mappings":"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"}