kui-complex 0.0.61 → 0.0.64

package/InputWithDatePicker/index.js

@@ -1,15 +1,14 @@
-import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from '@emotion/react/jsx-runtime';
+import { jsxs as jsxs$1, jsx as jsx$1, Fragment } from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 import _ from 'lodash';
-import { InputWithMask, Grid, theme, Caption, InputWithAdornments, Divider, Button, Modal } from 'kui-basic';
+import { InputWithMask, Grid, theme, InputWithAdornments, Caption, Divider, Button, Modal } from 'kui-basic';
 import { useController } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CalendarIcon, HalfArrowIcon, CheckIcon } from 'kui-icon';
-import { css } from '@emotion/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -67,8 +66,8 @@ var InputForDatepicker = forwardRef(function (props, ref) {
     var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
     return (jsx(InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
 });
-var IconWrapper = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"])));
-var templateObject_1$7;
+var IconWrapper = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"])));
+var templateObject_1$8;
 
 var useToggle = function (isModalOpen) {
     if (isModalOpen === void 0) { isModalOpen = false; }
@@ -103,14 +102,11 @@ var InputDropdown = forwardRef(function (props, ref) {
         };
     });
     useEffect(function () {
-        var _a, _b;
+        var _a;
         if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
-            var inputMessage = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".KUI-InputMessage");
             if (isOpen) {
                 buttonRef.current.style.zIndex = "4";
-                if (inputMessage)
-                    inputMessage.style.opacity = "0";
-                var scrollContainer = (_b = dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children[0].children[0];
+                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);
@@ -118,8 +114,6 @@ var InputDropdown = forwardRef(function (props, ref) {
             }
             else {
                 buttonRef.current.style.zIndex = "1";
-                if (inputMessage)
-                    inputMessage.style.opacity = "1";
             }
         }
     }, [isOpen]);
@@ -135,7 +129,7 @@ var InputDropdown = forwardRef(function (props, ref) {
     };
     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] })));
 });
-var StyledDropdown$1 = styled(Grid)(templateObject_1$6 || (templateObject_1$6 = __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 StyledDropdown$1 = styled(Grid)(templateObject_1$7 || (templateObject_1$7 = __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);
@@ -143,120 +137,92 @@ var StyledWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __mak
     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_3$2 || (templateObject_3$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$6, templateObject_2$4, templateObject_3$3;
+var templateObject_1$7, templateObject_2$4, templateObject_3$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;
-    var dropdownRef = useRef(null);
-    useEffect(function () {
-        var _a;
-        if (isOpenDropdown) {
-            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,
-                });
-            }
+    var 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);
         }
-    }, [isOpenDropdown]);
-    var forwardedRef = function (elem) {
-        if (ref) {
-            if (typeof ref === "function")
-                ref(elem);
-            else
-                ref.current = elem;
-        }
-        dropdownRef.current = elem;
     };
-    return (jsx$1(StyledDropdown, __assign({ ref: forwardedRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
+    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)); }) })));
 });
-var OptionWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"])));
-var StyledOption = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"])), theme.palette.background.light1);
-var selectedStyles = css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), theme.palette.background.light1);
-var StyledDropdown = styled(InputDropdown)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"], ["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"])));
-var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1;
-
-var getFormValue = function (name, form) {
-    var names = name === null || name === void 0 ? void 0 : name.split(".");
-    var fieldValue = form === null || form === void 0 ? void 0 : form.control._formValues;
-    names === null || names === void 0 ? void 0 : names.forEach(function (field) {
-        if (fieldValue) {
-            fieldValue = fieldValue[field];
-        }
-    });
-    return fieldValue;
-};
-var getFormError = function (name, form) {
-    var names = name === null || name === void 0 ? void 0 : name.split(".");
-    var fieldError = form === null || form === void 0 ? void 0 : form.formState.errors;
-    names === null || names === void 0 ? void 0 : names.forEach(function (field) {
-        if (fieldError) {
-            // @ts-ignore
-            fieldError = fieldError[field];
-        }
-    });
-    return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
-};
+var OptionWrapper = styled.div(templateObject_1$6 || (templateObject_1$6 = __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;
+    return (disabled ? "auto" : "pointer");
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
+});
+var StyledDropdown = styled(InputDropdown)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"], ["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"])));
+var templateObject_1$6, templateObject_2$3;
 
