@povio/ui 3.3.0-rc.4 → 3.3.0

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

@@ -38,403 +38,101 @@ 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, isDirty, 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-is-disabled": isDisabled || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
+			...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);

package/dist/components/inputs/shared/InputClear.js

@@ -1,7 +1,5 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
-import { buttonIconSizeDefinition } from "../../buttons/Button/button.cva.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { c } from "react/compiler-runtime";
@@ -10,70 +8,56 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = (t0) => {
-	const $ = c(16);
+	const $ = c(12);
 	const { onClear, className, style, show, renderStatic } = t0;
-	const ui = UIConfig.useConfig();
-	const buttonIconSizeCva = UIOverrides.useCva("button.iconSize", buttonIconSizeDefinition);
-	const alwaysShowClear = ui.input.alwaysShowClear;
+	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
 	let clearClassName;
 	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== buttonIconSizeCva || $[2] !== className || $[3] !== renderStatic || $[4] !== show || $[5] !== style) {
+	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
 		t1 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			clearClassName = clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
 			if (renderStatic) {
-				const t2 = clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName);
-				let t3;
-				if ($[8] !== buttonIconSizeCva) {
-					t3 = buttonIconSizeCva({
-						size: "none",
-						className: "shrink-0"
-					});
-					$[8] = buttonIconSizeCva;
-					$[9] = t3;
-				} else t3 = $[9];
-				let t4;
-				if ($[10] !== t3) {
-					t4 = /* @__PURE__ */ jsx(CloseIcon, { className: t3 });
-					$[10] = t3;
-					$[11] = t4;
-				} else t4 = $[11];
+				let t2;
+				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
+					$[7] = t2;
+				} else t2 = $[7];
 				t1 = /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-hidden": "true",
 					tabIndex: -1,
-					className: t2,
+					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
 					style,
-					children: t4
+					children: t2
 				});
 				break bb0;
 			}
 		}
 		$[0] = alwaysShowClear;
-		$[1] = buttonIconSizeCva;
-		$[2] = className;
-		$[3] = renderStatic;
-		$[4] = show;
-		$[5] = style;
-		$[6] = clearClassName;
-		$[7] = t1;
+		$[1] = className;
+		$[2] = renderStatic;
+		$[3] = show;
+		$[4] = style;
+		$[5] = clearClassName;
+		$[6] = t1;
 	} else {
-		clearClassName = $[6];
-		t1 = $[7];
+		clearClassName = $[5];
+		t1 = $[6];
 	}
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	let t2;
-	if ($[12] !== clearClassName || $[13] !== onClear || $[14] !== style) {
+	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
 		t2 = /* @__PURE__ */ jsx(InputClearButton, {
 			onClear,
 			className: clearClassName,
 			style
 		});
-		$[12] = clearClassName;
-		$[13] = onClear;
-		$[14] = style;
-		$[15] = t2;
-	} else t2 = $[15];
+		$[8] = clearClassName;
+		$[9] = onClear;
+		$[10] = style;
+		$[11] = t2;
+	} else t2 = $[11];
 	return t2;
 };
 var InputClearButton = (t0) => {