@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/DatePicker/core/PickerInput/Selector/ClearIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon.mjs","names":["React"],"sources":["../../../../../src/DatePicker/core/PickerInput/Selector/ClearIcon.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport PickerContext from '../context';\n\nexport interface ClearIconProps extends React.HtmlHTMLAttributes<HTMLElement> {\n  icon?: React.ReactNode;\n  onClear: VoidFunction;\n}\n\nexport default function ClearIcon({ icon, onClear, ...restProps }: ClearIconProps) {\n  const { prefixCls, classNames, styles, locale } = React.use(PickerContext);\n\n  return (\n    <button\n      {...restProps}\n      aria-label={locale.clear}\n      className={clsx(`${prefixCls}-clear`, classNames.suffix)}\n      style={styles.suffix}\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation();\n        onClear();\n      }}\n      onMouseDown={(e) => {\n        e.preventDefault();\n      }}\n    >\n      {icon}\n    </button>\n  );\n}\n"],"mappings":";;;;;AAUA,SAAwB,UAAU,EAAE,MAAM,SAAS,GAAG,aAA6B;CACjF,MAAM,EAAE,WAAW,YAAY,QAAQ,WAAWA,QAAM,IAAI,aAAa;CAEzE,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,cAAY,OAAO;EACnB,WAAW,KAAK,GAAG,UAAU,SAAS,WAAW,MAAM;EACvD,OAAO,OAAO;EACd,MAAK;EACL,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,QAAQ;EACV;EACA,cAAc,MAAM;GAClB,EAAE,eAAe;EACnB;EAEC,UAAA;CACK,CAAA;AAEZ"}

package/es/DatePicker/core/PickerInput/Selector/Icon.mjs

@@ -0,0 +1,19 @@
+import PickerContext from "../context.mjs";
+import { isReactRenderable } from "../../utils/common.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerInput/Selector/Icon.tsx
+function Icon({ icon, ...restProps }) {
+	const { prefixCls, classNames, styles } = React$1.use(PickerContext);
+	return isReactRenderable(icon) ? /* @__PURE__ */ jsx("span", {
+		className: clsx(`${prefixCls}-suffix`, classNames.suffix),
+		style: styles.suffix,
+		...restProps,
+		children: icon
+	}) : null;
+}
+//#endregion
+export { Icon as default };
+
+//# sourceMappingURL=Icon.mjs.map

package/es/DatePicker/core/PickerInput/Selector/Icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.mjs","names":["React"],"sources":["../../../../../src/DatePicker/core/PickerInput/Selector/Icon.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { isReactRenderable } from '../../utils/common';\nimport PickerContext from '../context';\n\nexport interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {\n  icon?: React.ReactNode;\n}\n\nexport default function Icon({ icon, ...restProps }: IconProps) {\n  const { prefixCls, classNames, styles } = React.use(PickerContext);\n\n  return isReactRenderable(icon) ? (\n    <span\n      className={clsx(`${prefixCls}-suffix`, classNames.suffix)}\n      style={styles.suffix}\n      {...restProps}\n    >\n      {icon}\n    </span>\n  ) : null;\n}\n"],"mappings":";;;;;;AAUA,SAAwB,KAAK,EAAE,MAAM,GAAG,aAAwB;CAC9D,MAAM,EAAE,WAAW,YAAY,WAAWA,QAAM,IAAI,aAAa;CAEjE,OAAO,kBAAkB,IAAI,IAC3B,oBAAC,QAAD;EACE,WAAW,KAAK,GAAG,UAAU,UAAU,WAAW,MAAM;EACxD,OAAO,OAAO;EACd,GAAI;EAEH,UAAA;CACG,CAAA,IACJ;AACN"}

package/es/DatePicker/core/PickerInput/Selector/Input.mjs

