@vuu-ui/vuu-table-extras 2.2.1 → 3.0.0-beta.1

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/DataUploadPreview.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { DataEditingProvider, EditButtons, UNDO_CELL_RENDERER, EDIT_ACTION_ROW_CLASS_NAME_GENERATOR } from '@vuu-ui/vuu-data-editing';
+import { Table } from '@vuu-ui/vuu-table';
+import cx from 'clsx';
+import { useMemo, useCallback } from 'react';
+import { TableFooter, TableFooterTray } from '../../table-footer/TableFooter.js';
+import css from './DataUploadPreview.css.js';
+import { getSessionDataSource, useDataUploadPreview } from './useDataUploadPreview.js';
+
+const classBase = "vuuDataUploadPreview";
+const undoColumn = {
+  name: "undo",
+  source: "client",
+  width: 80,
+  type: {
+    name: "string",
+    renderer: {
+      name: UNDO_CELL_RENDERER
+    }
+  }
+};
+const rowClassNameGenerators = [EDIT_ACTION_ROW_CLASS_NAME_GENERATOR];
+const DataUploadPreview = ({
+  className,
+  editSession,
+  onClose,
+  saveLabel = "Submit",
+  tableSchema,
+  ...htmlAttributes
+}) => {
+  const dataSource = useMemo(
+    () => getSessionDataSource(editSession),
+    [editSession]
+  );
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-data-upload-preview",
+    css,
+    window: targetWindow
+  });
+  const {
+    canCancel,
+    canSave,
+    hasSelection,
+    onCancel,
+    onDelete,
+    onSave,
+    sessionError
+  } = useDataUploadPreview({ dataSource, editSession, onClose });
+  const isRowSelectable = useCallback(
+    (dataRow) => dataRow.vuu_action !== "deleteRow",
+    []
+  );
+  const config = useMemo(() => {
+    const columns = tableSchema.columns.map(
+      (column) => column.name === "vuuMsg" ? {
+        ...column,
+        editable: false,
+        hidden: false,
+        label: "Error",
+        width: 300
+      } : {
+        ...column,
+        editable: true
+      }
+    );
+    if (!columns.some(({ name }) => name === "vuuMsg")) {
+      columns.push({
+        editable: false,
+        label: "Error",
+        name: "vuuMsg",
+        serverDataType: "string",
+        width: 300
+      });
+    }
+    return {
+      columns: columns.concat({ hidden: true, name: "vuu_action" }, undoColumn),
+      columnDefaultWidth: 150,
+      rowClassNameGenerators,
+      rowSeparators: true,
+      zebraStripes: true
+    };
+  }, [tableSchema.columns]);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    sessionError ? /* @__PURE__ */ jsx("div", { role: "alert", children: sessionError }) : null,
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: /* @__PURE__ */ jsx(DataEditingProvider, { editSession, children: /* @__PURE__ */ jsx(
+      Table,
+      {
+        config,
+        "data-viewport": dataSource.viewport,
+        dataSource,
+        isRowSelectable,
+        renderBufferSize: 10,
+        selectionModel: "checkbox"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableFooterTray, { position: "center", children: /* @__PURE__ */ jsx(
+      EditButtons,
+      {
+        canCancel,
+        canSave,
+        editSession,
+        hasSelection,
+        onCancel,
+        onDelete,
+        onSave,
+        saveLabel
+      }
+    ) }) })
+  ] });
+};
+
+export { DataUploadPreview };
+//# sourceMappingURL=DataUploadPreview.js.map

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/DataUploadPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataUploadPreview.js","sources":["../../../../../../../../packages/vuu-table-extras/src/csv-upload/data-upload-preview/DataUploadPreview.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n  DataEditingProvider,\n  EDIT_ACTION_ROW_CLASS_NAME_GENERATOR,\n  EditButtons,\n  type EditSession,\n  UNDO_CELL_RENDERER,\n} from \"@vuu-ui/vuu-data-editing\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport type {\n  ColumnDescriptor,\n  DataRow,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { TableFooter, TableFooterTray } from \"../../table-footer/TableFooter\";\nimport css from \"./DataUploadPreview.css\";\nimport {\n  getSessionDataSource,\n  useDataUploadPreview,\n} from \"./useDataUploadPreview\";\n\nconst classBase = \"vuuDataUploadPreview\";\n\nconst undoColumn: ColumnDescriptor = {\n  name: \"undo\",\n  source: \"client\",\n  width: 80,\n  type: {\n    name: \"string\",\n    renderer: {\n      name: UNDO_CELL_RENDERER,\n    },\n  },\n};\n\nconst rowClassNameGenerators = [EDIT_ACTION_ROW_CLASS_NAME_GENERATOR];\n\nexport interface DataUploadPreviewProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  editSession: EditSession;\n  onClose: () => void;\n  saveLabel?: string;\n  tableSchema: TableSchema;\n}\n\nexport const DataUploadPreview = ({\n  className,\n  editSession,\n  onClose,\n  saveLabel = \"Submit\",\n  tableSchema,\n  ...htmlAttributes\n}: DataUploadPreviewProps) => {\n  const dataSource = useMemo(\n    () => getSessionDataSource(editSession),\n    [editSession],\n  );\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-data-upload-preview\",\n    css,\n    window: targetWindow,\n  });\n\n  const {\n    canCancel,\n    canSave,\n    hasSelection,\n    onCancel,\n    onDelete,\n    onSave,\n    sessionError,\n  } = useDataUploadPreview({ dataSource, editSession, onClose });\n\n  const isRowSelectable = useCallback(\n    (dataRow: DataRow) => dataRow.vuu_action !== \"deleteRow\",\n    [],\n  );\n  const config = useMemo<TableConfig>(() => {\n    const columns = tableSchema.columns.map<ColumnDescriptor>((column) =>\n      column.name === \"vuuMsg\"\n        ? {\n            ...column,\n            editable: false,\n            hidden: false,\n            label: \"Error\",\n            width: 300,\n          }\n        : {\n            ...column,\n            editable: true,\n          },\n    );\n    if (!columns.some(({ name }) => name === \"vuuMsg\")) {\n      columns.push({\n        editable: false,\n        label: \"Error\",\n        name: \"vuuMsg\",\n        serverDataType: \"string\",\n        width: 300,\n      });\n    }\n\n    return {\n      columns: columns.concat({ hidden: true, name: \"vuu_action\" }, undoColumn),\n      columnDefaultWidth: 150,\n      rowClassNameGenerators,\n      rowSeparators: true,\n      zebraStripes: true,\n    };\n  }, [tableSchema.columns]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {sessionError ? <div role=\"alert\">{sessionError}</div> : null}\n      <div className={`${classBase}-content`}>\n        <DataEditingProvider editSession={editSession}>\n          <Table\n            config={config}\n            data-viewport={dataSource.viewport}\n            dataSource={dataSource}\n            isRowSelectable={isRowSelectable}\n            renderBufferSize={10}\n            selectionModel=\"checkbox\"\n          />\n        </DataEditingProvider>\n      </div>\n      <TableFooter>\n        <TableFooterTray position=\"center\">\n          <EditButtons\n            canCancel={canCancel}\n            canSave={canSave}\n            editSession={editSession}\n            hasSelection={hasSelection}\n            onCancel={onCancel}\n            onDelete={onDelete}\n            onSave={onSave}\n            saveLabel={saveLabel}\n          />\n        </TableFooterTray>\n      </TableFooter>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/useDataUploadPreview.js

