venice-ui 2.0.16 → 2.0.18

package/dist/cjs/Theme/Theme.js

@@ -102,12 +102,13 @@ exports.mainTheme = {
     //table
     tableBorderColor: exports.Theme.colors.gray_3,
     tableHeaderBackground: exports.Theme.colors.white,
-    tableHeaderActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    tableHeaderActive: exports.Theme.colors.primary,
     tableCellBackground: exports.Theme.colors.white,
     tableCellEvenBackground: exports.Theme.colors.gray_4,
     tableCellHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     tableCellActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
-    tableCellSortIcon: exports.Theme.colors.primary,
+    tableCellSortIconActive: exports.Theme.colors.primary,
+    tableCellSortIcon: exports.Theme.colors.text,
     tableMoreIconColor: exports.Theme.colors.text,
     tableHoverMoreIconColor: exports.Theme.colors.primary,
     // chips

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

@@ -62,19 +62,42 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         footerAction && footerAction();
         close();
     };
-    const handleClick = (action) => {
-        targetID ? action(targetID) : action();
+    const handleClick = (action, disableID) => {
+        if (targetID) {
+            if (disableID !== targetID) {
+                action(targetID);
+            }
+        }
+        else {
+            action();
+        }
         close();
     };
+    const isDisable = (disableID) => {
+        if (targetID) {
+            return targetID === disableID;
+        }
+        return false;
+    };
     (0, react_1.useEffect)(() => {
+        const panel = ref.current;
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 close();
             }
         };
+        const mouseleave = (e) => {
+            close();
+        };
         document.addEventListener('click', handleClickOutside, true);
+        if (panel) {
+            panel.addEventListener('mouseleave', mouseleave);
+        }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            if (panel) {
+                panel.removeEventListener('mouseleave', mouseleave);
+            }
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
@@ -87,7 +110,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, onClick: () => handleClick(option.action) }, 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) }, 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

@@ -8,36 +8,36 @@ const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
 exports.DropdownMenuElement = styled_components_1.default.div `
-  position:relative;
-  width:auto;
+  position: relative;
+  width: auto;
   display: flex;
   box-sizing: border-box;
-  min-width:40px;
+  min-width: 40px;
 `;
 exports.DropdownMenuHeader = styled_components_1.default.div `
-  border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_3};
+  border-bottom: 1px solid ${Theme_1.Theme.colors.gray_3};
   padding: ${Theme_1.Theme.padding.m};
-  width:100%;
+  width: 100%;
   box-sizing: border-box;
 `;
 exports.DropdownMenuFooter = styled_components_1.default.div `
-  border-top: 1px solid  ${Theme_1.Theme.colors.gray_3};
+  border-top: 1px solid ${Theme_1.Theme.colors.gray_3};
   padding: ${Theme_1.Theme.padding.m};
-  width:100%;
+  width: 100%;
   box-sizing: border-box;
 `;
 exports.DropdownMenuContent = styled_components_1.default.div `
-  width:100%;
+  width: 100%;
 `;
 exports.DropdownMenuOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
-  text-align:left;
-  min-width:80px;
-  cursor: pointer;
+  text-align: left;
+  min-width: 80px;
+  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${Theme_1.Theme.colors.text};
-  font-size:16px;
+  color: ${(p) => (p.isDisable ? Theme_1.Theme.colors.gray_1 : Theme_1.Theme.colors.text)};
+  font-size: 16px;
   :hover {
-    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+    background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }
 `;

package/dist/cjs/components/ElementHeader/ElementHeader.js

@@ -30,7 +30,7 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
         else if (!handleClose && handleClick && actionLabel) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", width: "auto" },
                 react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
-                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
+                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };
     return (react_1.default.createElement(ElementHeader_styles_1.ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },

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

@@ -13,6 +13,6 @@ exports.ElementHeaderWrapper = (0, styled_components_1.default)(Aligment_1.Aligm
   border-top-right-radius:${Theme_1.Theme.borderRadius.m};
   ${(p) => p.bottomDivader &&
     `
-    border-bottom: 2px solid rgba(0, 0, 0, 0.14);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
     `}
 `;

