@uxf/ui 11.60.1 → 11.61.0

package/calendar/calendar-navigation.d.ts

@@ -2,7 +2,8 @@ import { FC } from "react";
 import { ButtonProps } from "../button";
 export interface CalendarNavigationProps {
     prevButtonProps: ButtonProps;
-    selectButtonProps: ButtonProps;
+    monthButtonProps: ButtonProps;
+    yearButtonProps: ButtonProps;
     nextButtonProps: ButtonProps;
 }
 export declare const CalendarNavigation: FC<CalendarNavigationProps>;

package/calendar/calendar-navigation.js

@@ -9,11 +9,18 @@ const button_1 = require("../button");
 const icon_1 = require("../icon");
 const CalendarNavigation = (props) => {
     return (react_1.default.createElement("div", { className: "uxf-calendar-navigation" },
-        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.prevButtonProps },
-            react_1.default.createElement(icon_1.Icon, { name: "arrow-left", size: 16 })),
-        props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { color: "default", size: "sm", variant: "text", ...props.selectButtonProps })) : (react_1.default.createElement("p", { className: "uxf-calendar-navigation__title" }, props.selectButtonProps.children)),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.nextButtonProps },
-            react_1.default.createElement(icon_1.Icon, { name: "arrow-right", size: 16 }))));
+        react_1.default.createElement("div", { className: "uxf-calendar-navigation__month-year-buttons-wrapper" },
+            react_1.default.createElement(button_1.Button, { className: "uxf-calendar-navigation__month-button", color: "default", size: "sm", variant: "text", ...props.monthButtonProps },
+                props.monthButtonProps.children,
+                react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16 })),
+            react_1.default.createElement(button_1.Button, { className: "uxf-calendar-navigation__year-button", color: "default", size: "sm", variant: "text", ...props.yearButtonProps },
+                props.yearButtonProps.children,
+                react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16 }))),
+        react_1.default.createElement("div", { className: "uxf-calendar-navigation__prev-next-buttons-wrapper" },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "text", ...props.prevButtonProps },
+                react_1.default.createElement(icon_1.Icon, { name: "angle-left", size: 16 })),
+            react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "text", ...props.nextButtonProps },
+                react_1.default.createElement(icon_1.Icon, { name: "angle-right", size: 16 })))));
 };
 exports.CalendarNavigation = CalendarNavigation;
 exports.CalendarNavigation.displayName = "UxfUiCalendarNavigation";

package/css/calendar.css

@@ -252,15 +252,22 @@
     justify-content: space-between;
     margin-bottom: theme("spacing.4");
 