@@ -0,0 +1,73 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const getSessionDataSource = (editSession) => {
+  const dataSource = editSession.sessionDataSource;
+  if (!dataSource) {
+    throw new Error("[DataUploadPreview] requires an active edit session");
+  }
+  return dataSource;
+};
+const useDataUploadPreview = ({
+  dataSource,
+  editSession,
+  onClose
+}) => {
+  const [editState, setEditState] = useState(editSession.editState);
+  const [lifecycle, setLifecycle] = useState(
+    editSession.lifecycle
+  );
+  const [selectionCount, setSelectionCount] = useState(0);
+  const [sessionError, setSessionError] = useState();
+  const endSession = useCallback(
+    async (save, force = false) => {
+      try {
+        await editSession.end(save, force);
+        onClose();
+      } catch (error) {
+        setSessionError(
+          error instanceof Error ? error.message : "Unable to end edit session"
+        );
+      }
+    },
+    [editSession, onClose]
+  );
+  const onCancel = useCallback(() => endSession(false), [endSession]);
+  const onDelete = useCallback(
+    () => editSession.deleteSelectedRows(),
+    [editSession]
+  );
+  const onSave = useCallback(
+    (force = false) => endSession(true, force),
+    [endSession]
+  );
+  useEffect(() => {
+    const handleEditState = (nextEditState) => {
+      setEditState(nextEditState);
+    };
+    const handleLifecycle = (nextLifecycle) => {
+      setLifecycle(nextLifecycle);
+    };
+    editSession.on("editState", handleEditState);
+    editSession.on("lifecycle", handleLifecycle);
+    dataSource.on("row-selection", setSelectionCount);
+    return () => {
+      editSession.removeListener("editState", handleEditState);
+      editSession.removeListener("lifecycle", handleLifecycle);
+      dataSource.removeListener("row-selection", setSelectionCount);
+    };
+  }, [dataSource, editSession]);
+  const canCancel = lifecycle.status === "active" || lifecycle.status === "error" && lifecycle.operation === "end";
+  const canSave = canCancel && (editState === "dirty" || editState === "stale") && editSession.invalidCount === 0;
+  return {
+    canCancel,
+    canSave,
+    hasSelection: selectionCount > 0,
+    onCancel,
+    onDelete,
+    onSave,
+    sessionError
+  };
+};
+
+export { getSessionDataSource, useDataUploadPreview };
+//# sourceMappingURL=useDataUploadPreview.js.map

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/useDataUploadPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataUploadPreview.js","sources":["../../../../../../../../packages/vuu-table-extras/src/csv-upload/data-upload-preview/useDataUploadPreview.ts"],"sourcesContent":["import type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  EditLifecycle,\n  EditSession,\n  EditState,\n} from \"@vuu-ui/vuu-data-editing\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nexport interface UseDataUploadPreviewProps {\n  dataSource: DataSource;\n  editSession: EditSession;\n  onClose: () => void;\n}\n\nexport const getSessionDataSource = (editSession: EditSession): DataSource => {\n  const dataSource = editSession.sessionDataSource;\n  if (!dataSource) {\n    throw new Error(\"[DataUploadPreview] requires an active edit session\");\n  }\n  return dataSource;\n};\n\nexport const useDataUploadPreview = ({\n  dataSource,\n  editSession,\n  onClose,\n}: UseDataUploadPreviewProps) => {\n  const [editState, setEditState] = useState<EditState>(editSession.editState);\n  const [lifecycle, setLifecycle] = useState<EditLifecycle>(\n    editSession.lifecycle,\n  );\n  const [selectionCount, setSelectionCount] = useState(0);\n  const [sessionError, setSessionError] = useState<string>();\n\n  const endSession = useCallback(\n    async (save: boolean, force = false) => {\n      try {\n        await editSession.end(save, force);\n        onClose();\n      } catch (error) {\n        setSessionError(\n          error instanceof Error ? error.message : \"Unable to end edit session\",\n        );\n      }\n    },\n    [editSession, onClose],\n  );\n\n  const onCancel = useCallback(() => endSession(false), [endSession]);\n  const onDelete = useCallback(\n    () => editSession.deleteSelectedRows(),\n    [editSession],\n  );\n  const onSave = useCallback(\n    (force = false) => endSession(true, force),\n    [endSession],\n  );\n\n  useEffect(() => {\n    const handleEditState = (nextEditState: EditState) => {\n      setEditState(nextEditState);\n    };\n    const handleLifecycle = (nextLifecycle: EditLifecycle) => {\n      setLifecycle(nextLifecycle);\n    };\n    editSession.on(\"editState\", handleEditState);\n    editSession.on(\"lifecycle\", handleLifecycle);\n    dataSource.on(\"row-selection\", setSelectionCount);\n    return () => {\n      editSession.removeListener(\"editState\", handleEditState);\n      editSession.removeListener(\"lifecycle\", handleLifecycle);\n      dataSource.removeListener(\"row-selection\", setSelectionCount);\n    };\n  }, [dataSource, editSession]);\n\n  const canCancel =\n    lifecycle.status === \"active\" ||\n    (lifecycle.status === \"error\" && lifecycle.operation === \"end\");\n  const canSave =\n    canCancel &&\n    (editState === \"dirty\" || editState === \"stale\") &&\n    editSession.invalidCount === 0;\n\n  return {\n    canCancel,\n    canSave,\n    hasSelection: selectionCount > 0,\n    onCancel,\n    onDelete,\n    onSave,\n    sessionError,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/csv-upload/parse/csv-upload-utils.js

