@j2-health/design-system 0.6.4 → 0.6.6

package/dist/src/components/fileDropzone/FileDropzone.cjs

@@ -0,0 +1,296 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Button = require("../button/Button.cjs");
+const require_Modal = require("../modal/Modal.cjs");
+const require_Spinner = require("../spinner/Spinner.cjs");
+let react = require("react");
+let _phosphor_icons_react = require("@phosphor-icons/react");
+_phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+// src/components/fileDropzone/FileDropzone.tsx
+function ViewIssuesButton({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		type: "link",
+		size: "small",
+		className: "h-auto p-0 text-sm font-medium",
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick?.();
+		},
+		children: "View & Fix Issues"
+	});
+}
+/**
+* A file upload: an optional label, a full-width Download Template bar, and a
+* dashed dropzone that shows the prompt, a spinner while the file is checked,
+* or the uploaded file with a Replace link. Error and warning banners tuck
+* under the dropzone. Click, keyboard or drag and drop all upload; with
+* `replaceConfirm` set, replacing an existing file asks first.
+*
+* Presentational: the caller checks the file and passes the result back as
+* `status` and the counts.
+*/
+function FileDropzone({ status, fileName, label, accept = ".csv", errorRowCount, warningRowCount, missingHeaders, templateUrl, onDownloadTemplate, uploadDisabled = false, onFileSelected, onViewIssues, errorMessage, replaceConfirm, hasExistingUpload = false, successExtra, handleRef, className }) {
+	const fileInputRef = (0, react.useRef)(null);
+	const [isDragOver, setIsDragOver] = (0, react.useState)(false);
+	const [dragError, setDragError] = (0, react.useState)(null);
+	const [confirmOpen, setConfirmOpen] = (0, react.useState)(false);
+	const pendingDropRef = (0, react.useRef)(null);
+	const isUploading = status === "validating";
+	const hasHeaderError = status === "header-error";
+	const hasRowErrors = status === "success-with-errors";
+	const hasRowWarnings = status === "success-with-warnings";
+	const isUploaded = status === "success" || hasRowErrors || hasRowWarnings;
+	const disabled = uploadDisabled || isUploading;
+	const acceptLabel = accept.replace(/^\./, "").toUpperCase();
+	const needsReplaceConfirm = Boolean(replaceConfirm) && (isUploaded || hasExistingUpload);
+	const handleFile = (0, react.useCallback)((file) => {
+		if (!file) return;
+		setDragError(null);
+		onFileSelected(file);
+	}, [onFileSelected]);
+	const handleFileChange = (event) => {
+		handleFile(event.target.files?.[0] ?? null);
+		event.target.value = "";
+	};
+	const openPicker = () => fileInputRef.current?.click();
+	const requestUpload = () => {
+		if (disabled) return;
+		if (needsReplaceConfirm) {
+			pendingDropRef.current = null;
+			setConfirmOpen(true);
+			return;
+		}
+		openPicker();
+	};
+	(0, react.useImperativeHandle)(handleRef, () => ({ requestUpload }));
+	const confirmReplace = () => {
+		setConfirmOpen(false);
+		const droppedFile = pendingDropRef.current;
+		pendingDropRef.current = null;
+		if (droppedFile) handleFile(droppedFile);
+		else openPicker();
+	};
+	const cancelReplace = () => {
+		pendingDropRef.current = null;
+		setConfirmOpen(false);
+	};
+	const handleDragOver = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!disabled) setIsDragOver(true);
+	};
+	const handleDragLeave = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setIsDragOver(false);
+	};
+	const handleDrop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setIsDragOver(false);
+		if (disabled) return;
+		const file = event.dataTransfer.files?.[0] ?? null;
+		if (!file) return;
+		if (!file.name.toLowerCase().endsWith(accept.toLowerCase())) {
+			setDragError(`Only ${acceptLabel} files are supported`);
+			return;
+		}
+		setDragError(null);
+		if (needsReplaceConfirm) {
+			pendingDropRef.current = file;
+			setConfirmOpen(true);
+			return;
+		}
+		handleFile(file);
+	};
+	const templateClass = (0, classnames.default)("mt-2 flex w-full items-center justify-center gap-2 rounded-j2 border-0 bg-j2-gray-3 px-4 py-1.5 text-sm text-j2-primary no-underline transition-colors", uploadDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-j2-gray-4");
+	const templateBar = onDownloadTemplate || !templateUrl || uploadDisabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		disabled: uploadDisabled || !onDownloadTemplate,
+		onClick: onDownloadTemplate,
+		className: templateClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.DownloadSimpleIcon, {
+			size: 16,
+			weight: "regular"
+		}), "Download Template"]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		href: templateUrl,
+		download: true,
+		className: templateClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.DownloadSimpleIcon, {
+			size: 16,
+			weight: "regular"
+		}), "Download Template"]
+	});
+	const renderContent = () => {
+		if (isUploading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-2 py-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: 32 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "m-0 text-sm text-j2-text-secondary",
+				children: "Checking file..."
+			})]
+		});
+		if (fileName && isUploaded) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-4 py-8",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.CheckCircleIcon, {
+					size: 32,
+					weight: "regular",
+					className: "text-j2-green-9"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center gap-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "m-0 text-base font-normal text-j2-text",
+						children: "File Uploaded"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "inline-flex items-center gap-1 rounded-j2-sm border border-solid border-j2-border px-2 py-1 text-xs text-j2-text",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.FileCsvIcon, {
+							size: 14,
+							weight: "regular"
+						}), fileName.replace(new RegExp(`\\${accept}$`, "i"), "")]
+					})]
+				}),
+				successExtra && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex w-full cursor-default justify-center",
+					onClick: (event) => event.stopPropagation(),
+					children: successExtra
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					disabled,
+					onClick: (event) => {
+						event.stopPropagation();
+						requestUpload();
+					},
+					className: (0, classnames.default)("border-none bg-transparent p-0 text-sm font-medium", disabled ? "cursor-not-allowed text-j2-text-tertiary" : "cursor-pointer text-j2-blue-10 hover:underline"),
+					children: "Replace"
+				})
+			]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-4 py-8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.UploadSimpleIcon, {
+				size: 32,
+				weight: "regular",
+				className: "text-j2-blue-9"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "m-0 text-base font-normal text-j2-text",
+					children: ["Upload ", acceptLabel]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "m-0 text-sm text-j2-text-secondary",
+					children: "Structure your file according to the provided template"
+				})]
+			})]
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: "mb-1 block text-sm font-semibold",
+				children: label
+			}),
+			templateBar,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: fileInputRef,
+				type: "file",
+				accept,
+				onChange: handleFileChange,
+				className: "hidden",
+				"data-testid": "file-dropzone-input"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "button",
+				tabIndex: 0,
+				"aria-disabled": disabled,
+				"aria-label": `Upload ${acceptLabel} file`,
+				onClick: disabled ? void 0 : requestUpload,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						if (!disabled) requestUpload();
+					}
+				},
+				onDragOver: handleDragOver,
+				onDragLeave: handleDragLeave,
+				onDrop: handleDrop,
+				className: (0, classnames.default)("mt-2 rounded-j2-lg border-2 border-dashed transition-colors", isDragOver ? "border-j2-blue-7 bg-j2-blue-2" : (0, classnames.default)("border-j2-gray-6 bg-j2-gray-1", !disabled && "hover:border-j2-gray-8"), disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+				children: renderContent()
+			}),
+			hasHeaderError && (missingHeaders?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mx-4 flex items-start justify-between gap-3 rounded-b-xl border-x border-b border-solid border-j2-error bg-j2-red-2 px-3 py-2 text-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "font-medium text-j2-primary",
+					children: [
+						"Missing required",
+						" ",
+						missingHeaders.length === 1 ? "column" : "columns",
+						":",
+						" ",
+						missingHeaders.map((header) => `"${header}"`).join(", ")
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "m-0 text-xs text-j2-text-secondary",
+					children: [
+						"Header names are case-sensitive. Add the missing",
+						" ",
+						missingHeaders.length === 1 ? "column" : "columns",
+						" and re-upload."
+					]
+				})] })
+			}),
+			hasRowErrors && (errorRowCount ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mx-4 flex items-center justify-between rounded-b-xl border-x border-b border-solid border-j2-error bg-j2-red-2 px-3 py-2 text-sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "font-medium text-j2-primary",
+					children: [
+						errorRowCount.toLocaleString(),
+						" ",
+						errorRowCount === 1 ? "row" : "rows",
+						" will not be ingested"
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewIssuesButton, { onClick: onViewIssues })]
+			}),
+			hasRowWarnings && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mx-4 flex items-center justify-between rounded-b-xl border-x border-b border-solid border-j2-warning bg-j2-warning-bg px-3 py-2 text-sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium text-j2-primary",
+					children: (warningRowCount ?? 0) > 0 ? `${warningRowCount.toLocaleString()} ${warningRowCount === 1 ? "row has" : "rows have"} warnings` : "This file has warnings"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewIssuesButton, { onClick: onViewIssues })]
+			}),
+			(dragError || errorMessage) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "m-0 mt-1 text-xs text-j2-error",
+				children: dragError || errorMessage
+			}),
+			replaceConfirm && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Modal.Modal, {
+				open: confirmOpen,
+				width: 460,
+				title: "Replace this file?",
+				onCancel: cancelReplace,
+				footer: null,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-sm text-j2-text",
+					children: replaceConfirm
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-6 flex justify-end gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						onClick: cancelReplace,
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "primary",
+						onClick: confirmReplace,
+						children: "Replace"
+					})]
+				})]
+			})
+		]
+	});
+}
+exports.FileDropzone = FileDropzone;
+
+//# sourceMappingURL=FileDropzone.cjs.map

