venice-ui 2.4.3 → 2.4.5

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

@@ -31,7 +31,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(), disabled: actionDisabled }),
-                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
+                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/Modal/Modal.js

@@ -31,7 +31,7 @@ const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, }) => {
+const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
     (0, react_1.useEffect)(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -47,7 +47,7 @@ const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfi
     }, [isOpen]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
-            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
+            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size, decorativeEdge: decorativeEdge },
                 react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 react_1.default.createElement(common_1.ScrollCotainer, null, children),
                 react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));

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

@@ -32,8 +32,8 @@ exports.ModalElement = styled_components_1.default.div `
   position: relative;
   max-width: 60rem;
   box-shadow: ${Theme_1.Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px`}
-  ${p => p.size === 'medium' && `max-width:750px`}
-  ${p => p.size === 'large' && `max-width:100%`}
-
+  ${p => p.size === 'small' && `max-width:500px;`}
+  ${p => p.size === 'medium' && `max-width:750px;`}
+  ${p => p.size === 'large' && `max-width:100%;`}
+  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
 `;

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

@@ -34,16 +34,21 @@ const Cell_1 = require("./Cell");
 const Pagination_1 = require("../Pagination");
 const Filters_1 = require("../Filters");
 const Typography_1 = require("../Typography");
-const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
+const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
     name: '',
     order: 'none',
 }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
     const initialElementsRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
+        if (!initialElementsRef.current &&
+            Array.isArray(elements) &&
+            elements.length > 0) {
             initialElementsRef.current = elements.slice();
         }
-        setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
+        setTableProps((prev) => ({
+            ...prev,
+            elements: Array.isArray(elements) ? elements : [],
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [elements]);
     const checkHeaders = () => {
@@ -99,21 +104,40 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
             elements: filteredElements,
         }));
         setCurrentPage(1);
-        setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
+        setNoResultsMessage(filteredElements && filteredElements.length === 0
+            ? 'Nie ma żadnych wyników'
+            : null);
     }, [setCurrentPage, setTableProps]);
     const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
     const handleClearFilters = (0, react_1.useCallback)(() => {
         setFiltersClearSignal((s) => s + 1);
-        const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
+        const full = initialElementsRef.current && initialElementsRef.current.length > 0
             ? initialElementsRef.current
-            : (Array.isArray(elements) ? elements : []);
-        setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
+            : Array.isArray(elements)
+                ? elements
+                : [];
+        setTableProps((prev) => ({
+            ...prev,
+            elements: Array.isArray(full) ? full.slice() : [],
+        }));
         setCurrentPage(1);
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
-            react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
+        filtrable && (react_1.default.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 12,
+                marginBottom: 12,
+            } },
+            react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current &&
+                    initialElementsRef.current.length > 0
+                    ? initialElementsRef.current
+                    : elements, fullElements: initialElementsRef.current &&
+                    initialElementsRef.current.length > 0
+                    ? initialElementsRef.current
+                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
         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 }))))),

package/dist/cjs/components/Tile/Tile.js

@@ -8,8 +8,8 @@ const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
 const Theme_1 = require("../../Theme");
-const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
+    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
         title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };

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

@@ -16,12 +16,13 @@ exports.TileElement = styled_components_1.default.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
-  height:${p => p.height};
+  height: ${(p) => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme_1.Theme.shadow.s}
   `}
