@rebasepro/ui 0.22.0 → 0.23.0

package/dist/components/DateTimeField.d.ts

@@ -12,6 +12,14 @@ export type DateTimeFieldProps = {
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
+    /**
+     * Whether the field draws its own calendar button. A table cell turns it
+     * off: the cell draws one opener for every kind of editor, in the same
+     * place, and opens the picker through `inputRef`.
+     */
+    pickerButton?: boolean;
+    /** The native input, for a caller that opens the picker itself (`showPicker()`). */
+    inputRef?: React.Ref<HTMLInputElement>;
     locale?: string;
     /**
      * IANA timezone string (e.g., "America/New_York", "Europe/London").

package/dist/components/MultiSelect.d.ts

@@ -34,6 +34,17 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     inputRef?: React.Ref<HTMLButtonElement>;
     padding?: boolean;
     invisible?: boolean;
+    /**
+     * Whether the trigger draws its own chevron. A table cell turns it off:
+     * the cell draws one opener for every kind of editor, in the same place.
+     */
+    chevron?: boolean;
+    /**
+     * Positions the list against this element instead of the trigger. A
+     * table cell passes itself: chips that wrap make the trigger taller than
+     * the cell that clips it, and the list belongs under what can be seen.
+     */
+    anchorRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     renderValues?: (values: T[]) => React.ReactNode;
     portalContainer?: HTMLElement | null;

package/dist/components/Select.d.ts

@@ -23,6 +23,11 @@ export type SelectProps<T extends SelectValue = string> = {
     inputRef?: React.Ref<HTMLButtonElement>;
     padding?: boolean;
     invisible?: boolean;
+    /**
+     * Whether the trigger draws its own chevron. A table cell turns it off:
+     * the cell draws one opener for every kind of editor, in the same place.
+     */
+    chevron?: boolean;
     children?: React.ReactNode;
     dataType?: "string" | "number" | "boolean";
     portalContainer?: HTMLElement | null;

package/dist/components/TextField.d.ts

@@ -4,6 +4,8 @@ export type TextFieldProps<T extends string | number> = {
     type?: InputType;
     value?: T;
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     label?: React.ReactNode;
     multiline?: boolean;
     disabled?: boolean;
@@ -27,11 +29,13 @@ export type TextFieldProps<T extends string | number> = {
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onFocus" | "onBlur">;
 export declare const TextField: React.ForwardRefExoticComponent<{
     type?: InputType;
     value?: string | number | undefined;
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     label?: React.ReactNode;
     multiline?: boolean;
     disabled?: boolean;
@@ -55,4 +59,4 @@ export declare const TextField: React.ForwardRefExoticComponent<{
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onFocus" | "onBlur" | "size"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/VirtualTable/fields/VirtualTableDateField.d.ts

@@ -10,5 +10,13 @@ export declare function VirtualTableDateField(props: {
     disabled: boolean;
     small?: boolean;
     locale?: string;
+    /**
+     * Whether the field draws its own calendar button. A table that draws its
+     * own opener for the cell turns it off, and the value then sits flush with
+     * the text of the cells beside it rather than indented like a form field.
+     */
+    pickerButton?: boolean;
+    /** The native input, for a caller that opens the picker itself (`showPicker()`). */
+    inputRef?: React.Ref<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }): React.JSX.Element;

package/dist/index.es.js

@@ -3008,9 +3008,10 @@ var Alert = ({ children, onDismiss, color = "info", size = "medium", action, out
 //#endregion
 //#region src/components/Avatar.tsx
 var AvatarInner = ({ src, alt, children, className, style, outerClassName, hover = true, ...props }, ref) => {
-	const [isImageError, setIsImageError] = useState(false);
+	const [failedSrc, setFailedSrc] = useState(void 0);
+	const isImageError = src !== void 0 && failedSrc === src;
 	const handleImageError = () => {
-		setIsImageError(true);
+		setFailedSrc(src);
 	};
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -3941,7 +3942,7 @@ var defaultIconSize = {
 	medium: 20,
 	large: 24
 };
-var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, ...props }, ref) => {
+var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, onClick, ...props }, ref) => {
 	const bgClasses = variant === "ghost" ? "bg-transparent hover:bg-surface-hover" : "bg-surface-raised hover:bg-surface-raised-hover";
 	const Component = component || "button";
 	const isNativeButton = Component === "button";
@@ -3954,8 +3955,10 @@ var IconButtonInner = ({ children, className, size = "medium", variant = "ghost"
 		type: isNativeButton ? "button" : void 0,
 		role: isNativeButton ? void 0 : "button",
 		ref,
+		disabled: isNativeButton ? disabled : void 0,
 		"aria-disabled": disabled || void 0,
 		tabIndex: disabled ? -1 : void 0,
+		onClick: disabled ? void 0 : onClick,
 		...props,
 		className: cls(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer", toggled ? "outline outline-2 outline-primary" : "", "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, shapeClasses[shape], sizeClasses$1[size], className),
 		children: sizedChildren
@@ -3983,8 +3986,13 @@ var InputLabel = React$1.forwardRef(function InputLabel(inProps, ref) {
 });
 //#endregion
 //#region src/components/DateTimeField.tsx
-var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date", error, size = "large", className, style, inputClassName, invisible, timezone, "aria-label": ariaLabel }) => {
+var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date", error, size = "large", className, style, inputClassName, invisible, pickerButton = true, inputRef: inputRefProp, timezone, "aria-label": ariaLabel }) => {
 	const inputRef = useRef(null);
+	const setInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof inputRefProp === "function") inputRefProp(node);
+		else if (inputRefProp) inputRefProp.current = node;
+	}, [inputRefProp]);
 	const [focused, setFocused] = useState(false);
 	const inputId = useId();
 	const labelId = `${inputId}-label`;
@@ -4061,11 +4069,19 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 				[hours, minutes] = timePart.split(":").map(Number);
 			}
 			let resultDate;
-			if (!timezone) resultDate = new Date(year, month - 1, day, hours, minutes);
-			else {
-				const refUtcDate = new Date(Date.UTC(year, month - 1, day, hours, minutes));
-				const offsetMinutes = getTimezoneOffsetMinutes(refUtcDate, timezone);
-				resultDate = /* @__PURE__ */ new Date(Date.UTC(year, month - 1, day, hours, minutes) - offsetMinutes * 6e4);
+			if (!timezone) {
+				resultDate = /* @__PURE__ */ new Date(0);
+				resultDate.setFullYear(year, month - 1, day);
+				resultDate.setHours(hours, minutes, 0, 0);
+			} else {
+				const wallClock = /* @__PURE__ */ new Date(0);
+				wallClock.setUTCFullYear(year, month - 1, day);
+				wallClock.setUTCHours(hours, minutes, 0, 0);
+				const wallClockAsUtc = wallClock.getTime();
+				const firstGuess = getTimezoneOffsetMinutes(new Date(wallClockAsUtc), timezone);
+				const offsetMinutes = getTimezoneOffsetMinutes(/* @__PURE__ */ new Date(wallClockAsUtc - firstGuess * 6e4), timezone);
+				resultDate = /* @__PURE__ */ new Date(wallClockAsUtc - offsetMinutes * 6e4);
+				if (getTimezoneOffsetMinutes(resultDate, timezone) !== offsetMinutes) resultDate = /* @__PURE__ */ new Date(wallClockAsUtc - firstGuess * 6e4);
 			}
 			if (isNaN(resultDate.getTime())) throw new Error("Invalid date");
 			onChange?.(resultDate);
@@ -4104,7 +4120,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					children: label
 				}),
 				/* @__PURE__ */ jsx("input", {
-					ref: inputRef,
+					ref: setInputRef,
 					id: inputId,
 					"aria-labelledby": label ? labelId : void 0,
 					"aria-label": label ? void 0 : ariaLabel,
@@ -4114,7 +4130,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					onFocus: handleFocus,
 					onBlur: handleBlur,
 					disabled,
-					className: cls("w-full outline-hidden bg-transparent leading-normal text-sm px-3", clearable ? "pr-14" : "pr-12", "rounded-lg", {
+					className: cls("w-full outline-hidden bg-transparent leading-normal text-sm px-3", pickerButton ? clearable ? "pr-14" : "pr-12" : clearable ? "pr-12" : "", "rounded-lg", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[40px]": size === "medium",
@@ -4126,7 +4142,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 						large: "py-3"
 					}[size], inputClassName, disabled && "border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500")
 				}),
-				/* @__PURE__ */ jsx(IconButton, {
+				pickerButton && /* @__PURE__ */ jsx(IconButton, {
 					size: adornmentSize,
 					onClick: (e) => {
 						e.stopPropagation();
@@ -4757,7 +4773,21 @@ function SelectInputLabel({ children, error }) {
 //#endregion
 //#region src/components/MultiSelect.tsx
 var MultiSelectContext = React$1.createContext(null);
-var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onValueChange, invisible, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer, "aria-label": ariaLabel }, ref) => {
+/**
+* The popover's trigger, or — given an anchor — a plain child beside a
+* `Popover.Anchor` on that element. Not both: Radix's trigger registers itself
+* as the anchor through a ref callback, which under StrictMode runs again
+* after the custom anchor's effect and wins, leaving the list anchored to a
+* trigger the custom anchor then unmounts. The button toggles the list itself.
+*/
+function MultiSelectTrigger({ anchorRef, children }) {
+	if (!anchorRef) return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		asChild: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), children] });
+}
+var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onValueChange, invisible, chevron = true, anchorRef, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer, "aria-label": ariaLabel }, ref) => {
 	const [isMounted, setIsMounted] = useState(false);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
 	const [selectedValues, setSelectedValues] = useState(value ?? []);
@@ -4788,9 +4818,10 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 		setSelectedValues(value ?? []);
 	}, [value]);
 	const updateValues = React$1.useCallback((values) => {
+		if (disabled) return;
 		setSelectedValues(values);
 		onValueChange?.(values);
-	}, [onValueChange]);
+	}, [onValueChange, disabled]);
 	const onItemClick = React$1.useCallback((newValue) => {
 		let newSelectedValues;
 		if (selectedValues.some((v) => String(v) === String(newValue))) newSelectedValues = selectedValues.filter((v) => String(v) !== String(newValue));
@@ -4838,10 +4869,11 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 			open: isMounted && isPopoverOpen,
 			onOpenChange: onPopoverOpenChange,
 			modal: modalPopover,
-			children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-				asChild: true,
+			children: [/* @__PURE__ */ jsx(MultiSelectTrigger, {
+				anchorRef,
 				children: /* @__PURE__ */ jsx("button", {
 					ref: inputRef ?? ref,
+					disabled,
 					"aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
 					onClick: handleTogglePopover,
 					className: cls(invisible ? {
@@ -4890,7 +4922,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 									event.stopPropagation();
 									handleClear();
 								}
-							}), /* @__PURE__ */ jsx("div", {
+							}), chevron && /* @__PURE__ */ jsx("div", {
 								className: cls("px-2 h-full flex items-center"),
 								children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {
 									size: size === "large" ? iconSize.medium : iconSize.small,
@@ -4903,7 +4935,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-sm",
 							children: placeholder
-						}), /* @__PURE__ */ jsx("div", {
+						}), chevron && /* @__PURE__ */ jsx("div", {
 							className: cls("px-2 h-full flex items-center"),
 							children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {
 								size: size === "large" ? iconSize.medium : iconSize.small,
@@ -5179,7 +5211,7 @@ function SearchBar({ onClick, onTextSearch, placeholder = "Search", expandable =
 }
 //#endregion
 //#region src/components/Select.tsx
-var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenChange, value, onChange, onValueChange, className, inputClassName, viewportClassName, placeholder, renderValue, label, size = "large", error, disabled, padding = true, position = "item-aligned", endAdornment, invisible, children, dataType = "string", portalContainer: manualContainer, "aria-label": ariaLabel, ...props }, ref) => {
+var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenChange, value, onChange, onValueChange, className, inputClassName, viewportClassName, placeholder, renderValue, label, size = "large", error, disabled, padding = true, position = "item-aligned", endAdornment, invisible, chevron = true, children, dataType = "string", portalContainer: manualContainer, "aria-label": ariaLabel, ...props }, ref) => {
 	const [openInternal, setOpenInternal] = useState(open ?? false);
 	useEffect(() => {
 		setOpenInternal(open ?? false);
@@ -5220,6 +5252,17 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 		renderValue,
 		value
 	]);
+	const emptyItemDisplay = useMemo(() => {
+		if (stringValue !== "") return null;
+		const emptyItem = Children.toArray(children).find((child) => React.isValidElement(child) && String(child.props.value) === "");
+		if (!emptyItem) return null;
+		return value !== void 0 && renderValue ? renderValue(value) : emptyItem.props.children;
+	}, [
+		children,
+		renderValue,
+		stringValue,
+		value
+	]);
 	return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
 		name,
 		value: stringValue,
@@ -5277,11 +5320,11 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 								e.preventDefault();
 								e.stopPropagation();
 							},
-							placeholder,
+							placeholder: emptyItemDisplay ?? placeholder,
 							className: "w-full",
 							children: hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder
 						})
-					}), /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+					}), chevron && /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {
 							size: size === "large" ? iconSize.medium : iconSize.small,
@@ -5371,7 +5414,7 @@ var Slider = React$1.forwardRef(({ className, size = "regular", ...props }, ref)
 					"bg-primary": !props.disabled,
 					"bg-surface-raised-hover": props.disabled
 				}) })
-			}), (props.value ?? [0]).map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
+			}), (props.value ?? props.defaultValue ?? [0]).map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
 				index,
 				props,
 				hovered,
