venice-ui 1.0.42 → 1.0.44

package/dist/esm/Theme/Theme.js

@@ -9,6 +9,7 @@ export const Theme = {
         black: "#333333",
         gray_1: "#b7b7b7",
         gray_2: "#e3e3e3",
+        gray_3: '#f3f3f3',
         overlayer: 'rgba(0,0,0,0.4)',
         red: '#ad1616'
     },
@@ -76,5 +77,17 @@ export const mainTheme = {
     contentBackground: Theme.colors.white,
     // selector / dropdown
     optionActiveColor: Theme.colors.primary,
-    optionHoverBackground: lighten(0.3, Theme.colors.primary)
+    optionHoverBackground: lighten(0.3, Theme.colors.primary),
+    //table
+    tableBorderColor: Theme.colors.gray_2,
+    tableHeaderBackground: Theme.colors.white,
+    tableHeaderActiveBackground: lighten(0.3, Theme.colors.primary),
+    tableCellBackground: Theme.colors.white,
+    tableCellEvenBackground: Theme.colors.gray_3,
+    tableCellHoverBackground: lighten(0.3, Theme.colors.primary),
+    tableCellActiveBackground: lighten(0.3, Theme.colors.primary),
+    tableCellSortIcon: Theme.colors.primary,
+    // chips
+    chipsNeutralBackground: Theme.colors.primary,
+    chipsNeutralTextColor: Theme.colors.white
 };

package/dist/esm/components/Chips/Chips.js

@@ -0,0 +1,13 @@
+import { Aligment } from '../Aligment';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mainTheme } from '../../Theme';
+import { ChipsElement, ChipsLabel } from './Chips.styles';
+import { Icon } from '../Icons';
+export const Chips = ({ theme = mainTheme, label, handleClose, }) => {
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(ChipsElement, { onClick: () => handleClose() },
+            React.createElement(Aligment, { gap: 4 },
+                React.createElement(ChipsLabel, null, label),
+                React.createElement(Icon, { name: 'close', color: theme.chipsNeutralTextColor, size: 14 })))));
+};

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const ChipsElement = styled.div `
+  display:inline-block;
+  cursor: pointer;
+  background-color:${p => p.theme.chipsNeutralBackground};
+  color:${p => p.theme.chipsNeutralTextColor};
+  padding:4px 8px;
+  width:auto;
+  box-sizing: border-box;
+  border-radius:30px;
+`;
+export const ChipsLabel = styled.div `
+  font-size:${Theme.fontSize.s}
+`;

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

