@npm_leadtech/legal-lib-components 7.22.0 → 7.22.3

package/dist/images/svg/close-grey-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="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/src/components/atoms/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DropdownInputProps } from './DropdownInputProps.types';
-export declare const DropdownInput: React.FC<DropdownInputProps>;
+export declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { DropdownInputStyled } from './DropdownInput.styled';
-export const DropdownInput = ({ onChange, results, className = '', name, icon, placeholder }) => {
+export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder }, ref) => {
     const [searchTerm, setSearchTerm] = useState('');
     const updateInput = (e) => {
         setSearchTerm(e.target.value);
@@ -11,7 +11,7 @@ export const DropdownInput = ({ onChange, results, className = '', name, icon, p
     const resetInput = () => {
         setSearchTerm('');
     };
-    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
+    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { ref: ref, className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
                             updateInput(e);
                         } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, children: [icon &&
                                 React.cloneElement(icon, {
@@ -21,4 +21,5 @@ export const DropdownInput = ({ onChange, results, className = '', name, icon, p
                                 }, onKeyDown: () => {
                                     resetInput();
                                 } }))] })] }), searchTerm && !!results?.length && _jsx("ul", { className: 'dropdown_input__results', children: results })] }));
-};
+});
+DropdownInput.displayName = 'DropdownInput';

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

