@redis-ui/components 49.1.0 → 50.0.0

package/dist/node_modules/rsuite/esm/DatePicker/hooks/useFocus.cjs

@@ -0,0 +1,71 @@
+"use client";
+const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_addDays = require("../../../../date-fns/addDays.cjs");
+const require_addMonths = require("../../../../date-fns/addMonths.cjs");
+const require_useCustom = require("../../internals/hooks/useCustom.cjs");
+const require_useEventCallback = require("../../internals/hooks/useEventCallback.cjs");
+const require_utils = require("../../internals/Picker/utils.cjs");
+const require_getAriaLabel = require("../../Calendar/utils/getAriaLabel.cjs");
+const require_delay$1 = require("../../../../lodash/delay.cjs");
+//#region ../../node_modules/rsuite/esm/DatePicker/hooks/useFocus.js
+var import_delay = /* @__PURE__ */ require_runtime.__toESM(require_delay$1.default);
+function useFocus(props) {
+	const { target, showMonth, id, locale: localeProp } = props;
+	const { getLocale, formatDate } = require_useCustom.default();
+	const { formattedMonthPattern, formattedDayPattern } = getLocale("DateTimeFormats", localeProp);
+	/**
+	* Get the corresponding container based on date selection and month selection
+	*/
+	const getOverlayContainer = () => {
+		return showMonth ? document.getElementById(`${id}-calendar-month-dropdown`) : document.getElementById(`${id}-calendar-table`);
+	};
+	/**
+	* Check whether the date is focusable
+	*/
+	const checkFocusable = (date) => {
+		const ariaLabel = require_getAriaLabel.getAriaLabel(date, showMonth ? formattedMonthPattern : formattedDayPattern, formatDate);
+		if ((getOverlayContainer()?.querySelector(`[aria-label="${ariaLabel}"]`))?.getAttribute("aria-disabled") === "true") return false;
+		return true;
+	};
+	/**
+	* Focus on the currently selected date element
+	*/
+	const focusSelectedDate = () => {
+		(0, import_delay.default)(() => {
+			(getOverlayContainer()?.querySelector("[aria-selected=\"true\"]"))?.focus();
+		}, 1);
+	};
+	return {
+		focusInput: require_useEventCallback.default(() => {
+			(0, import_delay.default)(() => target.current?.focus(), 1);
+		}),
+		focusSelectedDate,
+		onKeyFocusEvent: require_useEventCallback.default((event, options) => {
+			const { date, callback } = options;
+			let delta = 0;
+			const step = showMonth ? 6 : 7;
+			const changeDateFunc = showMonth ? require_addMonths.default : require_addDays.default;
+			require_utils.onMenuKeyDown(event, {
+				down: () => {
+					delta = step;
+				},
+				up: () => {
+					delta = -step;
+				},
+				right: () => {
+					delta = 1;
+				},
+				left: () => {
+					delta = -1;
+				}
+			});
+			const nextDate = changeDateFunc(date, delta);
+			if (checkFocusable(nextDate)) {
+				callback(nextDate);
+				focusSelectedDate();
+			}
+		})
+	};
+}
+//#endregion
+exports.default = useFocus;

package/dist/node_modules/rsuite/esm/DatePicker/hooks/useFocus.js

