@questpie/admin 3.2.4 → 3.2.5

package/dist/client/preview/preview-field.mjs

@@ -2,7 +2,6 @@
 
 import { cn } from "../lib/utils.mjs";
 import { useBlockScope, useResolveFieldPath } from "./block-scope-context.mjs";
-import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -18,44 +17,27 @@ const PreviewContext = React.createContext(null);
 * Provider for preview mode context.
 * Use this at the root of your preview page.
 */
-function PreviewProvider(t0) {
-	const $ = c(8);
-	const { preview, isPreviewMode, focusedField, onFieldClick, onFieldValueEdited, children } = t0;
-	const t1 = preview?.isPreviewMode ?? isPreviewMode ?? false;
-	const t2 = preview?.focusedField ?? focusedField ?? null;
-	const t3 = preview?.handleFieldClick ?? onFieldClick ?? _temp;
-	const t4 = preview?.handleFieldValueEdited ?? onFieldValueEdited;
-	let t5;
-	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
-		t5 = {
-			isPreviewMode: t1,
-			focusedField: t2,
-			handleFieldClick: t3,
-			handleFieldValueEdited: t4
-		};
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-		$[3] = t4;
-		$[4] = t5;
-	} else t5 = $[4];
-	const value = t5;
-	let t6;
-	if ($[5] !== children || $[6] !== value) {
-		t6 = /* @__PURE__ */ jsx(PreviewContext.Provider, {
-			value,
-			children
-		});
-		$[5] = children;
-		$[6] = value;
-		$[7] = t6;
-	} else t6 = $[7];
-	return t6;
+function PreviewProvider({ preview, isPreviewMode, focusedField, onFieldClick, onFieldValueEdited, children }) {
+	const value = React.useMemo(() => ({
+		isPreviewMode: preview?.isPreviewMode ?? isPreviewMode ?? false,
+		focusedField: preview?.focusedField ?? focusedField ?? null,
+		handleFieldClick: preview?.handleFieldClick ?? onFieldClick ?? (() => void 0),
+		handleFieldValueEdited: preview?.handleFieldValueEdited ?? onFieldValueEdited
+	}), [
+		preview,
+		isPreviewMode,
+		focusedField,
+		onFieldClick,
+		onFieldValueEdited
+	]);
+	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
+		value,
+		children
+	});
 }
 /**
 * Hook to access preview context.
 */
-function _temp() {}
 function usePreviewContext() {
 	return React.useContext(PreviewContext);
 }
