@povio/ui 3.1.0 → 3.2.0

package/dist/components/inputs/File/InputUpload.js

@@ -3,78 +3,244 @@ import { FormField } from "../FormField/FormField.js";
 import { FileUtils } from "../../../utils/file.utils.js";
 import { InputUploadContent } from "./shared/InputUploadContent.js";
 import { InputUploadFilled } from "./shared/InputUploadFilled.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/InputUpload.tsx
-var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, size, ...rest }) => {
+var InputUploadBase = (t0) => {
+	const $ = c(78);
+	let acceptedFileTypes;
+	let className;
+	let defaultValue;
+	let error;
+	let errorClassName;
+	let headerClassName;
+	let helperText;
+	let hideLabel;
+	let isDisabled;
+	let isHeaderHidden;
+	let isRequired;
+	let label;
+	let onChange;
+	let onInvalidFileType;
+	let rest;
+	let size;
+	let t1;
+	let tooltipText;
+	let value;
+	let variant;
+	if ($[0] !== t0) {
+		const { ref: _ref, label: t2, tooltipText: t3, variant: t4, helperText: t5, isRequired: t6, isDisabled: t7, headerClassName: t8, errorClassName: t9, isHeaderHidden: t10, error: t11, className: t12, onChange: t13, onInvalidFileType: t14, value: t15, defaultValue: t16, allowsMultiple: t17, hideLabel: t18, acceptedFileTypes: t19, size: t20, ...t21 } = t0;
+		label = t2;
+		tooltipText = t3;
+		variant = t4;
+		helperText = t5;
+		isRequired = t6;
+		isDisabled = t7;
+		headerClassName = t8;
+		errorClassName = t9;
+		isHeaderHidden = t10;
+		error = t11;
+		className = t12;
+		onChange = t13;
+		onInvalidFileType = t14;
+		value = t15;
+		defaultValue = t16;
+		t1 = t17;
+		hideLabel = t18;
+		acceptedFileTypes = t19;
+		size = t20;
+		rest = t21;
+		$[0] = t0;
+		$[1] = acceptedFileTypes;
+		$[2] = className;
+		$[3] = defaultValue;
+		$[4] = error;
+		$[5] = errorClassName;
+		$[6] = headerClassName;
+		$[7] = helperText;
+		$[8] = hideLabel;
+		$[9] = isDisabled;
+		$[10] = isHeaderHidden;
+		$[11] = isRequired;
+		$[12] = label;
+		$[13] = onChange;
+		$[14] = onInvalidFileType;
+		$[15] = rest;
+		$[16] = size;
+		$[17] = t1;
+		$[18] = tooltipText;
+		$[19] = value;
+		$[20] = variant;
+	} else {
+		acceptedFileTypes = $[1];
+		className = $[2];
+		defaultValue = $[3];
+		error = $[4];
+		errorClassName = $[5];
+		headerClassName = $[6];
+		helperText = $[7];
+		hideLabel = $[8];
+		isDisabled = $[9];
+		isHeaderHidden = $[10];
+		isRequired = $[11];
+		label = $[12];
+		onChange = $[13];
+		onInvalidFileType = $[14];
+		rest = $[15];
+		size = $[16];
+		t1 = $[17];
+		tooltipText = $[18];
+		value = $[19];
+		variant = $[20];
+	}
+	const allowsMultiple = t1 === void 0 ? false : t1;
 	const ui = UIConfig.useConfig();
-	const [internalFiles, setInternalFiles] = useState(() => {
-		if (value !== void 0) {
+	let t2;
+	if ($[21] !== allowsMultiple || $[22] !== defaultValue || $[23] !== value) {
+		t2 = () => {
+			if (value !== void 0) {
+				if (allowsMultiple) return value || [];
+				return value ? [value] : [];
+			}
+			if (defaultValue !== void 0) {
+				if (allowsMultiple) return defaultValue || [];
+				return defaultValue ? [defaultValue] : [];
+			}
+			return [];
+		};
+		$[21] = allowsMultiple;
+		$[22] = defaultValue;
+		$[23] = value;
+		$[24] = t2;
+	} else t2 = $[24];
+	const [internalFiles, setInternalFiles] = useState(t2);
+	let t3;
+	if ($[25] !== allowsMultiple || $[26] !== internalFiles || $[27] !== value) {
+		t3 = value !== void 0 ? (() => {
 			if (allowsMultiple) return value || [];
 			return value ? [value] : [];
-		}
-		if (defaultValue !== void 0) {
-			if (allowsMultiple) return defaultValue || [];
-			return defaultValue ? [defaultValue] : [];
-		}
-		return [];
-	});
-	const files = value !== void 0 ? (() => {
-		if (allowsMultiple) return value || [];
-		return value ? [value] : [];
-	})() : internalFiles;
-	const formFieldProps = {
-		error,
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		isHeaderHidden,
-		hideLabel: hideLabel ?? ui.input.hideLabel,
-		isDisabled,
-		headerClassName,
-		errorClassName
-	};
-	const labelProps = useLabels({ "aria-label": label });
-	const updateFiles = (newFiles) => {
-		if (value === void 0) setInternalFiles(newFiles);
-		if (allowsMultiple) onChange?.(newFiles);
-		else onChange?.(newFiles[0] || null);
-	};
-	const handleFileSelect = (inputFiles) => {
-		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		if (allowsMultiple) {
-			updateFiles([...files, ...acceptedFiles]);
-			if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles.map((file) => file.name));
-		} else {
-			if (acceptedFiles.length > 0) updateFiles([acceptedFiles[0]]);
-			if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles[0].name);
-		}
-	};
-	const handleSelect = (inputFiles) => {
-		if (!inputFiles) return;
-		handleFileSelect(Array.from(inputFiles));
-	};
-	const handleDrop = async (e) => {
-		if (!e.items) return;
-		const promises = [];
-		e.items.forEach((item) => {
-			if (item.kind === "file") promises.push(item.getFile());
-		});
-		handleFileSelect(await Promise.all(promises));
-	};
-	const handleRemove = () => {
-		updateFiles([]);
-	};
-	return /* @__PURE__ */ jsx(FormField, {
-		...formFieldProps,
-		labelProps,
-		className: clsx("group w-full", className),
-		children: files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
+		})() : internalFiles;
+		$[25] = allowsMultiple;
+		$[26] = internalFiles;
+		$[27] = value;
+		$[28] = t3;
+	} else t3 = $[28];
+	const files = t3;
+	const t4 = hideLabel ?? ui.input.hideLabel;
+	let t5;
+	if ($[29] !== error || $[30] !== errorClassName || $[31] !== headerClassName || $[32] !== helperText || $[33] !== isDisabled || $[34] !== isHeaderHidden || $[35] !== isRequired || $[36] !== label || $[37] !== t4 || $[38] !== tooltipText) {
+		t5 = {
+			error,
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			isHeaderHidden,
+			hideLabel: t4,
+			isDisabled,
+			headerClassName,
+			errorClassName
+		};
+		$[29] = error;
+		$[30] = errorClassName;
+		$[31] = headerClassName;
+		$[32] = helperText;
+		$[33] = isDisabled;
+		$[34] = isHeaderHidden;
+		$[35] = isRequired;
+		$[36] = label;
+		$[37] = t4;
+		$[38] = tooltipText;
+		$[39] = t5;
+	} else t5 = $[39];
+	const formFieldProps = t5;
+	let t6;
+	if ($[40] !== label) {
+		t6 = { "aria-label": label };
+		$[40] = label;
+		$[41] = t6;
+	} else t6 = $[41];
+	const labelProps = useLabels(t6);
+	let t7;
+	if ($[42] !== allowsMultiple || $[43] !== onChange || $[44] !== value) {
+		t7 = (newFiles) => {
+			if (value === void 0) setInternalFiles(newFiles);
+			if (allowsMultiple) onChange?.(newFiles);
+			else onChange?.(newFiles[0] || null);
+		};
+		$[42] = allowsMultiple;
+		$[43] = onChange;
+		$[44] = value;
+		$[45] = t7;
+	} else t7 = $[45];
+	const updateFiles = t7;
+	let t8;
+	if ($[46] !== acceptedFileTypes || $[47] !== allowsMultiple || $[48] !== files || $[49] !== onInvalidFileType || $[50] !== updateFiles) {
+		t8 = (inputFiles) => {
+			const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+			const invalidFiles = inputFiles.filter((file_0) => !FileUtils.isFileTypeAccepted(file_0, acceptedFileTypes));
+			if (allowsMultiple) {
+				updateFiles([...files, ...acceptedFiles]);
+				if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles.map(_temp));
+			} else {
+				if (acceptedFiles.length > 0) updateFiles([acceptedFiles[0]]);
+				if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles[0].name);
+			}
+		};
+		$[46] = acceptedFileTypes;
+		$[47] = allowsMultiple;
+		$[48] = files;
+		$[49] = onInvalidFileType;
+		$[50] = updateFiles;
+		$[51] = t8;
+	} else t8 = $[51];
+	const handleFileSelect = t8;
+	let t9;
+	if ($[52] !== handleFileSelect) {
+		t9 = (inputFiles_0) => {
+			if (!inputFiles_0) return;
+			handleFileSelect(Array.from(inputFiles_0));
+		};
+		$[52] = handleFileSelect;
+		$[53] = t9;
+	} else t9 = $[53];
+	const handleSelect = t9;
+	let t10;
+	if ($[54] !== handleFileSelect) {
+		t10 = async (e) => {
+			if (!e.items) return;
+			const promises = [];
+			e.items.forEach((item) => {
+				if (item.kind === "file") promises.push(item.getFile());
+			});
+			handleFileSelect(await Promise.all(promises));
+		};
+		$[54] = handleFileSelect;
+		$[55] = t10;
+	} else t10 = $[55];
+	const handleDrop = t10;
+	let t11;
+	if ($[56] !== updateFiles) {
+		t11 = () => {
+			updateFiles([]);
+		};
+		$[56] = updateFiles;
+		$[57] = t11;
+	} else t11 = $[57];
+	const handleRemove = t11;
+	let t12;
+	if ($[58] !== className) {
+		t12 = clsx("group w-full", className);
+		$[58] = className;
+		$[59] = t12;
+	} else t12 = $[59];
+	let t13;
+	if ($[60] !== acceptedFileTypes || $[61] !== allowsMultiple || $[62] !== error || $[63] !== files || $[64] !== handleDrop || $[65] !== handleRemove || $[66] !== handleSelect || $[67] !== isDisabled || $[68] !== label || $[69] !== rest || $[70] !== size || $[71] !== variant) {
+		t13 = files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
 			files,
 			onRemove: handleRemove,
 			isDisabled,
@@ -90,26 +256,98 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 			onSelect: handleSelect,
 			onDrop: handleDrop,
 			size
-		})
-	});
+		});
+		$[60] = acceptedFileTypes;
+		$[61] = allowsMultiple;
+		$[62] = error;
+		$[63] = files;
+		$[64] = handleDrop;
+		$[65] = handleRemove;
+		$[66] = handleSelect;
+		$[67] = isDisabled;
+		$[68] = label;
+		$[69] = rest;
+		$[70] = size;
+		$[71] = variant;
+		$[72] = t13;
+	} else t13 = $[72];
+	let t14;
+	if ($[73] !== formFieldProps || $[74] !== labelProps || $[75] !== t12 || $[76] !== t13) {
+		t14 = /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			labelProps,
+			className: t12,
+			children: t13
+		});
+		$[73] = formFieldProps;
+		$[74] = labelProps;
+		$[75] = t12;
+		$[76] = t13;
+		$[77] = t14;
+	} else t14 = $[77];
+	return t14;
 };
 var InputUpload = (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, fieldState: { error } }) => /* @__PURE__ */ jsx(InputUploadBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: field.onChange,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
-		});
+		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 } = t2;
+				return /* @__PURE__ */ jsx(InputUploadBase, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					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(InputUploadBase, { ...props });
+	let t0;
+	if ($[13] !== props) {
+		t0 = /* @__PURE__ */ jsx(InputUploadBase, { ...props });
+		$[13] = props;
+		$[14] = t0;
+	} else t0 = $[14];
+	return t0;
 };