-    &__title {
-        @apply text-lightMedium is-hoverable:text-lightHigh;
+    &__year-button,
+    &__month-button {
+        gap: theme("spacing.1");
 
-        font-size: 14px;
-        font-weight: theme("fontWeight.medium");
-        text-align: center;
-
-        :root .dark & {
-            @apply text-darkMedium is-hoverable:text-darkHigh;
+        &.is-disabled {
+            background-color: theme("colors.neutral_surface_muted");
+            color: theme("colors.base_text_high_emphasis");
         }
     }
+
+    &__prev-next-buttons-wrapper {
+        display: flex;
+    }
+
+    &__month-year-buttons-wrapper {
+        display: flex;
+        gap: theme("spacing.2");
+    }
 }

package/css/date-range-picker.css

@@ -1,5 +1,10 @@
 .uxf-date-range-picker {
     margin: 0 auto;
+    min-width: 296px;
+
+    @screen sm {
+        min-width: 340px;
+    }
 
     &__months {
         display: flex;

package/date-picker/date-picker-content.d.ts

@@ -1,8 +1,10 @@
 import type { MonthType } from "@uxf/datepicker/utils/types";
 import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
+import { CustomButtonTitles } from "./types";
 export interface DatePickerContentProps {
     bottomContent?: ReactNode;
     onMonthChange?: (months: MonthType[]) => void;
     style?: CSSProperties;
+    customButtonTitles?: CustomButtonTitles;
 }
 export declare const DatePickerContent: FC<PropsWithChildren<DatePickerContentProps>>;

package/date-picker/date-picker-content.js

@@ -45,10 +45,10 @@ const DatePickerContent = (props) => {
         setViewMode("year");
     }, [goToDate, setViewMode]);
     const datePickerComponents = (0, react_1.useMemo)(() => ({
-        month: activeMonths.map((month) => (react_1.default.createElement(date_picker_month_1.DatePickerMonth, { key: `${month.year}-${month.month}`, onMonthChange: onMonthChange, setViewMode: setViewMode }))),
-        year: react_1.default.createElement(date_picker_year_1.DatePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
-        decade: react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
-    }), [activeMonths, onYearSelect, onMonthChange, onMonthSelect, onDecadeYearSelect]);
+        month: activeMonths.map((month) => (react_1.default.createElement(date_picker_month_1.DatePickerMonth, { customButtonTitles: props.customButtonTitles, key: `${month.year}-${month.month}`, onMonthChange: onMonthChange, setViewMode: setViewMode }))),
+        year: (react_1.default.createElement(date_picker_year_1.DatePickerYear, { customButtonTitles: props.customButtonTitles, onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect })),
+        decade: (react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { customButtonTitles: props.customButtonTitles, onYearSelect: (date) => onDecadeYearSelect(date), setViewMode: setViewMode })),
+    }), [activeMonths, props.customButtonTitles, onYearSelect, onMonthChange, onMonthSelect, onDecadeYearSelect]);
     return (react_1.default.createElement("div", { className: "uxf-date-picker", style: props.style },
         props.children,
         datePickerComponents[viewMode],

package/date-picker/date-picker-decade.d.ts

@@ -1,6 +1,9 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles, ViewModeType } from "./types";
 interface DatePickerDecadeProps {
+    customButtonTitles?: CustomButtonTitles;
     onYearSelect: (date: Date) => void;
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
 }
 export declare const DatePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
 export {};

package/date-picker/date-picker-decade.js

@@ -31,15 +31,17 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerDecade = (0, react_1.memo)((props) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { onYearSelect } = props;
-    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths, firstDayOfWeek, selectedDate } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
-    const { decadeLabel, years } = (0, use_decade_1.useDecade)({
+    const currentMonth = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : new Date().getMonth();
+    const { years } = (0, use_decade_1.useDecade)({
         year: currentYear,
     });
     const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
@@ -59,16 +61,29 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
             onYearSelect(date);
         }
     }, [canGoToYear, onYearSelect]);
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        year: currentYear,
+    });
+    const handleSetMonthViewMode = (0, react_1.useCallback)(() => props.setViewMode("year"), [props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleSetMonthViewMode,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : "Vybrat měsíc",
+            }, nextButtonProps: {
                 onClick: handleGoToNextDecadeClick,
-                title: "Vpřed",
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextDecade) !== null && _h !== void 0 ? _h : "Vpřed",
             }, prevButtonProps: {
                 onClick: handleGoToPrevDecadeClick,
-                title: "Zpět",
-            }, selectButtonProps: {
-                children: decadeLabel,
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevDecade) !== null && _k !== void 0 ? _k : "Zpět",
+            }, yearButtonProps: {
+                children: currentYear,
+                isDisabled: true,
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === (0, dayjs_1.default)(selectedDate).year() && "uxf-calendar__cell--selected"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

package/date-picker/date-picker-month.d.ts

@@ -1,9 +1,10 @@
 import type { MonthType } from "@uxf/datepicker/utils/types";
 import React, { Dispatch, SetStateAction } from "react";
-import { ViewModeType } from "./types";
+import { CustomButtonTitles, ViewModeType } from "./types";
 interface DatePickerMonthProps {
     onMonthChange?: (months: MonthType[]) => void;
     setViewMode: Dispatch<SetStateAction<ViewModeType>>;
+    customButtonTitles?: CustomButtonTitles;
 }
 export declare const DatePickerMonth: React.NamedExoticComponent<DatePickerMonthProps>;
 export {};

package/date-picker/date-picker-month.js

@@ -33,7 +33,7 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerMonth = (0, react_1.memo)((props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { setViewMode } = props;
     const datePickerProps = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const onMonthChange = props.onMonthChange;
@@ -44,7 +44,7 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
         dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
         weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
         year: currentYear,
     });
@@ -59,19 +59,26 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
     const handleMonthClick = (0, react_1.useCallback)(() => {
         setViewMode("year");
     }, [setViewMode]);
+    const handleSetYearViewModeClick = (0, react_1.useCallback)(() => {
+        setViewMode("decade");
+    }, [setViewMode]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : "Vybrat měsíc",
+            }, nextButtonProps: {
                 isDisabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
-                title: "Nadcházející měsíc",
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextMonth) !== null && _h !== void 0 ? _h : "Nadcházející měsíc",
             }, prevButtonProps: {
                 isDisabled: !canGoToPrevMonth,
                 onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
-                title: "Předchozí měsíc",
-            }, selectButtonProps: {
-                children: monthLabel,
-                onClick: handleMonthClick,
-                title: "Vybrat měsíc",
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevMonth) !== null && _k !== void 0 ? _k : "Předchozí měsíc",
+            }, yearButtonProps: {
+                children: currentYear,
+                onClick: handleSetYearViewModeClick,
+                title: (_m = (_l = props.customButtonTitles) === null || _l === void 0 ? void 0 : _l.selectYear) !== null && _m !== void 0 ? _m : "Vybrat rok",
             } }),
         react_1.default.createElement(calendar_1.Calendar, { datePickerProps: datePickerProps })));
 });

