@povio/ui 2.3.2 → 2.3.3

package/dist/assets/locales/sl/translation.json.js

@@ -22,9 +22,9 @@ var translation_default = {
 				"thisAndLastWeek": "Ta in prejšnji teden",
 				"thisMonth": "Ta mesec",
 				"thisAndLastMonth": "Ta in prejšnji mesec",
-				"thisYear": "Ta leto",
+				"thisYear": "To leto",
 				"lastYear": "Prejšnje leto",
-				"thisAndLastYear": "Ta in prejšnje leto",
+				"thisAndLastYear": "To in prejšnje leto",
 				"soFar": "Od začetka"
 			},
 			"navigation": {

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -23,7 +23,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, minValue, maxValue, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -33,12 +33,16 @@ var DateRangePickerBase = (props) => {
 		...rest,
 		value,
 		shouldCloseOnSelect: false,
-		shouldForceLeadingZeros
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
 	});
 	const state = useDateRangePickerState({
 		...rest,
 		shouldForceLeadingZeros,
 		value,
+		minValue,
+		maxValue,
 		onChange: (newValue) => {
 			if (isValidRange(newValue)) return;
 			onChange?.(newValue);
@@ -49,12 +53,16 @@ var DateRangePickerBase = (props) => {
 	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker({
 		...rest,
 		label,
-		shouldForceLeadingZeros
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
 	}, state, dateRangePickerRef);
 	const { calendarProps } = useDateRangePicker({
 		...rest,
 		label,
-		shouldForceLeadingZeros
+		shouldForceLeadingZeros,
+		minValue,
+		maxValue
 	}, dialogState, dateRangePickerRef);
 	const { locale } = useLocale$1();
 	useImperativeHandle(ref, () => ({ clear: () => {
@@ -79,8 +87,8 @@ var DateRangePickerBase = (props) => {
 		createCalendar,
 		pageBehavior: "single",
 		visibleDuration: { months: 1 },
-		minValue: void 0,
-		maxValue: void 0
+		minValue,
+		maxValue
 	});
 	const rightCalendarState = useRangeCalendarState({
 		...calendarProps,
@@ -89,8 +97,8 @@ var DateRangePickerBase = (props) => {
 		pageBehavior: "single",
 		visibleDuration: { months: 1 },
 		defaultFocusedValue: today(getLocalTimeZone()).add({ months: 1 }),
-		minValue: void 0,
-		maxValue: void 0
+		minValue,
+		maxValue
 	});
 	const [activePreset, setActivePreset] = useState(null);
 	const [rangeSelection, setRangeSelection] = useState({
@@ -110,6 +118,32 @@ var DateRangePickerBase = (props) => {
 		className: headerClassName,
 		labelProps
 	};
+	const isDateOutsideBounds = useCallback((date) => {
+		if (minValue && date.compare(minValue) < 0) return true;
+		if (maxValue && date.compare(maxValue) > 0) return true;
+		return false;
+	}, [minValue, maxValue]);
+	const clampRangeToBounds = useCallback((range) => {
+		if (range === null) return null;
+		if (minValue && maxValue && minValue.compare(maxValue) > 0) return null;
+		let startDate = range.start;
+		let endDate = range.end;
+		if (minValue && endDate.compare(minValue) < 0 || maxValue && startDate.compare(maxValue) > 0) return null;
+		if (minValue && startDate.compare(minValue) < 0) startDate = minValue;
+		if (maxValue && startDate.compare(maxValue) > 0) startDate = maxValue;
+		if (minValue && endDate.compare(minValue) < 0) endDate = minValue;
+		if (maxValue && endDate.compare(maxValue) > 0) endDate = maxValue;
+		if (startDate.compare(endDate) > 0) return null;
+		return {
+			start: startDate,
+			end: endDate
+		};
+	}, [minValue, maxValue]);
+	const isRangeWithinBounds = useCallback((range) => {
+		if (minValue && range.start.compare(minValue) < 0) return false;
+		if (maxValue && range.end.compare(maxValue) > 0) return false;
+		return true;
+	}, [minValue, maxValue]);
 	const isValidRange = useCallback((newValue) => {
 		if (newValue?.start && newValue?.end) {
 			const startDate = newValue.start;
@@ -123,18 +157,20 @@ var DateRangePickerBase = (props) => {
 	}, [t]);
 	const handleCalendarStatesChange = (newValue) => {
 		if (newValue) {
-			if (isValidRange(newValue)) return;
-			dialogState.setValue(newValue);
-			const startDate = newValue.start;
-			const endDate = newValue.end;
+			const clampedValue = clampRangeToBounds(newValue);
+			if (!clampedValue) return;
+			if (isValidRange(clampedValue)) return;
+			dialogState.setValue(clampedValue);
+			const startDate = clampedValue.start;
+			const endDate = clampedValue.end;
 			leftCalendarState.setFocusedDate(startDate);
 			if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
 			else rightCalendarState.setFocusedDate(endDate);
-			leftCalendarState.setValue(newValue);
-			rightCalendarState.setValue(newValue);
+			leftCalendarState.setValue(clampedValue);
+			rightCalendarState.setValue(clampedValue);
 			setRangeSelection({
-				start: newValue.start,
-				end: newValue.end,
+				start: clampedValue.start,
+				end: clampedValue.end,
 				isSelecting: false
 			});
 			setHoverDate(null);
@@ -176,6 +212,7 @@ var DateRangePickerBase = (props) => {
 				leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
 			}
 		}
+		if (isDateOutsideBounds(date)) return;
 		if (!rangeSelection.isSelecting || !rangeSelection.start) {
 			setRangeSelection({
 				start: date,
@@ -188,18 +225,17 @@ var DateRangePickerBase = (props) => {
 		} else {
 			const { start } = rangeSelection;
 			const end = date;
-			const finalStart = start.compare(end) <= 0 ? start : end;
-			const finalEnd = start.compare(end) <= 0 ? end : start;
-			const newRange = {
-				start: finalStart,
-				end: finalEnd
-			};
-			leftCalendarState.setValue(newRange);
-			rightCalendarState.setValue(newRange);
-			dialogState.setValue(newRange);
+			const clampedRange = clampRangeToBounds({
+				start: start.compare(end) <= 0 ? start : end,
+				end: start.compare(end) <= 0 ? end : start
+			});
+			if (!clampedRange) return;
+			leftCalendarState.setValue(clampedRange);
+			rightCalendarState.setValue(clampedRange);
+			dialogState.setValue(clampedRange);
 			setRangeSelection({
-				start: finalStart,
-				end: finalEnd,
+				start: clampedRange.start,
+				end: clampedRange.end,
 				isSelecting: false
 			});
 			setHoverDate(null);
@@ -209,7 +245,9 @@ var DateRangePickerBase = (props) => {
 		rangeSelection,
 		leftCalendarState,
 		rightCalendarState,
-		dialogState
+		dialogState,
+		isDateOutsideBounds,
+		clampRangeToBounds
 	]);
 	const handleKeyboardNavigation = useCallback((event, date, calendarSide) => {
 		const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
@@ -295,18 +333,28 @@ var DateRangePickerBase = (props) => {
 		handleDateSelection
 	]);
 	const syncCalendarStates = useCallback((newValue) => {
-		if (isValidRange(newValue)) return;
-		leftCalendarState.setValue(newValue);
-		rightCalendarState.setValue(newValue);
-		dialogState.setValue(newValue);
-		if (newValue) setRangeSelection({
-			start: newValue.start,
-			end: newValue.end,
-			isSelecting: false
-		});
-		else setRangeSelection({
-			start: null,
-			end: null,
+		if (newValue === null) {
+			setValidationRangeError(void 0);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+			dialogState.setValue(null);
+			setRangeSelection({
+				start: null,
+				end: null,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			return;
+		}
+		const clampedValue = clampRangeToBounds(newValue);
+		if (!clampedValue) return;
+		if (isValidRange(clampedValue)) return;
+		leftCalendarState.setValue(clampedValue);
+		rightCalendarState.setValue(clampedValue);
+		dialogState.setValue(clampedValue);
+		setRangeSelection({
+			start: clampedValue.start,
+			end: clampedValue.end,
 			isSelecting: false
 		});
 		setHoverDate(null);
@@ -314,24 +362,32 @@ var DateRangePickerBase = (props) => {
 		isValidRange,
 		leftCalendarState,
 		rightCalendarState,
-		dialogState
+		dialogState,
+		clampRangeToBounds
 	]);
 	const onApply = () => {
-		const valueToApply = rangeSelection.start && rangeSelection.end ? {
+		let valueToApply = dialogState.value;
+		if (rangeSelection.start && rangeSelection.end) valueToApply = {
 			start: rangeSelection.start,
 			end: rangeSelection.end
-		} : dialogState.value;
-		if (valueToApply) state.setValue(valueToApply);
+		};
+		const clampedValue = clampRangeToBounds(valueToApply);
+		if (clampedValue) state.setValue(clampedValue);
 		state.toggle();
 	};
 	const onTodayPress = () => {
 		const todayDate = today(getLocalTimeZone());
-		leftCalendarState.setFocusedDate(todayDate);
-		rightCalendarState.setFocusedDate(todayDate.add({ months: 1 }));
-		syncCalendarStates({
+		const clampedTodayRange = clampRangeToBounds({
 			start: todayDate,
 			end: todayDate
 		});
+		if (!clampedTodayRange) return;
+		const startDate = clampedTodayRange.start;
+		const endDate = clampedTodayRange.end;
+		leftCalendarState.setFocusedDate(startDate);
+		if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+		else rightCalendarState.setFocusedDate(endDate);
+		syncCalendarStates(clampedTodayRange);
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
@@ -387,59 +443,84 @@ var DateRangePickerBase = (props) => {
 			end: thisMonthEnd
 		};
 	};
+	const createPreset = (params) => {
+		let clampedValue = clampRangeToBounds(params.getValue());
+		let isDisabled = false;
+		if (params.keepEnabledUnlessFutureMin) {
+			let minDateIsInFuture = false;
+			if (minValue && minValue.compare(todayDate) > 0) minDateIsInFuture = true;
+			if (minDateIsInFuture) {
+				isDisabled = true;
+				clampedValue = null;
+			} else if (!clampedValue && maxValue) clampedValue = {
+				start: maxValue,
+				end: maxValue
+			};
+		}
+		if (!clampedValue) isDisabled = true;
+		if (clampedValue && !isRangeWithinBounds(clampedValue)) isDisabled = true;
+		return {
+			label: params.label,
+			getValue: params.getValue,
+			clampedValue,
+			isDisabled
+		};
+	};
 	const presets = [
-		{
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisWeek, { ns: "ui" }),
 			getValue: getThisWeekRange
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.lastWeek, { ns: "ui" }),
 			getValue: getLastWeekRange
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
 			getValue: getThisAndLastWeekRange
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisMonth, { ns: "ui" }),
 			getValue: getThisMonthRange
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
 			getValue: getThisAndLastMonthRange
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisYear, { ns: "ui" }),
 			getValue: () => ({
 				start: startOfYear(todayDate),
 				end: todayDate
 			})
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.lastYear, { ns: "ui" }),
 			getValue: () => ({
 				start: startOfYear(todayDate.subtract({ years: 1 })),
 				end: endOfYear(todayDate.subtract({ years: 1 }))
 			})
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
 			getValue: () => ({
 				start: startOfYear(todayDate.subtract({ years: 1 })),
 				end: todayDate
 			})
-		},
-		{
+		}),
+		createPreset({
 			label: t(($) => $.ui.datePicker.presets.soFar, { ns: "ui" }),
 			getValue: () => ({
 				start: startOfYear(todayDate),
 				end: todayDate
-			})
-		}
+			}),
+			keepEnabledUnlessFutureMin: true
+		})
 	];
 	const selectPreset = (preset) => {
+		if (preset.isDisabled || !preset.clampedValue) return;
 		setActivePreset(preset.label);
-		const presetValue = preset.getValue();
+		const presetValue = preset.clampedValue;
 		syncCalendarStates(presetValue);
 		const startDate = presetValue.start;
 		leftCalendarState.setFocusedDate(startDate);
@@ -486,8 +567,9 @@ var DateRangePickerBase = (props) => {
 				sidebar: /* @__PURE__ */ jsx("div", {
 					className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
 					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+						isDisabled: preset.isDisabled,
 						onClick: () => selectPreset(preset),
-						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
+						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item disabled:text-interactive-text-secondary-disabled!", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
 						children: /* @__PURE__ */ jsx(Typography, {
 							size: "label-2",
 							sizeMobile: "label-3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",