@typeolymp/ui-components 2.1.15 → 2.2.0

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

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { Locale } from "@typeolymp/utils/enums";
 export declare type PropsType = {
-    color?: "light" | "dark";
+    iconOnly?: boolean;
+    reverse?: boolean;
     locales: Locale[];
     defaultValue: Locale;
     onChange(locale: Locale): void;

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

@@ -1,4 +1,3 @@
 export declare const Container: any;
-export declare const SelectedLocaleWrapper: any;
-export declare const DropdownContainer: any;
-export declare const LocaleWrapper: any;
+export declare const LocalesList: any;
+export declare const LocalesListItem: any;

package/build/index.es.js

@@ -4225,13 +4225,13 @@ var StyledInput = styled.input(templateObject_3$f || (templateObject_3$f = __mak
     var disabled = _a.disabled;
     return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
 }, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var HelperContainer = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
+var HelperContainer = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
 var fadeIn = keyframes$1(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject$1(["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"], ["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"])), function (_a) {
     var isOk = _a.isOk;
     return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
 }, fadeIn);
-var templateObject_1$N, templateObject_2$B, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
+var templateObject_1$N, templateObject_2$B, templateObject_3$f, templateObject_4$6, templateObject_5$3, templateObject_6$3;
 
 var expressions = {};
 
@@ -14686,11 +14686,11 @@ htmlReactParser.Text;
 var Fieldset$1 = styled.fieldset(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"], ["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"])));
 var CheckboxContainer = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])));
-var Label$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"])), function (_a) {
+var Label$b = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"])), function (_a) {
     var weight = _a.weight;
     return weight || 500;
 }, theme.colors.darkGray.base, theme.colors.blue.base);
-var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$6;
+var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$5;
 
 var Checkboxes = function (props) {
     var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
@@ -17690,43 +17690,54 @@ __exportStar(getPricing$1, exports);
 
 }(mappers));
 
-var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"], ["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"])), function (_a) {
-    var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
-    if (dropdownIsVisible) {
-        switch (color) {
-            default:
-            case "light":
-                return theme.colors.lightGray.light;
-            case "dark":
-                return theme.colors.lightGray.dark;
-        }
-    }
-    return "";
-});
-var SelectedLocaleWrapper = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\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$a || (templateObject_3$a = __makeTemplateObject$1(["\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:
-        case "light":
-            return theme.colors.lightGray.light;
-        case "dark":
-            return theme.colors.lightGray.dark;
-    }
-});
-var LocaleWrapper = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\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$o, templateObject_2$m, templateObject_3$a, templateObject_4$5;
+var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  background-color: ", ";\n  border-radius: 6px;\n  border: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: ", ";\n\n  > button:first-child {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    padding: 10px 15px;\n\n    svg {\n      pointer-events: none;\n    }\n\n    > div:last-child {\n      transition: transform 0.3s ease;\n      transform: ", ";\n    }\n\n    :hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 6px;\n  border: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: ", ";\n\n  > button:first-child {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    padding: 10px 15px;\n\n    svg {\n      pointer-events: none;\n    }\n\n    > div:last-child {\n      transition: transform 0.3s ease;\n      transform: ", ";\n    }\n\n    :hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
+    var borderless = _a.borderless;
+    if (borderless)
+        return "transparent";
+    return theme.colors.lightGray.light;
+}, function (_a) {
+    var borderless = _a.borderless;
+    return borderless ? "" : "1px solid ".concat(theme.colors.lightGray.dark);
+}, function (_a) {
+    var borderless = _a.borderless;
+    return borderless ? "" : "0px 2px 0px rgb(0 0 0 / 10%)";
+}, function (_a) {
+    var reverse = _a.reverse;
+    return reverse ? "column-reverse" : "column";
+}, function (_a) {
+    var open = _a.open;
+    return (open ? "rotate(180deg)" : "");
+}, theme.colors.lightGray.base);
+var LocalesList = styled.ul(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  // background-color: ", ";\n  // border: 1px solid ", ";\n  // border-radius: 0 0 6px 6px;\n  // box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  // overflow: hidden;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  // background-color: ", ";\n  // border: 1px solid ", ";\n  // border-radius: 0 0 6px 6px;\n  // box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  // overflow: hidden;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
+var LocalesListItem = styled.li(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n  // min-width: max-content;\n\n  display: ", ";\n  align-items: center;\n  gap: 10px;\n\n  // background-color: ", ";\n\n  padding: 13px 15px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  // min-width: max-content;\n\n  display: ", ";\n  align-items: center;\n  gap: 10px;\n\n  // background-color: ", ";\n\n  padding: 13px 15px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var hidden = _a.hidden;
+    return (hidden ? "none" : "flex");
+}, theme.colors.lightGray.light, theme.colors.lightGray.base);
+var templateObject_1$o, templateObject_2$m, templateObject_3$a;
 
 var LocaleSelect = function (props) {
-    var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
-    var _b = useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
+    var containerRef = useRef(null);
+    var _a = useState(props.defaultValue), selectedLocale = _a[0], setSelectedLocale = _a[1];
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var handleClickOutside = useCallback(function (event) {
+        return open &&
+            containerRef.current &&
+            !containerRef.current.contains(event.target)
+            ? setOpen(false)
+            : null;
+    }, [open, containerRef]);
+    useEffect(function () {
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [handleClickOutside]);
     var onSelectLocale = function (locale) {
-        setLocale(locale);
+        setSelectedLocale(locale);
         props.onChange(locale);
+        setOpen(false);
     };
-    return (jsxs(Container$d, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Heading, __assign$2({ type: "h6" }, { children: mappers.getNativeLanguageByLocale(locale) }))] }), dropdownIsVisible ? (jsx$1(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx$1(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx$1(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
-                    .filter(function (l) { return l !== locale; })
-                    .map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: mappers.getNativeLanguageByLocale(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
+    return (jsxs(Container$d, __assign$2({ open: open, reverse: props.reverse, ref: containerRef }, { children: [jsxs("button", __assign$2({ "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": "locales", onClick: function () { return setOpen(!open); } }, { children: [jsx$1(Flag, { locale: selectedLocale }), !props.iconOnly && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: mappers.getNativeLanguageByLocale(selectedLocale) }))), jsx$1(Icon, { type: props.reverse ? "chevronUp" : "chevronDown", size: "small", color: "lightGray" })] })), jsx$1(LocalesList, __assign$2({ hidden: !open, "aria-label": "submenu", "aria-hidden": !open, role: "listbox", id: "locales" }, { children: props.locales.map(function (locale) { return (jsxs(LocalesListItem, __assign$2({ onClick: function () { return onSelectLocale(locale); }, "data-value": locale, "aria-selected": locale === selectedLocale, hidden: locale === selectedLocale, role: "option" }, { children: [jsx$1(Flag, { locale: locale }), !props.iconOnly && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: mappers.getNativeLanguageByLocale(locale) })))] }), locale)); }) }))] })));
 };
 
 var Wrapper$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"])));