package/date-picker/date-picker-year.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
+import { CustomButtonTitles } from "./types";
 interface DatePickerYearProps {
+    customButtonTitles?: CustomButtonTitles;
     onMonthSelect: (date: Date) => void;
     onYearSelect: () => void;
 }

package/date-picker/date-picker-year.js

@@ -30,19 +30,28 @@ exports.DatePickerYear = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerYear = (0, react_1.memo)((props) => {
-    var _a, _b;
-    const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
-    const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths, firstDayOfWeek, selectedDate, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
+    const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { months, yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
         yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
         monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
     });
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        year: currentYear,
+    });
     const handleGoToNextYear = (0, react_1.useCallback)(() => {
         if (canGoToNextYear) {
             goToNextYear(1);
@@ -62,19 +71,24 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
         }
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                isDisabled: true,
+            }, nextButtonProps: {
                 isDisabled: !canGoToNextYear,
                 onClick: canGoToNextYear ? handleGoToNextYear : undefined,
-                title: "Nadcházející rok",
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.nextYear) !== null && _f !== void 0 ? _f : "Nadcházející rok",
             }, prevButtonProps: {
                 isDisabled: !canGoToPrevYear,
                 onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
-                title: "Předchozí rok",
-            }, selectButtonProps: {
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.prevYear) !== null && _h !== void 0 ? _h : "Předchozí rok",
+            }, yearButtonProps: {
                 children: yearLabel,
                 onClick: handleYearClick,
-                title: "Vybrat rok",
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : "Vybrat rok",
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === (0, dayjs_1.default)(selectedDate).month() &&
+                (0, dayjs_1.default)(month.date).year() === (0, dayjs_1.default)(selectedDate).year() &&
+                "uxf-calendar__cell--selected"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "UxfUiDatePickerYear";

package/date-picker/date-picker.d.ts

@@ -1,9 +1,11 @@
 import { OnDateChangeType } from "@uxf/datepicker/hooks/use-date-picker";
 import { DatesConfig, type MonthType } from "@uxf/datepicker/utils/types";
 import { CSSProperties, FC, ReactNode } from "react";
+import { CustomButtonTitles } from "./types";
 export interface DatePickerProps {
     bottomContent?: ReactNode;
     closePopoverHandler?: () => void;
+    customButtonTitles?: CustomButtonTitles;
     datesConfig?: DatesConfig[];
     maxDate?: Date;
     minDate?: Date;

package/date-picker/date-picker.js

@@ -25,7 +25,7 @@ const DatePicker = (props) => {
         unavailableDates: props.unavailableDates,
     });
     return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
-        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent, onMonthChange: props.onMonthChange, style: props.style })));
+        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent, customButtonTitles: props.customButtonTitles, onMonthChange: props.onMonthChange, style: props.style })));
 };
 exports.DatePicker = DatePicker;
 exports.DatePicker.displayName = "UxfUiDatePicker";

package/date-picker/types.d.ts

@@ -1 +1,11 @@
 export type ViewModeType = "month" | "year" | "decade";
+export type CustomButtonTitles = {
+    nextMonth?: string;
+    prevMonth?: string;
+    nextDecade?: string;
+    prevDecade?: string;
+    nextYear?: string;
+    prevYear?: string;
+    selectMonth?: string;
+    selectYear?: string;
+};

package/date-picker-input/date-picker-input.d.ts

@@ -1,12 +1,14 @@
 import { DatesConfig, type MonthType } from "@uxf/datepicker/utils/types";
 import React, { CSSProperties, ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
+import { CustomButtonTitles } from "../date-picker/types";
 export declare const ALLOWED_DATE_FORMAT: string[];
 export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
 export declare const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
 export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     allowedDateFormats?: string[];
     bottomContent?: ReactNode;
+    customButtonTitles?: CustomButtonTitles;
     datesConfig?: DatesConfig[];
     displayDateFormat?: string;
     maxDate?: string;

package/date-picker-input/date-picker-input.js

@@ -83,6 +83,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, customButtonTitles: props.customButtonTitles, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/date-picker-input/date-picker-input.stories.js

@@ -32,7 +32,16 @@ function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { customButtonTitles: {
+                selectMonth: "Select month",
+                selectYear: "Select year",
+                nextMonth: "Next month",
+                prevMonth: "Previous month",
+                nextDecade: "Next decade",
+                prevDecade: "Previous decade",
+                nextYear: "Next year",
+                prevYear: "Previous year",
+            }, id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv, vlastn\u00ED titly", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv vlastn\u00ED ikona", name: "date", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: date }),

