venice-ui 2.1.2 → 2.1.5

package/dist/cjs/Theme/Theme.js

@@ -100,6 +100,7 @@ exports.mainTheme = {
     contentBackground: exports.Theme.colors.white,
     // selector / dropdown
     optionActiveColor: exports.Theme.colors.primary,
+    optionColor: exports.Theme.colors.text,
     optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     //table
     tableBorderColor: exports.Theme.colors.gray_3,

package/dist/cjs/components/Button/Button.styles.js

@@ -75,6 +75,9 @@ exports.ButtonElement = styled_components_1.default.button `
   &:disabled {
     cursor: not-allowed;
   }
+  &:focus {
+    outline: none;
+  }
 `;
 exports.ButtonLoader = styled_components_1.default.div `
   display: flex;

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -73,9 +73,18 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
                 toogleOpen(false);
             }
         };
-        document.addEventListener('click', handleClickOutside, true);
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+        }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [open]);
     return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
@@ -87,6 +96,6 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             open &&
                 (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
-            (error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
+            error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };
 exports.Dropdown = Dropdown;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -32,7 +32,7 @@ const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
 const Aligment_1 = require("../Aligment");
 const Typography_1 = require("../Typography");
 const react_dom_1 = require("react-dom");
-const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', }) => {
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -89,19 +89,28 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         const mouseleave = (e) => {
             close();
         };
-        document.addEventListener('click', handleClickOutside, true);
-        if (panel) {
-            panel.addEventListener('mouseleave', mouseleave);
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+            if (panel) {
+                panel.addEventListener('mouseleave', mouseleave);
+            }
         }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
             if (panel) {
                 panel.removeEventListener('mouseleave', mouseleave);
             }
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size }, label)) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
+        react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
         open &&
             (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
                 react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
@@ -109,7 +118,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
                         headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
                         headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
                     react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
-                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID) }, option.label)))),
+                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
                     footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
 };
 exports.DropdownMenu = DropdownMenu;

package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js

@@ -37,7 +37,11 @@ exports.DropdownMenuOption = styled_components_1.default.div `
   min-width: 80px;
   cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${(p) => (p.isDisable ? Theme_1.Theme.colors.gray_1 : Theme_1.Theme.colors.text)};
+  color: ${(p) => p.isActive
+    ? Theme_1.Theme.colors.primary
+    : p.isDisable
+        ? Theme_1.Theme.colors.gray_1
+        : Theme_1.Theme.colors.text};
   font-size: 16px;
   :hover {
     background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
@@ -45,6 +49,6 @@ exports.DropdownMenuOption = styled_components_1.default.div `
 `;
 exports.DropdownMenuLabel = styled_components_1.default.div `
   display: flex;
-  ${(p) => (0, common_1.setSize)(p.size)}
-  color:${p => p.theme.optionActiveColor};
+  ${(p) => (0, common_1.setSize)(p.size)};
+  color:${(p) => p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor};
 `;

package/dist/cjs/components/Filters/Filters.js

@@ -179,7 +179,7 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
         react_1.default.createElement(Filters_styles_1.FilterIconArea, null,
             react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, iconColor: setIconColor() }),
             isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
-        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll },
+        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: 'flex-end' },
                 react_1.default.createElement(Filters_styles_1.FiltersArea, null, filters.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, null,
                     react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap" },

package/dist/cjs/components/Input/Input.js

@@ -30,17 +30,23 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
+const lodash_1 = require("lodash");
 const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
+    const [inputValue, setInputValue] = (0, react_1.useState)(value);
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
             : parseFloat(numberValue);
     };
+    const debouncedHandleChange = (0, react_1.useCallback)((0, lodash_1.debounce)((name, value) => {
+        handleChange(name, value);
+    }, 300), [handleChange]);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
-        handleChange(name, returnedValue);
+        setInputValue(returnedValue);
+        debouncedHandleChange(name, setInputValue);
     };
     const onBlurValidation = () => {
         if (type === 'number' || type === 'increase') {
@@ -86,19 +92,18 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
         }
         handleChange(name, newValue);
     };
