venice-ui 2.4.8 → 2.4.10

package/dist/cjs/components/DatePicker/Calendar.js

@@ -65,6 +65,7 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
         };
     });
     const [selectedDate, setSellectedDate] = (0, react_1.useState)(() => (value !== undefined ? new Date(value) : new Date()));
+    const wrapperRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         updateCalendarSettings((prev) => ({
             ...prev,
@@ -103,8 +104,27 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
     const setToday = () => {
         setSellectedDate(new Date());
     };
+    (0, react_1.useEffect)(() => {
+        const handleOutside = (e) => {
+            const el = wrapperRef.current;
+            const target = e.target;
+            if (!el)
+                return;
+            const path = e.composedPath ? e.composedPath() : undefined;
+            const clickedOutside = path ? !path.includes(el) : !el.contains(target);
+            if (clickedOutside && !isAdvance) {
+                handleClose && handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleOutside);
+        document.addEventListener('touchstart', handleOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleOutside);
+            document.removeEventListener('touchstart', handleOutside);
+        };
+    }, [isAdvance, handleClose]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
+        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
                 react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
                 react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),

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

@@ -33,7 +33,7 @@ const common_1 = require("../common");
 const react_dom_1 = require("react-dom");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, maxHeight, readOnly = false, theme = Theme_1.mainTheme, handleFieldFocus, handleFieldBlur, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -60,6 +60,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
                 setDropdownStyles(positionStyle);
             }
             toogleOpen(!open);
+            handleFieldFocus && handleFieldFocus(name);
         }
     };
     const selectOption = (e, selectedValue, isDisabled) => {
@@ -67,17 +68,20 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         if (!isDisabled) {
             handleSelect(name, selectedValue);
             toogleOpen(false);
+            handleFieldBlur && handleFieldBlur();
         }
     };
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 toogleOpen(false);
+                handleFieldBlur && handleFieldBlur();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
                 close();
+                handleFieldBlur && handleFieldBlur();
             }
         };
         if (open) {
@@ -96,7 +100,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
                 react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
-                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, 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.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };

package/dist/cjs/components/Form/Form.js

@@ -11,7 +11,7 @@ const FormElements_1 = require("./FormElements");
 const Dropdown_1 = require("../Dropdown");
 const DatePicker_1 = require("../DatePicker");
 const FillSelect_1 = require("../FillSelect");
-const Form = ({ formData, size = 'medium', read }) => {
+const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBlur, }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
     };
@@ -44,13 +44,13 @@ const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'number':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'increase':
-                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'select':
-                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
+                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'fill':
                 return (react_1.default.createElement(FillSelect_1.FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':

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

@@ -30,7 +30,7 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-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 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, handleFieldFocus, handleFieldBlur, }) => {
     const [inputValue, setInputValue] = (0, react_1.useState)(value);
     (0, react_1.useEffect)(() => {
         setInputValue(value);
@@ -61,9 +61,13 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
                     validateValue = max;
                 }
             }
+            handleFieldBlur && handleFieldBlur();
             handleChange(name, validateValue);
         }
     };
+    const onFocus = () => {
+        handleFieldFocus && handleFieldFocus(name);
+    };
     const onKeyDown = async (e) => {
         if (handleSubmit && e.key === 'Enter') {
             const currentValue = type === 'number' || type === 'increase'
@@ -100,7 +104,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             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: inputValue, 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, onFocus: onFocus, 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" }))),

package/dist/cjs/components/List/List.js

@@ -101,7 +101,7 @@ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false,
         const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
-                isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
+                isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
                         e.stopPropagation();
                     } },
                     row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),

package/dist/cjs/components/Table/Table.js