package/date-range-picker/date-range-picker-content.js

@@ -45,7 +45,7 @@ const DateRangePickerContent = (props) => {
     const datePickerComponents = (0, react_1.useMemo)(() => ({
         month: (react_1.default.createElement("div", { className: "uxf-date-range-picker__months" }, activeMonths.map((activeMonth) => (react_1.default.createElement(date_range_picker_month_1.DateRangePickerMonth, { key: `${activeMonth.year}-${activeMonth.month}`, month: activeMonth.month, setViewMode: setViewMode, year: activeMonth.year }))))),
         year: react_1.default.createElement(date_range_picker_year_1.DateRangePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
-        decade: react_1.default.createElement(date_range_picker_decade_1.DateRangePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
+        decade: (react_1.default.createElement(date_range_picker_decade_1.DateRangePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date), setViewMode: setViewMode })),
     }), [activeMonths, onYearSelect, onMonthSelect, onDecadeYearSelect]);
     return (react_1.default.createElement("div", { className: `uxf-date-range-picker ${activeMonths.length > 1 ? "uxf-date-range-picker--multi-month" : ""}`, style: props.style },
         props.children,

package/date-range-picker/date-range-picker-decade.d.ts

@@ -1,6 +1,9 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles, ViewModeType } from "../date-picker/types";
 interface DatePickerDecadeProps {
+    customButtonTitles?: CustomButtonTitles;
     onYearSelect: (date: Date) => void;
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
 }
 export declare const DateRangePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
 export {};

package/date-range-picker/date-range-picker-decade.js

@@ -31,14 +31,28 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
-    var _a, _b;
-    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths, firstDayOfWeek } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
     const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
-    const { decadeLabel, years } = (0, use_decade_1.useDecade)({
+    const currentMonth = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : new Date().getMonth();
+    const { years } = (0, use_decade_1.useDecade)({
+        year: currentYear,
+    });
+    const { yearLabel } = (0, use_year_1.useYear)({
+        year: currentYear,
+        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+    });
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
         year: currentYear,
     });
     const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
@@ -58,15 +72,21 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
             props.onYearSelect(date);
         }
     }, [canGoToYear, props]);
+    const handleSetMonthViewMode = (0, react_1.useCallback)(() => props.setViewMode("year"), [props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleSetMonthViewMode,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : "Vybrat měsíc",
+            }, nextButtonProps: {
                 onClick: handleGoToNextDecadeClick,
-                title: "Vpřed",
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextDecade) !== null && _h !== void 0 ? _h : "Vpřed",
             }, prevButtonProps: {
                 onClick: handleGoToPrevDecadeClick,
-                title: "Zpět",
-            }, selectButtonProps: {
-                children: decadeLabel,
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevDecade) !== null && _k !== void 0 ? _k : "Zpět",
+            }, yearButtonProps: {
+                children: yearLabel,
+                isDisabled: true,
             } }),
         react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-calendar__cell-year--current"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });

package/date-range-picker/date-range-picker-month.d.ts

@@ -1,7 +1,9 @@
 import { UseMonthProps } from "@uxf/datepicker/hooks/use-month";
 import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles } from "../date-picker/types";
 import { ViewModeType } from "./types";
 interface DatePickerMonthProps extends UseMonthProps {
+    customButtonTitles?: CustomButtonTitles;
     setViewMode: Dispatch<SetStateAction<ViewModeType>>;
 }
 export declare const DateRangePickerMonth: React.NamedExoticComponent<DatePickerMonthProps>;

package/date-range-picker/date-range-picker-month.js

@@ -29,20 +29,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePickerMonth = void 0;
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const dateRangePickerProps = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
     const { canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth } = dateRangePickerProps;
     const { monthLabel } = (0, use_month_1.useMonth)({
         dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
         firstDayOfWeek,
         month: props.month,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
         weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
         year: props.year,
     });
+    const { yearLabel } = (0, use_year_1.useYear)({
+        year: props.year,
+        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+    });
     const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
         goToPrevMonthsByOneMonth();
     }, [goToPrevMonthsByOneMonth]);
@@ -50,19 +56,26 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
     const handleMonthClick = (0, react_1.useCallback)(() => {
         props.setViewMode("year");
     }, [props]);