@@ -0,0 +1 @@
+export * from './Chips';

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

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { TextAccent } from '../Typography';
+import { Aligment } from '../Aligment';
+import { Icon } from '../Icons';
+import { Modal } from '../Modal';
+import { FilterIconArea, FilterInputWrapper, FiltersArea, FilterSection, } from './Filters.styles';
+import { Theme, mainTheme } from '../../Theme';
+import { PanelOption } from '../common';
+import { Input } from '../Input';
+import { Chips } from '../Chips';
+export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = "Cancel", filters = [], labelClearAll = 'Clear all filters', handleSubmitFilters }) => {
+    const generateStateObj = () => {
+        const obj = {};
+        filters.forEach((filter) => {
+            obj[filter.name] = {
+                name: filter.name,
+                type: filter.type,
+                value: [],
+                rangeMin: filter.min,
+                rangeMax: filter.max,
+                min: '',
+                max: '',
+            };
+        });
+        return obj;
+    };
+    const [openFilters, setOpenFilters] = useState(false);
+    const [activeFilters, setActiveFilters] = useState(generateStateObj());
+    const toogleFilter = () => {
+        setOpenFilters(!openFilters);
+    };
+    const isFilterActive = (filter) => {
+        let isActive = false;
+        if (filter.type === 'select') {
+            isActive = filter.value.length > 0;
+        }
+        else if (filter.type === 'range') {
+            isActive = filter.min.length > 0 || filter.max.length > 0;
+        }
+        return isActive;
+    };
+    const isAnyFilterActive = () => {
+        const activs = Object.keys(activeFilters).find((key) => isFilterActive(activeFilters[key]));
+        if (activs) {
+            return activs.length > 0;
+        }
+        return false;
+    };
+    const setIconColor = () => {
+        return isAnyFilterActive() ? theme.action : theme.textColor;
+    };
+    const clearAll = () => {
+        const resetedFilter = { ...activeFilters };
+        Object.keys(resetedFilter).forEach((key) => {
+            if (resetedFilter[key].type === 'select') {
+                resetedFilter[key].value = [];
+            }
+            else if (resetedFilter[key].type === 'range') {
+                resetedFilter[key].min = '';
+                resetedFilter[key].max = '';
+            }
+        });
+        return resetedFilter;
+    };
+    const resetAllFilters = () => {
+        const cleared = clearAll();
+        setActiveFilters({
+            ...cleared,
+        });
+    };
+    const resetAllFiltersAndSubmit = () => {
+        resetAllFilters();
+        applyFilter();
+    };
+    const resetFilter = (filterName, filterType) => {
+        if (filterType === 'select') {
+            setActiveFilters({
+                ...activeFilters,
+                [filterName]: {
+                    ...activeFilters[filterName],
+                    value: [],
+                },
+            });
+        }
+        if (filterType === 'range') {
+            setActiveFilters({
+                ...activeFilters,
+                [filterName]: {
+                    ...activeFilters[filterName],
+                    min: '',
+                    max: '',
+                },
+            });
+        }
+    };
+    const setSelectFilter = (filterValue, filterName) => {
+        let values = [];
+        const existingValues = activeFilters[filterName].value;
+        if (existingValues.includes(filterValue)) {
+            values = existingValues.filter((item) => item !== filterValue);
+        }
+        else {
+            existingValues.push(filterValue);
+            values = [...existingValues];
+        }
+        setActiveFilters({
+            ...activeFilters,
+            [filterName]: {
+                ...activeFilters[filterName],
+                value: values,
+            },
+        });
+    };
+    const setRangeFilter = (name, value) => {
+        const filterName = name.split('_')[0];
+        const filterParam = name.split('_')[1];
+        setActiveFilters({
+            ...activeFilters,
+            [filterName]: {
+                ...activeFilters[filterName],
+                [filterParam]: value,
+            },
+        });
+    };
+    const applyFilter = () => {
+        const obj = [];
+        Object.keys(activeFilters).forEach((key) => {
+            if (activeFilters[key].type === 'select') {
+                if (activeFilters[key].value.length > 0) {
+                    obj.push({
+                        name: activeFilters[key].name,
+                        type: activeFilters[key].type,
+                        value: activeFilters[key].value,
+                    });
+                }
+            }
+            else if (activeFilters[key].type === 'range') {
+                if (activeFilters[key].min.length > 0 || activeFilters[key].max.length > 0) {
+                    obj.push({
+                        name: activeFilters[key].name,
+                        type: activeFilters[key].type,
+                        min: activeFilters[key].min.length > 0 ? activeFilters[key].min : undefined,
+                        max: activeFilters[key].max.length > 0 ? activeFilters[key].max : undefined,
+                    });
+                }
+            }
+        });
+        handleSubmitFilters && handleSubmitFilters(obj);
+        setOpenFilters(false);
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(FilterIconArea, null,
+            React.createElement(Icon, { name: "filters", onClick: toogleFilter, color: setIconColor() }),
+            isAnyFilterActive() && (React.createElement(Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
+        openFilters && (React.createElement(Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, labelConfirm: labelConfirm, labelClose: labelClose },
+            React.createElement(Aligment, { direction: "column", align: 'flex-end' },
+                React.createElement(Chips, { handleClose: resetAllFilters, label: labelClearAll }),
+                React.createElement(FiltersArea, null, filters.map((filter) => (React.createElement(FilterSection, null,
+                    React.createElement(Aligment, { wrap: "nowrap" },
+                        React.createElement(TextAccent, null, filter.label),
+                        React.createElement(Icon, { name: "close", size: 14, onClick: () => resetFilter(filter.name, filter.type) })),
+                    filter.type === 'select' && (React.createElement(Aligment, { wrap: "nowrap", direction: "column", align: "flex-start", vPadding: Theme.padding.s }, filter.allowValues?.map((item) => {
+                        return (React.createElement(PanelOption, { width: "100%", key: item, active: activeFilters[filter.name].value.includes(item), onClick: () => setSelectFilter(item, filter.name) }, item));
+                    }))),
+                    filter.type === 'range' && (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme.padding.s, justify: "flex-start", gap: 8 },
+                        React.createElement(FilterInputWrapper, null,
+                            React.createElement(Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, placeholder: activeFilters[filter.name].rangeMin, handleChange: setRangeFilter })),
+                        React.createElement(FilterInputWrapper, null,
+                            React.createElement(Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, placeholder: activeFilters[filter.name].rangeMax, handleChange: setRangeFilter })))))))))))));
+};

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

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const FilterIconArea = styled.div `
+  display:flex;
+  flex-direction: row;
+  align-items: center;
+  gap:8px;
+}
+`;
+export const FiltersArea = styled.div `
+  width:100%;
+`;
+export const FilterSection = styled.div `
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  padding-bottom:${Theme.padding.m}
+`;
+export const FilterOption = styled.div `
+  width:100%;
+  display:flex;
+  flex-direction:column;
+`;
+export const FilterInputWrapper = styled.div `
+  width:100px
+`;

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