@@ -2,32 +2,13 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DropdownInputStyled = styled.div `
   position: relative;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
 
-  a {
-    text-decoration: none;
+  @media ${device['landscape-tablets']} {
+    padding: 1rem 2rem;
   }
 
-  &:focus-within {
-    @media ${device['landscape-tablets']} {
-      .dropdown_input__container {
-        border-bottom: 2px var(--neutral-neutral-4) solid;
-      }
-
-      .dropdown_input__results {
-        opacity: 1;
-      }
-    }
-
-    .dropdown_input__container__icon {
-      color: var(--primary-main);
-
-      svg {
-        fill: var(--primary-main);
-        stroke: var(--primary-main);
-      }
-    }
+  a {
+    text-decoration: none;
   }
 
   .dropdown_input__container {
@@ -41,6 +22,23 @@ export const DropdownInputStyled = styled.div `
       border-bottom: 2px solid transparent;
     }
 
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device['landscape-tablets']} {
+        border-bottom: 2px var(--neutral-neutral-4) solid;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--primary-main);
+
+        svg {
+          fill: var(--primary-main);
+          stroke: var(--primary-main);
+        }
+      }
+    }
+
     .dropdown_input__container__text_input {
       width: 100%;
       height: 100%;
@@ -55,7 +53,7 @@ export const DropdownInputStyled = styled.div `
         color: var(--neutral-neutral-3);
       }
 
-      .dropdown_input__container__text_input.with-icon {
+      &.with-icon {
         padding-right: 2rem;
       }
     }
@@ -79,6 +77,7 @@ export const DropdownInputStyled = styled.div `
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
+        cursor: pointer;
 
         path {
           transition: all 0.25s;
@@ -115,21 +114,27 @@ export const DropdownInputStyled = styled.div `
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
-    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: $s-border-radius;
-    margin-top: 1rem;
+    border-radius: 8px;
     background: var(--others-white);
     min-width: 20rem;
-
-    @media ${device['landscape-tablets']} {
-      position: absolute;
-      opacity: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
+
+    @media ${device['laptop']} {
+      opacity: 1;
       left: 0;
       top: 100%;
-      box-shadow: $box-shadow-medium;
-      padding: 0.75rem 1rem;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: 0;
+      border: none;
+      border-radius: 0 0 8px 8px;
     }
 
     & > li > * {

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

@@ -1,35 +1,15 @@
 import { device } from '../../../globalStyles/breakpoints'
-
 import styled from 'styled-components'
 
 export const DropdownInputStyled = styled.div`
   position: relative;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
 
-  a {
-    text-decoration: none;
+  @media ${device['landscape-tablets']} {
+    padding: 1rem 2rem;
   }
 
-  &:focus-within {
-    @media ${device['landscape-tablets']} {
-      .dropdown_input__container {
-        border-bottom: 2px var(--neutral-neutral-4) solid;
-      }
-
-      .dropdown_input__results {
-        opacity: 1;
-      }
-    }
-
-    .dropdown_input__container__icon {
-      color: var(--primary-main);
-
-      svg {
-        fill: var(--primary-main);
-        stroke: var(--primary-main);
-      }
-    }
+  a {
+    text-decoration: none;
   }
 
   .dropdown_input__container {
@@ -43,6 +23,23 @@ export const DropdownInputStyled = styled.div`
       border-bottom: 2px solid transparent;
     }
 
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device['landscape-tablets']} {
+        border-bottom: 2px var(--neutral-neutral-4) solid;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--primary-main);
+
+        svg {
+          fill: var(--primary-main);
+          stroke: var(--primary-main);
+        }
+      }
+    }
+
     .dropdown_input__container__text_input {
       width: 100%;
       height: 100%;
@@ -57,7 +54,7 @@ export const DropdownInputStyled = styled.div`
         color: var(--neutral-neutral-3);
       }
 
-      .dropdown_input__container__text_input.with-icon {
+      &.with-icon {
         padding-right: 2rem;
       }
     }
@@ -81,6 +78,7 @@ export const DropdownInputStyled = styled.div`
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
+        cursor: pointer;
 
         path {
           transition: all 0.25s;
@@ -117,21 +115,27 @@ export const DropdownInputStyled = styled.div`
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
-    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: $s-border-radius;
-    margin-top: 1rem;
+    border-radius: 8px;
     background: var(--others-white);
     min-width: 20rem;
-
-    @media ${device['landscape-tablets']} {
-      position: absolute;
-      opacity: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
+
+    @media ${device['laptop']} {
+      opacity: 1;
       left: 0;
       top: 100%;
-      box-shadow: $box-shadow-medium;
-      padding: 0.75rem 1rem;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: 0;
+      border: none;
+      border-radius: 0 0 8px 8px;
     }
 
     & > li > * {

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

@@ -1,60 +1,57 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-import React, { useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { DropdownInputProps } from './DropdownInputProps.types'
 import { DropdownInputStyled } from './DropdownInput.styled'
 
-export const DropdownInput: React.FC<DropdownInputProps> = ({
-  onChange,
-  results,
-  className = '',
-  name,
-  icon,
-  placeholder
-}) => {
-  const [searchTerm, setSearchTerm] = useState('')
+export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
+  ({ onChange, results, className = '', name, icon, placeholder }, ref) => {
+    const [searchTerm, setSearchTerm] = useState('')
 
-  const updateInput = (e): void => {
-    setSearchTerm(e.target.value)
-    onChange(e.target.value)
-  }
+    const updateInput = (e): void => {
+      setSearchTerm(e.target.value)
+      onChange(e.target.value)
+    }
 
-  const resetInput = (): void => {
-    setSearchTerm('')
-  }
+    const resetInput = (): void => {
+      setSearchTerm('')
+    }
 
-  return (
-    <DropdownInputStyled className={`dropdown_input ${className}`}>
-      <div className='dropdown_input__container'>
-        <input
-          className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
-          type='text'
-          name={`dropdown_input_${name}`}
-          placeholder={placeholder}
-          value={searchTerm}
-          onChange={(e) => {
-            updateInput(e)
-          }}
-        />
-        <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
-          {icon &&
-            React.cloneElement(icon, {
-              className: 'dropdown_input__container__icon__main'
-            })}
-          {searchTerm && (
-            <div
-              className='icon-cross main-color dropdown_input__container__icon__clear'
-              onClick={() => {
-                resetInput()
-              }}
-              onKeyDown={() => {
-                resetInput()
-              }}
-            ></div>
-          )}
+    return (
+      <DropdownInputStyled className={`dropdown_input ${className}`}>
+        <div className='dropdown_input__container'>
+          <input
+            ref={ref}
+            className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
+            type='text'
+            name={`dropdown_input_${name}`}
+            placeholder={placeholder}
+            value={searchTerm}
+            onChange={(e) => {
+              updateInput(e)
+            }}
+          />
+          <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
+            {icon &&
+              React.cloneElement(icon, {
+                className: 'dropdown_input__container__icon__main'
+              })}
+            {searchTerm && (
+              <div
+                className='icon-cross main-color dropdown_input__container__icon__clear'
+                onClick={() => {
+                  resetInput()
+                }}
+                onKeyDown={() => {
+                  resetInput()
+                }}
+              ></div>
+            )}
+          </div>
         </div>
-      </div>
-      {searchTerm && !!results?.length && <ul className='dropdown_input__results'>{results}</ul>}
-    </DropdownInputStyled>
-  )
-}
+        {searchTerm && !!results?.length && <ul className='dropdown_input__results'>{results}</ul>}
+      </DropdownInputStyled>
+    )
+  }
+)
+
+DropdownInput.displayName = 'DropdownInput'

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

@@ -1,33 +1,83 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
 import { useWindowSize } from '../../../hooks/useWindowSize';
 import { SearchBarStyled } from './SearchBar.styled';
-export const SearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
-    const [results, setResults] = useState([]);
-    const windowSize = useWindowSize();
-    const _placeholder = windowSize.width === null || windowSize.width >= 720 ? '' : searchBarTexts.placeholder;
-    const searchFunction = (text) => {
-        const searchTerm = text.toLowerCase();
-        const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm));
-        const results = productsFiltered
-            .map((item) => {
-            const product = item.linkText;
-            const preMatch = product.slice(0, product.toLowerCase().indexOf(searchTerm));
-            const match = product.slice(product.toLowerCase().indexOf(searchTerm), preMatch.length + searchTerm.length);
-            const postMatch = product.slice(product.toLowerCase().indexOf(searchTerm) + searchTerm.length, product.length);
-            const link = item.categoryUrl ? `${item.categoryUrl}/${item.slug}` : item.slug;
-            return (_jsx("li", { className: 'dropdown_input__item', children: _jsxs("a", { href: routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link), className: 'dropdown_input__link', onClick: (e) => {
-                        e.preventDefault();
-                        handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link));
-                    }, title: product, children: [preMatch, _jsx("strong", { className: 'dropdown_input__link__emphasis', children: match }), postMatch] }, item.linkText) }, searchBarTexts.title));
-        })
-            .slice(0, 9);
-        results.push(_jsx("li", { className: 'dropdown_input__item', children: _jsx("a", { className: 'dropdown_input__link--all', title: searchBarTexts.title, href: routes.LEGAL_DOCUMENTS, children: searchBarTexts.title }) }, searchBarTexts.title));
-        setResults(results);
-    };
-    return (_jsx(SearchBarStyled, { children: _jsx(DropdownInput, { name: 'search', className: 'search', placeholder: _placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
+import { useSearchFunction } from '../../../hooks/useSearchFunction';
+const DesktopSearchBar = ({ 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, 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 }) }) }));
+};
+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: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
                 searchFunction(text);
             }, results: results }) }));
 };