@@ -83,335 +65,172 @@ function usePreviewContext() {
 * </PreviewField>
 * ```
 */
-function PreviewField(t0) {
-	const $ = c(17);
-	const { field, fieldType: t1, editable, children, as: t2, className, style, onClick, onValueCommit } = t0;
-	const fieldType = t1 === void 0 ? "regular" : t1;
-	const Component = t2 === void 0 ? "div" : t2;
+function PreviewField({ field, fieldType = "regular", editable, children, as: Component = "div", className, style, onClick, onValueCommit }) {
 	const context = usePreviewContext();
 	const blockScope = useBlockScope();
 	const fullPath = useResolveFieldPath(field);
-	if (!context?.isPreviewMode) {
-		let t3$1;
-		if ($[0] !== Component || $[1] !== children || $[2] !== className || $[3] !== style) {
-			t3$1 = /* @__PURE__ */ jsx(Component, {
-				className,
-				style,
-				children
-			});
-			$[0] = Component;
-			$[1] = children;
-			$[2] = className;
-			$[3] = style;
-			$[4] = t3$1;
-		} else t3$1 = $[4];
-		return t3$1;
-	}
-	const t3 = blockScope?.blockId;
-	const t4 = context.focusedField === fullPath;
-	const t5 = onClick ?? context.handleFieldClick;
-	const t6 = onValueCommit ?? context.handleFieldValueEdited;
-	let t7;
-	if ($[5] !== Component || $[6] !== children || $[7] !== className || $[8] !== editable || $[9] !== fieldType || $[10] !== fullPath || $[11] !== style || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsx(PreviewFieldElement, {
-			Component,
-			blockId: t3,
-			className,
-			editable,
-			fieldType,
-			fullPath,
-			isFocused: t4,
-			onClick: t5,
-			onValueCommit: t6,
-			style,
-			children
-		});
-		$[5] = Component;
-		$[6] = children;
-		$[7] = className;
-		$[8] = editable;
-		$[9] = fieldType;
-		$[10] = fullPath;
-		$[11] = style;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
+	if (!context?.isPreviewMode) return /* @__PURE__ */ jsx(Component, {
+		className,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(PreviewFieldElement, {
+		Component,
+		blockId: blockScope?.blockId,
+		className,
+		editable,
+		fieldType,
+		fullPath,
+		isFocused: context.focusedField === fullPath,
+		onClick: onClick ?? context.handleFieldClick,
+		onValueCommit: onValueCommit ?? context.handleFieldValueEdited,
+		style,
+		children
+	});
 }
 /**
 * Standalone PreviewField that works without context.
 * Useful when you can't use PreviewProvider.
 */
-function StandalonePreviewField(t0) {
-	const $ = c(17);
-	const { field, fieldType: t1, editable, children, as: t2, className, style, isPreviewMode, isFocused, onFieldClick, onValueCommit } = t0;
-	const fieldType = t1 === void 0 ? "regular" : t1;
-	const Component = t2 === void 0 ? "div" : t2;
+function StandalonePreviewField({ field, fieldType = "regular", editable, children, as: Component = "div", className, style, isPreviewMode, isFocused, onFieldClick, onValueCommit }) {
 	const blockScope = useBlockScope();
 	const fullPath = useResolveFieldPath(field);
-	if (!isPreviewMode) {
-		let t3$1;
-		if ($[0] !== Component || $[1] !== children || $[2] !== className || $[3] !== style) {
-			t3$1 = /* @__PURE__ */ jsx(Component, {
-				className,
-				style,
-				children
-			});
-			$[0] = Component;
-			$[1] = children;
-			$[2] = className;
-			$[3] = style;
-			$[4] = t3$1;
-		} else t3$1 = $[4];
-		return t3$1;
-	}
-	const t3 = blockScope?.blockId;
-	const t4 = !!isFocused;
-	let t5;
-	if ($[5] !== Component || $[6] !== children || $[7] !== className || $[8] !== editable || $[9] !== fieldType || $[10] !== fullPath || $[11] !== onFieldClick || $[12] !== onValueCommit || $[13] !== style || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx(PreviewFieldElement, {
-			Component,
-			blockId: t3,
-			className,
-			editable,
-			fieldType,
-			fullPath,
-			isFocused: t4,
-			onClick: onFieldClick,
-			onValueCommit,
-			style,
-			children
-		});
-		$[5] = Component;
-		$[6] = children;
-		$[7] = className;
-		$[8] = editable;
-		$[9] = fieldType;
-		$[10] = fullPath;
-		$[11] = onFieldClick;
-		$[12] = onValueCommit;
-		$[13] = style;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+	if (!isPreviewMode) return /* @__PURE__ */ jsx(Component, {
+		className,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(PreviewFieldElement, {
+		Component,
+		blockId: blockScope?.blockId,
+		className,
+		editable,
+		fieldType,
+		fullPath,
+		isFocused: !!isFocused,
+		onClick: onFieldClick,
+		onValueCommit,
+		style,
+		children
+	});
 }
-function PreviewFieldElement(t0) {
-	const $ = c(54);
-	const { Component, blockId, children, className, editable, fieldType, fullPath, isFocused, onClick, onValueCommit, style } = t0;
+function PreviewFieldElement({ Component, blockId, children, className, editable, fieldType, fullPath, isFocused, onClick, onValueCommit, style }) {
 	const [isEditing, setIsEditing] = React.useState(false);
 	const [draftValue, setDraftValue] = React.useState("");
 	const isEditable = editable === "text" || editable === "textarea";
-	const setEditorRef = _temp2;
-	let t1;
-	if ($[0] !== children || $[1] !== isEditable) {
-		t1 = () => {
-			if (!isEditable) return;
-			setDraftValue(childrenToEditableValue(children));
-			setIsEditing(true);
-		};
-		$[0] = children;
-		$[1] = isEditable;
-		$[2] = t1;
-	} else t1 = $[2];
-	const startEditing = t1;
-	let t2;
-	if ($[3] !== blockId || $[4] !== fieldType || $[5] !== fullPath || $[6] !== onClick) {
-		t2 = () => {
-			onClick(fullPath, {
-				blockId,
-				fieldType
-			});
-		};
-		$[3] = blockId;
-		$[4] = fieldType;
-		$[5] = fullPath;
-		$[6] = onClick;
-		$[7] = t2;
-	} else t2 = $[7];
-	const routeClick = t2;
-	let t3;
-	if ($[8] !== blockId || $[9] !== draftValue || $[10] !== editable || $[11] !== fieldType || $[12] !== fullPath || $[13] !== isEditing || $[14] !== onValueCommit) {
-		t3 = () => {
-			if (!isEditing || !editable) return;
-			const payload = {
-				path: fullPath,
-				value: draftValue,
-				inputKind: editable,
-				blockId,
-				fieldType
-			};
-			if (onValueCommit) onValueCommit(payload);
-			else postFieldValueEdited(payload);
-			setIsEditing(false);
-		};
-		$[8] = blockId;
-		$[9] = draftValue;
-		$[10] = editable;
-		$[11] = fieldType;
-		$[12] = fullPath;
-		$[13] = isEditing;
-		$[14] = onValueCommit;
-		$[15] = t3;
-	} else t3 = $[15];
-	const commitEdit = t3;
-	let t4;
-	if ($[16] !== children) {
-		t4 = () => {
-			setIsEditing(false);
-			setDraftValue(childrenToEditableValue(children));
-		};
-		$[16] = children;
-		$[17] = t4;
-	} else t4 = $[17];
-	const cancelEdit = t4;
-	let t5;
-	if ($[18] !== isEditing || $[19] !== routeClick) {
-		t5 = (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			if (!isEditing) routeClick();
-		};
-		$[18] = isEditing;
-		$[19] = routeClick;
-		$[20] = t5;
-	} else t5 = $[20];
-	const handleClick = t5;
-	let t6;
-	if ($[21] !== startEditing) {
-		t6 = (event_0) => {
-			event_0.preventDefault();
-			event_0.stopPropagation();
-			startEditing();
+	const setEditorRef = React.useCallback((node) => {
+		if (!node) return;
+		node.focus({ preventScroll: true });
+		node.select();
+	}, []);
+	const startEditing = React.useCallback(() => {
+		if (!isEditable) return;
+		setDraftValue(childrenToEditableValue(children));
+		setIsEditing(true);
+	}, [children, isEditable]);
+	const routeClick = React.useCallback(() => {
+		onClick(fullPath, {
+			blockId,
+			fieldType
+		});
+	}, [
+		blockId,
+		fieldType,
+		fullPath,
+		onClick
+	]);
+	const commitEdit = React.useCallback(() => {
+		if (!isEditing || !editable) return;
+		const payload = {
+			path: fullPath,
+			value: draftValue,
+			inputKind: editable,
+			blockId,
+			fieldType
 		};
-		$[21] = startEditing;
-		$[22] = t6;
-	} else t6 = $[22];
-	const handleDoubleClick = t6;
-	let t7;
-	if ($[23] !== cancelEdit || $[24] !== commitEdit || $[25] !== editable || $[26] !== isEditable || $[27] !== isEditing || $[28] !== routeClick || $[29] !== startEditing) {
-		t7 = (event_1) => {
-			event_1.stopPropagation();
-			if (!isEditing) {
-				if (event_1.key === "Enter" && isEditable) {
-					event_1.preventDefault();
-					routeClick();
-					startEditing();
-				}
-				return;
-			}
-			if (event_1.key === "Escape") {
-				event_1.preventDefault();
-				cancelEdit();
-				return;
+		if (onValueCommit) onValueCommit(payload);
+		else postFieldValueEdited(payload);
+		setIsEditing(false);
+	}, [
+		blockId,
+		draftValue,
+		editable,
+		fieldType,
+		fullPath,
+		isEditing,
+		onValueCommit
+	]);
+	const cancelEdit = React.useCallback(() => {
+		setIsEditing(false);
+		setDraftValue(childrenToEditableValue(children));
+	}, [children]);
+	const handleClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!isEditing) routeClick();
+	};
+	const handleDoubleClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		startEditing();
+	};
+	const handleKeyDown = (event) => {
+		event.stopPropagation();
+		if (!isEditing) {
+			if (event.key === "Enter" && isEditable) {
+				event.preventDefault();
+				routeClick();
+				startEditing();
 			}
-			if (editable === "text" && event_1.key === "Enter") {
-				event_1.preventDefault();
-				commitEdit();
-				return;
-			}
-			if (editable === "textarea" && event_1.key === "Enter" && (event_1.metaKey || event_1.ctrlKey)) {
-				event_1.preventDefault();
-				commitEdit();
-			}
-		};
-		$[23] = cancelEdit;
-		$[24] = commitEdit;
-		$[25] = editable;
-		$[26] = isEditable;
-		$[27] = isEditing;
-		$[28] = routeClick;
-		$[29] = startEditing;
-		$[30] = t7;
-	} else t7 = $[30];
-	const handleKeyDown = t7;
-	let t8;
-	if ($[31] !== commitEdit || $[32] !== draftValue || $[33] !== editable || $[34] !== handleKeyDown) {
-		t8 = editable === "textarea" ? /* @__PURE__ */ jsx("textarea", {
-			ref: setEditorRef,
-			value: draftValue,
-			onChange: (event_2) => setDraftValue(event_2.target.value),
-			onBlur: commitEdit,
-			onClick: _temp3,
-			onKeyDown: handleKeyDown,
-			className: "min-h-[4lh] w-full resize-y bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
-		}) : /* @__PURE__ */ jsx("input", {
-			ref: setEditorRef,
-			type: "text",
-			value: draftValue,
-			onChange: (event_4) => setDraftValue(event_4.target.value),
-			onBlur: commitEdit,
-			onClick: _temp4,
-			onKeyDown: handleKeyDown,
-			className: "w-full bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
-		});
-		$[31] = commitEdit;
-		$[32] = draftValue;
-		$[33] = editable;
-		$[34] = handleKeyDown;
-		$[35] = t8;
-	} else t8 = $[35];
-	const editor = t8;
-	const t9 = isEditing ? "true" : void 0;
-	const t10 = isEditable && "cursor-text";
-	const t11 = isFocused && "outline-primary shadow-[0_0_0_4px_hsl(var(--primary)/0.14)]";
-	const t12 = isEditing && "outline-primary bg-background/80 shadow-[0_0_0_4px_hsl(var(--primary)/0.18)]";
-	let t13;
-	if ($[36] !== className || $[37] !== t10 || $[38] !== t11 || $[39] !== t12) {
-		t13 = cn(className, "group/preview-field relative rounded-[2px] transition-[box-shadow,outline-color,outline-offset] duration-150", "cursor-pointer outline outline-2 outline-offset-2 outline-transparent", "hover:outline-primary/50 hover:shadow-[0_0_0_4px_hsl(var(--primary)/0.10)]", "focus-visible:outline-primary/70 focus-visible:shadow-[0_0_0_4px_hsl(var(--primary)/0.12)]", t10, t11, t12);
-		$[36] = className;
-		$[37] = t10;
-		$[38] = t11;
-		$[39] = t12;
-		$[40] = t13;
-	} else t13 = $[40];
-	const t14 = isEditing ? editor : children;
-	let t15;
-	if ($[41] !== Component || $[42] !== blockId || $[43] !== editable || $[44] !== fieldType || $[45] !== fullPath || $[46] !== handleClick || $[47] !== handleDoubleClick || $[48] !== handleKeyDown || $[49] !== style || $[50] !== t13 || $[51] !== t14 || $[52] !== t9) {
-		t15 = /* @__PURE__ */ jsx(Component, {
-			"data-preview-field": fullPath,
-			"data-block-id": blockId,
-			"data-field-type": fieldType,
-			"data-preview-editable": editable,
-			"data-preview-editing": t9,
-			tabIndex: 0,
-			onClick: handleClick,
-			onDoubleClick: handleDoubleClick,
-			onKeyDown: handleKeyDown,
-			style,
-			className: t13,
-			children: t14
-		});
-		$[41] = Component;
-		$[42] = blockId;
-		$[43] = editable;
-		$[44] = fieldType;
-		$[45] = fullPath;
-		$[46] = handleClick;
-		$[47] = handleDoubleClick;
-		$[48] = handleKeyDown;
-		$[49] = style;
-		$[50] = t13;
-		$[51] = t14;
-		$[52] = t9;
-		$[53] = t15;
-	} else t15 = $[53];
-	return t15;
-}
-function _temp4(event_5) {
-	return event_5.stopPropagation();
-}
-function _temp3(event_3) {
-	return event_3.stopPropagation();
-}
-function _temp2(node) {
-	if (!node) return;
-	node.focus({ preventScroll: true });
-	node.select();
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			cancelEdit();
+			return;
+		}
+		if (editable === "text" && event.key === "Enter") {
+			event.preventDefault();
+			commitEdit();
+			return;
+		}
+		if (editable === "textarea" && event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			commitEdit();
+		}
+	};
+	const editor = editable === "textarea" ? /* @__PURE__ */ jsx("textarea", {
+		ref: setEditorRef,
+		value: draftValue,
+		onChange: (event) => setDraftValue(event.target.value),
+		onBlur: commitEdit,
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: handleKeyDown,
+		className: "min-h-[4lh] w-full resize-y bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
+	}) : /* @__PURE__ */ jsx("input", {
+		ref: setEditorRef,
+		type: "text",
+		value: draftValue,
+		onChange: (event) => setDraftValue(event.target.value),
+		onBlur: commitEdit,
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: handleKeyDown,
+		className: "w-full bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		"data-preview-field": fullPath,
+		"data-block-id": blockId,
+		"data-field-type": fieldType,
+		"data-preview-editable": editable,
+		"data-preview-editing": isEditing ? "true" : void 0,
+		tabIndex: 0,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		onKeyDown: handleKeyDown,
+		style,
+		className: cn(className, "group/preview-field relative rounded-[2px] transition-[box-shadow,outline-color,outline-offset] duration-150", "cursor-pointer outline outline-2 outline-offset-2 outline-transparent", "hover:outline-primary/50 hover:shadow-[0_0_0_4px_hsl(var(--primary)/0.10)]", "focus-visible:outline-primary/70 focus-visible:shadow-[0_0_0_4px_hsl(var(--primary)/0.12)]", isEditable && "cursor-text", isFocused && "outline-primary shadow-[0_0_0_4px_hsl(var(--primary)/0.14)]", isEditing && "outline-primary bg-background/80 shadow-[0_0_0_4px_hsl(var(--primary)/0.18)]"),
+		children: isEditing ? editor : children
+	});
 }
 function childrenToEditableValue(children) {
 	if (children === null || children === void 0 || typeof children === "boolean") return "";