@npm_leadtech/legal-lib-components 7.22.3 → 7.22.5

package/dist/images/componentsSvg/CloseIcon.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Close24Props {
+    className?: string;
+}
+export declare const CloseIcon: FC<Close24Props>;
+export {};

package/dist/images/componentsSvg/CloseIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ({ className }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));

package/dist/images/componentsSvg/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+
+interface Close24Props {
+  className?: string
+}
+
+export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
+  <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
+      fill='#B5BABD'
+    />
+  </svg>
+)

package/dist/images/svg/search_24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.83105 13.9947C6.10828 13.9947 4.65024 13.3981 3.45694 12.2048C2.26364 11.0115 1.66699 9.55346 1.66699 7.83069C1.66699 6.10791 2.26364 4.64987 3.45694 3.45657C4.65024 2.26328 6.10828 1.66663 7.83105 1.66663C9.55383 1.66663 11.0119 2.26328 12.2052 3.45657C13.3985 4.64987 13.9951 6.10791 13.9951 7.83069C13.9951 8.52612 13.8845 9.18204 13.6632 9.79844C13.4419 10.4148 13.1416 10.9601 12.7623 11.4343L18.0729 16.7449C18.2467 16.9187 18.3337 17.14 18.3337 17.4087C18.3337 17.6774 18.2467 17.8986 18.0729 18.0725C17.899 18.2464 17.6777 18.3333 17.4091 18.3333C17.1404 18.3333 16.9191 18.2464 16.7452 18.0725L11.4347 12.7619C10.9605 13.1413 10.4152 13.4416 9.79881 13.6628C9.1824 13.8841 8.52648 13.9947 7.83105 13.9947ZM7.83105 12.0981C9.01645 12.0981 10.024 11.6832 10.8538 10.8534C11.6836 10.0237 12.0985 9.01608 12.0985 7.83069C12.0985 6.64529 11.6836 5.6377 10.8538 4.80793C10.024 3.97815 9.01645 3.56326 7.83105 3.56326C6.64566 3.56326 5.63807 3.97815 4.80829 4.80793C3.97851 5.6377 3.56363 6.64529 3.56363 7.83069C3.56363 9.01608 3.97851 10.0237 4.80829 10.8534C5.63807 11.6832 6.64566 12.0981 7.83105 12.0981Z" fill="#078080"/>
+</svg>

package/dist/src/components/atoms/DropdownInput/DropdownInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef, useState } from 'react';
 import { DropdownInputStyled } from './DropdownInput.styled';
