@drivenets/design-system 0.0.3 → 0.0.5

package/dist/components/ds-file-upload/components/file-upload-item/file-upload-item.cjs

@@ -7,6 +7,7 @@ const require_ds_tooltip = require('../../../ds-tooltip/ds-tooltip.cjs');
 require('../../../ds-tooltip/index.cjs');
 const require_get_error_message = require('../../utils/get-error-message.cjs');
 const require_file_upload_item_module = require('./file-upload-item.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,140 +18,280 @@ let __ark_ui_react = require("@ark-ui/react");
 * Individual file upload item component
 * Displays a single file with its upload status, progress, and action buttons
 */
-const FileUploadItem = ({ id, name, progress, hideProgress = false, status, errors, onCancel, onRetry, onRemove, onDelete }) => {
-	const fileItemClass = (0, classnames.default)(require_file_upload_item_module.default.fileItemContent, {
-		[require_file_upload_item_module.default.fileItemError]: status === "error",
-		[require_file_upload_item_module.default.fileItemCompleted]: status === "completed",
-		[require_file_upload_item_module.default.fileItemUploading]: status === "uploading",
-		[require_file_upload_item_module.default.fileItemInterrupted]: status === "interrupted" || status === "cancelled"
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_file_upload_item_module.default.fileItem,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: fileItemClass,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-						className: require_file_upload_item_module.default.filePreview,
-						icon: "upload_file",
-						size: "tiny"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_file_upload_item_module.default.fileInfo,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: require_file_upload_item_module.default.fileName,
-							title: name,
-							children: name
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Root, {
-							value: status === "error" ? 1 : progress,
-							className: require_file_upload_item_module.default.progressBar,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Track, {
-								className: require_file_upload_item_module.default.progressTrack,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Range, { className: require_file_upload_item_module.default.progressRange })
-							})
-						})]
-					}),
-					(status === "interrupted" || status === "cancelled") && onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
-						content: "Retry",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-							type: "button",
-							design: "v1.2",
-							buttonType: "tertiary",
-							"aria-label": `Retry ${name} upload`,
-							onClick: () => onRetry(id),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-								icon: "refresh",
-								size: "small"
-							})
-						})
-					}),
-					(status === "pending" || status === "error" || status === "interrupted") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
-						content: "Remove",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-							type: "button",
-							design: "v1.2",
-							buttonType: "tertiary",
-							"aria-label": `Remove ${name} upload`,
-							onClick: () => onRemove?.(id),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-								icon: "do_not_disturb_on",
-								size: "small"
-							})
-						})
-					}),
-					status === "uploading" && onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
-						content: "Cancel",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-							type: "button",
-							design: "v1.2",
-							buttonType: "tertiary",
-							"aria-label": `Cancel ${name} upload`,
-							onClick: () => onCancel(id),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-								icon: "close",
-								size: "small"
-							})
-						})
-					}),
-					status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
-						content: "Delete",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-							type: "button",
-							design: "v1.2",
-							buttonType: "tertiary",
-							"aria-label": `Delete ${name}`,
-							onClick: () => onDelete?.(id),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-								icon: "delete",
-								size: "small"
-							})
-						})
-					})
-				]
-			}),
-			status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_file_upload_item_module.default.completedText,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-					icon: "check_circle",
-					size: "tiny",
-					filled: true
-				}), "Upload complete"]
-			}),
-			status === "interrupted" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_file_upload_item_module.default.interruptedText,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-					icon: "info",
-					size: "tiny",
-					filled: true
-				}), "Upload interrupted"]
-			}),
-			status === "cancelled" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_file_upload_item_module.default.interruptedText,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-					icon: "info",
-					size: "tiny",
-					filled: true
-				}), "Upload cancelled"]
-			}),
-			status === "error" && errors?.length && errors.map((error) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_file_upload_item_module.default.errorMessage,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-					icon: "cancel",
-					size: "tiny",
-					filled: true
-				}), require_get_error_message.getErrorMessage(error)]
-			}, error)),
-			!hideProgress && status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: require_file_upload_item_module.default.progressText,
-				children: [
-					"Uploading...(",
-					Math.round(progress),
-					"%)"
-				]
+const FileUploadItem = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(61);
+	const { id, name, progress, hideProgress: t1, status, errors, onCancel, onRetry, onRemove, onDelete } = t0;
+	const hideProgress = t1 === void 0 ? false : t1;
+	const t2 = status === "error";
+	const t3 = status === "completed";
+	const t4 = status === "uploading";
+	const t5 = status === "interrupted" || status === "cancelled";
+	let t6;
+	if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+		t6 = (0, classnames.default)(require_file_upload_item_module.default.fileItemContent, {
+			[require_file_upload_item_module.default.fileItemError]: t2,
+			[require_file_upload_item_module.default.fileItemCompleted]: t3,
+			[require_file_upload_item_module.default.fileItemUploading]: t4,
+			[require_file_upload_item_module.default.fileItemInterrupted]: t5
+		});
+		$[0] = t2;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const fileItemClass = t6;
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			className: require_file_upload_item_module.default.filePreview,
+			icon: "upload_file",
+			size: "tiny"
+		});
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== name) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_file_upload_item_module.default.fileName,
+			title: name,
+			children: name
+		});
+		$[6] = name;
+		$[7] = t8;
+	} else t8 = $[7];
+	const t9 = status === "error" ? 1 : progress;
+	let t10;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Track, {
+			className: require_file_upload_item_module.default.progressTrack,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Range, { className: require_file_upload_item_module.default.progressRange })
+		});
+		$[8] = t10;
+	} else t10 = $[8];
+	let t11;
+	if ($[9] !== t9) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Root, {
+			value: t9,
+			className: require_file_upload_item_module.default.progressBar,
+			children: t10
+		});
+		$[9] = t9;
+		$[10] = t11;
+	} else t11 = $[10];
+	let t12;
+	if ($[11] !== t11 || $[12] !== t8) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_file_upload_item_module.default.fileInfo,
+			children: [t8, t11]
+		});
+		$[11] = t11;
+		$[12] = t8;
+		$[13] = t12;
+	} else t12 = $[13];
+	let t13;
+	if ($[14] !== id || $[15] !== name || $[16] !== onRetry || $[17] !== status) {
+		t13 = (status === "interrupted" || status === "cancelled") && onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: "Retry",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+				type: "button",
+				design: "v1.2",
+				buttonType: "tertiary",
+				"aria-label": `Retry ${name} upload`,
+				onClick: () => onRetry(id),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "refresh",
+					size: "small"
+				})
+			})
+		});
+		$[14] = id;
+		$[15] = name;
+		$[16] = onRetry;
+		$[17] = status;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== id || $[20] !== name || $[21] !== onRemove || $[22] !== status) {
+		t14 = (status === "pending" || status === "error" || status === "interrupted") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: "Remove",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+				type: "button",
+				design: "v1.2",
+				buttonType: "tertiary",
+				"aria-label": `Remove ${name} upload`,
+				onClick: () => onRemove?.(id),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "do_not_disturb_on",
+					size: "small"
+				})
+			})
+		});
+		$[19] = id;
+		$[20] = name;
+		$[21] = onRemove;
+		$[22] = status;
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== id || $[25] !== name || $[26] !== onCancel || $[27] !== status) {
+		t15 = status === "uploading" && onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: "Cancel",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+				type: "button",
+				design: "v1.2",
+				buttonType: "tertiary",
+				"aria-label": `Cancel ${name} upload`,
+				onClick: () => onCancel(id),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "close",
+					size: "small"
+				})
 			})
