kui-complex 0.0.24 → 0.0.26

package/dist/index.js

@@ -168,7 +168,7 @@ var dropdownStyles = function (_a) {
     var isOpen = _a.isOpen;
     return react.css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"], ["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"])), isOpen ? "flex" : "none", kuiBasic.theme.palette.grey.zero, kuiBasic.theme.palette.grey.fifteenB);
 };
-var InputDropdown = function (_a) {
+var InputDropdown = React.forwardRef(function (_a, ref) {
     var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
     var dropdownRef = React.useRef(null);
     var closePopUp = function (e) {
@@ -188,20 +188,35 @@ var InputDropdown = function (_a) {
     if (!isOpen) {
         return null;
     }
-    return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
-};
+    var forwardedRef = function (elem) {
+        if (typeof ref === "function")
+            ref(elem);
+        else if (ref)
+            ref.current = elem;
+        dropdownRef.current = elem;
+    };
+    return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
+});
 var templateObject_1$p;
 
 var InputSelectDropdown = function (_a) {
     var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
+    var dropdownRef = React.useRef(null);
     React.useEffect(function () {
         var _a;
         if (isOpenDropdown) {
-            (_a = document
-                .querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            var element = document.querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"));
+            var coordinates = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+            if (coordinates && inputRef.current && element) {
+                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                    top: coordinates.top -
+                        inputRef.current.clientHeight -
+                        element.clientHeight,
+                });
+            }
         }
     }, [isOpenDropdown]);
-    return (jsxRuntime$1.jsx(InputDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
+    return (jsxRuntime$1.jsx(InputDropdown, __assign({ ref: dropdownRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
             maxHeight: "142px",
             padding: "4px",
         } }, { children: options.map(function (option, key) { return (jsxRuntime$1.jsx(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsxRuntime$1.jsx(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
@@ -242,7 +257,6 @@ var InputSelect = React.forwardRef(function (props, ref) {
     var inputRef = React.useRef(null);
     var selectedLabel = (_a = options === null || options === void 0 ? void 0 : options.find(function (option) { return String(option.value) === String(value); })) === null || _a === void 0 ? void 0 : _a.label;
     var register = form === null || form === void 0 ? void 0 : form.register(name);
-    console.log(value, selectedLabel, register, other);
     var handleOpenDropdown = function () {
         var _a, _b, _c, _d;
         if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
@@ -958,10 +972,11 @@ var StyledWrapper = styled__default["default"].div(templateObject_1$1 || (templa
 var templateObject_1$1;
 
 var ButtonSelect = React.forwardRef(function (props, ref) {
+    var _a;
     var options = props.options, otherProps = __rest(props, ["options"]);
-    return (jsxRuntime.jsx(StyledInputSelect, __assign({ value: options === null || options === void 0 ? void 0 : options[0].value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
+    return (jsxRuntime.jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
 });
-var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 40px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 40px;\n  }\n"])));
+var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n  }\n  & + div {\n    top: 48px;\n  }\n"])));
 var templateObject_1;
 
 exports.Avatar = Avatar;