@@ -0,0 +1,43 @@
+export const getUniqueValues = (elements, source) => {
+    const result = [...new Set(elements.map((item) => item[source]))];
+    return result;
+};
+export const getMinValue = (elements, source) => {
+    return Math.min(...elements.map((item) => item[source]));
+};
+export const getMaxValue = (elements, source) => {
+    return Math.max(...elements.map((item) => item[source]));
+};
+export const setTableFilterSet = (headers, elements) => {
+    const filterSetting = [];
+    headers.forEach((filter) => {
+        if (filter.filter) {
+            filterSetting.push({
+                label: filter.name,
+                name: filter.valueSource,
+                type: filter.filterType ? filter.filterType : 'select',
+                allowValues: getUniqueValues(elements, filter.valueSource),
+                min: getMinValue(elements, filter.valueSource),
+                max: getMaxValue(elements, filter.valueSource),
+            });
+        }
+    });
+    return filterSetting;
+};
+export const applyFiltersToTable = (elements, filters) => {
+    let filtered = [...elements];
+    filters.forEach((filter) => {
+        if (filter.type === 'select') {
+            filtered = filtered.filter((item) => filter.value?.includes(item[filter.name]));
+        }
+        else if (filter.type === 'range') {
+            filtered = filtered.filter((item) => {
+                const minValue = filter.min ? filter.min : item[filter.name];
+                const maxValue = filter.max ? filter.max : item[filter.name];
+                return (item[filter.name] >= minValue &&
+                    item[filter.name] <= maxValue);
+            });
+        }
+    });
+    return filtered;
+};

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

@@ -0,0 +1,2 @@
+export * from './Filters';
+export * from './filtersHelper';

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

