@npm_leadtech/legal-lib-components 7.22.8 → 7.22.10

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

@@ -1,54 +1,11 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const SearchBarStyled = styled.div `
-  .dropdown_input {
-    .search {
-      width: calc(100% - 3rem);
-      margin: 0 1.5rem;
-    }
-  }
-
-  @media ${device['landscape-tablets']} {
-    &.modal_searchbar {
-      position: absolute;
-      top: 45px;
-      left: 0;
-      z-index: 10000;
-      width: 400px;
-      max-width: 90vw;
-      background: transparent;
-
-      .modal_searchbar__content {
-        background-color: var(--others-white);
-        padding: 1.5rem;
-        border-radius: 8px;
-        width: 100%;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-        @media ${device['laptop']} {
-          padding: 0;
-        }
-      }
-
-      .modal_searchbar__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-      }
-
-      .modal_searchbar__title {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: var(--others-black);
-      }
+  .search-icon-container {
+    display: none;
 
-      .dropdown_input {
-        .search {
-          width: 100%;
-          margin: 0;
-        }
-      }
+    @media ${device['landscape-tablets']} {
+      display: block;
     }
   }
 `;

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

@@ -2,54 +2,11 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const SearchBarStyled = styled.div`
-  .dropdown_input {
-    .search {
-      width: calc(100% - 3rem);
-      margin: 0 1.5rem;
-    }
-  }
-
-  @media ${device['landscape-tablets']} {
-    &.modal_searchbar {
-      position: absolute;
-      top: 45px;
-      left: 0;
-      z-index: 10000;
-      width: 400px;
-      max-width: 90vw;
-      background: transparent;
-
-      .modal_searchbar__content {
-        background-color: var(--others-white);
-        padding: 1.5rem;
-        border-radius: 8px;
-        width: 100%;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-        @media ${device['laptop']} {
-          padding: 0;
-        }
-      }
-
-      .modal_searchbar__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-      }
-
-      .modal_searchbar__title {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: var(--others-black);
-      }
+  .search-icon-container {
+    display: none;
 
-      .dropdown_input {
-        .search {
-          width: 100%;
-          margin: 0;
-        }
-      }
+    @media ${device['landscape-tablets']} {
+      display: block;
     }
   }
 `

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

@@ -1,157 +1,29 @@
 /* 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'
-
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useState } from 'react'
+import { DesktopSearchBar } from '../DesktopSearchBar'
+import { MobileSearchBar } from '../MobileSearchBar'
 import { type SearchBarProps } from './SearchBarProps.types'
 import { SearchBarStyled } from './SearchBar.styled'
-import { useSearchFunction } from '../../../hooks/useSearchFunction'
-
-interface DesktopSearchBarProps extends SearchBarProps {
-  isOpen: boolean
-  onClose: () => void
-  isDesktop: boolean
-}
-
-const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
-  products,
-  searchBarTexts,
-  routes,
-  handleResultClick,
-  isOpen,
-  onClose,
-  isDesktop
-}) => {
-  const { results, searchFunction } = useSearchFunction({
-    products,
-    searchBarTexts,
-    routes,
-    handleResultClick,
-    onClose
-  })
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const searchBarContainerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-    const handleClickOutside = (event: MouseEvent) => {
-      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
-        onClose()
-      }
-    }
-
-    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)
-    }
-  }, [isOpen, onClose])
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <SearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
-      <div className='modal_searchbar__content'>
-        <DropdownInput
-          ref={searchInputRef}
-          name='desktop-search'
-          className='search'
-          placeholder={searchBarTexts.placeholder}
-          icon={isDesktop ? <CloseIcon /> : <SearchIcon />}
-          onChange={searchFunction}
-          results={results}
-          onClose={onClose}
-        />
-      </div>
-    </SearchBarStyled>
-  )
-}
-
-const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
-  const { results, searchFunction } = useSearchFunction({
-    products,
-    searchBarTexts,
-    routes,
-    handleResultClick
-  })
-  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('')
-      }
-    }
-    const handleClickOutside = (event: MouseEvent) => {
-      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
-        searchFunction('')
-      }
-    }
-
-    if (isResultsVisible) {
-      document.addEventListener('keydown', handleKeyDown)
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isResultsVisible, searchFunction])
-
-  return (
-    <SearchBarStyled ref={searchBarContainerRef}>
-      <DropdownInput
-        ref={searchInputRef}
-        name='mobile-and-tablet-search'
-        className='search'
-        placeholder={searchBarTexts.placeholder}
-        icon={<SearchIcon />}
-        onChange={searchFunction}
-        results={results}
-      />
-    </SearchBarStyled>
-  )
-}
+import search from '../../../../images/svg/search_24px.svg'
 
 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 (
+  return (
+    <SearchBarStyled>
       <div style={{ position: 'relative', display: 'flex' }}>
         <a
           onClick={() => setIsModalOpen(true)}
           style={{
             cursor: 'pointer',
-            display: 'inline-block',
             width: '20px',
             height: '20px'
           }}
+          className='search-icon-container'
         >
           <img
             src={search}
@@ -162,10 +34,9 @@ export const SearchBar: React.FC<SearchBarProps> = (props) => {
             }}
           />
         </a>
-        <DesktopSearchBar {...props} isDesktop={isDesktop} isOpen={isModalOpen} onClose={closeModal} />
+        <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
+        <MobileSearchBar {...props} />
       </div>
-    )
-  }
-
-  return <MobileSearchBar {...props} />
+    </SearchBarStyled>
+  )
 }