@secondstaxorg/sscomp 1.9.29 → 1.9.31

package/dist/index.js

@@ -32531,7 +32531,6 @@ const DropdownContainer = styled.div`
   max-height: 150px;
   animation: pull-down 0.3s ease-out;
   opacity: 1;
-  display:none;
   z-index: 10;
   @keyframes pull-down{
     from{
@@ -32559,35 +32558,47 @@ const DropdownContainer = styled.div`
 const _jsxFileName$4 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\LanguageSwitcher\\LanguageSwitcher.tsx";
 const LanguageSwitcher = (props) => {
     const {languages,onClick,initialLanguage} = props;
-    const [toggleList,setToggleList] = React$1.useState(true);
     const [selectedLang,setSelectedLang] = React$1.useState({flag: "", language: "", shortName: ""});
 
     React$1.useEffect(() => {
         document.addEventListener('click',clickOutside);
 
         function clickOutside(e){
-            const ddContainer = document.querySelector('.lang-switcher');
-            if (ddContainer){
-                const contains = ddContainer.contains((e.target) );
-                setToggleList(contains);
-            }
+            const ddContainers = document.querySelectorAll('.lang-switcher');
+            ddContainers.forEach((ddContainer) => {
+                if (ddContainer){
+                    const contains = ddContainer.contains((e.target) );
+                    if (!contains){
+                        ddContainer.querySelector('.caret-icon').classList.remove('rotate');
+                        ddContainer.querySelector('.dropdown-container').style.display = 'none';
+                    }
+                }
+            });
         }
-
         return ()=>document.removeEventListener('click',clickOutside)
     }, []);
 
     React$1.useEffect(()=>{
         function toggleFlyout(e){
-            e.currentTarget.querySelector('.dropdown-container').style.display = toggleList ? 'block' : 'none';
+            const caret = e.currentTarget.querySelector('.caret-icon');
+            const ddContainer = e.currentTarget.querySelector('.dropdown-container');
+            if (ddContainer.style.display == 'none'){
+                ddContainer.style.display = 'block';
+                caret.classList.add('rotate');
+            }else {
+                ddContainer.style.display = 'none';
+                caret.classList.remove('rotate');
+            }
         }
 
-        const dd = document.querySelectorAll('.lang-switcher');
-        dd.forEach((dropdown) => {
-            dropdown.addEventListener('click',toggleFlyout);
+        const langSwitchers = document.querySelectorAll('.lang-switcher');
+        langSwitchers.forEach((langSwitcher) => {
+            langSwitcher.addEventListener('click',toggleFlyout);
         });
 
         return ()=>document.removeEventListener('click',toggleFlyout)
-    },[toggleList]);
+    },[]);
+
 
     React$1.useEffect(()=>{
         if (initialLanguage) switchLanguage(initialLanguage);
@@ -32599,41 +32610,37 @@ const LanguageSwitcher = (props) => {
     }
 
     return (
-        React$1.createElement(React$1.Fragment, null
-            , React$1.createElement('div', { className: "lang-switcher", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 51}}
-                , React$1.createElement(SwitcherContainer, { type: "button", onClick: () => {
-                    setTimeout(() => {
-                        setToggleList(!toggleList);
-                    }, 0);
-                }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 52}}
-                    , React$1.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 57}}
-                        , React$1.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 58}})
-                        , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 59}}, selectedLang.language)
+        React$1.createElement('div', { style: {display:'flex', gap:8}, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 62}}
+            , React$1.createElement('div', { className: "lang-switcher", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 63}}
+                , React$1.createElement(SwitcherContainer, { type: "button", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 64}}
+                    , React$1.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 65}}
+                        , React$1.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 66}})
+                        , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 67}}, selectedLang.language)
                         /*caret icon*/
                         , React$1.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$4, lineNumber: 61}}
-                            , React$1.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 63}}
+                             className: `caret-icon`, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 69}}
+                            , React$1.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 71}}
                                 , React$1.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$4, lineNumber: 64}})
+                                    fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 72}})
                             )
-                            , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 68}}
-                                , React$1.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 69}}
-                                    , React$1.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 70}})
+                            , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 76}}
+                                , React$1.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 77}}
+                                    , React$1.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 78}})
                                 )
                             )
                         )
                     )
                 )
-                , React$1.createElement(DropdownContainer, { className: "dropdown-container transition" , __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 76}}
+                , React$1.createElement(DropdownContainer, { className: "dropdown-container transition" , style: {display:'none'}, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 84}}
                     , languages.map((language, index) => (
-                        React$1.createElement('button', { key: index, type: "button", className: "option-item", onClick: () => {
+                        React$1.createElement('button', { key: index, type: "button", className: "option-item", onClick: (e) => {
                             switchLanguage(language.language);
-                            setToggleList(false);
                             onClick(language);
-                        }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 78}}
-                            , React$1.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 83}})
-                            , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 84}}, language.language)
+                            (e.currentTarget.parentNode ).style.display = 'none';
+                        }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 86}}
+                            , React$1.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 91}})
+                            , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 92}}, language.language)
                         )
                     ))
                 )