@elementor/editor-ui 0.11.0 → 0.13.0

package/src/hooks/use-scroll-to-selected.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+
+import type { VirtualizedItem } from '../components/popover/menu-list';
+
+type UseScrollToSelectedProps< T, V extends string > = {
+	selectedValue?: V;
+	items: VirtualizedItem< T, V >[];
+	virtualizer: Virtualizer< HTMLDivElement, Element >;
+};
+
+export const useScrollToSelected = < T, V extends string >( {
+	selectedValue,
+	items,
+	virtualizer,
+}: UseScrollToSelectedProps< T, V > ) => {
+	useEffect( () => {
+		if ( ! selectedValue || items.length === 0 ) {
+			return;
+		}
+
+		const selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );
+
+		if ( selectedIndex !== -1 ) {
+			virtualizer.scrollToIndex( selectedIndex, { align: 'center' } );
+		}
+	}, [ selectedValue, items, virtualizer ] );
+};

package/src/hooks/use-scroll-top.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+type UseScrollTopProps = {
+	containerRef: React.RefObject< HTMLDivElement >;
+};
+
+export const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {
+	const [ scrollTop, setScrollTop ] = useState( 0 );
+
+	useEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! container ) {
+			return;
+		}
+
+		const handleScroll = () => {
+			setScrollTop( container.scrollTop );
+		};
+
+		container.addEventListener( 'scroll', handleScroll );
+		return () => container.removeEventListener( 'scroll', handleScroll );
+	}, [ containerRef ] );
+
+	return scrollTop;
+};

package/src/index.ts

@@ -7,7 +7,7 @@ export { MenuListItem, MenuItemInfotip } from './components/menu-item';
 export { InfoTipCard } from './components/infotip-card';
 export { InfoAlert } from './components/info-alert';
 export { WarningInfotip } from './components/warning-infotip';
-export { PopoverHeader } from './components/popover/header';
+export * from './components/popover';
 
 // hooks
 export { useEditable } from './hooks/use-editable';