@@ -0,0 +1,237 @@
+import { useEvent, useLayoutEffect as useLayoutEffect$1 } from "../../hooks/react.mjs";
+import PickerContext from "../context.mjs";
+import { raf } from "../../utils/common.mjs";
+import { leftPad } from "../../utils/miscUtil.mjs";
+import Icon from "./Icon.mjs";
+import useLockEffect from "../hooks/useLockEffect.mjs";
+import MaskFormat from "./MaskFormat.mjs";
+import { getMaskRange } from "./util.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerInput/Selector/Input.tsx
+const Input = ({ ref, ...props }) => {
+	const { className, active, showActiveCls = true, suffixIcon, format, validateFormat, onChange, onInput, helped, onHelp, onSubmit, onKeyDown, preserveInvalidOnBlur = false, invalid, clearIcon, ...restProps } = props;
+	const { value, onFocus, onBlur, onMouseUp } = props;
+	const { prefixCls, input: Component = "input", classNames, styles } = React$1.use(PickerContext);
+	const inputPrefixCls = `${prefixCls}-input`;
+	const [focused, setFocused] = React$1.useState(false);
+	const [internalInputValue, setInputValue] = React$1.useState(value);
+	const [focusCellText, setFocusCellText] = React$1.useState("");
+	const [focusCellIndex, setFocusCellIndex] = React$1.useState(null);
+	const [forceSelectionSyncMark, forceSelectionSync] = React$1.useState(null);
+	const inputValue = internalInputValue || "";
+	React$1.useEffect(() => {
+		setInputValue(value);
+	}, [value]);
+	const holderRef = React$1.useRef(null);
+	const inputRef = React$1.useRef(null);
+	const mouseDownRef = React$1.useRef(false);
+	React$1.useImperativeHandle(ref, () => ({
+		nativeElement: holderRef.current,
+		inputElement: inputRef.current,
+		focus: (options) => {
+			inputRef.current.focus(options);
+		},
+		blur: () => {
+			inputRef.current.blur();
+		}
+	}));
+	const maskFormat = React$1.useMemo(() => new MaskFormat(format || ""), [format]);
+	const [selectionStart, selectionEnd] = React$1.useMemo(() => {
+		if (helped) return [0, 0];
+		return maskFormat.getSelection(focusCellIndex);
+	}, [
+		maskFormat,
+		focusCellIndex,
+		helped
+	]);
+	const onModify = (text) => {
+		if (text && text !== format && text !== value) onHelp();
+	};
+	/**
+	* Triggered by paste, keyDown and focus to show format
+	*/
+	const triggerInputChange = useEvent((text) => {
+		if (validateFormat(text)) onChange(text);
+		setInputValue(text);
+		onModify(text);
+	});
+	const onInternalChange = (event) => {
+		if (!format) {
+			const text = event.target.value;
+			onModify(text);
+			setInputValue(text);
+			onChange(text);
+		}
+	};
+	const onFormatPaste = (event) => {
+		if (mouseDownRef.current) {
+			event.preventDefault();
+			return;
+		}
+		const pasteText = event.clipboardData.getData("text");
+		if (validateFormat(pasteText)) triggerInputChange(pasteText);
+	};
+	const onFormatMouseDown = () => {
+		mouseDownRef.current = true;
+	};
+	const onFormatMouseUp = (event) => {
+		const { selectionStart: start } = event.target;
+		const closeMaskIndex = maskFormat.getMaskCellIndex(start);
+		setFocusCellIndex(closeMaskIndex);
+		forceSelectionSync({});
+		onMouseUp?.(event);
+		mouseDownRef.current = false;
+	};
+	const onFormatFocus = (event) => {
+		setFocused(true);
+		setFocusCellIndex(0);
+		setFocusCellText("");
+		onFocus(event);
+	};
+	const onSharedBlur = (event) => {
+		onBlur(event);
+	};
+	const onFormatBlur = (event) => {
+		setFocused(false);
+		onSharedBlur(event);
+	};
+	useLockEffect(active, () => {
+		if (!active && !preserveInvalidOnBlur) setInputValue(value);
+	});
+	const onSharedKeyDown = (event) => {
+		if (event.key === "Enter" && validateFormat(inputValue)) onSubmit();
+		onKeyDown?.(event);
+	};
+	const onFormatKeyDown = (event) => {
+		if (mouseDownRef.current) {
+			event.preventDefault();
+			return;
+		}
+		onSharedKeyDown(event);
+		const { key } = event;
+		let nextCellText = null;
+		let nextFillText = null;
+		const maskCellLen = selectionEnd - selectionStart;
+		const cellFormat = format.slice(selectionStart, selectionEnd);
+		const offsetCellIndex = (offset) => {
+			setFocusCellIndex((idx) => {
+				let nextIndex = idx + offset;
+				nextIndex = Math.max(nextIndex, 0);
+				nextIndex = Math.min(nextIndex, maskFormat.size() - 1);
+				return nextIndex;
+			});
+		};
+		const offsetCellValue = (offset) => {
+			const [rangeStart, rangeEnd, rangeDefault] = getMaskRange(cellFormat);
+			const currentText = inputValue.slice(selectionStart, selectionEnd);
+			const currentTextNum = Number(currentText);
+			if (isNaN(currentTextNum)) return String(rangeDefault ? rangeDefault : offset > 0 ? rangeStart : rangeEnd);
+			const num = currentTextNum + offset;
+			const range = rangeEnd - rangeStart + 1;
+			return String(rangeStart + (range + num - rangeStart) % range);
+		};
+		switch (key) {
+			case "Backspace":
+			case "Delete":
+				nextCellText = "";
+				nextFillText = cellFormat;
+				break;
+			case "ArrowLeft":
+				nextCellText = "";
+				offsetCellIndex(-1);
+				break;
+			case "ArrowRight":
+				nextCellText = "";
+				offsetCellIndex(1);
+				break;
+			case "ArrowUp":
+				nextCellText = "";
+				nextFillText = offsetCellValue(1);
+				break;
+			case "ArrowDown":
+				nextCellText = "";
+				nextFillText = offsetCellValue(-1);
+				break;
+			default: if (!isNaN(Number(key))) {
+				nextCellText = focusCellText + key;
+				nextFillText = nextCellText;
+			}
+		}
+		if (nextCellText !== null) {
+			setFocusCellText(nextCellText);
+			if (nextCellText.length >= maskCellLen) {
+				offsetCellIndex(1);
+				setFocusCellText("");
+			}
+		}
+		if (nextFillText !== null) {
+			const nextFocusValue = inputValue.slice(0, selectionStart) + leftPad(nextFillText, maskCellLen) + inputValue.slice(selectionEnd);
+			triggerInputChange(nextFocusValue.slice(0, format.length));
+		}
+		forceSelectionSync({});
+	};
+	const rafRef = React$1.useRef(void 0);
+	useLayoutEffect$1(() => {
+		if (!focused || !format || mouseDownRef.current) return;
+		if (!maskFormat.match(inputValue)) {
+			triggerInputChange(format);
+			return;
+		}
+		inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+		rafRef.current = raf(() => {
+			inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+		});
+		return () => {
+			raf.cancel(rafRef.current);
+		};
+	}, [
+		maskFormat,
+		format,
+		focused,
+		inputValue,
+		focusCellIndex,
+		selectionStart,
+		selectionEnd,
+		forceSelectionSyncMark,
+		triggerInputChange
+	]);
+	const inputProps = format ? {
+		onFocus: onFormatFocus,
+		onBlur: onFormatBlur,
+		onKeyDown: onFormatKeyDown,
+		onMouseDown: onFormatMouseDown,
+		onMouseUp: onFormatMouseUp,
+		onPaste: onFormatPaste
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: holderRef,
+		className: clsx(inputPrefixCls, {
+			[`${inputPrefixCls}-active`]: active && showActiveCls,
+			[`${inputPrefixCls}-placeholder`]: helped
+		}, className),
+		children: [
+			/* @__PURE__ */ jsx(Component, {
+				"aria-invalid": invalid,
+				autoComplete: "off",
+				ref: inputRef,
+				...restProps,
+				onKeyDown: onSharedKeyDown,
+				onBlur: onSharedBlur,
+				...inputProps,
+				className: classNames.input,
+				style: styles.input,
+				value: inputValue,
+				onChange: onInternalChange
+			}),
+			/* @__PURE__ */ jsx(Icon, { icon: suffixIcon }),
+			clearIcon
+		]
+	});
+};
+if (process.env.NODE_ENV !== "production") Input.displayName = "Input";
+//#endregion
+export { Input as default };
+
+//# sourceMappingURL=Input.mjs.map