+function _temp(file_1) {
+	return file_1.name;
+}
 //#endregion
 export { InputUpload };

package/dist/components/inputs/File/index.d.ts

@@ -6,4 +6,4 @@ export type { InputUploadBaseProps, InputUploadProps } from './InputUpload';
 export { InputUpload } from './InputUpload';
 export { FileCard } from './shared/FileCard';
 export type { FileUploadDropZoneProps } from './shared/fileUpload.cva';
-export { fileUploadDropZone } from './shared/fileUpload.cva';
+export { fileUploadDropZoneDefinition } from './shared/fileUpload.cva';

package/dist/components/inputs/File/shared/FileCard.js

@@ -1,52 +1,115 @@
 import { FileUploadContentError } from "./FileUploadContentError.js";
 import { FileUploadContentFilled } from "./FileUploadContentFilled.js";
 import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo } from "react";
 //#region src/components/inputs/File/shared/FileCard.tsx
-var FileCard = ({ index, as, state, onRemove, isDisabled, onCancel }) => {
-	const content = useMemo(() => {
-		if (state.state === "uploading") return /* @__PURE__ */ jsx(FileUploadContentLoading, {
-			index,
-			variant: "horizontal",
-			as,
-			isDisabled,
-			state,
-			onCancel: () => onCancel?.(index)
-		});
-		if (state.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
-			as,
-			removeWithIcon: true,
-			variant: "horizontal",
-			isDisabled,
-			state,
-			onRemove: () => {
-				onCancel?.(index);
-			}
-		});
-		return /* @__PURE__ */ jsx(FileUploadContentFilled, {
-			as,
-			removeWithIcon: true,
-			variant: "horizontal",
-			isDisabled,
-			state,
-			onRemove: () => {
+var FileCard = (t0) => {
+	const $ = c(28);
+	const { index, as, state, onRemove, isDisabled, onCancel } = t0;
+	let t1;
+	bb0: {
+		if (state.state === "uploading") {
+			let t2;
+			if ($[0] !== index || $[1] !== onCancel) {
+				t2 = () => onCancel?.(index);
+				$[0] = index;
+				$[1] = onCancel;
+				$[2] = t2;
+			} else t2 = $[2];
+			let t3;
+			if ($[3] !== as || $[4] !== index || $[5] !== isDisabled || $[6] !== state || $[7] !== t2) {
+				t3 = /* @__PURE__ */ jsx(FileUploadContentLoading, {
+					index,
+					variant: "horizontal",
+					as,
+					isDisabled,
+					state,
+					onCancel: t2
+				});
+				$[3] = as;
+				$[4] = index;
+				$[5] = isDisabled;
+				$[6] = state;
+				$[7] = t2;
+				$[8] = t3;
+			} else t3 = $[8];
+			t1 = t3;
+			break bb0;
+		}
+		if (state.state === "error") {
+			let t2;
+			if ($[9] !== index || $[10] !== onCancel) {
+				t2 = () => {
+					onCancel?.(index);
+				};
+				$[9] = index;
+				$[10] = onCancel;
+				$[11] = t2;
+			} else t2 = $[11];
+			let t3;
+			if ($[12] !== as || $[13] !== isDisabled || $[14] !== state || $[15] !== t2) {
+				t3 = /* @__PURE__ */ jsx(FileUploadContentError, {
+					as,
+					removeWithIcon: true,
+					variant: "horizontal",
+					isDisabled,
+					state,
+					onRemove: t2
+				});
+				$[12] = as;
+				$[13] = isDisabled;
+				$[14] = state;
+				$[15] = t2;
+				$[16] = t3;
+			} else t3 = $[16];
+			t1 = t3;
+			break bb0;
+		}
+		let t2;
+		if ($[17] !== onRemove || $[18] !== state.id) {
+			t2 = () => {
 				onRemove?.(state.id ?? "");
-			}
+			};
+			$[17] = onRemove;
+			$[18] = state.id;
+			$[19] = t2;
+		} else t2 = $[19];
+		let t3;
+		if ($[20] !== as || $[21] !== isDisabled || $[22] !== state || $[23] !== t2) {
+			t3 = /* @__PURE__ */ jsx(FileUploadContentFilled, {
+				as,
+				removeWithIcon: true,
+				variant: "horizontal",
+				isDisabled,
+				state,
+				onRemove: t2
+			});
+			$[20] = as;
+			$[21] = isDisabled;
+			$[22] = state;
+			$[23] = t2;
+			$[24] = t3;
+		} else t3 = $[24];
+		t1 = t3;
+	}
+	const content = t1;
+	let t2;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = clsx("flex items-center self-stretch", "bg-elevation-fill-default-1", "px-file-upload-file-card-side-default", "py-4", "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid");
+		$[25] = t2;
+	} else t2 = $[25];
+	let t3;
+	if ($[26] !== content) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: content
 		});
-	}, [
-		state,
-		index,
-		as,
-		isDisabled,
-		onCancel,
-		onRemove
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex items-center self-stretch", "bg-elevation-fill-default-1", "px-file-upload-file-card-side-default", "py-4", "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid"),
-		children: content
-	});
+		$[26] = content;
+		$[27] = t3;
+	} else t3 = $[27];
+	return t3;
 };
 //#endregion
 export { FileCard };

