diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx index 93d8df5845a3ec..b177158402c516 100644 --- a/packages/dataviews/src/components/dataviews-filters/index.tsx +++ b/packages/dataviews/src/components/dataviews-filters/index.tsx @@ -25,47 +25,47 @@ import type { NormalizedFilter, NormalizedField, View } from '../../types'; export function useFilters( fields: NormalizedField< any >[], view: View ) { return useMemo( () => { - const filters: NormalizedFilter[] = []; - fields.forEach( ( field ) => { - if ( ! field.elements?.length ) { - return; - } + const filters: NormalizedFilter[] = []; + fields.forEach( ( field ) => { + if ( ! field.elements?.length ) { + return; + } - const operators = sanitizeOperators( field ); - if ( operators.length === 0 ) { - return; - } + const operators = sanitizeOperators( field ); + if ( operators.length === 0 ) { + return; + } - const isPrimary = !! field.filterBy?.isPrimary; - filters.push( { - field: field.id, - name: field.label, - elements: field.elements, - singleSelection: operators.some( ( op ) => - [ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op ) - ), - operators, - isVisible: - isPrimary || - !! view.filters?.some( - ( f ) => - f.field === field.id && - ALL_OPERATORS.includes( f.operator ) + const isPrimary = !! field.filterBy?.isPrimary; + filters.push( { + field: field.id, + name: field.label, + elements: field.elements, + singleSelection: operators.some( ( op ) => + [ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op ) ), - isPrimary, + operators, + isVisible: + isPrimary || + !! view.filters?.some( + ( f ) => + f.field === field.id && + ALL_OPERATORS.includes( f.operator ) + ), + isPrimary, + } ); + } ); + // Sort filters by primary property. We need the primary filters to be first. + // Then we sort by name. + filters.sort( ( a, b ) => { + if ( a.isPrimary && ! b.isPrimary ) { + return -1; + } + if ( ! a.isPrimary && b.isPrimary ) { + return 1; + } + return a.name.localeCompare( b.name ); } ); - } ); - // Sort filters by primary property. We need the primary filters to be first. - // Then we sort by name. - filters.sort( ( a, b ) => { - if ( a.isPrimary && ! b.isPrimary ) { - return -1; - } - if ( ! a.isPrimary && b.isPrimary ) { - return 1; - } - return a.name.localeCompare( b.name ); - } ); return filters; }, [ fields, view ] ); } @@ -174,14 +174,14 @@ function Filters() { addFilter, ]; - filterComponents.push( - - ); + filterComponents.push( + + ); return ( ( { className="dataviews__view-actions" spacing={ 1 } > - { search && } + { search && } + { view.type === LAYOUT_GRID && ( ( { /> { header } - { isShowingFilter && }