-  ${(p) => p.size === 'small' && `max-width:500px`}
-  ${(p) => p.size === 'medium' && `max-width:750px`}
-  ${(p) => p.size === 'large' && `max-width:100%`}
+  ${(p) => p.size === 'small' && `max-width:500px;`}
+  ${(p) => p.size === 'medium' && `max-width:750px;`}
+  ${(p) => p.size === 'large' && `max-width:100%;`}
+  ${(p) => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
 `;

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

@@ -25,7 +25,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(), disabled: actionDisabled }),
-                options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
+                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/Modal/Modal.js

@@ -5,7 +5,7 @@ import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 import { ThemeProvider } from 'styled-components';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, }) => {
+export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -21,7 +21,7 @@ export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfir
     }, [isOpen]);
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
-            React.createElement(ModalElement, { size: size },
+            React.createElement(ModalElement, { size: size, decorativeEdge: decorativeEdge },
                 React.createElement(ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 React.createElement(ScrollCotainer, null, children),
                 React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));

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

@@ -26,8 +26,8 @@ export const ModalElement = styled.div `
   position: relative;
   max-width: 60rem;
   box-shadow: ${Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px`}
-  ${p => p.size === 'medium' && `max-width:750px`}
-  ${p => p.size === 'large' && `max-width:100%`}
-
+  ${p => p.size === 'small' && `max-width:500px;`}
+  ${p => p.size === 'medium' && `max-width:750px;`}
+  ${p => p.size === 'large' && `max-width:100%;`}
+  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme.colors.primary};`}
 `;

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

@@ -8,16 +8,21 @@ import { Cell } from './Cell';
 import { Pagination } from '../Pagination';
 import { Filters } from '../Filters';
 import { TextAccent } from '../Typography';
-export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
+export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
     name: '',
     order: 'none',
 }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
     const initialElementsRef = useRef(null);
     useEffect(() => {
-        if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
+        if (!initialElementsRef.current &&
+            Array.isArray(elements) &&
+            elements.length > 0) {
             initialElementsRef.current = elements.slice();
         }
-        setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
+        setTableProps((prev) => ({
+            ...prev,
+            elements: Array.isArray(elements) ? elements : [],
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [elements]);
     const checkHeaders = () => {
@@ -73,21 +78,40 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
             elements: filteredElements,
         }));
         setCurrentPage(1);
-        setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
+        setNoResultsMessage(filteredElements && filteredElements.length === 0
+            ? 'Nie ma żadnych wyników'
+            : null);
     }, [setCurrentPage, setTableProps]);
     const [filtersClearSignal, setFiltersClearSignal] = useState(0);
     const handleClearFilters = useCallback(() => {
         setFiltersClearSignal((s) => s + 1);
-        const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
+        const full = initialElementsRef.current && initialElementsRef.current.length > 0
             ? initialElementsRef.current
-            : (Array.isArray(elements) ? elements : []);
-        setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
+            : Array.isArray(elements)
+                ? elements
+                : [];
+        setTableProps((prev) => ({
+            ...prev,
+            elements: Array.isArray(full) ? full.slice() : [],
+        }));
         setCurrentPage(1);
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
-            React.createElement(Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
+        filtrable && (React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 12,
+                marginBottom: 12,
+            } },
+            React.createElement(Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current &&
+                    initialElementsRef.current.length > 0
+                    ? initialElementsRef.current
+                    : elements, fullElements: initialElementsRef.current &&
+                    initialElementsRef.current.length > 0
+                    ? initialElementsRef.current
+                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
         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 }))))),

package/dist/esm/components/Tile/Tile.js

@@ -2,8 +2,8 @@ import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
 import { mainTheme } from '../../Theme';
-export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
+    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
         title && (React.createElement(ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };

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

@@ -10,12 +10,13 @@ export const TileElement = styled.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
-  height:${p => p.height};
+  height: ${(p) => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme.shadow.s}
   `}
-  ${(p) => p.size === 'small' && `max-width:500px`}
-  ${(p) => p.size === 'medium' && `max-width:750px`}
-  ${(p) => p.size === 'large' && `max-width:100%`}
+  ${(p) => p.size === 'small' && `max-width:500px;`}
+  ${(p) => p.size === 'medium' && `max-width:750px;`}
+  ${(p) => p.size === 'large' && `max-width:100%;`}
+  ${(p) => p.decorativeEdge && `border-left: 4px solid ${Theme.colors.primary};`}
 `;

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

@@ -19,5 +19,6 @@ export interface IModalProps {
     additionaNormalMode?: boolean;
     exitOnEsc?: boolean;
     additionDisabled?: boolean;
+    decorativeEdge?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

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

@@ -1,6 +1,7 @@
 export declare const ModalOverlayer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IModalElementProp {
     size: string;
+    decorativeEdge: boolean;
     theme: any;
 }
 export declare const ModalElement: import("styled-components").StyledComponent<"div", any, IModalElementProp, never>;

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

@@ -8,5 +8,6 @@ export interface ITileProps {
     height?: string;
     theme?: any;
     headerDivader?: boolean;
+    decorativeEdge?: boolean;
 }
 export declare const Tile: FC<ITileProps>;

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

@@ -3,6 +3,7 @@ interface ITileElementStyle {
     shadow: boolean;
     backgroundColor: string;
     height: string;
+    decorativeEdge: boolean;
 }
 export declare const TileElement: import("styled-components").StyledComponent<"div", any, ITileElementStyle, never>;
 export {};

package/package.json

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