@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "9.1.1-next.f56bd8138.0",
+	"version": "10.0.1-next.47f435fc9.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,11 +28,11 @@
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"require": "./build/index.js"
 		},
 		"./wp": {
 			"types": "./build-types/index.d.ts",
-			"default": "./build-wp/index.js"
+			"require": "./build-wp/index.js"
 		},
 		"./package.json": {
 			"default": "./package.json"
@@ -40,25 +40,23 @@
 		"./build-style/": "./build-style/"
 	},
 	"react-native": "src/index",
-	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.7.1-next.f56bd8138.0",
-		"@wordpress/components": "^30.5.1-next.f56bd8138.0",
-		"@wordpress/compose": "^7.31.1-next.f56bd8138.0",
-		"@wordpress/data": "^10.31.1-next.f56bd8138.0",
-		"@wordpress/date": "^5.31.1-next.f56bd8138.0",
-		"@wordpress/element": "^6.31.1-next.f56bd8138.0",
-		"@wordpress/i18n": "^6.4.1-next.f56bd8138.0",
-		"@wordpress/icons": "^10.31.1-next.f56bd8138.0",
-		"@wordpress/keycodes": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/primitives": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/private-apis": "^1.31.1-next.f56bd8138.0",
-		"@wordpress/url": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/warning": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/base-styles": "^6.8.1-next.47f435fc9.0",
+		"@wordpress/components": "^30.6.1-next.47f435fc9.0",
+		"@wordpress/compose": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/data": "^10.32.1-next.47f435fc9.0",
+		"@wordpress/date": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/element": "^6.32.1-next.47f435fc9.0",
+		"@wordpress/i18n": "^6.5.1-next.47f435fc9.0",
+		"@wordpress/icons": "^11.0.1-next.47f435fc9.0",
+		"@wordpress/keycodes": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/primitives": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/private-apis": "^1.32.1-next.47f435fc9.0",
+		"@wordpress/url": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/warning": "^3.32.1-next.47f435fc9.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -76,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "ea4a281fd857f48338877590de8c8eb9b9a8cef4"
+	"gitHead": "9720f22c138771d2ed1a0522725c3cdf1c242953"
 }

package/src/components/dataform/index.tsx

@@ -8,8 +8,8 @@ import { useMemo } from '@wordpress/element';
  */
 import type { DataFormProps } from '../../types';
 import { DataFormProvider } from '../dataform-context';
