@vuu-ui/vuu-table-extras 4.0.0-alpha.1 → 4.0.0-alpha.3

package/package.json

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

package/src/calculated-column/CalculatedColumnPanel.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dropdown, FormField, FormFieldLabel, Input, Option } from "@salt-ds/core";
-import { useCalculatedColumnPanel } from "./useCalculatedColumnPanel.js";
-import { useCallback, useRef } from "react";
 import { getCalculatedColumnDetails } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
 import { ColumnExpressionInput, useColumnExpressionSuggestionProvider } from "../column-expression-input/index.js";
+import { useCalculatedColumnPanel } from "./useCalculatedColumnPanel.js";
 const classBase = "vuuCalculatedColumnPanel";
 const CalculatedColumnPanel = ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable })=>{
     const typeRef = useRef(null);

package/src/column-picker/ColumnModel.js

@@ -1,4 +1,4 @@
-import { EventEmitter, reorderItems } from "@vuu-ui/vuu-utils";
+import { EventEmitter, getAddedItems, getRemovedItems, itemsOrOrderChanged, reorderItems } from "@vuu-ui/vuu-utils";
 const ColumnChangeSource = {
     ColumnPicker: "column-picker",
     ColumnSettings: "column-settings",
@@ -15,37 +15,15 @@ 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 byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 })=>l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
-const filterColumns = (columns, pattern)=>{
-    if (!pattern) return columns;
-    {
-        const lowerCasePattern = pattern.toLowerCase();
-        return columns.filter(({ name, label = name })=>-1 !== label.toLowerCase().indexOf(lowerCasePattern));
-    }
-};
 class ColumnModel extends EventEmitter {
     allColumns;
-    #searchPattern = "";
     #selectedColumns;
     constructor(allColumns, selectedColumns){
         super(), this.allColumns = allColumns;
         this.#selectedColumns = selectedColumns;
     }
-    get availableColumns() {
-        return filterColumns(this.allColumns, this.#searchPattern).filter(({ name })=>-1 === this.#selectedColumns.findIndex((c)=>c.name === name)).toSorted(byColumnName);
-    }
-    set searchPattern(pattern) {
-        const searchPattern = pattern;
-        if (searchPattern !== this.#searchPattern) {
-            this.#searchPattern = searchPattern;
-            this.emit("render", {});
-        }
-    }
-    get searchPattern() {
-        return this.#searchPattern ?? "";
-    }
     get selectedColumns() {
-        return filterColumns(this.#selectedColumns, this.#searchPattern);
+        return this.#selectedColumns;
     }
     setSelectedColumns(selectedColumns, source, changeDescriptor) {
         this.#selectedColumns = selectedColumns;
@@ -56,6 +34,16 @@ class ColumnModel extends EventEmitter {
         if (col) return col;
         throw Error(`[ColumnModel] columns does not contain column ${name}`);
     }
+    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);
+        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);
+        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);
+    }
     addItemToSelectedColumns(name, source) {
         const column = this.allColumns.find((col)=>col.name === name);
         if (column) {
@@ -97,7 +85,7 @@ class ColumnModel extends EventEmitter {
     }
     addColumn(column, addToSelectedColumns = false) {
         console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);
-        if (addToSelectedColumns) console.log("add it to selected coliumns");
+        if (addToSelectedColumns) console.log("add it to selected columns");
         this.allColumns = this.allColumns.concat(column);
         this.#selectedColumns = this.#selectedColumns.concat(column);
         this.notifyListeners(this.#selectedColumns, "column-picker", {

package/src/column-picker/ColumnPicker.css.js

@@ -1,94 +1,8 @@
 const css = `
 .vuuColumnPicker {
-  --label-margin-left: 0px;
-  --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));
-  background: var(--columnpicker-background);
-  gap: var(--salt-spacing-300);
-  height: var(--vuuColumnPicker-height, 100%);
-  padding: var(--salt-spacing-300) 0;
-  flex-direction: column;
-  display: flex;
-  overflow: hidden;
-  container-type: inline-size;
-
   &.vuuColumnPicker-withCalculated {
     --label-margin-left: 8px;
   }
-
-  & .saltListBox {
-    background-color: inherit;
-  }
-
-  & .saltOption {
-    background-color: inherit;
-    border-bottom: var(--vuuColumnListItem-border, solid) 1px
-        var(--salt-separable-tertiary-borderColor);
-    align-items: center;
-    gap: var(--salt-spacing-200);
-    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
-
-    & .vuuIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-    }
-
-    & .vuuCalculatedColumnIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-      position: absolute;
-      top: 8px;
-      left: 32px;
-    }
-
-    & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
-      text-decoration: underline;
-    }
-
-    & .vuuColumnPicker-text {
-      margin-left: var(--label-margin-left);
-    }
-  }
-
-  & .vuuColumnPickerListItem-action {
-    visibility: hidden;
-    margin-left: auto;
-  }
-
-  & .saltOption:hover {
-    & .vuuColumnPickerListItem-action {
-      visibility: visible;
-    }
-  }
-
-  & .vuuColumnPicker-search {
-    --saltInput-paddingLeft: var(--salt-spacing-300);
-    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);
-  }
-
-  & .vuuColumnPicker-scrollContainer {
-    flex: 1 1 0;
-    overflow: auto;
-
-    & .vuuColumnPicker-sectionHeader {
-      background: var(--columnpicker-background);
-      height: 32px;
-      padding: 0 var(--salt-spacing-300);
-      z-index: 1;
-      align-items: center;
-      display: flex;
-      position: sticky;
-      top: 0;
-    }
-
-    & .vuuColumnPicker-availableHeader {
-      top: 32px;
-    }
-
-    & .vuuColumnPicker-availableList {
-      & .saltOption {
-        padding-left: var(--salt-spacing-300);
-      }
-    }
-  }
 }
 
 

package/src/column-picker/ColumnPicker.js

@@ -1,204 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { DragDropProvider, getColumnLabel, isCalculatedColumn, useSortable } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
-import { forwardRef, useCallback, useMemo, useRef } from "react";
-import { Button, Input, ListBox, Option } from "@salt-ds/core";
-import { applyHighlighting } from "@vuu-ui/vuu-table";
-import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
-import { ColumnChangeSource } from "./ColumnModel.js";
+import { forwardRef } from "react";
 import { useColumnPicker } from "./useColumnPicker.js";
+import { ItemPicker } from "@vuu-ui/vuu-ui-controls";
 import ColumnPicker_0 from "./ColumnPicker.css";
 const classBase = "vuuColumnPicker";
 const classBaseListItem = "vuuColumnPickerListItem";
-const searchIcon = /*#__PURE__*/ jsx("span", {
-    "data-icon": "search"
-});
 const NO_SELECTION = [];
-const useSorting = (id, index)=>{
-    const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
-        id,
-        index
-    });
-    const [handleRef, ref] = useMemo(()=>[
-            sortableHandleRef,
-            sortableRef
-        ], [
-        sortableHandleRef,
-        sortableRef
-    ]);
-    return {
-        handleRef,
-        ref
-    };
-};
-const SelectedColumnListItem = ({ className: classNameProp, index, column, onRemove, searchPattern = "", ...optionProps })=>{
-    const { handleRef, ref } = useSorting(column.name, index);
-    const value = getColumnLabel(column);
-    const valueWithHighlighting = applyHighlighting(value, searchPattern);
-    const handleRemoveButtonClick = useCallback((e)=>{
-        e.stopPropagation();
-        onRemove?.(e);
-    }, [
-        onRemove
-    ]);
-    return /*#__PURE__*/ jsxs(Option, {
-        ...optionProps,
-        className: clsx(classNameProp, classBaseListItem),
-        "data-name": column.name,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx(IconButton, {
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "draggable",
-                ref: handleRef,
-                size: 16
-            }),
-            isCalculatedColumn(column.name) ? /*#__PURE__*/ jsx(Icon, {
-                className: "vuuCalculatedColumnIcon",
-                name: "function"
-            }) : null,
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: valueWithHighlighting
-            }),
-            /*#__PURE__*/ jsx(IconButton, {
-                className: `${classBaseListItem}-action`,
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "cross",
-                onClick: handleRemoveButtonClick,
-                size: 16
-            })
-        ]
-    });
-};
-const AvailableColumnListItem = ({ className: classNameProp, index, column: item, onAdd, searchPattern = "", ...optionProps })=>{
-    const value = getColumnLabel(item);
-    const valueWithHighlighting = applyHighlighting(value, searchPattern);
-    return /*#__PURE__*/ jsxs(Option, {
-        ...optionProps,
-        className: clsx(classNameProp, classBaseListItem),
-        "data-name": item.name,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: valueWithHighlighting
-            }),
-            /*#__PURE__*/ jsx(IconButton, {
-                className: `${classBaseListItem}-action`,
-                "data-embedded": true,
-                appearance: "transparent",
-                icon: "plus",
-                onClick: onAdd,
-                size: 16
-            })
-        ]
-    });
-};
-const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ allowCreateCalculatedColumn, columnModel, className, onClickCreateCalculatedColumn, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
+const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ columnModel, className, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-column-picker",
         css: ColumnPicker_0,
         window: targetWindow
     });
-    const searchCallbackRef = useCallback((el)=>{
-        setTimeout(()=>{
-            el?.querySelector("input")?.focus();
-        }, 100);
-    }, []);
-    const { availableColumns, onAddItemToSelectedList, onChangeSearchInput, onRemoveItemFromSelectedList, searchText, selectedColumns } = useColumnPicker({
+    const { allItems, selectedItems, oneOrMoreColumnsIsCalculated, handleSelectedItemsChange } = useColumnPicker({
         columnModel: columnModel
     });
-    const listRef = useRef(null);
-    const getOptionName = (option)=>{
-        if (option) {
-            const { name } = option.dataset;
-            if (name) return name;
-        }
-        throw Error("[ColumnPicker] list option has no data-name");
-    };
-    const handleDragEnd = useCallback(()=>{
-        setTimeout(()=>{
-            const listItems = listRef.current?.querySelectorAll(".saltOption");
-            if (listItems) {
-                const orderedColumnNames = Array.from(listItems).map(getOptionName);
-                columnModel.reorderSelectedColumns(orderedColumnNames, ColumnChangeSource.ColumnPicker);
-            }
-        }, 300);
-    }, [
-        columnModel
-    ]);
-    const oneOrMoreColumnsIsCalculated = selectedColumns.some((column)=>isCalculatedColumn(column.name));
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx(ItemPicker, {
         ...htmlAttributes,
         className: clsx(classBase, className, {
             [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated
         }),
+        allItems: allItems,
+        selectedItems: selectedItems,
+        itemTypeName: "column",
+        onSelectedItemsChange: handleSelectedItemsChange,
+        onSelectionChange: onSelectionChange,
         ref: forwardedRef,
-        children: [
-            /*#__PURE__*/ jsx("form", {
-                className: `${classBase}-search`,
-                role: "search",
-                children: /*#__PURE__*/ jsx(Input, {
-                    startAdornment: searchIcon,
-                    placeholder: "Find column",
-                    ref: searchCallbackRef,
-                    value: searchText,
-                    onChange: onChangeSearchInput
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-scrollContainer vuuScrollable`,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-sectionHeader`,
-                        children: "Columns in view"
-                    }),
-                    /*#__PURE__*/ jsx(DragDropProvider, {
-                        onDragEnd: handleDragEnd,
-                        children: /*#__PURE__*/ jsx(ListBox, {
-                            className: `${classBase}-selectedList`,
-                            onSelectionChange: onSelectionChange,
-                            ref: listRef,
-                            selected: selected,
-                            children: selectedColumns.map((column, index)=>/*#__PURE__*/ jsx(SelectedColumnListItem, {
-                                    column: column,
-                                    index: index,
-                                    onRemove: onRemoveItemFromSelectedList,
-                                    searchPattern: searchText.toLowerCase(),
-                                    value: column
-                                }, column.name))
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
-                        children: "Available columns"
-                    }),
-                    /*#__PURE__*/ jsx(ListBox, {
-                        className: `${classBase}-availableList`,
-                        selected: NO_SELECTION,
-                        children: availableColumns.map((column, index)=>/*#__PURE__*/ jsx(AvailableColumnListItem, {
-                                column: column,
-                                index: index,
-                                onAdd: onAddItemToSelectedList,
-                                searchPattern: searchText.toLowerCase(),
-                                value: column
-                            }, column.name))
-                    })
-                ]
-            }),
-            allowCreateCalculatedColumn ? /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-column-buttons`,
-                children: /*#__PURE__*/ jsx(Button, {
-                    onClick: onClickCreateCalculatedColumn,
-                    children: "Create calculated column"
-                })
-            }) : null
-        ]
+        selected: selected
     });
 });
 export { ColumnPicker_ColumnPicker as ColumnPicker, classBaseListItem };