@@ -1,4 +1,4 @@
-import { isRpcError } from '@vuu-ui/vuu-utils';
+import '@vuu-ui/vuu-utils';
 import { CSV_FIRST_DATA_ROW_NUMBER } from './csv-constants.js';
 
 const isRecord = (value) => typeof value === "object" && value !== null;
@@ -30,47 +30,6 @@ const toValidationErrorsFromParseRowErrors = (parseError) => {
     (error) => error.rowNum >= CSV_FIRST_DATA_ROW_NUMBER
   );
 };
-const normalizeTableData = (value, fallback) => {
-  const tableData = isRecord(value) && "data" in value ? value.data : value;
-  if (!isRecord(tableData)) {
-    return fallback;
-  }
-  const columns = tableData.columns;
-  const rows = tableData.rows;
-  if (!Array.isArray(columns) || columns.some((column) => typeof column !== "string") || !Array.isArray(rows)) {
-    return fallback;
-  }
-  return {
-    columns,
-    rows: rows.map((row) => {
-      if (Array.isArray(row)) {
-        return row;
-      }
-      if (!isRecord(row)) {
-        return columns.map(() => "");
-      }
-      return columns.map((column) => row[column] ?? "");
-    })
-  };
-};
-const executeBatchRpcCalls = async (items, executor, errorFormatter) => {
-  const errors = [];
-  const results = [];
-  for (const item of items) {
-    try {
-      const result = await executor(item);
-      const rpcResult = result;
-      if (isRpcError(rpcResult)) {
-        errors.push(errorFormatter(item, rpcResult.errorMessage));
-      } else {
-        results.push(result);
-      }
-    } catch (err) {
-      errors.push(errorFormatter(item, toErrorMessage(err)));
-    }
-  }
-  return { errors, results };
-};
 
-export { buildRowErrorMessage, createUploadError, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors };
+export { buildRowErrorMessage, createUploadError, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, toErrorMessage, toValidationErrorsFromParseRowErrors };
 //# sourceMappingURL=csv-upload-utils.js.map