package/es/DatePicker/core/PickerInput/Selector/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","names":["React"],"sources":["../../../../../src/DatePicker/core/PickerInput/Selector/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { useEvent, useLayoutEffect } from '../../hooks/react';\nimport type { PickerRef } from '../../interface';\nimport { raf } from '../../utils/common';\nimport { leftPad } from '../../utils/miscUtil';\nimport PickerContext from '../context';\nimport useLockEffect from '../hooks/useLockEffect';\nimport Icon from './Icon';\nimport MaskFormat from './MaskFormat';\nimport { getMaskRange } from './util';\n\n// Format logic\n//\n// First time on focus:\n//  1. check if the text is valid, if not fill with format\n//  2. set highlight cell to the first cell\n// Cells\n//  1. Selection the index cell, set inner `cacheValue` to ''\n//  2. Key input filter non-number char, patch after the `cacheValue`\n//    1. Replace the `cacheValue` with input align the cell length\n//    2. Re-selection the mask cell\n//  3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell\n\nexport interface InputRef extends PickerRef {\n  inputElement: HTMLInputElement;\n}\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  active?: boolean;\n  clearIcon?: React.ReactNode;\n  format?: string | null;\n  /** Meaning current is from the hover cell getting the placeholder text */\n  helped?: boolean;\n  invalid?: boolean;\n  onChange: (value: string) => void;\n  /**\n   * Trigger when input need additional help.\n   * Like open the popup for interactive.\n   */\n  onHelp: () => void;\n  onSubmit: VoidFunction;\n  preserveInvalidOnBlur?: boolean;\n  /** Used for single picker only */\n  showActiveCls?: boolean;\n  suffixIcon?: React.ReactNode;\n  validateFormat: (value: string) => boolean;\n\n  value?: string;\n}\n\nconst Input = ({ ref, ...props }: InputProps & { ref?: React.RefObject<InputRef | null> }) => {\n  const {\n    className,\n    active,\n    showActiveCls = true,\n    suffixIcon,\n    format,\n    validateFormat,\n    onChange,\n    onInput,\n    helped,\n    onHelp,\n    onSubmit,\n    onKeyDown,\n    preserveInvalidOnBlur = false,\n    invalid,\n    clearIcon,\n    // Pass to input\n    ...restProps\n  } = props;\n  const { value, onFocus, onBlur, onMouseUp } = props;\n\n  const { prefixCls, input: Component = 'input', classNames, styles } = React.use(PickerContext);\n  const inputPrefixCls = `${prefixCls}-input`;\n\n  // ======================== Value =========================\n  const [focused, setFocused] = React.useState(false);\n  const [internalInputValue, setInputValue] = React.useState<string | undefined>(value);\n  const [focusCellText, setFocusCellText] = React.useState<string>('');\n  const [focusCellIndex, setFocusCellIndex] = React.useState<number | null>(null);\n  const [forceSelectionSyncMark, forceSelectionSync] = React.useState<object | null>(null);\n\n  const inputValue = internalInputValue || '';\n\n  // Sync value if needed\n  React.useEffect(() => {\n    setInputValue(value);\n  }, [value]);\n\n  // ========================= Refs =========================\n  const holderRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  // When mousedown get focus, defer selection to mouseUp so click position is used\n  const mouseDownRef = React.useRef(false);\n\n  React.useImperativeHandle(ref, () => ({\n    nativeElement: holderRef.current!,\n    inputElement: inputRef.current!,\n    focus: (options) => {\n      inputRef.current!.focus(options);\n    },\n    blur: () => {\n      inputRef.current!.blur();\n    },\n  }));\n\n  // ======================== Format ========================\n  const maskFormat = React.useMemo(() => new MaskFormat(format || ''), [format]);\n\n  const [selectionStart, selectionEnd] = React.useMemo(() => {\n    if (helped) {\n      return [0, 0];\n    }\n\n    return maskFormat.getSelection(focusCellIndex!);\n  }, [maskFormat, focusCellIndex, helped]);\n\n  // ======================== Modify ========================\n  // When input modify content, trigger `onHelp` if is not the format\n  const onModify = (text: string) => {\n    if (text && text !== format && text !== value) {\n      onHelp();\n    }\n  };\n\n  // ======================== Change ========================\n  /**\n   * Triggered by paste, keyDown and focus to show format\n   */\n  const triggerInputChange = useEvent((text: string) => {\n    if (validateFormat(text)) {\n      onChange(text);\n    }\n    setInputValue(text);\n    onModify(text);\n  });\n\n  // Directly trigger `onChange` if `format` is empty\n  const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    // Hack `onChange` with format to do nothing\n    if (!format) {\n      const text = event.target.value;\n\n      onModify(text);\n      setInputValue(text);\n      onChange(text);\n    }\n  };\n\n  const onFormatPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    // Block paste until selection is set (after mouseUp when focus was by mousedown)\n    if (mouseDownRef.current) {\n      event.preventDefault();\n      return;\n    }\n\n    // Get paste text\n    const pasteText = event.clipboardData.getData('text');\n\n    if (validateFormat(pasteText)) {\n      triggerInputChange(pasteText);\n    }\n  };\n\n  // ======================== Mouse =========================\n  // When `mouseDown` get focus, it's better to not to change the selection\n  // Since the up position maybe not is the first cell\n  const onFormatMouseDown: React.MouseEventHandler<HTMLInputElement> = () => {\n    mouseDownRef.current = true;\n  };\n\n  const onFormatMouseUp: React.MouseEventHandler<HTMLInputElement> = (event) => {\n    const { selectionStart: start } = event.target as HTMLInputElement;\n\n    const closeMaskIndex = maskFormat.getMaskCellIndex(start!);\n    setFocusCellIndex(closeMaskIndex);\n\n    // Force update the selection\n    forceSelectionSync({});\n\n    onMouseUp?.(event);\n\n    mouseDownRef.current = false;\n  };\n\n  // ====================== Focus Blur ======================\n  const onFormatFocus: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    setFocused(true);\n    setFocusCellIndex(0);\n    setFocusCellText('');\n\n    onFocus!(event);\n  };\n\n  const onSharedBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    onBlur!(event);\n  };\n\n  const onFormatBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    setFocused(false);\n\n    onSharedBlur(event);\n  };\n\n  // ======================== Active ========================\n  // Check if blur need reset input value\n  useLockEffect(active, () => {\n    if (!active && !preserveInvalidOnBlur) {\n      setInputValue(value);\n    }\n  });\n\n  // ======================= Keyboard =======================\n  const onSharedKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === 'Enter' && validateFormat(inputValue)) {\n      onSubmit();\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const onFormatKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    // Block key input until selection is set (after mouseUp when focus was by mousedown)\n    if (mouseDownRef.current) {\n      event.preventDefault();\n      return;\n    }\n\n    onSharedKeyDown(event);\n\n    const { key } = event;\n\n    // Save the cache with cell text\n    let nextCellText: string | null = null;\n\n    // Fill in the input\n    let nextFillText: string | null = null;\n\n    const maskCellLen = selectionEnd - selectionStart;\n    const cellFormat = format!.slice(selectionStart, selectionEnd);\n\n    // Cell Index\n    const offsetCellIndex = (offset: number) => {\n      setFocusCellIndex((idx) => {\n        let nextIndex = idx! + offset;\n        nextIndex = Math.max(nextIndex, 0);\n        nextIndex = Math.min(nextIndex, maskFormat.size() - 1);\n        return nextIndex;\n      });\n    };\n\n    // Range\n    const offsetCellValue = (offset: number) => {\n      const [rangeStart, rangeEnd, rangeDefault] = getMaskRange(cellFormat);\n\n      const currentText = inputValue.slice(selectionStart, selectionEnd);\n      const currentTextNum = Number(currentText);\n\n      if (isNaN(currentTextNum)) {\n        return String(rangeDefault ? rangeDefault : offset > 0 ? rangeStart : rangeEnd);\n      }\n\n      const num = currentTextNum + offset;\n      const range = rangeEnd - rangeStart + 1;\n      return String(rangeStart + ((range + num - rangeStart) % range));\n    };\n\n    switch (key) {\n      // =============== Remove ===============\n      case 'Backspace':\n      case 'Delete': {\n        nextCellText = '';\n        nextFillText = cellFormat;\n        break;\n      }\n\n      // =============== Arrows ===============\n      // Left key\n      case 'ArrowLeft': {\n        nextCellText = '';\n        offsetCellIndex(-1);\n        break;\n      }\n\n      // Right key\n      case 'ArrowRight': {\n        nextCellText = '';\n        offsetCellIndex(1);\n        break;\n      }\n\n      // Up key\n      case 'ArrowUp': {\n        nextCellText = '';\n        nextFillText = offsetCellValue(1);\n        break;\n      }\n\n      // Down key\n      case 'ArrowDown': {\n        nextCellText = '';\n        nextFillText = offsetCellValue(-1);\n        break;\n      }\n\n      // =============== Number ===============\n      default: {\n        if (!isNaN(Number(key))) {\n          nextCellText = focusCellText + key;\n          nextFillText = nextCellText;\n        }\n        break;\n      }\n    }\n\n    // Update cell text\n    if (nextCellText !== null) {\n      setFocusCellText(nextCellText);\n\n      if (nextCellText.length >= maskCellLen) {\n        // Go to next cell\n        offsetCellIndex(1);\n        setFocusCellText('');\n      }\n    }\n\n    // Update the input text\n    if (nextFillText !== null) {\n      // Replace selection range with `nextCellText`\n      const nextFocusValue =\n        // before\n        inputValue.slice(0, selectionStart) +\n        // replace\n        leftPad(nextFillText, maskCellLen) +\n        // after\n        inputValue.slice(selectionEnd);\n      triggerInputChange(nextFocusValue.slice(0, format!.length));\n    }\n\n    // Always trigger selection sync after key down\n    forceSelectionSync({});\n  };\n\n  // ======================== Format ========================\n  const rafRef = React.useRef<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (!focused || !format || mouseDownRef.current) {\n      return;\n    }\n\n    // Reset with format if not match\n    if (!maskFormat.match(inputValue)) {\n      triggerInputChange(format);\n      return;\n    }\n\n    // Match the selection range\n    inputRef.current!.setSelectionRange(selectionStart, selectionEnd);\n\n    // Chrome has the bug anchor position looks not correct but actually correct\n    rafRef.current = raf(() => {\n      inputRef.current!.setSelectionRange(selectionStart, selectionEnd);\n    });\n\n    return () => {\n      raf.cancel(rafRef.current!);\n    };\n  }, [\n    maskFormat,\n    format,\n    focused,\n    inputValue,\n    focusCellIndex,\n    selectionStart,\n    selectionEnd,\n    forceSelectionSyncMark,\n    triggerInputChange,\n  ]);\n\n  // ======================== Render ========================\n  // Input props for format\n  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = format\n    ? {\n        onFocus: onFormatFocus,\n        onBlur: onFormatBlur,\n        onKeyDown: onFormatKeyDown,\n        onMouseDown: onFormatMouseDown,\n        onMouseUp: onFormatMouseUp,\n        onPaste: onFormatPaste,\n      }\n    : {};\n\n  return (\n    <div\n      ref={holderRef}\n      className={clsx(\n        inputPrefixCls,\n        {\n          [`${inputPrefixCls}-active`]: active && showActiveCls,\n          [`${inputPrefixCls}-placeholder`]: helped,\n        },\n        className,\n      )}\n    >\n      <Component\n        aria-invalid={invalid}\n        autoComplete=\"off\"\n        ref={inputRef}\n        {...restProps}\n        onKeyDown={onSharedKeyDown}\n        onBlur={onSharedBlur}\n        // Replace with format\n        {...inputProps}\n        // Value\n        className={classNames.input}\n        style={styles.input}\n        value={inputValue}\n        onChange={onInternalChange}\n      />\n      <Icon icon={suffixIcon} />\n      {clearIcon}\n    </div>\n  );\n};\n\nif (process.env.NODE_ENV !== 'production') {\n  Input.displayName = 'Input';\n}\n\nexport default Input;\n"],"mappings":"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"}