@@ -5605,7 +5648,7 @@ function setRef(ref, value) {
 }
 //#endregion
 //#region src/components/TextField.tsx
-var TextField = forwardRef(({ value, onChange, label, type = "text", multiline = false, invisible, maxRows, minRows, disabled, error, endAdornment, autoFocus, placeholder, size = "large", className, style, inputClassName, inputStyle, inputRef: inputRefProp, ...inputProps }, ref) => {
+var TextField = forwardRef(({ value, onChange, onFocus, onBlur, label, type = "text", multiline = false, invisible, maxRows, minRows, disabled, error, endAdornment, autoFocus, placeholder, size = "large", className, style, inputClassName, inputStyle, inputRef: inputRefProp, ...inputProps }, ref) => {
 	const fallbackRef = useRef(null);
 	const inputRef = inputRefProp ?? fallbackRef;
 	const autoId = useId();
@@ -5613,21 +5656,22 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 	const labelId = `${inputId}-label`;
 	const [focused, setFocused] = React.useState(false);
 	const hasValue = value !== void 0 && value !== null && value !== "";
+	const handleFocus = (event) => {
+		setFocused(true);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		setFocused(false);
+		onBlur?.(event);
+	};
 	useEffect(() => {
 		const element = inputRef && "current" in inputRef ? inputRef.current : null;
 		if (element && document.activeElement === element) setFocused(true);
 	}, []);
-	useEffect(() => {
-		if (type !== "number") return;
-		const handleWheel = (event) => {
-			if (event.target instanceof HTMLElement) event.target.blur();
-		};
-		const element = "current" in inputRef ? inputRef.current : inputRef;
-		element?.addEventListener("wheel", handleWheel);
-		return () => {
-			element?.removeEventListener("wheel", handleWheel);
-		};
-	}, [inputRef, type]);
+	const handleWheel = (event) => {
+		if (type === "number") event.currentTarget.blur();
+		inputProps.onWheel?.(event);
+	};
 	const input = multiline ? /* @__PURE__ */ jsx("textarea", {
 		...inputProps,
 		ref: inputRef,
@@ -5635,13 +5679,14 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		"aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
 		"aria-invalid": error || void 0,
 		"aria-disabled": disabled || void 0,
+		disabled,
 		placeholder: focused || hasValue || !label ? placeholder : void 0,
 		autoFocus,
 		rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3,
 		value: value ?? "",
 		onChange,
-		onFocus: () => setFocused(true),
-		onBlur: () => setFocused(false),
+		onFocus: handleFocus,
+		onBlur: handleBlur,
 		style: inputStyle,
 		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-sm bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
 	}) : /* @__PURE__ */ jsx("input", {
@@ -5666,8 +5711,9 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		}[size] : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
 		placeholder: focused || hasValue || !label ? placeholder : void 0,
 		autoFocus,
-		onFocus: () => setFocused(true),
-		onBlur: () => setFocused(false),
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onWheel: handleWheel,
 		type,
 		value: type === "number" && Number.isNaN(value) ? "" : value ?? "",
 		onChange
@@ -7035,12 +7081,12 @@ function VirtualTableInput(props) {
 //#endregion
 //#region src/components/VirtualTable/fields/VirtualTableNumberInput.tsx
 function VirtualTableNumberInput(props) {
-	const { align = "left", value, updateValue, focused } = props;
-	const propStringValue = value && typeof value === "number" ? value.toString() : "";
+	const { align = "left", value, updateValue, focused, disabled } = props;
+	const propStringValue = typeof value === "number" ? value.toString() : "";
 	const [internalValue, setInternalValue] = useState(propStringValue);
 	const prevValue = useRef(value);
 	useEffect(() => {
-		if (prevValue.current !== value && String(value) !== internalValue) setInternalValue(value ? value.toString() : null);
+		if (prevValue.current !== value && String(value) !== internalValue) setInternalValue(value !== void 0 && value !== null ? value.toString() : null);
 		prevValue.current = value;
 	}, [value]);
 	useDebouncedCallback(internalValue, React.useCallback(() => {
@@ -7061,6 +7107,7 @@ function VirtualTableNumberInput(props) {
 	return /* @__PURE__ */ jsx(TextField, {
 		inputRef,
 		invisible: true,
+		disabled,
 		size: "small",
 		className: "w-full",
 		inputClassName: cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled),
@@ -7076,7 +7123,7 @@ function VirtualTableNumberInput(props) {
 //#endregion
 //#region src/components/VirtualTable/fields/VirtualTableSwitch.tsx
 function VirtualTableSwitch(props) {
-	const { internalValue, updateValue, focused } = props;
+	const { internalValue, updateValue, focused, disabled } = props;
 	const ref = React.useRef(null);
 	useEffect(() => {
 		if (ref.current && focused) ref.current.focus({ preventScroll: true });
@@ -7085,26 +7132,71 @@ function VirtualTableSwitch(props) {
 		ref,
 		size: "small",
 		value: Boolean(internalValue),
+		disabled,
 		onValueChange: updateValue
 	});
 }
 //#endregion
 //#region src/components/VirtualTable/fields/VirtualTableDateField.tsx
 function VirtualTableDateField(props) {
-	const { name, disabled, error, mode, timezone, internalValue, updateValue, small = false, locale } = props;
-	return /* @__PURE__ */ jsx(DateTimeField, {
-		value: internalValue ?? void 0,
-		onChange: (dateValue) => updateValue(dateValue ?? null),
-		disabled,
-		error: Boolean(error),
-		"aria-label": name,
-		invisible: true,
-		size: small ? "small" : "medium",
-		inputClassName: cls("w-full h-full", focusedDisabled),
-		className: cls("w-full h-full", focusedDisabled),
-		mode,
-		timezone,
-		locale
+	const { name, disabled, error, mode, timezone, internalValue, updateValue, small = false, locale, pickerButton = true, inputRef } = props;
+	const [focused, setFocused] = useState(false);
+	const focusedRef = useRef(false);
+	const [draft, setDraft] = useState(null);
+	const draftRef = useRef(null);
+	const timerRef = useRef(void 0);
+	const updateValueRef = useRef(updateValue);
+	useEffect(() => {
+		updateValueRef.current = updateValue;
+	}, [updateValue]);
+	const commit = useCallback(() => {
+		clearTimeout(timerRef.current);
+		const pending = draftRef.current;
+		if (!pending) return;
+		draftRef.current = null;
+		setDraft(null);
+		updateValueRef.current(pending.value);
+	}, []);
+	const onDateChange = (dateValue) => {
+		const pending = { value: dateValue ?? null };
+		draftRef.current = pending;
+		setDraft(pending);
+		clearTimeout(timerRef.current);
+		if (!focusedRef.current) commit();
+		else if (!pending.value || pending.value.getFullYear() >= 1e3) timerRef.current = setTimeout(commit, 400);
+	};
+	useEffect(() => () => {
+		clearTimeout(timerRef.current);
+		if (draftRef.current) updateValueRef.current(draftRef.current.value);
+	}, []);
+	const shownValue = draft ? draft.value : internalValue;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full h-full flex items-center",
+		onFocus: () => {
+			focusedRef.current = true;
+			setFocused(true);
+		},
+		onBlur: () => {
+			focusedRef.current = false;
+			setFocused(false);
+			commit();
+		},
+		children: /* @__PURE__ */ jsx(DateTimeField, {
+			value: shownValue ?? void 0,
+			onChange: onDateChange,
+			disabled,
+			error: Boolean(error),
+			"aria-label": name,
+			invisible: true,
+			pickerButton,
+			inputRef,
+			size: small ? "small" : "medium",
+			inputClassName: cls("w-full h-full", focusedDisabled, !pickerButton && "px-0", !shownValue && !focused && "text-transparent"),
+			className: cls("w-full h-full", focusedDisabled),
+			mode,
+			timezone,
+			locale
+		})
 	});
 }
 //#endregion