@vuu-ui/vuu-table-extras 3.3.13 → 3.3.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.13",
+  "version": "3.3.14",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -11,19 +11,19 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "3.3.13",
-    "@vuu-ui/vuu-protocol-types": "3.3.13"
+    "@vuu-ui/vuu-filter-types": "3.3.14",
+    "@vuu-ui/vuu-protocol-types": "3.3.14"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "3.3.13",
-    "@vuu-ui/vuu-data-editing": "3.3.13",
-    "@vuu-ui/vuu-data-react": "3.3.13",
-    "@vuu-ui/vuu-data-types": "3.3.13",
-    "@vuu-ui/vuu-table-types": "3.3.13",
-    "@vuu-ui/vuu-popups": "3.3.13",
-    "@vuu-ui/vuu-table": "3.3.13",
-    "@vuu-ui/vuu-utils": "3.3.13",
-    "@vuu-ui/vuu-ui-controls": "3.3.13",
+    "@vuu-ui/vuu-codemirror": "3.3.14",
+    "@vuu-ui/vuu-data-editing": "3.3.14",
+    "@vuu-ui/vuu-data-react": "3.3.14",
+    "@vuu-ui/vuu-data-types": "3.3.14",
+    "@vuu-ui/vuu-table-types": "3.3.14",
+    "@vuu-ui/vuu-popups": "3.3.14",
+    "@vuu-ui/vuu-table": "3.3.14",
+    "@vuu-ui/vuu-utils": "3.3.14",
+    "@vuu-ui/vuu-ui-controls": "3.3.14",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",

package/src/column-picker/ColumnModel.js

@@ -15,6 +15,7 @@ const isColumnAdded = (change)=>change?.type === SelectedColumnChangeType.Column
 const isColumnRemoved = (change)=>change?.type === SelectedColumnChangeType.ColumnRemoved;
 const isColumnUpdated = (change)=>change?.type === SelectedColumnChangeType.ColumnUpdated;
 const isColumnsReordered = (change)=>change?.type === SelectedColumnChangeType.ColumnsReordered;
