venice-ui 2.4.1 → 2.4.2

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

@@ -31,14 +31,20 @@ const CalendarHeader_1 = require("./CalendarHeader");
 const date_fns_1 = require("date-fns");
 const CalendarContent_1 = require("./CalendarContent");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex }) => {
-    const [calendarSettings, updateCalendarSettings] = (0, react_1.useState)({
-        mode: 'day',
-        value: 0,
-        date: new Date(),
-        yearsScope: [],
-    });
-    const [selectedDate, setSellectedDate] = (0, react_1.useState)(new Date(value !== undefined ? value : (0, date_fns_1.getTime)(new Date())));
+const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance = false, autoConfirm: autoConfirmProp, labels = { close: 'Close', confirm: 'Select', today: 'Today' }, localeLabels, zIndex }) => {
+    const defaultLocale = {
+        months: [
+            'January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'
+        ],
+        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        firstDayOfWeek: 0,
+    };
+    const effectiveLocale = {
+        months: (localeLabels && localeLabels.months) || defaultLocale.months,
+        weekdaysShort: (localeLabels && localeLabels.weekdaysShort) || defaultLocale.weekdaysShort,
+        firstDayOfWeek: (localeLabels && typeof localeLabels.firstDayOfWeek === 'number') ? localeLabels.firstDayOfWeek : defaultLocale.firstDayOfWeek,
+    };
     const setYearScope = (date) => {
         const year = (0, date_fns_1.getYear)(date);
         const yearIndex = year % 12;
@@ -46,15 +52,28 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex })
         const futureYears = Array.from({ length: 12 - yearIndex - 1 }, (_, i) => year + (i + 1));
         return [...pastYears, year, ...futureYears];
     };
+    const effectiveAutoConfirm = isAdvance
+        ? false
+        : (typeof autoConfirmProp !== 'undefined' ? Boolean(autoConfirmProp) : true);
+    const [calendarSettings, updateCalendarSettings] = (0, react_1.useState)(() => {
+        const initialDate = value !== undefined ? new Date(value) : new Date();
+        return {
+            mode: 'day',
+            value: (0, date_fns_1.getTime)(initialDate),
+            date: initialDate,
+            yearsScope: setYearScope(initialDate),
+        };
+    });
+    const [selectedDate, setSellectedDate] = (0, react_1.useState)(() => (value !== undefined ? new Date(value) : new Date()));
     (0, react_1.useEffect)(() => {
-        value !== undefined ? value : (0, date_fns_1.getTime)(new Date()),
-            updateCalendarSettings({
-                ...calendarSettings,
-                value: (0, date_fns_1.getTime)(new Date(selectedDate)),
-                date: selectedDate,
-                yearsScope: setYearScope(selectedDate),
-            });
-    }, [value, selectedDate]);
+        updateCalendarSettings((prev) => ({
+            ...prev,
+            value: (0, date_fns_1.getTime)(selectedDate),
+            date: selectedDate,
+            yearsScope: setYearScope(selectedDate),
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedDate]);
     const setPeriod = (mode, forward) => {
         const operations = {
             day: forward ? date_fns_1.addMonths : date_fns_1.subMonths,
@@ -72,11 +91,14 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex })
         });
     };
     const setNewDate = (newDate) => {
-        console.log('setNewDate', newDate);
         setSellectedDate(newDate);
+        if (effectiveAutoConfirm && handleSelect) {
+            handleSelect((0, date_fns_1.getTime)(newDate));
+            handleClose && handleClose();
+        }
     };
     const confirmDate = () => {
-        handleSelect((0, date_fns_1.getTime)(new Date(selectedDate)));
+        handleSelect((0, date_fns_1.getTime)(selectedDate));
     };
     const setToday = () => {
         setSellectedDate(new Date());
@@ -84,9 +106,9 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex })
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
-                react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
-                react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
-                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
+                react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
+                react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
+                isAdvance && (react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: labels.close || 'Close', labelConfirm: labels.confirm || 'Select', labelAdditional: labels.today || 'Today', additionaNormalMode: true })))),
         react_1.default.createElement(DatePiocker_styles_1.CalendarOverlay, { zIndex: zIndex })));
 };
 exports.Calendar = Calendar;

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

@@ -28,7 +28,7 @@ const react_1 = __importStar(require("react"));
 const DatePiocker_styles_1 = require("./DatePiocker.styles");
 const date_fns_1 = require("date-fns");
 const Aligment_1 = require("../Aligment");