-		]
-	});
+		});
+		$[24] = id;
+		$[25] = name;
+		$[26] = onCancel;
+		$[27] = status;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== id || $[30] !== name || $[31] !== onDelete || $[32] !== status) {
+		t16 = status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: "Delete",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+				type: "button",
+				design: "v1.2",
+				buttonType: "tertiary",
+				"aria-label": `Delete ${name}`,
+				onClick: () => onDelete?.(id),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "delete",
+					size: "small"
+				})
+			})
+		});
+		$[29] = id;
+		$[30] = name;
+		$[31] = onDelete;
+		$[32] = status;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== fileItemClass || $[35] !== t12 || $[36] !== t13 || $[37] !== t14 || $[38] !== t15 || $[39] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: fileItemClass,
+			children: [
+				t7,
+				t12,
+				t13,
+				t14,
+				t15,
+				t16
+			]
+		});
+		$[34] = fileItemClass;
+		$[35] = t12;
+		$[36] = t13;
+		$[37] = t14;
+		$[38] = t15;
+		$[39] = t16;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] !== status) {
+		t18 = status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_file_upload_item_module.default.completedText,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "check_circle",
+				size: "tiny",
+				filled: true
+			}), "Upload complete"]
+		});
+		$[41] = status;
+		$[42] = t18;
+	} else t18 = $[42];
+	let t19;
+	if ($[43] !== status) {
+		t19 = status === "interrupted" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_file_upload_item_module.default.interruptedText,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "info",
+				size: "tiny",
+				filled: true
+			}), "Upload interrupted"]
+		});
+		$[43] = status;
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== status) {
+		t20 = status === "cancelled" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_file_upload_item_module.default.interruptedText,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "info",
+				size: "tiny",
+				filled: true
+			}), "Upload cancelled"]
+		});
+		$[45] = status;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] !== errors || $[48] !== status) {
+		t21 = status === "error" && errors?.length && errors.map(_temp);
+		$[47] = errors;
+		$[48] = status;
+		$[49] = t21;
+	} else t21 = $[49];
+	let t22;
+	if ($[50] !== hideProgress || $[51] !== progress || $[52] !== status) {
+		t22 = !hideProgress && status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: require_file_upload_item_module.default.progressText,
+			children: [
+				"Uploading...(",
+				Math.round(progress),
+				"%)"
+			]
+		});
+		$[50] = hideProgress;
+		$[51] = progress;
+		$[52] = status;
+		$[53] = t22;
+	} else t22 = $[53];
+	let t23;
+	if ($[54] !== t17 || $[55] !== t18 || $[56] !== t19 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22) {
+		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_file_upload_item_module.default.fileItem,
+			children: [
+				t17,
+				t18,
+				t19,
+				t20,
+				t21,
+				t22
+			]
+		});
+		$[54] = t17;
+		$[55] = t18;
+		$[56] = t19;
+		$[57] = t20;
+		$[58] = t21;
+		$[59] = t22;
+		$[60] = t23;
+	} else t23 = $[60];
+	return t23;
 };
+function _temp(error) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_file_upload_item_module.default.errorMessage,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "cancel",
+			size: "tiny",
+			filled: true
+		}), require_get_error_message.getErrorMessage(error)]
+	}, error);
+}
 
 //#endregion
 exports.FileUploadItem = FileUploadItem;