@povio/ui 3.1.0 → 3.2.0

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -5,6 +5,7 @@ import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { inputSideDefinition } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -37,116 +38,464 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
+var TextEditorBase = (t0) => {
+	const $ = c(132);
+	const { ref, as: t1, placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur } = t0;
+	const as = t1 === void 0 ? "default" : t1;
 	const contentRef = useRef(null);
-	const { hoverProps, isHovered } = useHover({ isDisabled });
+	let t2;
+	if ($[0] !== isDisabled) {
+		t2 = { isDisabled };
+		$[0] = isDisabled;
+		$[1] = t2;
+	} else t2 = $[1];
+	const { hoverProps, isHovered } = useHover(t2);
 	const [isFocused, setIsFocused] = useState(false);
-	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { onFocusWithinChange: setIsFocused };
+		$[2] = t3;
+	} else t3 = $[2];
+	const { focusWithinProps } = useFocusWithin(t3);
 	const { isFocusVisible } = useFocusVisible();
 	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
-	const formFieldProps = {
-		error,
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
-		hideLabel,
-		isDisabled,
-		headerClassName,
-		errorClassName
-	};
-	const { labelProps, fieldProps } = useLabel({ label });
-	const editor = useEditor({
-		extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
-		editorProps: { attributes: { class: clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName) } },
-		onUpdate: (event) => {
+	const t4 = isHeaderHidden || as === "filter" || as === "floating";
+	let t5;
+	if ($[3] !== error || $[4] !== errorClassName || $[5] !== headerClassName || $[6] !== helperText || $[7] !== hideLabel || $[8] !== isDisabled || $[9] !== isRequired || $[10] !== label || $[11] !== rightContent || $[12] !== t4 || $[13] !== tooltipText) {
+		t5 = {
+			error,
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			rightContent,
+			isHeaderHidden: t4,
+			hideLabel,
+			isDisabled,
+			headerClassName,
+			errorClassName
+		};
+		$[3] = error;
+		$[4] = errorClassName;
+		$[5] = headerClassName;
+		$[6] = helperText;
+		$[7] = hideLabel;
+		$[8] = isDisabled;
+		$[9] = isRequired;
+		$[10] = label;
+		$[11] = rightContent;
+		$[12] = t4;
+		$[13] = tooltipText;
+		$[14] = t5;
+	} else t5 = $[14];
+	const formFieldProps = t5;
+	let t6;
+	if ($[15] !== label) {
+		t6 = { label };
+		$[15] = label;
+		$[16] = t6;
+	} else t6 = $[16];
+	const { labelProps, fieldProps } = useLabel(t6);
+	let t7;
+	if ($[17] !== as || $[18] !== placeholder) {
+		t7 = Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder });
+		$[17] = as;
+		$[18] = placeholder;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t7) {
+		t8 = [...extensions, t7];
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== editorClassName) {
+		t9 = clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName);
+		$[22] = editorClassName;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t9) {
+		t10 = { attributes: { class: t9 } };
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== onChange) {
+		t11 = (event) => {
 			onChange?.({
 				json: event.editor.getJSON(),
 				html: event.editor.getHTML()
 			});
-		},
-		immediatelyRender: false,
-		editable: !isDisabled,
-		onBlur
-	}, [isDisabled, editorClassName]);
-	useEffect(() => {
-		const content = value?.json ?? null;
-		if (editor) {
-			if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
-		} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
-	}, [value]);
-	useEffect(() => {
-		if (editor && contentRef.current) {
-			editor.commands.setContent(contentRef.current);
-			contentRef.current = null;
-		}
-	}, [editor]);
-	const headerProps = {
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: hideLabel || isHeaderHidden,
-		isDisabled,
-		className: headerClassName,
-		labelProps
-	};
-	return /* @__PURE__ */ jsx(FormField, {
-		...formFieldProps,
-		ref,
-		as,
-		labelProps,
-		className: clsx("group w-full", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
-			"data-text-editor": true,
-			"data-rac": "",
-			"data-hovered": isHovered || void 0,
-			"data-disabled": isDisabled || void 0,
-			"data-focus-within": isFocused || void 0,
-			"data-focus-visible": isFocused && isFocusVisible || void 0,
-			"data-is-filled": !editor?.isEmpty,
-			...hoverProps,
-			...focusWithinProps,
-			...fieldProps,
-			children: [/* @__PURE__ */ jsx(TextEditorToolbar, { editor }), /* @__PURE__ */ jsxs("div", {
-				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
-				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-					as,
-					...headerProps,
-					className: clsx(headerProps.className, inputSideCva({
-						size: "default",
-						type: "left"
-					}))
-				}), /* @__PURE__ */ jsx(EditorContent, {
-					editor,
-					placeholder: as === "floating" ? "" : placeholder,
-					className: clsx(as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0")
-				})]
-			})]
-		})
-	});
+		};
+		$[26] = onChange;
+		$[27] = t11;
+	} else t11 = $[27];
+	const t12 = !isDisabled;
+	let t13;
+	if ($[28] !== onBlur || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t8) {
+		t13 = {
+			extensions: t8,
+			editorProps: t10,
+			onUpdate: t11,
+			immediatelyRender: false,
+			editable: t12,
+			onBlur
+		};
+		$[28] = onBlur;
+		$[29] = t10;
+		$[30] = t11;
+		$[31] = t12;
+		$[32] = t8;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== editorClassName || $[35] !== isDisabled) {
+		t14 = [isDisabled, editorClassName];
+		$[34] = editorClassName;
+		$[35] = isDisabled;
+		$[36] = t14;
+	} else t14 = $[36];
+	const editor = useEditor(t13, t14);
+	let t15;
+	if ($[37] !== editor || $[38] !== value?.json) {
+		t15 = () => {
+			const content = value?.json ?? null;
+			if (editor) {
+				if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
+			} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
+		};
+		$[37] = editor;
+		$[38] = value?.json;
+		$[39] = t15;
+	} else t15 = $[39];
+	let t16;
+	if ($[40] !== value) {
+		t16 = [value];
+		$[40] = value;
+		$[41] = t16;
+	} else t16 = $[41];
+	useEffect(t15, t16);
+	let t17;
+	let t18;
+	if ($[42] !== editor) {
+		t17 = () => {
+			if (editor && contentRef.current) {
+				editor.commands.setContent(contentRef.current);
+				contentRef.current = null;
+			}
+		};
+		t18 = [editor];
+		$[42] = editor;
+		$[43] = t17;
+		$[44] = t18;
+	} else {
+		t17 = $[43];
+		t18 = $[44];
+	}
+	useEffect(t17, t18);
+	const t19 = hideLabel || isHeaderHidden;
+	let T0;
+	let t20;
+	let t21;
+	let t22;
+	let t23;
+	let t24;
+	let t25;
+	let t26;
+	let t27;
+	let t28;
+	let t29;
+	let t30;
+	let t31;
+	let t32;
+	let t33;
+	let t34;
+	let t35;
+	let t36;
+	let t37;
+	let t38;
+	let t39;
+	let t40;
+	let t41;
+	if ($[45] !== as || $[46] !== className || $[47] !== editor || $[48] !== fieldProps || $[49] !== focusWithinProps || $[50] !== formFieldProps || $[51] !== headerClassName || $[52] !== helperText || $[53] !== hoverProps || $[54] !== inputSideCva || $[55] !== isDirty || $[56] !== isDisabled || $[57] !== isFocusVisible || $[58] !== isFocused || $[59] !== isHovered || $[60] !== isRequired || $[61] !== label || $[62] !== labelProps || $[63] !== ref || $[64] !== rightContent || $[65] !== t19 || $[66] !== tooltipText) {
+		const headerProps = {
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			rightContent,
+			isHeaderHidden: t19,
+			isDisabled,
+			className: headerClassName,
+			labelProps
+		};
+		T0 = FormField;
+		t37 = formFieldProps;
+		t38 = ref;
+		t39 = as;
+		t40 = labelProps;
+		if ($[90] !== className) {
+			t41 = clsx("group w-full", className);
+			$[90] = className;
+			$[91] = t41;
+		} else t41 = $[91];
+		if ($[92] === Symbol.for("react.memo_cache_sentinel")) {
+			t22 = clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover");
+			$[92] = t22;
+		} else t22 = $[92];
+		t23 = true;
+		t24 = "";
+		t25 = isHovered || void 0;
+		t26 = isDisabled || void 0;
+		t27 = isDisabled || void 0;
+		t28 = isFocused || void 0;
+		t29 = isFocused && isFocusVisible || void 0;
+		t30 = !editor?.isEmpty;
+		t31 = isRequired || void 0;
+		t32 = isDirty || void 0;
+		t33 = hoverProps;
+		t34 = focusWithinProps;
+		t35 = fieldProps;
+		if ($[93] !== editor) {
+			t36 = /* @__PURE__ */ jsx(TextEditorToolbar, { editor });
+			$[93] = editor;
+			$[94] = t36;
+		} else t36 = $[94];
+		const t42 = as === "floating" && "pt-3";
+		if ($[95] !== t42) {
+			t20 = clsx("relative overflow-auto", t42);
+			$[95] = t42;
+			$[96] = t20;
+		} else t20 = $[96];
+		t21 = as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+			as,
+			...headerProps,
+			className: clsx(headerProps.className, inputSideCva({
+				size: "default",
+				type: "left"
+			}))
+		});
+		$[45] = as;
+		$[46] = className;
+		$[47] = editor;
+		$[48] = fieldProps;
+		$[49] = focusWithinProps;
+		$[50] = formFieldProps;
+		$[51] = headerClassName;
+		$[52] = helperText;
+		$[53] = hoverProps;
+		$[54] = inputSideCva;
+		$[55] = isDirty;
+		$[56] = isDisabled;
+		$[57] = isFocusVisible;
+		$[58] = isFocused;
+		$[59] = isHovered;
+		$[60] = isRequired;
+		$[61] = label;
+		$[62] = labelProps;
+		$[63] = ref;
+		$[64] = rightContent;
+		$[65] = t19;
+		$[66] = tooltipText;
+		$[67] = T0;
+		$[68] = t20;
+		$[69] = t21;
+		$[70] = t22;
+		$[71] = t23;
+		$[72] = t24;
+		$[73] = t25;
+		$[74] = t26;
+		$[75] = t27;
+		$[76] = t28;
+		$[77] = t29;
+		$[78] = t30;
+		$[79] = t31;
+		$[80] = t32;
+		$[81] = t33;
+		$[82] = t34;
+		$[83] = t35;
+		$[84] = t36;
+		$[85] = t37;
+		$[86] = t38;
+		$[87] = t39;
+		$[88] = t40;
+		$[89] = t41;
+	} else {
+		T0 = $[67];
+		t20 = $[68];
+		t21 = $[69];
+		t22 = $[70];
+		t23 = $[71];
+		t24 = $[72];
+		t25 = $[73];
+		t26 = $[74];
+		t27 = $[75];
+		t28 = $[76];
+		t29 = $[77];
+		t30 = $[78];
+		t31 = $[79];
+		t32 = $[80];
+		t33 = $[81];
+		t34 = $[82];
+		t35 = $[83];
+		t36 = $[84];
+		t37 = $[85];
+		t38 = $[86];
+		t39 = $[87];
+		t40 = $[88];
+		t41 = $[89];
+	}
+	const t42 = as === "floating" ? "" : placeholder;
+	const t43 = as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0";
+	let t44;
+	if ($[97] !== t43) {
+		t44 = clsx(t43);
+		$[97] = t43;
+		$[98] = t44;
+	} else t44 = $[98];
+	let t45;
+	if ($[99] !== editor || $[100] !== t42 || $[101] !== t44) {
+		t45 = /* @__PURE__ */ jsx(EditorContent, {
+			editor,
+			placeholder: t42,
+			className: t44
+		});
+		$[99] = editor;
+		$[100] = t42;
+		$[101] = t44;
+		$[102] = t45;
+	} else t45 = $[102];
+	let t46;
+	if ($[103] !== t20 || $[104] !== t21 || $[105] !== t45) {
+		t46 = /* @__PURE__ */ jsxs("div", {
+			className: t20,
+			children: [t21, t45]
+		});
+		$[103] = t20;
+		$[104] = t21;
+		$[105] = t45;
+		$[106] = t46;
+	} else t46 = $[106];
+	let t47;
+	if ($[107] !== t22 || $[108] !== t23 || $[109] !== t24 || $[110] !== t25 || $[111] !== t26 || $[112] !== t27 || $[113] !== t28 || $[114] !== t29 || $[115] !== t30 || $[116] !== t31 || $[117] !== t32 || $[118] !== t33 || $[119] !== t34 || $[120] !== t35 || $[121] !== t36 || $[122] !== t46) {
+		t47 = /* @__PURE__ */ jsxs("div", {
+			className: t22,
+			"data-text-editor": t23,
+			"data-rac": t24,
+			"data-hovered": t25,
+			"data-disabled": t26,
+			"data-is-disabled": t27,
+			"data-focus-within": t28,
+			"data-focus-visible": t29,
+			"data-is-filled": t30,
+			"data-is-required": t31,
+			"data-is-dirty": t32,
+			...t33,
+			...t34,
+			...t35,
+			children: [t36, t46]
+		});
+		$[107] = t22;
+		$[108] = t23;
+		$[109] = t24;
+		$[110] = t25;
+		$[111] = t26;
+		$[112] = t27;
+		$[113] = t28;
+		$[114] = t29;
+		$[115] = t30;
+		$[116] = t31;
+		$[117] = t32;
+		$[118] = t33;
+		$[119] = t34;
+		$[120] = t35;
+		$[121] = t36;
+		$[122] = t46;
+		$[123] = t47;
+	} else t47 = $[123];
+	let t48;
+	if ($[124] !== T0 || $[125] !== t37 || $[126] !== t38 || $[127] !== t39 || $[128] !== t40 || $[129] !== t41 || $[130] !== t47) {
+		t48 = /* @__PURE__ */ jsx(T0, {
+			...t37,
+			ref: t38,
+			as: t39,
+			labelProps: t40,
+			className: t41,
+			children: t47
+		});
+		$[124] = T0;
+		$[125] = t37;
+		$[126] = t38;
+		$[127] = t39;
+		$[128] = t40;
+		$[129] = t41;
+		$[130] = t47;
+		$[131] = t48;
+	} else t48 = $[131];
+	return t48;
 };
 var TextEditor = (props) => {
+	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(Controller, {
-			control: formControl.control,
-			name: formControl.name,
-			render: ({ field }) => /* @__PURE__ */ jsx(TextEditorBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: field.onChange,
-				onBlur: field.onBlur,
-				isDisabled: field.disabled || props.isDisabled
-			})
-		});
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = formControl;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			formControl = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		let t0;
+		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
+			t0 = (t1) => {
+				const { field, fieldState: t2 } = t1;
+				const { error, isDirty } = t2;
+				return /* @__PURE__ */ jsx(TextEditorBase, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					onBlur: field.onBlur,
+					isDirty,
+					isDisabled: field.disabled || props.isDisabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = innerProps;
+			$[5] = props.error;
+			$[6] = props.isDisabled;
+			$[7] = ref;
+			$[8] = t0;
+		} else t0 = $[8];
+		let t1;
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t0
+			});
+			$[9] = formControl.control;
+			$[10] = formControl.name;
+			$[11] = t0;
+			$[12] = t1;
+		} else t1 = $[12];
+		return t1;
 	}
