venice-ui 2.3.0 → 2.3.3

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

@@ -125,7 +125,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, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
+                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.disabled), onClick: () => handleClick(option.action, option.disabled ? option.disabled : false, 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/Input/Input.js

@@ -39,17 +39,24 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedHandleChange = (0, react_1.useCallback)((0, lodash_1.debounce)((name, value) => {
-        handleChange(name, value);
-    }, 300), [handleChange]);
+    const debouncedRef = (0, react_1.useRef)((0, lodash_1.debounce)((n, v) => {
+        handleChange(n, v);
+    }, 300));
+    (0, react_1.useEffect)(() => {
+        return () => {
+            debouncedRef.current.flush();
+            debouncedRef.current.cancel();
+        };
+    }, []);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedHandleChange(name, returnedValue);
+        debouncedRef.current(name, returnedValue);
     };
     const onBlurValidation = () => {
+        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -68,6 +75,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
+            debouncedRef.current.flush();
             handleSubmit();
         }
     };

package/dist/cjs/components/Section/Section.js

@@ -9,11 +9,11 @@ const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
 const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
-const Section = ({ title, children, titlePosition = 'left', noPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
-        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
+const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
+    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
+        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title),
             titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
+        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noHorizontalPadding }, children)));
 };
 exports.Section = Section;

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

@@ -12,6 +12,7 @@ exports.SectionElement = styled_components_1.default.div `
   overflow: auto;
   padding: ${Theme_1.Theme.padding.l} 0;
   background-color: ${(p) => p.backgroundColor};
+  ${(p) => p.noTopPadding && `padding-top: 0;`}
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width: 100%;

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

@@ -10,16 +10,19 @@ const DropdownMenu_1 = require("../DropdownMenu");
 const Theme_1 = require("../../Theme");
 const date_fns_1 = require("date-fns");
 const tableHelper_1 = require("./tableHelper");
-const Cell = ({ header, theme = Theme_1.mainTheme, moreActions, item, marked = false, }) => {
+const Cell = ({ header, theme = Theme_1.mainTheme, moreActions, item, marked = false, isDisabled = false, }) => {
     if (header.action) {
+        const cellAction = item.disabled
+            ? moreActions.map((a) => ({ ...a, disabled: true }))
+            : moreActions.map((a) => ({ ...a }));
         return (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
             react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: cellAction, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
     }
     if (header.scope) {
-        return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked }, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
+        return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked, disabled: isDisabled }, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
     }
-    return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked }, header.date
+    return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked, disabled: isDisabled }, header.date
         ? item[header.valueSource] !== undefined
             ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
             : ''

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

@@ -87,9 +87,11 @@ 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(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 }));
-            })))))),
+            react_1.default.createElement("tbody", null, paginatedElements.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 }));
+                })));
+            }))),
         ifPagination && (react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };
 exports.Table = Table;

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

@@ -62,6 +62,9 @@ exports.TableCell = styled_components_1.default.td `
     border-left:2px solid ${p.theme.action};
     padding-left:6px;
     `}
+  ${p => p.disabled && `
+    color: ${p.theme.inputDisabledTextColor}!important;
+  `}
 `;
 exports.OptionTableCell = styled_components_1.default.td `
   text-align: center;

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

@@ -42,7 +42,7 @@ exports.TooltipWrapper = styled_components_1.default.div `
 `;
 exports.TooltipPivot = styled_components_1.default.span `
   position: absolute;
-  left: 50%;
+  left: 18px;
   transform: translateX(-50%);
   width: 0;
   height: 0;

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

@@ -99,6 +99,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, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
+                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.disabled), onClick: () => handleClick(option.action, option.disabled ? option.disabled : false, 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/Input/Input.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
@@ -13,17 +13,24 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedHandleChange = useCallback(debounce((name, value) => {
-        handleChange(name, value);
-    }, 300), [handleChange]);
+    const debouncedRef = useRef(debounce((n, v) => {
+        handleChange(n, v);
+    }, 300));
+    useEffect(() => {
+        return () => {
+            debouncedRef.current.flush();
+            debouncedRef.current.cancel();
+        };
+    }, []);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedHandleChange(name, returnedValue);
+        debouncedRef.current(name, returnedValue);
     };
     const onBlurValidation = () => {
+        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -42,6 +49,7 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
+            debouncedRef.current.flush();
             handleSubmit();
         }
     };

package/dist/esm/components/Section/Section.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
 import { mainTheme } from '../../Theme';
 import { Button } from '../Button';
