fix coderabbit's qa

Author: kaeizen

src/components/design-library-list/editor.scss

@@ -60,6 +60,8 @@
 	}
 	&.ugb--is-hidden {
 		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
 	}
 	footer {
 		line-height: 18px;

src/components/design-library-list/index.js

@@ -91,7 +91,7 @@ const DesignLibraryItem = memo( props => {
 		const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
 
 		return { selectedNum, selectedData }
-	}, [ selectedDesignIds ] )
+	}, [ selectedDesignIds, selectedDesignData ] )
 
 	const previewProps = useMemo( () => ( {
 		designId: design.id || design.designId,

src/components/modal-design-library/header-actions.js

@@ -19,11 +19,16 @@ import {
 
 import { __ } from '@wordpress/i18n'
 
-const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
+export const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
 
 export const HeaderActions = props => {
 	const {
-		selectedTab, setSelectedTab, selectedPlan, setSelectedPlan, setDoReset,
+		selectedTab,
+		setSelectedTab,
+		selectedPlan,
+		setSelectedPlan,
+		setDoReset,
+		onClose,
 	} = props
 	return <>
 		{ /* DEV NOTE: hide for now */ }
@@ -54,9 +59,9 @@ export const HeaderActions = props => {
 					onChange={ value => {
 						localStorage.setItem( 'stk__design_library__dev_mode', value ? '1' : '' )
 						setTimeout( () => {
-							document?.querySelector( '.ugb-insert-library-button__wrapper .ugb-insert-library-button' ).click()
+							document?.querySelector( '.ugb-insert-library-button__wrapper .ugb-insert-library-button' )?.click()
 						}, 100 )
-						props.onClose()
+						onClose()
 					} }
 					__nextHasNoMarginBottom
 				/>

src/components/modal-design-library/modal.js

@@ -34,7 +34,7 @@ import { useBlockColorSchemes } from '~stackable/hooks'
 import ColorSchemePreview from '../color-scheme-preview'
 import { ColorSchemesHelp } from '../color-schemes-help'
 import Tooltip from '../tooltip'
-import { HeaderActions } from './header-actions'
+import { HeaderActions, PLAN_OPTIONS } from './header-actions'
 
 const popoverProps = {
 	className: 'ugb-design-library__color-scheme-popover',
@@ -66,7 +66,7 @@ export const ModalDesignLibrary = props => {
 
 	const [ selectedTab, setSelectedTab ] = useLocalStorage( 'stk__design_library__block-list__view_by', 'patterns' )
 	const [ selectedCategory, setSelectedCategory ] = useLocalStorage( 'stk__design_library__block-list__selected', '' )
-	const [ selectedPlan, setSelectedPlan ] = useLocalStorage( 'stk__design_library__view-plan', '' )
+	const [ selectedPlan, setSelectedPlan ] = useLocalStorage( 'stk__design_library__view-plan', PLAN_OPTIONS[ 0 ] )
 
 	// The sidebar designs are used to update the list of blocks in the sidebar.
 	const [ sidebarDesigns, setSidebarDesigns ] = useState( [] )
@@ -181,8 +181,9 @@ export const ModalDesignLibrary = props => {
 			selectedPlan={ selectedPlan }
 			setSelectedPlan={ setSelectedPlan }
 			setDoReset={ setDoReset }
+			onClose={ props.onClose }
 		/>
-	}, [ selectedTab ] )
+	}, [ selectedTab, selectedPlan, setSelectedTab, setSelectedPlan, setDoReset, props.onClose ] )
 
 	// Memoize the context value to prevent unnecessary rerenders
 	const contextValue = useMemo(