-import { normalizeFields } from '../../normalize-fields';
-import { DataFormLayout } from '../../dataforms-layouts/data-form-layout';
+import normalizeFields from '../../utils/normalize-fields';
+import { DataFormLayout } from '../../dataform-layouts/data-form-layout';
 
 export default function DataForm< Item >( {
 	data,

package/src/components/dataviews/index.tsx

@@ -7,13 +7,7 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import {
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import { useResizeObserver, throttle } from '@wordpress/compose';
 
 /**
@@ -22,7 +16,8 @@ import { useResizeObserver, throttle } from '@wordpress/compose';
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import {
-	default as DataViewsFilters,
+	Filters,
+	FiltersToggled,
 	useFilters,
 	FiltersToggle,
 } from '../dataviews-filters';
@@ -35,9 +30,9 @@ import DataViewsViewConfig, {
 	DataviewsViewConfigDropdown,
 	ViewTypeMenu,
 } from '../dataviews-view-config';
-import { normalizeFields } from '../../normalize-fields';
+import normalizeFields from '../../utils/normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
-import type { SelectionOrUpdater } from '../../private-types';
+import type { SelectionOrUpdater } from '../../types/private';
 type ItemWithId = { id: string };
 
 type DataViewsProps< Item > = {
@@ -93,7 +88,6 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -119,9 +113,7 @@ function DefaultUI( {
 					{ header }
 				</HStack>
 			</HStack>
-			{ isShowingFilter && (
-				<DataViewsFilters className="dataviews-filters__container" />
-			) }
+			<FiltersToggled className="dataviews-filters__container" />
 			<DataViewsLayout />
 			<DataViewsFooter />
 		</>
@@ -295,8 +287,9 @@ function DataViews< Item >( {
 // Populate the DataViews sub components
 const DataViewsSubComponents = DataViews as typeof DataViews & {
 	BulkActionToolbar: typeof BulkActionsFooter;
-	Filters: typeof DataViewsFilters;
+	Filters: typeof Filters;
 	FiltersToggle: typeof FiltersToggle;
+	FiltersToggled: typeof FiltersToggled;
 	Layout: typeof DataViewsLayout;
 	LayoutSwitcher: typeof ViewTypeMenu;
 	Pagination: typeof DataViewsPagination;
@@ -306,7 +299,8 @@ const DataViewsSubComponents = DataViews as typeof DataViews & {
 };
 
 DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
-DataViewsSubComponents.Filters = DataViewsFilters;
+DataViewsSubComponents.Filters = Filters;
+DataViewsSubComponents.FiltersToggled = FiltersToggled;
 DataViewsSubComponents.FiltersToggle = FiltersToggle;
 DataViewsSubComponents.Layout = DataViewsLayout;
 DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;

package/src/components/dataviews/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;

package/src/components/dataviews-bulk-actions/index.tsx

@@ -22,7 +22,7 @@ import { closeSmall } from '@wordpress/icons';
 import DataViewsContext from '../dataviews-context';
 import { ActionModal } from '../dataviews-item-actions';
 import type { Action, ActionModal as ActionModalType } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import type { ActionTriggerProps } from '../dataviews-item-actions';
 
 interface ActionWithModalProps< Item > {
@@ -171,7 +171,6 @@ function ActionTrigger< Item >( {
 			accessibleWhenDisabled
 			label={ label }
 			icon={ action.icon }
-			isDestructive={ action.isDestructive }
 			size="compact"
 			onClick={ onClick }
 			isBusy={ isBusy }

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 
 .dataviews-bulk-actions-footer__item-count {
 	color: $gray-900;

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

@@ -18,7 +18,7 @@ import type {
 	SupportedLayouts,
 	NormalizedFilter,
 } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import { LAYOUT_TABLE } from '../../constants';
 
 type DataViewsContextType< Item > = {

package/src/components/dataviews-filters/filters-toggled.tsx

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import Filters from './filters';
+
+function FiltersToggled( props: { className?: string } ) {
+	const { isShowingFilter } = useContext( DataViewsContext );
+	if ( ! isShowingFilter ) {
+		return null;
+	}
+	return <Filters { ...props } />;
+}
+
+export default FiltersToggled;

package/src/components/dataviews-filters/filters.tsx

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { memo, useContext, useRef } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Filter from './filter';
+import { default as AddFilter } from './add-filter';
+import ResetFilters from './reset-filters';
+import useFilters from './use-filters';
+import DataViewsContext from '../dataviews-context';
+
+function Filters( { className }: { className?: string } ) {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
+	const addFilter = (
+		<AddFilter
+			key="add-filter"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+			ref={ addFilterRef }
+			setOpenedFilter={ setOpenedFilter }
+		/>
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
+	const filterComponents = [
+		...visibleFilters.map( ( filter ) => {
+			return (
+				<Filter
+					key={ filter.field }
+					filter={ filter }
+					view={ view }
+					fields={ fields }
+					onChangeView={ onChangeView }
+					addFilterRef={ addFilterRef }
+					openedFilter={ openedFilter }
+				/>
+			);
+		} ),
+		addFilter,
+	];
+
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
+
+	return (
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			wrap
+			className={ className }
+		>
+			{ filterComponents }
+		</HStack>
+	);
+}
+
+export default memo( Filters );

package/src/components/dataviews-filters/index.tsx

@@ -1,246 +1,4 @@
-/**
- * WordPress dependencies
- */
-import {
-	memo,
-	useContext,
-	useRef,
-	useMemo,
-	useCallback,
-	useEffect,
-} from '@wordpress/element';
-import { __experimentalHStack as HStack, Button } from '@wordpress/components';
-import { funnel } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Filter from './filter';
-import { default as AddFilter, AddFilterMenu } from './add-filter';
-import ResetFilters from './reset-filters';
-import DataViewsContext from '../dataviews-context';
-import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
-import type { NormalizedFilter, NormalizedField, View } from '../../types';
-
-export function useFilters( fields: NormalizedField< any >[], view: View ) {
-	return useMemo( () => {
-		const filters: NormalizedFilter[] = [];
-		fields.forEach( ( field ) => {
-			if (
-				field.filterBy === false ||
-				( ! field.elements?.length && ! field.Edit )
-			) {
-				return;
-			}
-
-			const operators = field.filterBy.operators;
-			const isPrimary = !! field.filterBy?.isPrimary;
-			const isLocked =
-				view.filters?.some(
-					( f ) => f.field === field.id && !! f.isLocked
-				) ?? false;
-			filters.push( {
-				field: field.id,
-				name: field.label,
-				elements: field.elements ?? [],
-				singleSelection: operators.some( ( op ) =>
-					SINGLE_SELECTION_OPERATORS.includes( op )
-				),
-				operators,
-				isVisible:
-					isLocked ||
-					isPrimary ||
-					!! view.filters?.some(
-						( f ) =>
-							f.field === field.id &&
-							ALL_OPERATORS.includes( f.operator )
-					),
-				isPrimary,
-				isLocked,
-			} );
-		} );
-
-		// Sort filters by:
-		// - locked filters go first
-		// - primary filters go next
-		// - then, sort by name
-		filters.sort( ( a, b ) => {
-			if ( a.isLocked && ! b.isLocked ) {
-				return -1;
-			}
-			if ( ! a.isLocked && b.isLocked ) {
-				return 1;
-			}
-			if ( a.isPrimary && ! b.isPrimary ) {
-				return -1;
-			}
-			if ( ! a.isPrimary && b.isPrimary ) {
-				return 1;
-			}
-			return a.name.localeCompare( b.name );
-		} );
-		return filters;
-	}, [ fields, view ] );
-}
-
-export function FiltersToggle() {
-	const {
-		filters,
-		view,
-		onChangeView,
-		setOpenedFilter,
-		isShowingFilter,
-		setIsShowingFilter,
-	} = useContext( DataViewsContext );
-
-	const buttonRef = useRef< HTMLButtonElement >( null );
-	const onChangeViewWithFilterVisibility = useCallback(
-		( _view: View ) => {
-			onChangeView( _view );
-			setIsShowingFilter( true );
-		},
-		[ onChangeView, setIsShowingFilter ]
-	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
-
-	const hasVisibleFilters = !! visibleFilters.length;
-	if ( filters.length === 0 ) {
-		return null;
-	}
-
-	const addFilterButtonProps = {
-		label: __( 'Add filter' ),
-		'aria-expanded': false,
-		isPressed: false,
-	};
-	const toggleFiltersButtonProps = {
-		label: _x( 'Filter', 'verb' ),
-		'aria-expanded': isShowingFilter,
-		isPressed: isShowingFilter,
-		onClick: () => {
-			if ( ! isShowingFilter ) {
-				setOpenedFilter( null );
-			}
-			setIsShowingFilter( ! isShowingFilter );
-		},
-	};
-	const buttonComponent = (
-		<Button
-			ref={ buttonRef }
-			className="dataviews-filters__visibility-toggle"
-			size="compact"
-			icon={ funnel }
-			{ ...( hasVisibleFilters
-				? toggleFiltersButtonProps
-				: addFilterButtonProps ) }
-		/>
-	);
-	return (
-		<div className="dataviews-filters__container-visibility-toggle">
-			{ ! hasVisibleFilters ? (
-				<AddFilterMenu
-					filters={ filters }
-					view={ view }
-					onChangeView={ onChangeViewWithFilterVisibility }
-					setOpenedFilter={ setOpenedFilter }
-					triggerProps={ { render: buttonComponent } }
-				/>
-			) : (
-				<FilterVisibilityToggle
-					buttonRef={ buttonRef }
-					filtersCount={ view.filters?.length }
-				>
-					{ buttonComponent }
-				</FilterVisibilityToggle>
-			) }
-		</div>
-	);
-}
-
-function FilterVisibilityToggle( {
-	buttonRef,
-	filtersCount,
-	children,
-}: {
-	buttonRef: React.RefObject< HTMLButtonElement >;
-	filtersCount?: number;
-	children: React.ReactNode;
-} ) {
-	// Focus the `add filter` button when unmounts.
-	useEffect(
-		() => () => {
-			buttonRef.current?.focus();
-		},
-		[ buttonRef ]
-	);
-	return (
-		<>
-			{ children }
-			{ !! filtersCount && (
-				<span className="dataviews-filters-toggle__count">
-					{ filtersCount }
-				</span>
-			) }
-		</>
-	);
-}
-
-function Filters( { className }: { className?: string } ) {
-	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
-		useContext( DataViewsContext );
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters = useFilters( fields, view );
-	const addFilter = (
-		<AddFilter
-			key="add-filter"
-			filters={ filters }
-			view={ view }
-			onChangeView={ onChangeView }
-			ref={ addFilterRef }
-			setOpenedFilter={ setOpenedFilter }
-		/>
-	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
-	if ( visibleFilters.length === 0 ) {
-		return null;
-	}
-	const filterComponents = [
-		...visibleFilters.map( ( filter ) => {
-			return (
-				<Filter
-					key={ filter.field }
-					filter={ filter }
-					view={ view }
-					fields={ fields }
-					onChangeView={ onChangeView }
-					addFilterRef={ addFilterRef }
-					openedFilter={ openedFilter }
-				/>
-			);
-		} ),
-		addFilter,
-	];
-
-	filterComponents.push(
-		<ResetFilters
-			key="reset-filters"
-			filters={ filters }
-			view={ view }
-			onChangeView={ onChangeView }
-		/>
-	);
-
-	return (
-		<HStack
-			justify="flex-start"
-			style={ { width: 'fit-content' } }
-			wrap
-			className={ className }
-		>
-			{ filterComponents }
-		</HStack>
-	);
-}
-
-export default memo( Filters );
+export { default as Filters } from './filters';
+export { default as FiltersToggle } from './toggle';
+export { default as useFilters } from './use-filters';
+export { default as FiltersToggled } from './filters-toggled';

package/src/components/dataviews-filters/style.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-filters__button {
 	position: relative;
 }
@@ -317,9 +322,7 @@
 	.dataviews-filters__search-widget-filter-combobox__input {
 		@include input-control;
 		display: block;
-		padding: 0 $grid-unit-40 0 $grid-unit-10;
-		background: $gray-100;
-		border: none;
+		padding: 0 $grid-unit-10 0 $grid-unit-40;
 		width: 100%;
 		height: $grid-unit-40;
 
@@ -354,13 +357,17 @@
 
 	.dataviews-filters__search-widget-filter-combobox__icon {
 		position: absolute;
-		right: $grid-unit-15;
-		top: 50%;
-		transform: translateY(-50%);
+		inset-inline-start: $grid-unit-15;
+		top: 0;
+		bottom: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: $icon-size;
+
+		&:dir(ltr) {
+			transform: scaleX(-1);
+		}
 	}
 }