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

package/src/dataviews-picker/index.tsx

@@ -128,7 +128,7 @@ function DataViewsPicker< Item >( {
 	empty,
 }: DataViewsPickerProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
-	const containerRef = useRef< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
@@ -237,6 +237,7 @@ function DataViewsPicker< Item >( {
 				config,
 				itemListLabel,
 				empty,
+				hasInitiallyLoaded: true,
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>

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 =