kui-complex 0.0.112 → 0.0.114

package/TestForm/index.js

@@ -3,7 +3,7 @@ import { Controller, useController, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import { InputWithAdornments, Grid, theme, Caption, InputWithMask as InputWithMask$1, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress } from 'kui-basic';
+import { InputWithAdornments, Tooltip, Grid, theme, Caption, InputWithMask as InputWithMask$1, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress } from 'kui-basic';
 import { jsxs as jsxs$1, jsx as jsx$1, Fragment } from '@emotion/react/jsx-runtime';
 import styled from '@emotion/styled';
 import { HalfArrowIcon, CalendarIcon, CheckIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon } from 'kui-icon';
@@ -81,23 +81,14 @@ 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, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
+    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, input = props.input, className = props.className, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent", "input", "className"]);
     var _a = useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
     var dropdownRef = useRef(null);
-    var closePopUp = function (e) {
-        if (dropdownRef.current && buttonRef && buttonRef.current) {
-            if (!dropdownRef.current.contains(e.target) &&
-                !buttonRef.current.contains(e.target)) {
-                handleClose();
-            }
+    var handleChange = function (open) {
+        if (!open) {
+            handleClose();
         }
     };
-    useEffect(function () {
-        document.addEventListener("click", closePopUp);
-        return function () {
-            document.removeEventListener("click", closePopUp);
-        };
-    });
     useEffect(function () {
         var _a;
         if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
@@ -114,9 +105,6 @@ var InputDropdown = forwardRef(function (props, ref) {
             }
         }
     }, [isOpen]);
-    if (!isOpen) {
-        return null;
-    }
     var forwardedRef = function (elem) {
         if (typeof ref === "function")
             ref(elem);
@@ -124,30 +112,28 @@ var InputDropdown = forwardRef(function (props, ref) {
             ref.current = elem;
         dropdownRef.current = elem;
     };
-    return (jsxs(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
+    return (jsx(StyledTooltip, __assign({ fullWidth: true, open: isOpen, onChange: handleChange, toggleMethod: "controlled", strategy: "fixed", placement: "bottom", className: className, 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 })));
 });
-var StyledDropdown$1 = styled(Grid)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? "flex" : "none");
-}, theme.palette.grey.zero);
-var StyledWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __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 StyledTooltip = styled(Tooltip)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\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  .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;
     return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
 });
-var ScrollingContainer = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"])), function (_a) {
+var ScrollingContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"])), function (_a) {
     var isScrollable = _a.isScrollable;
     return (isScrollable ? "4px" : "0px");
 }, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
-var templateObject_1$e, templateObject_2$7, templateObject_3$3;
+var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$2;
 
 var InputSelectDropdown = forwardRef(function (_a, ref) {
-    var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
+    var input = _a.input, options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
     var handleClick = function (option) {
         if (!option.disabled) {
             handleSelect(option);
         }
     };
-    return (jsx(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
+    return (jsx(StyledDropdown, __assign({ input: input, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
 });
 var OptionWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
@@ -180,12 +166,12 @@ var InputSelectBase = forwardRef(function (_a, ref) {
             handleChange(option);
         handleCloseDropdown();
     };
-    return (jsxs$1(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), 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: [
-                        { transition: "all linear .2s" },
-                        isDropdownOpen && { transform: "rotate(180deg)" },
-                    ] }, iconProps))) })), options.length > 0 && !disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
+    return (jsxs$1(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), options.length > 0 && !disabled && (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 }))] }));
+                }, 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: [
+                            { 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) {