@bothub-chat/ui/dist/components/lang-switcher/index.js

Bothub UI Components

import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTransition as n}from"@react-spring/web";import{useRef as r,useState as o,useId as i,useMemo as a,useCallback as c,useEffect as l}from"react";import{LangSwitcherStyled as d,LangSwitcherButton as s,LangSwitcherIcon as u,LangSwitcherItem as v,LangSwitcherList as m,LangSwitcherLabel as f,LangSwitcherInput as g}from"./styled.js";const p=({lang:p,region:w,dataRegions:h,dataLanguages:b,onChange:y})=>{const E=r(null),[L,j]=o(!1),k=i(),C=a((()=>h.find((e=>"object"==typeof e&&e.value===w.value))),[h,w]),x=a((()=>b.find((e=>"object"==typeof e&&e.value===p.value))),[b,p]),W=c((()=>{j((e=>!e))}),[]);l((()=>{var e;const t=()=>{const e=document.getElementById(k),t=null==e?void 0:e.getBoundingClientRect();t&&e&&(t.left<0&&(e.style.transform=`translateX(${-t.left-4}px)`),t.right>window.innerWidth&&(e.style.transform=`translateX(${window.innerWidth-t.right-4}px)`))};if(L)return null===(e=E.current)||void 0===e||e.addEventListener("transitionend",t),()=>{var e;null===(e=E.current)||void 0===e||e.removeEventListener("transitionend",t)}}),[L]);const $=c((()=>{j(!1)}),[]),H=c(((e,t)=>{"object"==typeof e&&e.value&&y({lang:"lang"===t?e.value:p.value,region:"region"===t?e.value:w.value})}),[y]);l((()=>{const e=E.current;if(null!==e){const t=t=>{e.contains(t.target)||j(!1)},n=()=>j(!1);return document.addEventListener("click",t),window.addEventListener("blur",n),()=>{document.removeEventListener("click",t),window.removeEventListener("blur",n)}}}),[]),l((()=>{if(!L)return;const e=e=>{const t=E.current,n=e.target;t&&t.contains(n)||$()};return window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("scroll",e,!0)}}),[L]),l((()=>{const e=E.current;if(null!==e){const t=t=>{e.contains(t.target)||j(!1)},n=()=>j(!1);return document.addEventListener("click",t),window.addEventListener("blur",n),()=>{document.removeEventListener("click",t),window.removeEventListener("blur",n)}}}),[]);const B=n(L,{from:{opacity:0,transform:"scale(0)"},enter:{opacity:L?1:.5,transform:`scale(${L?1:.999})`},leave:{opacity:0,transform:"scale(0.999)"},config:{duration:150}});return e(d,{ref:E,children:[t(s,{onClick:W,disableHoverColor:!0,endIcon:t(u,{$open:L}),children:e(v,{children:["object"==typeof C&&C.icon,"/ ","object"==typeof x&&x.value]})}),B(((n,r)=>r&&e(m,{style:n,id:k,children:[t(f,{children:p.label}),t(g,{contentHeight:"fit-content",compactWidth:!0,onOptionClick:e=>H(e,"lang"),value:x,data:b,dataTest:"lang-select"}),t(f,{children:w.label}),t(g,{contentHeight:"fit-content",compactWidth:!0,onOptionClick:e=>H(e,"region"),value:C,data:h,dataTest:"region-select"})]})))]})};export{p as LangSwitcher};