@@ -24,4 +24,6 @@ export const iconsPath = {
     check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-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",
     check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
     check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z",
+    arrow_drop_down: 'M7 14L12 9L17 14H7Z',
+    arrow_drop_up: 'M12 15L7 10H17L12 15Z',
 };

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { TableCell, TableHead, TableHeaderCell, TableHeaderSortIcon, TableRow, TableTopBar, TableWrapper, } from './Table.styles';
+import { mainTheme } from '../../Theme';
+import { format } from 'date-fns';
+import { Icon } from '../Icons';
+import { Aligment } from '../Aligment';
+import { Filters, setTableFilterSet } from '../Filters';
+import { applySort, setElements, setSortParams } from './tableHelper';
+import { Chips } from '../Chips';
+export const Table = ({ theme = mainTheme, headers, elements, 
+// isBulkAction = false,
+hover = true, selectable = true, sortable = true, filtrable = false, sort = {
+    name: '',
+    order: 'none',
+}, filters = [], 
+// haveMore = false,
+// moreActions = [],
+onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+    const [tableProps, setTableProps] = useState({
+        elements: setElements(elements, sort, filters),
+        sort: sort,
+        filters: filters,
+    });
+    const [selectedRow, setSelectedRow] = useState('');
+    const handleRowClick = (id) => {
+        if (selectable) {
+            setSelectedRow(id);
+        }
+        onRowClick && onRowClick(id);
+    };
+    const handleHeaderCellClick = (targetValue) => {
+        if (sortable) {
+            const newSort = setSortParams(targetValue, tableProps.sort);
+            setTableProps({
+                ...tableProps,
+                elements: applySort(newSort, tableProps.elements),
+                sort: newSort,
+            });
+        }
+    };
+    const handleFilters = (newFilters) => {
+        setTableProps({
+            ...tableProps,
+            elements: setElements(elements, tableProps.sort, newFilters),
+            filters: newFilters,
+        });
+    };
+    const resetSorting = () => {
+        setTableProps({
+            ...tableProps,
+            elements: setElements(elements, { name: '', order: 'asc' }, tableProps.filters),
+            sort: {
+                name: '',
+                order: 'asc',
+            },
+        });
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        (filtrable || sortable) && (React.createElement(TableTopBar, null,
+            React.createElement(Aligment, { justify: "flex-start", gap: 10 },
+                filtrable && (React.createElement(Filters, { title: filtersTitle, labelConfirm: filtersConfirmLabel, labelClose: filtersCancelLabel, labelClearAll: filterClearAllLabel, handleSubmitFilters: handleFilters, filters: setTableFilterSet(headers, elements) })),
+                sortable && tableProps.sort.name !== '' && (React.createElement(Chips, { label: sortClearLabel, handleClose: resetSorting }))))),
+        React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, { hover: false, selectable: false, active: false }, headers.map((header) => (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', color: 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) }, headers.map((header) => {
+                return (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    ? format(item[header.valueSource], 'dd-MM-yyyy')
+                    : item[header.valueSource]));
+                // }
+            }))))))));
+};

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

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+export const TableWrapper = styled.table `
+  width: 100%;
+`;
+export const TableHead = styled.thead `
+  tr:first-child {
+    position: sticky;
+    top: 0;
+  }
+`;
+export const TableHeaderCell = styled.th `
+  font-weight: bold;
+  text-align: left;
+  padding: 8px;
+  transition: 300ms;
+  font-size: 14px;
+  background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+
+  :hover {
+    background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+  }
+ 
+  ${(p) => p.sortable &&
+    `
+    cursor:pointer;
+  `}
+  position:relative;
+
+`;
+export const TableHeaderSortIcon = styled.div `
+  width: 20px;
+  height: 20px;
+  position:absolute;
+  right:0;
+  transition: 300ms;
+  top: calc(50% - 10px);
+`;
+export const TableRow = styled.tr `
+  background-color: ${(p) => p.active ? p.theme.tableCellActiveBackground : p.theme.tableCellBackground};
+  :nth-child(even) {
+    background-color: ${(p) => p.active
+    ? p.theme.tableCellActiveBackground
+    : p.theme.tableCellEvenBackground};
+    transition: 300ms;
+  }
+  ${(p) => p.selectable &&
+    `
+  cursor:pointer;`}
+  ${(p) => p.hover &&
+    `
+  :hover{
+    background-color:${p.theme.tableCellHoverBackground};
+  }
+  `}
+`;
+export const TableCell = styled.td `
+  padding: 8px;
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+`;
+export const TableTopBar = styled.div `
+  padding-bottom:4px;
+`;

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

@@ -0,0 +1 @@
+export * from './Table';

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

@@ -0,0 +1,23 @@
+import { orderBy } from 'lodash';
+import { applyFiltersToTable } from '../Filters';
+export const setSortParams = (target, sort) => {
+    const newSort = {
+        name: target,
+        order: target === sort.name ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc',
+    };
+    return newSort;
+};
+export const applySort = (sort, elements) => {
+    let sorted = [...elements];
+    if (sort.name !== '') {
+        sorted = orderBy(sorted, sort.name, sort.order);
+    }
+    return sorted;
+};
+export const setElements = (elements, sort, filters) => {
+    let tableElements = [...applyFiltersToTable(elements, filters)];
+    if (sort.name !== '') {
+        tableElements = applySort(sort, tableElements);
+    }
+    return tableElements;
+};

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

@@ -41,7 +41,7 @@ export const TextLabel = styled.div `
   ${(p) => p.size && p.labelPosition === 'left'
     ? setLabelFontSize(p.size)
     : `
-  font-size: ${Theme.fontSize.xs};
-  line-height: ${Theme.lineHeight.xs};
+  font-size: ${Theme.fontSize.s};
+  line-height: ${Theme.lineHeight.s};
   `}
 `;

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

@@ -35,4 +35,5 @@ export const PanelOption = styled.div `
   :hover {
     background-color: ${lighten(0.4, Theme.colors.primary)};
   }
+  ${p => p.width && `width:${p.width};`}
 `;

package/dist/esm/index.js

@@ -1,11 +1,13 @@
 export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/Card';
+export * from './components/Chips';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
 export * from './components/File';