package/dist/src/components/fileDropzone/FileDropzone.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.cjs","names":["Button","useRef","useState","useCallback","cx","DownloadSimpleIcon","Spinner","CheckCircleIcon","FileCsvIcon","UploadSimpleIcon","Modal"],"sources":["../../../../src/components/fileDropzone/FileDropzone.tsx"],"sourcesContent":["import {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport cx from 'classnames'\nimport {\n  CheckCircleIcon,\n  DownloadSimpleIcon,\n  FileCsvIcon,\n  UploadSimpleIcon,\n} from '@phosphor-icons/react'\n\nimport { Button } from '../button'\nimport { Modal } from '../modal'\nimport { Spinner } from '../spinner'\n\nexport type FileDropzoneStatus =\n  | 'idle'\n  /** The file is being checked; the dropzone shows a spinner. */\n  | 'validating'\n  /** A file-level failure: the dropzone returns to its idle prompt and the\n   *  caller shows the details (usually in a results dialog). */\n  | 'file-error'\n  /** Required columns are missing; `missingHeaders` names them. */\n  | 'header-error'\n  | 'success'\n  /** Uploaded, with rows that will not be ingested (`errorRowCount`). */\n  | 'success-with-errors'\n  /** Uploaded, with rows to review (`warningRowCount`). */\n  | 'success-with-warnings'\n\n/** Lets a caller start an upload from outside the dropzone, such as a results\n *  dialog's Re-upload. It goes through the same replace confirm as a click. */\nexport type FileDropzoneHandle = { requestUpload: () => void }\n\nexport type FileDropzoneProps = {\n  status: FileDropzoneStatus\n  /** Shown in a chip once a file is uploaded. */\n  fileName?: string | null\n  /** Bold label above the Download Template bar. Omit when the caller renders\n   *  its own section header. */\n  label?: ReactNode\n  /** Accepted file extension, for the picker and the drag-and-drop guard. */\n  accept?: string\n  errorRowCount?: number\n  warningRowCount?: number\n  missingHeaders?: string[]\n  /** Static template URL for an `<a download>`. */\n  templateUrl?: string\n  /** Generates the template at runtime; takes precedence over `templateUrl`. */\n  onDownloadTemplate?: () => void\n  /** Greys out the template bar and the dropzone, e.g. until a choice the\n   *  upload depends on has been made. */\n  uploadDisabled?: boolean\n  onFileSelected: (file: File) => void\n  /** Opens the caller's results dialog from an error or warning banner. */\n  onViewIssues?: () => void\n  /** A request that failed before the file was checked, shown under the\n   *  dropzone. */\n  errorMessage?: ReactNode\n  /** Body of a blocking \"Replace this file?\" confirm. When set and a file\n   *  already exists, every attempt to upload (click, Replace, keyboard or a\n   *  drop) asks first. When omitted, uploads proceed with no confirm. */\n  replaceConfirm?: ReactNode\n  /** True when a stored upload would be replaced even though the dropzone\n   *  looks idle. Defaults to the visible uploaded state. */\n  hasExistingUpload?: boolean\n  /** Read-only content in the uploaded state, between the file name and the\n   *  Replace link (a summary of what the file holds). Clicks inside it do not\n   *  start a replace. */\n  successExtra?: ReactNode\n  handleRef?: Ref<FileDropzoneHandle>\n  className?: string\n}\n\nfunction ViewIssuesButton({ onClick }: { onClick?: () => void }) {\n  return (\n    <Button\n      type=\"link\"\n      size=\"small\"\n      className=\"h-auto p-0 text-sm font-medium\"\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.()\n      }}\n    >\n      View &amp; Fix Issues\n    </Button>\n  )\n}\n\n/**\n * A file upload: an optional label, a full-width Download Template bar, and a\n * dashed dropzone that shows the prompt, a spinner while the file is checked,\n * or the uploaded file with a Replace link. Error and warning banners tuck\n * under the dropzone. Click, keyboard or drag and drop all upload; with\n * `replaceConfirm` set, replacing an existing file asks first.\n *\n * Presentational: the caller checks the file and passes the result back as\n * `status` and the counts.\n */\nexport function FileDropzone({\n  status,\n  fileName,\n  label,\n  accept = '.csv',\n  errorRowCount,\n  warningRowCount,\n  missingHeaders,\n  templateUrl,\n  onDownloadTemplate,\n  uploadDisabled = false,\n  onFileSelected,\n  onViewIssues,\n  errorMessage,\n  replaceConfirm,\n  hasExistingUpload = false,\n  successExtra,\n  handleRef,\n  className,\n}: FileDropzoneProps) {\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [dragError, setDragError] = useState<string | null>(null)\n  const [confirmOpen, setConfirmOpen] = useState(false)\n  // A file dropped onto an uploaded dropzone waits here until the confirm\n  // resolves; a picker request leaves it null.\n  const pendingDropRef = useRef<File | null>(null)\n\n  const isUploading = status === 'validating'\n  const hasHeaderError = status === 'header-error'\n  const hasRowErrors = status === 'success-with-errors'\n  const hasRowWarnings = status === 'success-with-warnings'\n  const isUploaded = status === 'success' || hasRowErrors || hasRowWarnings\n\n  const disabled = uploadDisabled || isUploading\n  const acceptLabel = accept.replace(/^\\./, '').toUpperCase()\n  // The first upload overwrites nothing, so only a replace asks first.\n  const needsReplaceConfirm =\n    Boolean(replaceConfirm) && (isUploaded || hasExistingUpload)\n\n  const handleFile = useCallback(\n    (file: File | null) => {\n      if (!file) return\n      setDragError(null)\n      onFileSelected(file)\n    },\n    [onFileSelected]\n  )\n\n  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    handleFile(event.target.files?.[0] ?? null)\n    event.target.value = ''\n  }\n\n  const openPicker = () => fileInputRef.current?.click()\n\n  // Every upload attempt routes through here, so a replace always confirms.\n  const requestUpload = () => {\n    if (disabled) return\n    if (needsReplaceConfirm) {\n      pendingDropRef.current = null\n      setConfirmOpen(true)\n      return\n    }\n    openPicker()\n  }\n\n  useImperativeHandle(handleRef, () => ({ requestUpload }))\n\n  const confirmReplace = () => {\n    setConfirmOpen(false)\n    const droppedFile = pendingDropRef.current\n    pendingDropRef.current = null\n    if (droppedFile) handleFile(droppedFile)\n    else openPicker()\n  }\n\n  const cancelReplace = () => {\n    pendingDropRef.current = null\n    setConfirmOpen(false)\n  }\n\n  // Drag events are always cancelled, even while disabled: otherwise the\n  // browser's own drop opens the file in place of the page.\n  const handleDragOver = (event: React.DragEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n    if (!disabled) setIsDragOver(true)\n  }\n\n  const handleDragLeave = (event: React.DragEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n    setIsDragOver(false)\n  }\n\n  const handleDrop = (event: React.DragEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n    setIsDragOver(false)\n    if (disabled) return\n    const file = event.dataTransfer.files?.[0] ?? null\n    if (!file) return\n    if (!file.name.toLowerCase().endsWith(accept.toLowerCase())) {\n      setDragError(`Only ${acceptLabel} files are supported`)\n      return\n    }\n    setDragError(null)\n    // Dropping onto an existing upload is still a replace: confirm first.\n    if (needsReplaceConfirm) {\n      pendingDropRef.current = file\n      setConfirmOpen(true)\n      return\n    }\n    handleFile(file)\n  }\n\n  const templateClass = cx(\n    'mt-2 flex w-full items-center justify-center gap-2 rounded-j2 border-0 bg-j2-gray-3 px-4 py-1.5 text-sm text-j2-primary no-underline transition-colors',\n    uploadDisabled\n      ? 'cursor-not-allowed opacity-60'\n      : 'cursor-pointer hover:bg-j2-gray-4'\n  )\n\n  // While disabled, the URL form renders as the disabled button too, so the\n  // template can't be downloaded before the upload is available.\n  const templateBar =\n    onDownloadTemplate || !templateUrl || uploadDisabled ? (\n      <button\n        type=\"button\"\n        disabled={uploadDisabled || !onDownloadTemplate}\n        onClick={onDownloadTemplate}\n        className={templateClass}\n      >\n        <DownloadSimpleIcon size={16} weight=\"regular\" />\n        Download Template\n      </button>\n    ) : (\n      <a href={templateUrl} download className={templateClass}>\n        <DownloadSimpleIcon size={16} weight=\"regular\" />\n        Download Template\n      </a>\n    )\n\n  const renderContent = () => {\n    if (isUploading) {\n      return (\n        <div className=\"flex flex-col items-center gap-2 py-4\">\n          <Spinner size={32} />\n          <p className=\"m-0 text-sm text-j2-text-secondary\">Checking file...</p>\n        </div>\n      )\n    }\n\n    if (fileName && isUploaded) {\n      return (\n        <div className=\"flex flex-col items-center gap-4 py-8\">\n          <CheckCircleIcon\n            size={32}\n            weight=\"regular\"\n            className=\"text-j2-green-9\"\n          />\n          <div className=\"flex flex-col items-center gap-1\">\n            <p className=\"m-0 text-base font-normal text-j2-text\">\n              File Uploaded\n            </p>\n            <span className=\"inline-flex items-center gap-1 rounded-j2-sm border border-solid border-j2-border px-2 py-1 text-xs text-j2-text\">\n              <FileCsvIcon size={14} weight=\"regular\" />\n              {fileName.replace(new RegExp(`\\\\${accept}$`, 'i'), '')}\n            </span>\n          </div>\n          {successExtra && (\n            // Read-only content, not part of the click-to-replace target.\n            <div\n              className=\"flex w-full cursor-default justify-center\"\n              onClick={(event) => event.stopPropagation()}\n            >\n              {successExtra}\n            </div>\n          )}\n          <button\n            type=\"button\"\n            disabled={disabled}\n            onClick={(event) => {\n              event.stopPropagation()\n              requestUpload()\n            }}\n            className={cx(\n              'border-none bg-transparent p-0 text-sm font-medium',\n              disabled\n                ? 'cursor-not-allowed text-j2-text-tertiary'\n                : 'cursor-pointer text-j2-blue-10 hover:underline'\n            )}\n          >\n            Replace\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col items-center gap-4 py-8\">\n        <UploadSimpleIcon\n          size={32}\n          weight=\"regular\"\n          className=\"text-j2-blue-9\"\n        />\n        <div className=\"flex flex-col items-center gap-1\">\n          <p className=\"m-0 text-base font-normal text-j2-text\">\n            Upload {acceptLabel}\n          </p>\n          <p className=\"m-0 text-sm text-j2-text-secondary\">\n            Structure your file according to the provided template\n          </p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={className}>\n      {label && (\n        <label className=\"mb-1 block text-sm font-semibold\">{label}</label>\n      )}\n\n      {templateBar}\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={handleFileChange}\n        className=\"hidden\"\n        data-testid=\"file-dropzone-input\"\n      />\n\n      <div\n        role=\"button\"\n        tabIndex={0}\n        aria-disabled={disabled}\n        aria-label={`Upload ${acceptLabel} file`}\n        onClick={disabled ? undefined : requestUpload}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault()\n            if (!disabled) requestUpload()\n          }\n        }}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        className={cx(\n          'mt-2 rounded-j2-lg border-2 border-dashed transition-colors',\n          isDragOver\n            ? 'border-j2-blue-7 bg-j2-blue-2'\n            : cx(\n                'border-j2-gray-6 bg-j2-gray-1',\n                !disabled && 'hover:border-j2-gray-8'\n              ),\n          disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'\n        )}\n      >\n        {renderContent()}\n      </div>\n\n      {hasHeaderError && (missingHeaders?.length ?? 0) > 0 && (\n        <div className=\"mx-4 flex items-start justify-between gap-3 rounded-b-xl border-x border-b border-solid border-j2-error bg-j2-red-2 px-3 py-2 text-sm\">\n          <div>\n            <span className=\"font-medium text-j2-primary\">\n              Missing required{' '}\n              {missingHeaders!.length === 1 ? 'column' : 'columns'}:{' '}\n              {missingHeaders!.map((header) => `\"${header}\"`).join(', ')}\n            </span>\n            <p className=\"m-0 text-xs text-j2-text-secondary\">\n              Header names are case-sensitive. Add the missing{' '}\n              {missingHeaders!.length === 1 ? 'column' : 'columns'} and\n              re-upload.\n            </p>\n          </div>\n        </div>\n      )}\n\n      {hasRowErrors && (errorRowCount ?? 0) > 0 && (\n        <div className=\"mx-4 flex items-center justify-between rounded-b-xl border-x border-b border-solid border-j2-error bg-j2-red-2 px-3 py-2 text-sm\">\n          <span className=\"font-medium text-j2-primary\">\n            {errorRowCount!.toLocaleString()}{' '}\n            {errorRowCount === 1 ? 'row' : 'rows'} will not be ingested\n          </span>\n          <ViewIssuesButton onClick={onViewIssues} />\n        </div>\n      )}\n\n      {hasRowWarnings && (\n        <div className=\"mx-4 flex items-center justify-between rounded-b-xl border-x border-b border-solid border-j2-warning bg-j2-warning-bg px-3 py-2 text-sm\">\n          <span className=\"font-medium text-j2-primary\">\n            {(warningRowCount ?? 0) > 0\n              ? `${warningRowCount!.toLocaleString()} ${\n                  warningRowCount === 1 ? 'row has' : 'rows have'\n                } warnings`\n              : 'This file has warnings'}\n          </span>\n          <ViewIssuesButton onClick={onViewIssues} />\n        </div>\n      )}\n\n      {(dragError || errorMessage) && (\n        <p className=\"m-0 mt-1 text-xs text-j2-error\">\n          {dragError || errorMessage}\n        </p>\n      )}\n\n      {replaceConfirm && (\n        <Modal\n          open={confirmOpen}\n          width={460}\n          title=\"Replace this file?\"\n          onCancel={cancelReplace}\n          footer={null}\n        >\n          <div className=\"text-sm text-j2-text\">{replaceConfirm}</div>\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <Button onClick={cancelReplace}>Cancel</Button>\n            <Button type=\"primary\" onClick={confirmReplace}>\n              Replace\n            </Button>\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/src/components/fileDropzone/FileDropzone.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode, Ref } from 'react';
+export type FileDropzoneStatus = 'idle'
+/** The file is being checked; the dropzone shows a spinner. */
+ | 'validating'
+/** A file-level failure: the dropzone returns to its idle prompt and the
+ *  caller shows the details (usually in a results dialog). */
+ | 'file-error'
+/** Required columns are missing; `missingHeaders` names them. */
+ | 'header-error' | 'success'
+/** Uploaded, with rows that will not be ingested (`errorRowCount`). */
+ | 'success-with-errors'
+/** Uploaded, with rows to review (`warningRowCount`). */
+ | 'success-with-warnings';
+/** Lets a caller start an upload from outside the dropzone, such as a results
+ *  dialog's Re-upload. It goes through the same replace confirm as a click. */
+export type FileDropzoneHandle = {
+    requestUpload: () => void;
+};
+export type FileDropzoneProps = {
+    status: FileDropzoneStatus;
+    /** Shown in a chip once a file is uploaded. */
+    fileName?: string | null;
+    /** Bold label above the Download Template bar. Omit when the caller renders
+     *  its own section header. */
+    label?: ReactNode;
+    /** Accepted file extension, for the picker and the drag-and-drop guard. */
+    accept?: string;
+    errorRowCount?: number;
+    warningRowCount?: number;
+    missingHeaders?: string[];
+    /** Static template URL for an `<a download>`. */
+    templateUrl?: string;
+    /** Generates the template at runtime; takes precedence over `templateUrl`. */
+    onDownloadTemplate?: () => void;
+    /** Greys out the template bar and the dropzone, e.g. until a choice the
+     *  upload depends on has been made. */
+    uploadDisabled?: boolean;
+    onFileSelected: (file: File) => void;
+    /** Opens the caller's results dialog from an error or warning banner. */
+    onViewIssues?: () => void;
+    /** A request that failed before the file was checked, shown under the
+     *  dropzone. */
+    errorMessage?: ReactNode;
+    /** Body of a blocking "Replace this file?" confirm. When set and a file
+     *  already exists, every attempt to upload (click, Replace, keyboard or a
+     *  drop) asks first. When omitted, uploads proceed with no confirm. */
+    replaceConfirm?: ReactNode;
+    /** True when a stored upload would be replaced even though the dropzone
+     *  looks idle. Defaults to the visible uploaded state. */
+    hasExistingUpload?: boolean;
+    /** Read-only content in the uploaded state, between the file name and the
+     *  Replace link (a summary of what the file holds). Clicks inside it do not
+     *  start a replace. */
+    successExtra?: ReactNode;
+    handleRef?: Ref<FileDropzoneHandle>;
+    className?: string;
+};
+/**
+ * A file upload: an optional label, a full-width Download Template bar, and a
+ * dashed dropzone that shows the prompt, a spinner while the file is checked,
+ * or the uploaded file with a Replace link. Error and warning banners tuck
+ * under the dropzone. Click, keyboard or drag and drop all upload; with
+ * `replaceConfirm` set, replacing an existing file asks first.
+ *
+ * Presentational: the caller checks the file and passes the result back as
+ * `status` and the counts.
+ */
+export declare function FileDropzone({ status, fileName, label, accept, errorRowCount, warningRowCount, missingHeaders, templateUrl, onDownloadTemplate, uploadDisabled, onFileSelected, onViewIssues, errorMessage, replaceConfirm, hasExistingUpload, successExtra, handleRef, className, }: FileDropzoneProps): import('react').JSX.Element;