package/es/DatePicker/core/PickerInput/Selector/MaskFormat.mjs

@@ -0,0 +1,70 @@
+//#region src/DatePicker/core/PickerInput/Selector/MaskFormat.ts
+const FORMAT_KEYS = [
+	"YYYY",
+	"MM",
+	"DD",
+	"HH",
+	"mm",
+	"ss",
+	"SSS"
+];
+const REPLACE_KEY = "顧";
+var MaskFormat = class {
+	constructor(format) {
+		this.format = format;
+		const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join("|");
+		const replaceReg = new RegExp(replaceKeys, "g");
+		this.maskFormat = format.replace(replaceReg, (key) => REPLACE_KEY.repeat(key.length));
+		const cellReg = new RegExp(`(${FORMAT_KEYS.join("|")})`);
+		const strCells = (format.split(cellReg) || []).filter((str) => str);
+		let offset = 0;
+		this.cells = strCells.map((text) => {
+			const mask = FORMAT_KEYS.includes(text);
+			const start = offset;
+			const end = offset + text.length;
+			offset = end;
+			return {
+				text,
+				mask,
+				start,
+				end
+			};
+		});
+		this.maskCells = this.cells.filter((cell) => cell.mask);
+	}
+	getSelection(maskCellIndex) {
+		const { start, end } = this.maskCells[maskCellIndex] || {};
+		return [start || 0, end || 0];
+	}
+	/** Check given text match format */
+	match(text) {
+		for (let i = 0; i < this.maskFormat.length; i += 1) {
+			const maskChar = this.maskFormat[i];
+			const textChar = text[i];
+			if (!textChar || maskChar !== REPLACE_KEY && maskChar !== textChar) return false;
+		}
+		return true;
+	}
+	/** Get mask cell count */
+	size() {
+		return this.maskCells.length;
+	}
+	getMaskCellIndex(anchorIndex) {
+		let closetDist = Number.MAX_SAFE_INTEGER;
+		let closetIndex = 0;
+		for (let i = 0; i < this.maskCells.length; i += 1) {
+			const { start, end } = this.maskCells[i];
+			if (anchorIndex >= start && anchorIndex <= end) return i;
+			const dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));
+			if (dist < closetDist) {
+				closetDist = dist;
+				closetIndex = i;
+			}
+		}
+		return closetIndex;
+	}
+};
+//#endregion
+export { MaskFormat as default };
+
+//# sourceMappingURL=MaskFormat.mjs.map