+export * from './components/Filters';
 export * from './components/Icons';
 export * from "./components/Input";
 export * from './components/Loader';
@@ -13,5 +15,6 @@ export * from './components/Modal';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
+export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Typography';

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

@@ -8,6 +8,7 @@ export declare const Theme: {
         black: string;
         gray_1: string;
         gray_2: string;
+        gray_3: string;
         overlayer: string;
         red: string;
     };
@@ -71,4 +72,14 @@ export declare const mainTheme: {
     contentBackground: string;
     optionActiveColor: string;
     optionHoverBackground: string;
+    tableBorderColor: string;
+    tableHeaderBackground: string;
+    tableHeaderActiveBackground: string;
+    tableCellBackground: string;
+    tableCellEvenBackground: string;
+    tableCellHoverBackground: string;
+    tableCellActiveBackground: string;
+    tableCellSortIcon: string;
+    chipsNeutralBackground: string;
+    chipsNeutralTextColor: string;
 };

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface IChipsProps {
+    theme?: any;
+    label: string;
+    handleClose: () => void;
+}
+export declare const Chips: FC<IChipsProps>;
+export {};

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

@@ -0,0 +1,6 @@
+interface IChipsElementProps {
+    theme: any;
+}
+export declare const ChipsElement: import("styled-components").StyledComponent<"div", any, IChipsElementProps, never>;
+export declare const ChipsLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

@@ -0,0 +1 @@
+export * from './Chips';

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

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+export interface IApplyFilterResults {
+    name: string;
+    type: string;
+    value?: string[];
+    min?: number;
+    max?: number;
+}
+export interface IFilterProps {
+    label: string;
+    name: string;
+    type: 'select' | 'range' | string;
+    allowValues?: string[] | number[];
+    min?: number;
+    max?: number;
+}
+interface IFiltersProps {
+    theme?: any;
+    title: string;
+    labelConfirm: string;
+    labelClose: string;
+    filters: IFilterProps[];
+    labelClearAll: string;
+    handleSubmitFilters: (filters: IApplyFilterResults[]) => void;
+}
+export declare const Filters: FC<IFiltersProps>;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const FilterIconArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FiltersArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterOption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/Filters/filtersHelper.d.ts

@@ -0,0 +1,8 @@
+import { ITableHeaderProps, ITableElementProps } from '../Table';
+import { IApplyFilterResults, IFilterProps } from './Filters';
+export declare type TAllowValues = 'string' | 'number';
+export declare const getUniqueValues: (elements: ITableElementProps[], source: string) => string[];
+export declare const getMinValue: (elements: ITableElementProps[], source: string) => number;
+export declare const getMaxValue: (elements: ITableElementProps[], source: string) => number;
+export declare const setTableFilterSet: (headers: ITableHeaderProps[], elements: ITableElementProps[]) => IFilterProps[];
+export declare const applyFiltersToTable: (elements: ITableElementProps[], filters: IApplyFilterResults[]) => ITableElementProps[];

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

@@ -0,0 +1,2 @@
+export * from './Filters';
+export * from './filtersHelper';

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

@@ -24,4 +24,6 @@ export declare const iconsPath: {
     check_circle: string;
     check_box: string;
     check: string;
+    arrow_drop_down: string;
+    arrow_drop_up: string;
 };

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

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { IApplyFilterResults } from '../Filters';
+export interface ITableHeaderProps {
+    name: string;
+    valueSource: string;
+    sort?: boolean;
+    date?: boolean;
+    filter?: boolean;
+    filterType?: 'select' | 'range';
+}
+export interface ITableElementProps {
+    [key: string]: number | string;
+}
+export interface ITableSortProps {
+    name: string;
+    order: string;
+}
+interface ITableProps {
+    theme?: any;
+    headers: ITableHeaderProps[];
+    elements: ITableElementProps[];
+    hover?: boolean;
+    selectable?: boolean;
+    sortable?: boolean;
+    filtrable?: boolean;
+    sort?: ITableSortProps;
+    filters?: IApplyFilterResults[];
+    onRowClick?: (id: string) => void;
+    filtersTitle?: string;
+    filtersConfirmLabel?: string;
+    filtersCancelLabel?: string;
+    filterClearAllLabel?: string;
+    sortClearLabel?: string;
+}
+export declare const Table: FC<ITableProps>;
+export {};