-const CalendarContent = ({ date, handleChange, changeMode, mode, yearsScope, }) => {
+const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
     const [days, setDays] = (0, react_1.useState)([]);
     const firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
     const daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
@@ -64,28 +64,13 @@ const CalendarContent = ({ date, handleChange, changeMode, mode, yearsScope, })
             changeMode('month');
         }
     };
-    const daysName = ['Pon', 'Wt', 'Śr', 'Cz', 'P', 'Sob', 'Nd'];
-    const monthNames = [
-        'styczeń',
-        'luty',
-        'marzec',
-        'kwiecień',
-        'maj',
-        'czerwiec',
-        'lipiec',
-        'sierpień',
-        'wrzesień',
-        'październik',
-        'listopad',
-        'grudzień',
-    ];
     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, daysName.map((_item) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, null,
+            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" }, monthNames.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
+        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))))))));

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

@@ -10,8 +10,7 @@ const Aligment_1 = require("../Aligment");
 const Icons_1 = require("../Icons");
 const Typography_1 = require("../Typography");
 const date_fns_1 = require("date-fns");
-const locale_1 = require("date-fns/locale");
-const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, }) => {
+const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, localeLabels, }) => {
     const prev = () => {
         handleChange(mode, false);
     };
@@ -21,11 +20,18 @@ const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, })
     const setMode = (mode) => {
         handleSelect(mode);
     };
+    const defaultMonths = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    const months = (localeLabels && localeLabels.months && localeLabels.months.length === 12)
+        ? localeLabels.months
+        : defaultMonths;
     return (react_1.default.createElement(DatePiocker_styles_1.CalendarHeaderWrapper, null,
         react_1.default.createElement(Aligment_1.Aligment, null,
             react_1.default.createElement(Icons_1.Icon, { name: 'back', onClick: prev }),
             react_1.default.createElement(DatePiocker_styles_1.CalendarHeaderTexts, null,
-                mode === 'day' && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: () => setMode('month') }, (0, date_fns_1.format)(date, 'LLLL', { locale: locale_1.pl }))),
+                mode === 'day' && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: () => setMode('month') }, months[date.getMonth()])),
                 mode === 'year' ? (react_1.default.createElement(Typography_1.Text, null, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (react_1.default.createElement(Typography_1.Text, { action: true, onClick: () => setMode('year') }, (0, date_fns_1.getYear)(date)))),
             react_1.default.createElement(Icons_1.Icon, { name: 'forward', onClick: next }))));
 };

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

@@ -35,7 +35,7 @@ const react_dom_1 = require("react-dom");
 const Calendar_1 = require("./Calendar");
 const date_fns_1 = require("date-fns");
 const Icons_1 = require("../Icons");
-const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
+const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex, calendarLabels, localeLabels, isAdvance = true }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const sourceRef = (0, react_1.useRef)(null);
     const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
@@ -71,6 +71,6 @@ const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = fals
                 value && (react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
                     react_1.default.createElement(Icons_1.Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                 open &&
-                    (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit, zIndex: zIndex }), document.body)))))));
+                    (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), value: value, handleSelect: onSubmit, isAdvance: isAdvance, zIndex: zIndex, labels: calendarLabels, localeLabels: localeLabels }), document.body)))))));
 };
 exports.DatePicker = DatePicker;

package/dist/esm/components/DatePicker/Calendar.js