-    // ${Theme.fontSize.m}/
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
                 react_1.default.createElement(react_1.default.Fragment, null, readOnly ? (react_1.default.createElement(Input_styles_1.InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
                     prefix && react_1.default.createElement(Input_styles_1.Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
                         react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
-                        react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                        react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
-                    (error && errorMsg) && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, errorMsg))))))));
+                        react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(inputValue), iconColor: theme.inputDefaultTextColor }),
+                        react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(inputValue), iconColor: theme.inputDefaultTextColor }))),
+                    error && errorMsg && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, errorMsg))))))));
 };
 exports.Input = Input;

package/dist/cjs/components/Modal/Modal.js

@@ -1,17 +1,50 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const ElementHeader_1 = require("../ElementHeader");
 const Theme_1 = require("../../Theme/Theme");
 const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false }) => {
+const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false }) => {
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        if (isOpen && exitOnEsc) {
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
             react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },

package/dist/cjs/components/Selector/Selector.js

@@ -50,7 +50,7 @@ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', siz
                 value ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
                     react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size) }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: (0, common_1.setIconSize)(size) })),
-                open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
+                open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
                 error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
 };
 exports.Selector = Selector;

package/dist/cjs/components/Sidepanel/Sidepanel.js

@@ -38,9 +38,16 @@ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = t
                 handleClose && handleClose();
             }
         };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                handleClose && handleClose();
+            }
+        };
         document.addEventListener('click', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown);
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
     const modalRoot = document.getElementById('root');

package/dist/esm/Theme/Theme.js

@@ -97,6 +97,7 @@ export const mainTheme = {
     contentBackground: Theme.colors.white,
     // selector / dropdown
     optionActiveColor: Theme.colors.primary,
+    optionColor: Theme.colors.text,
     optionHoverBackground: lighten(0.3, Theme.colors.primary),
     //table
     tableBorderColor: Theme.colors.gray_3,

package/dist/esm/components/Button/Button.styles.js

@@ -69,6 +69,9 @@ export const ButtonElement = styled.button `
   &:disabled {
     cursor: not-allowed;
   }
+  &:focus {
+    outline: none;
+  }
 `;
 export const ButtonLoader = styled.div `
   display: flex;

package/dist/esm/components/Dropdown/Dropdown.js

@@ -47,9 +47,18 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
                 toogleOpen(false);
             }
         };
-        document.addEventListener('click', handleClickOutside, true);
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+        }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [open]);
     return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
@@ -61,5 +70,5 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             open &&
                 createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
-            (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg)))));
+            error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -6,7 +6,7 @@ import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownM
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
 import { createPortal } from 'react-dom';
-export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', }) => {
+export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -63,19 +63,28 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         const mouseleave = (e) => {
             close();
         };
-        document.addEventListener('click', handleClickOutside, true);
-        if (panel) {
-            panel.addEventListener('mouseleave', mouseleave);
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+            if (panel) {
+                panel.addEventListener('mouseleave', mouseleave);
+            }
         }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
             if (panel) {
                 panel.removeEventListener('mouseleave', mouseleave);
             }
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
-        React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
+        React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
         open &&
             createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
                 React.createElement(Aligment, { direction: "column" },
@@ -83,6 +92,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
                         headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
                         headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
                     React.createElement(DropdownMenuContent, null, options &&
-                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID) }, option.label)))),
+                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
                     footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js

@@ -31,7 +31,11 @@ export const DropdownMenuOption = styled.div `
   min-width: 80px;
   cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${(p) => (p.isDisable ? Theme.colors.gray_1 : Theme.colors.text)};
+  color: ${(p) => p.isActive
+    ? Theme.colors.primary
+    : p.isDisable
+        ? Theme.colors.gray_1
+        : Theme.colors.text};
   font-size: 16px;
   :hover {
     background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
@@ -39,6 +43,6 @@ export const DropdownMenuOption = styled.div `
 `;
 export const DropdownMenuLabel = styled.div `
   display: flex;
-  ${(p) => setSize(p.size)}
-  color:${p => p.theme.optionActiveColor};
+  ${(p) => setSize(p.size)};
+  color:${(p) => p.isActive ? Theme.colors.primary : p.theme.optionColor};
 `;

package/dist/esm/components/Filters/Filters.js

@@ -153,7 +153,7 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
         React.createElement(FilterIconArea, null,
             React.createElement(Icon, { name: "filters", onClick: toogleFilter, iconColor: setIconColor() }),
             isAnyFilterActive() && (React.createElement(Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
-        openFilters && (React.createElement(Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll },
+        openFilters && (React.createElement(Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
             React.createElement(Aligment, { direction: "column", align: 'flex-end' },
                 React.createElement(FiltersArea, null, filters.map((filter) => (React.createElement(FilterSection, null,
                     React.createElement(Aligment, { wrap: "nowrap" },

package/dist/esm/components/Input/Input.js

@@ -1,20 +1,26 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
+import { debounce } from 'lodash';
 export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
+    const [inputValue, setInputValue] = useState(value);
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
             : parseFloat(numberValue);
     };
+    const debouncedHandleChange = useCallback(debounce((name, value) => {
+        handleChange(name, value);
+    }, 300), [handleChange]);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
-        handleChange(name, returnedValue);
+        setInputValue(returnedValue);
+        debouncedHandleChange(name, setInputValue);
     };
     const onBlurValidation = () => {
         if (type === 'number' || type === 'increase') {
@@ -60,18 +66,17 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
         }
         handleChange(name, newValue);
     };
-    // ${Theme.fontSize.m}/
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
                 React.createElement(React.Fragment, null, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (React.createElement(React.Fragment, null,
-                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
                     prefix && React.createElement(Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
                         React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (React.createElement(IconsWrapper, null,
-                        React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                        React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
-                    (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))))))));
+                        React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(inputValue), iconColor: theme.inputDefaultTextColor }),
+                        React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(inputValue), iconColor: theme.inputDefaultTextColor }))),
+                    error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg))))))));
 };