-export const Section = ({ title, children, titlePosition = 'left', noPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
-        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
+export const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
+    return (React.createElement(SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
+        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
             React.createElement(TextSubHeader, null, title),
             titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        React.createElement(SectionContent, { noPadding: noPadding }, children)));
+        React.createElement(SectionContent, { noPadding: noHorizontalPadding }, children)));
 };

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

@@ -6,6 +6,7 @@ export const SectionElement = styled.div `
   overflow: auto;
   padding: ${Theme.padding.l} 0;
   background-color: ${(p) => p.backgroundColor};
+  ${(p) => p.noTopPadding && `padding-top: 0;`}
 `;
 export const SectionTitle = styled.div `
   width: 100%;

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

@@ -4,16 +4,19 @@ import { DropdownMenu } from '../DropdownMenu';
 import { mainTheme } from '../../Theme';
 import { format } from 'date-fns';
 import { getValueFormScope } from './tableHelper';
-export const Cell = ({ header, theme = mainTheme, moreActions, item, marked = false, }) => {
+export const Cell = ({ header, theme = mainTheme, moreActions, item, marked = false, isDisabled = false, }) => {
     if (header.action) {
+        const cellAction = item.disabled
+            ? moreActions.map((a) => ({ ...a, disabled: true }))
+            : moreActions.map((a) => ({ ...a }));
         return (React.createElement(OptionTableCell, null,
             React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
+                React.createElement(DropdownMenu, { options: cellAction, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
     }
     if (header.scope) {
-        return (React.createElement(TableCell, { marked: marked }, getValueFormScope(item[header.valueSource], header.scope)));
+        return (React.createElement(TableCell, { marked: marked, disabled: isDisabled }, getValueFormScope(item[header.valueSource], header.scope)));
     }
-    return (React.createElement(TableCell, { marked: marked }, header.date
+    return (React.createElement(TableCell, { marked: marked, disabled: isDisabled }, header.date
         ? item[header.valueSource] !== undefined
             ? format(item[header.valueSource], 'dd-MM-yyyy')
             : ''

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

@@ -61,8 +61,10 @@ 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(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 }));
-            })))))),
+            React.createElement("tbody", null, paginatedElements.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 }));
+                })));
+            }))),
         ifPagination && (React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };

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

@@ -56,6 +56,9 @@ export const TableCell = styled.td `
     border-left:2px solid ${p.theme.action};
     padding-left:6px;
     `}
+  ${p => p.disabled && `
+    color: ${p.theme.inputDisabledTextColor}!important;
+  `}
 `;
 export const OptionTableCell = styled.td `
   text-align: center;

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

@@ -16,7 +16,7 @@ export const TooltipWrapper = styled.div `
 `;
 export const TooltipPivot = styled.span `
   position: absolute;
-  left: 50%;
+  left: 18px;
   transform: translateX(-50%);
   width: 0;
   height: 0;

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

@@ -3,7 +3,8 @@ import { TitlePosition } from '../../types';
 export interface ISectionProps {
     title?: string;
     titlePosition?: TitlePosition;
-    noPadding?: boolean;
+    noHorizontalPadding?: boolean;
+    noTopPadding?: boolean;
     backgroundColor?: string;
     children: React.ReactNode;
     theme?: any;

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

@@ -1,6 +1,7 @@
 import { TitlePosition } from '../../types';
 interface ISectionStyles {
     backgroundColor: string;
+    noTopPadding?: boolean;
 }
 export declare const SectionElement: import("styled-components").StyledComponent<"div", any, ISectionStyles, never>;
 interface ISectionTitleStyle {

package/dist/types/components/Table/Cell.d.ts

@@ -7,6 +7,7 @@ interface ICell {
     moreActions: IAction[];
     item: any;
     marked?: boolean;
+    isDisabled?: boolean;
 }
 export declare const Cell: FC<ICell>;
 export {};

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

@@ -18,6 +18,7 @@ export declare const TableRow: import("styled-components").StyledComponent<"tr",
 interface ITableCellProps {
     theme: any;
     marked: boolean;
+    disabled: boolean;
 }
 export declare const TableCell: import("styled-components").StyledComponent<"td", any, ITableCellProps, never>;
 export declare const OptionTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;

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

@@ -8,7 +8,7 @@ export interface IAction {
     label: string | number;
     disableID?: string;
     isActive?: boolean;
-    diasbled?: boolean;
+    disabled?: boolean;
 }
 export interface IIconsActions {
     iconName: string;

package/package.json

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