@bothub-chat/ui 2.43.2-develop-e9066765-2b2d-43ee-b92a-30e8def75005 → 2.43.2-develop-72fd8a54-50c7-41cc-a4fc-1a75f041f09d

package/README.md

@@ -1,24 +1,24 @@
-<p align="center">
-  <img src="https://bothub.chat/icon-144x144.png" />
-</p>
-<h1 align="center">Bothub Chat</h1>
-<p align="center">UI Components from Bothub.</p>
-<p align="center">
-  <a href="https://bothub-docs.vercel.app/">Documentation</a>
-</p>
-
-<h2>Installing</h2>
-<p>Preliminary requirements:</p>
-<ul>
-    <li><a href="https://nodejs.org/">Node.js</a> >= <code>18.12.1</code></li>
-    <li><a href="https://www.npmjs.com/">npm</a> >= <code>9.1.2</code></li>
-    <li><a href="https://yarnpkg.com/">yarn</a> >= <code>1.22.19</code></li>
-</ul>
-<p>Installing peer dependencies:</p>
-<pre>yarn add framer-motion@10.16.3 react@18.2.0 react-dom@18.2.0 styled-components@6.0.7 react-helmet@6.1.0 normalize.css@8.0.1 react-slider@2.0.6 react-markdown@8.0.5 highlight.js@11.9.0 react-highlight@0.15.0</pre>
-<p>Installing package:</p>
-<pre>yarn add @bothub-chat/ui</pre>
-
-
-<h2>License</h2>
+<p align="center">
+  <img src="https://bothub.chat/icon-144x144.png" />
+</p>
+<h1 align="center">Bothub Chat</h1>
+<p align="center">UI Components from Bothub.</p>
+<p align="center">
+  <a href="https://bothub-docs.vercel.app/">Documentation</a>
+</p>
+
+<h2>Installing</h2>
+<p>Preliminary requirements:</p>
+<ul>
+    <li><a href="https://nodejs.org/">Node.js</a> >= <code>18.12.1</code></li>
+    <li><a href="https://www.npmjs.com/">npm</a> >= <code>9.1.2</code></li>
+    <li><a href="https://yarnpkg.com/">yarn</a> >= <code>1.22.19</code></li>
+</ul>
+<p>Installing peer dependencies:</p>
+<pre>yarn add framer-motion@10.16.3 react@18.2.0 react-dom@18.2.0 styled-components@6.0.7 react-helmet@6.1.0 normalize.css@8.0.1 react-slider@2.0.6 react-markdown@8.0.5 highlight.js@11.9.0 react-highlight@0.15.0</pre>
+<p>Installing package:</p>
+<pre>yarn add @bothub-chat/ui</pre>
+
+
+<h2>License</h2>
 <p><a href="https://github.com/matbea-dev/bothub/blob/main/LICENSE">MIT</a></p>

package/dist/components/index.d.ts

@@ -68,3 +68,4 @@ export * from './theme-schemes';
 export * from './theme-preview';
 export * from './color-picker';
 export * from './theme-switcher';
+export * from './lang-switcher';

package/dist/components/lang-switcher/index.d.ts

@@ -0,0 +1,18 @@
+import { SelectFieldDataItemComplex } from '../select-field';
+export type LangSwitcherProps = {
+    region: {
+        value: string;
+        label: string;
+    };
+    lang: {
+        value: string;
+        label: string;
+    };
+    dataRegions: SelectFieldDataItemComplex[];
+    dataLanguages: SelectFieldDataItemComplex[];
+    onChange: ({ lang, region }: {
+        lang: string;
+        region: string;
+    }) => void;
+};
+export declare const LangSwitcher: React.FC<LangSwitcherProps>;

package/dist/components/lang-switcher/index.js

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