@wordpress/dataviews 2.2.0 → 4.0.0

package/src/{bulk-actions-toolbar.tsx → components/dataviews-bulk-actions-toolbar/index.tsx}

@@ -8,7 +8,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { useMemo, useState, useRef } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { _n, sprintf, __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useReducedMotion } from '@wordpress/compose';
@@ -17,30 +17,26 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ActionWithModal } from './item-actions';
-import type { Action, AnyItem } from './types';
-import type { ActionTriggerProps } from './item-actions';
+import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
+import DataViewsContext from '../dataviews-context';
+import { ActionWithModal } from '../dataviews-item-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+import type { Action } from '../../types';
+import type { ActionTriggerProps } from '../dataviews-item-actions';
+import type { SetSelection } from '../../private-types';
 
-interface ActionButtonProps< Item extends AnyItem > {
+interface ActionButtonProps< Item > {
 	action: Action< Item >;
 	selectedItems: Item[];
 	actionInProgress: string | null;
 	setActionInProgress: ( actionId: string | null ) => void;
 }
 
-interface ToolbarContentProps< Item extends AnyItem > {
+interface ToolbarContentProps< Item > {
 	selection: string[];
 	actionsToShow: Action< Item >[];
 	selectedItems: Item[];
-	onSelectionChange: ( selection: Item[] ) => void;
-}
-
-interface BulkActionsToolbarProps< Item extends AnyItem > {
-	data: Item[];
-	selection: string[];
-	actions: Action< Item >[];
-	onSelectionChange: ( selection: Item[] ) => void;
-	getItemId: ( item: Item ) => string;
+	onChangeSelection: SetSelection;
 }
 
 const SNACKBAR_VARIANTS = {
@@ -62,7 +58,7 @@ const SNACKBAR_VARIANTS = {
 	},
 };
 
-function ActionTrigger< Item extends AnyItem >( {
+function ActionTrigger< Item >( {
 	action,
 	onClick,
 	isBusy,
@@ -79,7 +75,6 @@ function ActionTrigger< Item extends AnyItem >( {
 			size="compact"
 			onClick={ onClick }
 			isBusy={ isBusy }
-			__experimentalIsFocusable
 			tooltipPosition="top"
 		/>
 	);
@@ -87,7 +82,7 @@ function ActionTrigger< Item extends AnyItem >( {
 
 const EMPTY_ARRAY: [] = [];
 
-function ActionButton< Item extends AnyItem >( {
+function ActionButton< Item >( {
 	action,
 	selectedItems,
 	actionInProgress,
@@ -125,18 +120,18 @@ function ActionButton< Item extends AnyItem >( {
 	);
 }
 
-function renderToolbarContent< Item extends AnyItem >(
+function renderToolbarContent< Item >(
 	selection: string[],
 	actionsToShow: Action< Item >[],
 	selectedItems: Item[],
 	actionInProgress: string | null,
 	setActionInProgress: ( actionId: string | null ) => void,
-	onSelectionChange: ( selection: Item[] ) => void
+	onChangeSelection: SetSelection
 ) {
 	return (
 		<>
 			<ToolbarGroup>
-				<div className="dataviews-bulk-actions__selection-count">
+				<div className="dataviews-bulk-actions-toolbar__selection-count">
 					{ selection.length === 1
 						? __( '1 item selected' )
 						: sprintf(
@@ -171,7 +166,7 @@ function renderToolbarContent< Item extends AnyItem >(
 					label={ __( 'Cancel' ) }
 					disabled={ !! actionInProgress }
 					onClick={ () => {
-						onSelectionChange( EMPTY_ARRAY );
+						onChangeSelection( EMPTY_ARRAY );
 					} }
 				/>
 			</ToolbarGroup>
@@ -179,11 +174,11 @@ function renderToolbarContent< Item extends AnyItem >(
 	);
 }
 
-function ToolbarContent< Item extends AnyItem >( {
+function ToolbarContent< Item >( {
 	selection,
 	actionsToShow,
 	selectedItems,
-	onSelectionChange,
+	onChangeSelection,
 }: ToolbarContentProps< Item > ) {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
@@ -199,7 +194,7 @@ function ToolbarContent< Item extends AnyItem >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	} else if ( ! buttons.current ) {
 		buttons.current = renderToolbarContent(
@@ -208,19 +203,20 @@ function ToolbarContent< Item extends AnyItem >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	}
 	return buttons.current;
 }
 
-export default function BulkActionsToolbar< Item extends AnyItem >( {
-	data,
-	selection,
-	actions = EMPTY_ARRAY,
-	onSelectionChange,
-	getItemId,
-}: BulkActionsToolbarProps< Item > ) {
+function _BulkActionsToolbar() {
+	const {
+		data,
+		selection,
+		actions = EMPTY_ARRAY,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const isReducedMotion = useReducedMotion();
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
@@ -258,15 +254,15 @@ export default function BulkActionsToolbar< Item extends AnyItem >( {
 				animate="open"
 				exit="exit"
 				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
-				className="dataviews-bulk-actions"
+				className="dataviews-bulk-actions-toolbar"
 			>
 				<Toolbar label={ __( 'Bulk actions' ) }>
-					<div className="dataviews-bulk-actions-toolbar-wrapper">
+					<div className="dataviews-bulk-actions-toolbar__wrapper">
 						<ToolbarContent
 							selection={ selection }
 							actionsToShow={ actionsToShow }
 							selectedItems={ selectedItems }
-							onSelectionChange={ onSelectionChange }
+							onChangeSelection={ onChangeSelection }
 						/>
 					</div>
 				</Toolbar>
@@ -274,3 +270,19 @@ export default function BulkActionsToolbar< Item extends AnyItem >( {
 		</AnimatePresence>
 	);
 }
+
+export default function BulkActionsToolbar() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActionsToolbar />;
+}

package/src/components/dataviews-bulk-actions-toolbar/style.scss

@@ -0,0 +1,45 @@
+.dataviews-bulk-actions-toolbar {
+	position: sticky;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions-toolbar");
+
+	.components-accessible-toolbar {
+		border-color: $gray-300;
+		box-shadow: $shadow-popover;
+
+		.components-toolbar-group {
+			border-color: $gray-200;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+	}
+
+	.dataviews-bulk-actions-toolbar__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}
+
+.dataviews-bulk-actions-toolbar__wrapper {
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
+
+	.components-toolbar-group {
+		align-items: center;
+	}
+
+	.components-button.is-busy {
+		max-height: $button-size;
+	}
+}

package/src/components/dataviews-context/index.ts

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { View, Action, NormalizedField } from '../../types';
+import type { SetSelection } from '../../private-types';
+import { LAYOUT_TABLE } from '../../constants';
+
+type DataViewsContextType< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	selection: string[];
+	onChangeSelection: SetSelection;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+	getItemId: ( item: Item ) => string;
+	density: number;
+};
+
+const DataViewsContext = createContext< DataViewsContextType< any > >( {
+	view: { type: LAYOUT_TABLE },
+	onChangeView: () => {},
+	fields: [],
+	data: [],
+	paginationInfo: {
+		totalItems: 0,
+		totalPages: 0,
+	},
+	selection: [],
+	onChangeSelection: () => {},
+	setOpenedFilter: () => {},
+	openedFilter: null,
+	getItemId: ( item ) => item.id,
+	density: 0,
+} );
+
+export default DataViewsContext;

package/src/{add-filter.tsx → components/dataviews-filters/add-filter.tsx}

@@ -16,8 +16,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { NormalizedFilter, View } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -44,9 +44,9 @@ function AddFilter(
 		<DropdownMenu
 			trigger={
 				<Button
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					size="compact"
-					className="dataviews-filters-button"
+					className="dataviews-filters__button"
 					variant="tertiary"
 					disabled={ ! inactiveFilters.length }
 					ref={ ref }

package/src/{filter-summary.tsx → components/dataviews-filters/filter-summary.tsx}

@@ -35,8 +35,14 @@ import {
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
-} from './constants';
-import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
+} from '../../constants';
+import type {
+	Filter,
+	NormalizedFilter,
+	Operator,
+	Option,
+	View,
+} from '../../types';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -65,8 +71,10 @@ const FilterText = ( {
 	}
 
 	const filterTextWrappers = {
-		Name: <span className="dataviews-filter-summary__filter-text-name" />,
-		Value: <span className="dataviews-filter-summary__filter-text-value" />,
+		Name: <span className="dataviews-filters__summary-filter-text-name" />,
+		Value: (
+			<span className="dataviews-filters__summary-filter-text-value" />
+		),
 	};
 
 	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
@@ -157,7 +165,7 @@ function OperatorSelector( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
 	} ) );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const value = currentFilter?.operator || filter.operators[ 0 ];
@@ -166,9 +174,9 @@ function OperatorSelector( {
 			<HStack
 				spacing={ 2 }
 				justify="flex-start"
-				className="dataviews-filter-summary__operators-container"
+				className="dataviews-filters__summary-operators-container"
 			>
-				<FlexItem className="dataviews-filter-summary__operators-filter-name">
+				<FlexItem className="dataviews-filters__summary-operators-filter-name">
 					{ filter.name }
 				</FlexItem>
 
@@ -180,18 +188,22 @@ function OperatorSelector( {
 						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
-									...view.filters.map( ( _filter ) => {
-										if ( _filter.field === filter.field ) {
-											return {
-												..._filter,
-												operator,
-											};
+									...( view.filters ?? [] ).map(
+										( _filter ) => {
+											if (
+												_filter.field === filter.field
+											) {
+												return {
+													..._filter,
+													operator,
+												};
+											}
+											return _filter;
 										}
-										return _filter;
-									} ),
+									),
 							  ]
 							: [
-									...view.filters,
+									...( view.filters ?? [] ),
 									{
 										field: filter.field,
 										operator,
@@ -220,7 +232,9 @@ export default function FilterSummary( {
 }: FilterSummaryProps ) {
 	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
-	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const filterInView = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
 	const activeElements = filter.elements.filter( ( element ) => {
 		if ( filter.singleSelection ) {
 			return element.value === filterInView?.value;
@@ -233,13 +247,13 @@ export default function FilterSummary( {
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
-			contentClassName="dataviews-filter-summary__popover"
+			contentClassName="dataviews-filters__summary-popover"
 			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
 			onClose={ () => {
 				toggleRef.current?.focus();
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<div className="dataviews-filter-summary__chip-container">
+				<div className="dataviews-filters__summary-chip-container">
 					<Tooltip
 						text={ sprintf(
 							/* translators: 1: Filter name. */
@@ -250,7 +264,7 @@ export default function FilterSummary( {
 					>
 						<div
 							className={ clsx(
-								'dataviews-filter-summary__chip',
+								'dataviews-filters__summary-chip',
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
@@ -283,14 +297,14 @@ export default function FilterSummary( {
 						>
 							<button
 								className={ clsx(
-									'dataviews-filter-summary__chip-remove',
+									'dataviews-filters__summary-chip-remove',
 									{ 'has-values': hasValues }
 								) }
 								onClick={ () => {
 									onChangeView( {
 										...view,
 										page: 1,
-										filters: view.filters.filter(
+										filters: view.filters?.filter(
 											( _filter ) =>
 												_filter.field !== filter.field
 										),

package/src/{filters.tsx → components/dataviews-filters/index.tsx}

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { memo, useRef } from '@wordpress/element';
+import { memo, useContext, useRef } from '@wordpress/element';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
@@ -10,25 +10,14 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
 import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-import { sanitizeOperators } from './utils';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
+import DataViewsContext from '../dataviews-context';
+import { sanitizeOperators } from '../../utils';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
+import type { NormalizedFilter } from '../../types';
 
-interface FiltersProps< Item extends AnyItem > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	openedFilter: string | null;
-	setOpenedFilter: ( openedFilter: string | null ) => void;
-}
-
-function _Filters< Item extends AnyItem >( {
-	fields,
-	view,
-	onChangeView,
-	openedFilter,
-	setOpenedFilter,
-}: FiltersProps< Item > ) {
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
 	const addFilterRef = useRef< HTMLButtonElement >( null );
 	const filters: NormalizedFilter[] = [];
 	fields.forEach( ( field ) => {
@@ -44,7 +33,7 @@ function _Filters< Item extends AnyItem >( {
 		const isPrimary = !! field.filterBy?.isPrimary;
 		filters.push( {
 			field: field.id,
-			name: field.header,
+			name: field.label,
 			elements: field.elements,
 			singleSelection: operators.some( ( op ) =>
 				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
@@ -52,7 +41,7 @@ function _Filters< Item extends AnyItem >( {
 			operators,
 			isVisible:
 				isPrimary ||
-				view.filters.some(
+				!! view.filters?.some(
 					( f ) =>
 						f.field === field.id &&
 						ALL_OPERATORS.includes( f.operator )
@@ -119,7 +108,4 @@ function _Filters< Item extends AnyItem >( {
 	);
 }
 
-// A type assertion is used here to keep the type argument.
-const Filters = memo( _Filters ) as typeof _Filters;
-
-export default Filters;
+export default memo( Filters );

package/src/{reset-filters.tsx → components/dataviews-filters/reset-filters.tsx}

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { NormalizedFilter, View } from './types';
+import type { NormalizedFilter, View } from '../../types';
 
 interface ResetFilterProps {
 	filters: NormalizedFilter[];
@@ -33,7 +33,7 @@ export default function ResetFilter( {
 	return (
 		<Button
 			disabled={ isDisabled }
-			__experimentalIsFocusable
+			accessibleWhenDisabled
 			size="compact"
 			variant="tertiary"
 			className="dataviews-filters__reset-button"

package/src/{search-widget.tsx → components/dataviews-filters/search-widget.tsx}

@@ -21,8 +21,8 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Filter, NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Filter, NormalizedFilter, View } from '../../types';
 
 const {
 	CompositeV2: Composite,
@@ -93,7 +93,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
 	} );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -101,7 +101,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		<Composite
 			store={ compositeStore }
 			role="listbox"
-			className="dataviews-search-widget-listbox"
+			className="dataviews-filters__search-widget-listbox"
 			aria-label={ sprintf(
 				/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
 				__( 'List of: %1$s' ),
@@ -124,13 +124,13 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<div
 									aria-label={ element.label }
 									role="option"
-									className="dataviews-search-widget-listitem"
+									className="dataviews-filters__search-widget-listitem"
 								/>
 							}
 							onClick={ () => {
 								const newFilters = currentFilter
 									? [
-											...view.filters.map(
+											...( view.filters ?? [] ).map(
 												( _filter ) => {
 													if (
 														_filter.field ===
@@ -154,7 +154,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 											),
 									  ]
 									: [
-											...view.filters,
+											...( view.filters ?? [] ),
 											{
 												field: filter.field,
 												operator: filter.operators[ 0 ],
@@ -174,7 +174,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 						/>
 					}
 				>
-					<span className="dataviews-search-widget-listitem-check">
+					<span className="dataviews-filters__search-widget-listitem-check">
 						{ filter.singleSelection &&
 							currentValue === element.value && (
 								<Icon icon={ radioCheck } />
@@ -187,7 +187,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 					<span>
 						{ element.label }
 						{ !! element.description && (
-							<span className="dataviews-search-widget-listitem-description">
+							<span className="dataviews-filters__search-widget-listitem-description">
 								{ element.description }
 							</span>
 						) }
@@ -201,7 +201,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -218,7 +218,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter
 					? [
-							...view.filters.map( ( _filter ) => {
+							...( view.filters ?? [] ).map( ( _filter ) => {
 								if ( _filter.field === filter.field ) {
 									return {
 										..._filter,
@@ -232,7 +232,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							} ),
 					  ]
 					: [
-							...view.filters,
+							...( view.filters ?? [] ),
 							{
 								field: filter.field,
 								operator: filter.operators[ 0 ],
@@ -247,7 +247,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			} }
 			setValue={ setSearchValue }
 		>
-			<div className="dataviews-search-widget-filter-combobox__wrapper">
+			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
 				<Ariakit.ComboboxLabel
 					render={
 						<VisuallyHidden>
@@ -260,14 +260,14 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 				<Ariakit.Combobox
 					autoSelect="always"
 					placeholder={ __( 'Search' ) }
-					className="dataviews-search-widget-filter-combobox__input"
+					className="dataviews-filters__search-widget-filter-combobox__input"
 				/>
-				<div className="dataviews-search-widget-filter-combobox__icon">
+				<div className="dataviews-filters__search-widget-filter-combobox__icon">
 					<Icon icon={ search } />
 				</div>
 			</div>
 			<Ariakit.ComboboxList
-				className="dataviews-search-widget-filter-combobox-list"
+				className="dataviews-filters__search-widget-filter-combobox-list"
 				alwaysVisible
 			>
 				{ matches.map( ( element ) => {
@@ -275,12 +275,12 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 						<Ariakit.ComboboxItem
 							key={ element.value }
 							value={ element.value }
-							className="dataviews-search-widget-listitem"
+							className="dataviews-filters__search-widget-listitem"
 							hideOnClick={ false }
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-search-widget-listitem-check">
+							<span className="dataviews-filters__search-widget-listitem-check">
 								{ filter.singleSelection &&
 									currentValue === element.value && (
 										<Icon icon={ radioCheck } />
@@ -292,11 +292,11 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							</span>
 							<span>
 								<Ariakit.ComboboxItemValue
-									className="dataviews-search-widget-filter-combobox-item-value"
+									className="dataviews-filters__search-widget-filter-combobox-item-value"
 									value={ element.label }
 								/>
 								{ !! element.description && (
-									<span className="dataviews-search-widget-listitem-description">
+									<span className="dataviews-filters__search-widget-listitem-description">
 										{ element.description }
 									</span>
 								) }