package/dist/esm/components/Modal/Modal.js

@@ -1,11 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ElementHeader } from '../ElementHeader';
 import { mainTheme } from '../../Theme/Theme';
 import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 import { ThemeProvider } from 'styled-components';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false }) => {
+export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false }) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        if (isOpen && exitOnEsc) {
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
             React.createElement(ModalElement, { size: size },

package/dist/esm/components/Selector/Selector.js

@@ -24,6 +24,6 @@ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size
                 value ? (React.createElement(React.Fragment, null,
                     React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
                     React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size) }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: setIconSize(size) })),
-                open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
+                open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
                 error && React.createElement(InputErrorMsg, null, error)))));
 };

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -12,9 +12,16 @@ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overla
                 handleClose && handleClose();
             }
         };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                handleClose && handleClose();
+            }
+        };
         document.addEventListener('click', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown);
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
     const modalRoot = document.getElementById('root');

package/dist/types/Theme/Theme.d.ts

@@ -90,6 +90,7 @@ export declare const mainTheme: {
     inputErrorTextColor: string;
     contentBackground: string;
     optionActiveColor: string;
+    optionColor: string;
     optionHoverBackground: string;
     tableBorderColor: string;
     tableHeaderBackground: string;

package/dist/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -21,6 +21,7 @@ interface IDropdownMenuProps {
     zIndex?: number;
     textMode?: boolean;
     label?: string;
+    isTextActive?: boolean;
 }
 export declare const DropdownMenu: FC<IDropdownMenuProps>;
 export {};

package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts

@@ -6,11 +6,13 @@ export declare const DropdownMenuContent: import("styled-components").StyledComp
 interface IPanelOptionStyle {
     onClick?: any;
     isDisable: boolean;
+    isActive?: boolean;
 }
 export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
 interface IDropdownMenuLabel {
     size: InputSize;
     theme: any;
+    isActive?: boolean;
 }
 export declare const DropdownMenuLabel: import("styled-components").StyledComponent<"div", any, IDropdownMenuLabel, never>;
 export {};

package/dist/types/components/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 export interface IModalProps {
+    isOpen: boolean;
     theme?: any;
     children: React.ReactNode;
     title?: string;
@@ -16,5 +17,6 @@ export interface IModalProps {
     additionalValue?: boolean;
     headerDivader?: boolean;
     additionaNormalMode?: boolean;
+    exitOnEsc?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

package/dist/types/types/commonTypes.d.ts

@@ -6,6 +6,7 @@ export interface IAction {
     action: (id?: string) => void;
     label: string | number;
     disableID?: string;
+    isActive?: boolean;
 }
 export interface IIconsActions {
     iconName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.2",
+  "version": "2.1.5",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",
@@ -80,6 +80,7 @@
     "date-fns": "^2.30.0",
     "ftp-deploy": "^2.4.4",
     "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "polished": "^4.2.2",
     "react-docgen-typescript-plugin": "^1.0.5",
     "styled-components": "^5.3.10"