+const columnDescriptorComparator = (col1, col2)=>col1.name === col2.name;
 class ColumnModel extends EventEmitter {
     allColumns;
     #selectedColumns;
@@ -36,10 +37,10 @@ class ColumnModel extends EventEmitter {
     }
     addRemoveOrReorderSelectedColumns(newSelectedColumns, source) {
         if (!itemsOrOrderChanged(this.#selectedColumns, newSelectedColumns)) throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns no change detected between current and new selected columns");
-        const addedColumns = getAddedItems(this.#selectedColumns, newSelectedColumns);
+        const addedColumns = getAddedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
         if (addedColumns.length > 0) if (1 == addedColumns.length) return void this.addItemToSelectedColumns(addedColumns[0].name, source);
         else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to add multiple selected columns in a single call");
-        const removedColumns = getRemovedItems(this.#selectedColumns, newSelectedColumns);
+        const removedColumns = getRemovedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
         if (removedColumns.length > 0) if (1 == removedColumns.length) return void this.removeItemFromSelectedColumns(removedColumns[0].name, source);
         else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to remove multiple selected columns in a single call");
         this.reorderSelectedColumns(newSelectedColumns.map(({ name })=>name), source);

package/src/csv-upload/CsvUpload.css.js

@@ -14,6 +14,40 @@ const css = `
   display: grid;
 }
 
+.vuuCsvUpload-errorContainer {
+  margin-top: var(--salt-spacing-100);
+  width: 100%;
+  max-width: 480px;
+  max-height: 120px;
+  padding: var(--salt-spacing-100) var(--salt-spacing-200);
+  background-color: rgba(var(--salt-palette-interact-error-background), .05);
+  border-radius: var(--salt-size-borderRadius);
+  text-align: left;
+  overflow-y: auto;
+}
+
+.vuuCsvUpload-errorList {
+  padding-left: var(--salt-spacing-200);
+  margin: 0;
+  list-style-type: disc;
+}
+
+.vuuCsvUpload-errorItem {
+  font-size: var(--salt-text-fontSize-small);
+  color: var(--salt-status-error-foreground);
+  line-height: var(--salt-text-lineHeight-small);
+  word-break: break-word;
+  margin-bottom: var(--salt-spacing-50);
+}
+
+.vuuCsvUpload-importErrorItem {
+  text-align: center;
+}
+
+.vuuCsvUpload-rectifyPrompt {
+  margin-top: var(--salt-spacing-100);
+}
+
 .vuuCsvUpload-errors {
   border: solid 1px var(--salt-status-error-borderColor);
   border-radius: var(--salt-size-borderRadius);

package/src/csv-upload/CsvUpload.js

@@ -2,12 +2,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Dialog, DialogActions, DialogContent, DialogHeader, FileDropZone, FileDropZoneIcon, FileDropZoneTrigger, Text } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useCsvUpload } from "./useCsvUpload.js";
 import CsvUpload from "./CsvUpload.css";
 const classBase = "vuuCsvUpload";
 const CsvUpload_CsvUpload = (props)=>{
-    const { children, dialogTitle = "Import CSV", embedded = false, onCancel, onClose, open, renderError } = props;
+    const { children, dialogTitle = "Import CSV", embedded = false, onCancel, onClose, open } = props;
     const isControlledOpen = void 0 !== open;
     const [internalOpen, setInternalOpen] = useState(open ?? true);
     const dialogOpen = isControlledOpen ? open : internalOpen;
@@ -18,7 +18,23 @@ const CsvUpload_CsvUpload = (props)=>{
         window: targetWindow
     });
     const { canImport, cancelImport, isProcessingFile, isImporting, importData, onDrop, onTriggerChange, schema, validation, error } = useCsvUpload(props);
-    const fileErrors = validation?.errors.filter((e)=>e.column in validation.errorMap.fileErrors) ?? [];
+    const errorsToRender = useMemo(()=>{
+        if (validation?.errors && validation.errors.length > 0) return validation.errors;
+        const parseErrors = error?.errors.schemaError?.parseError?.errors || error?.errors.validationError?.parseError?.errors;
+        if (parseErrors && parseErrors.length > 0) return parseErrors;
+        return [];
+    }, [
+        validation,
+        error
+    ]);
+    const parsedSchemaErrors = useMemo(()=>{
+        const schemaErrorMsg = error?.errors.schemaError?.message || error?.errors.validationError?.message;
+        if (!schemaErrorMsg) return [];
+        const cleanedMsg = schemaErrorMsg.replace(/^CSV validation failed:\s*/, "");
+        return cleanedMsg.split(";").map((item)=>item.trim()).filter((item)=>item.length > 0);
+    }, [
+        error
+    ]);
     const hasErrors = !!error || validation && validation.errors.length > 0;
     const isUploaded = canImport || isImporting;
     const status = hasErrors ? "error" : isUploaded ? "success" : void 0;
@@ -37,73 +53,101 @@ const CsvUpload_CsvUpload = (props)=>{
         importData,
         onClose
     ]);
-    const content = /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        children: [
-            /*#__PURE__*/ jsx(FileDropZone, {
-                className: `${classBase}-dropZone`,
-                disabled: void 0 === schema || isProcessingFile || isImporting,
-                onDrop: onDrop,
-                status: status,
-                children: isUploaded ? /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ jsx(FileDropZoneIcon, {
-                            status: "success"
-                        }),
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Upload completed"
-                        })
-                    ]
-                }) : /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ jsx(FileDropZoneIcon, {
-                            status: hasErrors ? "error" : void 0
-                        }),
-                        validation && validation.errors.length > 0 ? /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    children: "Your file contains errors"
-                                }),
-                                fileErrors.length > 0 && /*#__PURE__*/ jsx("ul", {
-                                    className: `${classBase}-errorList`,
-                                    children: fileErrors.map((error, i)=>/*#__PURE__*/ jsx("li", {
-                                            className: `${classBase}-errorItem`,
-                                            children: error.message
-                                        }, `${error.column}-${error.message}-${i}`))
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    children: "Please rectify and reupload"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ jsx("div", {
-                            children: "Drop a file here or"
-                        }),
-                        /*#__PURE__*/ jsx(FileDropZoneTrigger, {
-                            accept: ".csv,text/csv",
-                            onChange: onTriggerChange,
-                            children: "BROWSE FILES"
-                        }),
-                        /*#__PURE__*/ jsx(Text, {
-                            children: "Only .csv files"
-                        }),
-                        children
-                    ]
+    const renderErrorsContent = useMemo(()=>{
+        if (error?.errors.importError) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("strong", {
+                    children: "Import failed"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-errorContainer`,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-errorItem ${classBase}-importErrorItem`,
+                        children: error.errors.importError.message
+                    })
                 })
-            }),
-            error && (renderError ? renderError(error) : /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-errors`,
+            ]
+        });
+        if (hasErrors) {
+            const headingText = error ? "Validation failed" : "Your file contains errors";
+            return /*#__PURE__*/ jsxs(Fragment, {
                 children: [
+                    /*#__PURE__*/ jsx("strong", {
+                        children: headingText
+                    }),
                     /*#__PURE__*/ jsx("div", {
-                        children: /*#__PURE__*/ jsx("strong", {
-                            children: "Import Error:"
+                        className: `${classBase}-errorContainer`,
+                        children: errorsToRender.length > 0 ? /*#__PURE__*/ jsx("ul", {
+                            className: `${classBase}-errorList`,
+                            children: errorsToRender.map((error, i)=>/*#__PURE__*/ jsxs("li", {
+                                    className: `${classBase}-errorItem`,
+                                    children: [
+                                        error.rowNum > 0 ? `Row ${error.rowNum}: ` : "",
+                                        "*" === error.column ? "" : `${error.column}: `,
+                                        error.message
+                                    ]
+                                }, `${error.column}-${error.message}-${i}`))
+                        }) : parsedSchemaErrors.length > 0 ? /*#__PURE__*/ jsx("ul", {
+                            className: `${classBase}-errorList`,
+                            children: parsedSchemaErrors.map((errMsg)=>/*#__PURE__*/ jsx("li", {
+                                    className: `${classBase}-errorItem`,
+                                    children: errMsg
+                                }, errMsg))
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-errorItem ${classBase}-importErrorItem`,
+                            children: error?.errors.schemaError?.message || error?.errors.validationError?.message || "An unexpected error occurred during import"
                         })
+                    })
+                ]
+            });
+        }
+        return /*#__PURE__*/ jsx("div", {
+            children: "Drop a file here or"
+        });
+    }, [
+        error,
+        hasErrors,
+        errorsToRender,
+        parsedSchemaErrors
+    ]);
+    const content = /*#__PURE__*/ jsx("div", {
+        className: classBase,
+        children: /*#__PURE__*/ jsx(FileDropZone, {
+            className: `${classBase}-dropZone`,
+            disabled: void 0 === schema || isProcessingFile || isImporting,
+            onDrop: onDrop,
+            status: status,
+            children: isUploaded ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(FileDropZoneIcon, {
+                        status: "success"
                     }),
-                    /*#__PURE__*/ jsx("div", {
-                        children: error.errors.importError?.message || error.errors.schemaError?.message || error.errors.validationError?.message || "An unexpected error occurred during import."
+                    /*#__PURE__*/ jsx("strong", {
+                        children: "Upload completed"
                     })
                 ]
-            }))
-        ]
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(FileDropZoneIcon, {
+                        status: hasErrors ? "error" : void 0
+                    }),
+                    renderErrorsContent,
+                    hasErrors && /*#__PURE__*/ jsx(Text, {
+                        className: `${classBase}-rectifyPrompt`,
+                        children: "Please rectify and reupload"
+                    }),
+                    /*#__PURE__*/ jsx(FileDropZoneTrigger, {
+                        accept: ".csv,text/csv",
+                        onChange: onTriggerChange,
+                        children: "BROWSE FILES"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        children: "Only .csv files"
+                    }),
+                    children
+                ]
+            })
+        })
     });
     const actions = /*#__PURE__*/ jsxs(DialogActions, {
         children: [

package/src/csv-upload/parse/csv-parse.js

@@ -68,7 +68,7 @@ const parseCsv = (csvText, options)=>{
     }
     const rows = records.slice(1);
     rows.forEach((row, rowIndex)=>{
-        if (row.length !== header.length) addCsvRowError(errorState, rowIndex + CSV_FIRST_DATA_ROW_NUMBER, "*", CsvParseErrorEnum.ROW_COLUMN_COUNT_MISMATCH, "CSV rows must have the same number of columns as the header.", row.join(","));
+        if (row.length !== header.length) addCsvRowError(errorState, rowIndex + CSV_FIRST_DATA_ROW_NUMBER, "*", CsvParseErrorEnum.ROW_COLUMN_COUNT_MISMATCH, "This row has too many or too few columns compared to the header line. Check for extra or missing commas.", row.join(","));
     });
     if (hasCsvErrors(errorState.errorMap)) return withError("CSV rows must have the same number of columns as the header.", errorState.errorMap, errorState.errors, header, rows);
     return {

package/src/csv-upload/parse/csv-schema-validation.js

@@ -4,6 +4,40 @@ import { CSV_FIRST_DATA_ROW_NUMBER, MAX_ROWS_IN_CSV } from "./csv-constants.js";
 const INTERNAL_KEY_COLUMNS = new Set([
     "vuuRowNum"
 ]);
+const getFriendlyTypeName = (type)=>{
+    switch(type){
+        case "int":
+        case "long":
+            return "whole number";
+        case "double":
+        case "number":
+        case "decimal":
+        case "scaleddecimal":
+        case "scaleddecimal2":
+        case "scaleddecimal4":
+        case "scaleddecimal6":
+        case "scaleddecimal8":
+            return "decimal or number";
+        case "time":
+            return "time in 'HH:MM:SS' format";
+        case "epochtimestamp":
+        case "epochtimestampnano":
+        case "date/time":
+            return "date/time";
+        case "char":
+            return "single character";
+        case "boolean":
+            return "boolean (true/false)";
+        case "json":
+            return "JSON value";
+        default:
+            return type;
+    }
+};
+const getFriendlyErrorMessage = (errMessage, rawValue, toType)=>{
+    if (errMessage.includes("is not a valid")) return `'${rawValue}' is not a valid ${getFriendlyTypeName(toType)}`;
+    return errMessage;
+};
 const validateCsvAgainstSchema = (parsed, tableSchema, options)=>{
     const schemaColumns = new Map(tableSchema.columns.map((col)=>[
             col.name,
@@ -21,22 +55,22 @@ const validateCsvAgainstSchema = (parsed, tableSchema, options)=>{
         const rowNum = rowIndex + CSV_FIRST_DATA_ROW_NUMBER;
         const typedRow = {};
         const rawRow = parsed.header.reduce((acc, headerCol, idx)=>{
-            acc[headerCol] = rowValues[idx];
+            acc[headerCol] = rowValues[idx] ?? "";
             return acc;
         }, {});
         parsed.header.forEach((columnName, columnIndex)=>{
-            const rawValue = rowValues[columnIndex];
+            const rawValue = rowValues[columnIndex] ?? "";
             const schemaType = schemaColumns.get(columnName);
-            if (0 === rawValue.length && "string" !== schemaType) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.EMPTY_NON_STRING_VALUE, "Empty value is not allowed for non-string columns.", rawValue);
+            if (0 === rawValue.length && "string" !== schemaType) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.EMPTY_NON_STRING_VALUE, "This field is required and cannot be left blank", rawValue);
             let value;
             const toType = schemaType ?? "string";
             try {
                 value = getTypedValue(rawValue, toType);
             } catch (err) {
-                addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, err instanceof Error ? err.message : String(err), rawValue);
+                addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, getFriendlyErrorMessage(err instanceof Error ? err.message : String(err), rawValue, toType), rawValue);
                 return;
             }
-            if (void 0 === value) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, `Value '${rawValue}' is not a valid ${toType}`, rawValue);
+            if (void 0 === value) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, `'${rawValue}' is not a valid ${getFriendlyTypeName(toType)}`, rawValue);
             const customValidator = options?.validators?.[columnName];
             if (customValidator) {
                 const validationResult = customValidator(rawValue, columnName, rawRow);

package/src/csv-upload/useCsvUpload.js

@@ -120,7 +120,7 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
         try {
             await editSession.end(save);
         } finally{
-            if ("unsubscribed" !== sessionDataSource.status) sessionDataSource.unsubscribe();
+            if ("unsubscribed" !== sessionDataSource.status && "function" == typeof sessionDataSource.unsubscribe) sessionDataSource.unsubscribe();
             setActiveSessionDataSource(void 0);
         }
         onImportSessionEnded?.({
@@ -140,7 +140,7 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
             if (rowNum < CSV_FIRST_DATA_ROW_NUMBER) continue;
             const existing = vuuMsgByRow.get(rowNum);
             const columnError = `${column}: ${message}`;
-            vuuMsgByRow.set(rowNum, existing ? `${existing}; ${columnError}` : `${0 === rowNum ? "Header" : `Row ${rowNum}`}: ${columnError}`);
+            vuuMsgByRow.set(rowNum, existing ? `${existing}; ${columnError}` : columnError);
         }
         const parsedRowCount = mergedValidation.rows.length;
         const unparsedErrorRows = [
@@ -243,13 +243,10 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
         });
         if (Object.keys(schemaValidation.errorMap.fileErrors).length > 0) {
             setValidation(schemaValidation);
+            const detailedMessage = `CSV validation failed: ${schemaValidation.errors.map((e)=>"*" === e.column ? e.message : `${e.column}: ${e.message}`).join("; ")}`;
             handleError({
                 errors: {
-                    schemaError: createUploadError("schema", "CSV validation failed.", parsedCsv.error, {
-                        errorMap: schemaValidation.errorMap,
-                        errors: schemaValidation.errors,
-                        message: "CSV validation failed."
-                    })
+                    schemaError: createUploadError("schema", detailedMessage, parsedCsv.error, schemaValidation)
                 }
             });
             return;
@@ -333,10 +330,11 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
     }, [
         handleFiles
     ]);
-    const canImport = useMemo(()=>void 0 !== validation && 0 === validation.errors.length && validation.rows.length > 0 && !isProcessingFile && !isImporting, [
+    const canImport = useMemo(()=>void 0 !== validation && 0 === validation.errors.length && validation.rows.length > 0 && !isProcessingFile && !isImporting && void 0 === error, [
         isImporting,
         isProcessingFile,
-        validation
+        validation,
+        error
     ]);
     const importData = useCallback(async ()=>{
         if (!canImport || void 0 === validation) return false;

package/types/csv-upload/CsvUpload.d.ts

@@ -61,9 +61,5 @@ export interface CsvUploadProps {
     importMode?: "direct" | "preview";
     rowDefaults?: RowDefaultDataItemValues;
     validators?: Record<string, CsvColumnValidator>;
-    /**
-     * Custom renderer for the error panel.
-     */
-    renderError?: (error: CsvUploadErrorResult) => ReactNode;
 }
 export declare const CsvUpload: (props: CsvUploadProps) => import("react/jsx-runtime").JSX.Element;