docs,api-ref: added search filters (#4830)

* initial implementation of search modal

* added hit and search suggestions

* added support for multiple indices

* updated sample env

* added close when click outside dropdown

* test for mobile

* added mobile design

* added shortcut

* dark mode fixes

* added search to docs

* added plugins filter

* added React import

* moved filters to configurations

* handled error on page load

* change suggestion text

* removed hits limit

* handle select all

* open link in current tab

* change highlight colors

* added support for shortcuts + auto focus

* change header and footer

* redesigned search ui

www/docs/src/providers/Modal/index.tsx

@@ -5,6 +5,7 @@ import Modal, { ModalProps } from "../../components/Modal"
 type ModalContextType = {
   modalProps: ModalProps | null
   setModalProps: (value: ModalProps | null) => void
+  closeModal: () => void
 }
 
 const ModalContext = createContext<ModalContextType | null>(null)
@@ -13,10 +14,10 @@ type ModalProviderProps = {
   children?: React.ReactNode
 }
 
-const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
+const ModalProvider = ({ children }: ModalProviderProps) => {
   const [modalProps, setModalProps] = useState<ModalProps | null>(null)
 
-  const handleClose = () => {
+  const closeModal = () => {
     setModalProps(null)
   }
 
@@ -25,10 +26,16 @@ const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
       value={{
         modalProps,
         setModalProps,
+        closeModal,
       }}
     >
       {children}
-      {modalProps && <Modal {...modalProps} onClose={handleClose} />}
+      {modalProps && (
+        <>
+          <div className="bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark fixed top-0 left-0 z-[499] h-screen w-screen"></div>
+          <Modal {...modalProps} onClose={closeModal} />
+        </>
+      )}
     </ModalContext.Provider>
   )
 }