@@ -0,0 +1,71 @@
+"use client";
+import { __toESM } from "../../../../../_virtual/_rolldown/runtime.js";
+import addDays from "../../../../date-fns/addDays.js";
+import addMonths from "../../../../date-fns/addMonths.js";
+import useCustom from "../../internals/hooks/useCustom.js";
+import useEventCallback from "../../internals/hooks/useEventCallback.js";
+import { onMenuKeyDown } from "../../internals/Picker/utils.js";
+import { getAriaLabel } from "../../Calendar/utils/getAriaLabel.js";
+import { require_delay } from "../../../../lodash/delay.js";
+//#region ../../node_modules/rsuite/esm/DatePicker/hooks/useFocus.js
+var import_delay = /* @__PURE__ */ __toESM(require_delay());
+function useFocus(props) {
+	const { target, showMonth, id, locale: localeProp } = props;
+	const { getLocale, formatDate } = useCustom();
+	const { formattedMonthPattern, formattedDayPattern } = getLocale("DateTimeFormats", localeProp);
+	/**
+	* Get the corresponding container based on date selection and month selection
+	*/
+	const getOverlayContainer = () => {
+		return showMonth ? document.getElementById(`${id}-calendar-month-dropdown`) : document.getElementById(`${id}-calendar-table`);
+	};
+	/**
+	* Check whether the date is focusable
+	*/
+	const checkFocusable = (date) => {
+		const ariaLabel = getAriaLabel(date, showMonth ? formattedMonthPattern : formattedDayPattern, formatDate);
+		if ((getOverlayContainer()?.querySelector(`[aria-label="${ariaLabel}"]`))?.getAttribute("aria-disabled") === "true") return false;
+		return true;
+	};
+	/**
+	* Focus on the currently selected date element
+	*/
+	const focusSelectedDate = () => {
+		(0, import_delay.default)(() => {
+			(getOverlayContainer()?.querySelector("[aria-selected=\"true\"]"))?.focus();
+		}, 1);
+	};
+	return {
+		focusInput: useEventCallback(() => {
+			(0, import_delay.default)(() => target.current?.focus(), 1);
+		}),
+		focusSelectedDate,
+		onKeyFocusEvent: useEventCallback((event, options) => {
+			const { date, callback } = options;
+			let delta = 0;
+			const step = showMonth ? 6 : 7;
+			const changeDateFunc = showMonth ? addMonths : addDays;
+			onMenuKeyDown(event, {
+				down: () => {
+					delta = step;
+				},
+				up: () => {
+					delta = -step;
+				},
+				right: () => {
+					delta = 1;
+				},
+				left: () => {
+					delta = -1;
+				}
+			});
+			const nextDate = changeDateFunc(date, delta);
+			if (checkFocusable(nextDate)) {
+				callback(nextDate);
+				focusSelectedDate();
+			}
+		})
+	};
+}
+//#endregion
+export { useFocus as default };

package/dist/node_modules/rsuite/esm/DatePicker/hooks/useMonthView.cjs

@@ -0,0 +1,18 @@
+"use client";
+const require_useEventCallback = require("../../internals/hooks/useEventCallback.cjs");
+let react = require("react");
+//#region ../../node_modules/rsuite/esm/DatePicker/hooks/useMonthView.js
+function useMonthView(props) {
+	const { onToggleMonthDropdown } = props;
+	const [monthView, setMonthView] = (0, react.useState)(false);
+	return {
+		monthView,
+		setMonthView,
+		toggleMonthView: require_useEventCallback.default((show) => {
+			onToggleMonthDropdown?.(show);
+			setMonthView(show);
+		})
+	};
+}
+//#endregion
+exports.default = useMonthView;

package/dist/node_modules/rsuite/esm/DatePicker/hooks/useMonthView.js

@@ -0,0 +1,18 @@
+"use client";
+import useEventCallback from "../../internals/hooks/useEventCallback.js";
+import { useState } from "react";
+//#region ../../node_modules/rsuite/esm/DatePicker/hooks/useMonthView.js
+function useMonthView(props) {
+	const { onToggleMonthDropdown } = props;
+	const [monthView, setMonthView] = useState(false);
+	return {
+		monthView,
+		setMonthView,
+		toggleMonthView: useEventCallback((show) => {
+			onToggleMonthDropdown?.(show);
+			setMonthView(show);
+		})
+	};
+}
+//#endregion
+export { useMonthView as default };

package/dist/node_modules/rsuite/esm/DatePicker/utils.cjs

