kui-complex 0.0.138 → 0.0.140

package/TestForm/index.js

@@ -81,7 +81,7 @@ var InputWithController = forwardRef(function (_a, ref) {
 });
 
 var InputDropdown = forwardRef(function (props, ref) {
-    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, input = props.input, className = props.className, strategy = props.strategy, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent", "input", "className", "strategy"]);
+    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, input = props.input, className = props.className, strategy = props.strategy, onScroll = props.onScroll, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent", "input", "className", "strategy", "onScroll"]);
     var _a = useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
     var dropdownRef = useRef(null);
     var handleChange = function (open) {
@@ -91,17 +91,11 @@ var InputDropdown = forwardRef(function (props, ref) {
     };
     useEffect(function () {
         var _a;
-        if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
-            if (isOpen) {
-                buttonRef.current.style.zIndex = "4";
-                var scrollContainer = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0];
-                if (scrollContainer) {
-                    var hasScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
-                    setIsScrollable(hasScroll);
-                }
-            }
-            else {
-                buttonRef.current.style.zIndex = "1";
+        if ((buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && isOpen) {
+            var scrollContainer = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0];
+            if (scrollContainer) {
+                var hasScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
+                setIsScrollable(hasScroll);
             }
         }
     }, [isOpen]);
@@ -112,9 +106,9 @@ var InputDropdown = forwardRef(function (props, ref) {
             ref.current = elem;
         dropdownRef.current = elem;
     };
-    return (jsx(StyledTooltip, __assign({ fullWidth: true, withoutMobile: true, open: isOpen, onChange: handleChange, toggleMethod: "controlled", strategy: strategy || "fixed", placement: "bottom", className: className, withShift: false, content: jsxs(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef }, otherProps, { children: [jsx(StyledWrapper, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })) }, { children: input })));
+    return (jsx(StyledTooltip, __assign({ fullWidth: true, withoutMobile: true, open: isOpen, onChange: handleChange, toggleMethod: "controlled", strategy: strategy || "fixed", placement: "bottom", className: className, withShift: false, content: jsxs(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef }, otherProps, { children: [jsx(StyledWrapper, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ onScroll: onScroll, isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })) }, { children: input })));
 });
-var StyledTooltip = styled(Tooltip)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 100%;\n  > div {\n    width: 100%;\n    > div {\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n  }\n"], ["\n  width: 100%;\n  > div {\n    width: 100%;\n    > div {\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n  }\n"])));
+var StyledTooltip = styled(Tooltip)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 100%;\n  > div {\n    z-index: unset;\n    width: 100%;\n    > div {\n      z-index: unset;\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n  }\n"], ["\n  width: 100%;\n  > div {\n    z-index: unset;\n    width: 100%;\n    > div {\n      z-index: unset;\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n  }\n"])));
 var StyledDropdown$1 = styled(Grid)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  user-select: none;\n"], ["\n  width: 100%;\n  user-select: none;\n"])));
 var StyledWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"])), function (_a) {
     var isScrollable = _a.isScrollable;
@@ -169,16 +163,13 @@ var InputSelectBase = forwardRef(function (_a, ref) {
     };
     return (jsxs$1(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(InputSelectDropdown, { options: options, inputRef: {
                     current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
-                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption, input: jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: forwardedRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
+                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption, input: jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: forwardedRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
                             { transition: "all linear .2s" },
                             isDropdownOpen && { transform: "rotate(180deg)" },
                         ] }, iconProps))) })) })] }));
 });
 var Wrapper$4 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
-var StyledInput = styled(InputWithAdornments)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"])), function (_a) {
-    var isDropdownOpen = _a.isDropdownOpen;
-    return (isDropdownOpen ? 0 : 1);
-});
+var StyledInput = styled(InputWithAdornments)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"])));
 var templateObject_1$c, templateObject_2$5;
 
 function InputSelectOption(props) {