@wordpress/dataviews 12.0.1-next.v.202602111440.0 → 12.0.1

package/src/hooks/use-data.ts

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+type PaginationInfo = {
+	totalItems: number;
+	totalPages: number;
+	infiniteScrollHandler?: () => void;
+};
+
+export default function useData< Item >(
+	data: Item[],
+	isLoading: boolean | undefined,
+	paginationInfo: PaginationInfo
+): {
+	data: Item[];
+	paginationInfo: PaginationInfo;
+	hasInitiallyLoaded: boolean;
+} {
+	const previousDataRef = useRef< Item[] >( data );
+	const previousPaginationInfoRef =
+		useRef< PaginationInfo >( paginationInfo );
+	const [ hasInitiallyLoaded, setHasInitiallyLoaded ] = useState(
+		! isLoading
+	);
+	useEffect( () => {
+		if ( ! isLoading ) {
+			previousDataRef.current = data;
+			previousPaginationInfoRef.current = paginationInfo;
+			setHasInitiallyLoaded( true );
+		}
+	}, [ data, isLoading, paginationInfo ] );
+	return {
+		data:
+			isLoading && previousDataRef.current?.length
+				? previousDataRef.current
+				: data,
+		paginationInfo:
+			isLoading && previousDataRef.current?.length
+				? previousPaginationInfoRef.current
+				: paginationInfo,
+		hasInitiallyLoaded,
+	};
+}

package/src/hooks/use-delayed-loading.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from '@wordpress/element';
+
+export function useDelayedLoading(
+	isLoading: boolean,
+	options: { delay: number } = { delay: 400 }
+): boolean {
+	const [ showLoader, setShowLoader ] = useState( false );
+	useEffect( () => {
+		if ( ! isLoading ) {
+			return;
+		}
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, options.delay );
+		return () => {
+			clearTimeout( timeout );
+			setShowLoader( false );
+		};
+	}, [ isLoading, options.delay ] );
+	return showLoader;
+}

package/src/types/dataform.ts

@@ -21,17 +21,21 @@ export type NormalizedRegularLayout = {
 	labelPosition: LabelPosition;
 };
 
+export type EditVisibility = 'always' | 'on-hover';
+
 export type PanelLayout = {
 	type: 'panel';
 	labelPosition?: LabelPosition;
 	openAs?: 'dropdown' | 'modal';
 	summary?: PanelSummaryField;
+	editVisibility?: EditVisibility;
 };
 export type NormalizedPanelLayout = {
 	type: 'panel';
 	labelPosition: LabelPosition;
 	openAs: 'dropdown' | 'modal';
 	summary: NormalizedPanelSummaryField;
+	editVisibility: EditVisibility;
 };
 
 export type CardSummaryField =