From 34d2ba1bcc14f377c0b60d120e6e0211de307992 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 25 Oct 2023 15:09:10 +0200 Subject: [PATCH 01/61] First attempt at refactoring the view actions dropdown --- packages/dataviews/src/view-actions.js | 125 +++++++++++-------------- 1 file changed, 57 insertions(+), 68 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index f9a07e2a1830a..a480911049c3c 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -6,7 +6,7 @@ import { Icon, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons'; +import { chevronRightSmall, arrowUp, arrowDown } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; /** @@ -16,11 +16,11 @@ import { unlock } from './lock-unlock'; import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants'; const { - DropdownMenuV2: DropdownMenu, - DropdownMenuGroupV2: DropdownMenuGroup, - DropdownMenuItemV2: DropdownMenuItem, - DropdownSubMenuV2: DropdownSubMenu, - DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuGroupV2Ariakit: DropdownMenuGroup, + DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, + DropdownMenuCheckboxItemV2Ariakit: DropdownMenuCheckboxItem, } = unlock( componentsPrivateApis ); function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { @@ -35,9 +35,9 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { } const activeView = _availableViews.find( ( v ) => view.type === v.type ); return ( - { activeView.label } @@ -46,21 +46,17 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { } > { __( 'Layout' ) } - + } > { _availableViews.map( ( availableView ) => { return ( - - ) - } - onSelect={ () => { + value={ availableView.type } + name="view-actions-available-view" + checked={ availableView.type === view.type } + onChange={ () => { onChangeView( { ...view, type: availableView.type, @@ -68,19 +64,19 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { } } > { availableView.label } - + ); } ) } - + ); } const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ]; function PageSizeMenu( { view, onChangeView } ) { return ( - { view.perPage } @@ -90,29 +86,25 @@ function PageSizeMenu( { view, onChangeView } ) { > { /* TODO: probably label per view type. */ } { __( 'Rows per page' ) } - + } > { PAGE_SIZE_VALUES.map( ( size ) => { return ( - - } - onSelect={ ( event ) => { - // We need to handle this on DropDown component probably.. - event.preventDefault(); + value={ size } + name="view-actions-page-size" + checked={ view.perPage === size } + onChange={ () => { onChangeView( { ...view, perPage: size, page: 1 } ); } } > { size } - + ); } ) } - + ); } @@ -125,27 +117,22 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { return null; } return ( - } > { __( 'Fields' ) } - + } > { hidableFields?.map( ( field ) => { return ( - - ) - } - onSelect={ ( event ) => { - event.preventDefault(); + value={ field.id } + checked={ ! view.hiddenFields?.includes( field.id ) } + onChange={ () => { onChangeView( { ...view, hiddenFields: view.hiddenFields?.includes( @@ -162,10 +149,10 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } } > { field.header } - + ); } ) } - + ); } @@ -185,9 +172,9 @@ function SortMenu( { fields, view, onChangeView } ) { ( field ) => field.id === view.sort?.field ); return ( - { currentSortedField?.header } @@ -196,39 +183,41 @@ function SortMenu( { fields, view, onChangeView } ) { } > { __( 'Sort by' ) } - + } > { sortableFields?.map( ( field ) => { const sortedDirection = view.sort?.direction; return ( - } > { field.header } - + } - side="left" + placement="left-start" > { Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => { - const isActive = - currentSortedField && + const isChecked = + currentSortedField !== undefined && sortedDirection === direction && field.id === currentSortedField.id; + return ( - } - suffix={ - isActive && - } - onSelect={ ( event ) => { + value={ direction } + name={ `view-actions-sorting-${ field.id }` } + suffix={ } + // Note: there is currently a limitation from the DropdownMenu + // component where the radio won't unselect when all related + // radios are set to false. + checked={ isActive } + onChange={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -240,14 +229,14 @@ function SortMenu( { fields, view, onChangeView } ) { } } > { info.label } - + ); } ) } - + ); } ) } - + ); } From 46a5bf56928234d69825be160e7d6dc2eebe7931 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 25 Oct 2023 16:48:17 +0200 Subject: [PATCH 02/61] note --- packages/components/src/dropdown-menu-v2-ariakit/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx index 37d4a1f9cfcc5..36ea05018db64 100644 --- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx +++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx @@ -322,6 +322,7 @@ const UnconnectedDropdownMenu = ( // Align nested menu by the same (but opposite) amount // as the menu container's padding. shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) } + // TODO: we may need to expose this hideOnHoverOutside={ false } data-side={ appliedPlacementSide } variant={ variant } From be88dba2434df5e4ff5d5d79250efea7a149d295 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 8 Nov 2023 11:00:41 +0100 Subject: [PATCH 03/61] Force all menus to have "left-start" placement. This helps having a more coherent keyboard navigation behaviour --- packages/dataviews/src/view-actions.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index a480911049c3c..1ee596fca2737 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -48,6 +48,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { { __( 'Layout' ) } } + placement="left-start" > { _availableViews.map( ( availableView ) => { return ( @@ -88,6 +89,7 @@ function PageSizeMenu( { view, onChangeView } ) { { __( 'Rows per page' ) } } + placement="left-start" > { PAGE_SIZE_VALUES.map( ( size ) => { return ( @@ -125,6 +127,7 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { { __( 'Fields' ) } } + placement="left-start" > { hidableFields?.map( ( field ) => { return ( @@ -185,6 +188,7 @@ function SortMenu( { fields, view, onChangeView } ) { { __( 'Sort by' ) } } + placement="left-start" > { sortableFields?.map( ( field ) => { const sortedDirection = view.sort?.direction; From 377b0d87dff6fc9e0cb02269e25422cdd6c1b68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:24:16 +0100 Subject: [PATCH 04/61] Port changes missed in rebase due to file renames --- .../src/components/dataviews/view-table.js | 515 ++++++++++++++++++ 1 file changed, 515 insertions(+) create mode 100644 packages/edit-site/src/components/dataviews/view-table.js diff --git a/packages/edit-site/src/components/dataviews/view-table.js b/packages/edit-site/src/components/dataviews/view-table.js new file mode 100644 index 0000000000000..f016e1e8cf6e7 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/view-table.js @@ -0,0 +1,515 @@ +/** + * External dependencies + */ +import { + getCoreRowModel, + getFilteredRowModel, + getSortedRowModel, + getPaginationRowModel, + useReactTable, + flexRender, +} from '@tanstack/react-table'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useAsyncList } from '@wordpress/compose'; +import { + chevronDown, + chevronUp, + unseen, + check, + arrowUp, + arrowDown, + chevronRightSmall, + funnel, +} from '@wordpress/icons'; +import { + Button, + Icon, + privateApis as componentsPrivateApis, +} from '@wordpress/components'; +import { useMemo, Children, Fragment } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import ItemActions from './item-actions'; +import { ENUMERATION_TYPE, OPERATOR_IN } from './constants'; + +const { + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuGroupV2Ariakit: DropdownMenuGroup, + DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, + DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + // TODO: check if we should use menus & items, like in view-actions. + DropdownSubMenuV2: DropdownSubMenu, + DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, +} = unlock( componentsPrivateApis ); + +const EMPTY_OBJECT = {}; +const sortingItemsInfo = { + asc: { icon: arrowUp, label: __( 'Sort ascending' ) }, + desc: { icon: arrowDown, label: __( 'Sort descending' ) }, +}; +const sortIcons = { asc: chevronUp, desc: chevronDown }; + +function HeaderMenu( { dataView, header } ) { + if ( header.isPlaceholder ) { + return null; + } + const text = flexRender( + header.column.columnDef.header, + header.getContext() + ); + const isSortable = !! header.column.getCanSort(); + const isHidable = !! header.column.getCanHide(); + if ( ! isSortable && ! isHidable ) { + return text; + } + const sortedDirection = header.column.getIsSorted(); + + let filter; + if ( header.column.columnDef.type === ENUMERATION_TYPE ) { + filter = { + field: header.column.columnDef.id, + elements: header.column.columnDef.elements || [], + }; + } + const isFilterable = !! filter; + + return ( + + } + > + + { isSortable && ( + + { Object.entries( sortingItemsInfo ).map( + ( [ direction, info ] ) => ( + } + onChange={ () => { + if ( sortedDirection === direction ) { + dataView.resetSorting(); + } else { + dataView.setSorting( [ + { + id: header.column.id, + desc: direction === 'desc', + }, + ] ); + } + } } + > + { info.label } + + ) + ) } + + ) } + { isHidable && ( + } + onClick={ ( event ) => { + header.column.getToggleVisibilityHandler()( event ); + } } + > + { __( 'Hide' ) } + + ) } + { isFilterable && ( + + } + suffix={ + + } + > + { __( 'Filter by' ) } + + } + > + { filter.elements.map( ( element ) => { + let isActive = false; + const columnFilters = + dataView.getState().columnFilters; + const columnFilter = columnFilters.find( + ( f ) => + Object.keys( f )[ 0 ].split( + ':' + )[ 0 ] === filter.field + ); + + if ( columnFilter ) { + const value = + Object.values( columnFilter )[ 0 ]; + // Intentionally use loose comparison, so it does type conversion. + // This covers the case where a top-level filter for the same field converts a number into a string. + isActive = element.value == value; // eslint-disable-line eqeqeq + } + + return ( + + } + onSelect={ () => { + const otherFilters = + columnFilters?.filter( + ( f ) => { + const [ + field, + operator, + ] = + Object.keys( + f + )[ 0 ].split( ':' ); + return ( + field !== + filter.field || + operator !== + OPERATOR_IN + ); + } + ); + + dataView.setColumnFilters( [ + ...otherFilters, + { + [ filter.field + ':in' ]: + isActive + ? undefined + : element.value, + }, + ] ); + } } + > + { element.label } + + ); + } ) } + + + ) } + + + ); +} + +function WithSeparators( { children } ) { + return Children.toArray( children ) + .filter( Boolean ) + .map( ( child, i ) => ( + + { i > 0 && } + { child } + + ) ); +} + +function ViewTable( { + view, + onChangeView, + fields, + actions, + data, + getItemId, + isLoading = false, + paginationInfo, +} ) { + const columns = useMemo( () => { + const _columns = fields.map( ( field ) => { + const { render, getValue, ...column } = field; + column.cell = ( props ) => + render( { item: props.row.original, view } ); + if ( getValue ) { + column.accessorFn = ( item ) => getValue( { item } ); + } + return column; + } ); + if ( actions?.length ) { + _columns.push( { + header: __( 'Actions' ), + id: 'actions', + cell: ( props ) => { + return ( + + ); + }, + enableHiding: false, + } ); + } + + return _columns; + }, [ fields, actions, view ] ); + + const columnVisibility = useMemo( () => { + if ( ! view.hiddenFields?.length ) { + return; + } + return view.hiddenFields.reduce( + ( accumulator, fieldId ) => ( { + ...accumulator, + [ fieldId ]: false, + } ), + {} + ); + }, [ view.hiddenFields ] ); + + /** + * Transform the filters from the view format into the tanstack columns filter format. + * + * Input: + * + * view.filters = [ + * { field: 'date', operator: 'before', value: '2020-01-01' }, + * { field: 'date', operator: 'after', value: '2020-01-01' }, + * ] + * + * Output: + * + * columnFilters = [ + * { "date:before": '2020-01-01' }, + * { "date:after": '2020-01-01' } + * ] + * + * @param {Array} filters The view filters to transform. + * @return {Array} The transformed TanStack column filters. + */ + const toTanStackColumnFilters = ( filters ) => + filters?.map( ( filter ) => ( { + [ filter.field + ':' + filter.operator ]: filter.value, + } ) ); + + /** + * Transform the filters from the view format into the tanstack columns filter format. + * + * Input: + * + * columnFilters = [ + * { "date:before": '2020-01-01'}, + * { "date:after": '2020-01-01' } + * ] + * + * Output: + * + * view.filters = [ + * { field: 'date', operator: 'before', value: '2020-01-01' }, + * { field: 'date', operator: 'after', value: '2020-01-01' }, + * ] + * + * @param {Array} filters The TanStack column filters to transform. + * @return {Array} The transformed view filters. + */ + const fromTanStackColumnFilters = ( filters ) => + filters.map( ( filter ) => { + const [ key, value ] = Object.entries( filter )[ 0 ]; + const [ field, operator ] = key.split( ':' ); + return { field, operator, value }; + } ); + + const shownData = useAsyncList( data ); + const dataView = useReactTable( { + data: shownData, + columns, + manualSorting: true, + manualFiltering: true, + manualPagination: true, + enableRowSelection: true, + state: { + sorting: view.sort + ? [ + { + id: view.sort.field, + desc: view.sort.direction === 'desc', + }, + ] + : [], + globalFilter: view.search, + columnFilters: toTanStackColumnFilters( view.filters ), + pagination: { + pageIndex: view.page, + pageSize: view.perPage, + }, + columnVisibility: columnVisibility ?? EMPTY_OBJECT, + }, + getRowId: getItemId, + onSortingChange: ( sortingUpdater ) => { + onChangeView( ( currentView ) => { + const sort = + typeof sortingUpdater === 'function' + ? sortingUpdater( + currentView.sort + ? [ + { + id: currentView.sort.field, + desc: + currentView.sort + .direction === 'desc', + }, + ] + : [] + ) + : sortingUpdater; + if ( ! sort.length ) { + return { + ...currentView, + sort: {}, + }; + } + const [ { id, desc } ] = sort; + return { + ...currentView, + sort: { field: id, direction: desc ? 'desc' : 'asc' }, + }; + } ); + }, + onColumnVisibilityChange: ( columnVisibilityUpdater ) => { + onChangeView( ( currentView ) => { + const hiddenFields = Object.entries( + columnVisibilityUpdater() + ).reduce( + ( accumulator, [ fieldId, value ] ) => { + if ( value ) { + return accumulator.filter( + ( id ) => id !== fieldId + ); + } + return [ ...accumulator, fieldId ]; + }, + [ ...( currentView.hiddenFields || [] ) ] + ); + return { + ...currentView, + hiddenFields, + }; + } ); + }, + onGlobalFilterChange: ( value ) => { + onChangeView( { ...view, search: value, page: 1 } ); + }, + onColumnFiltersChange: ( columnFiltersUpdater ) => { + onChangeView( { + ...view, + filters: fromTanStackColumnFilters( columnFiltersUpdater() ), + page: 1, + } ); + }, + onPaginationChange: ( paginationUpdater ) => { + onChangeView( ( currentView ) => { + const { pageIndex, pageSize } = paginationUpdater( { + pageIndex: currentView.page, + pageSize: currentView.perPage, + } ); + return { ...view, page: pageIndex, perPage: pageSize }; + } ); + }, + getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getSortedRowModel: getSortedRowModel(), + getPaginationRowModel: getPaginationRowModel(), + pageCount: paginationInfo.totalPages, + } ); + + const { rows } = dataView.getRowModel(); + const hasRows = !! rows?.length; + if ( isLoading ) { + // TODO:Add spinner or progress bar.. + return

{ __( 'Loading' ) }

; + } + return ( +
+ { hasRows && ( + + + { dataView.getHeaderGroups().map( ( headerGroup ) => ( + + { headerGroup.headers.map( ( header ) => ( + + ) ) } + + ) ) } + + + { rows.map( ( row ) => ( + + { row.getVisibleCells().map( ( cell ) => ( + + ) ) } + + ) ) } + +
+ +
+ { flexRender( + cell.column.columnDef.cell, + cell.getContext() + ) } +
+ ) } + { ! hasRows &&

{ __( 'no results' ) }

} +
+ ); +} + +export default ViewTable; From 9432e65b6e9bd18c2b5f14497950a522cf199e78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:32:13 +0100 Subject: [PATCH 05/61] ViewActions: remove unnecessary icon management --- packages/dataviews/src/view-actions.js | 41 ++++---------------------- 1 file changed, 6 insertions(+), 35 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 1ee596fca2737..c62a1eadeb8b0 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -6,7 +6,7 @@ import { Icon, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { chevronRightSmall, arrowUp, arrowDown } from '@wordpress/icons'; +import { arrowUp, arrowDown } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; /** @@ -37,14 +37,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { return ( - { activeView.label } - - - } - > + { __( 'Layout' ) } } @@ -77,14 +70,7 @@ function PageSizeMenu( { view, onChangeView } ) { return ( - { view.perPage } - - - } - > + { /* TODO: probably label per view type. */ } { __( 'Rows per page' ) } @@ -120,13 +106,7 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } return ( } - > - { __( 'Fields' ) } - - } + trigger={ { __( 'Fields' ) } } placement="left-start" > { hidableFields?.map( ( field ) => { @@ -177,14 +157,7 @@ function SortMenu( { fields, view, onChangeView } ) { return ( - { currentSortedField?.header } - - - } - > + { __( 'Sort by' ) } } @@ -196,9 +169,7 @@ function SortMenu( { fields, view, onChangeView } ) { } - > + { field.header } } From ee4d695ad78a025ccfbde38dca2999e07a61df1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:37:03 +0100 Subject: [PATCH 06/61] ViewTable: remove SubMenu, SubMenuTrigger, and use RadioItem --- .../src/components/dataviews/view-table.js | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-table.js b/packages/edit-site/src/components/dataviews/view-table.js index f016e1e8cf6e7..5db4f4fab3b5f 100644 --- a/packages/edit-site/src/components/dataviews/view-table.js +++ b/packages/edit-site/src/components/dataviews/view-table.js @@ -19,10 +19,8 @@ import { chevronDown, chevronUp, unseen, - check, arrowUp, arrowDown, - chevronRightSmall, funnel, } from '@wordpress/icons'; import { @@ -45,9 +43,6 @@ const { DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, - // TODO: check if we should use menus & items, like in view-actions. - DropdownSubMenuV2: DropdownSubMenu, - DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, } = unlock( componentsPrivateApis ); const EMPTY_OBJECT = {}; @@ -138,17 +133,14 @@ function HeaderMenu( { dataView, header } ) { ) } { isFilterable && ( - } - suffix={ - - } > { __( 'Filter by' ) } - + } > { filter.elements.map( ( element ) => { @@ -171,14 +163,12 @@ function HeaderMenu( { dataView, header } ) { } return ( - - } - onSelect={ () => { + value={ element.value } + name="view-table-column-filter-item" + checked={ isActive } + onChange={ () => { const otherFilters = columnFilters?.filter( ( f ) => { @@ -210,10 +200,10 @@ function HeaderMenu( { dataView, header } ) { } } > { element.label } - + ); } ) } - + ) } From b3575f2209b9b1c9a3d562599912f9ffbdb71d9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:40:51 +0100 Subject: [PATCH 07/61] Use Ariakit versions in FilterSummary as well --- .../components/dataviews/filter-summary.js | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 packages/edit-site/src/components/dataviews/filter-summary.js diff --git a/packages/edit-site/src/components/dataviews/filter-summary.js b/packages/edit-site/src/components/dataviews/filter-summary.js new file mode 100644 index 0000000000000..744ba21cba99f --- /dev/null +++ b/packages/edit-site/src/components/dataviews/filter-summary.js @@ -0,0 +1,80 @@ +/** + * WordPress dependencies + */ +import { + Button, + privateApis as componentsPrivateApis, + Icon, +} from '@wordpress/components'; +import { chevronDown } from '@wordpress/icons'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { OPERATOR_IN } from './constants'; +import { unlock } from '../../lock-unlock'; + +const { + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, +} = unlock( componentsPrivateApis ); + +export default function FilterSummary( { filter, view, onChangeView } ) { + const filterInView = view.filters.find( ( f ) => f.field === filter.field ); + const activeElement = filter.elements.find( + ( element ) => element.value === filterInView?.value + ); + + return ( + + { activeElement !== undefined + ? sprintf( + /* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */ + __( '%1$s is %2$s' ), + filter.name, + activeElement.label + ) + : filter.name } + + + } + > + { filter.elements.map( ( element ) => { + return ( + + onChangeView( ( currentView ) => ( { + ...currentView, + page: 1, + filters: [ + ...view.filters.filter( + ( f ) => f.field !== filter.field + ), + { + field: filter.field, + operator: OPERATOR_IN, + value: + activeElement?.value === + element.value + ? undefined + : element.value, + }, + ], + } ) ) + } + > + { element.label } + + ); + } ) } + + ); +} From b3179a875412834f5b86d9871ce261fde6ea5b5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:56:14 +0100 Subject: [PATCH 08/61] AddFilter: migrate to Ariakit --- .../src/components/dataviews/add-filter.js | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 packages/edit-site/src/components/dataviews/add-filter.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js new file mode 100644 index 0000000000000..4c4051b3a5b11 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -0,0 +1,101 @@ +/** + * WordPress dependencies + */ +import { + privateApis as componentsPrivateApis, + Button, + Icon, +} from '@wordpress/components'; +import { plus } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { ENUMERATION_TYPE, OPERATOR_IN } from './constants'; + +const { + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuItemV2Ariakit: DropdownMenuItem, +} = unlock( componentsPrivateApis ); + +export default function AddFilter( { fields, view, onChangeView } ) { + const filters = []; + fields.forEach( ( field ) => { + if ( ! field.type ) { + return; + } + + switch ( field.type ) { + case ENUMERATION_TYPE: + filters.push( { + field: field.id, + name: field.header, + elements: field.elements || [], + isVisible: view.filters.some( + ( f ) => + f.field === field.id && f.operator === OPERATOR_IN + ), + } ); + } + } ); + + if ( filters.length === 0 ) { + return null; + } + + return ( + + + { __( 'Add filter' ) } + + } + > + { filters.map( ( filter ) => { + if ( filter.isVisible ) { + return null; + } + + return ( + { filter.name } + } + > + { filter.elements.map( ( element ) => ( + { + onChangeView( ( currentView ) => ( { + ...currentView, + page: 1, + filters: [ + ...currentView.filters, + { + field: filter.field, + operator: OPERATOR_IN, + value: element.value, + }, + ], + } ) ); + } } + > + { element.label } + + ) ) } + + ); + } ) } + + ); +} From a74c886354530fbd1647539caf8c7cdd1e7a341c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:07:25 +0100 Subject: [PATCH 09/61] Update sort behavior to match RadioItem (cannot be unset once set) --- packages/dataviews/src/view-actions.js | 4 ++-- .../src/components/dataviews/view-table.js | 19 ++++++------------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index c62a1eadeb8b0..ad37914a91152 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -190,8 +190,8 @@ function SortMenu( { fields, view, onChangeView } ) { suffix={ } // Note: there is currently a limitation from the DropdownMenu // component where the radio won't unselect when all related - // radios are set to false. - checked={ isActive } + // radios are set to false. + checked={ isChecked } onChange={ ( event ) => { event.preventDefault(); onChangeView( { diff --git a/packages/edit-site/src/components/dataviews/view-table.js b/packages/edit-site/src/components/dataviews/view-table.js index 5db4f4fab3b5f..9462b6690805c 100644 --- a/packages/edit-site/src/components/dataviews/view-table.js +++ b/packages/edit-site/src/components/dataviews/view-table.js @@ -97,22 +97,15 @@ function HeaderMenu( { dataView, header } ) { key={ direction } value={ direction } name="view-table-column-sorting" - // Note: there is currently a limitation from the DropdownMenu - // component where the radio won't unselect when all related - // radios are set to false. checked={ sortedDirection === direction } suffix={ } onChange={ () => { - if ( sortedDirection === direction ) { - dataView.resetSorting(); - } else { - dataView.setSorting( [ - { - id: header.column.id, - desc: direction === 'desc', - }, - ] ); - } + dataView.setSorting( [ + { + id: header.column.id, + desc: direction === 'desc', + }, + ] ); } } > { info.label } From 7530ed49f6f20eff77cc5413e38126e33e19540b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:04:07 +0100 Subject: [PATCH 10/61] Remove old add-filter file --- .../src/components/dataviews/add-filter.js | 101 ------------------ 1 file changed, 101 deletions(-) delete mode 100644 packages/edit-site/src/components/dataviews/add-filter.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js deleted file mode 100644 index 4c4051b3a5b11..0000000000000 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * WordPress dependencies - */ -import { - privateApis as componentsPrivateApis, - Button, - Icon, -} from '@wordpress/components'; -import { plus } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; -import { ENUMERATION_TYPE, OPERATOR_IN } from './constants'; - -const { - DropdownMenuV2Ariakit: DropdownMenu, - DropdownMenuItemV2Ariakit: DropdownMenuItem, -} = unlock( componentsPrivateApis ); - -export default function AddFilter( { fields, view, onChangeView } ) { - const filters = []; - fields.forEach( ( field ) => { - if ( ! field.type ) { - return; - } - - switch ( field.type ) { - case ENUMERATION_TYPE: - filters.push( { - field: field.id, - name: field.header, - elements: field.elements || [], - isVisible: view.filters.some( - ( f ) => - f.field === field.id && f.operator === OPERATOR_IN - ), - } ); - } - } ); - - if ( filters.length === 0 ) { - return null; - } - - return ( - - - { __( 'Add filter' ) } - - } - > - { filters.map( ( filter ) => { - if ( filter.isVisible ) { - return null; - } - - return ( - { filter.name } - } - > - { filter.elements.map( ( element ) => ( - { - onChangeView( ( currentView ) => ( { - ...currentView, - page: 1, - filters: [ - ...currentView.filters, - { - field: filter.field, - operator: OPERATOR_IN, - value: element.value, - }, - ], - } ) ); - } } - > - { element.label } - - ) ) } - - ); - } ) } - - ); -} From b8698ab532b4032187be139ce48f9edc1ddc1cfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:05:27 +0100 Subject: [PATCH 11/61] Use ariakit components --- packages/dataviews/src/add-filter.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index c403baa9c13d3..aa6e4e3782895 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -17,12 +17,12 @@ import { unlock } from './lock-unlock'; import { LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; const { - DropdownMenuV2: DropdownMenu, - DropdownMenuGroupV2: DropdownMenuGroup, - DropdownSubMenuV2: DropdownSubMenu, - DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, - DropdownMenuItemV2: DropdownMenuItem, - DropdownMenuSeparatorV2: DropdownMenuSeparator, + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuGroupV2Ariakit: DropdownMenuGroup, + DropdownSubMenuV2Ariakit: DropdownSubMenu, + DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, + DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, } = unlock( componentsPrivateApis ); function WithSeparators( { children } ) { From f50a1b66c9aaf3d4057a78732587d2ab269528f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:05:40 +0100 Subject: [PATCH 12/61] remove submenu trigger --- packages/dataviews/src/add-filter.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index aa6e4e3782895..5a3d2b6da7c86 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -20,7 +20,6 @@ const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownSubMenuV2Ariakit: DropdownSubMenu, - DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, } = unlock( componentsPrivateApis ); @@ -85,7 +84,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { { activeElement && @@ -105,7 +104,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { } > { filter.name } - + } > @@ -153,7 +152,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { { filter.operators.length > 1 && ( { activeOperator === @@ -171,7 +170,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { } > { __( 'Conditions' ) } - + } > Date: Thu, 14 Dec 2023 16:08:10 +0100 Subject: [PATCH 13/61] DropdownMenuItem: substitute onSelect by onClick --- packages/dataviews/src/add-filter.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 5a3d2b6da7c86..dfdaa6a7b90c6 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -125,7 +125,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { /> ) } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -186,7 +186,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { ) } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -218,7 +218,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { ) } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -242,7 +242,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { { + onClick={ ( event ) => { event.preventDefault(); onChangeView( ( currentView ) => ( { ...currentView, @@ -271,7 +271,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { disabled={ view.search === '' && view.filters?.length === 0 } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( ( currentView ) => ( { ...currentView, From 8cedafb3dcc266c41a6fc144e4b8db10a50e719e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:09:11 +0100 Subject: [PATCH 14/61] Remove old filter-summary file --- .../components/dataviews/filter-summary.js | 80 ------------------- 1 file changed, 80 deletions(-) delete mode 100644 packages/edit-site/src/components/dataviews/filter-summary.js diff --git a/packages/edit-site/src/components/dataviews/filter-summary.js b/packages/edit-site/src/components/dataviews/filter-summary.js deleted file mode 100644 index 744ba21cba99f..0000000000000 --- a/packages/edit-site/src/components/dataviews/filter-summary.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * WordPress dependencies - */ -import { - Button, - privateApis as componentsPrivateApis, - Icon, -} from '@wordpress/components'; -import { chevronDown } from '@wordpress/icons'; -import { __, sprintf } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { OPERATOR_IN } from './constants'; -import { unlock } from '../../lock-unlock'; - -const { - DropdownMenuV2Ariakit: DropdownMenu, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, -} = unlock( componentsPrivateApis ); - -export default function FilterSummary( { filter, view, onChangeView } ) { - const filterInView = view.filters.find( ( f ) => f.field === filter.field ); - const activeElement = filter.elements.find( - ( element ) => element.value === filterInView?.value - ); - - return ( - - { activeElement !== undefined - ? sprintf( - /* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */ - __( '%1$s is %2$s' ), - filter.name, - activeElement.label - ) - : filter.name } - - - } - > - { filter.elements.map( ( element ) => { - return ( - - onChangeView( ( currentView ) => ( { - ...currentView, - page: 1, - filters: [ - ...view.filters.filter( - ( f ) => f.field !== filter.field - ), - { - field: filter.field, - operator: OPERATOR_IN, - value: - activeElement?.value === - element.value - ? undefined - : element.value, - }, - ], - } ) ) - } - > - { element.label } - - ); - } ) } - - ); -} From 3b21c2f347510ff895184a8d8525d2b6cefe3f02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:09:41 +0100 Subject: [PATCH 15/61] FilterSummary: use the ariakit versions --- packages/dataviews/src/filter-summary.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 098e73db5eeb3..25f93e2c3c8ac 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -17,12 +17,12 @@ import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; import { unlock } from './lock-unlock'; const { - DropdownMenuV2: DropdownMenu, - DropdownMenuGroupV2: DropdownMenuGroup, - DropdownMenuItemV2: DropdownMenuItem, - DropdownMenuSeparatorV2: DropdownMenuSeparator, - DropdownSubMenuV2: DropdownSubMenu, - DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuGroupV2Ariakit: DropdownMenuGroup, + DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + DropdownSubMenuV2Ariakit: DropdownSubMenu, + DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, } = unlock( componentsPrivateApis ); const FilterText = ( { activeElement, filterInView, filter } ) => { From e28f4c9ecc5983c63e0f7693b52955a782ab9f1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:10:19 +0100 Subject: [PATCH 16/61] Substitute trigger by menuitem --- packages/dataviews/src/filter-summary.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 25f93e2c3c8ac..b69cc11cdcfb0 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -22,7 +22,6 @@ const { DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownSubMenuV2Ariakit: DropdownSubMenu, - DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, } = unlock( componentsPrivateApis ); const FilterText = ( { activeElement, filterInView, filter } ) => { @@ -131,7 +130,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { { filter.operators.length > 1 && ( { activeOperator === OPERATOR_IN && @@ -143,7 +142,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { } > { __( 'Conditions' ) } - + } > Date: Thu, 14 Dec 2023 16:10:51 +0100 Subject: [PATCH 17/61] DropdownMenuItem: substitute onSelect by onClick --- packages/dataviews/src/filter-summary.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index b69cc11cdcfb0..5c7b9d55e5dce 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -105,7 +105,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { role="menuitemradio" aria-checked={ isActive } prefix={ isActive && } - onSelect={ () => + onClick={ () => onChangeView( { ...view, page: 1, @@ -154,7 +154,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { ) } - onSelect={ () => + onClick={ () => onChangeView( { ...view, page: 1, @@ -180,7 +180,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { ) } - onSelect={ () => + onClick={ () => onChangeView( { ...view, page: 1, From b6ba5750d36b5916a265e6d30c883c9db992a45e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:13:53 +0100 Subject: [PATCH 18/61] Remove old view-table file --- .../src/components/dataviews/view-table.js | 498 ------------------ 1 file changed, 498 deletions(-) delete mode 100644 packages/edit-site/src/components/dataviews/view-table.js diff --git a/packages/edit-site/src/components/dataviews/view-table.js b/packages/edit-site/src/components/dataviews/view-table.js deleted file mode 100644 index 9462b6690805c..0000000000000 --- a/packages/edit-site/src/components/dataviews/view-table.js +++ /dev/null @@ -1,498 +0,0 @@ -/** - * External dependencies - */ -import { - getCoreRowModel, - getFilteredRowModel, - getSortedRowModel, - getPaginationRowModel, - useReactTable, - flexRender, -} from '@tanstack/react-table'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useAsyncList } from '@wordpress/compose'; -import { - chevronDown, - chevronUp, - unseen, - arrowUp, - arrowDown, - funnel, -} from '@wordpress/icons'; -import { - Button, - Icon, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; -import { useMemo, Children, Fragment } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; -import ItemActions from './item-actions'; -import { ENUMERATION_TYPE, OPERATOR_IN } from './constants'; - -const { - DropdownMenuV2Ariakit: DropdownMenu, - DropdownMenuGroupV2Ariakit: DropdownMenuGroup, - DropdownMenuItemV2Ariakit: DropdownMenuItem, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, - DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, -} = unlock( componentsPrivateApis ); - -const EMPTY_OBJECT = {}; -const sortingItemsInfo = { - asc: { icon: arrowUp, label: __( 'Sort ascending' ) }, - desc: { icon: arrowDown, label: __( 'Sort descending' ) }, -}; -const sortIcons = { asc: chevronUp, desc: chevronDown }; - -function HeaderMenu( { dataView, header } ) { - if ( header.isPlaceholder ) { - return null; - } - const text = flexRender( - header.column.columnDef.header, - header.getContext() - ); - const isSortable = !! header.column.getCanSort(); - const isHidable = !! header.column.getCanHide(); - if ( ! isSortable && ! isHidable ) { - return text; - } - const sortedDirection = header.column.getIsSorted(); - - let filter; - if ( header.column.columnDef.type === ENUMERATION_TYPE ) { - filter = { - field: header.column.columnDef.id, - elements: header.column.columnDef.elements || [], - }; - } - const isFilterable = !! filter; - - return ( - - } - > - - { isSortable && ( - - { Object.entries( sortingItemsInfo ).map( - ( [ direction, info ] ) => ( - } - onChange={ () => { - dataView.setSorting( [ - { - id: header.column.id, - desc: direction === 'desc', - }, - ] ); - } } - > - { info.label } - - ) - ) } - - ) } - { isHidable && ( - } - onClick={ ( event ) => { - header.column.getToggleVisibilityHandler()( event ); - } } - > - { __( 'Hide' ) } - - ) } - { isFilterable && ( - - } - > - { __( 'Filter by' ) } - - } - > - { filter.elements.map( ( element ) => { - let isActive = false; - const columnFilters = - dataView.getState().columnFilters; - const columnFilter = columnFilters.find( - ( f ) => - Object.keys( f )[ 0 ].split( - ':' - )[ 0 ] === filter.field - ); - - if ( columnFilter ) { - const value = - Object.values( columnFilter )[ 0 ]; - // Intentionally use loose comparison, so it does type conversion. - // This covers the case where a top-level filter for the same field converts a number into a string. - isActive = element.value == value; // eslint-disable-line eqeqeq - } - - return ( - { - const otherFilters = - columnFilters?.filter( - ( f ) => { - const [ - field, - operator, - ] = - Object.keys( - f - )[ 0 ].split( ':' ); - return ( - field !== - filter.field || - operator !== - OPERATOR_IN - ); - } - ); - - dataView.setColumnFilters( [ - ...otherFilters, - { - [ filter.field + ':in' ]: - isActive - ? undefined - : element.value, - }, - ] ); - } } - > - { element.label } - - ); - } ) } - - - ) } - - - ); -} - -function WithSeparators( { children } ) { - return Children.toArray( children ) - .filter( Boolean ) - .map( ( child, i ) => ( - - { i > 0 && } - { child } - - ) ); -} - -function ViewTable( { - view, - onChangeView, - fields, - actions, - data, - getItemId, - isLoading = false, - paginationInfo, -} ) { - const columns = useMemo( () => { - const _columns = fields.map( ( field ) => { - const { render, getValue, ...column } = field; - column.cell = ( props ) => - render( { item: props.row.original, view } ); - if ( getValue ) { - column.accessorFn = ( item ) => getValue( { item } ); - } - return column; - } ); - if ( actions?.length ) { - _columns.push( { - header: __( 'Actions' ), - id: 'actions', - cell: ( props ) => { - return ( - - ); - }, - enableHiding: false, - } ); - } - - return _columns; - }, [ fields, actions, view ] ); - - const columnVisibility = useMemo( () => { - if ( ! view.hiddenFields?.length ) { - return; - } - return view.hiddenFields.reduce( - ( accumulator, fieldId ) => ( { - ...accumulator, - [ fieldId ]: false, - } ), - {} - ); - }, [ view.hiddenFields ] ); - - /** - * Transform the filters from the view format into the tanstack columns filter format. - * - * Input: - * - * view.filters = [ - * { field: 'date', operator: 'before', value: '2020-01-01' }, - * { field: 'date', operator: 'after', value: '2020-01-01' }, - * ] - * - * Output: - * - * columnFilters = [ - * { "date:before": '2020-01-01' }, - * { "date:after": '2020-01-01' } - * ] - * - * @param {Array} filters The view filters to transform. - * @return {Array} The transformed TanStack column filters. - */ - const toTanStackColumnFilters = ( filters ) => - filters?.map( ( filter ) => ( { - [ filter.field + ':' + filter.operator ]: filter.value, - } ) ); - - /** - * Transform the filters from the view format into the tanstack columns filter format. - * - * Input: - * - * columnFilters = [ - * { "date:before": '2020-01-01'}, - * { "date:after": '2020-01-01' } - * ] - * - * Output: - * - * view.filters = [ - * { field: 'date', operator: 'before', value: '2020-01-01' }, - * { field: 'date', operator: 'after', value: '2020-01-01' }, - * ] - * - * @param {Array} filters The TanStack column filters to transform. - * @return {Array} The transformed view filters. - */ - const fromTanStackColumnFilters = ( filters ) => - filters.map( ( filter ) => { - const [ key, value ] = Object.entries( filter )[ 0 ]; - const [ field, operator ] = key.split( ':' ); - return { field, operator, value }; - } ); - - const shownData = useAsyncList( data ); - const dataView = useReactTable( { - data: shownData, - columns, - manualSorting: true, - manualFiltering: true, - manualPagination: true, - enableRowSelection: true, - state: { - sorting: view.sort - ? [ - { - id: view.sort.field, - desc: view.sort.direction === 'desc', - }, - ] - : [], - globalFilter: view.search, - columnFilters: toTanStackColumnFilters( view.filters ), - pagination: { - pageIndex: view.page, - pageSize: view.perPage, - }, - columnVisibility: columnVisibility ?? EMPTY_OBJECT, - }, - getRowId: getItemId, - onSortingChange: ( sortingUpdater ) => { - onChangeView( ( currentView ) => { - const sort = - typeof sortingUpdater === 'function' - ? sortingUpdater( - currentView.sort - ? [ - { - id: currentView.sort.field, - desc: - currentView.sort - .direction === 'desc', - }, - ] - : [] - ) - : sortingUpdater; - if ( ! sort.length ) { - return { - ...currentView, - sort: {}, - }; - } - const [ { id, desc } ] = sort; - return { - ...currentView, - sort: { field: id, direction: desc ? 'desc' : 'asc' }, - }; - } ); - }, - onColumnVisibilityChange: ( columnVisibilityUpdater ) => { - onChangeView( ( currentView ) => { - const hiddenFields = Object.entries( - columnVisibilityUpdater() - ).reduce( - ( accumulator, [ fieldId, value ] ) => { - if ( value ) { - return accumulator.filter( - ( id ) => id !== fieldId - ); - } - return [ ...accumulator, fieldId ]; - }, - [ ...( currentView.hiddenFields || [] ) ] - ); - return { - ...currentView, - hiddenFields, - }; - } ); - }, - onGlobalFilterChange: ( value ) => { - onChangeView( { ...view, search: value, page: 1 } ); - }, - onColumnFiltersChange: ( columnFiltersUpdater ) => { - onChangeView( { - ...view, - filters: fromTanStackColumnFilters( columnFiltersUpdater() ), - page: 1, - } ); - }, - onPaginationChange: ( paginationUpdater ) => { - onChangeView( ( currentView ) => { - const { pageIndex, pageSize } = paginationUpdater( { - pageIndex: currentView.page, - pageSize: currentView.perPage, - } ); - return { ...view, page: pageIndex, perPage: pageSize }; - } ); - }, - getCoreRowModel: getCoreRowModel(), - getFilteredRowModel: getFilteredRowModel(), - getSortedRowModel: getSortedRowModel(), - getPaginationRowModel: getPaginationRowModel(), - pageCount: paginationInfo.totalPages, - } ); - - const { rows } = dataView.getRowModel(); - const hasRows = !! rows?.length; - if ( isLoading ) { - // TODO:Add spinner or progress bar.. - return

{ __( 'Loading' ) }

; - } - return ( -
- { hasRows && ( - - - { dataView.getHeaderGroups().map( ( headerGroup ) => ( - - { headerGroup.headers.map( ( header ) => ( - - ) ) } - - ) ) } - - - { rows.map( ( row ) => ( - - { row.getVisibleCells().map( ( cell ) => ( - - ) ) } - - ) ) } - -
- -
- { flexRender( - cell.column.columnDef.cell, - cell.getContext() - ) } -
- ) } - { ! hasRows &&

{ __( 'no results' ) }

} -
- ); -} - -export default ViewTable; From ff2e74e50265da257d0a91c034f16aaeb58be0ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:14:32 +0100 Subject: [PATCH 19/61] ViewTable: update to ariakit --- packages/dataviews/src/view-table.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index d676ceaf14748..27605b80c9ba5 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -26,12 +26,12 @@ import ItemActions from './item-actions'; import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; const { - DropdownMenuV2: DropdownMenu, - DropdownMenuGroupV2: DropdownMenuGroup, - DropdownMenuItemV2: DropdownMenuItem, - DropdownMenuSeparatorV2: DropdownMenuSeparator, - DropdownSubMenuV2: DropdownSubMenu, - DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, + DropdownMenuV2Ariakit: DropdownMenu, + DropdownMenuGroupV2Ariakit: DropdownMenuGroup, + DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + DropdownSubMenuV2Ariakit: DropdownSubMenu, + DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, } = unlock( componentsPrivateApis ); const sortingItemsInfo = { From fe549a92fa485bd2b4242de3bf62e51272e94dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:15:18 +0100 Subject: [PATCH 20/61] Remove trigger --- packages/dataviews/src/view-table.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 27605b80c9ba5..a5acb41acd40a 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -31,7 +31,6 @@ const { DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownSubMenuV2Ariakit: DropdownSubMenu, - DropdownSubMenuTriggerV2Ariakit: DropdownSubMenuTrigger, } = unlock( componentsPrivateApis ); const sortingItemsInfo = { @@ -153,7 +152,7 @@ function HeaderMenu( { field, view, onChangeView } ) { } suffix={ <> @@ -172,7 +171,7 @@ function HeaderMenu( { field, view, onChangeView } ) { } > { __( 'Filter by' ) } - + } > @@ -217,7 +216,7 @@ function HeaderMenu( { field, view, onChangeView } ) { { filter.operators.length > 1 && ( { activeOperator === @@ -235,7 +234,7 @@ function HeaderMenu( { field, view, onChangeView } ) { } > { __( 'Conditions' ) } - + } > Date: Thu, 14 Dec 2023 16:15:57 +0100 Subject: [PATCH 21/61] DropdownMenuItem: substitute onSelect by onClick --- packages/dataviews/src/view-table.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index a5acb41acd40a..cfa30e0391091 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -111,7 +111,7 @@ function HeaderMenu( { field, view, onChangeView } ) { suffix={ isActive && } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -134,7 +134,7 @@ function HeaderMenu( { field, view, onChangeView } ) { role="menuitemradio" aria-checked={ false } prefix={ } - onSelect={ ( event ) => { + onClick={ ( event ) => { event.preventDefault(); onChangeView( { ...view, @@ -190,7 +190,7 @@ function HeaderMenu( { field, view, onChangeView } ) { ) } - onSelect={ () => { + onClick={ () => { onChangeView( { ...view, page: 1, @@ -249,7 +249,7 @@ function HeaderMenu( { field, view, onChangeView } ) { ) } - onSelect={ () => + onClick={ () => onChangeView( { ...view, page: 1, @@ -280,7 +280,7 @@ function HeaderMenu( { field, view, onChangeView } ) { ) } - onSelect={ () => + onClick={ () => onChangeView( { ...view, page: 1, From 9e854fe3932cb905b0ee702e58eafb03916ce111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:18:42 +0100 Subject: [PATCH 22/61] Remove DropdownSubMenu in favor of DropdownMenu across dataviews package --- packages/dataviews/src/add-filter.js | 9 ++++----- packages/dataviews/src/filter-summary.js | 5 ++--- packages/dataviews/src/view-table.js | 9 ++++----- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index dfdaa6a7b90c6..322a62486f61e 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -19,7 +19,6 @@ import { LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, - DropdownSubMenuV2Ariakit: DropdownSubMenu, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, } = unlock( componentsPrivateApis ); @@ -81,7 +80,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { const activeOperator = filterInView?.operator || filter.operators[ 0 ]; return ( - { filter.operators.length > 1 && ( - { __( 'Is not' ) } - + ) } - + ); } ) } diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 5c7b9d55e5dce..09473a4407d4b 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -21,7 +21,6 @@ const { DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, - DropdownSubMenuV2Ariakit: DropdownSubMenu, } = unlock( componentsPrivateApis ); const FilterText = ( { activeElement, filterInView, filter } ) => { @@ -128,7 +127,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { } ) } { filter.operators.length > 1 && ( - { __( 'Is not' ) } - + ) } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index cfa30e0391091..fccd7b0f9fee3 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -30,7 +30,6 @@ const { DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, - DropdownSubMenuV2Ariakit: DropdownSubMenu, } = unlock( componentsPrivateApis ); const sortingItemsInfo = { @@ -149,7 +148,7 @@ function HeaderMenu( { field, view, onChangeView } ) { ) } { isFilterable && ( - { filter.operators.length > 1 && ( - { __( 'Is not' ) } - + ) } - + ) } From fb231287d4ba189721a24b30a80fd45a62515e7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:22:00 +0100 Subject: [PATCH 23/61] Remove suffix chevronrightsmall across dataviews --- packages/dataviews/src/add-filter.js | 14 ++++---------- packages/dataviews/src/filter-summary.js | 3 +-- packages/dataviews/src/view-table.js | 19 ++++--------------- 3 files changed, 9 insertions(+), 27 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 322a62486f61e..ee78ac886df60 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -6,7 +6,7 @@ import { Button, Icon, } from '@wordpress/components'; -import { chevronRightSmall, funnel, check } from '@wordpress/icons'; +import { funnel, check } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { Children, Fragment } from '@wordpress/element'; @@ -96,9 +96,6 @@ export default function AddFilter( { filters, view, onChangeView } ) { __( 'Is not' ) } { activeElement && ' ' } { activeElement?.label } - } > @@ -159,12 +156,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { __( 'Is' ) } { activeOperator === OPERATOR_NOT_IN && - __( 'Is not' ) } - { ' ' } + __( + 'Is not' + ) }{ ' ' } } > diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 09473a4407d4b..5c87de37cebe6 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -6,7 +6,7 @@ import { privateApis as componentsPrivateApis, Icon, } from '@wordpress/components'; -import { chevronDown, chevronRightSmall, check } from '@wordpress/icons'; +import { chevronDown, check } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { Children, Fragment } from '@wordpress/element'; @@ -136,7 +136,6 @@ export default function FilterSummary( { filter, view, onChangeView } ) { __( 'Is' ) } { activeOperator === OPERATOR_NOT_IN && __( 'Is not' ) } - { ' ' } } > diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index fccd7b0f9fee3..9bf798485969b 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -3,14 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useAsyncList } from '@wordpress/compose'; -import { - unseen, - check, - arrowUp, - arrowDown, - chevronRightSmall, - funnel, -} from '@wordpress/icons'; +import { unseen, check, arrowUp, arrowDown, funnel } from '@wordpress/icons'; import { Button, Icon, @@ -165,7 +158,6 @@ function HeaderMenu( { field, view, onChangeView } ) { __( 'Is not' ) } { activeElement && ' ' } { activeElement?.label } - } > @@ -223,12 +215,9 @@ function HeaderMenu( { field, view, onChangeView } ) { __( 'Is' ) } { activeOperator === OPERATOR_NOT_IN && - __( 'Is not' ) } - { ' ' } + __( + 'Is not' + ) }{ ' ' } } > From 2e7855d68ceb22a8f473977703963af226a2245d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:29:17 +0100 Subject: [PATCH 24/61] Fix rebase for view-actions --- packages/dataviews/src/view-actions.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index ad37914a91152..8fe5c352fd05c 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -49,7 +49,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { key={ availableView.type } value={ availableView.type } name="view-actions-available-view" - checked={ availableView.type === view.type } + checked={ availableView.id === view.type } onChange={ () => { onChangeView( { ...view, @@ -84,7 +84,9 @@ function PageSizeMenu( { view, onChangeView } ) { value={ size } name="view-actions-page-size" checked={ view.perPage === size } - onChange={ () => { + onChange={ ( event ) => { + // We need to handle this on DropDown component probably.. + event.preventDefault(); onChangeView( { ...view, perPage: size, page: 1 } ); } } > @@ -115,7 +117,8 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { key={ field.id } value={ field.id } checked={ ! view.hiddenFields?.includes( field.id ) } - onChange={ () => { + onChange={ ( event ) => { + event.preventDefault(); onChangeView( { ...view, hiddenFields: view.hiddenFields?.includes( @@ -177,8 +180,8 @@ function SortMenu( { fields, view, onChangeView } ) { > { Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => { - const isChecked = - currentSortedField !== undefined && + const isActive = + currentSortedField && sortedDirection === direction && field.id === currentSortedField.id; @@ -190,8 +193,8 @@ function SortMenu( { fields, view, onChangeView } ) { suffix={ } // Note: there is currently a limitation from the DropdownMenu // component where the radio won't unselect when all related - // radios are set to false. - checked={ isChecked } + // radios are set to false. + checked={ isActive } onChange={ ( event ) => { event.preventDefault(); onChangeView( { From 5c4e94067b58698191798d092becaf33bad9ff95 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 14 Dec 2023 17:29:00 +0100 Subject: [PATCH 25/61] Remove unnecessary label --- packages/dataviews/src/add-filter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index ee78ac886df60..6914cafbe6aab 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -48,7 +48,6 @@ export default function AddFilter( { filters, view, onChangeView } ) { return ( Date: Thu, 14 Dec 2023 17:29:48 +0100 Subject: [PATCH 26/61] Use DropdownMenuItemLabel component --- packages/dataviews/src/add-filter.js | 37 ++++++++++++++------- packages/dataviews/src/filter-summary.js | 17 +++++++--- packages/dataviews/src/view-actions.js | 42 ++++++++++++++++++------ packages/dataviews/src/view-table.js | 29 ++++++++++++---- 4 files changed, 93 insertions(+), 32 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 6914cafbe6aab..147191ec0ac11 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -21,6 +21,7 @@ const { DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); function WithSeparators( { children } ) { @@ -98,7 +99,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } > - { filter.name } + + { filter.name } + } > @@ -139,7 +142,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } ); } } > - { element.label } + + { element.label } + ); } ) } @@ -161,7 +166,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } > - { __( 'Conditions' ) } + + { __( 'Conditions' ) } + } > @@ -195,7 +202,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } ); } } > - { __( 'Is' ) } + + { __( 'Is' ) } + - { __( 'Is not' ) } + + { __( 'Is not' ) } + ) } @@ -248,11 +259,13 @@ export default function AddFilter( { filters, view, onChangeView } ) { } ) ); } } > - { sprintf( - /* translators: 1: Filter name. e.g.: "Reset Author". */ - __( 'Reset %1$s' ), - filter.name.toLowerCase() - ) } + + { sprintf( + /* translators: 1: Filter name. e.g.: "Reset Author". */ + __( 'Reset %1$s' ), + filter.name.toLowerCase() + ) } + @@ -272,7 +285,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } ) ); } } > - { __( 'Reset filters' ) } + + { __( 'Reset filters' ) } + diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 5c87de37cebe6..e7fa288374bc2 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -21,6 +21,7 @@ const { DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); const FilterText = ( { activeElement, filterInView, filter } ) => { @@ -121,7 +122,9 @@ export default function FilterSummary( { filter, view, onChangeView } ) { } ) } > - { element.label } + + { element.label } + ); } ) } @@ -139,7 +142,9 @@ export default function FilterSummary( { filter, view, onChangeView } ) { } > - { __( 'Conditions' ) } + + { __( 'Conditions' ) } + } > @@ -167,7 +172,9 @@ export default function FilterSummary( { filter, view, onChangeView } ) { } ) } > - { __( 'Is' ) } + + { __( 'Is' ) } + - { __( 'Is not' ) } + + { __( 'Is not' ) } + ) } diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 8fe5c352fd05c..28f19db7eef12 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -21,6 +21,7 @@ const { DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuCheckboxItemV2Ariakit: DropdownMenuCheckboxItem, + DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { @@ -38,7 +39,9 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { - { __( 'Layout' ) } + + { __( 'Layout' ) } + } placement="left-start" @@ -57,7 +60,9 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { } ); } } > - { availableView.label } + + { availableView.label } + ); } ) } @@ -71,10 +76,13 @@ function PageSizeMenu( { view, onChangeView } ) { - { /* TODO: probably label per view type. */ } - { __( 'Rows per page' ) } + + { /* TODO: probably label per view type. */ } + { __( 'Rows per page' ) } + } + // TODO": remove? placement="left-start" > { PAGE_SIZE_VALUES.map( ( size ) => { @@ -90,7 +98,7 @@ function PageSizeMenu( { view, onChangeView } ) { onChangeView( { ...view, perPage: size, page: 1 } ); } } > - { size } + { size } ); } ) } @@ -108,7 +116,13 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } return ( { __( 'Fields' ) } } + trigger={ + + + { __( 'Fields' ) } + + + } placement="left-start" > { hidableFields?.map( ( field ) => { @@ -134,7 +148,9 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } ); } } > - { field.header } + + { field.header } + ); } ) } @@ -161,7 +177,9 @@ function SortMenu( { fields, view, onChangeView } ) { - { __( 'Sort by' ) } + + { __( 'Sort by' ) } + } placement="left-start" @@ -173,7 +191,9 @@ function SortMenu( { fields, view, onChangeView } ) { key={ field.id } trigger={ - { field.header } + + { field.header } + } placement="left-start" @@ -206,7 +226,9 @@ function SortMenu( { fields, view, onChangeView } ) { } ); } } > - { info.label } + + { info.label } + ); } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 9bf798485969b..d7dd5fee83b72 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -23,6 +23,7 @@ const { DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, + DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); const sortingItemsInfo = { @@ -114,7 +115,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } ); } } > - { info.label } + + { info.label } + ); } @@ -136,7 +139,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } ); } } > - { __( 'Hide' ) } + + { __( 'Hide' ) } + ) } { isFilterable && ( @@ -161,7 +166,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } > - { __( 'Filter by' ) } + + { __( 'Filter by' ) } + } > @@ -199,7 +206,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } ); } } > - { element.label } + + { element.label } + ); } ) } @@ -221,7 +230,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } > - { __( 'Conditions' ) } + + { __( 'Conditions' ) } + } > @@ -253,7 +264,9 @@ function HeaderMenu( { field, view, onChangeView } ) { } ) } > - { __( 'Is' ) } + + { __( 'Is' ) } + - { __( 'Is not' ) } + + { __( 'Is not' ) } + ) } From b5c4599aab9f730d993e67bd8ede1a7404b05189 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 14 Dec 2023 18:49:10 +0100 Subject: [PATCH 27/61] Hide suffix contents to assistive tech --- packages/dataviews/src/add-filter.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 147191ec0ac11..462e969de470f 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -85,7 +85,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { trigger={ + } > @@ -154,16 +154,14 @@ export default function AddFilter( { filters, view, onChangeView } ) { trigger={ + } > From 7ac661b54657dacbfcbd595b3d03fee220f310c9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 14 Dec 2023 19:12:58 +0100 Subject: [PATCH 28/61] Refactor conditions to use radio menu items --- packages/dataviews/src/add-filter.js | 114 +++++++++++---------------- 1 file changed, 46 insertions(+), 68 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 462e969de470f..63f66094f7ece 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -170,74 +170,52 @@ export default function AddFilter( { filters, view, onChangeView } ) { } > - - ) - } - onClick={ ( event ) => { - event.preventDefault(); - onChangeView( { - ...view, - page: 1, - filters: [ - ...otherFilters, - { - field: filter.field, - operator: - OPERATOR_IN, - value: filterInView?.value, - }, - ], - } ); - } } - > - - { __( 'Is' ) } - - - - ) - } - onClick={ ( event ) => { - event.preventDefault(); - onChangeView( { - ...view, - page: 1, - filters: [ - ...otherFilters, - { - field: filter.field, - operator: - OPERATOR_NOT_IN, - value: filterInView?.value, - }, - ], - } ); - } } - > - - { __( 'Is not' ) } - - + { [ + { + key: 'in-filter', + operator: OPERATOR_IN, + label: __( 'Is' ), + }, + { + key: 'not-in-filter', + operator: OPERATOR_NOT_IN, + label: __( 'Is not' ), + }, + ].map( + ( { + operator, + label, + key, + } ) => ( + { + onChangeView( { + ...view, + page: 1, + filters: [ + ...otherFilters, + { + field: filter.field, + operator, + value: filterInView?.value, + }, + ], + } ); + } } + > + + { label } + + + ) + ) } ) } Date: Fri, 15 Dec 2023 11:00:41 +0100 Subject: [PATCH 29/61] Hide suffix contents to assistive technology --- packages/dataviews/src/view-actions.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 28f19db7eef12..6661b7b109cb7 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -38,7 +38,11 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { return ( + ) } From 27b69b039cd4f5d8fb666945df82e6dceb8b92bb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 15 Dec 2023 19:54:04 +0100 Subject: [PATCH 42/61] Remove comment --- packages/dataviews/src/view-actions.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index e81c9e760386c..bfa9ba3e303ab 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -221,8 +221,6 @@ function SortMenu( { fields, view, onChangeView } ) { key={ direction } value={ direction } name={ `view-actions-sorting-${ field.id }` } - // Note: radio items can't be unselected even when all items - // associated to same name are set as un-checked. checked={ isChecked } onChange={ () => { onChangeView( { From 2412ab0a3965b8d2e9b9166ea1bb9548b22c8b9d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 15 Dec 2023 20:10:13 +0100 Subject: [PATCH 43/61] Refactor operators code in view table --- packages/dataviews/src/view-table.js | 101 ++++++++++++++------------- 1 file changed, 52 insertions(+), 49 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 71f0222c61a16..7f53644fd301e 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -44,6 +44,17 @@ const sanitizeOperators = ( field ) => { }; function HeaderMenu( { field, view, onChangeView } ) { + const OPERATORS = { + [ OPERATOR_IN ]: { + key: 'in-filter', + label: __( 'Is' ), + }, + [ OPERATOR_NOT_IN ]: { + key: 'not-in-filter', + label: __( 'Is not' ), + }, + }; + const isHidable = field.enableHiding !== false; const isSortable = field.enableSorting !== false; @@ -212,16 +223,13 @@ function HeaderMenu( { field, view, onChangeView } ) { trigger={ - { activeOperator === - OPERATOR_IN && - __( 'Is' ) } - { activeOperator === - OPERATOR_NOT_IN && - __( - 'Is not' - ) }{ ' ' } - + } > @@ -230,45 +238,40 @@ function HeaderMenu( { field, view, onChangeView } ) { } > - { [ - { - key: 'in-filter', - operator: OPERATOR_IN, - label: __( 'Is' ), - }, - { - key: 'not-in-filter', - operator: OPERATOR_NOT_IN, - label: __( 'Is not' ), - }, - ].map( ( { operator, label, key } ) => ( - - onChangeView( { - ...view, - page: 1, - filters: [ - ...otherFilters, - { - field: filter.field, - operator, - value: filterInView?.value, - }, - ], - } ) - } - > - - { label } - - - ) ) } + { Object.entries( OPERATORS ).map( + ( [ + operator, + { label, key }, + ] ) => ( + + onChangeView( { + ...view, + page: 1, + filters: [ + ...otherFilters, + { + field: filter.field, + operator, + value: filterInView?.value, + }, + ], + } ) + } + > + + { label } + + + ) + ) } ) } From 49b8ab85421f6bc975c6168c84273a058e41334a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 18 Dec 2023 16:26:23 +0100 Subject: [PATCH 44/61] Add custom spacing for custom menu radio items --- packages/dataviews/src/add-filter.js | 7 ++++++- packages/dataviews/src/filter-summary.js | 11 ++++++++++- packages/dataviews/src/style.scss | 5 +++++ packages/dataviews/src/view-table.js | 7 ++++++- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 173de65ebe40a..b89cfb45f63ed 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -125,10 +125,15 @@ export default function AddFilter( { filters, view, onChangeView } ) { role="menuitemradio" aria-checked={ isActive } prefix={ - isActive && ( + isActive ? ( + ) : ( + ) } onClick={ ( event ) => { diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index d537780f48b3f..7ec37784b4179 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -116,7 +116,16 @@ export default function FilterSummary( { filter, view, onChangeView } ) { key={ element.value } role="menuitemradio" aria-checked={ isActive } - prefix={ isActive && } + prefix={ + isActive ? ( + + ) : ( + + ) + } onClick={ () => onChangeView( { ...view, diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index b35e11deae7f4..3076162dc8de8 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -286,3 +286,8 @@ .dataviews-loading { padding: 0 $grid-unit-40; } + +.dataviews__filters-custom-menu-radio-item-prefix { + display: block; + width: 24px; +} diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 7f53644fd301e..d6e56bb36c802 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -189,8 +189,13 @@ function HeaderMenu( { field, view, onChangeView } ) { role="menuitemradio" aria-checked={ isActive } prefix={ - isActive && ( + isActive ? ( + ) : ( + ) } onClick={ () => { From 04adf9705c7f137b2da3e621513a1c0a12011014 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 00:24:56 +0100 Subject: [PATCH 45/61] Remove comment --- packages/components/src/dropdown-menu-v2-ariakit/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx index 36ea05018db64..37d4a1f9cfcc5 100644 --- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx +++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx @@ -322,7 +322,6 @@ const UnconnectedDropdownMenu = ( // Align nested menu by the same (but opposite) amount // as the menu container's padding. shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) } - // TODO: we may need to expose this hideOnHoverOutside={ false } data-side={ appliedPlacementSide } variant={ variant } From d82b7c800486f7215d6a0c65a879a9ed2891946d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 15:32:24 +0100 Subject: [PATCH 46/61] Replace preventDefault with hideOnClick={false} --- packages/dataviews/src/add-filter.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index b89cfb45f63ed..ad324eef91938 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -136,8 +136,8 @@ export default function AddFilter( { filters, view, onChangeView } ) { > ) } - onClick={ ( event ) => { - event.preventDefault(); + hideOnClick={ false } + onClick={ () => { onChangeView( { ...view, page: 1, @@ -221,8 +221,8 @@ export default function AddFilter( { filters, view, onChangeView } ) { { - event.preventDefault(); + hideOnClick={ false } + onClick={ () => { onChangeView( ( currentView ) => ( { ...currentView, page: 1, @@ -252,8 +252,8 @@ export default function AddFilter( { filters, view, onChangeView } ) { disabled={ view.search === '' && view.filters?.length === 0 } - onClick={ ( event ) => { - event.preventDefault(); + hideOnClick={ false } + onClick={ () => { onChangeView( ( currentView ) => ( { ...currentView, page: 1, From 662e7f0c8575b0cf71f9358c1cc255efdaac036f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 15:37:32 +0100 Subject: [PATCH 47/61] Move OPERATORS object to common constants file --- packages/dataviews/src/add-filter.js | 13 +------------ packages/dataviews/src/constants.js | 10 ++++++++++ packages/dataviews/src/filter-summary.js | 13 +------------ packages/dataviews/src/view-table.js | 18 ++++++------------ 4 files changed, 18 insertions(+), 36 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index ad324eef91938..d6d3c4e246bcf 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -14,7 +14,7 @@ import { Children, Fragment } from '@wordpress/element'; * Internal dependencies */ import { unlock } from './lock-unlock'; -import { LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; +import { LAYOUT_LIST, OPERATORS } from './constants'; const { DropdownMenuV2Ariakit: DropdownMenu, @@ -25,17 +25,6 @@ const { DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); -const OPERATORS = { - [ OPERATOR_IN ]: { - key: 'in-filter', - label: __( 'Is' ), - }, - [ OPERATOR_NOT_IN ]: { - key: 'not-in-filter', - label: __( 'Is not' ), - }, -}; - function WithSeparators( { children } ) { return Children.toArray( children ) .filter( Boolean ) diff --git a/packages/dataviews/src/constants.js b/packages/dataviews/src/constants.js index 387050a1dca5b..82e5f9a68d070 100644 --- a/packages/dataviews/src/constants.js +++ b/packages/dataviews/src/constants.js @@ -22,6 +22,16 @@ export const ENUMERATION_TYPE = 'enumeration'; // Filter operators. export const OPERATOR_IN = 'in'; export const OPERATOR_NOT_IN = 'notIn'; +export const OPERATORS = { + [ OPERATOR_IN ]: { + key: 'in-filter', + label: __( 'Is' ), + }, + [ OPERATOR_NOT_IN ]: { + key: 'not-in-filter', + label: __( 'Is not' ), + }, +}; // View layouts. export const LAYOUT_TABLE = 'table'; diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 7ec37784b4179..f7cc72bd10682 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -13,7 +13,7 @@ import { Children, Fragment } from '@wordpress/element'; /** * Internal dependencies */ -import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; +import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS } from './constants'; import { unlock } from './lock-unlock'; const { @@ -25,17 +25,6 @@ const { DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); -const OPERATORS = { - [ OPERATOR_IN ]: { - key: 'in-filter', - label: __( 'Is' ), - }, - [ OPERATOR_NOT_IN ]: { - key: 'not-in-filter', - label: __( 'Is not' ), - }, -}; - const FilterText = ( { activeElement, filterInView, filter } ) => { if ( activeElement === undefined ) { return filter.name; diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index d6e56bb36c802..36aadece19e8d 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -16,7 +16,12 @@ import { Children, Fragment } from '@wordpress/element'; */ import { unlock } from './lock-unlock'; import ItemActions from './item-actions'; -import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants'; +import { + ENUMERATION_TYPE, + OPERATOR_IN, + OPERATOR_NOT_IN, + OPERATORS, +} from './constants'; const { DropdownMenuV2Ariakit: DropdownMenu, @@ -44,17 +49,6 @@ const sanitizeOperators = ( field ) => { }; function HeaderMenu( { field, view, onChangeView } ) { - const OPERATORS = { - [ OPERATOR_IN ]: { - key: 'in-filter', - label: __( 'Is' ), - }, - [ OPERATOR_NOT_IN ]: { - key: 'not-in-filter', - label: __( 'Is not' ), - }, - }; - const isHidable = field.enableHiding !== false; const isSortable = field.enableSorting !== false; From ac60750fa23779d144da2154b4ce10213034ce5d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 15:58:55 +0100 Subject: [PATCH 48/61] Use the `onChange` event instead of `onClick` on radio items + the event value --- packages/dataviews/src/add-filter.js | 7 +++++-- packages/dataviews/src/filter-summary.js | 4 ++-- packages/dataviews/src/view-actions.js | 16 ++++++++++------ packages/dataviews/src/view-table.js | 10 ++++++---- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index d6d3c4e246bcf..ac2a075a0fccc 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -184,7 +184,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { activeOperator === operator } - onChange={ () => { + onChange={ ( e ) => { onChangeView( { ...view, page: 1, @@ -192,7 +192,10 @@ export default function AddFilter( { filters, view, onChangeView } ) { ...otherFilters, { field: filter.field, - operator, + operator: + e + .target + .value, value: filterInView?.value, }, ], diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index f7cc72bd10682..7fe99f85bf0f9 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -162,7 +162,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { name={ `filter-summary-${ filter.name }-conditions` } value={ operator } checked={ activeOperator === operator } - onChange={ () => { + onChange={ ( e ) => { onChangeView( { ...view, page: 1, @@ -170,7 +170,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { ...otherFilters, { field: filter.field, - operator, + operator: e.target.value, value: filterInView?.value, }, ], diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index bfa9ba3e303ab..d8cf592d8404f 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -55,10 +55,10 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { value={ availableView.type } name="view-actions-available-view" checked={ availableView.type === view.type } - onChange={ () => { + onChange={ ( e ) => { onChangeView( { ...view, - type: availableView.type, + type: e.target.value, } ); } } > @@ -96,8 +96,12 @@ function PageSizeMenu( { view, onChangeView } ) { value={ size } name="view-actions-page-size" checked={ view.perPage === size } - onChange={ () => { - onChangeView( { ...view, perPage: size, page: 1 } ); + onChange={ ( e ) => { + onChangeView( { + ...view, + perPage: e.target.value, + page: 1, + } ); } } > { @@ -222,12 +226,12 @@ function SortMenu( { fields, view, onChangeView } ) { value={ direction } name={ `view-actions-sorting-${ field.id }` } checked={ isChecked } - onChange={ () => { + onChange={ ( e ) => { onChangeView( { ...view, sort: { field: field.id, - direction, + direction: e.target.value, }, } ); } } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 36aadece19e8d..f9a0c13b301d8 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -107,12 +107,12 @@ function HeaderMenu( { field, view, onChangeView } ) { name={ `view-table-sort-${ field.id }` } value={ direction } checked={ isChecked } - onClick={ () => { + onChange={ ( e ) => { onChangeView( { ...view, sort: { field: field.id, - direction, + direction: e.target.value, }, } ); } } @@ -250,7 +250,7 @@ function HeaderMenu( { field, view, onChangeView } ) { activeOperator === operator } - onClick={ () => + onChange={ ( e ) => onChangeView( { ...view, page: 1, @@ -258,7 +258,9 @@ function HeaderMenu( { field, view, onChangeView } ) { ...otherFilters, { field: filter.field, - operator, + operator: + e.target + .value, value: filterInView?.value, }, ], From 5bd5f4d618954039cf9548ac09fa2ab72bbe67b2 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 16:59:55 +0100 Subject: [PATCH 49/61] Extract custom dropdown radio item implementation --- packages/dataviews/src/add-filter.js | 26 +++------- .../dataviews/src/dropdown-menu-helper.js | 52 +++++++++++++++++++ packages/dataviews/src/filter-summary.js | 22 +++----- packages/dataviews/src/view-table.js | 22 +++----- 4 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 packages/dataviews/src/dropdown-menu-helper.js diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index ac2a075a0fccc..fdcac49e65f00 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -4,9 +4,8 @@ import { privateApis as componentsPrivateApis, Button, - Icon, } from '@wordpress/components'; -import { funnel, check } from '@wordpress/icons'; +import { funnel } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { Children, Fragment } from '@wordpress/element'; @@ -15,6 +14,7 @@ import { Children, Fragment } from '@wordpress/element'; */ import { unlock } from './lock-unlock'; import { LAYOUT_LIST, OPERATORS } from './constants'; +import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { DropdownMenuV2Ariakit: DropdownMenu, @@ -109,23 +109,11 @@ export default function AddFilter( { filters, view, onChangeView } ) { activeElement?.value === element.value; return ( - - ) : ( - - ) - } - hideOnClick={ false } + name={ `add-filter-${ filter.field.id }` } + value={ element.value } + checked={ isActive } onClick={ () => { onChangeView( { ...view, @@ -147,7 +135,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { { element.label } - + ); } ) } diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js new file mode 100644 index 0000000000000..481bdf74d64f6 --- /dev/null +++ b/packages/dataviews/src/dropdown-menu-helper.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { + Icon, + privateApis as componentsPrivateApis, +} from '@wordpress/components'; +import { check } from '@wordpress/icons'; +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from './lock-unlock'; + +const { DropdownMenuItemV2Ariakit: DropdownMenuItem } = unlock( + componentsPrivateApis +); + +/** + * A custom implementation of a radio menu item using the standard menu item + * component, which allows deselecting selected values. + */ +export const DropdownMenuRadioItemCustom = forwardRef( + ( { checked, name, value, onChange, onClick, ...props }, ref ) => { + const onClickHandler = ( e ) => { + onClick?.( e ); + onChange( { ...e, target: { ...e.target, value } } ); + }; + return ( + + ) : ( + + ) + } + onClick={ onClickHandler } + { ...props } + /> + ); + } +); diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 7fe99f85bf0f9..a8f5ebb4fbd01 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -6,7 +6,7 @@ import { privateApis as componentsPrivateApis, Icon, } from '@wordpress/components'; -import { chevronDown, check } from '@wordpress/icons'; +import { chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { Children, Fragment } from '@wordpress/element'; @@ -15,6 +15,7 @@ import { Children, Fragment } from '@wordpress/element'; */ import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS } from './constants'; import { unlock } from './lock-unlock'; +import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { DropdownMenuV2Ariakit: DropdownMenu, @@ -101,20 +102,11 @@ export default function FilterSummary( { filter, view, onChangeView } ) { { filter.elements.map( ( element ) => { const isActive = activeElement?.value === element.value; return ( - - ) : ( - - ) - } + name={ `filter-summary-${ filter.field.id }` } + value={ element.value } + checked={ isActive } onClick={ () => onChangeView( { ...view, @@ -135,7 +127,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { { element.label } - + ); } ) } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index f9a0c13b301d8..6dda5bd6f6c68 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useAsyncList } from '@wordpress/compose'; -import { unseen, check, funnel } from '@wordpress/icons'; +import { unseen, funnel } from '@wordpress/icons'; import { Button, Icon, @@ -22,6 +22,7 @@ import { OPERATOR_NOT_IN, OPERATORS, } from './constants'; +import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { DropdownMenuV2Ariakit: DropdownMenu, @@ -178,20 +179,11 @@ function HeaderMenu( { field, view, onChangeView } ) { activeElement?.value === element.value; return ( - - ) : ( - - ) - } + name={ `view-table-${ filter.field.id }` } + value={ element.value } + checked={ isActive } onClick={ () => { onChangeView( { ...view, @@ -213,7 +205,7 @@ function HeaderMenu( { field, view, onChangeView } ) { { element.label } - + ); } ) } From eb7abf51e0bb51e6f4463a2f39ad40f7262fd4d8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 17:04:42 +0100 Subject: [PATCH 50/61] Swap actual menu radio items with custom implementation --- packages/dataviews/src/add-filter.js | 5 ++--- packages/dataviews/src/filter-summary.js | 5 ++--- packages/dataviews/src/view-actions.js | 14 +++++++------- packages/dataviews/src/view-table.js | 9 ++++----- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index fdcac49e65f00..a4a1588b9a0c3 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -20,7 +20,6 @@ const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); @@ -164,7 +163,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { operator, { label, key }, ] ) => ( - { label } - + ) ) } diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index a8f5ebb4fbd01..99eb796f0a8bf 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -21,7 +21,6 @@ const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); @@ -149,7 +148,7 @@ export default function FilterSummary( { filter, view, onChangeView } ) { > { Object.entries( OPERATORS ).map( ( [ operator, { label, key } ] ) => ( - { label } - + ) ) } diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index d8cf592d8404f..0e1c67e1c5c45 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -12,12 +12,12 @@ import { __ } from '@wordpress/i18n'; */ import { unlock } from './lock-unlock'; import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants'; +import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuCheckboxItemV2Ariakit: DropdownMenuCheckboxItem, DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); @@ -50,7 +50,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { > { _availableViews.map( ( availableView ) => { return ( - { availableView.label } - + ); } ) } @@ -91,7 +91,7 @@ function PageSizeMenu( { view, onChangeView } ) { > { PAGE_SIZE_VALUES.map( ( size ) => { return ( - - + ); } ) } @@ -221,7 +221,7 @@ function SortMenu( { fields, view, onChangeView } ) { field.id === currentSortedField.id; return ( - { info.label } - + ); } ) } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 6dda5bd6f6c68..7a61b72e088ad 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -28,7 +28,6 @@ const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, - DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); @@ -103,7 +102,7 @@ function HeaderMenu( { field, view, onChangeView } ) { isSorted && view.sort.direction === direction; return ( - { info.label } - + ); } ) } @@ -234,7 +233,7 @@ function HeaderMenu( { field, view, onChangeView } ) { operator, { label, key }, ] ) => ( - { label } - + ) ) } From ae88946808d5b4c7bd17b755ef554e1bc9bef639 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 18:23:30 +0100 Subject: [PATCH 51/61] Fix warning when onChange prop is not defined --- packages/dataviews/src/dropdown-menu-helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js index 481bdf74d64f6..902de07e88ee8 100644 --- a/packages/dataviews/src/dropdown-menu-helper.js +++ b/packages/dataviews/src/dropdown-menu-helper.js @@ -25,7 +25,7 @@ export const DropdownMenuRadioItemCustom = forwardRef( ( { checked, name, value, onChange, onClick, ...props }, ref ) => { const onClickHandler = ( e ) => { onClick?.( e ); - onChange( { ...e, target: { ...e.target, value } } ); + onChange?.( { ...e, target: { ...e.target, value } } ); }; return ( Date: Wed, 20 Dec 2023 18:24:11 +0100 Subject: [PATCH 52/61] Add a few min widths to dropdowns to avoid jumping and for better while space balance --- packages/dataviews/src/add-filter.js | 6 ++++++ packages/dataviews/src/view-actions.js | 3 +++ packages/dataviews/src/view-table.js | 1 + 3 files changed, 10 insertions(+) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index a4a1588b9a0c3..4f1f1a0835ab4 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -64,6 +64,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { ) : null } } + style={ { + minWidth: '230px', + } } > @@ -100,6 +103,9 @@ export default function AddFilter( { filters, view, onChangeView } ) { } + style={ { + minWidth: '200px', + } } > diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 0e1c67e1c5c45..5c80d666d8f8a 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -212,6 +212,9 @@ function SortMenu( { fields, view, onChangeView } ) { } placement="left-start" + style={ { + minWidth: '220px', + } } > { Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => { diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 7a61b72e088ad..682105d692839 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -92,6 +92,7 @@ function HeaderMenu( { field, view, onChangeView } ) { ) } } + style={ { minWidth: '240px' } } > { isSortable && ( From 6a17c1ccec8b4745f209c009ea66f0181e377278 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 18:27:08 +0100 Subject: [PATCH 53/61] Extract sorting directions to constants --- packages/dataviews/src/constants.js | 6 ++++++ packages/dataviews/src/view-actions.js | 9 ++------- packages/dataviews/src/view-table.js | 7 ++----- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/dataviews/src/constants.js b/packages/dataviews/src/constants.js index 82e5f9a68d070..b3d17d7fd1145 100644 --- a/packages/dataviews/src/constants.js +++ b/packages/dataviews/src/constants.js @@ -33,6 +33,12 @@ export const OPERATORS = { }, }; +// Sorting +export const SORTING_DIRECTIONS = { + asc: { label: __( 'Sort ascending' ) }, + desc: { label: __( 'Sort descending' ) }, +}; + // View layouts. export const LAYOUT_TABLE = 'table'; export const LAYOUT_GRID = 'grid'; diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 5c80d666d8f8a..282315a4eff96 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from './lock-unlock'; -import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants'; +import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants'; import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { @@ -167,11 +167,6 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { ); } -// This object is used to construct the sorting options per sortable field. -const sortingItemsInfo = { - asc: { label: __( 'Sort ascending' ) }, - desc: { label: __( 'Sort descending' ) }, -}; function SortMenu( { fields, view, onChangeView } ) { const sortableFields = fields.filter( ( field ) => field.enableSorting !== false @@ -216,7 +211,7 @@ function SortMenu( { fields, view, onChangeView } ) { minWidth: '220px', } } > - { Object.entries( sortingItemsInfo ).map( + { Object.entries( SORTING_DIRECTIONS ).map( ( [ direction, info ] ) => { const isChecked = currentSortedField !== undefined && diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 682105d692839..67bbb8fdf8837 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -21,6 +21,7 @@ import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS, + SORTING_DIRECTIONS, } from './constants'; import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; @@ -32,10 +33,6 @@ const { DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); -const sortingItemsInfo = { - asc: { label: __( 'Sort ascending' ) }, - desc: { label: __( 'Sort descending' ) }, -}; const sortArrows = { asc: '↑', desc: '↓' }; const sanitizeOperators = ( field ) => { @@ -97,7 +94,7 @@ function HeaderMenu( { field, view, onChangeView } ) { { isSortable && ( - { Object.entries( sortingItemsInfo ).map( + { Object.entries( SORTING_DIRECTIONS ).map( ( [ direction, info ] ) => { const isChecked = isSorted && From 17475d9d6c247de2ae8c63fbae1173181cbbe920 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Dec 2023 18:41:23 +0100 Subject: [PATCH 54/61] Refactor more code to use the OPERATORS constant instead of individual operators --- packages/dataviews/src/view-table.js | 31 +++++++++------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 67bbb8fdf8837..775bae97af4e6 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -16,13 +16,7 @@ import { Children, Fragment } from '@wordpress/element'; */ import { unlock } from './lock-unlock'; import ItemActions from './item-actions'; -import { - ENUMERATION_TYPE, - OPERATOR_IN, - OPERATOR_NOT_IN, - OPERATORS, - SORTING_DIRECTIONS, -} from './constants'; +import { ENUMERATION_TYPE, OPERATORS, SORTING_DIRECTIONS } from './constants'; import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper'; const { @@ -38,10 +32,10 @@ const sortArrows = { asc: '↑', desc: '↓' }; const sanitizeOperators = ( field ) => { let operators = field.filterBy?.operators; if ( ! operators || ! Array.isArray( operators ) ) { - operators = [ OPERATOR_IN, OPERATOR_NOT_IN ]; + operators = Object.keys( OPERATORS ); } return operators.filter( ( operator ) => - [ OPERATOR_IN, OPERATOR_NOT_IN ].includes( operator ) + Object.keys( OPERATORS ).includes( operator ) ); }; @@ -149,18 +143,13 @@ function HeaderMenu( { field, view, onChangeView } ) { } suffix={ - <> - { activeElement && - activeOperator === - OPERATOR_IN && - __( 'Is' ) } - { activeElement && - activeOperator === - OPERATOR_NOT_IN && - __( 'Is not' ) } - { activeElement && ' ' } - { activeElement?.label } - + activeElement && ( + + ) } > From 18f38859084b534f752b26c158c2b81f0fbee22d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 13:08:45 +0100 Subject: [PATCH 55/61] Remove un-needed workaround, now that Truncate has been updated --- packages/dataviews/src/view-actions.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 282315a4eff96..94bee5f7fd6bc 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -104,11 +104,7 @@ function PageSizeMenu( { view, onChangeView } ) { } ); } } > - { - // The underlying `Truncate` element requires its children to be - // strings for the truncation to work propertly - `${ size }` - } + { size } ); } ) } From 09c6a25e9fc3d9c13ce45cc171c30483709c5a10 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 13:08:57 +0100 Subject: [PATCH 56/61] Remove hardcoded left placements --- packages/dataviews/src/view-actions.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 94bee5f7fd6bc..b7ae1da63c1ec 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -46,7 +46,6 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { } - placement="left-start" > { _availableViews.map( ( availableView ) => { return ( @@ -86,8 +85,6 @@ function PageSizeMenu( { view, onChangeView } ) { } - // TODO": remove? - placement="left-start" > { PAGE_SIZE_VALUES.map( ( size ) => { return ( @@ -129,7 +126,6 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } - placement="left-start" > { hidableFields?.map( ( field ) => { return ( @@ -188,7 +184,6 @@ function SortMenu( { fields, view, onChangeView } ) { } - placement="left-start" > { sortableFields?.map( ( field ) => { const sortedDirection = view.sort?.direction; @@ -202,7 +197,6 @@ function SortMenu( { fields, view, onChangeView } ) { } - placement="left-start" style={ { minWidth: '220px', } } From ffa0e584609fd53f707b8572834e3ec05a799e75 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 14:14:01 +0100 Subject: [PATCH 57/61] Use dot icon instead of check for custom radios --- packages/dataviews/package.json | 1 + packages/dataviews/src/dropdown-menu-helper.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index fd506e6f821c4..4cba8303cdd90 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -36,6 +36,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keycodes": "file:../keycodes", "@wordpress/private-apis": "file:../private-apis", + "@wordpress/primitives": "file:../primitives", "classnames": "^2.3.1", "remove-accents": "^0.5.0" }, diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js index 902de07e88ee8..ab59e7c764ae5 100644 --- a/packages/dataviews/src/dropdown-menu-helper.js +++ b/packages/dataviews/src/dropdown-menu-helper.js @@ -5,8 +5,8 @@ import { Icon, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { check } from '@wordpress/icons'; import { forwardRef } from '@wordpress/element'; +import { SVG, Circle } from '@wordpress/primitives'; /** * Internal dependencies @@ -17,6 +17,12 @@ const { DropdownMenuItemV2Ariakit: DropdownMenuItem } = unlock( componentsPrivateApis ); +const radioCheck = ( + + + +); + /** * A custom implementation of a radio menu item using the standard menu item * component, which allows deselecting selected values. @@ -36,7 +42,7 @@ export const DropdownMenuRadioItemCustom = forwardRef( hideOnClick={ false } prefix={ checked ? ( - + ) : ( Date: Thu, 21 Dec 2023 15:07:44 +0100 Subject: [PATCH 58/61] Use real DropdownMenuRadioItem where possible --- packages/dataviews/src/add-filter.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 4f1f1a0835ab4..eb244bff4782b 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -20,6 +20,7 @@ const { DropdownMenuV2Ariakit: DropdownMenu, DropdownMenuGroupV2Ariakit: DropdownMenuGroup, DropdownMenuItemV2Ariakit: DropdownMenuItem, + DropdownMenuRadioItemV2Ariakit: DropdownMenuRadioItem, DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator, DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); @@ -169,7 +170,7 @@ export default function AddFilter( { filters, view, onChangeView } ) { operator, { label, key }, ] ) => ( - { label } - + ) ) } From f7e6b25b10c995fc275d18d09c045a8220f45fef Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 15:20:09 +0100 Subject: [PATCH 59/61] Fix e2e test --- test/e2e/specs/site-editor/new-templates-list.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index c95668d00b845..df7f88b600442 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -86,7 +86,7 @@ test.describe( 'Templates', () => { test( 'Field visibility', async ( { admin, page } ) => { await admin.visitSiteEditor( { path: '/wp_template/all' } ); await page.getByRole( 'button', { name: 'Description' } ).click(); - await page.getByRole( 'menuitemradio', { name: 'Hide' } ).click(); + await page.getByRole( 'menuitem', { name: 'Hide' } ).click(); await expect( page.getByRole( 'button', { name: 'Description' } ) ).toBeHidden(); From 95718a03707d4bd2e10af377d56a81d21ed5c3ce Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 15:31:51 +0100 Subject: [PATCH 60/61] Sort dependencies --- packages/dataviews/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 4cba8303cdd90..4dfb35948af46 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -35,8 +35,8 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/keycodes": "file:../keycodes", - "@wordpress/private-apis": "file:../private-apis", "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", "classnames": "^2.3.1", "remove-accents": "^0.5.0" }, From 79bff9163764efd20df9a4e4b6f90a4f9d568668 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Dec 2023 16:40:48 +0100 Subject: [PATCH 61/61] Update package.lock --- package-lock.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4ecc9173085c3..c52010a3347fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55042,6 +55042,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/keycodes": "file:../keycodes", + "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "classnames": "^2.3.1", "remove-accents": "^0.5.0" @@ -70393,6 +70394,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/keycodes": "file:../keycodes", + "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "classnames": "^2.3.1", "remove-accents": "^0.5.0"