package/dist/cjs/components/Icons/IconsPath.js

@@ -5,8 +5,8 @@ exports.iconsPath = {
     account: 'M5.85 17.1q1.275-.975 2.85-1.538Q10.275 15 12 15q1.725 0 3.3.562 1.575.563 2.85 1.538.875-1.025 1.363-2.325Q20 13.475 20 12q0-3.325-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12q0 1.475.488 2.775.487 1.3 1.362 2.325ZM12 13q-1.475 0-2.488-1.012Q8.5 10.975 8.5 9.5t1.012-2.488Q10.525 6 12 6t2.488 1.012Q15.5 8.025 15.5 9.5t-1.012 2.488Q13.475 13 12 13Zm0 9q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q1.325 0 2.5-.387 1.175-.388 2.15-1.113-.975-.725-2.15-1.113Q13.325 17 12 17t-2.5.387q-1.175.388-2.15 1.113.975.725 2.15 1.113Q10.675 20 12 20Zm0-9q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q12.65 8 12 8q-.65 0-1.075.425Q10.5 8.85 10.5 9.5q0 .65.425 1.075Q11.35 11 12 11Zm0-1.5Zm0 9Z',
     add: 'M11 19v-6H5v-2h6V5h2v6h6v2h-6v6Z',
     add_circle: 'M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z',
-    arrow_drop_down: 'M7 14L12 9L17 14H7Z',
-    arrow_drop_up: 'M12 15L7 10H17L12 15Z',
+    arrow_drop_down: 'M12 15L7 10H17L12 15Z',
+    arrow_drop_up: 'M7 14L12 9L17 14H7Z',
     back: 'M16 22 6 12 16 2l1.775 1.775L9.55 12l8.225 8.225Z',
     back_arrow: 'm12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z',
     bookmark: 'M5 21V5q0-.825.588-1.413Q6.175 3 7 3h10q.825 0 1.413.587Q19 4.175 19 5v16l-7-3Zm2-3.05 5-2.15 5 2.15V5H7ZM7 5h10-5Z',
@@ -47,6 +47,8 @@ exports.iconsPath = {
     remove: 'M19 13H5V11H19V13Z',
     remove_circle: 'M7 11V13H17V11H7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z',
     new_tab: 'M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H19V12H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z',
+    sort_up: 'M12 13.1178L5.06674 20L4 18.9411L12 11L20 18.9411L18.9333 20L12 13.1178Z',
+    sort_down: 'M12 13.0667L4 5.06674L5.06674 4L12 10.9333L18.9333 4L20 5.06674L12 13.0667Z',
     triage: 'M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z',
     upgrade: 'M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z',
     visibility: 'M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z',

package/dist/cjs/components/Sort/Sort.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sort = void 0;
+const react_1 = __importDefault(require("react"));
+const Theme_1 = require("../../Theme");
+const Icons_1 = require("../Icons");
+const Sort_styles_1 = require("./Sort.styles");
+const Sort = ({ theme = Theme_1.mainTheme, handleSort, activeOrder, activeField, }) => {
+    return (react_1.default.createElement(Sort_styles_1.SortWrapper, null,
+        react_1.default.createElement(Sort_styles_1.SortIcon, { onClick: () => handleSort('desc') },
+            react_1.default.createElement(Icons_1.Icon, { name: 'sort_up', iconColor: activeField && activeOrder === 'desc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'deasc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon })),
+        react_1.default.createElement(Sort_styles_1.SortIcon, { onClick: () => handleSort('asc') },
+            react_1.default.createElement(Icons_1.Icon, { name: 'sort_down', iconColor: activeField && activeOrder === 'asc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'asc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon }))));
+};
+exports.Sort = Sort;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortIcon = exports.SortWrapper = void 0;
+const Theme_1 = require("../../Theme");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SortWrapper = styled_components_1.default.div `
+  width:1.6rem;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  transition: 300ms;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items:center;
+`;
+exports.SortIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  :hover {
+    background-color: ${Theme_1.mainTheme.iconBgHoverColor};
+  }
+`;

package/dist/cjs/components/Sort/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sort = void 0;
+var Sort_1 = require("./Sort");
+Object.defineProperty(exports, "Sort", { enumerable: true, get: function () { return Sort_1.Sort; } });

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const react_1 = __importDefault(require("react"));
+const Table_styles_1 = require("./Table.styles");
+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, }) => {
+    if (header.action) {
+        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" }))));
+    }
+    if (header.scope) {
+        return (react_1.default.createElement(Table_styles_1.TableCell, null, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
+    }
+    return (react_1.default.createElement(Table_styles_1.TableCell, null, header.date
+        ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
+        : header.isCount
+            ? item[header.valueSource].length
+            : item[header.valueSource]));
+};
+exports.Cell = Cell;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderCell = void 0;
+const react_1 = __importDefault(require("react"));
+const Table_styles_1 = require("./Table.styles");
+const Theme_1 = require("../../Theme");
+const Sort_1 = require("../Sort");
+const HeaderCell = ({ header, sortable, handleSort, theme = Theme_1.mainTheme, sort, }) => {
+    if (header.action) {
+        return react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, null);
+    }
+    const setSort = (order) => {
+        console.log('setSort', order);
+        handleSort(header.valueSource, order);
+    };
+    return (react_1.default.createElement(Table_styles_1.TableHeaderCell, { sortable: sortable, isSorted: sort.name === header.valueSource && sort.order !== 'none' },
+        header.name,
+        sortable && react_1.default.createElement(Sort_1.Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })));
+};
+exports.HeaderCell = HeaderCell;

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

@@ -28,13 +28,10 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = require("styled-components");
 const Table_styles_1 = require("./Table.styles");
 const Theme_1 = require("../../Theme");
-const date_fns_1 = require("date-fns");
-const Icons_1 = require("../Icons");
 const tableHelper_1 = require("./tableHelper");
-const DropdownMenu_1 = require("../DropdownMenu");
-const Table = ({ theme = Theme_1.mainTheme, headers, elements, 
-// isBulkAction = false,
-hover = true, selectable = true, sortable = true, sort = {
+const HeaderCell_1 = require("./HeaderCell");
+const Cell_1 = require("./Cell");
+const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
 }, moreActions = [], onRowClick, }) => {
@@ -42,7 +39,7 @@ hover = true, selectable = true, sortable = true, sort = {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
             tableHeaders.push({
-                name: 'opiton',
+                name: 'option',
                 valueSource: 'empty',
                 action: true,
             });
@@ -67,9 +64,9 @@ hover = true, selectable = true, sortable = true, sort = {
         }
         onRowClick && onRowClick(id);
     };
-    const handleHeaderCellClick = (targetValue) => {
+    const handleHeaderCellClick = (targetValue, order) => {
         if (sortable) {
-            const newSort = (0, tableHelper_1.setSortParams)(targetValue, tableProps.sort);
+            const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableProps.sort);
             setTableProps({
                 ...tableProps,
                 elements: (0, tableHelper_1.applySort)(newSort, tableProps.elements),
@@ -77,37 +74,12 @@ hover = true, selectable = true, sortable = true, sort = {
             });
         }
     };
-    // const resetSorting = () => {
-    //   setTableProps({
-    //     ...tableProps,
-    //     elements: setElements(
-    //       elements,
-    //       { name: '', order: 'asc' },
-    //       tableProps.filters,
-    //     ),
-    //     sort: {
-    //       name: '',
-    //       order: 'asc',
-    //     },
-    //   })
-    // }
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         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(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, null)) : (react_1.default.createElement(Table_styles_1.TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
-                        tableProps.sort.order != 'none' },
-                    header.name,
-                    tableProps.sort.name === header.valueSource &&
-                        tableProps.sort.order != 'none' && (react_1.default.createElement(Table_styles_1.TableHeaderSortIcon, null,
-                        react_1.default.createElement(Icons_1.Icon, { name: tableProps.sort.order === 'asc'
-                                ? 'arrow_drop_down'
-                                : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
-            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, { key: `${item.id}-${header.name}-action` },
-                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" })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
-                ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
-                : header.isCount
-                    ? item[header.valueSource].length
-                    : item[header.valueSource]))))))))))));
+                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, tableProps.elements.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) => {
+                return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme }));
+            }))))))));
 };
 exports.Table = Table;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
+exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableCell = exports.TableRow = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.TableWrapper = styled_components_1.default.table `
   width: 100%;
@@ -21,21 +21,10 @@ exports.TableHeaderCell = styled_components_1.default.th `
   padding: 8px;
   transition: 300ms;
   font-size: 14px;
-  background-color: ${(p) => p.isSorted
-    ? p.theme.tableHeaderActiveBackground
-    : p.theme.tableHeaderBackground};
-  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
-
-  :hover {
-    background-color: ${(p) => p.isSorted
-    ? p.theme.tableHeaderActiveBackground
-    : p.theme.tableHeaderBackground};
-  }
-
-  ${(p) => p.sortable &&
-    `
-    cursor:pointer;
-  `}
+  color:${(p) => p.isSorted
+    ? p.theme.tableHeaderActive
+    : p.theme.text};
+  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
   position:relative;
 `;
 exports.OptionTableHeaderCell = styled_components_1.default.th `
@@ -45,15 +34,7 @@ exports.OptionTableHeaderCell = styled_components_1.default.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
-`;
-exports.TableHeaderSortIcon = styled_components_1.default.div `
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: 0;
-  transition: 300ms;
-  top: calc(50% - 10px);
+  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
 `;
 exports.TableRow = styled_components_1.default.tr `
   background-color: ${(p) => p.active

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setElements = exports.applySort = exports.setSortParams = void 0;
+exports.getValueFormScope = exports.setElements = exports.applySort = exports.setSortParams = void 0;
 const lodash_1 = require("lodash");
 const Filters_1 = require("../Filters");
-const setSortParams = (target, sort) => {
+const setSortParams = (target, order, sort) => {
     const newSort = {
         name: target,
-        order: target === sort.name ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc',
+        order: order,
     };
     return newSort;
 };
@@ -27,3 +27,7 @@ const setElements = (elements, sort, filters) => {
     return tableElements;
 };
 exports.setElements = setElements;
+const getValueFormScope = (item, valuesScope) => {
+    return valuesScope.find((_value) => _value.key === item)?.value || '';
+};
+exports.getValueFormScope = getValueFormScope;

package/dist/cjs/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
+__exportStar(require("./components/Sort"), exports);
 __exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Toogle"), exports);

package/dist/esm/Theme/Theme.js

@@ -99,12 +99,13 @@ export const mainTheme = {
     //table
     tableBorderColor: Theme.colors.gray_3,
     tableHeaderBackground: Theme.colors.white,
-    tableHeaderActiveBackground: lighten(0.3, Theme.colors.primary),
+    tableHeaderActive: Theme.colors.primary,
     tableCellBackground: Theme.colors.white,
     tableCellEvenBackground: Theme.colors.gray_4,
     tableCellHoverBackground: lighten(0.3, Theme.colors.primary),
     tableCellActiveBackground: lighten(0.3, Theme.colors.primary),
-    tableCellSortIcon: Theme.colors.primary,
+    tableCellSortIconActive: Theme.colors.primary,
+    tableCellSortIcon: Theme.colors.text,
     tableMoreIconColor: Theme.colors.text,
     tableHoverMoreIconColor: Theme.colors.primary,
     // chips

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

@@ -36,19 +36,42 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         footerAction && footerAction();
         close();
     };
-    const handleClick = (action) => {
-        targetID ? action(targetID) : action();
+    const handleClick = (action, disableID) => {
+        if (targetID) {
+            if (disableID !== targetID) {
+                action(targetID);
+            }
+        }
+        else {
+            action();
+        }
         close();
     };
+    const isDisable = (disableID) => {
+        if (targetID) {
+            return targetID === disableID;
+        }
+        return false;
+    };
     useEffect(() => {
+        const panel = ref.current;
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 close();
             }
         };
+        const mouseleave = (e) => {
+            close();
+        };
         document.addEventListener('click', handleClickOutside, true);
+        if (panel) {
+            panel.addEventListener('mouseleave', mouseleave);
+        }
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
+            if (panel) {
+                panel.removeEventListener('mouseleave', mouseleave);
+            }
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
@@ -61,6 +84,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, onClick: () => handleClick(option.action) }, option.label)))),
+                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID) }, 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

@@ -1,37 +1,37 @@
-import { lighten } from "polished";
-import styled from "styled-components";
-import { Theme } from "../../Theme";
+import { lighten } from 'polished';
+import styled from 'styled-components';
+import { Theme } from '../../Theme';
 export const DropdownMenuElement = styled.div `
-  position:relative;
-  width:auto;
+  position: relative;
+  width: auto;
   display: flex;
   box-sizing: border-box;
-  min-width:40px;
+  min-width: 40px;
 `;
 export const DropdownMenuHeader = styled.div `
-  border-bottom: 1px solid  ${Theme.colors.gray_3};
+  border-bottom: 1px solid ${Theme.colors.gray_3};
   padding: ${Theme.padding.m};
-  width:100%;
+  width: 100%;
   box-sizing: border-box;
 `;
 export const DropdownMenuFooter = styled.div `
-  border-top: 1px solid  ${Theme.colors.gray_3};
+  border-top: 1px solid ${Theme.colors.gray_3};
   padding: ${Theme.padding.m};
-  width:100%;
+  width: 100%;
   box-sizing: border-box;
 `;
 export const DropdownMenuContent = styled.div `
-  width:100%;
+  width: 100%;
 `;
 export const DropdownMenuOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};
-  text-align:left;
-  min-width:80px;
-  cursor: pointer;
+  text-align: left;
+  min-width: 80px;
+  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${Theme.colors.text};
-  font-size:16px;
+  color: ${(p) => (p.isDisable ? Theme.colors.gray_1 : Theme.colors.text)};
+  font-size: 16px;
   :hover {
-    background-color: ${lighten(0.4, Theme.colors.primary)};
+    background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
   }
 `;

package/dist/esm/components/ElementHeader/ElementHeader.js

@@ -24,7 +24,7 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
         else if (!handleClose && handleClick && actionLabel) {
             return (React.createElement(Aligment, { align: "center", width: "auto" },
                 React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
-                options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
+                options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };
     return (React.createElement(ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },

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

@@ -7,6 +7,6 @@ export const ElementHeaderWrapper = styled(Aligment) `
   border-top-right-radius:${Theme.borderRadius.m};
   ${(p) => p.bottomDivader &&
     `
-    border-bottom: 2px solid rgba(0, 0, 0, 0.14);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
     `}
 `;

package/dist/esm/components/Icons/IconsPath.js

@@ -2,8 +2,8 @@ export const iconsPath = {
     account: 'M5.85 17.1q1.275-.975 2.85-1.538Q10.275 15 12 15q1.725 0 3.3.562 1.575.563 2.85 1.538.875-1.025 1.363-2.325Q20 13.475 20 12q0-3.325-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12q0 1.475.488 2.775.487 1.3 1.362 2.325ZM12 13q-1.475 0-2.488-1.012Q8.5 10.975 8.5 9.5t1.012-2.488Q10.525 6 12 6t2.488 1.012Q15.5 8.025 15.5 9.5t-1.012 2.488Q13.475 13 12 13Zm0 9q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q1.325 0 2.5-.387 1.175-.388 2.15-1.113-.975-.725-2.15-1.113Q13.325 17 12 17t-2.5.387q-1.175.388-2.15 1.113.975.725 2.15 1.113Q10.675 20 12 20Zm0-9q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q12.65 8 12 8q-.65 0-1.075.425Q10.5 8.85 10.5 9.5q0 .65.425 1.075Q11.35 11 12 11Zm0-1.5Zm0 9Z',
     add: 'M11 19v-6H5v-2h6V5h2v6h6v2h-6v6Z',
     add_circle: 'M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z',
-    arrow_drop_down: 'M7 14L12 9L17 14H7Z',
-    arrow_drop_up: 'M12 15L7 10H17L12 15Z',
+    arrow_drop_down: 'M12 15L7 10H17L12 15Z',
+    arrow_drop_up: 'M7 14L12 9L17 14H7Z',
     back: 'M16 22 6 12 16 2l1.775 1.775L9.55 12l8.225 8.225Z',
     back_arrow: 'm12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z',
     bookmark: 'M5 21V5q0-.825.588-1.413Q6.175 3 7 3h10q.825 0 1.413.587Q19 4.175 19 5v16l-7-3Zm2-3.05 5-2.15 5 2.15V5H7ZM7 5h10-5Z',
@@ -44,6 +44,8 @@ export const iconsPath = {
     remove: 'M19 13H5V11H19V13Z',
     remove_circle: 'M7 11V13H17V11H7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z',
     new_tab: 'M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H19V12H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z',
+    sort_up: 'M12 13.1178L5.06674 20L4 18.9411L12 11L20 18.9411L18.9333 20L12 13.1178Z',
+    sort_down: 'M12 13.0667L4 5.06674L5.06674 4L12 10.9333L18.9333 4L20 5.06674L12 13.0667Z',
     triage: 'M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z',
     upgrade: 'M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z',
     visibility: 'M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z',

package/dist/esm/components/Sort/Sort.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mainTheme } from '../../Theme';
+import { Icon } from '../Icons';
+import { SortIcon, SortWrapper } from './Sort.styles';
+export const Sort = ({ theme = mainTheme, handleSort, activeOrder, activeField, }) => {
+    return (React.createElement(SortWrapper, null,
+        React.createElement(SortIcon, { onClick: () => handleSort('desc') },
+            React.createElement(Icon, { name: 'sort_up', iconColor: activeField && activeOrder === 'desc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'deasc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon })),
+        React.createElement(SortIcon, { onClick: () => handleSort('asc') },
+            React.createElement(Icon, { name: 'sort_down', iconColor: activeField && activeOrder === 'asc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'asc'
+                    ? theme.tableCellSortIconActive
+                    : theme.tableCellSortIcon }))));
+};

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

@@ -0,0 +1,21 @@
+import { mainTheme } from '../../Theme';
+import styled from 'styled-components';
+export const SortWrapper = styled.div `
+  width:1.6rem;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  transition: 300ms;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items:center;
+`;
+export const SortIcon = styled.div `
+  display: flex;
+  align-items: center;
+  :hover {
+    background-color: ${mainTheme.iconBgHoverColor};
+  }
+`;

package/dist/esm/components/Sort/index.js

@@ -0,0 +1 @@
+export { Sort } from './Sort';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OptionTableCell, OptionTableCellWrapper, TableCell, } from './Table.styles';
+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, }) => {
+    if (header.action) {
+        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" }))));
+    }
+    if (header.scope) {
+        return (React.createElement(TableCell, null, getValueFormScope(item[header.valueSource], header.scope)));
+    }
+    return (React.createElement(TableCell, null, header.date
+        ? format(item[header.valueSource], 'dd-MM-yyyy')
+        : header.isCount
+            ? item[header.valueSource].length
+            : item[header.valueSource]));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { OptionTableHeaderCell, TableHeaderCell } from './Table.styles';
+import { mainTheme } from '../../Theme';
+import { Sort } from '../Sort';
+export const HeaderCell = ({ header, sortable, handleSort, theme = mainTheme, sort, }) => {
+    if (header.action) {
+        return React.createElement(OptionTableHeaderCell, null);
+    }
+    const setSort = (order) => {
+        console.log('setSort', order);
+        handleSort(header.valueSource, order);
+    };
+    return (React.createElement(TableHeaderCell, { sortable: sortable, isSorted: sort.name === header.valueSource && sort.order !== 'none' },
+        header.name,
+        sortable && React.createElement(Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })));
+};

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

@@ -1,14 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { OptionTableCell, OptionTableCellWrapper, OptionTableHeaderCell, TableCell, TableHead, TableHeaderCell, TableHeaderSortIcon, TableRow, TableWrapper, } from './Table.styles';
+import { TableHead, TableRow, TableWrapper } from './Table.styles';
 import { mainTheme } from '../../Theme';
-import { format } from 'date-fns';
-import { Icon } from '../Icons';
 import { applySort, setSortParams } from './tableHelper';
-import { DropdownMenu } from '../DropdownMenu';
-export const Table = ({ theme = mainTheme, headers, elements, 
-// isBulkAction = false,
-hover = true, selectable = true, sortable = true, sort = {
+import { HeaderCell } from './HeaderCell';
+import { Cell } from './Cell';
+export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
 }, moreActions = [], onRowClick, }) => {
@@ -16,7 +13,7 @@ hover = true, selectable = true, sortable = true, sort = {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
             tableHeaders.push({
-                name: 'opiton',
+                name: 'option',
                 valueSource: 'empty',
                 action: true,
             });
@@ -41,9 +38,9 @@ hover = true, selectable = true, sortable = true, sort = {
         }
         onRowClick && onRowClick(id);
     };
-    const handleHeaderCellClick = (targetValue) => {
+    const handleHeaderCellClick = (targetValue, order) => {
         if (sortable) {
-            const newSort = setSortParams(targetValue, tableProps.sort);
+            const newSort = setSortParams(targetValue, order, tableProps.sort);
             setTableProps({
                 ...tableProps,
                 elements: applySort(newSort, tableProps.elements),
@@ -51,36 +48,11 @@ hover = true, selectable = true, sortable = true, sort = {
             });
         }
     };
-    // const resetSorting = () => {
-    //   setTableProps({
-    //     ...tableProps,
-    //     elements: setElements(
-    //       elements,
-    //       { name: '', order: 'asc' },
-    //       tableProps.filters,
-    //     ),
-    //     sort: {
-    //       name: '',
-    //       order: 'asc',
-    //     },
-    //   })
-    // }
     return (React.createElement(ThemeProvider, { theme: theme },
         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(React.Fragment, null, header.action ? (React.createElement(OptionTableHeaderCell, null)) : (React.createElement(TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
-                        tableProps.sort.order != 'none' },
-                    header.name,
-                    tableProps.sort.name === header.valueSource &&
-                        tableProps.sort.order != 'none' && (React.createElement(TableHeaderSortIcon, null,
-                        React.createElement(Icon, { name: tableProps.sort.order === 'asc'
-                                ? 'arrow_drop_down'
-                                : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
-            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableCell, { key: `${item.id}-${header.name}-action` },
-                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" })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
-                ? format(item[header.valueSource], 'dd-MM-yyyy')
-                : header.isCount
-                    ? item[header.valueSource].length
-                    : item[header.valueSource]))))))))))));
+                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, tableProps.elements.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) => {
+                return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme }));
+            }))))))));
 };

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