@@ -123,6 +123,12 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
         setCurrentPage(1);
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
+    const tableElements = (0, react_1.useMemo)(() => {
+        if (ifPagination) {
+            return paginatedElements;
+        }
+        return tableProps.elements;
+    }, [ifPagination, paginatedElements, tableProps.elements]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         filtrable && (react_1.default.createElement("div", { style: {
                 display: 'flex',
@@ -141,7 +147,7 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
                 react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            react_1.default.createElement("tbody", null, paginatedElements.map((item) => {
+            react_1.default.createElement("tbody", null, tableElements.map((item) => {
                 return (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
                     return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
                 })));

package/dist/cjs/components/common/commonComponents.js

@@ -31,6 +31,12 @@ exports.Panel = styled_components_1.default.div `
   border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
+  ${(p) => p.maxHeight &&
+    `
+  max-height: ${p.maxHeight};
+  overflow: auto;
+  
+  `}
 `;
 exports.PanelOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};

package/dist/esm/components/DatePicker/Calendar.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { CalendarOverlay, CalendarWrapper } from './DatePiocker.styles';
 import { Aligment } from '../Aligment';
 import { CalendarHeader } from './CalendarHeader';
@@ -39,6 +39,7 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
         };
     });
     const [selectedDate, setSellectedDate] = useState(() => (value !== undefined ? new Date(value) : new Date()));
+    const wrapperRef = useRef(null);
     useEffect(() => {
         updateCalendarSettings((prev) => ({
             ...prev,
@@ -77,8 +78,27 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
     const setToday = () => {
         setSellectedDate(new Date());
     };
+    useEffect(() => {
+        const handleOutside = (e) => {
+            const el = wrapperRef.current;
+            const target = e.target;
+            if (!el)
+                return;
+            const path = e.composedPath ? e.composedPath() : undefined;
+            const clickedOutside = path ? !path.includes(el) : !el.contains(target);
+            if (clickedOutside && !isAdvance) {
+                handleClose && handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleOutside);
+        document.addEventListener('touchstart', handleOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleOutside);
+            document.removeEventListener('touchstart', handleOutside);
+        };
+    }, [isAdvance, handleClose]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
+        React.createElement(CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
             React.createElement(Aligment, { direction: "row" },
                 React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
                 React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),

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

@@ -7,7 +7,7 @@ import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, maxHeight, readOnly = false, theme = mainTheme, handleFieldFocus, handleFieldBlur, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -34,6 +34,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
                 setDropdownStyles(positionStyle);
             }
             toogleOpen(!open);
+            handleFieldFocus && handleFieldFocus(name);
         }
     };
     const selectOption = (e, selectedValue, isDisabled) => {
@@ -41,17 +42,20 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         if (!isDisabled) {
             handleSelect(name, selectedValue);
             toogleOpen(false);
+            handleFieldBlur && handleFieldBlur();
         }
     };
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 toogleOpen(false);
+                handleFieldBlur && handleFieldBlur();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
                 close();
+                handleFieldBlur && handleFieldBlur();
             }
         };
         if (open) {
@@ -70,7 +74,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             React.createElement(EyeIconWrapper, { size: size },
                 React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
-                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

package/dist/esm/components/Form/Form.js

@@ -5,7 +5,7 @@ import { FormRow, FormSubRow, FormWrapper } from './FormElements';
 import { Dropdown } from '../Dropdown';
 import { DatePicker } from '../DatePicker';
 import { FillSelect } from '../FillSelect';
-export const Form = ({ formData, size = 'medium', read }) => {
+export const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBlur, }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
     };
@@ -38,13 +38,13 @@ export const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'number':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'increase':
-                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
+                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'select':
-                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
+                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'fill':
                 return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':

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

@@ -4,7 +4,7 @@ import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-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, }) => {
+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, handleFieldFocus, handleFieldBlur, }) => {
     const [inputValue, setInputValue] = useState(value);
     useEffect(() => {
         setInputValue(value);
@@ -35,9 +35,13 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
                     validateValue = max;
                 }
             }
+            handleFieldBlur && handleFieldBlur();
             handleChange(name, validateValue);
         }
     };
+    const onFocus = () => {
+        handleFieldFocus && handleFieldFocus(name);
+    };
     const onKeyDown = async (e) => {
         if (handleSubmit && e.key === 'Enter') {
             const currentValue = type === 'number' || type === 'increase'
@@ -74,7 +78,7 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             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: inputValue, 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, onFocus: onFocus, 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" }))),

package/dist/esm/components/List/List.js

@@ -95,7 +95,7 @@ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable =
         const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
         return (React.createElement(React.Fragment, null,
             React.createElement(ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
-                isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
+                isCollapsable && (React.createElement(ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
                         e.stopPropagation();
                     } },
                     row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),

package/dist/esm/components/Table/Table.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
+import React, { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { TableHead, TableRow, TableWrapper } from './Table.styles';
 import { mainTheme } from '../../Theme';
@@ -97,6 +97,12 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
         setCurrentPage(1);
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
+    const tableElements = useMemo(() => {
+        if (ifPagination) {
+            return paginatedElements;
+        }
+        return tableProps.elements;
+    }, [ifPagination, paginatedElements, tableProps.elements]);
     return (React.createElement(ThemeProvider, { theme: theme },
         filtrable && (React.createElement("div", { style: {
                 display: 'flex',
@@ -115,7 +121,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
         React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             React.createElement(TableHead, null,
                 React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            React.createElement("tbody", null, paginatedElements.map((item) => {
+            React.createElement("tbody", null, tableElements.map((item) => {
                 return (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
                     return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
                 })));

package/dist/esm/components/common/commonComponents.js

@@ -25,6 +25,12 @@ export const Panel = styled.div `
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
+  ${(p) => p.maxHeight &&
+    `
+  max-height: ${p.maxHeight};
+  overflow: auto;
+  
+  `}
 `;
 export const PanelOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};

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

@@ -5,7 +5,10 @@ export interface IDropdownProps extends IFormElement {
     handleSelect: (name: string, value: string | number) => void;
     position?: string;
     zIndex?: number;
+    maxHeight?: string;
     theme?: any;
+    handleFieldFocus?: (name: string) => void;
+    handleFieldBlur?: () => void;
 }
 export interface IPositionStyle {
     top: number;

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

@@ -5,6 +5,8 @@ export interface FormProps {
     formData: FormSourceData;
     size?: InputSize;
     read?: boolean;
+    handleFieldFocus?: (name: string) => void;
+    handleFieldBlur?: () => void;
 }
 export declare const Form: FC<FormProps>;
 export default Form;

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

@@ -11,5 +11,7 @@ export interface IInputProps extends IFormElement {
     theme?: any;
     handleSubmit?: () => void;
     prefix?: string;
+    handleFieldFocus?: (name: string) => void;
+    handleFieldBlur?: () => void;
 }
 export declare const Input: FC<IInputProps>;

package/dist/types/components/common/commonComponents.d.ts

@@ -2,8 +2,9 @@ import { InputSize } from '../../types';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ScrollCotainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IPanelStyle {
-    height?: string;
     size: InputSize;
+    height?: string;
+    maxHeight?: string;
     fullWidth?: boolean;
     zIndex?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.4.8",
+  "version": "2.4.10",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",