venice-ui 2.4.4 → 2.4.6

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

@@ -29,9 +29,16 @@ const DatePiocker_styles_1 = require("./DatePiocker.styles");
 const date_fns_1 = require("date-fns");
 const Aligment_1 = require("../Aligment");
 const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+    const [tempYear, setTempYear] = (0, react_1.useState)((0, date_fns_1.getYear)(date));
+    const [tempMonth, setTempMonth] = (0, react_1.useState)((0, date_fns_1.getMonth)(date));
+    (0, react_1.useEffect)(() => {
+        setTempYear((0, date_fns_1.getYear)(date));
+        setTempMonth((0, date_fns_1.getMonth)(date));
+    }, [date]);
+    const viewDate = new Date(tempYear, tempMonth, 1);
     const [days, setDays] = (0, react_1.useState)([]);
-    const firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
-    const daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
+    const firstDayOfMonth = (0, date_fns_1.startOfMonth)(viewDate);
+    const daysInMonth = (0, date_fns_1.getDaysInMonth)(viewDate);
     const firstDayIndex = (0, date_fns_1.getDay)(firstDayOfMonth);
     const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
     (0, react_1.useEffect)(() => {
@@ -43,36 +50,46 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
             daysScope.push(j.toString());
         }
         setDays(daysScope);
-    }, [date]);
+    }, [viewDate, beforeIndex, daysInMonth]);
     const setDay = (day) => {
         if (!isNaN(day)) {
-            const newDate = (0, date_fns_1.setDate)(date, day);
+            const newDate = new Date(tempYear, tempMonth, day);
             handleChange(newDate);
         }
     };
     const handleSetMonth = (month) => {
         if (!isNaN(month)) {
-            const newDate = (0, date_fns_1.setMonth)(date, month);
-            handleChange(newDate);
+            setTempMonth(month);
             changeMode('day');
         }
     };
     const handleSetYear = (year) => {
         if (!isNaN(year)) {
-            const newDate = (0, date_fns_1.setYear)(date, year);
-            handleChange(newDate);
+            setTempYear(year);
             changeMode('month');
         }
     };
+    const months = localeLabels?.months ?? [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return (react_1.default.createElement(DatePiocker_styles_1.CalendarContentWrapper, null,
         mode === 'day' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" },
-            react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, null,
-                react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, _item))))),
-            react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((_day) => (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, null,
-                react_1.default.createElement(DatePiocker_styles_1.Day, { active: parseInt(_day) === (0, date_fns_1.getDate)(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
-        mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
-            react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === (0, date_fns_1.getMonth)(date), onClick: () => handleSetMonth(index) }, _month)))))),
-        mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
-            react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === (0, date_fns_1.getYear)(date), onClick: () => handleSetYear(_year) }, _year))))))));
+            react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, weekdays.map((label, idx) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, { key: `wd-${idx}` },
+                react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, label))))),
+            react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((dayStr, idx) => {
+                const dayNum = parseInt(dayStr, 10);
+                const isActive = !isNaN(dayNum) &&
+                    dayNum === (0, date_fns_1.getDate)(date) &&
+                    tempMonth === (0, date_fns_1.getMonth)(date) &&
+                    tempYear === (0, date_fns_1.getYear)(date);
+                return (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, { key: `d-${idx}` },
+                    react_1.default.createElement(DatePiocker_styles_1.Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
+            })))),
+        mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, months.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `m-${index}` },
+            react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
+        mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `y-${_year}` },
+            react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
 };
 exports.CalendarContent = CalendarContent;

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/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/DatePicker/CalendarContent.js

@@ -1,11 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { CalendarContentWrapper, Day, DayLabel, DayLabelWrapper, DaysContent, DaysHeader, DayWrapper, Month, MonthWrapper, } from './DatePiocker.styles';
-import { getDate, getDay, getDaysInMonth, getMonth, getYear, setDate, setMonth, setYear, startOfMonth, } from 'date-fns';
+import { getDate, getDay, getDaysInMonth, getMonth, getYear, startOfMonth, } from 'date-fns';
 import { Aligment } from '../Aligment';
 export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+    const [tempYear, setTempYear] = useState(getYear(date));
+    const [tempMonth, setTempMonth] = useState(getMonth(date));
+    useEffect(() => {
+        setTempYear(getYear(date));
+        setTempMonth(getMonth(date));
+    }, [date]);
+    const viewDate = new Date(tempYear, tempMonth, 1);
     const [days, setDays] = useState([]);
-    const firstDayOfMonth = startOfMonth(date);
-    const daysInMonth = getDaysInMonth(date);
+    const firstDayOfMonth = startOfMonth(viewDate);
+    const daysInMonth = getDaysInMonth(viewDate);
     const firstDayIndex = getDay(firstDayOfMonth);
     const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
     useEffect(() => {
@@ -17,35 +24,45 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
             daysScope.push(j.toString());
         }
         setDays(daysScope);
-    }, [date]);
+    }, [viewDate, beforeIndex, daysInMonth]);
     const setDay = (day) => {
         if (!isNaN(day)) {
-            const newDate = setDate(date, day);
+            const newDate = new Date(tempYear, tempMonth, day);
             handleChange(newDate);
         }
     };
     const handleSetMonth = (month) => {
         if (!isNaN(month)) {
-            const newDate = setMonth(date, month);
-            handleChange(newDate);
+            setTempMonth(month);
             changeMode('day');
         }
     };
     const handleSetYear = (year) => {
         if (!isNaN(year)) {
-            const newDate = setYear(date, year);
-            handleChange(newDate);
+            setTempYear(year);
             changeMode('month');
         }
     };
+    const months = localeLabels?.months ?? [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return (React.createElement(CalendarContentWrapper, null,
         mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
-            React.createElement(DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (React.createElement(DayLabelWrapper, null,
-                React.createElement(DayLabel, null, _item))))),
-            React.createElement(DaysContent, null, days.map((_day) => (React.createElement(DayWrapper, null,
-                React.createElement(Day, { active: parseInt(_day) === getDate(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
-        mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (React.createElement(MonthWrapper, null,
-            React.createElement(Month, { active: index === getMonth(date), onClick: () => handleSetMonth(index) }, _month)))))),
-        mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, null,
-            React.createElement(Month, { active: _year === getYear(date), onClick: () => handleSetYear(_year) }, _year))))))));
+            React.createElement(DaysHeader, null, weekdays.map((label, idx) => (React.createElement(DayLabelWrapper, { key: `wd-${idx}` },
+                React.createElement(DayLabel, null, label))))),
+            React.createElement(DaysContent, null, days.map((dayStr, idx) => {
+                const dayNum = parseInt(dayStr, 10);
+                const isActive = !isNaN(dayNum) &&
+                    dayNum === getDate(date) &&
+                    tempMonth === getMonth(date) &&
+                    tempYear === getYear(date);
+                return (React.createElement(DayWrapper, { key: `d-${idx}` },
+                    React.createElement(Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
+            })))),
+        mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, months.map((_month, index) => (React.createElement(MonthWrapper, { key: `m-${index}` },
+            React.createElement(Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
+        mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, { key: `y-${_year}` },
+            React.createElement(Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
 };

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/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.4",
+  "version": "2.4.6",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",