@redis-ui/components 49.1.0 → 50.0.0

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

@@ -0,0 +1,230 @@
+"use client";
+import { _extends } from "../../../@babel/runtime/helpers/esm/extends.js";
+import useStyles from "../internals/hooks/useStyles.js";
+import isValid from "../../../date-fns/isValid.js";
+import useCustom from "../internals/hooks/useCustom.js";
+import mergeRefs from "../internals/utils/react/mergeRefs.js";
+import useControlled from "../internals/hooks/useControlled.js";
+import useEventCallback from "../internals/hooks/useEventCallback.js";
+import Input_default from "../Input/index.js";
+import { useInputSelection, validateDateTime } from "../DateInput/utils.js";
+import useDateInputState from "../DateInput/hooks/useDateInputState.js";
+import useKeyboardInputEvent from "../DateInput/hooks/useKeyboardInputEvent.js";
+import useIsFocused from "../DateInput/hooks/useIsFocused.js";
+import useFieldCursor from "../DateInput/hooks/useFieldCursor.js";
+import useSelectedState from "../DateInput/hooks/useSelectedState.js";
+import { DateType, getDateType, getInputSelectedState, isSwitchDateType } from "./utils.js";
+import React, { useMemo, useRef, useState } from "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.forwardRef((props, ref) => {
+	const { propsWithDefaults, parseDate, getLocale } = useCustom("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 } = useStyles(classPrefix);
+	const classes = merge(className, withPrefix());
+	const inputRef = useRef(null);
+	const { selectedState, setSelectedState } = useSelectedState();
+	const rangeFormatStr = `${formatStr}${character}${formatStr}`;
+	const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
+	const [dateType, setDateType] = useState(DateType.Start);
+	const dateInputOptions = {
+		formatStr,
+		locale: dateLocale,
+		isControlledDate: isControlled
+	};
+	const startDateState = useDateInputState({
+		...dateInputOptions,
+		date: value?.[0] || null
+	});
+	const endDateState = useDateInputState({
+		...dateInputOptions,
+		date: value?.[1] || null
+	});
+	const { isMoveCursor, isResetValue, increment, reset } = useFieldCursor(formatStr, valueProp);
+	const getActiveState = (type = dateType) => {
+		return type === DateType.Start ? startDateState : endDateState;
+	};
+	const [focused, focusEventProps] = useIsFocused({
+		onBlur,
+		onFocus
+	});
+	const renderedValue = 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 = useInputSelection(inputRef);
+	const handleChange = useEventCallback((date, event) => {
+		const nextValue = dateType === DateType.Start ? [date, value?.[1]] : [value?.[0], date];
+		onChange?.(nextValue, event);
+		setValue(nextValue);
+	});
+	const handleClear = useEventCallback((event) => {
+		startDateState.setNewDate(null);
+		endDateState.setNewDate(null);
+		setSelectionRange(0, 0);
+		reset();
+		setValue(null);
+		onChange?.(null, event);
+	});
+	const onSegmentChange = useEventCallback((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 (isSwitchDateType(renderedValue, character, cursorIndex, direction)) {
+			nextDateType = dateType === DateType.Start ? DateType.End : DateType.Start;
+			setDateType(nextDateType);
+		}
+		const state = 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 = useEventCallback((event) => {
+		const input = event.target;
+		const offset = event.key === "ArrowUp" ? 1 : -1;
+		const state = getInputSelectedState({
+			...keyPressOptions,
+			input,
+			valueOffset: offset
+		});
+		setSelectedState(state);
+		getActiveState().setDateOffset(state.selectedPattern, offset, (date) => handleChange(date, event));
+		setSelectionRange(state.selectionStart, state.selectionEnd);
+	});
+	const onSegmentValueChangeWithNumericKeys = useEventCallback((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 (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 = 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 = useEventCallback((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 = getInputSelectedState({
+				...keyPressOptions,
+				input,
+				valueOffset: null
+			});
+			setSelectedState(nextState);
+			setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+			getActiveState().setDateField(selectedState.selectedPattern, null, (date) => handleChange(date, event));
+			reset();
+		}
+	});
+	const onAmPmToggle = useEventCallback((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 = getInputSelectedState({
+					...keyPressOptions,
+					input
+				});
+				setSelectedState(state);
+				getActiveState().setDateOffset("a", 1, (date) => handleChange(date, event));
+				setSelectionRange(state.selectionStart, state.selectionEnd);
+			}
+		}
+	});
+	const handleClick = useEventCallback((event) => {
+		const input = event.target;
+		if (input.selectionStart === null) return;
+		const cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+		const dateType = getDateType(renderedValue || rangeFormatStr, character, cursorIndex);
+		const state = 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 = useEventCallback((event) => {
+		event.preventDefault();
+		const [start, end] = (event.clipboardData?.getData("text")).split(character).map((date) => parseDate(date, formatStr));
+		if (isValid(start) && isValid(end)) {
+			const nextValue = [start, end];
+			onChange?.(nextValue, event);
+			setValue(nextValue);
+			startDateState.setNewDate(start);
+			endDateState.setNewDate(end);
+		}
+		onPaste?.(event);
+	});
+	const onKeyboardInput = useKeyboardInputEvent({
+		onSegmentChange,
+		onSegmentValueChange,
+		onSegmentValueChangeWithNumericKeys,
+		onSegmentValueRemove,
+		onAmPmToggle,
+		onKeyDown
+	});
+	return /*#__PURE__*/ React.createElement(Input_default, _extends({
+		inputMode: focused ? "numeric" : "text",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		className: classes,
+		ref: mergeRefs(inputRef, ref),
+		onKeyDown: onKeyboardInput,
+		onClick: handleClick,
+		onPaste: handlePaste,
+		value: renderedValue,
+		placeholder: placeholder || rangeFormatStr
+	}, focusEventProps, rest));
+});
+DateRangeInput.displayName = "DateRangeInput";
+//#endregion
+export { DateRangeInput as default };

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

@@ -0,0 +1,5 @@
+"use client";
+//#region ../../node_modules/rsuite/esm/DateRangeInput/index.js
+var DateRangeInput_default = require("./DateRangeInput.cjs").default;
+//#endregion
+exports.default = DateRangeInput_default;

package/dist/node_modules/rsuite/esm/DateRangeInput/index.js

@@ -0,0 +1,6 @@
+"use client";
+import DateRangeInput from "./DateRangeInput.js";
+//#region ../../node_modules/rsuite/esm/DateRangeInput/index.js
+var DateRangeInput_default = DateRangeInput;
+//#endregion
+export { DateRangeInput_default as default };

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

@@ -0,0 +1,104 @@
+"use client";
+const require_utils = require("../DateInput/utils.cjs");
+//#region ../../node_modules/rsuite/esm/DateRangeInput/utils.js
+var DateType = /*#__PURE__*/ function(DateType) {
+	DateType["Start"] = "Start";
+	DateType["End"] = "End";
+	return DateType;
+}({});
+function getInputSelectedState(options) {
+	const { input, direction, formatStr, rangeFormatStr, localize, selectedMonth, valueOffset = 0, character, dateType, dateString } = options;
+	const getPatternSelectedIndexes = (pattern) => {
+		let selectionStart = 0;
+		let selectionEnd = 0;
+		if (dateType === DateType.Start) {
+			selectionStart = rangeFormatStr.indexOf(pattern);
+			selectionEnd = rangeFormatStr.split(character)[0].lastIndexOf(pattern) + 1;
+		} else if (dateType === DateType.End) {
+			const position = rangeFormatStr.indexOf(character) + character.length;
+			selectionStart = rangeFormatStr.indexOf(pattern, position);
+			selectionEnd = rangeFormatStr.lastIndexOf(pattern) + 1;
+		}
+		const endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
+		if (dateType === DateType.End && endDateGap > 0) {
+			selectionStart += endDateGap;
+			selectionEnd += endDateGap;
+		}
+		const gap = require_utils.getSelectIndexGap({
+			pattern,
+			formatStr,
+			valueOffset,
+			selectedMonth,
+			localize
+		});
+		const isSelectedMonth = pattern === "M";
+		if (selectedMonth === null && !(isSelectedMonth && valueOffset !== 0)) return {
+			selectionStart,
+			selectionEnd
+		};
+		if (isSelectedMonth) return {
+			selectionStart,
+			selectionEnd: selectionEnd + gap
+		};
+		if (require_utils.isCursorAfterMonth(selectionStart, formatStr)) return {
+			selectionStart: selectionStart + gap,
+			selectionEnd: selectionEnd + gap
+		};
+		return {
+			selectionStart,
+			selectionEnd
+		};
+	};
+	if (typeof input.selectionEnd === "number" && typeof input.selectionStart === "number") {
+		let index = input.selectionStart;
+		let positionOffset = -1;
+		if (direction === "left") index = input.selectionStart - 1;
+		else if (direction === "right") {
+			index = input.selectionEnd + 1;
+			positionOffset = 1;
+		}
+		const endDateIndex = dateString.indexOf(character) + character.length;
+		const datePattern = require_utils.getDatePattern({
+			selectionIndex: dateType === DateType.End ? index - endDateIndex : index,
+			positionOffset,
+			formatStr,
+			dateString,
+			valueOffset,
+			selectedMonth,
+			localize
+		});
+		return {
+			selectedPattern: datePattern,
+			...getPatternSelectedIndexes(datePattern)
+		};
+	}
+	return {
+		selectedPattern: "y",
+		selectionStart: 0,
+		selectionEnd: 0
+	};
+}
+function getDateType(dateString, character, cursorIndex) {
+	if (cursorIndex > dateString.indexOf(character)) return DateType.End;
+	return DateType.Start;
+}
+function isSwitchDateType(dateString, character, cursorIndex, direction) {
+	const characterIndex = dateString.indexOf(character);
+	let startIndex = cursorIndex;
+	let endIndex = startIndex + character.length;
+	if (direction === "left") {
+		endIndex = cursorIndex;
+		startIndex = endIndex - character.length;
+	}
+	if (dateString.substring(startIndex, endIndex) === character) return true;
+	if (direction === "right") {
+		if (!dateString.substring(cursorIndex, characterIndex).match(/[0-9a-zA-Z]/)) return true;
+	}
+	if (!dateString.substring(characterIndex, cursorIndex).match(/[0-9a-zA-Z]/)) return true;
+	return false;
+}
+//#endregion
+exports.DateType = DateType;
+exports.getDateType = getDateType;
+exports.getInputSelectedState = getInputSelectedState;
+exports.isSwitchDateType = isSwitchDateType;

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

@@ -0,0 +1,101 @@
+"use client";
+import { getDatePattern, getSelectIndexGap, isCursorAfterMonth } from "../DateInput/utils.js";
+//#region ../../node_modules/rsuite/esm/DateRangeInput/utils.js
+var DateType = /*#__PURE__*/ function(DateType) {
+	DateType["Start"] = "Start";
+	DateType["End"] = "End";
+	return DateType;
+}({});
+function getInputSelectedState(options) {
+	const { input, direction, formatStr, rangeFormatStr, localize, selectedMonth, valueOffset = 0, character, dateType, dateString } = options;
+	const getPatternSelectedIndexes = (pattern) => {
+		let selectionStart = 0;
+		let selectionEnd = 0;
+		if (dateType === DateType.Start) {
+			selectionStart = rangeFormatStr.indexOf(pattern);
+			selectionEnd = rangeFormatStr.split(character)[0].lastIndexOf(pattern) + 1;
+		} else if (dateType === DateType.End) {
+			const position = rangeFormatStr.indexOf(character) + character.length;
+			selectionStart = rangeFormatStr.indexOf(pattern, position);
+			selectionEnd = rangeFormatStr.lastIndexOf(pattern) + 1;
+		}
+		const endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
+		if (dateType === DateType.End && endDateGap > 0) {
+			selectionStart += endDateGap;
+			selectionEnd += endDateGap;
+		}
+		const gap = getSelectIndexGap({
+			pattern,
+			formatStr,
+			valueOffset,
+			selectedMonth,
+			localize
+		});
+		const isSelectedMonth = pattern === "M";
+		if (selectedMonth === null && !(isSelectedMonth && valueOffset !== 0)) return {
+			selectionStart,
+			selectionEnd
+		};
+		if (isSelectedMonth) return {
+			selectionStart,
+			selectionEnd: selectionEnd + gap
+		};
+		if (isCursorAfterMonth(selectionStart, formatStr)) return {
+			selectionStart: selectionStart + gap,
+			selectionEnd: selectionEnd + gap
+		};
+		return {
+			selectionStart,
+			selectionEnd
+		};
+	};
+	if (typeof input.selectionEnd === "number" && typeof input.selectionStart === "number") {
+		let index = input.selectionStart;
+		let positionOffset = -1;
+		if (direction === "left") index = input.selectionStart - 1;
+		else if (direction === "right") {
+			index = input.selectionEnd + 1;
+			positionOffset = 1;
+		}
+		const endDateIndex = dateString.indexOf(character) + character.length;
+		const datePattern = getDatePattern({
+			selectionIndex: dateType === DateType.End ? index - endDateIndex : index,
+			positionOffset,
+			formatStr,
+			dateString,
+			valueOffset,
+			selectedMonth,
+			localize
+		});
+		return {
+			selectedPattern: datePattern,
+			...getPatternSelectedIndexes(datePattern)
+		};
+	}
+	return {
+		selectedPattern: "y",
+		selectionStart: 0,
+		selectionEnd: 0
+	};
+}
+function getDateType(dateString, character, cursorIndex) {
+	if (cursorIndex > dateString.indexOf(character)) return DateType.End;
+	return DateType.Start;
+}
+function isSwitchDateType(dateString, character, cursorIndex, direction) {
+	const characterIndex = dateString.indexOf(character);
+	let startIndex = cursorIndex;
+	let endIndex = startIndex + character.length;
+	if (direction === "left") {
+		endIndex = cursorIndex;
+		startIndex = endIndex - character.length;
+	}
+	if (dateString.substring(startIndex, endIndex) === character) return true;
+	if (direction === "right") {
+		if (!dateString.substring(cursorIndex, characterIndex).match(/[0-9a-zA-Z]/)) return true;
+	}
+	if (!dateString.substring(characterIndex, cursorIndex).match(/[0-9a-zA-Z]/)) return true;
+	return false;
+}
+//#endregion
+export { DateType, getDateType, getInputSelectedState, isSwitchDateType };

package/dist/node_modules/rsuite/esm/DateRangePicker/Calendar.cjs

@@ -0,0 +1,42 @@
+"use client";
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_extends = require("../../../@babel/runtime/helpers/esm/extends.cjs");
+const require_forwardRef = require("../internals/utils/react/forwardRef.cjs");
+const require_index = require("../internals/constants/index.cjs");
+const require_addMonths = require("../../../date-fns/addMonths.cjs");
+const require_startOfToday = require("../../../date-fns/startOfToday.cjs");
+const require_useCalendarHandlers = require("./hooks/useCalendarHandlers.cjs");
+const require_CalendarContainer = require("../Calendar/CalendarContainer.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+//#region ../../node_modules/rsuite/esm/DateRangePicker/Calendar.js
+var Calendar = require_forwardRef.forwardRef((props, ref) => {
+	const { as: Component = require_CalendarContainer.default, calendarDateRange = [require_startOfToday.default(), require_addMonths.default(require_startOfToday.default(), 1)], format = "yyyy-MM-dd", disabledDate, index = 0, limitEndYear, limitStartYear, onChangeCalendarMonth, onChangeCalendarTime, onSelect, renderTitle, value = [], ...rest } = props;
+	const calendarKey = index === 0 ? "start" : "end";
+	const calendarHandlers = require_useCalendarHandlers.default({
+		index,
+		calendarDateRange,
+		onChangeCalendarMonth,
+		onChangeCalendarTime,
+		onSelect
+	});
+	const disableCalendarDate = (0, react.useCallback)((date) => {
+		return disabledDate?.(date, value, require_index.DATERANGE_DISABLED_TARGET.CALENDAR);
+	}, [disabledDate, value]);
+	const handleRenderTitle = (0, react.useCallback)((date) => {
+		return renderTitle?.(date, calendarKey);
+	}, [renderTitle, calendarKey]);
+	return /*#__PURE__*/ react.default.createElement(Component, require_extends._extends({ "data-testid": `calendar-${calendarKey}` }, rest, calendarHandlers, {
+		index,
+		format,
+		dateRange: value,
+		disabledDate: disableCalendarDate,
+		limitEndYear,
+		limitStartYear,
+		renderTitle: handleRenderTitle,
+		ref
+	}));
+});
+Calendar.displayName = "DateRangePicker.Calendar";
+//#endregion
+exports.default = Calendar;

package/dist/node_modules/rsuite/esm/DateRangePicker/Calendar.js

@@ -0,0 +1,40 @@
+"use client";
+import { _extends } from "../../../@babel/runtime/helpers/esm/extends.js";
+import { forwardRef as forwardRef$1 } from "../internals/utils/react/forwardRef.js";
+import { DATERANGE_DISABLED_TARGET } from "../internals/constants/index.js";
+import addMonths from "../../../date-fns/addMonths.js";
+import startOfToday from "../../../date-fns/startOfToday.js";
+import useCalendarHandlers from "./hooks/useCalendarHandlers.js";
+import CalendarContainer from "../Calendar/CalendarContainer.js";
+import React, { useCallback } from "react";
+//#region ../../node_modules/rsuite/esm/DateRangePicker/Calendar.js
+var Calendar = forwardRef$1((props, ref) => {
+	const { as: Component = CalendarContainer, calendarDateRange = [startOfToday(), addMonths(startOfToday(), 1)], format = "yyyy-MM-dd", disabledDate, index = 0, limitEndYear, limitStartYear, onChangeCalendarMonth, onChangeCalendarTime, onSelect, renderTitle, value = [], ...rest } = props;
+	const calendarKey = index === 0 ? "start" : "end";
+	const calendarHandlers = useCalendarHandlers({
+		index,
+		calendarDateRange,
+		onChangeCalendarMonth,
+		onChangeCalendarTime,
+		onSelect
+	});
+	const disableCalendarDate = useCallback((date) => {
+		return disabledDate?.(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
+	}, [disabledDate, value]);
+	const handleRenderTitle = useCallback((date) => {
+		return renderTitle?.(date, calendarKey);
+	}, [renderTitle, calendarKey]);
+	return /*#__PURE__*/ React.createElement(Component, _extends({ "data-testid": `calendar-${calendarKey}` }, rest, calendarHandlers, {
+		index,
+		format,
+		dateRange: value,
+		disabledDate: disableCalendarDate,
+		limitEndYear,
+		limitStartYear,
+		renderTitle: handleRenderTitle,
+		ref
+	}));
+});
+Calendar.displayName = "DateRangePicker.Calendar";
+//#endregion
+export { Calendar as default };