@@ -0,0 +1,69 @@
+"use client";
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_endOfDay = require("../../../date-fns/endOfDay.cjs");
+const require_startOfDay = require("../../../date-fns/startOfDay.cjs");
+const require_subDays = require("../../../date-fns/subDays.cjs");
+const require_startOfToday = require("../../../date-fns/startOfToday.cjs");
+const require_types = require("../internals/utils/date/types.cjs");
+const require_omit$1 = require("../../../lodash/omit.cjs");
+const require_PickerToggleTrigger = require("../internals/Picker/PickerToggleTrigger.cjs");
+//#region ../../node_modules/rsuite/esm/DatePicker/utils.js
+var import_omit = /* @__PURE__ */ require_runtime.__toESM(require_omit$1.default);
+function getDefaultRanges(value) {
+	const today = require_startOfToday.default();
+	/**
+	* If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,
+	* otherwise it returns the default shortcut key suitable for DatePicker Toolbar
+	*/
+	if (value instanceof Array) return [
+		{
+			label: "today",
+			value: [require_startOfDay.default(today), require_endOfDay.default(today)]
+		},
+		{
+			label: "yesterday",
+			value: [require_startOfDay.default(require_subDays.default(today, 1)), require_endOfDay.default(require_subDays.default(today, 1))]
+		},
+		{
+			label: "last7Days",
+			value: [require_startOfDay.default(require_subDays.default(today, 6)), require_endOfDay.default(today)]
+		}
+	];
+	return [{
+		label: "today",
+		value: today
+	}, {
+		label: "yesterday",
+		value: require_subDays.default(today, 1)
+	}];
+}
+var generateRangesIterator = ({ calendarDate }) => ({ value, ...rest }) => ({
+	value: typeof value === "function" ? value(calendarDate) : value,
+	...rest
+});
+/**
+* get Toolbar ranges from Toolbar props
+* @param ranges
+* @param calendarDate
+*/
+var getRanges = ({ ranges, calendarDate }) => {
+	return typeof ranges === "undefined" ? getDefaultRanges(calendarDate) : ranges.map(generateRangesIterator({ calendarDate }));
+};
+function splitRanges(ranges) {
+	return {
+		sideRanges: ranges?.filter((range) => range?.placement === "left"),
+		bottomRanges: ranges?.filter((range) => range?.placement === "bottom" || range?.placement === void 0)
+	};
+}
+var getRestProps = (props, omitProps = []) => {
+	return (0, import_omit.default)(props, [
+		...require_PickerToggleTrigger.overlayPropKeys,
+		...require_types.calendarOnlyProps,
+		...omitProps
+	]);
+};
+//#endregion
+exports.getDefaultRanges = getDefaultRanges;
+exports.getRanges = getRanges;
+exports.getRestProps = getRestProps;
+exports.splitRanges = splitRanges;

package/dist/node_modules/rsuite/esm/DatePicker/utils.js