+    const handleSetYearViewModeClick = (0, react_1.useCallback)(() => {
+        props.setViewMode("decade");
+    }, [props]);
     return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: (_b = (_a = props.customButtonTitles) === null || _a === void 0 ? void 0 : _a.selectMonth) !== null && _b !== void 0 ? _b : "Vybrat měsíc",
+            }, nextButtonProps: {
                 isDisabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
-                title: "Nadcházející měsíc",
+                title: (_d = (_c = props.customButtonTitles) === null || _c === void 0 ? void 0 : _c.nextMonth) !== null && _d !== void 0 ? _d : "Nadcházející měsíc",
             }, prevButtonProps: {
                 isDisabled: !canGoToPrevMonth,
                 onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
-                title: "Předchozí měsíc",
-            }, selectButtonProps: {
-                children: monthLabel,
-                onClick: handleMonthClick,
-                title: "Vybrat měsíc",
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.prevMonth) !== null && _f !== void 0 ? _f : "Předchozí měsíc",
+            }, yearButtonProps: {
+                children: yearLabel,
+                onClick: handleSetYearViewModeClick,
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.selectYear) !== null && _h !== void 0 ? _h : "Vybrat rok",
             } }),
         react_1.default.createElement(calendar_1.Calendar, { datePickerProps: dateRangePickerProps, month: props.month, year: props.year })));
 });

package/date-range-picker/date-range-picker-year.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
+import { CustomButtonTitles } from "../date-picker/types";
 interface DatePickerYearProps {
+    customButtonTitles?: CustomButtonTitles;
     onMonthSelect: (date: Date) => void;
     onYearSelect: () => void;
 }

package/date-range-picker/date-range-picker-year.js

@@ -30,13 +30,14 @@ exports.DateRangePickerYear = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerYear = (0, react_1.memo)((props) => {
-    var _a, _b, _c, _d;
-    const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths, firstDayOfWeek } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
     const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
     const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { months, yearLabel } = (0, use_year_1.useYear)({
@@ -44,6 +45,12 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
         yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
         monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
     });
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        year: currentYear,
+    });
     const handleGoToNextYear = (0, react_1.useCallback)(() => {
         if (canGoToNextYear) {
             goToNextYear(1);
@@ -63,18 +70,21 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
         }
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                isDisabled: true,
+            }, nextButtonProps: {
                 isDisabled: !canGoToNextYear,
                 onClick: canGoToNextYear ? handleGoToNextYear : undefined,
-                title: "Nadcházející rok",
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.nextYear) !== null && _f !== void 0 ? _f : "Nadcházející rok",
             }, prevButtonProps: {
                 isDisabled: !canGoToPrevYear,
                 onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
-                title: "Předchozí rok",
-            }, selectButtonProps: {
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.prevYear) !== null && _h !== void 0 ? _h : "Předchozí rok",
+            }, yearButtonProps: {
                 children: yearLabel,
                 onClick: handleYearClick,
-                title: "Vybrat rok",
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : "Vybrat rok",
             } }),
         react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-calendar__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });

package/date-range-picker-input/date-range-picker-input.stories.js

@@ -33,7 +33,7 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", setRange);
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", label: "Datum \u010Dehokoliv - 2 m\u011Bs\u00EDce", name: "date", numberOfMonths: 2, onChange: onChange, value: range }),
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: range }),
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: range }),
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: range }),

package/icons-config.js

@@ -5,6 +5,11 @@ module.exports = {
         height: 512,
         data: `<path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>`,
     },
+    "angle-right": {
+        width: 320,
+        height: 512,
+        data: `<path fill="currentColor" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>`,
+    },
     "arrow-left": {
         width: 448,
         height: 512,

package/info-box/info-box.js

@@ -55,7 +55,7 @@ exports.InfoBox = (0, react_1.forwardRef)((props, ref) => {
             react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.title) },
                 react_1.default.createElement(Component, { className: "uxf-info-box__title" }, props.title)),
             react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.description) },
-                react_1.default.createElement("p", { className: "uxf-info-box__description" }, props.description))),
+                react_1.default.createElement("div", { className: "uxf-info-box__description" }, props.description))),
         (0, is_not_nil_1.isNotNil)(props.actionElement) && (react_1.default.createElement("div", { className: "uxf-info-box__action-component" }, props.actionElement))));
 });
 exports.InfoBox.displayName = "UxfUiInfoBox";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.60.1",
+    "version": "11.61.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -25,7 +25,7 @@
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.60.1",
         "@uxf/core-react": "11.60.1",
-        "@uxf/datepicker": "11.50.0",
+        "@uxf/datepicker": "11.61.0",
         "@uxf/styles": "11.60.1",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",