@povio/ui 3.0.0-rc.3 → 3.1.0

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

@@ -5,7 +5,6 @@ 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";
@@ -38,464 +37,116 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-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;
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
 	const contentRef = useRef(null);
-	let t2;
-	if ($[0] !== isDisabled) {
-		t2 = { isDisabled };
-		$[0] = isDisabled;
-		$[1] = t2;
-	} else t2 = $[1];
-	const { hoverProps, isHovered } = useHover(t2);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = { onFocusWithinChange: setIsFocused };
-		$[2] = t3;
-	} else t3 = $[2];
-	const { focusWithinProps } = useFocusWithin(t3);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
 	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
-	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) => {
+	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) => {
 			onChange?.({
 				json: event.editor.getJSON(),
 				html: event.editor.getHTML()
 			});
-		};
-		$[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;
+		},
+		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")
+				})]
+			})]
+		})
+	});
 };
 var TextEditor = (props) => {
-	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		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;
+		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 t0;
-	if ($[13] !== props) {
-		t0 = /* @__PURE__ */ jsx(TextEditorBase, { ...props });
-		$[13] = props;
-		$[14] = t0;
-	} else t0 = $[14];
-	return t0;
+	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
 };
 //#endregion
 export { TextEditor };

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

@@ -1,44 +1,18 @@
-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 = (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;
+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))
+	});
 };
-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 };