-export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder }, ref) => {
+export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
     const [searchTerm, setSearchTerm] = useState('');
     const updateInput = (e) => {
         setSearchTerm(e.target.value);
@@ -15,7 +15,8 @@ export const DropdownInput = forwardRef(({ onChange, results, className = '', na
                             updateInput(e);
                         } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, children: [icon &&
                                 React.cloneElement(icon, {
-                                    className: 'dropdown_input__container__icon__main'
+                                    className: 'dropdown_input__container__icon__main',
+                                    onClick: onClose
                                 }), searchTerm && (_jsx("div", { className: 'icon-cross main-color dropdown_input__container__icon__clear', onClick: () => {
                                     resetInput();
                                 }, onKeyDown: () => {

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js

@@ -2,6 +2,7 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DropdownInputStyled = styled.div `
   position: relative;
+  padding: 1.5rem;
 
   @media ${device['landscape-tablets']} {
     padding: 1rem 2rem;
@@ -132,7 +133,7 @@ export const DropdownInputStyled = styled.div `
       left: 0;
       top: 100%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: 0;
+      margin-top: -5px;
       border: none;
       border-radius: 0 0 8px 8px;
     }

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 export const DropdownInputStyled = styled.div`
   position: relative;
+  padding: 1.5rem;
 
   @media ${device['landscape-tablets']} {
     padding: 1rem 2rem;
@@ -133,7 +134,7 @@ export const DropdownInputStyled = styled.div`
       left: 0;
       top: 100%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: 0;
+      margin-top: -5px;
       border: none;
       border-radius: 0 0 8px 8px;
     }

package/dist/src/components/atoms/DropdownInput/DropdownInput.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef, useState } from 'react'
+
 import { DropdownInputProps } from './DropdownInputProps.types'
 import { DropdownInputStyled } from './DropdownInput.styled'
 
 export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
-  ({ onChange, results, className = '', name, icon, placeholder }, ref) => {
+  ({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
     const [searchTerm, setSearchTerm] = useState('')
 
     const updateInput = (e): void => {
@@ -33,7 +34,8 @@ export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
           <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
             {icon &&
               React.cloneElement(icon, {
-                className: 'dropdown_input__container__icon__main'
+                className: 'dropdown_input__container__icon__main',
+                onClick: onClose
               })}
             {searchTerm && (
               <div

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.d.ts

@@ -5,4 +5,5 @@ export interface DropdownInputProps {
     icon: any;
     onChange: (arg: string) => void;
     results: React.JSX.Element[];
+    onClose?: () => void;
 }

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.ts

@@ -7,4 +7,5 @@ export interface DropdownInputProps {
   icon: any
   onChange: (arg: string) => void
   results: React.JSX.Element[]
+  onClose?: () => void
 }

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

@@ -1,43 +1,52 @@
-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 { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
+import search from '../../../../images/svg/search_24px.svg';
 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: 'desktop-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(CloseIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
 };
 const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
     const { results, searchFunction } = useSearchFunction({
@@ -69,15 +78,23 @@ 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: 'mobile-and-tablet-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', display: 'flex' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), style: {
+                        cursor: 'pointer',
+                        display: 'inline-block',
+                        width: '20px',
+                        height: '20px'
+                    }, children: _jsx("img", { src: search, alt: 'search-icon-primary', style: {
+                            width: '100%',
+                            height: '100%'
+                        } }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal })] }));
     }
     return _jsx(MobileSearchBar, { ...props });
 };

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

@@ -10,29 +10,23 @@ export const SearchBarStyled = styled.div `
 
   @media ${device['landscape-tablets']} {
     &.modal_searchbar {
-      position: fixed;
-      top: 0;
+      position: absolute;
+      top: 45px;
       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;
+      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

@@ -11,29 +11,23 @@ export const SearchBarStyled = styled.div`
 
   @media ${device['landscape-tablets']} {
     &.modal_searchbar {
-      position: fixed;
-      top: 0;
+      position: absolute;
+      top: 45px;
       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;
+      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,59 +1,82 @@
-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 { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import search from '../../../../images/svg/search_24px.svg'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 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'>
       <div className='modal_searchbar__content'>
         <DropdownInput
           ref={searchInputRef}
-          name='search'
+          name='desktop-search'
           className='search'
           placeholder={searchBarTexts.placeholder}
-          icon={<SearchIcon />}
-          onChange={(text: string) => {
-            searchFunction(text)
-          }}
+          icon={<CloseIcon />}
+          onChange={searchFunction}
           results={results}
+          onClose={onClose}
         />
       </div>
     </SearchBarStyled>
@@ -98,13 +121,11 @@ const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, r
     <SearchBarStyled ref={searchBarContainerRef}>
       <DropdownInput
         ref={searchInputRef}
-        name='search'
+        name='mobile-and-tablet-search'
         className='search'
         placeholder={searchBarTexts.placeholder}
         icon={<SearchIcon />}
-        onChange={(text: string) => {
-          searchFunction(text)
-        }}
+        onChange={searchFunction}
         results={results}
       />
     </SearchBarStyled>
@@ -114,9 +135,34 @@ 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', display: 'flex' }}>
+        <a
+          onClick={() => setIsModalOpen(true)}
+          style={{
+            cursor: 'pointer',
+            display: 'inline-block',
+            width: '20px',
+            height: '20px'
+          }}
+        >
+          <img
+            src={search}
+            alt='search-icon-primary'
+            style={{
+              width: '100%',
+              height: '100%'
+            }}
+          />
+        </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.5",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",