@typeolymp/ui-components 1.5.3 → 1.5.4

package/build/components/molecules/LocaleSelect/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const Container: any;
-export declare const SelectedTranslationWrapper: any;
+export declare const SelectedLocaleWrapper: any;
 export declare const DropdownContainer: any;
 export declare const Locale: any;

package/build/index.es.js

@@ -1211,8 +1211,8 @@ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeT
     }
     return "";
 });
-var SelectedTranslationWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  width: calc(100% + 20px);\n  background-color: ", ";\n  border-radius: 6px 0 6px 6px;\n  overflow: hidden;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 100%;\n  right: 0;\n"], ["\n  width: calc(100% + 20px);\n  background-color: ", ";\n  border-radius: 6px 0 6px 6px;\n  overflow: hidden;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 100%;\n  right: 0;\n"])), function (_a) {
+var SelectedLocaleWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"])));
+var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"], ["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"])), function (_a) {
     var color = _a.color;
     switch (color) {
         default:
@@ -1222,17 +1222,17 @@ var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = _
             return theme.colors.lightGray.dark;
     }
 });
-var Locale = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
+var Locale = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
 var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
 
 var LocaleSelect = function (props) {
-    var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
+    var _a = useState(true), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
     var _b = useState(props.initialValue), locale = _b[0], setLocale = _b[1];
     var onSelectLocale = function (locale) {
         setLocale(locale);
         props.onChange(locale);
     };
-    return (jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedTranslationWrapper, { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0), jsx(Spacer, { horizontal: 10 }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
+    return (jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
                     .filter(function (l) { return l !== locale; })
                     .map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
 };