@@ -0,0 +1,66 @@
+"use client";
+import { __toESM } from "../../../../_virtual/_rolldown/runtime.js";
+import endOfDay from "../../../date-fns/endOfDay.js";
+import startOfDay from "../../../date-fns/startOfDay.js";
+import subDays from "../../../date-fns/subDays.js";
+import startOfToday from "../../../date-fns/startOfToday.js";
+import { calendarOnlyProps } from "../internals/utils/date/types.js";
+import { require_omit } from "../../../lodash/omit.js";
+import { overlayPropKeys } from "../internals/Picker/PickerToggleTrigger.js";
+//#region ../../node_modules/rsuite/esm/DatePicker/utils.js
+var import_omit = /* @__PURE__ */ __toESM(require_omit());
+function getDefaultRanges(value) {
+	const today = startOfToday();
+	/**
+	* If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,
+	* otherwise it returns the default shortcut key suitable for DatePicker Toolbar
+	*/
+	if (value instanceof Array) return [
+		{
+			label: "today",
+			value: [startOfDay(today), endOfDay(today)]
+		},
+		{
+			label: "yesterday",
+			value: [startOfDay(subDays(today, 1)), endOfDay(subDays(today, 1))]
+		},
+		{
+			label: "last7Days",
+			value: [startOfDay(subDays(today, 6)), endOfDay(today)]
+		}
+	];
+	return [{
+		label: "today",
+		value: today
+	}, {
+		label: "yesterday",
+		value: subDays(today, 1)
+	}];
+}
+var generateRangesIterator = ({ calendarDate }) => ({ value, ...rest }) => ({
+	value: typeof value === "function" ? value(calendarDate) : value,
+	...rest
+});
+/**
+* get Toolbar ranges from Toolbar props
+* @param ranges
+* @param calendarDate
+*/
+var getRanges = ({ ranges, calendarDate }) => {
+	return typeof ranges === "undefined" ? getDefaultRanges(calendarDate) : ranges.map(generateRangesIterator({ calendarDate }));
+};
+function splitRanges(ranges) {
+	return {
+		sideRanges: ranges?.filter((range) => range?.placement === "left"),
+		bottomRanges: ranges?.filter((range) => range?.placement === "bottom" || range?.placement === void 0)
+	};
+}
+var getRestProps = (props, omitProps = []) => {
+	return (0, import_omit.default)(props, [
+		...overlayPropKeys,
+		...calendarOnlyProps,
+		...omitProps
+	]);
+};
+//#endregion
+export { getDefaultRanges, getRanges, getRestProps, splitRanges };

package/dist/node_modules/rsuite/esm/DateRangeInput/DateRangeInput.cjs

