@uxf/ui 11.108.0 → 11.110.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
36
|
exports.DateRangePickerDecade = void 0;
|
|
40
37
|
const translations_1 = require("@uxf/core-react/translations");
|
|
@@ -44,7 +41,7 @@ const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range
|
|
|
44
41
|
const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
|
|
45
42
|
const use_month_1 = require("@uxf/datepicker/hooks/use-month");
|
|
46
43
|
const use_year_1 = require("@uxf/datepicker/hooks/use-year");
|
|
47
|
-
const
|
|
44
|
+
const date_1 = require("@uxf/localize/src/date");
|
|
48
45
|
const react_1 = __importStar(require("react"));
|
|
49
46
|
const calendar_1 = require("../calendar");
|
|
50
47
|
exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
|
|
@@ -58,17 +55,17 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
|
|
|
58
55
|
});
|
|
59
56
|
const { yearLabel } = (0, use_year_1.useYear)({
|
|
60
57
|
year: currentYear,
|
|
61
|
-
yearLabelFormat: (date) => (0,
|
|
62
|
-
monthLabelFormat: (date) => (0,
|
|
58
|
+
yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
|
|
59
|
+
monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
|
|
63
60
|
});
|
|
64
61
|
const { monthLabel } = (0, use_month_1.useMonth)({
|
|
65
62
|
firstDayOfWeek,
|
|
66
63
|
month: currentMonth,
|
|
67
|
-
monthLabelFormat: (date) => (0,
|
|
64
|
+
monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
|
|
68
65
|
year: currentYear,
|
|
69
66
|
});
|
|
70
|
-
const canGoToPrevDecade = canGoToYear((0,
|
|
71
|
-
const canGoToNextDecade = canGoToYear((0,
|
|
67
|
+
const canGoToPrevDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).subtract(5, "years").toDate());
|
|
68
|
+
const canGoToNextDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).add(5, "years").toDate());
|
|
72
69
|
const handleGoToPrevDecadeClick = (0, react_1.useCallback)(() => {
|
|
73
70
|
if (canGoToPrevDecade) {
|
|
74
71
|
goToPrevYear(9);
|
|
@@ -102,6 +99,6 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
|
|
|
102
99
|
children: yearLabel,
|
|
103
100
|
isDisabled: true,
|
|
104
101
|
} }),
|
|
105
|
-
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,
|
|
102
|
+
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, date_1.dayjsTz)(year.date).year() === currentYear && "uxf-calendar__cell-year--current"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
|
|
106
103
|
});
|
|
107
104
|
exports.DateRangePickerDecade.displayName = "UxfUiDatePickerDecade";
|
|
@@ -32,16 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
36
|
exports.DateRangePickerMonth = void 0;
|
|
40
37
|
const translations_1 = require("@uxf/core-react/translations");
|
|
41
38
|
const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
|
|
42
39
|
const use_month_1 = require("@uxf/datepicker/hooks/use-month");
|
|
43
40
|
const use_year_1 = require("@uxf/datepicker/hooks/use-year");
|
|
44
|
-
const
|
|
41
|
+
const date_1 = require("@uxf/localize/src/date");
|
|
45
42
|
const react_1 = __importStar(require("react"));
|
|
46
43
|
const calendar_1 = require("../calendar");
|
|
47
44
|
exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
|
|
@@ -50,16 +47,16 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
|
|
|
50
47
|
const dateRangePickerProps = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
|
|
51
48
|
const { canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth } = dateRangePickerProps;
|
|
52
49
|
const { monthLabel } = (0, use_month_1.useMonth)({
|
|
53
|
-
dayLabelFormat: (date) => (0,
|
|
50
|
+
dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
|
|
54
51
|
firstDayOfWeek,
|
|
55
52
|
month: props.month,
|
|
56
|
-
monthLabelFormat: (date) => (0,
|
|
57
|
-
weekdayLabelFormat: (date) => (0,
|
|
53
|
+
monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
|
|
54
|
+
weekdayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("dd"),
|
|
58
55
|
year: props.year,
|
|
59
56
|
});
|
|
60
57
|
const { yearLabel } = (0, use_year_1.useYear)({
|
|
61
58
|
year: props.year,
|
|
62
|
-
yearLabelFormat: (date) => (0,
|
|
59
|
+
yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
|
|
63
60
|
});
|
|
64
61
|
const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
|
|
65
62
|
goToPrevMonthsByOneMonth();
|
|
@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
36
|
exports.DateRangePickerYear = void 0;
|
|
40
37
|
const translations_1 = require("@uxf/core-react/translations");
|
|
@@ -43,7 +40,7 @@ const cx_1 = require("@uxf/core/utils/cx");
|
|
|
43
40
|
const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
|
|
44
41
|
const use_month_1 = require("@uxf/datepicker/hooks/use-month");
|
|
45
42
|
const use_year_1 = require("@uxf/datepicker/hooks/use-year");
|
|
46
|
-
const
|
|
43
|
+
const date_1 = require("@uxf/localize/src/date");
|
|
47
44
|
const react_1 = __importStar(require("react"));
|
|
48
45
|
const calendar_1 = require("../calendar");
|
|
49
46
|
exports.DateRangePickerYear = (0, react_1.memo)((props) => {
|
|
@@ -54,13 +51,13 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
|
|
|
54
51
|
const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
|
|
55
52
|
const { months, yearLabel } = (0, use_year_1.useYear)({
|
|
56
53
|
year: currentYear,
|
|
57
|
-
yearLabelFormat: (date) => (0,
|
|
58
|
-
monthLabelFormat: (date) => (0,
|
|
54
|
+
yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
|
|
55
|
+
monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
|
|
59
56
|
});
|
|
60
57
|
const { monthLabel } = (0, use_month_1.useMonth)({
|
|
61
58
|
firstDayOfWeek,
|
|
62
59
|
month: currentMonth,
|
|
63
|
-
monthLabelFormat: (date) => (0,
|
|
60
|
+
monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
|
|
64
61
|
year: currentYear,
|
|
65
62
|
});
|
|
66
63
|
const handleGoToNextYear = (0, react_1.useCallback)(() => {
|
|
@@ -98,6 +95,6 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
|
|
|
98
95
|
onClick: handleYearClick,
|
|
99
96
|
title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : t("uxf-ui-date-range-picker:select-year"),
|
|
100
97
|
} }),
|
|
101
|
-
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,
|
|
98
|
+
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, date_1.dayjsTz)(month.date).month() === currentMonth && "uxf-calendar__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
|
|
102
99
|
});
|
|
103
100
|
exports.DateRangePickerYear.displayName = "UxfUiDatePickerYear";
|
|
@@ -54,6 +54,10 @@ function Default() {
|
|
|
54
54
|
const [value, setValue] = (0, react_1.useState)(null);
|
|
55
55
|
const onChange = (0, action_1.action)("onChange", setValue);
|
|
56
56
|
return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8 dark:text-white" },
|
|
57
|
+
react_1.default.createElement("p", { className: "text-lg" }, "Date range picker raw"),
|
|
58
|
+
react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
|
|
59
|
+
react_1.default.createElement("p", { className: "text-lg" }, "Date range picker 2.4.2026 - 12.4.2026"),
|
|
60
|
+
react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: new Date("2026-04-12"), minDate: new Date("2026-04-02"), minSelectedDays: 2, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
|
|
57
61
|
react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min max and unavailable dates"),
|
|
58
62
|
react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: maxDate, minDate: minDate, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value, unavailableDates: unavailableDates }),
|
|
59
63
|
react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min selected days"),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/ui",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.110.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@floating-ui/react": "^0.27.17",
|
|
25
25
|
"@headlessui/react": "1.7.19",
|
|
26
|
-
"@uxf/core": "11.
|
|
27
|
-
"@uxf/core-react": "11.
|
|
28
|
-
"@uxf/datepicker": "11.
|
|
29
|
-
"@uxf/localize": "11.
|
|
30
|
-
"@uxf/styles": "11.
|
|
26
|
+
"@uxf/core": "11.110.0",
|
|
27
|
+
"@uxf/core-react": "11.110.0",
|
|
28
|
+
"@uxf/datepicker": "11.110.1",
|
|
29
|
+
"@uxf/localize": "11.110.0",
|
|
30
|
+
"@uxf/styles": "11.110.0",
|
|
31
31
|
"dayjs": "^1.11.19",
|
|
32
32
|
"react": ">= 18.2.0",
|
|
33
33
|
"react-dom": ">= 18.2.0",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"@types/node": "24",
|
|
40
40
|
"@types/react": "18.3.27",
|
|
41
41
|
"@types/react-dom": "18.3.7",
|
|
42
|
-
"@uxf/core": "11.
|
|
43
|
-
"@uxf/core-react": "11.
|
|
44
|
-
"@uxf/datepicker": "11.
|
|
45
|
-
"@uxf/localize": "11.
|
|
46
|
-
"@uxf/styles": "11.
|
|
42
|
+
"@uxf/core": "11.110.0",
|
|
43
|
+
"@uxf/core-react": "11.110.0",
|
|
44
|
+
"@uxf/datepicker": "11.110.1",
|
|
45
|
+
"@uxf/localize": "11.110.0",
|
|
46
|
+
"@uxf/styles": "11.110.0",
|
|
47
47
|
"dayjs": "^1.11.19",
|
|
48
48
|
"react-dropzone": "^14.4.0"
|
|
49
49
|
}
|