@npm_leadtech/legal-lib-components 7.22.3 → 7.22.4

package/dist/src/components/molecules/SearchBar/SearchBar.js

@@ -1,43 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { useEffect, useRef, useState } from 'react';
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
 import { useWindowSize } from '../../../hooks/useWindowSize';
 import { SearchBarStyled } from './SearchBar.styled';
 import { useSearchFunction } from '../../../hooks/useSearchFunction';
-const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
+const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick, isOpen, onClose }) => {
     const { results, searchFunction } = useSearchFunction({
         products,
         searchBarTexts,
         routes,
-        handleResultClick
+        handleResultClick,
+        onClose
     });
     const searchInputRef = useRef(null);
     const searchBarContainerRef = useRef(null);
-    const isResultsVisible = Array.isArray(results) && results.length > 0;
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                searchFunction('');
+                onClose();
             }
         };
         const handleClickOutside = (event) => {
             if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
-                searchFunction('');
+                onClose();
             }
         };
-        if (isResultsVisible) {
+        if (isOpen) {
             document.addEventListener('keydown', handleKeyDown);
             document.addEventListener('mousedown', handleClickOutside);
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
         }
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isResultsVisible, searchFunction]);
-    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
-                    searchFunction(text);
-                }, results: results }) }) }));
+    }, [isOpen, onClose]);
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }) }));
 };
 const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
     const { results, searchFunction } = useSearchFunction({
@@ -69,15 +76,15 @@ const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isResultsVisible, searchFunction]);
-    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
-                searchFunction(text);
-            }, results: results }) }));
+    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
 };
 export const SearchBar = (props) => {
     const windowSize = useWindowSize();
     const isDesktop = !!windowSize.width && windowSize.width >= 960;
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const closeModal = () => setIsModalOpen(false);
     if (isDesktop) {
-        return _jsx(DesktopSearchBar, { ...props });
+        return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), className: 'search-toggle-link', children: _jsx(SearchIcon, {}) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal })] }));
     }
     return _jsx(MobileSearchBar, { ...props });
 };

package/dist/src/components/molecules/SearchBar/SearchBar.styled.js

@@ -9,28 +9,44 @@ export const SearchBarStyled = styled.div `
   }
 
   @media ${device['landscape-tablets']} {
+    .search-toggle-link {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      line-height: 20px;
+
+      & > svg {
+        transition: fill 0.25s;
+        fill: currentColor;
+      }
+
+      &:hover > svg {
+        fill: var(--primary-main);
+      }
+
+      .modal_searchbar + .search-toggle-link > svg {
+        fill: #078080;
+      }
+    }
+
     &.modal_searchbar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(255, 255, 255, 0.95);
-      z-index: 9999;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      padding-top: 100px;
+      position: absolute;
+      top: 8px;
+      left: 32px;
+      z-index: 10000;
+      width: 400px;
+      max-width: 90vw;
+      background: none;
 
       .modal_searchbar__content {
         background-color: var(--neutral-white);
         padding: 1.5rem;
         border-radius: 8px;
-        width: 90%;
-        max-width: 768px;
+        width: 100%;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
-        @media ${device['landscape-tablets']} {
+        @media ${device['laptop']} {
           padding: 0;
           border-radius: 8px 8px 0 0;
         }

package/dist/src/components/molecules/SearchBar/SearchBar.styled.ts

@@ -10,28 +10,44 @@ export const SearchBarStyled = styled.div`
   }
 
   @media ${device['landscape-tablets']} {
+    .search-toggle-link {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      line-height: 20px;
+
+      & > svg {
+        transition: fill 0.25s;
+        fill: currentColor;
+      }
+
+      &:hover > svg {
+        fill: var(--primary-main);
+      }
+
+      .modal_searchbar + .search-toggle-link > svg {
+        fill: #078080;
+      }
+    }
+
     &.modal_searchbar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(255, 255, 255, 0.95);
-      z-index: 9999;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      padding-top: 100px;
+      position: absolute;
+      top: 8px;
+      left: 32px;
+      z-index: 10000;
+      width: 400px;
+      max-width: 90vw;
+      background: none;
 
       .modal_searchbar__content {
         background-color: var(--neutral-white);
         padding: 1.5rem;
         border-radius: 8px;
-        width: 90%;
-        max-width: 768px;
+        width: 100%;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
-        @media ${device['landscape-tablets']} {
+        @media ${device['laptop']} {
           padding: 0;
           border-radius: 8px 8px 0 0;
         }

package/dist/src/components/molecules/SearchBar/SearchBar.tsx

@@ -1,4 +1,7 @@
-import React, { useEffect, useRef } from 'react'
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useEffect, useRef, useState } from 'react'
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -7,39 +10,58 @@ import { type SearchBarProps } from './SearchBarProps.types'
 import { SearchBarStyled } from './SearchBar.styled'
 import { useSearchFunction } from '../../../hooks/useSearchFunction'
 
-const DesktopSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
+interface DesktopSearchBarProps extends SearchBarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
+  products,
+  searchBarTexts,
+  routes,
+  handleResultClick,
+  isOpen,
+  onClose
+}) => {
   const { results, searchFunction } = useSearchFunction({
     products,
     searchBarTexts,
     routes,
-    handleResultClick
+    handleResultClick,
+    onClose
   })
   const searchInputRef = useRef<HTMLInputElement>(null)
   const searchBarContainerRef = useRef<HTMLDivElement>(null)
-  const isResultsVisible = Array.isArray(results) && results.length > 0
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        searchFunction('')
+        onClose()
       }
     }
     const handleClickOutside = (event: MouseEvent) => {
       if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
-        searchFunction('')
+        onClose()
       }
     }
 
-    if (isResultsVisible) {
+    if (isOpen) {
       document.addEventListener('keydown', handleKeyDown)
       document.addEventListener('mousedown', handleClickOutside)
+      if (searchInputRef.current) {
+        searchInputRef.current.focus()
+      }
     }
 
     return () => {
       document.removeEventListener('keydown', handleKeyDown)
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [isResultsVisible, searchFunction])
+  }, [isOpen, onClose])
+
+  if (!isOpen) {
+    return null
+  }
 
   return (
     <SearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
@@ -50,9 +72,7 @@ const DesktopSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts,
           className='search'
           placeholder={searchBarTexts.placeholder}
           icon={<SearchIcon />}
-          onChange={(text: string) => {
-            searchFunction(text)
-          }}
+          onChange={searchFunction}
           results={results}
         />
       </div>
@@ -102,9 +122,7 @@ const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, r
         className='search'
         placeholder={searchBarTexts.placeholder}
         icon={<SearchIcon />}
-        onChange={(text: string) => {
-          searchFunction(text)
-        }}
+        onChange={searchFunction}
         results={results}
       />
     </SearchBarStyled>
@@ -114,9 +132,19 @@ const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, r
 export const SearchBar: React.FC<SearchBarProps> = (props) => {
   const windowSize = useWindowSize()
   const isDesktop = !!windowSize.width && windowSize.width >= 960
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const closeModal = () => setIsModalOpen(false)
 
   if (isDesktop) {
-    return <DesktopSearchBar {...props} />
+    return (
+      <div style={{ position: 'relative' }}>
+        <a onClick={() => setIsModalOpen(true)} className='search-toggle-link'>
+          <SearchIcon />
+        </a>
+        <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
+      </div>
+    )
   }
 
   return <MobileSearchBar {...props} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.22.3",
+  "version": "7.22.4",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",