-	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
+	let t0;
+	if ($[13] !== props) {
+		t0 = /* @__PURE__ */ jsx(TextEditorBase, { ...props });
+		$[13] = props;
+		$[14] = t0;
+	} else t0 = $[14];
+	return t0;
 };
 //#endregion
 export { TextEditor };

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js

@@ -1,18 +1,44 @@
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
 //#region src/components/inputs/TextEditor/Toolbar/ColorPicker.tsx
-var ColorPicker = ({ colors, value, onChange }) => {
-	return /* @__PURE__ */ jsx(ColorSwatchPicker, {
-		value,
-		onChange: (color) => onChange(color.toString("hex")),
-		className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
-		children: colors.map((color) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
-			color,
-			className: "group",
-			children: /* @__PURE__ */ jsx(ColorSwatch, { className: clsx("size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid", "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2", "cursor-pointer") })
-		}, color))
-	});
+var ColorPicker = (t0) => {
+	const $ = c(8);
+	const { colors, value, onChange } = t0;
+	let t1;
+	if ($[0] !== onChange) {
+		t1 = (color) => onChange(color.toString("hex"));
+		$[0] = onChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== colors) {
+		t2 = colors.map(_temp);
+		$[2] = colors;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2 || $[6] !== value) {
+		t3 = /* @__PURE__ */ jsx(ColorSwatchPicker, {
+			value,
+			onChange: t1,
+			className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
+			children: t2
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = value;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 };
+function _temp(color_0) {
+	return /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
+		color: color_0,
+		className: "group",
+		children: /* @__PURE__ */ jsx(ColorSwatch, { className: clsx("size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid", "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2", "cursor-pointer") })
+	}, color_0);
+}
 //#endregion
 export { ColorPicker };