@npm_leadtech/legal-lib-components 7.23.51 → 7.25.0

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react'
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
+import { DesktopSearchBarStyled } from './DesktopSearchBar.styled'
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
+import { useSearchFunction } from '../../../hooks/useSearchFunction'
+
+interface DesktopSearchBarProps extends SearchBarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
+  products,
+  searchBarTexts,
+  routes,
+  handleResultClick,
+  isOpen,
+  onClose
+}) => {
+  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 (
+    <DesktopSearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
+      <div className='modal_searchbar__content'>
+        <DropdownInput
+          ref={searchInputRef}
+          name='desktop-search'
+          className='search'
+          placeholder={searchBarTexts.placeholder}
+          icon={<CloseIcon />}
+          onChange={searchFunction}
+          results={results}
+          onClose={onClose}
+        />
+      </div>
+    </DesktopSearchBarStyled>
+  )
+}

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.d.ts

@@ -0,0 +1,37 @@
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface Routes {
+    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
+    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
+    LEGAL_DOCUMENTS: string;
+    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
+    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
+    LOGIN: string;
+    MY_DOCUMENTS: string;
+    REGISTER: string;
+    RATAFIA_LOGIN: string;
+    SIGN_EDITOR: string;
+}
+export interface DesktopSearchBarProps {
+    products: Products[];
+    searchBarTexts: StrapiSearchBar;
+    routes: Routes;
+    handleResultClick: (product: string, link: string) => void;
+}

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.ts

@@ -0,0 +1,40 @@
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface Routes {
+  CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
+  CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
+  LEGAL_DOCUMENTS: string
+  LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
+  LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
+  LOGIN: string
+  MY_DOCUMENTS: string
+  REGISTER: string
+  RATAFIA_LOGIN: string
+  SIGN_EDITOR: string
+}
+
+export interface DesktopSearchBarProps {
+  products: Products[]
+  searchBarTexts: StrapiSearchBar
+  routes: Routes
+  handleResultClick: (product: string, link: string) => void
+}

package/dist/src/components/molecules/DesktopSearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopSearchBar } from './DesktopSearchBar';
+export { type DesktopSearchBarProps } from './DesktopSearchBarProps.types';

package/dist/src/components/molecules/DesktopSearchBar/index.js

@@ -0,0 +1 @@
+export { DesktopSearchBar } from './DesktopSearchBar';

package/dist/src/components/molecules/DesktopSearchBar/index.ts

@@ -0,0 +1,2 @@
+export { DesktopSearchBar } from './DesktopSearchBar'
+export { type DesktopSearchBarProps } from './DesktopSearchBarProps.types'

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types';
+export declare const MobileSearchBar: React.FC<SearchBarProps>;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
+import { MobileSearchBarStyled } from './MobileSearchBar.styled';
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
+import { useSearchFunction } from '../../../hooks/useSearchFunction';
+export 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(MobileSearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'mobile-and-tablet-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
+};

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.styled.d.ts

@@ -0,0 +1 @@
+export declare const MobileSearchBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,17 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MobileSearchBarStyled = styled.div `
+  display: block;
+  width: 100%;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+    }
+  }
+`;

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

@@ -0,0 +1,18 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const MobileSearchBarStyled = styled.div`
+  display: block;
+  width: 100%;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+    }
+  }
+`

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react'
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { MobileSearchBarStyled } from './MobileSearchBar.styled'
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import { useSearchFunction } from '../../../hooks/useSearchFunction'
+
+export 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 (
+    <MobileSearchBarStyled ref={searchBarContainerRef}>
+      <DropdownInput
+        ref={searchInputRef}
+        name='mobile-and-tablet-search'
+        className='search'
+        placeholder={searchBarTexts.placeholder}
+        icon={<SearchIcon />}
+        onChange={searchFunction}
+        results={results}
+      />
+    </MobileSearchBarStyled>
+  )
+}

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.d.ts