@@ -5,14 +5,20 @@ import { CalendarHeader } from './CalendarHeader';
 import { addMonths, addYears, getTime, getYear, subMonths, subYears, } from 'date-fns';
 import { CalendarContent } from './CalendarContent';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex }) => {
-    const [calendarSettings, updateCalendarSettings] = useState({
-        mode: 'day',
-        value: 0,
-        date: new Date(),
-        yearsScope: [],
-    });
-    const [selectedDate, setSellectedDate] = useState(new Date(value !== undefined ? value : getTime(new Date())));
+export const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance = false, autoConfirm: autoConfirmProp, labels = { close: 'Close', confirm: 'Select', today: 'Today' }, localeLabels, zIndex }) => {
+    const defaultLocale = {
+        months: [
+            'January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'
+        ],
+        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        firstDayOfWeek: 0,
+    };
+    const effectiveLocale = {
+        months: (localeLabels && localeLabels.months) || defaultLocale.months,
+        weekdaysShort: (localeLabels && localeLabels.weekdaysShort) || defaultLocale.weekdaysShort,
+        firstDayOfWeek: (localeLabels && typeof localeLabels.firstDayOfWeek === 'number') ? localeLabels.firstDayOfWeek : defaultLocale.firstDayOfWeek,
+    };
     const setYearScope = (date) => {
         const year = getYear(date);
         const yearIndex = year % 12;
@@ -20,15 +26,28 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zI
         const futureYears = Array.from({ length: 12 - yearIndex - 1 }, (_, i) => year + (i + 1));
         return [...pastYears, year, ...futureYears];
     };
+    const effectiveAutoConfirm = isAdvance
+        ? false
+        : (typeof autoConfirmProp !== 'undefined' ? Boolean(autoConfirmProp) : true);
+    const [calendarSettings, updateCalendarSettings] = useState(() => {
+        const initialDate = value !== undefined ? new Date(value) : new Date();
+        return {
+            mode: 'day',
+            value: getTime(initialDate),
+            date: initialDate,
+            yearsScope: setYearScope(initialDate),
+        };
+    });
+    const [selectedDate, setSellectedDate] = useState(() => (value !== undefined ? new Date(value) : new Date()));
     useEffect(() => {
-        value !== undefined ? value : getTime(new Date()),
-            updateCalendarSettings({
-                ...calendarSettings,
-                value: getTime(new Date(selectedDate)),
-                date: selectedDate,
-                yearsScope: setYearScope(selectedDate),
-            });
-    }, [value, selectedDate]);
+        updateCalendarSettings((prev) => ({
+            ...prev,
+            value: getTime(selectedDate),
+            date: selectedDate,
+            yearsScope: setYearScope(selectedDate),
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedDate]);
     const setPeriod = (mode, forward) => {
         const operations = {
             day: forward ? addMonths : subMonths,
@@ -46,11 +65,14 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zI
         });
     };
     const setNewDate = (newDate) => {
-        console.log('setNewDate', newDate);
         setSellectedDate(newDate);
+        if (effectiveAutoConfirm && handleSelect) {
+            handleSelect(getTime(newDate));
+            handleClose && handleClose();
+        }
     };
     const confirmDate = () => {
-        handleSelect(getTime(new Date(selectedDate)));
+        handleSelect(getTime(selectedDate));
     };
     const setToday = () => {
         setSellectedDate(new Date());
@@ -58,8 +80,8 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zI
     return (React.createElement(React.Fragment, null,
         React.createElement(CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
             React.createElement(Aligment, { direction: "row" },
-                React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
-                React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
-                React.createElement(ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
+                React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
+                React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
+                isAdvance && (React.createElement(ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: labels.close || 'Close', labelConfirm: labels.confirm || 'Select', labelAdditional: labels.today || 'Today', additionaNormalMode: true })))),
         React.createElement(CalendarOverlay, { zIndex: zIndex })));
 };

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

@@ -2,7 +2,7 @@ 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 { Aligment } from '../Aligment';
-export const CalendarContent = ({ date, handleChange, changeMode, mode, yearsScope, }) => {
+export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
     const [days, setDays] = useState([]);
     const firstDayOfMonth = startOfMonth(date);
     const daysInMonth = getDaysInMonth(date);
@@ -38,28 +38,13 @@ export const CalendarContent = ({ date, handleChange, changeMode, mode, yearsSco
             changeMode('month');
         }
     };
-    const daysName = ['Pon', 'Wt', 'Śr', 'Cz', 'P', 'Sob', 'Nd'];
-    const monthNames = [
-        'styczeń',
-        'luty',
-        'marzec',
-        'kwiecień',
-        'maj',
-        'czerwiec',
-        'lipiec',
-        'sierpień',
-        'wrzesień',
-        'październik',
-        'listopad',
-        'grudzień',
-    ];
     return (React.createElement(CalendarContentWrapper, null,
         mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
-            React.createElement(DaysHeader, null, daysName.map((_item) => (React.createElement(DayLabelWrapper, null,
+            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" }, monthNames.map((_month, index) => (React.createElement(MonthWrapper, null,
+        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))))))));

package/dist/esm/components/DatePicker/CalendarHeader.js

@@ -3,9 +3,8 @@ import { CalendarHeaderTexts, CalendarHeaderWrapper, } from './DatePiocker.style
 import { Aligment } from '../Aligment';
 import { Icon } from '../Icons';
 import { Text } from '../Typography';