package/es/DatePicker/core/PickerInput/Selector/MaskFormat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskFormat.mjs","names":[],"sources":["../../../../../src/DatePicker/core/PickerInput/Selector/MaskFormat.ts"],"sourcesContent":["const FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'];\n\nexport type FormatKey = (typeof FORMAT_KEYS)[number];\n\n// Use Chinese character to avoid conflict with the mask format\nconst REPLACE_KEY = '顧';\n\nexport interface Cell {\n  end: number;\n  mask: boolean;\n  start: number;\n  text: string;\n}\n\nexport default class MaskFormat {\n  format: string;\n  maskFormat: string;\n  cells: Cell[];\n  maskCells: Cell[];\n\n  constructor(format: string) {\n    this.format = format;\n\n    // Generate mask format\n    const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join('|');\n    const replaceReg = new RegExp(replaceKeys, 'g');\n\n    this.maskFormat = format.replace(\n      replaceReg,\n      // Use Chinese character to avoid user use it in format\n      (key: string) => REPLACE_KEY.repeat(key.length),\n    );\n\n    // Generate cells\n    const cellReg = new RegExp(`(${FORMAT_KEYS.join('|')})`);\n    const strCells = (format.split(cellReg) || []).filter((str) => str);\n\n    let offset = 0;\n    this.cells = strCells.map((text) => {\n      const mask = FORMAT_KEYS.includes(text);\n\n      const start = offset;\n      const end = offset + text.length;\n      offset = end;\n\n      return {\n        text,\n        mask,\n        start,\n        end,\n      };\n    });\n\n    // Mask cells\n    this.maskCells = this.cells.filter((cell) => cell.mask);\n  }\n\n  getSelection(maskCellIndex: number): [start: number, end: number] {\n    const { start, end } = this.maskCells[maskCellIndex] || {};\n    return [start || 0, end || 0];\n  }\n\n  /** Check given text match format */\n  match(text: string) {\n    for (let i = 0; i < this.maskFormat.length; i += 1) {\n      const maskChar = this.maskFormat[i];\n      const textChar = text[i];\n\n      if (!textChar || (maskChar !== REPLACE_KEY && maskChar !== textChar)) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  /** Get mask cell count */\n  size() {\n    return this.maskCells.length;\n  }\n\n  getMaskCellIndex(anchorIndex: number) {\n    let closetDist = Number.MAX_SAFE_INTEGER;\n    let closetIndex = 0;\n\n    for (let i = 0; i < this.maskCells.length; i += 1) {\n      const { start, end } = this.maskCells[i];\n      if (anchorIndex >= start && anchorIndex <= end) {\n        return i;\n      }\n\n      const dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));\n      if (dist < closetDist) {\n        closetDist = dist;\n        closetIndex = i;\n      }\n    }\n\n    return closetIndex;\n  }\n}\n"],"mappings":";AAAA,MAAM,cAAc;CAAC;CAAQ;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAKhE,MAAM,cAAc;AASpB,IAAqB,aAArB,MAAgC;CAM9B,YAAY,QAAgB;EAC1B,KAAK,SAAS;EAGd,MAAM,cAAc,YAAY,KAAK,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG;EACjE,MAAM,aAAa,IAAI,OAAO,aAAa,GAAG;EAE9C,KAAK,aAAa,OAAO,QACvB,aAEC,QAAgB,YAAY,OAAO,IAAI,MAAM,CAChD;EAGA,MAAM,UAAU,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,EAAE,EAAE;EACvD,MAAM,YAAY,OAAO,MAAM,OAAO,KAAK,CAAC,EAAA,CAAG,QAAQ,QAAQ,GAAG;EAElE,IAAI,SAAS;EACb,KAAK,QAAQ,SAAS,KAAK,SAAS;GAClC,MAAM,OAAO,YAAY,SAAS,IAAI;GAEtC,MAAM,QAAQ;GACd,MAAM,MAAM,SAAS,KAAK;GAC1B,SAAS;GAET,OAAO;IACL;IACA;IACA;IACA;GACF;EACF,CAAC;EAGD,KAAK,YAAY,KAAK,MAAM,QAAQ,SAAS,KAAK,IAAI;CACxD;CAEA,aAAa,eAAqD;EAChE,MAAM,EAAE,OAAO,QAAQ,KAAK,UAAU,kBAAkB,CAAC;EACzD,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;CAC9B;;CAGA,MAAM,MAAc;EAClB,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,WAAW,QAAQ,KAAK,GAAG;GAClD,MAAM,WAAW,KAAK,WAAW;GACjC,MAAM,WAAW,KAAK;GAEtB,IAAI,CAAC,YAAa,aAAa,eAAe,aAAa,UACzD,OAAO;EAEX;EAEA,OAAO;CACT;;CAGA,OAAO;EACL,OAAO,KAAK,UAAU;CACxB;CAEA,iBAAiB,aAAqB;EACpC,IAAI,aAAa,OAAO;EACxB,IAAI,cAAc;EAElB,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,UAAU,QAAQ,KAAK,GAAG;GACjD,MAAM,EAAE,OAAO,QAAQ,KAAK,UAAU;GACtC,IAAI,eAAe,SAAS,eAAe,KACzC,OAAO;GAGT,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,cAAc,KAAK,GAAG,KAAK,IAAI,cAAc,GAAG,CAAC;GAChF,IAAI,OAAO,YAAY;IACrB,aAAa;IACb,cAAc;GAChB;EACF;EAEA,OAAO;CACT;AACF"}

package/es/DatePicker/core/PickerInput/Selector/RangeSelector.d.mts