package/dist/components/inputs/File/shared/FileCardList.js

@@ -1,19 +1,54 @@
 import { FileCard } from "./FileCard.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/File/shared/FileCardList.tsx
-var FileCardList = ({ uploadState, as, isDisabled, className, onRemove, onCancel }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className),
-		children: uploadState.map((state, index) => /* @__PURE__ */ jsx(FileCard, {
-			index,
-			as,
-			state,
-			isDisabled,
-			onRemove,
-			onCancel
-		}, state.file?.name ?? state.displayName ?? state.id ?? state.src))
-	});
+var FileCardList = (t0) => {
+	const $ = c(16);
+	const { uploadState, as, isDisabled, className, onRemove, onCancel } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== as || $[3] !== isDisabled || $[4] !== onCancel || $[5] !== onRemove || $[6] !== uploadState) {
+		let t3;
+		if ($[8] !== as || $[9] !== isDisabled || $[10] !== onCancel || $[11] !== onRemove) {
+			t3 = (state, index) => /* @__PURE__ */ jsx(FileCard, {
+				index,
+				as,
+				state,
+				isDisabled,
+				onRemove,
+				onCancel
+			}, state.file?.name ?? state.displayName ?? state.id ?? state.src);
+			$[8] = as;
+			$[9] = isDisabled;
+			$[10] = onCancel;
+			$[11] = onRemove;
+			$[12] = t3;
+		} else t3 = $[12];
+		t2 = uploadState.map(t3);
+		$[2] = as;
+		$[3] = isDisabled;
+		$[4] = onCancel;
+		$[5] = onRemove;
+		$[6] = uploadState;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 };
 //#endregion
 export { FileCardList };