@@ -15,21 +15,10 @@ export const TableHeaderCell = styled.th `
   padding: 8px;
   transition: 300ms;
   font-size: 14px;
-  background-color: ${(p) => p.isSorted
-    ? p.theme.tableHeaderActiveBackground
-    : p.theme.tableHeaderBackground};
-  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
-
-  :hover {
-    background-color: ${(p) => p.isSorted
-    ? p.theme.tableHeaderActiveBackground
-    : p.theme.tableHeaderBackground};
-  }
-
-  ${(p) => p.sortable &&
-    `
-    cursor:pointer;
-  `}
+  color:${(p) => p.isSorted
+    ? p.theme.tableHeaderActive
+    : p.theme.text};
+  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
   position:relative;
 `;
 export const OptionTableHeaderCell = styled.th `
@@ -39,15 +28,7 @@ export const OptionTableHeaderCell = styled.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
-`;
-export const TableHeaderSortIcon = styled.div `
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: 0;
-  transition: 300ms;
-  top: calc(50% - 10px);
+  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
 `;
 export const TableRow = styled.tr `
   background-color: ${(p) => p.active

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

@@ -1,9 +1,9 @@
 import { orderBy } from 'lodash';
 import { applyFiltersToTable } from '../Filters';
-export const setSortParams = (target, sort) => {
+export const setSortParams = (target, order, sort) => {
     const newSort = {
         name: target,
-        order: target === sort.name ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc',
+        order: order,
     };
     return newSort;
 };
@@ -21,3 +21,6 @@ export const setElements = (elements, sort, filters) => {
     }
     return tableElements;
 };
+export const getValueFormScope = (item, valuesScope) => {
+    return valuesScope.find((_value) => _value.key === item)?.value || '';
+};

package/dist/esm/index.js

@@ -17,6 +17,7 @@ export * from './components/Modal';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
+export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';

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

@@ -91,11 +91,12 @@ export declare const mainTheme: {
     optionHoverBackground: string;
     tableBorderColor: string;
     tableHeaderBackground: string;
-    tableHeaderActiveBackground: string;
+    tableHeaderActive: string;
     tableCellBackground: string;
     tableCellEvenBackground: string;
     tableCellHoverBackground: string;
     tableCellActiveBackground: string;
+    tableCellSortIconActive: string;
     tableCellSortIcon: string;
     tableMoreIconColor: string;
     tableHoverMoreIconColor: string;

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

@@ -4,6 +4,7 @@ export declare const DropdownMenuFooter: import("styled-components").StyledCompo
 export declare const DropdownMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IPanelOptionStyle {
     onClick?: any;
+    isDisable: boolean;
 }
 export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
 export {};

package/dist/types/components/Icons/IconsPath.d.ts

@@ -44,6 +44,8 @@ export declare const iconsPath: {
     remove: string;
     remove_circle: string;
     new_tab: string;
+    sort_up: string;
+    sort_down: string;
     triage: string;
     upgrade: string;
     visibility: string;

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface ISort {
+    theme?: any;
+    handleSort: (order: string) => void;
+    activeOrder: string;
+    activeField: boolean;
+}
+export declare const Sort: FC<ISort>;
+export {};

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

@@ -0,0 +1,2 @@
+export declare const SortWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SortIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/Sort/index.d.ts

@@ -0,0 +1 @@
+export { Sort } from './Sort';

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ITableHeaderProps } from './Table';
+import { IAction } from '../../types';
+interface ICell {
+    header: ITableHeaderProps;
+    theme?: any;
+    moreActions: IAction[];
+    item: any;
+}
+export declare const Cell: FC<ICell>;
+export {};

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ITableHeaderProps, ITableSortProps } from './Table';
+interface IHeaderCell {
+    theme?: any;
+    header: ITableHeaderProps;
+    sortable: boolean;
+    handleSort: (targetValue: string, order: string) => void;
+    sort: ITableSortProps;
+}
+export declare const HeaderCell: FC<IHeaderCell>;
+export {};

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

@@ -1,5 +1,9 @@
 import { FC } from 'react';
 import { IAction } from '../../types';
+export interface ITableScopeProps {
+    key: string;
+    value: string;
+}
 export interface ITableHeaderProps {
     name: string;
     valueSource: string;
@@ -7,6 +11,7 @@ export interface ITableHeaderProps {
     date?: boolean;
     action?: boolean;
     isCount?: boolean;
+    scope?: ITableScopeProps[];
 }
 export interface ITableSortProps {
     name: string;

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

@@ -3,12 +3,10 @@ export declare const TableHead: import("styled-components").StyledComponent<"the
 interface ITableHeaderCellProps {
     theme: any;
     sortable: boolean;
-    onClick: (targetValue: string) => void;
     isSorted: boolean;
 }
 export declare const TableHeaderCell: import("styled-components").StyledComponent<"th", any, ITableHeaderCellProps, never>;
 export declare const OptionTableHeaderCell: import("styled-components").StyledComponent<"th", any, {}, never>;
-export declare const TableHeaderSortIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface ITableRowProps {
     hover: boolean;
     onClick?: (id: string) => void;

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

@@ -1,5 +1,6 @@
 import { IApplyFilterResults } from '../Filters';
-import { ITableSortProps } from './Table';
-export declare const setSortParams: (target: string, sort: ITableSortProps) => ITableSortProps;
+import { ITableScopeProps, ITableSortProps } from './Table';
+export declare const setSortParams: (target: string, order: string, sort: ITableSortProps) => ITableSortProps;
 export declare const applySort: (sort: ITableSortProps, elements: any) => any;
 export declare const setElements: (elements: any, sort: ITableSortProps, filters: IApplyFilterResults[]) => any;
+export declare const getValueFormScope: (item: string, valuesScope: ITableScopeProps[]) => string;

package/dist/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/Modal';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
+export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';

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

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

package/package.json

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