+export const SearchBar = (props) => {
+    const windowSize = useWindowSize();
+    const isDesktop = !!windowSize.width && windowSize.width >= 960;
+    if (isDesktop) {
+        return _jsx(DesktopSearchBar, { ...props });
+    }
+    return _jsx(MobileSearchBar, { ...props });
+};

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

@@ -5,58 +5,56 @@ export const SearchBarStyled = styled.div `
     .search {
       width: calc(100% - 3rem);
       margin: 0 1.5rem;
+    }
+  }
 
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
-
-      @media ${device['landscape-tablets']} {
-        display: block;
-        width: 10rem;
-        margin: 0 1.5rem 0 0;
+  @media ${device['landscape-tablets']} {
+    &.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;
+
+      .modal_searchbar__content {
+        background-color: var(--neutral-white);
+        padding: 1.5rem;
+        border-radius: 8px;
+        width: 90%;
+        max-width: 768px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+        @media ${device['landscape-tablets']} {
+          padding: 0;
+          border-radius: 8px 8px 0 0;
+        }
       }
 
-      @media ${device['desktop']} {
-        width: 14rem;
+      .modal_searchbar__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
       }
 
-      .dropdown_input__results {
-        transition: all 0.25s;
-        min-width: 100%;
-        width: max-content;
+      .modal_searchbar__title {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--others-black);
       }
 
-      .dropdown_input__link {
-        color: var(--neutral-neutral-3);
-        animation: newLine 0.5s;
-
-        &:hover {
-          color: var(--others-black);
-        }
-
-        &__emphasis {
-          font-style: normal;
-          font-weight: normal;
-          color: var(--others-black);
-        }
-
-        &--all {
-          font-weight: bold;
-          animation: none;
+      .dropdown_input {
+        .search {
+          width: 100%;
+          margin: 0;
         }
       }
     }
   }
-
-  @keyframes newLine {
-    0% {
-      opacity: 0;
-      line-height: 0rem;
-    }
-
-    100% {
-      opacity: 1;
-      line-height: 1.5rem;
-    }
-  }
 `;