@npm_leadtech/legal-lib-components 7.22.8 → 7.22.9

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

@@ -1,100 +1,21 @@
 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';
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { useState } from 'react';
+import { DesktopSearchBar } from '../DesktopSearchBar';
+import { MobileSearchBar } from '../MobileSearchBar';
 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, isOpen, onClose, isDesktop }) => {
-    const { results, searchFunction } = useSearchFunction({
-        products,
-        searchBarTexts,
-        routes,
-        handleResultClick,
-        onClose
-    });
-    const searchInputRef = useRef(null);
-    const searchBarContainerRef = useRef(null);
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                onClose();
-            }
-        };
-        const handleClickOutside = (event) => {
-            if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
-                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 (_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: isDesktop ? _jsx(CloseIcon, {}) : _jsx(SearchIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
-};
-const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
-    const { results, searchFunction } = useSearchFunction({
-        products,
-        searchBarTexts,
-        routes,
-        handleResultClick
-    });
-    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('');
-            }
-        };
-        const handleClickOutside = (event) => {
-            if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
-                searchFunction('');
-            }
-        };
-        if (isResultsVisible) {
-            document.addEventListener('keydown', handleKeyDown);
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isResultsVisible, searchFunction]);
-    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 (_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, isDesktop: isDesktop, isOpen: isModalOpen, onClose: closeModal })] }));
-    }
-    return _jsx(MobileSearchBar, { ...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'
+                }, className: 'search-icon-container', children: _jsx("img", { src: search, alt: 'search-icon-primary', style: {
+                        width: '100%',
+                        height: '100%'
+                    } }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal }), _jsx(MobileSearchBar, { ...props })] }));
 };

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

@@ -1,171 +1,40 @@
 /* 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 (
-      <div style={{ position: 'relative', display: 'flex' }}>
-        <a
-          onClick={() => setIsModalOpen(true)}
+  return (
+    <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}
+          alt='search-icon-primary'
           style={{
-            cursor: 'pointer',
-            display: 'inline-block',
-            width: '20px',
-            height: '20px'
+            width: '100%',
+            height: '100%'
           }}
-        >
-          <img
-            src={search}
-            alt='search-icon-primary'
-            style={{
-              width: '100%',
-              height: '100%'
-            }}
-          />
-        </a>
-        <DesktopSearchBar {...props} isDesktop={isDesktop} isOpen={isModalOpen} onClose={closeModal} />
-      </div>
-    )
-  }
-
-  return <MobileSearchBar {...props} />
+        />
+      </a>
+      <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
+      <MobileSearchBar {...props} />
+    </div>
+  )
 }