@typeolymp/ui-components 1.19.39 → 1.19.40

package/build/index.js

@@ -14957,22 +14957,31 @@ var Dropdown = function (_a) {
             ? setIsVisible(false)
             : null;
     }, [isVisible, dropwdownRef]);
+    var handleScroll = React$3.useCallback(function () { return setIsVisible(false); }, []);
     React$3.useEffect(function () {
         document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("scroll", handleScroll);
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("scroll", handleScroll);
         };
-    }, [handleClickOutside]);
+    }, [handleClickOutside, handleScroll]);
     var triggerDropdown = React$3.useCallback(function () {
         if (props.disabled)
             return;
         var el = document.getElementById(triggerId);
         if (el) {
-            var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
+            var _a = el.getBoundingClientRect(), bottom = _a.bottom, top_1 = _a.top, left = _a.left;
             var width = el.offsetWidth;
-            var position_1 = left + width > window.innerWidth / 2 ? "right" : "left";
-            var y = bottom + yOffset;
-            var x = position_1 === "left"
+            var xPosition = left + width > window.innerWidth / 2 ? "right" : "left";
+            var yPosition = window.innerHeight - (bottom + yOffset) <
+                dropwdownRef.current.offsetHeight
+                ? "top"
+                : "bottom";
+            var y = yPosition === "bottom"
+                ? bottom + yOffset
+                : top_1 - dropwdownRef.current.offsetHeight - yOffset - 4;
+            var x = xPosition === "left"
                 ? left
                 : left + width - dropwdownRef.current.offsetWidth;
             setPosition({ x: x, y: y });
@@ -17620,7 +17629,10 @@ var InputField = function (props) {
     return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
 };
 
-var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n  min-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  min-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n  min-width: 74px;\n  max-width: ", ";\n  min-height: 74px;\n  max-height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  min-width: 74px;\n  max-width: ", ";\n  min-height: 74px;\n  max-height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var char = _a.char;
+    return (char.length === 1 ? "74px" : "");
+}, function (_a) {
     var status = _a.status, color = _a.color;
     switch (status) {
         case "passed":