-import { format, getYear } from 'date-fns';
-import { pl } from 'date-fns/locale';
-export const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, }) => {
+import { getYear } from 'date-fns';
+export const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, localeLabels, }) => {
     const prev = () => {
         handleChange(mode, false);
     };
@@ -15,11 +14,18 @@ export const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSel
     const setMode = (mode) => {
         handleSelect(mode);
     };
+    const defaultMonths = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    const months = (localeLabels && localeLabels.months && localeLabels.months.length === 12)
+        ? localeLabels.months
+        : defaultMonths;
     return (React.createElement(CalendarHeaderWrapper, null,
         React.createElement(Aligment, null,
             React.createElement(Icon, { name: 'back', onClick: prev }),
             React.createElement(CalendarHeaderTexts, null,
-                mode === 'day' && (React.createElement(Text, { action: true, onClick: () => setMode('month') }, format(date, 'LLLL', { locale: pl }))),
+                mode === 'day' && (React.createElement(Text, { action: true, onClick: () => setMode('month') }, months[date.getMonth()])),
                 mode === 'year' ? (React.createElement(Text, null, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (React.createElement(Text, { action: true, onClick: () => setMode('year') }, getYear(date)))),
             React.createElement(Icon, { name: 'forward', onClick: next }))));
 };

package/dist/esm/components/DatePicker/DatePicker.js

@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
 import { Calendar } from './Calendar';
 import { format } from 'date-fns';
 import { Icon } from '../Icons';
-export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
+export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex, calendarLabels, localeLabels, isAdvance = true }) => {
     const [open, toogleOpen] = useState(false);
     const sourceRef = useRef(null);
     const [dropdownStyles, setDropdownStyles] = useState({
@@ -45,5 +45,5 @@ export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled
                 value && (React.createElement(EyeIconWrapper, { size: size },
                     React.createElement(Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                 open &&
-                    createPortal(React.createElement(Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit, zIndex: zIndex }), document.body)))))));
+                    createPortal(React.createElement(Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), value: value, handleSelect: onSubmit, isAdvance: isAdvance, zIndex: zIndex, labels: calendarLabels, localeLabels: localeLabels }), document.body)))))));
 };

package/dist/types/components/DatePicker/Calendar.d.ts

@@ -4,10 +4,21 @@ interface ICalendar {
     value: number | undefined;
     top: number;
     left: number;
+    labels?: {
+        close?: string;
+        confirm?: string;
+        today?: string;
+    };
+    localeLabels?: {
+        months?: string[];
+        weekdaysShort?: string[];
+        firstDayOfWeek?: number;
+    };
     size: InputSize;
     handleClose: () => void;
     handleSelect: (date: number) => void;
-    open: boolean;
+    isAdvance?: boolean;
+    autoConfirm?: boolean;
     zIndex?: number;
 }
 export declare const Calendar: FC<ICalendar>;

package/dist/types/components/DatePicker/CalendarContent.d.ts

@@ -1,10 +1,15 @@
 import { FC } from 'react';
 interface ICalendarContent {
     date: Date;
-    handleChange: (newDate: Date) => void;
-    changeMode: (mode: string) => void;
     mode: string;
+    handleChange: (d: Date) => void;
+    changeMode: (mode: string) => void;
     yearsScope: number[];
+    localeLabels?: {
+        months?: string[];
+        weekdaysShort?: string[];
+        firstDayOfWeek?: number;
+    };
 }
 export declare const CalendarContent: FC<ICalendarContent>;
 export {};

package/dist/types/components/DatePicker/CalendarHeader.d.ts

@@ -5,6 +5,11 @@ interface ICalendarHeader {
     yearsScope: number[];
     handleChange: (mode: string, forward: boolean) => void;
     handleSelect: (mode: string) => void;
+    localeLabels?: {
+        months?: string[];
+        weekdaysShort?: string[];
+        firstDayOfWeek?: number;
+    };
 }
 export declare const CalendarHeader: FC<ICalendarHeader>;
 export {};

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

@@ -5,5 +5,16 @@ export interface IDatePicker extends IFormElement {
     position?: string;
     handleChange: (name: string, value: string | number | undefined) => void;
     zIndex?: number;
+    calendarLabels?: {
+        close?: string;
+        confirm?: string;
+        today?: string;
+    };
+    localeLabels?: {
+        months?: string[];
+        weekdaysShort?: string[];
+        firstDayOfWeek?: number;
+    };
+    isAdvance?: boolean;
 }
 export declare const DatePicker: FC<IDatePicker>;

package/package.json

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