package/src/column-picker/useColumnPicker.js

@@ -1,13 +1,7 @@
-import { queryClosest } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useState } from "react";
+import { isCalculatedColumn } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ColumnChangeSource } from "./ColumnModel.js";
 const SOURCE = ColumnChangeSource.ColumnPicker;
-const columnName = (target)=>{
-    const listItem = queryClosest(target, ".saltOption", true);
-    const { name } = listItem.dataset;
-    if (name) return name;
-    throw Error("[useColumnPicker] column name could not be identified, data-name attribute not found");
-};
 const useColumnPicker = ({ columnModel: model })=>{
     const [, forceRender] = useState({});
     useEffect(()=>{
@@ -18,25 +12,37 @@ const useColumnPicker = ({ columnModel: model })=>{
     }, [
         model
     ]);
-    const handleChangeSearchInput = useCallback((evt)=>{
-        const { value } = evt.target;
-        model.searchPattern = value;
+    const allItems = useMemo(()=>{
+        const itemDescriptors = model.allColumns.map((column)=>({
+                name: column.name,
+                label: column.label,
+                icon: isCalculatedColumn(column.name) ? "vuuCalculatedColumnIcon" : void 0
+            }));
+        return itemDescriptors;
     }, [
-        model
+        model.allColumns
     ]);
-    const handleAddItemToSelectedList = useCallback((e)=>model.addItemToSelectedColumns(columnName(e.target), SOURCE), [
-        model
+    const selectedItems = useMemo(()=>{
+        const itemDescriptors = model.selectedColumns.map((column)=>allItems.find((item)=>item.name === column.name));
+        return itemDescriptors;
+    }, [
+        model.selectedColumns,
+        allItems
     ]);
-    const handleRemoveItemFromSelectedList = useCallback((e)=>model.removeItemFromSelectedColumns(columnName(e.target), SOURCE), [
-        model
+    const oneOrMoreColumnsIsCalculated = useMemo(()=>model.selectedColumns.some((column)=>isCalculatedColumn(column.name)), [
+        model.selectedColumns
+    ]);
+    const handleSelectedItemsChange = useCallback((newSelectedItems)=>{
+        const newSelectedColumns = newSelectedItems.map((item)=>model.allColumns.find((column)=>column.name === item.name));
+        model.addRemoveOrReorderSelectedColumns(newSelectedColumns, SOURCE);
+    }, [
+        model.allColumns
     ]);
     return {
-        availableColumns: model.availableColumns,
-        onAddItemToSelectedList: handleAddItemToSelectedList,
-        onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
-        onChangeSearchInput: handleChangeSearchInput,
-        searchText: model.searchPattern,
-        selectedColumns: model.selectedColumns
+        allItems,
+        selectedItems,
+        oneOrMoreColumnsIsCalculated,
+        handleSelectedItemsChange
     };
 };
 export { useColumnPicker };

package/src/csv-upload/CsvUpload.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogActions, DialogContent, DialogHeader, FileDropZone, FileDropZoneIcon, FileDropZoneTrigger } from "@salt-ds/core";
+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";
@@ -18,6 +18,10 @@ 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 hasErrors = !!error || validation && validation.errors.length > 0;
+    const isUploaded = canImport || isImporting;
+    const status = hasErrors ? "error" : isUploaded ? "success" : void 0;
     const handleCancel = useCallback(async ()=>{
         await cancelImport();
         if (!isControlledOpen) setInternalOpen(false);
@@ -36,38 +40,55 @@ const CsvUpload_CsvUpload = (props)=>{
     const content = /*#__PURE__*/ jsxs("div", {
         className: classBase,
         children: [
-            /*#__PURE__*/ jsxs(FileDropZone, {
+            /*#__PURE__*/ jsx(FileDropZone, {
                 className: `${classBase}-dropZone`,
                 disabled: void 0 === schema || isProcessingFile || isImporting,
                 onDrop: onDrop,
-                status: validation && validation.errors.length > 0 || error ? "error" : void 0,
-                children: [
-                    /*#__PURE__*/ jsx(FileDropZoneIcon, {}),
-                    validation && validation.errors.length > 0 ? /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                children: "Your file contains errors"
-                            }),
-                            /*#__PURE__*/ jsx("ul", {
-                                className: `${classBase}-errorList`,
-                                children: validation.errors.filter((e)=>e.column in validation.errorMap.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"
-                    })
-                ]
+                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
+                    ]
+                })
             }),
             error && (renderError ? renderError(error) : /*#__PURE__*/ jsxs("div", {
                 className: `${classBase}-errors`,
@@ -81,8 +102,7 @@ const CsvUpload_CsvUpload = (props)=>{
                         children: error.errors.importError?.message || error.errors.schemaError?.message || error.errors.validationError?.message || "An unexpected error occurred during import."
                     })
                 ]
-            })),
-            children
+            }))
         ]
     });
     const actions = /*#__PURE__*/ jsxs(DialogActions, {

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

@@ -1,4 +1,4 @@
-const CSV_HEADER_ROW_NUMBER = 1;
-const CSV_FIRST_DATA_ROW_NUMBER = 2;
+const CSV_HEADER_ROW_NUMBER = 0;
+const CSV_FIRST_DATA_ROW_NUMBER = 1;
 const MAX_ROWS_IN_CSV = 10000;
 export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, MAX_ROWS_IN_CSV };

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

@@ -15,6 +15,7 @@ var csv_errors_CsvValidationErrorEnum = /*#__PURE__*/ function(CsvValidationErro
     CsvValidationErrorEnum["MAX_ROWS_EXCEEDED"] = "MAX_ROWS_EXCEEDED";
     CsvValidationErrorEnum["EMPTY_NON_STRING_VALUE"] = "EMPTY_NON_STRING_VALUE";
     CsvValidationErrorEnum["TYPE_MISMATCH"] = "TYPE_MISMATCH";
+    CsvValidationErrorEnum["CUSTOM_VALIDATION"] = "CUSTOM_VALIDATION";
     return CsvValidationErrorEnum;
 }({});
 const createCsvErrorState = ()=>({

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

@@ -20,6 +20,10 @@ const validateCsvAgainstSchema = (parsed, tableSchema, options)=>{
     parsed.rows.forEach((rowValues, rowIndex)=>{
         const rowNum = rowIndex + CSV_FIRST_DATA_ROW_NUMBER;
         const typedRow = {};
+        const rawRow = parsed.header.reduce((acc, headerCol, idx)=>{
+            acc[headerCol] = rowValues[idx];
+            return acc;
+        }, {});
         parsed.header.forEach((columnName, columnIndex)=>{
             const rawValue = rowValues[columnIndex];
             const schemaType = schemaColumns.get(columnName);
@@ -33,6 +37,11 @@ const validateCsvAgainstSchema = (parsed, tableSchema, options)=>{
                 return;
             }
             if (void 0 === value) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, `Value '${rawValue}' is not a valid ${toType}`, rawValue);
+            const customValidator = options?.validators?.[columnName];
+            if (customValidator) {
+                const validationResult = customValidator(rawValue, columnName, rawRow);
+                if (true !== validationResult) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.CUSTOM_VALIDATION, "string" == typeof validationResult ? validationResult : `Value '${rawValue}' failed custom validation.`, rawValue);
+            }
             typedRow[columnName] = value;
         });
         typedRows.push(typedRow);

package/src/csv-upload/useCsvUpload.js

@@ -5,7 +5,7 @@ import { parseCsv } from "./parse/csv-parse.js";
 import { validateCsvAgainstSchema } from "./parse/csv-schema-validation.js";
 import { buildRowErrorMessage, createUploadError, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, toErrorMessage } from "./parse/csv-upload-utils.js";
 import { CSV_FIRST_DATA_ROW_NUMBER } from "./parse/csv-constants.js";
-const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults })=>{
+const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, validators })=>{
     const { getServerAPI } = useData();
     const [validation, setValidation] = useState();
     const [sessionTable, setSessionTable] = useState();
@@ -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}` : `Row ${rowNum}: ${columnError}`);
+            vuuMsgByRow.set(rowNum, existing ? `${existing}; ${columnError}` : `${0 === rowNum ? "Header" : `Row ${rowNum}`}: ${columnError}`);
         }
         const parsedRowCount = mergedValidation.rows.length;
         const unparsedErrorRows = [
@@ -174,7 +174,7 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
                 if (isRpcError(result)) throw Error(result.errorMessage);
                 if ("string" == typeof result) throw Error(result);
             } catch (error) {
-                rpcErrors.push(`Row ${rowNum}: ${toErrorMessage(error)}`);
+                rpcErrors.push(`${0 === rowNum ? "Header" : `Row ${rowNum}`}: ${toErrorMessage(error)}`);
             }
         }
         if (rpcErrors.length > 0) throw Error(buildRowErrorMessage("Import failed", rpcErrors));
@@ -240,7 +240,8 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
             return;
         }
         const schemaValidation = validateCsvAgainstSchema(parsedCsv, schema, {
-            maxRows
+            maxRows,
+            validators
         });
         if (Object.keys(schemaValidation.errorMap.fileErrors).length > 0) {
             setValidation(schemaValidation);
@@ -288,7 +289,8 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
         dataSource.table,
         table,
         endEditSessionAndNotify,
-        schema
+        schema,
+        validators
     ]);
     const handleFiles = useCallback(async (files)=>{
         const file = files[0];

package/src/tabbed-table-config-panel/TabbedTableConfigPanel.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Tab, TabBar, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Tab, TabBar, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
@@ -78,12 +78,21 @@ const TabbedTableConfigPanel_TabbedTableConfigPanel = ({ allowCreateCalculatedCo
                 }),
                 /*#__PURE__*/ jsx(TabPanel, {
                     value: "table-columns",
-                    children: /*#__PURE__*/ jsx(ColumnPicker, {
-                        allowCreateCalculatedColumn: allowCreateCalculatedColumn,
-                        columnModel: columnModel,
-                        onClickCreateCalculatedColumn: onCreateCalculatedColumn,
-                        onSelectionChange: handleSelectionChange,
-                        selected: columns
+                    children: /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(ColumnPicker, {
+                                columnModel: columnModel,
+                                onSelectionChange: handleSelectionChange,
+                                selected: columns
+                            }),
+                            allowCreateCalculatedColumn ? /*#__PURE__*/ jsx("div", {
+                                className: `${classBase}-column-buttons`,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    onClick: onCreateCalculatedColumn,
+                                    children: "Create calculated column"
+                                })
+                            }) : null
+                        ]
                     })
                 }),
                 /*#__PURE__*/ jsx(TabPanel, {

package/src/tabbed-table-config-panel/useTabbedTableConfigPanel.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
 import { useContextPanel } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useRef } from "react";
 import { TabbedTableConfigPanel } from "./TabbedTableConfigPanel.js";
 const useTabbedTableConfigPanel = ({ allowCreateCalculatedColumn, columnModel, config, onDisplayAttributeChange, vuuTable })=>{
     const showContextPanel = useContextPanel();

package/types/calculated-column/CalculatedColumnPanel.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from "react";
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { VuuColumnDataType, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes } from "react";
 import { ColumnModel } from "../column-picker/ColumnModel";
 export interface CalculatedColumnPanelProps extends HTMLAttributes<HTMLDivElement> {
     column: ColumnDescriptor;

package/types/column-picker/ColumnModel.d.ts

@@ -58,12 +58,13 @@ export declare class ColumnModel extends EventEmitter<ColumnEvents> {
      * Columns already selected and rendered in Table.
      */
     selectedColumns: readonly ColumnDescriptor[]);
-    get availableColumns(): ColumnDescriptor[];
-    set searchPattern(pattern: string);
-    get searchPattern(): string;
     get selectedColumns(): readonly ColumnDescriptor[];
     setSelectedColumns(selectedColumns: readonly ColumnDescriptor[], source: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor): void;
     getColumn(name: string): ColumnDescriptor;
+    /**
+     * Introduced for use by ColumnPicker
+     */
+    addRemoveOrReorderSelectedColumns(newSelectedColumns: readonly ColumnDescriptor[], source: ColumnChangeSource): void;
     addItemToSelectedColumns(name: string, source: ColumnChangeSource): void;
     removeItemFromSelectedColumns(name: string, source: ColumnChangeSource): void;
     reorderSelectedColumns(orderedColumnNames: string[], source: ColumnChangeSource): void;

package/types/column-picker/ColumnPicker.d.ts

@@ -1,10 +1,8 @@
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { HTMLAttributes, MouseEventHandler } from "react";
-import { ListBoxProps } from "@salt-ds/core";
-import { ColumnPickerHookProps } from "./useColumnPicker";
+import type { ListBoxProps } from "@salt-ds/core";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { type HTMLAttributes } from "react";
+import { type ColumnPickerHookProps } from "./useColumnPicker";
 export declare const classBaseListItem = "vuuColumnPickerListItem";
 export interface ColumnPickerProps extends ColumnPickerHookProps, Pick<ListBoxProps<ColumnDescriptor>, "selected" | "onSelectionChange">, HTMLAttributes<HTMLDivElement> {
-    allowCreateCalculatedColumn?: boolean;
-    onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;
 }
 export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/column-picker/useColumnPicker.d.ts

@@ -1,16 +1,13 @@
-import { ColumnDescriptor, TableSelectionModel } from "@vuu-ui/vuu-table-types";
-import { FormEventHandler, MouseEventHandler } from "react";
-import { ColumnModel, SelectedColumnChangeType } from "./ColumnModel";
+import { TableSelectionModel } from "@vuu-ui/vuu-table-types";
+import { ItemDescriptor } from "@vuu-ui/vuu-ui-controls";
+import { ColumnModel } from "./ColumnModel";
 export type ColumnSelectionModel = Extract<TableSelectionModel, "none" | "single">;
-export type SelectedColumnsChangeHandler = (columns: ColumnDescriptor[], changeType: SelectedColumnChangeType) => void;
 export interface ColumnPickerHookProps {
     columnModel: ColumnModel;
 }
 export declare const useColumnPicker: ({ columnModel: model, }: ColumnPickerHookProps) => {
-    availableColumns: ColumnDescriptor[];
-    onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
-    onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
-    onChangeSearchInput: FormEventHandler;
-    searchText: string;
-    selectedColumns: readonly ColumnDescriptor[];
+    allItems: ItemDescriptor[];
+    selectedItems: ItemDescriptor[];
+    oneOrMoreColumnsIsCalculated: boolean;
+    handleSelectedItemsChange: (newSelectedItems: readonly ItemDescriptor[]) => void;
 };

package/types/column-settings-panel/useColumnSettings.d.ts

@@ -1,8 +1,8 @@
-import { ColumnDescriptor, TableConfig, ColumnTypeFormatting } from "@vuu-ui/vuu-table-types";
-import { CellRendererDescriptor, ColumnRenderPropsChangeHandler } from "@vuu-ui/vuu-utils";
+import { ColumnDescriptor, ColumnTypeFormatting, TableConfig } from "@vuu-ui/vuu-table-types";
+import { DataValueTypeSimple } from "@vuu-ui/vuu-data-types";
 import { VuuColumnDataType, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { CellRendererDescriptor, ColumnRenderPropsChangeHandler } from "@vuu-ui/vuu-utils";
 import { FormEventHandler } from "react";
-import { DataValueTypeSimple } from "@vuu-ui/vuu-data-types";
 import { ColumnModel } from "../column-picker/ColumnModel";
 /**
  * Describes the props for a Column Configuration Editor, for which

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

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import type { RowDefaultDataItemValues, EditSession } from "@vuu-ui/vuu-data-editing";
 import type { CsvParseError, CsvParseOptions } from "./parse/csv-parse";
-import type { CsvValidationStructuredError } from "./parse/csv-schema-validation";
+import type { CsvValidationStructuredError, CsvColumnValidator } from "./parse/csv-schema-validation";
 import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import type { CsvUploadTableData } from "./parse/csv-upload-utils";
@@ -60,6 +60,7 @@ export interface CsvUploadProps {
     parseOptions?: CsvParseOptions;
     importMode?: "direct" | "preview";
     rowDefaults?: RowDefaultDataItemValues;
+    validators?: Record<string, CsvColumnValidator>;
     /**
      * Custom renderer for the error panel.
      */

package/types/csv-upload/data-upload-preview/useDataUploadPreview.d.ts

@@ -11,7 +11,7 @@ export declare const useDataUploadPreview: ({ dataSource, editSession, onClose,
     canSave: boolean;
     hasSelection: boolean;
     onCancel: () => Promise<void>;
-    onDelete: () => Promise<void>;
+    onDelete: () => Promise<import("@vuu-ui/vuu-protocol-types").RpcResult>;
     onSave: (force?: boolean) => Promise<void>;
     sessionError: string | undefined;
 };

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

@@ -1,7 +1,7 @@
 export { CsvUpload, type CsvUploadError, type CsvUploadProps, type CsvUploadErrorResult, type CsvUploadErrors, type CsvUploadPhase, type CsvUploadImportedResult, type CsvUploadPreviewResult, type CsvUploadSessionEndReason, type CsvUploadSessionEndResult, type CsvUploadSessionTable, } from "./CsvUpload";
 export { useCsvUpload, type CsvUploadHookProps, type UseCsvUploadReturn, } from "./useCsvUpload";
 export { DataUploadPreview, type DataUploadPreviewProps, } from "./data-upload-preview/DataUploadPreview";
-export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./parse/csv-schema-validation";
+export { validateCsvAgainstSchema, type CsvColumnValidator, type CsvValidationOptions, type CsvValidationResult, } from "./parse/csv-schema-validation";
 export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./parse/csv-parse";
 export { CsvValidationErrorEnum, CsvParseErrorEnum, type CsvError, type CsvErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, type CsvParseError, type CsvParseErrorMap, } from "./parse/csv-errors";
 export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./parse/csv-constants";

package/types/csv-upload/parse/csv-constants.d.ts

@@ -1,3 +1,3 @@
-export declare const CSV_HEADER_ROW_NUMBER = 1;
-export declare const CSV_FIRST_DATA_ROW_NUMBER = 2;
+export declare const CSV_HEADER_ROW_NUMBER = 0;
+export declare const CSV_FIRST_DATA_ROW_NUMBER = 1;
 export declare const MAX_ROWS_IN_CSV = 10000;

package/types/csv-upload/parse/csv-errors.d.ts

@@ -12,7 +12,8 @@ export declare enum CsvValidationErrorEnum {
     UNKNOWN_COLUMN = "UNKNOWN_COLUMN",
     MAX_ROWS_EXCEEDED = "MAX_ROWS_EXCEEDED",
     EMPTY_NON_STRING_VALUE = "EMPTY_NON_STRING_VALUE",
-    TYPE_MISMATCH = "TYPE_MISMATCH"
+    TYPE_MISMATCH = "TYPE_MISMATCH",
+    CUSTOM_VALIDATION = "CUSTOM_VALIDATION"
 }
 export type CsvErrorMap<TError extends string> = {
     rowErrors: Record<number, Record<string, TError[]>>;

package/types/csv-upload/parse/csv-schema-validation.d.ts

@@ -3,6 +3,7 @@ import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import type { CsvValidationError, CsvValidationErrorMap, CsvParseError } from "./csv-errors";
 import type { CsvParseResult } from "./csv-parse";
 export { CsvValidationErrorEnum, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, } from "./csv-errors";
+export type CsvColumnValidator = (value: string, columnName: string, row: Record<string, string>) => boolean | string;
 export type CsvValidationResult = {
     columns: string[];
     errorMap: CsvValidationErrorMap;
@@ -12,5 +13,6 @@ export type CsvValidationResult = {
 };
 export type CsvValidationOptions = {
     maxRows?: number;
+    validators?: Record<string, CsvColumnValidator>;
 };
 export declare const validateCsvAgainstSchema: (parsed: CsvParseResult, tableSchema: TableSchema, options?: CsvValidationOptions) => CsvValidationResult;

package/types/csv-upload/parse/index.d.ts

@@ -1,5 +1,5 @@
 export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./csv-constants";
 export { CsvParseErrorEnum, CsvValidationErrorEnum, type CsvError, type CsvErrorMap, type CsvErrorState, type CsvParseError, type CsvParseErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, addCsvFileError, addCsvRowError, createCsvErrorState, hasCsvErrors, } from "./csv-errors";
 export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./csv-parse";
-export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./csv-schema-validation";
+export { validateCsvAgainstSchema, type CsvColumnValidator, type CsvValidationOptions, type CsvValidationResult, } from "./csv-schema-validation";
 export { buildRowErrorMessage, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors, type CsvUploadTableData, type RpcBatchResult, } from "./csv-upload-utils";

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

@@ -2,7 +2,7 @@ import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import { type RowDefaultDataItemValues } from "@vuu-ui/vuu-data-editing";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import { type CsvParseOptions } from "./parse/csv-parse";
-import { type CsvValidationResult } from "./parse/csv-schema-validation";
+import { type CsvValidationResult, type CsvColumnValidator } from "./parse/csv-schema-validation";
 import type { CsvUploadErrorResult, CsvUploadImportedResult, CsvUploadPreviewResult, CsvUploadSessionEndResult, CsvUploadSessionTable } from "./CsvUpload";
 export interface CsvUploadHookProps {
     dataSource: DataSource;
@@ -25,6 +25,7 @@ export interface CsvUploadHookProps {
     parseOptions?: CsvParseOptions;
     /** Default column values applied to every addRow call. Pass a stable reference — a new object triggers EditSession recreation. */
     rowDefaults?: RowDefaultDataItemValues;
+    validators?: Record<string, CsvColumnValidator>;
 }
 export type UseCsvUploadReturn = {
     canImport: boolean;
@@ -39,4 +40,4 @@ export type UseCsvUploadReturn = {
     validation: CsvValidationResult | undefined;
     error: CsvUploadErrorResult | undefined;
 };
-export declare const useCsvUpload: ({ dataSource, importMode, importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, }: CsvUploadHookProps) => UseCsvUploadReturn;
+export declare const useCsvUpload: ({ dataSource, importMode, importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, validators, }: CsvUploadHookProps) => UseCsvUploadReturn;

package/types/index.d.ts

@@ -11,7 +11,6 @@ export { useColumnActions } from "./column-menu/useColumnActions";
 export { ColumnChangeSource, ColumnModel, isColumnAdded, isColumnRemoved, isColumnsReordered, SelectedColumnChangeType, type ColumnEvents, type ColumnsChangeHandler, } from "./column-picker/ColumnModel";
 export { ColumnPicker, type ColumnPickerProps, } from "./column-picker/ColumnPicker";
 export { ColumnPickerAction } from "./column-picker/ColumnPickerAction";
-export type { SelectedColumnsChangeHandler } from "./column-picker/useColumnPicker";
 export { useTableColumnPicker } from "./column-picker/useTableColumnPicker";
 export { ColumnSettingsPanel } from "./column-settings-panel/ColumnSettingsPanel";
 export { useColumnSettings } from "./column-settings-panel/useColumnSettings";

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

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import type { RowDefaultDataItemValues, EditSession } from "@vuu-ui/vuu-data-editing";
 import type { CsvParseError, CsvParseOptions } from "./parse/csv-parse";
-import type { CsvValidationStructuredError } from "./parse/csv-schema-validation";
+import type { CsvValidationStructuredError, CsvColumnValidator } from "./parse/csv-schema-validation";
 import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import type { CsvUploadTableData } from "./parse/csv-upload-utils";
@@ -60,6 +60,7 @@ export interface CsvUploadProps {
     parseOptions?: CsvParseOptions;
     importMode?: "direct" | "preview";
     rowDefaults?: RowDefaultDataItemValues;
+    validators?: Record<string, CsvColumnValidator>;
     /**
      * Custom renderer for the error panel.
      */

package/types/src/csv-upload/index.d.ts

@@ -1,7 +1,7 @@
 export { CsvUpload, type CsvUploadError, type CsvUploadProps, type CsvUploadErrorResult, type CsvUploadErrors, type CsvUploadPhase, type CsvUploadImportedResult, type CsvUploadPreviewResult, type CsvUploadSessionEndReason, type CsvUploadSessionEndResult, type CsvUploadSessionTable, } from "./CsvUpload";
 export { useCsvUpload, type CsvUploadHookProps, type UseCsvUploadReturn, } from "./useCsvUpload";
 export { DataUploadPreview, type DataUploadPreviewProps, } from "./data-upload-preview/DataUploadPreview";
-export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./parse/csv-schema-validation";
+export { validateCsvAgainstSchema, type CsvColumnValidator, type CsvValidationOptions, type CsvValidationResult, } from "./parse/csv-schema-validation";
 export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./parse/csv-parse";
 export { CsvValidationErrorEnum, CsvParseErrorEnum, type CsvError, type CsvErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, type CsvParseError, type CsvParseErrorMap, } from "./parse/csv-errors";
 export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./parse/csv-constants";

package/types/src/csv-upload/parse/csv-constants.d.ts

@@ -1,3 +1,3 @@
-export declare const CSV_HEADER_ROW_NUMBER = 1;
-export declare const CSV_FIRST_DATA_ROW_NUMBER = 2;
+export declare const CSV_HEADER_ROW_NUMBER = 0;
+export declare const CSV_FIRST_DATA_ROW_NUMBER = 1;
 export declare const MAX_ROWS_IN_CSV = 10000;

package/types/src/csv-upload/parse/csv-errors.d.ts

@@ -12,7 +12,8 @@ export declare enum CsvValidationErrorEnum {
     UNKNOWN_COLUMN = "UNKNOWN_COLUMN",
     MAX_ROWS_EXCEEDED = "MAX_ROWS_EXCEEDED",
     EMPTY_NON_STRING_VALUE = "EMPTY_NON_STRING_VALUE",
-    TYPE_MISMATCH = "TYPE_MISMATCH"
+    TYPE_MISMATCH = "TYPE_MISMATCH",
+    CUSTOM_VALIDATION = "CUSTOM_VALIDATION"
 }
 export type CsvErrorMap<TError extends string> = {
     rowErrors: Record<number, Record<string, TError[]>>;

package/types/src/csv-upload/parse/csv-schema-validation.d.ts

@@ -3,6 +3,7 @@ import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import type { CsvValidationError, CsvValidationErrorMap, CsvParseError } from "./csv-errors";
 import type { CsvParseResult } from "./csv-parse";
 export { CsvValidationErrorEnum, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, } from "./csv-errors";
+export type CsvColumnValidator = (value: string, columnName: string, row: Record<string, string>) => boolean | string;
 export type CsvValidationResult = {
     columns: string[];
     errorMap: CsvValidationErrorMap;
@@ -12,5 +13,6 @@ export type CsvValidationResult = {
 };
 export type CsvValidationOptions = {
     maxRows?: number;
+    validators?: Record<string, CsvColumnValidator>;
 };
 export declare const validateCsvAgainstSchema: (parsed: CsvParseResult, tableSchema: TableSchema, options?: CsvValidationOptions) => CsvValidationResult;

package/types/src/csv-upload/parse/index.d.ts

@@ -1,5 +1,5 @@
 export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./csv-constants";
 export { CsvParseErrorEnum, CsvValidationErrorEnum, type CsvError, type CsvErrorMap, type CsvErrorState, type CsvParseError, type CsvParseErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, addCsvFileError, addCsvRowError, createCsvErrorState, hasCsvErrors, } from "./csv-errors";
 export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./csv-parse";
-export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./csv-schema-validation";
+export { validateCsvAgainstSchema, type CsvColumnValidator, type CsvValidationOptions, type CsvValidationResult, } from "./csv-schema-validation";
 export { buildRowErrorMessage, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors, type CsvUploadTableData, type RpcBatchResult, } from "./csv-upload-utils";

package/types/src/csv-upload/useCsvUpload.d.ts

@@ -2,7 +2,7 @@ import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import { type RowDefaultDataItemValues } from "@vuu-ui/vuu-data-editing";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import { type CsvParseOptions } from "./parse/csv-parse";
-import { type CsvValidationResult } from "./parse/csv-schema-validation";
+import { type CsvValidationResult, type CsvColumnValidator } from "./parse/csv-schema-validation";
 import type { CsvUploadErrorResult, CsvUploadImportedResult, CsvUploadPreviewResult, CsvUploadSessionEndResult, CsvUploadSessionTable } from "./CsvUpload";
 export interface CsvUploadHookProps {
     dataSource: DataSource;
@@ -25,6 +25,7 @@ export interface CsvUploadHookProps {
     parseOptions?: CsvParseOptions;
     /** Default column values applied to every addRow call. Pass a stable reference — a new object triggers EditSession recreation. */
     rowDefaults?: RowDefaultDataItemValues;
+    validators?: Record<string, CsvColumnValidator>;
 }
 export type UseCsvUploadReturn = {
     canImport: boolean;
@@ -39,4 +40,4 @@ export type UseCsvUploadReturn = {
     validation: CsvValidationResult | undefined;
     error: CsvUploadErrorResult | undefined;
 };
-export declare const useCsvUpload: ({ dataSource, importMode, importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, }: CsvUploadHookProps) => UseCsvUploadReturn;
+export declare const useCsvUpload: ({ dataSource, importMode, importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, validators, }: CsvUploadHookProps) => UseCsvUploadReturn;

package/types/tabbed-table-config-panel/useTabbedTableConfigPanel.d.ts

@@ -1,12 +1,13 @@
-import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import { TableProps } from "@vuu-ui/vuu-table";
 import { ColumnPickerProps } from "../column-picker/ColumnPicker";
-import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-export interface TabbedTableConfigPanelHookProps extends Pick<ColumnPickerProps, "allowCreateCalculatedColumn" | "columnModel">, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config"> {
+import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
+export interface TabbedTableConfigPanelHookProps extends Pick<ColumnPickerProps, "columnModel">, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config"> {
     /**
      * only required for calculated columns
      */
     vuuTable?: VuuTable;
+    allowCreateCalculatedColumn?: boolean;
 }
 export declare const useTabbedTableConfigPanel: ({ allowCreateCalculatedColumn, columnModel, config, onDisplayAttributeChange, vuuTable, }: TabbedTableConfigPanelHookProps) => {
     showTabbedTableConfigPanel: (title?: string) => void;