@@ -0,0 +1,37 @@
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface Routes {
+    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
+    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
+    LEGAL_DOCUMENTS: string;
+    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
+    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
+    LOGIN: string;
+    MY_DOCUMENTS: string;
+    REGISTER: string;
+    RATAFIA_LOGIN: string;
+    SIGN_EDITOR: string;
+}
+export interface SearchBarProps {
+    products: Products[];
+    searchBarTexts: StrapiSearchBar;
+    routes: Routes;
+    handleResultClick: (product: string, link: string) => void;
+}

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.ts

@@ -0,0 +1,40 @@
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface Routes {
+  CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
+  CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
+  LEGAL_DOCUMENTS: string
+  LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
+  LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
+  LOGIN: string
+  MY_DOCUMENTS: string
+  REGISTER: string
+  RATAFIA_LOGIN: string
+  SIGN_EDITOR: string
+}
+
+export interface SearchBarProps {
+  products: Products[]
+  searchBarTexts: StrapiSearchBar
+  routes: Routes
+  handleResultClick: (product: string, link: string) => void
+}

package/dist/src/components/molecules/MobileSearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileSearchBar } from './MobileSearchBar';
+export { type SearchBarProps } from './MobileSearchBarProps.types';

package/dist/src/components/molecules/MobileSearchBar/index.js

@@ -0,0 +1 @@
+export { MobileSearchBar } from './MobileSearchBar';

package/dist/src/components/molecules/MobileSearchBar/index.ts

@@ -0,0 +1,2 @@
+export { MobileSearchBar } from './MobileSearchBar'
+export { type SearchBarProps } from './MobileSearchBarProps.types'

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

@@ -1,33 +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/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { useState } from 'react';
-import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
-import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
-import { useWindowSize } from '../../../hooks/useWindowSize';
+import { DesktopSearchBar } from '../DesktopSearchBar';
+import { MobileSearchBar } from '../MobileSearchBar';
 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) => {
-                searchFunction(text);
-            }, results: results }) }));
+import search from '../../../../images/svg/search_24px.svg';
+export const SearchBar = (props) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const closeModal = () => setIsModalOpen(false);
+    return (_jsx(SearchBarStyled, { children: _jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), style: {
+                        cursor: 'pointer',
+                        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.styled.js

@@ -1,62 +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;
+  .search-icon-container {
+    display: none;
 
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
-
-      @media ${device['landscape-tablets']} {
-        display: block;
-        width: 10rem;
-        margin: 0 1.5rem 0 0;
-      }
-
-      @media ${device['desktop']} {
-        width: 14rem;
-      }
-
-      .dropdown_input__results {
-        transition: all 0.25s;
-        min-width: 100%;
-        width: max-content;
-      }
-
-      .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;
-        }
-      }
-    }
-  }
-
-  @keyframes newLine {
-    0% {
-      opacity: 0;
-      line-height: 0rem;
-    }
-
-    100% {
-      opacity: 1;
-      line-height: 1.5rem;
+    @media ${device['landscape-tablets']} {
+      display: block;
     }
   }
 `;

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

@@ -2,62 +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;
+  .search-icon-container {
+    display: none;
 
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
-
-      @media ${device['landscape-tablets']} {
-        display: block;
-        width: 10rem;
-        margin: 0 1.5rem 0 0;
-      }
-
-      @media ${device['desktop']} {
-        width: 14rem;
-      }
-
-      .dropdown_input__results {
-        transition: all 0.25s;
-        min-width: 100%;
-        width: max-content;
-      }
-
-      .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;
-        }
-      }
-    }
-  }
-
-  @keyframes newLine {
-    0% {
-      opacity: 0;
-      line-height: 0rem;
-    }
-
-    100% {
-      opacity: 1;
-      line-height: 1.5rem;
+    @media ${device['landscape-tablets']} {
+      display: block;
     }
   }
 `