@@ -13,7 +13,7 @@ import {
1313RightPanelContentWrapper ,
1414} from "pages/editor/right/styledComponent" ;
1515import { tableDragClassName } from "pages/tutorials/tutorialsConstant" ;
16- import React , { useContext , useMemo , useState } from "react" ;
16+ import React , { useContext , useEffect , useMemo , useState } from "react" ;
1717import styled from "styled-components" ;
1818import {
1919BaseSection ,
@@ -99,6 +99,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
9999export const UICompPanel = ( ) => {
100100const { onDrag, searchValue} = useContext ( RightContext ) ;
101101const [ propertySectionState , setPropertySectionState ] = useState < PropertySectionState > ( initialState ) ;
102+ const [ searchedPropertySectionState , setSearchedPropertySectionState ] = useState < PropertySectionState > ( { } ) ;
102103
103104const categories = useMemo ( ( ) => {
104105const cats :Record < string , [ string , UICompManifest ] [ ] > = Object . fromEntries (
@@ -113,11 +114,18 @@ export const UICompPanel = () => {
113114} , [ ] ) ;
114115
115116const propertySectionContextValue = useMemo < PropertySectionContextType > ( ( ) => {
117+ const state = searchValue
118+ ?searchedPropertySectionState
119+ :propertySectionState ;
120+ const setStateFn = searchValue
121+ ?setSearchedPropertySectionState
122+ :setPropertySectionState ;
123+
116124return {
117125compName :stateCompName ,
118- state : propertySectionState ,
126+ state,
119127toggle :( compName :string , sectionName :string ) => {
120- setPropertySectionState ( ( oldState ) => {
128+ setStateFn ( ( oldState ) => {
121129const nextSectionState :PropertySectionState = { ...oldState } ;
122130const compState = nextSectionState [ compName ] || { } ;
123131compState [ sectionName ] = compState [ sectionName ] === false ;
@@ -126,7 +134,13 @@ export const UICompPanel = () => {
126134} ) ;
127135} ,
128136} ;
129- } , [ propertySectionState ] ) ;
137+ } , [ searchValue , propertySectionState , searchedPropertySectionState ] ) ;
138+
139+ useEffect ( ( ) => {
140+ if ( ! searchValue ) {
141+ setSearchedPropertySectionState ( { } )
142+ }
143+ } , [ searchValue ] )
130144
131145const compList = useMemo (
132146( ) =>
@@ -187,7 +201,6 @@ export const UICompPanel = () => {
187201
188202return (
189203< RightPanelContentWrapper >
190- { /* {compList.length > 0 ? compList : <EmptyCompContent />} */ }
191204< PropertySectionContext . Provider
192205value = { propertySectionContextValue }
193206>