@@ -0,0 +1,8 @@
+import "react";
+//#region src/DatePicker/core/PickerInput/Selector/RangeSelector.d.ts
+export type SelectorIdType = string | {
+  start?: string;
+  end?: string;
+};
+//#endregion
+//# sourceMappingURL=RangeSelector.d.mts.map

package/es/DatePicker/core/PickerInput/Selector/RangeSelector.mjs

@@ -0,0 +1,136 @@
+import { useEvent, useResizeObserver } from "../../hooks/react.mjs";
+import PickerContext from "../context.mjs";
+import { isReactRenderable } from "../../utils/common.mjs";
+import ClearIcon from "./ClearIcon.mjs";
+import useInputProps from "./hooks/useInputProps.mjs";
+import useRootProps from "./hooks/useRootProps.mjs";
+import Icon from "./Icon.mjs";
+import Input from "./Input.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerInput/Selector/RangeSelector.tsx
+function RangeSelector(props, ref) {
+	const { id, prefix, clearIcon, suffixIcon, separator = "~", activeIndex, activeHelp, allHelp, focused, onFocus, onBlur, onKeyDown, locale, generateConfig, placeholder, className, style, onClick, onClear, value, onChange, onSubmit, onInputChange, format, maskFormat, preserveInvalidOnBlur, onInvalid, disabled, invalid, inputReadOnly, direction, onOpenChange, onActiveInfo, placement, onMouseDown, required, "aria-required": ariaRequired, autoFocus, tabIndex, ...restProps } = props;
+	const rtl = direction === "rtl";
+	const { prefixCls, classNames, styles } = React$1.use(PickerContext);
+	const ids = React$1.useMemo(() => {
+		if (typeof id === "string") return [id];
+		const mergedId = id || {};
+		return [mergedId.start, mergedId.end];
+	}, [id]);
+	const rootRef = React$1.useRef(null);
+	const inputStartRef = React$1.useRef(null);
+	const inputEndRef = React$1.useRef(null);
+	const getInput = (index) => [inputStartRef, inputEndRef][index]?.current;
+	React$1.useImperativeHandle(ref, () => ({
+		nativeElement: rootRef.current,
+		startInput: inputStartRef.current.inputElement,
+		endInput: inputEndRef.current.inputElement,
+		focus: (options) => {
+			if (typeof options === "object") {
+				const { index = 0, ...rest } = options || {};
+				getInput(index)?.focus(rest);
+			} else getInput(options ?? 0)?.focus();
+		},
+		blur: () => {
+			getInput(0)?.blur();
+			getInput(1)?.blur();
+		}
+	}));
+	const rootProps = useRootProps(restProps);
+	const mergedPlaceholder = React$1.useMemo(() => Array.isArray(placeholder) ? placeholder : [placeholder, placeholder], [placeholder]);
+	const [getInputProps] = useInputProps({
+		...props,
+		id: ids,
+		placeholder: mergedPlaceholder
+	});
+	const [activeBarStyle, setActiveBarStyle] = React$1.useState({
+		position: "absolute",
+		width: 0
+	});
+	const syncActiveOffset = useEvent(() => {
+		const input = getInput(activeIndex);
+		if (input) {
+			const inputRect = input.nativeElement.getBoundingClientRect();
+			const parentRect = rootRef.current.getBoundingClientRect();
+			const rectOffset = inputRect.left - parentRect.left;
+			setActiveBarStyle((ori) => ({
+				...ori,
+				width: inputRect.width,
+				left: rectOffset
+			}));
+			onActiveInfo([
+				inputRect.left,
+				inputRect.right,
+				parentRect.width
+			]);
+		}
+	});
+	React$1.useEffect(() => {
+		syncActiveOffset();
+	}, [activeIndex]);
+	useResizeObserver(rootRef, syncActiveOffset);
+	const showClear = isReactRenderable(clearIcon) && (value[0] && !disabled[0] || value[1] && !disabled[1]);
+	const startAutoFocus = autoFocus && !disabled[0];
+	const endAutoFocus = autoFocus && !startAutoFocus && !disabled[1];
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		ref: rootRef,
+		style,
+		className: clsx(prefixCls, `${prefixCls}-range`, {
+			[`${prefixCls}-focused`]: focused,
+			[`${prefixCls}-disabled`]: disabled.every((i) => i),
+			[`${prefixCls}-invalid`]: invalid.some((i) => i),
+			[`${prefixCls}-rtl`]: rtl
+		}, className),
+		onClick,
+		onMouseDown: (e) => {
+			const { target } = e;
+			if (target !== inputStartRef.current.inputElement && target !== inputEndRef.current.inputElement) e.preventDefault();
+			onMouseDown?.(e);
+		},
+		children: [
+			isReactRenderable(prefix) && /* @__PURE__ */ jsx("div", {
+				className: clsx(`${prefixCls}-prefix`, classNames.prefix),
+				style: styles.prefix,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				ref: inputStartRef,
+				...getInputProps(0),
+				autoFocus: startAutoFocus,
+				className: `${prefixCls}-input-start`,
+				"date-range": "start",
+				tabIndex
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}-range-separator`,
+				children: separator
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				ref: inputEndRef,
+				...getInputProps(1),
+				autoFocus: endAutoFocus,
+				className: `${prefixCls}-input-end`,
+				"date-range": "end",
+				tabIndex
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}-active-bar`,
+				style: activeBarStyle
+			}),
+			/* @__PURE__ */ jsx(Icon, { icon: suffixIcon }),
+			showClear && /* @__PURE__ */ jsx(ClearIcon, {
+				icon: clearIcon,
+				onClear
+			})
+		]
+	});
+}
+const RefRangeSelector = React$1.forwardRef(RangeSelector);
+if (process.env.NODE_ENV !== "production") RefRangeSelector.displayName = "RangeSelector";
+//#endregion
+export { RefRangeSelector as default };
+
+//# sourceMappingURL=RangeSelector.mjs.map