-var InputSelect = forwardRef(function (props, ref) {
-    var _a, _b;
-    var options = props.options, name = props.name, handleChange = props.handleChange, form = props.form, iconProps = props.iconProps, defaultValue = props.value, other = __rest(props, ["options", "name", "handleChange", "form", "iconProps", "value"]);
-    var _c = useState(false), isOpenDropdown = _c[0], setIsOpenDropDown = _c[1];
-    var _d = useState(defaultValue || getFormValue(name, form)), value = _d[0], setValue = _d[1];
-    var error = getFormError(name, form);
+function InputSelectBase(_a) {
+    var _b;
+    var options = _a.options, name = _a.name, disabled = _a.disabled, handleChange = _a.handleChange, iconProps = _a.iconProps, renderOption = _a.renderOption, selectedLabel = _a.selectedLabel, selectedValue = _a.selectedValue, error = _a.error, inputProps = __rest(_a, ["options", "name", "disabled", "handleChange", "iconProps", "renderOption", "selectedLabel", "selectedValue", "error"]);
+    var _c = useState(false), isDropdownOpen = _c[0], setIsDropdownOpen = _c[1];
     var inputRef = 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);
     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) {
             (_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement.focus();
         }
-        setIsOpenDropDown(function (prev) { return !prev; });
+        setIsDropdownOpen(function (prev) { return !prev; });
     };
     var handleCloseDropdown = function () {
-        setIsOpenDropDown(false);
+        setIsDropdownOpen(false);
     };
     var handleSelect = function (option) {
-        setValue(option.value);
-        if (handleChange) {
-            handleChange(option.value);
-        }
-        if (form) {
-            register === null || register === void 0 ? void 0 : register.onChange({
-                target: { value: option.value, name: name },
-                type: "change",
-            });
-        }
+        if (handleChange)
+            handleChange(option);
         handleCloseDropdown();
     };
-    var forwardedRef = function (e) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = e;
-        }
-        // @ts-ignore
-        inputRef.current = e;
-        register === null || register === void 0 ? void 0 : register.ref(e);
-    };
-    return (jsxs$1(Wrapper$1, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
+    return (jsxs$1(Wrapper$1, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, 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" },
-                        isOpenDropdown && { transform: "rotate(180deg)" },
-                    ] }, iconProps))) }, register, { ref: forwardedRef })), options && options.length > 0 && !props.disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
+                        isDropdownOpen && { transform: "rotate(180deg)" },
+                    ] }, iconProps))) })), 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: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
+                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
+}
+var Wrapper$1 = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
+var StyledInput = styled(InputWithAdornments)(templateObject_2$2 || (templateObject_2$2 = __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 Wrapper$1 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"], ["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"])));
-var StyledInput = styled(InputWithAdornments)(templateObject_2$2 || (templateObject_2$2 = __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$4, templateObject_2$2;
+var templateObject_1$5, templateObject_2$2;
+
+function InputSelectOption(props) {
+    var option = props.option, selectedValue = props.selectedValue;
+    return (jsx(StyledOption, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
+}
+var StyledOption = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
+}, theme.palette.background.light1);
+var templateObject_1$4;
+
+function InputSelect(_a) {
+    var _b;
+    var options = _a.options, name = _a.name, handleChange = _a.handleChange; _a.form; var valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
+    var _c = useState(valueProp), value = _c[0], setValue = _c[1];
+    var selectedLabel = (_b = options.find(function (option) { return String(option.value) === String(value); })) === null || _b === void 0 ? void 0 : _b.label;
+    var handleSelect = function (option) {
+        setValue(option.value);
+        if (handleChange) {
+            handleChange(option.value);
+        }
+    };
+    useEffect(function () {
+        if (typeof valueProp !== "undefined")
+            setValue(valueProp);
+    }, [valueProp]);
+    return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, selectedLabel: selectedLabel, selectedValue: value, name: name, renderOption: function (option, selectedValue) { return (jsx(InputSelectOption, { option: option, selectedValue: selectedValue })); } }, inputProps)));
+}
 
 var checkDisabled$1 = function (year, min, max) {
     return (min && year <= min) || (max && year >= max);