package/esm/packages/vuu-table-extras/src/csv-upload/parse/csv-upload-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"csv-upload-utils.js","sources":["../../../../../../../../packages/vuu-table-extras/src/csv-upload/parse/csv-upload-utils.ts"],"sourcesContent":["import type { RpcResult, VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isRpcError } from \"@vuu-ui/vuu-utils\";\nimport type { CsvUploadError } from \"../CsvUpload\";\nimport type { CsvParseError } from \"./csv-parse\";\nimport { CSV_FIRST_DATA_ROW_NUMBER } from \"./csv-constants\";\nimport type {\n  CsvValidationError,\n  CsvValidationResult,\n} from \"./csv-schema-validation\";\n\nexport type CsvUploadTableData = {\n  columns: string[];\n  rows: VuuRowDataItemType[][];\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null;\n\nexport const toErrorMessage = (error: unknown) =>\n  error instanceof Error ? error.message : String(error);\n\nexport const isCsvParseError = (value: unknown): value is CsvParseError =>\n  isRecord(value) &&\n  \"message\" in value &&\n  typeof value.message === \"string\" &&\n  \"errors\" in value &&\n  Array.isArray(value.errors) &&\n  \"errorMap\" in value &&\n  isRecord(value.errorMap);\n\nexport const hasFileParseErrors = (parseError: CsvParseError) =>\n  Object.keys(parseError.errorMap.fileErrors).length > 0;\n\nexport const createUploadError = (\n  source: CsvUploadError[\"source\"],\n  message: string,\n  parseError?: CsvParseError,\n  validationError?: CsvUploadError[\"validationError\"],\n): CsvUploadError => ({\n  message,\n  parseError,\n  validationError,\n  source,\n});\n\nexport const mergeValidationWithParseErrors = (\n  schemaValidation: CsvValidationResult,\n  parseError: CsvParseError | undefined,\n): CsvValidationResult =>\n  parseError\n    ? {\n        ...schemaValidation,\n        errors: [\n          ...schemaValidation.errors,\n          ...toValidationErrorsFromParseRowErrors(parseError),\n        ],\n        parseRowError: parseError,\n      }\n    : schemaValidation;\n\nexport const buildRowErrorMessage = (prefix: string, rowErrors: string[]) => {\n  const details = rowErrors.slice(0, 8).join(\"; \");\n  const remaining = rowErrors.length - 8;\n  const suffix = remaining > 0 ? `; and ${remaining} more` : \"\";\n  return `${prefix} for ${rowErrors.length} row(s): ${details}${suffix}`;\n};\n\nexport const toValidationErrorsFromParseRowErrors = (\n  parseError: CsvParseError,\n): CsvValidationError[] => {\n  return parseError.errors.filter(\n    (error) => error.rowNum >= CSV_FIRST_DATA_ROW_NUMBER,\n  );\n};\n\nexport const normalizeTableData = (\n  value: unknown,\n  fallback: CsvUploadTableData,\n): CsvUploadTableData => {\n  const tableData =\n    isRecord(value) && \"data\" in value ? (value.data as unknown) : value;\n\n  if (!isRecord(tableData)) {\n    return fallback;\n  }\n\n  const columns = tableData.columns;\n  const rows = tableData.rows;\n\n  if (\n    !Array.isArray(columns) ||\n    columns.some((column) => typeof column !== \"string\") ||\n    !Array.isArray(rows)\n  ) {\n    return fallback;\n  }\n\n  return {\n    columns,\n    rows: rows.map((row) => {\n      if (Array.isArray(row)) {\n        return row as VuuRowDataItemType[];\n      }\n      if (!isRecord(row)) {\n        return columns.map(() => \"\");\n      }\n      return columns.map((column) => (row[column] as VuuRowDataItemType) ?? \"\");\n    }),\n  };\n};\n\nexport type RpcBatchResult = {\n  errors: string[];\n  results: unknown[];\n};\n\nexport const executeBatchRpcCalls = async <T>(\n  items: T[],\n  executor: (item: T) => Promise<unknown>,\n  errorFormatter: (item: T, error: string) => string,\n): Promise<RpcBatchResult> => {\n  const errors: string[] = [];\n  const results: unknown[] = [];\n\n  for (const item of items) {\n    try {\n      const result = await executor(item);\n      const rpcResult = result as RpcResult | undefined;\n      if (isRpcError(rpcResult)) {\n        errors.push(errorFormatter(item, rpcResult.errorMessage));\n      } else {\n        results.push(result);\n      }\n    } catch (err) {\n      errors.push(errorFormatter(item, toErrorMessage(err)));\n    }\n  }\n\n  return { errors, results };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"csv-upload-utils.js","sources":["../../../../../../../../packages/vuu-table-extras/src/csv-upload/parse/csv-upload-utils.ts"],"sourcesContent":["import type { RpcResult, VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isRpcError } from \"@vuu-ui/vuu-utils\";\nimport type { CsvUploadError } from \"../CsvUpload\";\nimport type { CsvParseError } from \"./csv-parse\";\nimport { CSV_FIRST_DATA_ROW_NUMBER } from \"./csv-constants\";\nimport type {\n  CsvValidationError,\n  CsvValidationResult,\n} from \"./csv-schema-validation\";\n\nexport type CsvUploadTableData = {\n  columns: string[];\n  rows: VuuRowDataItemType[][];\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null;\n\nexport const toErrorMessage = (error: unknown) =>\n  error instanceof Error ? error.message : String(error);\n\nexport const isCsvParseError = (value: unknown): value is CsvParseError =>\n  isRecord(value) &&\n  \"message\" in value &&\n  typeof value.message === \"string\" &&\n  \"errors\" in value &&\n  Array.isArray(value.errors) &&\n  \"errorMap\" in value &&\n  isRecord(value.errorMap);\n\nexport const hasFileParseErrors = (parseError: CsvParseError) =>\n  Object.keys(parseError.errorMap.fileErrors).length > 0;\n\nexport const createUploadError = (\n  source: CsvUploadError[\"source\"],\n  message: string,\n  parseError?: CsvParseError,\n  validationError?: CsvUploadError[\"validationError\"],\n): CsvUploadError => ({\n  message,\n  parseError,\n  validationError,\n  source,\n});\n\nexport const mergeValidationWithParseErrors = (\n  schemaValidation: CsvValidationResult,\n  parseError: CsvParseError | undefined,\n): CsvValidationResult =>\n  parseError\n    ? {\n        ...schemaValidation,\n        errors: [\n          ...schemaValidation.errors,\n          ...toValidationErrorsFromParseRowErrors(parseError),\n        ],\n        parseRowError: parseError,\n      }\n    : schemaValidation;\n\nexport const buildRowErrorMessage = (prefix: string, rowErrors: string[]) => {\n  const details = rowErrors.slice(0, 8).join(\"; \");\n  const remaining = rowErrors.length - 8;\n  const suffix = remaining > 0 ? `; and ${remaining} more` : \"\";\n  return `${prefix} for ${rowErrors.length} row(s): ${details}${suffix}`;\n};\n\nexport const toValidationErrorsFromParseRowErrors = (\n  parseError: CsvParseError,\n): CsvValidationError[] => {\n  return parseError.errors.filter(\n    (error) => error.rowNum >= CSV_FIRST_DATA_ROW_NUMBER,\n  );\n};\n\nexport const normalizeTableData = (\n  value: unknown,\n  fallback: CsvUploadTableData,\n): CsvUploadTableData => {\n  const tableData =\n    isRecord(value) && \"data\" in value ? (value.data as unknown) : value;\n\n  if (!isRecord(tableData)) {\n    return fallback;\n  }\n\n  const columns = tableData.columns;\n  const rows = tableData.rows;\n\n  if (\n    !Array.isArray(columns) ||\n    columns.some((column) => typeof column !== \"string\") ||\n    !Array.isArray(rows)\n  ) {\n    return fallback;\n  }\n\n  return {\n    columns,\n    rows: rows.map((row) => {\n      if (Array.isArray(row)) {\n        return row as VuuRowDataItemType[];\n      }\n      if (!isRecord(row)) {\n        return columns.map(() => \"\");\n      }\n      return columns.map((column) => (row[column] as VuuRowDataItemType) ?? \"\");\n    }),\n  };\n};\n\nexport type RpcBatchResult = {\n  errors: string[];\n  results: unknown[];\n};\n\nexport const executeBatchRpcCalls = async <T>(\n  items: T[],\n  executor: (item: T) => Promise<unknown>,\n  errorFormatter: (item: T, error: string) => string,\n): Promise<RpcBatchResult> => {\n  const errors: string[] = [];\n  const results: unknown[] = [];\n\n  for (const item of items) {\n    try {\n      const result = await executor(item);\n      const rpcResult = result as RpcResult | undefined;\n      if (isRpcError(rpcResult)) {\n        errors.push(errorFormatter(item, rpcResult.errorMessage));\n      } else {\n        results.push(result);\n      }\n    } catch (err) {\n      errors.push(errorFormatter(item, toErrorMessage(err)));\n    }\n  }\n\n  return { errors, results };\n};\n"],"names":[],"mappings":";;;AAeA,MAAM,WAAW,CAAC,KAAA,KAChB,OAAO,KAAA,KAAU,YAAY,KAAU,KAAA,IAAA;AAE5B,MAAA,cAAA,GAAiB,CAAC,KAC7B,KAAA,KAAA,YAAiB,QAAQ,KAAM,CAAA,OAAA,GAAU,OAAO,KAAK;AAE1C,MAAA,eAAA,GAAkB,CAAC,KAC9B,KAAA,QAAA,CAAS,KAAK,CACd,IAAA,SAAA,IAAa,KACb,IAAA,OAAO,KAAM,CAAA,OAAA,KAAY,YACzB,QAAY,IAAA,KAAA,IACZ,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,MAAM,KAC1B,UAAc,IAAA,KAAA,IACd,QAAS,CAAA,KAAA,CAAM,QAAQ;AAEZ,MAAA,kBAAA,GAAqB,CAAC,UACjC,KAAA,MAAA,CAAO,KAAK,UAAW,CAAA,QAAA,CAAS,UAAU,CAAA,CAAE,MAAS,GAAA;AAEhD,MAAM,iBAAoB,GAAA,CAC/B,MACA,EAAA,OAAA,EACA,YACA,eACoB,MAAA;AAAA,EACpB,OAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,8BAAiC,GAAA,CAC5C,gBACA,EAAA,UAAA,KAEA,UACI,GAAA;AAAA,EACE,GAAG,gBAAA;AAAA,EACH,MAAQ,EAAA;AAAA,IACN,GAAG,gBAAiB,CAAA,MAAA;AAAA,IACpB,GAAG,qCAAqC,UAAU;AAAA,GACpD;AAAA,EACA,aAAe,EAAA;AACjB,CACA,GAAA;AAEO,MAAA,oBAAA,GAAuB,CAAC,MAAA,EAAgB,SAAwB,KAAA;AAC3E,EAAA,MAAM,UAAU,SAAU,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA,CAAE,KAAK,IAAI,CAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,UAAU,MAAS,GAAA,CAAA;AACrC,EAAA,MAAM,MAAS,GAAA,SAAA,GAAY,CAAI,GAAA,CAAA,MAAA,EAAS,SAAS,CAAU,KAAA,CAAA,GAAA,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAQ,KAAA,EAAA,SAAA,CAAU,MAAM,CAAY,SAAA,EAAA,OAAO,GAAG,MAAM,CAAA,CAAA;AACtE;AAEa,MAAA,oCAAA,GAAuC,CAClD,UACyB,KAAA;AACzB,EAAA,OAAO,WAAW,MAAO,CAAA,MAAA;AAAA,IACvB,CAAC,KAAU,KAAA,KAAA,CAAM,MAAU,IAAA;AAAA,GAC7B;AACF;;;;"}

