@uxf/ui 11.24.0 → 11.25.0

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

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

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

@@ -32,21 +32,23 @@ const date_picker_year_1 = require("./date-picker-year");
 const DatePickerContent = (props) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const onMonthChange = props.onMonthChange;
     const [viewMode, setViewMode] = (0, react_1.useState)("month");
     const onYearSelect = (0, react_1.useCallback)(() => setViewMode("decade"), [setViewMode]);
     const onMonthSelect = (0, react_1.useCallback)((date) => {
-        goToDate(date);
+        const newActiveMonths = goToDate(date);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
         setViewMode("month");
-    }, [goToDate, setViewMode]);
+    }, [goToDate, setViewMode, onMonthChange]);
     const onDecadeYearSelect = (0, react_1.useCallback)((date) => {
         goToDate(date);
         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}`, setViewMode: setViewMode }))),
+        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, onMonthSelect, onDecadeYearSelect]);
+    }), [activeMonths, 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-month.d.ts

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

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

@@ -35,6 +35,7 @@ const calendar_1 = require("../calendar");
 exports.DatePickerMonth = (0, react_1.memo)((props) => {
     const { setViewMode } = props;
     const datePickerProps = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const onMonthChange = props.onMonthChange;
     const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = datePickerProps;
     const currentMonth = activeMonths[0].month;
     const currentYear = activeMonths[0].year;
@@ -47,9 +48,13 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
         year: currentYear,
     });
     const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
-        goToPrevMonthsByOneMonth();
-    }, [goToPrevMonthsByOneMonth]);
-    const handleGoToNextMonth = (0, react_1.useCallback)(() => goToNextMonthsByOneMonth(), [goToNextMonthsByOneMonth]);
+        const newActiveMonths = goToPrevMonthsByOneMonth();
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
+    }, [goToPrevMonthsByOneMonth, onMonthChange]);
+    const handleGoToNextMonth = (0, react_1.useCallback)(() => {
+        const newActiveMonths = goToNextMonthsByOneMonth();
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
+    }, [goToNextMonthsByOneMonth, onMonthChange]);
     const handleMonthClick = (0, react_1.useCallback)(() => {
         setViewMode("year");
     }, [setViewMode]);

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

@@ -1,5 +1,5 @@
 import { OnDateChangeType } from "@uxf/datepicker/hooks/use-date-picker";
-import { DatesConfig } from "@uxf/datepicker/utils/types";
+import { DatesConfig, type MonthType } from "@uxf/datepicker/utils/types";
 import { CSSProperties, FC, ReactNode } from "react";
 export interface DatePickerProps {
     bottomContent?: ReactNode;
@@ -8,6 +8,7 @@ export interface DatePickerProps {
     maxDate?: Date;
     minDate?: Date;
     onChange: (data: OnDateChangeType) => void;
+    onMonthChange?: (months: MonthType[]) => void;
     preventScroll?: boolean;
     selectedDate: Date | null;
     style?: CSSProperties;

package/date-picker/date-picker.js

@@ -24,7 +24,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, style: props.style })));
+        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent, onMonthChange: props.onMonthChange, style: props.style })));
 };
 exports.DatePicker = DatePicker;
 exports.DatePicker.displayName = "UxfUiDatePicker";

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

@@ -77,7 +77,9 @@ function Default() {
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker with bottom content"),
         react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")) })));
+                react_1.default.createElement("p", null, "Here can goes anything")) }),
+        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with onMonthChange callback"),
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, onMonthChange: (months) => alert(months[0].month) })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }

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

@@ -1,4 +1,4 @@
-import { DatesConfig } from "@uxf/datepicker/utils/types";
+import { DatesConfig, type MonthType } from "@uxf/datepicker/utils/types";
 import React, { CSSProperties, ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
 export declare const ALLOWED_DATE_FORMAT: string[];
@@ -11,6 +11,7 @@ export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string
     displayDateFormat?: string;
     maxDate?: string;
     minDate?: string;
+    onMonthChange?: (months: MonthType[]) => void;
     placeholder?: string;
     style?: CSSProperties;
     triggerElement?: ReactNode;

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

@@ -82,6 +82,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, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, 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, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ 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 }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/datetime-picker/datetime-picker.d.ts

@@ -1,3 +1,4 @@
+import type { MonthType } from "@uxf/datepicker/utils/types";
 import { Dayjs } from "dayjs";
 import { FC, ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
@@ -6,6 +7,7 @@ export declare function getStrictParsedDatetime(date: string | null): Dayjs;
 export interface DatetimePickerProps {
     closePopoverHandler?: () => void;
     onChange: InputWithPopoverProps<string | null>["onChange"];
+    onMonthChange?: (months: MonthType[]) => void;
     value: InputWithPopoverProps<string | null>["value"];
     minDate?: Date;
     maxDate?: Date;

package/datetime-picker/datetime-picker.js

@@ -87,7 +87,7 @@ const DatetimePicker = (props) => {
                 react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, "Datum"),
                 react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, "\u010Cas"))),
         react_1.default.createElement("div", { className: "uxf-tabs__panels" },
-            selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent })),
+            selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates })),
             selectedTab === "time" && react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, selectedTime: selectedTime }))));
 };
 exports.DatetimePicker = DatetimePicker;

package/dropzone/dropzone-list.js

@@ -35,7 +35,7 @@ const get_file_icon_1 = require("../utils/files/get-file-icon");
 function formatBytes(bytes, decimals = 2) {
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }

package/multi-combobox/multi-combobox.stories.js

@@ -60,12 +60,12 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownMaxHeight: 350, id: "multi-combobox-1", label: "MultiCombobox", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-2", label: "MultiCombobox with checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-3", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Error message", id: "multi-combobox-4", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Error message", id: "multi-combobox-4", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox-invalid", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-5", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-6", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label) }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-disabled", label: "MultiCombobox disabled", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-disabled", label: "MultiCombobox disabled", name: "multi-combobox-disabled", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label), isDisabled: true })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.24.0",
+  "version": "11.25.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
     "@headlessui/react": "1.7.14",
     "@uxf/core": "11.22.0",
     "@uxf/core-react": "11.22.0",
-    "@uxf/datepicker": "11.11.3",
+    "@uxf/datepicker": "11.25.0",
     "@uxf/styles": "11.22.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",

package/pagination/pagination.js

@@ -18,7 +18,7 @@ const Pagination = (props) => {
         count: props.count,
         page: props.page,
         showFirstButton: props.showFirstButton,
-        showLastButton: props.showFirstButton,
+        showLastButton: props.showLastButton,
     });
     const onClick = (item) => {
         if (typeof item === "number") {