@wordpress/dataviews 3.0.0 → 4.0.0

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

@@ -7,15 +7,16 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal } from './types';
-import type { SetSelection } from './private-types';
+import DataViewsContext from '../dataviews-context';
+import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -43,14 +44,6 @@ interface ActionsMenuGroupProps< Item > {
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface BulkActionsProps< Item > {
-	data: Item[];
-	actions: Action< Item >[];
-	selection: string[];
-	onSelectionChange: SetSelection;
-	getItemId: ( item: Item ) => string;
-}
-
 export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	item: Item
@@ -105,7 +98,7 @@ function ActionWithModal< Item >( {
 			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-action-modal"
+			overlayClassName="dataviews-bulk-actions__modal"
 		>
 			<RenderModal
 				items={ eligibleItems }
@@ -133,7 +126,6 @@ function BulkActionItem< Item >( {
 	return (
 		<DropdownMenuItem
 			key={ action.id }
-			disabled={ eligibleItems.length === 0 }
 			hideOnClick={ ! shouldShowModal }
 			onClick={ async () => {
 				if ( shouldShowModal ) {
@@ -142,9 +134,7 @@ function BulkActionItem< Item >( {
 					action.callback( eligibleItems, { registry } );
 				}
 			} }
-			suffix={
-				eligibleItems.length > 0 ? eligibleItems.length : undefined
-			}
+			suffix={ eligibleItems.length }
 		>
 			{ action.label }
 		</DropdownMenuItem>
@@ -156,10 +146,20 @@ function ActionsMenuGroup< Item >( {
 	selectedItems,
 	setActionWithModal,
 }: ActionsMenuGroupProps< Item > ) {
+	const elligibleActions = useMemo( () => {
+		return actions.filter( ( action ) => {
+			return selectedItems.some(
+				( item ) => ! action.isEligible || action.isEligible( item )
+			);
+		} );
+	}, [ actions, selectedItems ] );
+	if ( ! elligibleActions.length ) {
+		return null;
+	}
 	return (
 		<>
 			<DropdownMenuGroup>
-				{ actions.map( ( action ) => (
+				{ elligibleActions.map( ( action ) => (
 					<BulkActionItem
 						key={ action.id }
 						action={ action }
@@ -173,20 +173,21 @@ function ActionsMenuGroup< Item >( {
 	);
 }
 
-export default function BulkActions< Item >( {
-	data,
-	actions,
-	selection,
-	onSelectionChange,
-	getItemId,
-}: BulkActionsProps< Item > ) {
+function _BulkActions() {
+	const {
+		data,
+		actions = [],
+		selection,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
 	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< Item > | undefined
+		ActionModal< any > | undefined
 	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -220,7 +221,7 @@ export default function BulkActions< Item >( {
 				style={ { minWidth: '240px' } }
 				trigger={
 					<Button
-						className="dataviews-bulk-edit-button"
+						className="dataviews-bulk-actions__edit-button"
 						__next40pxDefaultSize
 						variant="tertiary"
 						size="compact"
@@ -249,7 +250,7 @@ export default function BulkActions< Item >( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange(
+							onChangeSelection(
 								selectableItems.map( ( item ) =>
 									getItemId( item )
 								)
@@ -263,7 +264,7 @@ export default function BulkActions< Item >( {
 						disabled={ selection.length === 0 }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( [] );
+							onChangeSelection( [] );
 						} }
 					>
 						{ __( 'Deselect' ) }
@@ -281,3 +282,19 @@ export default function BulkActions< Item >( {
 		</>
 	);
 }
+
+export default function BulkActions() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActions />;
+}

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

@@ -0,0 +1,7 @@
+.dataviews-bulk-actions__modal {
+	z-index: z-index(".dataviews-bulk-actions__modal");
+}
+
+.dataviews-bulk-actions__edit-button.components-button {
+	flex-shrink: 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,10 +17,13 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ActionWithModal } from './item-actions';
-import type { Action } from './types';
-import type { ActionTriggerProps } from './item-actions';
-import type { SetSelection } from './private-types';
+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 > {
 	action: Action< Item >;
@@ -33,15 +36,7 @@ interface ToolbarContentProps< Item > {
 	selection: string[];
 	actionsToShow: Action< Item >[];
 	selectedItems: Item[];
-	onSelectionChange: SetSelection;
-}
-
-interface BulkActionsToolbarProps< Item > {
-	data: Item[];
-	selection: string[];
-	actions: Action< Item >[];
-	onSelectionChange: SetSelection;
-	getItemId: ( item: Item ) => string;
+	onChangeSelection: SetSelection;
 }
 
 const SNACKBAR_VARIANTS = {
@@ -131,12 +126,12 @@ function renderToolbarContent< Item >(
 	selectedItems: Item[],
 	actionInProgress: string | null,
 	setActionInProgress: ( actionId: string | null ) => void,
-	onSelectionChange: SetSelection
+	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 >(
 					label={ __( 'Cancel' ) }
 					disabled={ !! actionInProgress }
 					onClick={ () => {
-						onSelectionChange( EMPTY_ARRAY );
+						onChangeSelection( EMPTY_ARRAY );
 					} }
 				/>
 			</ToolbarGroup>
@@ -183,7 +178,7 @@ function ToolbarContent< Item >( {
 	selection,
 	actionsToShow,
 	selectedItems,
-	onSelectionChange,
+	onChangeSelection,
 }: ToolbarContentProps< Item > ) {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
@@ -199,7 +194,7 @@ function ToolbarContent< Item >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	} else if ( ! buttons.current ) {
 		buttons.current = renderToolbarContent(
@@ -208,19 +203,20 @@ function ToolbarContent< Item >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	}
 	return buttons.current;
 }
 
-export default function BulkActionsToolbar< Item >( {
-	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 >( {
 				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 >( {
 		</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,
@@ -46,7 +46,7 @@ function AddFilter(
 				<Button
 					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 ) {
@@ -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>
 
@@ -239,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. */
@@ -256,7 +264,7 @@ export default function FilterSummary( {
 					>
 						<div
 							className={ clsx(
-								'dataviews-filter-summary__chip',
+								'dataviews-filters__summary-chip',
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
@@ -289,7 +297,7 @@ export default function FilterSummary( {
 						>
 							<button
 								className={ clsx(
-									'dataviews-filter-summary__chip-remove',
+									'dataviews-filters__summary-chip-remove',
 									{ 'has-values': hasValues }
 								) }
 								onClick={ () => {

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 { 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 > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	openedFilter: string | null;
-	setOpenedFilter: ( openedFilter: string | null ) => void;
-}
-
-function _Filters< Item >( {
-	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 >( {
 		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 )
@@ -119,7 +108,4 @@ function _Filters< Item >( {
 	);
 }
 
-// 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[];

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,
@@ -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,7 +124,7 @@ 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={ () => {
@@ -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>
 						) }
@@ -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>
 								) }