package/es/DatePicker/core/PickerInput/Selector/RangeSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSelector.mjs","names":["React"],"sources":["../../../../../src/DatePicker/core/PickerInput/Selector/RangeSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { useEvent, useResizeObserver } from '../../hooks/react';\nimport type { RangePickerRef, SelectorProps } from '../../interface';\nimport { isReactRenderable } from '../../utils/common';\nimport PickerContext from '../context';\nimport ClearIcon from './ClearIcon';\nimport useInputProps from './hooks/useInputProps';\nimport useRootProps from './hooks/useRootProps';\nimport Icon from './Icon';\nimport Input, { type InputRef } from './Input';\n\nexport type SelectorIdType =\n  | string\n  | {\n      start?: string;\n      end?: string;\n    };\n\nexport interface RangeSelectorRef extends RangePickerRef {\n  endInput: HTMLInputElement;\n  startInput: HTMLInputElement;\n}\n\nexport interface RangeSelectorProps<DateType = any> extends SelectorProps<DateType> {\n  activeIndex: number | null;\n\n  /** All the field show as `placeholder` */\n  allHelp: boolean;\n\n  disabled: [boolean, boolean];\n\n  id?: SelectorIdType;\n  // Invalid\n  invalid: [boolean, boolean];\n\n  // Offset\n  /**\n   * Trigger when the active bar offset position changed.\n   * This is used for popup panel offset.\n   */\n  onActiveInfo: (\n    info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number],\n  ) => void;\n\n  onChange: (date: DateType, index?: number) => void;\n\n  placeholder?: string | [string, string];\n\n  placement?: string;\n  separator?: React.ReactNode;\n  value?: [start?: DateType | null, end?: DateType | null];\n}\n\nfunction RangeSelector<DateType extends object = any>(\n  props: RangeSelectorProps<DateType>,\n  ref: React.Ref<RangeSelectorRef>,\n) {\n  const {\n    id,\n\n    prefix,\n    clearIcon,\n    suffixIcon,\n    separator = '~',\n    activeIndex,\n    activeHelp,\n    allHelp,\n\n    focused,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    locale,\n    generateConfig,\n\n    // Placeholder\n    placeholder,\n\n    // Style\n    className,\n    style,\n\n    // Click\n    onClick,\n    onClear,\n\n    // Change\n    value,\n    onChange,\n    onSubmit,\n    onInputChange,\n\n    // Valid\n    format,\n    maskFormat,\n    preserveInvalidOnBlur,\n    onInvalid,\n\n    // Disabled\n    disabled,\n    invalid,\n    inputReadOnly,\n\n    // Direction\n    direction,\n\n    // Open\n    onOpenChange,\n\n    // Offset\n    onActiveInfo,\n    placement,\n\n    // Native\n    onMouseDown,\n\n    // Input\n    required,\n    'aria-required': ariaRequired,\n    autoFocus,\n    tabIndex,\n\n    ...restProps\n  } = props;\n\n  const rtl = direction === 'rtl';\n\n  // ======================== Prefix ========================\n  const { prefixCls, classNames, styles } = React.use(PickerContext);\n\n  // ========================== Id ==========================\n  const ids = React.useMemo(() => {\n    if (typeof id === 'string') {\n      return [id];\n    }\n\n    const mergedId = id || {};\n\n    return [mergedId.start, mergedId.end];\n  }, [id]);\n\n  // ========================= Refs =========================\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const inputStartRef = React.useRef<InputRef>(null);\n  const inputEndRef = React.useRef<InputRef>(null);\n\n  const getInput = (index: number) => [inputStartRef, inputEndRef][index]?.current;\n\n  React.useImperativeHandle(ref, () => ({\n    nativeElement: rootRef.current!,\n    startInput: inputStartRef.current!.inputElement,\n    endInput: inputEndRef.current!.inputElement,\n    focus: (options) => {\n      if (typeof options === 'object') {\n        const { index = 0, ...rest } = options || {};\n        getInput(index)?.focus(rest);\n      } else {\n        getInput(options ?? 0)?.focus();\n      }\n    },\n    blur: () => {\n      getInput(0)?.blur();\n      getInput(1)?.blur();\n    },\n  }));\n\n  // ======================== Props =========================\n  const rootProps = useRootProps(restProps);\n\n  // ===================== Placeholder ======================\n  const mergedPlaceholder = React.useMemo<[string | undefined, string | undefined]>(\n    () => (Array.isArray(placeholder) ? placeholder : [placeholder, placeholder]),\n    [placeholder],\n  );\n\n  // ======================== Inputs ========================\n  const [getInputProps] = useInputProps({\n    ...props,\n    id: ids,\n    placeholder: mergedPlaceholder,\n  });\n\n  // ====================== ActiveBar =======================\n  const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({\n    position: 'absolute',\n    width: 0,\n  });\n\n  const syncActiveOffset = useEvent(() => {\n    const input = getInput(activeIndex!);\n    if (input) {\n      const inputRect = input.nativeElement.getBoundingClientRect();\n      const parentRect = rootRef.current!.getBoundingClientRect();\n\n      const rectOffset = inputRect.left - parentRect.left;\n      setActiveBarStyle((ori) => ({\n        ...ori,\n        width: inputRect.width,\n        left: rectOffset,\n      }));\n      onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);\n    }\n  });\n\n  React.useEffect(() => {\n    syncActiveOffset();\n  }, [activeIndex]);\n\n  useResizeObserver(rootRef, syncActiveOffset);\n\n  // ======================== Clear =========================\n  const showClear =\n    isReactRenderable(clearIcon) && ((value![0] && !disabled[0]) || (value![1] && !disabled[1]));\n\n  // ======================= Disabled =======================\n  const startAutoFocus = autoFocus && !disabled[0];\n  const endAutoFocus = autoFocus && !startAutoFocus && !disabled[1];\n\n  // ======================== Render ========================\n  return (\n    <div\n      {...rootProps}\n      ref={rootRef}\n      style={style}\n      className={clsx(\n        prefixCls,\n        `${prefixCls}-range`,\n        {\n          [`${prefixCls}-focused`]: focused,\n          [`${prefixCls}-disabled`]: disabled.every((i) => i),\n          [`${prefixCls}-invalid`]: invalid.some((i) => i),\n          [`${prefixCls}-rtl`]: rtl,\n        },\n        className,\n      )}\n      onClick={onClick}\n      // Not lose current input focus\n      onMouseDown={(e) => {\n        const { target } = e;\n        if (\n          target !== inputStartRef.current!.inputElement &&\n          target !== inputEndRef.current!.inputElement\n        ) {\n          e.preventDefault();\n        }\n\n        onMouseDown?.(e);\n      }}\n    >\n      {isReactRenderable(prefix) && (\n        <div className={clsx(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>\n          {prefix}\n        </div>\n      )}\n      <Input\n        ref={inputStartRef}\n        {...getInputProps(0)}\n        autoFocus={startAutoFocus}\n        className={`${prefixCls}-input-start`}\n        date-range=\"start\"\n        tabIndex={tabIndex}\n      />\n      <div className={`${prefixCls}-range-separator`}>{separator}</div>\n      <Input\n        ref={inputEndRef}\n        {...getInputProps(1)}\n        autoFocus={endAutoFocus}\n        className={`${prefixCls}-input-end`}\n        date-range=\"end\"\n        tabIndex={tabIndex}\n      />\n      <div className={`${prefixCls}-active-bar`} style={activeBarStyle} />\n      <Icon icon={suffixIcon} />\n      {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}\n    </div>\n  );\n}\n\nconst RefRangeSelector = React.forwardRef<RangeSelectorRef, RangeSelectorProps>(RangeSelector);\n\nif (process.env.NODE_ENV !== 'production') {\n  RefRangeSelector.displayName = 'RangeSelector';\n}\n\nexport default RefRangeSelector;\n"],"mappings":"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"}

package/es/DatePicker/core/PickerInput/Selector/SingleSelector/HoverSelector.mjs

@@ -0,0 +1,28 @@
+import { useHoverSnapshot } from "../../hooks/useHoverStore.mjs";
+import RefSingleSelector from "./index.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DatePicker/core/PickerInput/Selector/SingleSelector/HoverSelector.tsx
+function HoverSelector({ calendarValue, hoverStore, ref, ...props }) {
+	const hover = useHoverSnapshot(hoverStore);
+	const { multiple } = props;
+	const value = React$1.useMemo(() => {
+		if (!multiple && hover.value) return [hover.value];
+		return calendarValue.filter((date) => date);
+	}, [
+		calendarValue,
+		hover.value,
+		multiple
+	]);
+	return /* @__PURE__ */ jsx(RefSingleSelector, {
+		...props,
+		activeHelp: !!hover.value,
+		allHelp: !!hover.value && hover.source === "preset",
+		ref,
+		value
+	});
+}
+//#endregion
+export { HoverSelector as default };
+
+//# sourceMappingURL=HoverSelector.mjs.map

package/es/DatePicker/core/PickerInput/Selector/SingleSelector/HoverSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverSelector.mjs","names":["React","SingleSelector"],"sources":["../../../../../../src/DatePicker/core/PickerInput/Selector/SingleSelector/HoverSelector.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { PickerRef } from '../../../interface';\nimport { type HoverStore, useHoverSnapshot } from '../../hooks/useHoverStore';\nimport SingleSelector, { type SingleSelectorProps } from './index';\n\nexport interface HoverSelectorProps<DateType extends object> extends Omit<\n  SingleSelectorProps<DateType>,\n  'activeHelp' | 'allHelp' | 'value'\n> {\n  calendarValue: DateType[];\n  hoverStore: HoverStore<DateType>;\n  ref?: React.Ref<PickerRef>;\n}\n\nexport default function HoverSelector<DateType extends object = any>({\n  calendarValue,\n  hoverStore,\n  ref,\n  ...props\n}: HoverSelectorProps<DateType>) {\n  const hover = useHoverSnapshot(hoverStore);\n  const { multiple } = props;\n\n  const value = React.useMemo(() => {\n    if (!multiple && hover.value) return [hover.value];\n    return calendarValue.filter((date) => date);\n  }, [calendarValue, hover.value, multiple]);\n\n  return (\n    <SingleSelector\n      {...props}\n      activeHelp={!!hover.value}\n      allHelp={!!hover.value && hover.source === 'preset'}\n      ref={ref}\n      value={value}\n    />\n  );\n}\n"],"mappings":";;;;;AAeA,SAAwB,cAA6C,EACnE,eACA,YACA,KACA,GAAG,SAC4B;CAC/B,MAAM,QAAQ,iBAAiB,UAAU;CACzC,MAAM,EAAE,aAAa;CAErB,MAAM,QAAQA,QAAM,cAAc;EAChC,IAAI,CAAC,YAAY,MAAM,OAAO,OAAO,CAAC,MAAM,KAAK;EACjD,OAAO,cAAc,QAAQ,SAAS,IAAI;CAC5C,GAAG;EAAC;EAAe,MAAM;EAAO;CAAQ,CAAC;CAEzC,OACE,oBAACC,mBAAD;EACE,GAAI;EACJ,YAAY,CAAC,CAAC,MAAM;EACpB,SAAS,CAAC,CAAC,MAAM,SAAS,MAAM,WAAW;EACtC;EACE;CACR,CAAA;AAEL"}

package/es/DatePicker/core/PickerInput/Selector/SingleSelector/MultipleDates.mjs

@@ -0,0 +1,69 @@
+import { OverflowList } from "../../../../../internal/overflow/OverflowList.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerInput/Selector/SingleSelector/MultipleDates.tsx
+function MultipleDates(props) {
+	const { prefixCls, value, onRemove, removeIcon = "×", formatDate, disabled, maxTagCount, tagRender, placeholder } = props;
+	const selectorCls = `${prefixCls}-selector`;
+	const selectionCls = `${prefixCls}-selection`;
+	const overflowCls = `${selectionCls}-overflow`;
+	function renderSelector(content, onClose) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: clsx(`${selectionCls}-item`),
+			title: typeof content === "string" ? content : void 0,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `${selectionCls}-item-content`,
+				children: content
+			}), !disabled && onClose && /* @__PURE__ */ jsx("span", {
+				className: `${selectionCls}-item-remove`,
+				onClick: onClose,
+				onMouseDown: (e) => {
+					e.preventDefault();
+				},
+				children: removeIcon
+			})]
+		});
+	}
+	function renderItem(date) {
+		const displayLabel = formatDate(date);
+		const closable = !disabled;
+		const onClose = (event) => {
+			if (event) event.stopPropagation();
+			if (!disabled) onRemove(date);
+		};
+		if (tagRender) return tagRender({
+			label: displayLabel,
+			value: date,
+			disabled: !!disabled,
+			closable,
+			onClose
+		});
+		return renderSelector(displayLabel, onClose);
+	}
+	function renderRest(omittedValues) {
+		return renderSelector(`+ ${omittedValues.length} ...`);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: selectorCls,
+		children: [/* @__PURE__ */ jsx(OverflowList, {
+			data: value,
+			itemKey: (date) => formatDate(date),
+			maxCount: maxTagCount,
+			renderItem,
+			renderRest,
+			classNames: {
+				item: `${overflowCls}-item`,
+				rest: `${overflowCls}-item-rest`,
+				root: overflowCls
+			}
+		}), !value.length && /* @__PURE__ */ jsx("span", {
+			className: `${prefixCls}-selection-placeholder`,
+			children: placeholder
+		})]
+	});
+}
+//#endregion
+export { MultipleDates as default };
+
+//# sourceMappingURL=MultipleDates.mjs.map