package/esm/packages/vuu-table-extras/src/csv-upload/useCsvUpload.js

@@ -1,16 +1,19 @@
-import { isSessionTable, isRpcSuccess } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { EditSession } from '@vuu-ui/vuu-data-editing';
+import { isSessionTable, isRpcError } from '@vuu-ui/vuu-utils';
+import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { parseCsv } from './parse/csv-parse.js';
 import { validateCsvAgainstSchema } from './parse/csv-schema-validation.js';
-import { executeBatchRpcCalls, buildRowErrorMessage, hasFileParseErrors, createUploadError, mergeValidationWithParseErrors, toErrorMessage, isCsvParseError, normalizeTableData } from './parse/csv-upload-utils.js';
+import { toErrorMessage, buildRowErrorMessage, hasFileParseErrors, createUploadError, mergeValidationWithParseErrors, isCsvParseError } from './parse/csv-upload-utils.js';
 import { CSV_FIRST_DATA_ROW_NUMBER } from './parse/csv-constants.js';
 
 const useCsvUpload = ({
   dataSource,
+  importMode = "direct",
   onImportSessionEnded,
   onImportSessionStarted,
   onError,
   onImported,
+  onPreview,
   onProcessingStarted,
   maxRows,
   parseOptions
@@ -19,37 +22,70 @@ const useCsvUpload = ({
   const [sessionTable, setSessionTable] = useState();
   const [isProcessingFile, setIsProcessingFile] = useState(false);
   const [isImporting, setIsImporting] = useState(false);
-  const sessionTableRef = useRef(void 0);
-  const setActiveSessionTable = useCallback(
-    (table2) => {
-      sessionTableRef.current = table2;
-      setSessionTable(table2);
+  const editSession = useMemo(() => new EditSession(dataSource), [dataSource]);
+  const ownsEditSessionRef = useRef(true);
+  const operationIdRef = useRef(0);
+  const processingPromiseRef = useRef(void 0);
+  const sessionDataSourceRef = useRef(void 0);
+  useEffect(
+    () => () => {
+      operationIdRef.current++;
+      const processingPromise = processingPromiseRef.current;
+      void (async () => {
+        try {
+          await processingPromise;
+        } finally {
+          if (ownsEditSessionRef.current) {
+            try {
+              await editSession.end(false);
+            } catch (error) {
+              console.error(
+                "[useCsvUpload] failed to discard edit session during cleanup",
+                error
+              );
+            }
+          }
+        }
+      })();
+    },
+    [editSession]
+  );
+  const setActiveSessionDataSource = useCallback(
+    (sessionDataSource) => {
+      sessionDataSourceRef.current = sessionDataSource;
+      const table2 = sessionDataSource?.table;
+      setSessionTable(
+        table2 && isSessionTable(table2) ? table2 : void 0
+      );
     },
     []
   );
   const endEditSessionAndNotify = useCallback(
     async (save, reason) => {
-      if (!dataSource.endEditSession) {
-        throw Error("CsvUpload requires datasource endEditSession support.");
+      const sessionDataSource = sessionDataSourceRef.current;
+      if (!sessionDataSource) {
+        throw Error("CsvUpload has no active edit session.");
+      }
+      if (!sessionDataSource.endEditSession) {
+        throw Error(
+          "CsvUpload requires the session datasource to support endEditSession."
+        );
       }
-      const currentSessionTable = sessionTableRef.current;
-      const result = await dataSource.endEditSession(save);
-      setActiveSessionTable(void 0);
+      const currentSessionTable = sessionDataSource.table;
+      await editSession.end(save);
+      setActiveSessionDataSource(void 0);
       onImportSessionEnded?.({
         reason,
-        sessionTable: currentSessionTable
+        sessionTable: currentSessionTable && isSessionTable(currentSessionTable) ? currentSessionTable : void 0
       });
-      return result;
+      return void 0;
     },
-    [dataSource, onImportSessionEnded, setActiveSessionTable]
+    [editSession, onImportSessionEnded, setActiveSessionDataSource]
   );
   const table = dataSource.table;
   const schema = dataSource.tableSchema;
   const addAllRows = useCallback(
-    async (mergedValidation) => {
-      if (table === void 0) {
-        throw Error("CsvUpload requires dataSource.table to be defined.");
-      }
+    async (mergedValidation, operationId) => {
       const vuuMsgByRow = /* @__PURE__ */ new Map();
       for (const { rowNum, column, message } of mergedValidation.errors) {
         if (rowNum < CSV_FIRST_DATA_ROW_NUMBER) continue;
@@ -61,7 +97,9 @@ const useCsvUpload = ({
         );
       }
       const parsedRowCount = mergedValidation.rows.length;
-      const unparsedErrorRows = [...vuuMsgByRow.keys()].filter((rowNum) => rowNum - CSV_FIRST_DATA_ROW_NUMBER >= parsedRowCount).map((rowNum) => ({
+      const unparsedErrorRows = [...vuuMsgByRow.keys()].filter(
+        (rowNum) => rowNum - CSV_FIRST_DATA_ROW_NUMBER >= parsedRowCount
+      ).map((rowNum) => ({
         rowNum,
         rowData: {},
         vuuMsg: vuuMsgByRow.get(rowNum) ?? ""
@@ -74,70 +112,82 @@ const useCsvUpload = ({
         })),
         ...unparsedErrorRows
       ];
-      const { errors: rpcErrors } = await executeBatchRpcCalls(
-        allRows,
-        async ({ rowNum, rowData, vuuMsg }) => {
+      const rpcErrors = [];
+      for (const { rowNum, rowData, vuuMsg } of allRows) {
+        if (operationId !== operationIdRef.current) {
+          return false;
+        }
+        try {
           const payload = { ...rowData, rowNum, vuuMsg };
-          const result = await dataSource.rpcRequest?.({
-            type: "RPC_REQUEST",
-            rpcName: "addRow",
-            params: {
-              key: String(rowNum),
-              data: payload
-            }
-          });
-          if (!isRpcSuccess(result)) {
-            const msg = result && "errorMessage" in result ? String(result.errorMessage) : "addRow RPC failed";
-            throw Error(msg);
+          const result = await editSession.addRow(payload);
+          if (isRpcError(result)) {
+            throw Error(result.errorMessage);
           }
-          return result;
-        },
-        ({ rowNum }, error) => `Row ${rowNum}: ${error}`
-      );
+          if (typeof result === "string") {
+            throw Error(result);
+          }
+        } catch (error) {
+          rpcErrors.push(`Row ${rowNum}: ${toErrorMessage(error)}`);
+        }
+      }
       if (rpcErrors.length > 0) {
-        const errorMessage = buildRowErrorMessage("Import failed", rpcErrors);
-        const errors = {
-          importError: createUploadError("import", errorMessage)
-        };
-        onError?.({ errors });
+        throw Error(buildRowErrorMessage("Import failed", rpcErrors));
       }
+      return true;
     },
-    [dataSource, onError, table]
+    [editSession]
   );
   const beginEditSession = useCallback(async () => {
-    if (!dataSource.createSessionDataSource) {
-      throw Error("CsvUpload requires datasource createSessionDataSource support.");
-    }
-    const sessionDataSource = await dataSource.createSessionDataSource("Empty");
+    const sessionDataSource = await editSession.begin("Empty");
     const sessionVuuTable = sessionDataSource?.table;
-    if (sessionVuuTable && isSessionTable(sessionVuuTable)) {
-      setActiveSessionTable(sessionVuuTable);
-      if (sessionDataSource) {
-        onImportSessionStarted?.(sessionDataSource);
-      }
+    if (sessionDataSource === void 0 || sessionVuuTable === void 0 || !isSessionTable(sessionVuuTable)) {
+      throw Error(
+        "CsvUpload createSessionDataSource returned no session datasource."
+      );
+    }
+    if (!sessionDataSource.columns.includes("vuuMsg")) {
+      sessionDataSource.columns = sessionDataSource.columns.concat("vuuMsg");
     }
-  }, [dataSource, onImportSessionStarted, setActiveSessionTable]);
+    setActiveSessionDataSource(sessionDataSource);
+    onImportSessionStarted?.(sessionDataSource);
+    return sessionDataSource;
+  }, [editSession, onImportSessionStarted, setActiveSessionDataSource]);
   const closePendingEditSession = useCallback(
     async (save) => {
-      if (sessionTableRef.current === void 0) {
+      if (sessionDataSourceRef.current === void 0) {
         return;
       }
       await endEditSessionAndNotify(save, save ? "saved" : "discarded");
     },
     [endEditSessionAndNotify]
   );
+  const cancelImport = useCallback(async () => {
+    operationIdRef.current++;
+    try {
+      await processingPromiseRef.current;
+    } catch {
+    }
+    await closePendingEditSession(false);
+  }, [closePendingEditSession]);
   const processFile = useCallback(
-    async (file) => {
+    async (file, operationId) => {
       setValidation(void 0);
       onError?.(void 0);
       await closePendingEditSession(false);
+      if (operationId !== operationIdRef.current) {
+        return;
+      }
       if (schema === void 0) {
         throw Error("Table schema is not yet available.");
       }
       if (table === void 0) {
         throw Error("CsvUpload requires dataSource.table to be defined.");
       }
-      const parsedCsv = parseCsv(await file.text(), parseOptions);
+      const fileContents = await file.text();
+      if (operationId !== operationIdRef.current) {
+        return;
+      }
+      const parsedCsv = parseCsv(fileContents, parseOptions);
       if (parsedCsv.error && hasFileParseErrors(parsedCsv.error)) {
         setValidation(void 0);
         onError?.({
@@ -179,8 +229,14 @@ const useCsvUpload = ({
       setValidation(mergedValidation);
       if (mergedValidation.rows.length > 0) {
         await beginEditSession();
+        if (operationId !== operationIdRef.current) {
+          return;
+        }
         try {
-          await addAllRows(mergedValidation);
+          const rowsAdded = await addAllRows(mergedValidation, operationId);
+          if (!rowsAdded) {
+            return;
+          }
         } catch (error) {
           await endEditSessionAndNotify(false, "failed");
           setValidation(void 0);
@@ -215,11 +271,14 @@ const useCsvUpload = ({
       }
       setIsProcessingFile(true);
       onProcessingStarted?.();
+      const operationId = ++operationIdRef.current;
+      const processingPromise = processFile(file, operationId);
+      processingPromiseRef.current = processingPromise;
       try {
-        await processFile(file);
+        await processingPromise;
       } catch (err) {
         setValidation(void 0);
-        setActiveSessionTable(void 0);
+        setActiveSessionDataSource(void 0);
         const parseError = isCsvParseError(err) ? err : void 0;
         const errorMessage = parseError ? `Validation failed: ${parseError.message}` : `Validation failed: ${toErrorMessage(err)}`;
         const errors = {
@@ -233,10 +292,13 @@ const useCsvUpload = ({
         };
         onError?.(errors);
       } finally {
+        if (processingPromiseRef.current === processingPromise) {
+          processingPromiseRef.current = void 0;
+        }
         setIsProcessingFile(false);
       }
     },
-    [onError, onProcessingStarted, processFile, setActiveSessionTable]
+    [onError, onProcessingStarted, processFile, setActiveSessionDataSource]
   );
   const onDrop = useCallback(
     (_event, files) => {
@@ -256,22 +318,37 @@ const useCsvUpload = ({
   );
   const importData = useCallback(async () => {
     if (!canImport || validation === void 0) {
-      return;
+      return false;
     }
     setIsImporting(true);
     onError?.(void 0);
     try {
-      const rpcResult = await endEditSessionAndNotify(true, "saved");
       const fallbackTableData = {
         columns: validation.columns,
         rows: validation.rows.map(
           (row) => validation.columns.map((column) => row[column] ?? "")
         )
       };
-      onImported?.({
-        rpcResult,
-        tableData: normalizeTableData(rpcResult, fallbackTableData)
-      });
+      const tableData = fallbackTableData;
+      if (importMode === "preview") {
+        const sessionDataSource = sessionDataSourceRef.current;
+        if (!sessionDataSource) {
+          throw Error("CsvUpload has no session datasource to preview.");
+        }
+        if (!onPreview) {
+          throw Error("CsvUpload preview mode requires an onPreview callback.");
+        }
+        onPreview({
+          dataSource: sessionDataSource,
+          editSession,
+          tableData
+        });
+        ownsEditSessionRef.current = false;
+      } else {
+        await endEditSessionAndNotify(true, "saved");
+        onImported?.({ tableData });
+      }
+      return true;
     } catch (err) {
       const errorMessage = `RPC import failed: ${String(err)}`;
       const errors = {
@@ -280,12 +357,23 @@ const useCsvUpload = ({
         }
       };
       onError?.(errors);
+      return false;
     } finally {
       setIsImporting(false);
     }
-  }, [canImport, endEditSessionAndNotify, onError, onImported, validation]);
+  }, [
+    canImport,
+    editSession,
+    endEditSessionAndNotify,
+    onError,
+    onImported,
+    onPreview,
+    importMode,
+    validation
+  ]);
   return {
     canImport,
+    cancelImport,
     importData,
     isImporting,
     isProcessingFile,