@secondstaxorg/sscomp 1.8.93 → 1.8.95

package/dist/index.js

@@ -3,6 +3,7 @@
 var React$2 = require('react');
 var styled = require('styled-components');
 var reactPdf = require('react-pdf');
+require('@secondstaxorg/sscomp/dist/typography.css');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -32409,18 +32410,37 @@ const SwitcherContainer = styled.button`
     display: flex;
     gap: 4px;
     align-items: center;
+    svg{
+      rotate: 0;
+      transition: 0.3s ease-out;
+      &.rotate{
+        rotate: -180deg;
+      }
+    }  
   }
 `;
 
 const DropdownContainer = styled.div`
+  position: absolute;
   background:#ffffff;
   border-radius: 8px;
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.04);
   width: fit-content;
   min-width: 150px;
   margin-top: 4px;
+  transform-origin: top;
   overflow:auto;
   max-height: 150px;
+  animation: pull-down 0.3s ease-out;
+  opacity: 1;
+  @keyframes pull-down{
+    from{
+      transform: scaleY(0);
+    }
+    to{
+      transform: scaleY(1);
+    }
+  }
   .option-item{
     padding: 12px 16px;
     display: flex;
@@ -32443,9 +32463,23 @@ const LanguageSwitcher = (props) => {
     const [toggleList,setToggleList] = React$2.useState(false);
     const [selectedLang,setSelectedLang] = React$2.useState({flag: "", language: "", shortName: ""});
 
+    React$2.useEffect(() => {
+        document.addEventListener('click',clickOutside);
+
+        function clickOutside(e){
+            const ddContainer = document.querySelector('.lang-switcher');
+            if (ddContainer){
+                const contains = ddContainer.contains((e.target) );
+                setToggleList(contains);
+            }
+        }
+
+        return ()=>document.removeEventListener('click',clickOutside)
+    }, []);
+
     React$2.useEffect(()=>{
-        switchLanguage(initialLanguage);
-    },[]);
+        if (initialLanguage) switchLanguage(initialLanguage);
+    },[initialLanguage]);
 
     function switchLanguage(selLang){
         const selected = languages.filter((language) => selLang.toLowerCase() === language.language.toLowerCase() || selLang.toLowerCase() === language.shortName.toLowerCase())[0];
@@ -32453,34 +32487,38 @@ const LanguageSwitcher = (props) => {
     }
 
     return (
-        React.createElement(React.Fragment, null
-            , React.createElement(SwitcherContainer, { type: "button", onClick: ()=>{setToggleList(!toggleList);}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 24}}
-                , React.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 25}}
-                    , React.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}})
-                    , React.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}, selectedLang.language)
+        React.createElement('div', { className: "lang-switcher", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 38}}
+            , React.createElement(SwitcherContainer, { type: "button", onClick: ()=>{
+                setTimeout(()=>{
+                    setToggleList(!toggleList);
+                },0);
+            }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 39}}
+                , React.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}
+                    , React.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 45}})
+                    , React.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 46}}, selectedLang.language)
                     /*caret icon*/
-                    , React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}
-                        , React.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
-                            , React.createElement('path', { d: "M11.3333 6.11336C11.2084 5.98919 11.0395 5.91949 10.8633 5.91949C10.6872 5.91949 10.5182 5.98919 10.3933 6.11336L8.00001 8.47336L5.64001 6.11336C5.5151 5.98919 5.34613 5.91949 5.17001 5.91949C4.99388 5.91949 4.82491 5.98919 4.70001 6.11336C4.63752 6.17533 4.58792 6.24907 4.55408 6.33031C4.52023 6.41154 4.50281 6.49868 4.50281 6.58669C4.50281 6.6747 4.52023 6.76183 4.55408 6.84307C4.58792 6.92431 4.63752 6.99805 4.70001 7.06002L7.52667 9.88669C7.58865 9.94918 7.66238 9.99877 7.74362 10.0326C7.82486 10.0665 7.912 10.0839 8.00001 10.0839C8.08801 10.0839 8.17515 10.0665 8.25639 10.0326C8.33763 9.99877 8.41136 9.94918 8.47334 9.88669L11.3333 7.06002C11.3958 6.99805 11.4454 6.92431 11.4793 6.84307C11.5131 6.76183 11.5305 6.6747 11.5305 6.58669C11.5305 6.49868 11.5131 6.41154 11.4793 6.33031C11.4454 6.24907 11.3958 6.17533 11.3333 6.11336Z"                                                                                     , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}})
+                    , React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", className: toggleList ? 'rotate' : '', __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
+                        , React.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}
+                            , React.createElement('path', { d: "M11.3333 6.11336C11.2084 5.98919 11.0395 5.91949 10.8633 5.91949C10.6872 5.91949 10.5182 5.98919 10.3933 6.11336L8.00001 8.47336L5.64001 6.11336C5.5151 5.98919 5.34613 5.91949 5.17001 5.91949C4.99388 5.91949 4.82491 5.98919 4.70001 6.11336C4.63752 6.17533 4.58792 6.24907 4.55408 6.33031C4.52023 6.41154 4.50281 6.49868 4.50281 6.58669C4.50281 6.6747 4.52023 6.76183 4.55408 6.84307C4.58792 6.92431 4.63752 6.99805 4.70001 7.06002L7.52667 9.88669C7.58865 9.94918 7.66238 9.99877 7.74362 10.0326C7.82486 10.0665 7.912 10.0839 8.00001 10.0839C8.08801 10.0839 8.17515 10.0665 8.25639 10.0326C8.33763 9.99877 8.41136 9.94918 8.47334 9.88669L11.3333 7.06002C11.3958 6.99805 11.4454 6.92431 11.4793 6.84307C11.5131 6.76183 11.5305 6.6747 11.5305 6.58669C11.5305 6.49868 11.5131 6.41154 11.4793 6.33031C11.4454 6.24907 11.3958 6.17533 11.3333 6.11336Z"                                                                                     , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}})
                         )
-                        , React.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
-                            , React.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}
-                                , React.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}})
+                        , React.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}}
+                            , React.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 53}}
+                                , React.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 54}})
                             )
                         )
                     )
                 )
             )
             , toggleList &&
-                React.createElement(DropdownContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
+                React.createElement(DropdownContainer, { className: "dropdown-container transition" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 61}}
                     , languages.map((language,index) => (
                         React.createElement('button', { key: index, type: "button", className: "option-item", onClick: ()=>{
                             switchLanguage(language.language);
                             setToggleList(false);
                             onClick(language);
-                        }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}
-                            , React.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}})
-                            , React.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}, language.language)
+                        }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 63}}
+                            , React.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 68}})
+                            , React.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 69}}, language.language)
                         )
                     ))
                 )