@@ -0,0 +1,232 @@
+"use client";
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_extends = require("../../../@babel/runtime/helpers/esm/extends.cjs");
+const require_useStyles = require("../internals/hooks/useStyles.cjs");
+const require_isValid = require("../../../date-fns/isValid.cjs");
+const require_useCustom = require("../internals/hooks/useCustom.cjs");
+const require_mergeRefs = require("../internals/utils/react/mergeRefs.cjs");
+const require_useControlled = require("../internals/hooks/useControlled.cjs");
+const require_useEventCallback = require("../internals/hooks/useEventCallback.cjs");
+const require_index = require("../Input/index.cjs");
+const require_utils = require("../DateInput/utils.cjs");
+const require_useDateInputState = require("../DateInput/hooks/useDateInputState.cjs");
+const require_useKeyboardInputEvent = require("../DateInput/hooks/useKeyboardInputEvent.cjs");
+const require_useIsFocused = require("../DateInput/hooks/useIsFocused.cjs");
+const require_useFieldCursor = require("../DateInput/hooks/useFieldCursor.cjs");
+const require_useSelectedState = require("../DateInput/hooks/useSelectedState.cjs");
+const require_utils$1 = require("./utils.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+//#region ../../node_modules/rsuite/esm/DateRangeInput/DateRangeInput.js
+/**
+* The DateRangeInput component lets users select a date with the keyboard.
+* @version 5.59.0
+* @see https://rsuitejs.com/components/date-range-input/
+*/
+var DateRangeInput = /*#__PURE__*/ react.default.forwardRef((props, ref) => {
+	const { propsWithDefaults, parseDate, getLocale } = require_useCustom.default("Calendar", props);
+	const { shortDateFormat, dateLocale } = getLocale("DateTimeFormats");
+	const { className, classPrefix = "date-range-input", character = " ~ ", format: formatStr = shortDateFormat, value: valueProp, defaultValue = [], placeholder, onChange, onKeyDown, onBlur, onFocus, onPaste, ...rest } = propsWithDefaults;
+	const { withPrefix, merge } = require_useStyles.default(classPrefix);
+	const classes = merge(className, withPrefix());
+	const inputRef = (0, react.useRef)(null);
+	const { selectedState, setSelectedState } = require_useSelectedState.default();
+	const rangeFormatStr = `${formatStr}${character}${formatStr}`;
+	const [value, setValue, isControlled] = require_useControlled.default(valueProp, defaultValue);
+	const [dateType, setDateType] = (0, react.useState)(require_utils$1.DateType.Start);
+	const dateInputOptions = {
+		formatStr,
+		locale: dateLocale,
+		isControlledDate: isControlled
+	};
+	const startDateState = require_useDateInputState.default({
+		...dateInputOptions,
+		date: value?.[0] || null
+	});
+	const endDateState = require_useDateInputState.default({
+		...dateInputOptions,
+		date: value?.[1] || null
+	});
+	const { isMoveCursor, isResetValue, increment, reset } = require_useFieldCursor.default(formatStr, valueProp);
+	const getActiveState = (type = dateType) => {
+		return type === require_utils$1.DateType.Start ? startDateState : endDateState;
+	};
+	const [focused, focusEventProps] = require_useIsFocused.default({
+		onBlur,
+		onFocus
+	});
+	const renderedValue = (0, react.useMemo)(() => {
+		const dateString = startDateState.toDateString() + character + endDateState.toDateString();
+		if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) return dateString;
+		return !focused ? "" : dateString;
+	}, [
+		character,
+		endDateState,
+		focused,
+		startDateState
+	]);
+	const keyPressOptions = {
+		formatStr,
+		rangeFormatStr,
+		localize: dateLocale.localize,
+		selectedMonth: getActiveState().dateField.month,
+		dateString: renderedValue,
+		dateType,
+		character
+	};
+	const setSelectionRange = require_utils.useInputSelection(inputRef);
+	const handleChange = require_useEventCallback.default((date, event) => {
+		const nextValue = dateType === require_utils$1.DateType.Start ? [date, value?.[1]] : [value?.[0], date];
+		onChange?.(nextValue, event);
+		setValue(nextValue);
+	});
+	const handleClear = require_useEventCallback.default((event) => {
+		startDateState.setNewDate(null);
+		endDateState.setNewDate(null);
+		setSelectionRange(0, 0);
+		reset();
+		setValue(null);
+		onChange?.(null, event);
+	});
+	const onSegmentChange = require_useEventCallback.default((event, nextDirection) => {
+		const input = event.target;
+		const key = event.key;
+		const direction = nextDirection || (key === "ArrowRight" ? "right" : "left");
+		if (input.selectionEnd === null || input.selectionStart === null) return;
+		const cursorIndex = direction === "right" ? input.selectionEnd : input.selectionStart;
+		let nextDateType = dateType;
+		if (require_utils$1.isSwitchDateType(renderedValue, character, cursorIndex, direction)) {
+			nextDateType = dateType === require_utils$1.DateType.Start ? require_utils$1.DateType.End : require_utils$1.DateType.Start;
+			setDateType(nextDateType);
+		}
+		const state = require_utils$1.getInputSelectedState({
+			...keyPressOptions,
+			dateType: nextDateType,
+			selectedMonth: getActiveState(nextDateType).dateField.month,
+			input,
+			direction
+		});
+		setSelectedState(state);
+		setSelectionRange(state.selectionStart, state.selectionEnd);
+		if (selectedState.selectedPattern !== state.selectedPattern) reset();
+	});
+	const onSegmentValueChange = require_useEventCallback.default((event) => {
+		const input = event.target;
+		const offset = event.key === "ArrowUp" ? 1 : -1;
+		const state = require_utils$1.getInputSelectedState({
+			...keyPressOptions,
+			input,
+			valueOffset: offset
+		});
+		setSelectedState(state);
+		getActiveState().setDateOffset(state.selectedPattern, offset, (date) => handleChange(date, event));
+		setSelectionRange(state.selectionStart, state.selectionEnd);
+	});
+	const onSegmentValueChangeWithNumericKeys = require_useEventCallback.default((event) => {
+		const input = event.target;
+		const key = event.key;
+		const pattern = selectedState.selectedPattern;
+		if (key.startsWith("F") && !isNaN(Number(key.slice(1)))) return;
+		if (!pattern) return;
+		const field = getActiveState().getDateField(pattern);
+		const value = parseInt(key, 10);
+		const padValue = parseInt(`${field.value || ""}${key}`, 10);
+		let newValue = value;
+		if (require_utils.validateDateTime(field.name, padValue) && !isResetValue()) newValue = padValue;
+		getActiveState().setDateField(pattern, newValue, (date) => handleChange(date, event));
+		const selectedMonth = pattern === "M" ? newValue : getActiveState().dateField.month;
+		const nextState = require_utils$1.getInputSelectedState({
+			...keyPressOptions,
+			input,
+			selectedMonth
+		});
+		setSelectedState(nextState);
+		setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+		increment();
+		if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) onSegmentChange(event, "right");
+	});
+	const onSegmentValueRemove = require_useEventCallback.default((event) => {
+		const input = event.target;
+		const value = input.value;
+		if (input.selectionStart === 0 && value && input.selectionEnd === value.length) handleClear(event);
+		else if (selectedState.selectedPattern) {
+			const nextState = require_utils$1.getInputSelectedState({
+				...keyPressOptions,
+				input,
+				valueOffset: null
+			});
+			setSelectedState(nextState);
+			setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+			getActiveState().setDateField(selectedState.selectedPattern, null, (date) => handleChange(date, event));
+			reset();
+		}
+	});
+	const onAmPmToggle = require_useEventCallback.default((event) => {
+		const input = event.target;
+		const key = event.key.toLowerCase();
+		if (selectedState.selectedPattern === "a" && (key === "a" || key === "p")) {
+			const currentHour = getActiveState().dateField.hour || 0;
+			if (key === "a" && currentHour >= 12 || key === "p" && currentHour < 12) {
+				const state = require_utils$1.getInputSelectedState({
+					...keyPressOptions,
+					input
+				});
+				setSelectedState(state);
+				getActiveState().setDateOffset("a", 1, (date) => handleChange(date, event));
+				setSelectionRange(state.selectionStart, state.selectionEnd);
+			}
+		}
+	});
+	const handleClick = require_useEventCallback.default((event) => {
+		const input = event.target;
+		if (input.selectionStart === null) return;
+		const cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+		const dateType = require_utils$1.getDateType(renderedValue || rangeFormatStr, character, cursorIndex);
+		const state = require_utils$1.getInputSelectedState({
+			...keyPressOptions,
+			dateType,
+			selectedMonth: getActiveState(dateType).dateField.month,
+			input
+		});
+		setDateType(dateType);
+		setSelectedState(state);
+		setSelectionRange(state.selectionStart, state.selectionEnd);
+		if (selectedState.selectedPattern !== state.selectedPattern) reset();
+	});
+	const handlePaste = require_useEventCallback.default((event) => {
+		event.preventDefault();
+		const [start, end] = (event.clipboardData?.getData("text")).split(character).map((date) => parseDate(date, formatStr));
+		if (require_isValid.default(start) && require_isValid.default(end)) {
+			const nextValue = [start, end];
+			onChange?.(nextValue, event);
+			setValue(nextValue);
+			startDateState.setNewDate(start);
+			endDateState.setNewDate(end);
+		}
+		onPaste?.(event);
+	});
+	const onKeyboardInput = require_useKeyboardInputEvent.default({
+		onSegmentChange,
+		onSegmentValueChange,
+		onSegmentValueChangeWithNumericKeys,
+		onSegmentValueRemove,
+		onAmPmToggle,
+		onKeyDown
+	});
+	return /*#__PURE__*/ react.default.createElement(require_index.default, require_extends._extends({
+		inputMode: focused ? "numeric" : "text",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		className: classes,
+		ref: require_mergeRefs.default(inputRef, ref),
+		onKeyDown: onKeyboardInput,
+		onClick: handleClick,
+		onPaste: handlePaste,
+		value: renderedValue,
+		placeholder: placeholder || rangeFormatStr
+	}, focusEventProps, rest));
+});
+DateRangeInput.displayName = "DateRangeInput";
+//#endregion
+exports.default = DateRangeInput;