diff --git a/assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx b/assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx index 496bf5c33d..d7b4fc777a 100644 --- a/assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx +++ b/assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx @@ -1,6 +1,5 @@ import { createPortal } from '@wordpress/element'; import React, { useState } from 'react'; -import SearchToggle from './SearchToggle'; import SearchComponent, { Control } from './SearchComponent'; import SearchResults from './SearchResults'; @@ -20,23 +19,13 @@ type MainSearchProps = { * @class */ const MainSearch: React.FC = ({ search, button, results }) => { - const [isOpened, setIsOpened] = useState(false); const [query, setQuery] = useState(''); const [matchResults, setMatchResults] = useState([] as Control[]); return ( <> - {createPortal( - { - setIsOpened(!isOpened); - }} - />, - button - )} {createPortal( void; matchResults: Control[]; @@ -75,7 +74,6 @@ type SearchComponentProps = { * @class */ const SearchComponent: React.FC = ({ - isOpened, search, setSearch, matchResults, @@ -128,24 +126,6 @@ const SearchComponent: React.FC = ({ }); }, []); - /** - * This `useEffect()` is being used to listen for the toggleEvent - * from `SearchToggle` component. - */ - useEffect(() => { - if (isOpened) { - document - .getElementById('neve-customize-search-field') - ?.classList.add('visible'); - document.getElementById('nv-customizer-search-input')?.focus(); - } else { - document - .getElementById('neve-customize-search-field') - ?.classList.remove('visible'); - clearField(); - } - }, [isOpened]); - useEffect(() => { if (search === '') { if (customizerPanels?.classList.contains('search-not-found')) { @@ -217,15 +197,12 @@ const SearchComponent: React.FC = ({ return ( <> - - {__('Search', 'neve') + - ' ' + - __('Settings', 'neve').toLowerCase()} - void; -}; - -/** - * Search Toggle. - * - * @param {SearchToggleProps} SearchToggleProps - * @class - */ -const SearchToggle: React.FC = ({ onToggle }) => { - return ( - <> - - - ); -}; - -export default SearchToggle; diff --git a/assets/apps/customizer-controls/src/scss/_customizer-search.scss b/assets/apps/customizer-controls/src/scss/_customizer-search.scss index f0af3805c9..35e01d914f 100644 --- a/assets/apps/customizer-controls/src/scss/_customizer-search.scss +++ b/assets/apps/customizer-controls/src/scss/_customizer-search.scss @@ -1,27 +1,10 @@ #neve-customize-search { - position: absolute; - top: 40px; - right: 0; - width: 40px; - height: 28px; - overflow: hidden; - z-index: 1000; - - button { - text-decoration: none; - &:focus:not(:disabled) { - box-shadow: none; - outline: none; - } - } + display: none; } #neve-customize-search-field { - display: none; - &.visible { - display: block; - } + display: block; .accordion-section { background-color: #fff; @@ -37,7 +20,6 @@ .nv-search-wrap { display: flex; align-items: center; - margin-top: 6px; } .nv-customizer-search-input {