@gpa-gemstone/common-pages 0.0.124 → 0.0.126

package/lib/BulkUpload.js

@@ -57,6 +57,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BulkUpload;
 var React = __importStar(require("react"));
 var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
 var steps = [{ short: 'Upload', long: 'Upload', id: 'Upload' }, { short: 'Process', long: 'Process', id: 'Process' }, { short: "Review", id: 'Review', long: 'Review' }, { short: 'Complete', long: 'Complete', id: 'Complete' }];
 var fileExtRegex = /(\.[^.]+)$/;
 function BulkUpload(props) {
@@ -73,7 +74,7 @@ function BulkUpload(props) {
         if (props.Step === 'Upload' || props.Step === 'Complete' || currentPipelineIndex == null || currentPipelineIndex > props.Pipelines.length - 1 || props.CurrentPipelineStep > ((_c = (_b = (_a = props.Pipelines) === null || _a === void 0 ? void 0 : _a[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.Steps) === null || _c === void 0 ? void 0 : _c.length) - 1)
             return React.createElement(React.Fragment, null);
         var pipeline = props.Pipelines[currentPipelineIndex].Steps[props.CurrentPipelineStep];
-        return React.createElement(pipeline.UI, { AdditionalProps: (_d = props.Pipelines[currentPipelineIndex].Steps[props.CurrentPipelineStep]) === null || _d === void 0 ? void 0 : _d.AdditionalProps, RawFileData: rawFileContent, SetData: setData, SetPipelineStep: props.SetCurrentPipelineStep, CurrentPipelineStep: props.CurrentPipelineStep, Errors: pipelineErrors, SetErrors: setPipelineErrors });
+        return React.createElement(pipeline.UI, { AdditionalProps: (_d = props.Pipelines[currentPipelineIndex].Steps[props.CurrentPipelineStep]) === null || _d === void 0 ? void 0 : _d.AdditionalProps, RawFileData: rawFileContent, SetData: setData, Data: data, SetPipelineStep: props.SetCurrentPipelineStep, CurrentPipelineStep: props.CurrentPipelineStep, Errors: pipelineErrors, SetErrors: setPipelineErrors });
     }, [props.Step, currentPipelineIndex, rawFileContent, props.CurrentPipelineStep, props.Pipelines]);
     var progressSteps = React.useMemo(function () {
         var _a, _b, _c;
@@ -113,10 +114,7 @@ function BulkUpload(props) {
             return;
         props.OnComplete(data);
     }, [props.Step, data, props.OnComplete]);
-    var handleFileUpload = function (evt) {
-        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0)
-            return;
-        var file = evt.target.files[0];
+    var handleFileUpload = function (file) {
         var matchArray = file.name.match(fileExtRegex);
         var fileExtension = matchArray != null ? matchArray[0].substring(1) : '';
         var pipelineIndex = props.Pipelines.findIndex(function (pipe) { return pipe.Select(file.type, fileExtension); });
@@ -134,6 +132,12 @@ function BulkUpload(props) {
             setRawFileContent(e.target.result);
         };
     };
+    var handleFileOnClear = function () {
+        setIsFileTypeValid(true);
+        setCurrentPipelineIndex(null);
+        setFileName(null);
+        setRawFileContent(null);
+    };
     return (React.createElement("div", { className: "container-fluid d-flex flex-column p-0 h-100" },
         React.createElement("div", { className: 'row h-100' },
             React.createElement("div", { className: 'col-12 d-flex flex-column h-100' },
@@ -144,9 +148,7 @@ function BulkUpload(props) {
                     React.createElement(React.Fragment, null,
                         React.createElement("div", { className: 'row justify-content-center' },
                             React.createElement("div", { className: 'col-6' },
-                                React.createElement("div", { className: "custom-file" },
-                                    React.createElement("input", { type: "file", className: "custom-file-input", id: "inputGroupFile02", onChange: handleFileUpload, accept: props.FileTypeAttribute, style: { cursor: 'pointer' } }),
-                                    React.createElement("label", { className: "custom-file-label", htmlFor: "inputGroupFile02", "aria-describedby": "inputGroupFileAddon02" }, fileName == null ? 'Upload File' : fileName)))),
+                                React.createElement(react_forms_1.FileUpload, { OnLoadHandler: handleFileUpload, OnClearHandler: handleFileOnClear, FileTypeAttribute: props.FileTypeAttribute }))),
                         React.createElement("div", { className: 'row' },
                             React.createElement("div", { className: 'col-12 h-100' }, currentPipelineIndex != null && ((_a = props.Pipelines[currentPipelineIndex]) === null || _a === void 0 ? void 0 : _a.AdditionalUploadUI) != null ? (_b = props.Pipelines[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.AdditionalUploadUI : null)))
                     : null,

package/lib/Pipelines/CSVPipeline.d.ts

@@ -2,6 +2,12 @@ import { Gemstone } from '@gpa-gemstone/application-typings';
 interface IAdditionalProps<T> {
     Fields: Gemstone.TSX.Interfaces.ICSVField<T>[];
     DataHasHeaders: boolean;
+    Headers: string[];
+    SetHeaders: (headers: string[]) => void;
+    Data: string[][];
+    SetData: (d: string[][]) => void;
+    HeaderMap: Map<string, keyof T | undefined>;
+    SetHeaderMap: (map: Map<string, keyof T | undefined>) => void;
 }
-export declare function useCSVPipeline<T = unknown>(csvFields: Gemstone.TSX.Interfaces.ICSVField<T>[]): Gemstone.TSX.Interfaces.IPipeline<T, IAdditionalProps<T>>;
+export declare function useCSVPipeline<T = unknown, U extends IAdditionalProps<T> = IAdditionalProps<T>>(csvFields: Gemstone.TSX.Interfaces.ICSVField<T>[], additionalSteps?: Gemstone.TSX.Interfaces.IPipelineSteps<T, U>[]): Gemstone.TSX.Interfaces.IPipeline<T, IAdditionalProps<T>>;
 export {};

package/lib/Pipelines/CSVPipeline.js

@@ -61,49 +61,68 @@ var react_interactive_1 = require("@gpa-gemstone/react-interactive");
 var react_forms_1 = require("@gpa-gemstone/react-forms");
 var react_table_1 = require("@gpa-gemstone/react-table");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var react_table_2 = require("@gpa-gemstone/react-table");
+var lodash_1 = require("lodash");
 var AdditionalUploadUI = function (props) {
     return (React.createElement("div", { className: 'row justify-content-center m-0' },
         React.createElement("div", { className: 'col-6 p-0' },
             React.createElement(react_forms_1.CheckBox, { Record: { HasHeaders: props.HasHeaders }, Field: "HasHeaders", Setter: function (record) { return props.SetHasHeaders(record.HasHeaders); }, Label: 'My Data Has Headers' }))));
 };
-function useCSVPipeline(csvFields) {
+function useCSVPipeline(csvFields, additionalSteps) {
     var _a = React.useState(false), hasHeaders = _a[0], setHasHeaders = _a[1];
+    //Define 
+    var _b = React.useState([]), headers = _b[0], setHeaders = _b[1];
+    var _c = React.useState(new Map()), headerMap = _c[0], setHeaderMap = _c[1];
+    var _d = React.useState([]), data = _d[0], setData = _d[1];
+    var baseStep = {
+        Label: 'Edit CSV',
+        UI: CsvPipelineEditStep,
+        AdditionalProps: {
+            Fields: csvFields,
+            DataHasHeaders: hasHeaders,
+            Headers: headers,
+            SetHeaders: setHeaders,
+            Data: data,
+            SetData: setData,
+            HeaderMap: headerMap,
+            SetHeaderMap: setHeaderMap
+        }
+    };
+    var steps = additionalSteps == null ? [baseStep] : __spreadArray([baseStep], additionalSteps, true);
     return {
         Select: function (mimeType, fileExt) { return mimeType.toLowerCase() === 'text/csv' || fileExt === 'csv'; },
-        Steps: [{ Label: 'Edit CSV', UI: CsvPipelineEditStep, AdditionalProps: { Fields: csvFields, DataHasHeaders: hasHeaders } }],
+        Steps: steps,
         AdditionalUploadUI: React.createElement(AdditionalUploadUI, { HasHeaders: hasHeaders, SetHasHeaders: setHasHeaders })
     };
 }
 function CsvPipelineEditStep(props) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var rawDataRef = React.useRef();
-    var _c = React.useState([]), headers = _c[0], setHeaders = _c[1];
-    var _d = React.useState(new Map()), headerMap = _d[0], setHeaderMap = _d[1];
-    var _e = React.useState([]), data = _e[0], setData = _e[1];
-    var _f = React.useState([]), pagedData = _f[0], setPagedData = _f[1];
-    var _g = React.useState(true), isFileParseable = _g[0], setIsFileParseable = _g[1];
-    var _h = React.useState(false), isCSVMissingHeaders = _h[0], setIsCSVMissingHeaders = _h[1];
-    var _j = React.useState(false), isCSVMissingDataCells = _j[0], setIsCSVMissingDataCells = _j[1];
-    var _k = React.useState(0), page = _k[0], setPage = _k[1];
-    var _l = React.useState(1), totalPages = _l[0], setTotalPages = _l[1];
-    var _m = React.useState(true), showDataHeaderAlert = _m[0], setShowDataHeaderAlert = _m[1];
-    var _o = React.useState(true), showDataOrHeaderAlert = _o[0], setShowDataOrHeaderAlert = _o[1];
+    var _z = React.useState([]), pagedData = _z[0], setPagedData = _z[1];
+    var _0 = React.useState(true), isFileParseable = _0[0], setIsFileParseable = _0[1];
+    var _1 = React.useState(false), isCSVMissingHeaders = _1[0], setIsCSVMissingHeaders = _1[1];
+    var _2 = React.useState(false), isCSVMissingDataCells = _2[0], setIsCSVMissingDataCells = _2[1];
+    var _3 = React.useState(0), page = _3[0], setPage = _3[1];
+    var _4 = React.useState(1), totalPages = _4[0], setTotalPages = _4[1];
+    var _5 = React.useState(true), showDataHeaderAlert = _5[0], setShowDataHeaderAlert = _5[1];
+    var _6 = React.useState(true), showDataOrHeaderAlert = _6[0], setShowDataOrHeaderAlert = _6[1];
     React.useEffect(function () {
-        if (data.length === 0)
+        var _a, _b, _c, _d, _e;
+        if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data.length) === 0)
             return;
-        var pages = Math.ceil(data.length / 10);
+        var pages = Math.ceil(((_c = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Data.length) !== null && _c !== void 0 ? _c : 0) / 10);
         setTotalPages(pages);
-        var Data = __spreadArray([], data, true);
+        var Data = __spreadArray([], ((_e = (_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.Data) !== null && _e !== void 0 ? _e : []), true);
         setPagedData(Data.slice(page * 10, (page + 1) * 10));
-    }, [data, page]);
+    }, [(_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data, page]);
     React.useEffect(function () {
+        var _a;
         var errors = [];
         if (props.AdditionalProps == null)
             return;
+        var headerMap = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap;
         props.AdditionalProps.Fields.forEach(function (field) {
-            var _a;
-            var matchedHeader = (_a = Array.from(headerMap.entries()).find(function (_a) {
+            var _a, _b, _c, _d, _e;
+            var matchedHeader = (_a = Array.from(headerMap).find(function (_a) {
                 var value = _a[1];
                 return value === field.Field;
             })) === null || _a === void 0 ? void 0 : _a[0];
@@ -112,59 +131,135 @@ function CsvPipelineEditStep(props) {
                     errors.push("".concat(field.Label, " is required and must be mapped to a header."));
                 return; // return early if the field was never mapped to a header
             }
-            var fieldIndex = headers.indexOf(matchedHeader);
+            var fieldIndex = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Headers.indexOf(matchedHeader);
+            var foundDuplicate = false;
+            var foundEmpty = false;
+            var foundInvalid = false;
             var uniqueValues = new Set();
             //Need to also make sure that all the fields that have the Required flag got mapped to a header...
-            data.forEach(function (row) {
+            (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Data.forEach(function (row) {
                 var value = row[fieldIndex + 1]; //+1 for row index value
-                // Check uniqueness
+                // Unique check
                 if (field.Unique) {
                     if (uniqueValues.has(value))
-                        errors.push("All ".concat(field.Label, " values must be unique."));
+                        foundDuplicate = true;
                     else
                         uniqueValues.add(value);
                 }
-                // Check allowed emptiness
-                if (!field.AllowEmpty && (value == null || (value !== null && value !== void 0 ? value : '').trim() === ""))
-                    errors.push("All ".concat(field.Label, " cannot be empty."));
-                //Check validity
+                // Allowed emptiness
+                if (!field.AllowEmpty && (value == null || (value.trim() === '')))
+                    foundEmpty = true;
+                // Validate
                 if (!field.Validate(value))
-                    errors.push("All ".concat(field.Label, " must contain valid values."));
+                    foundInvalid = true;
             });
+            if (field.Unique && foundDuplicate)
+                errors.push("All ".concat(field.Label, " values must be unique."));
+            if (foundEmpty)
+                errors.push("All ".concat(field.Label, " values cannot be empty."));
+            if (foundInvalid)
+                errors.push("All ".concat(field.Label, " values must be valid."));
+            //Check for SameValueForAllRows 
+            if ((_d = field.SameValueForAllRows) !== null && _d !== void 0 ? _d : false) {
+                var allValues = (_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Data.map(function (row) { var _a; return (_a = row[fieldIndex + 1]) !== null && _a !== void 0 ? _a : ''; });
+                if (new Set(allValues).size > 1)
+                    errors.push("All rows must contain the same value for ".concat(field.Label, "."));
+            }
         });
-        props.SetErrors(errors);
-    }, [data, headers, headerMap, isFileParseable]);
+        if (!(0, lodash_1.isEqual)(props.Errors.sort(), errors.sort()))
+            props.SetErrors(errors);
+    }, [(_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Data, (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Headers, (_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.HeaderMap, isFileParseable, (_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Fields]);
+    //Effect to parse rawfiledata initially
     React.useEffect(function () {
-        if (props.RawFileData == null || props.AdditionalProps == null || rawDataRef.current === props.RawFileData)
+        var _a, _b;
+        if (props.RawFileData == null || props.AdditionalProps == null || rawDataRef.current === props.RawFileData || props.AdditionalProps.Data.length !== 0 || props.AdditionalProps.Headers.length !== 0)
             return;
         var parsedData;
         try {
             parsedData = parseCSV(props.RawFileData, props.AdditionalProps.DataHasHeaders, props.AdditionalProps.Fields.filter(function (field) { return field.Required; }).length);
         }
-        catch (_a) {
+        catch (_c) {
             setIsFileParseable(false);
             return;
         }
         setIsFileParseable(true);
         setIsCSVMissingDataCells(parsedData.AddedMissingDataValues);
         setIsCSVMissingHeaders(parsedData.AddedMissingHeaders);
-        setData(parsedData.Data);
-        setHeaders(parsedData.Headers);
-        setHeaderMap(autoMapHeaders(parsedData.Headers, props.AdditionalProps.Fields.map(function (field) { return field.Field; })));
+        (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.SetData(parsedData.Data);
+        props.AdditionalProps.SetHeaders(parsedData.Headers);
+        (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.SetHeaderMap(autoMapHeaders(parsedData.Headers, props.AdditionalProps.Fields.map(function (field) { return field.Field; })));
         rawDataRef.current = props.RawFileData;
     }, [props.RawFileData, props.AdditionalProps]);
+    //Effect to add additional columns for required fields during mapping process
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields) == null || ((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.length) === 0 || ((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Data.length) === 0 || props.AdditionalProps.Headers == null)
+            return;
+        var requiredCount = props.AdditionalProps.Fields.filter(function (f) { return f.Required; }).length;
+        var optionalFields = props.AdditionalProps.Fields.filter(function (f) { return !f.Required; }).map(function (f) { return f.Field; });
+        var mappedOptionalCount = 0;
+        Array.from((_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.HeaderMap.values()).forEach(function (mappedField) {
+            if (mappedField != null && optionalFields.includes(mappedField))
+                mappedOptionalCount++;
+        });
+        var neededCols = requiredCount + mappedOptionalCount;
+        if (props.AdditionalProps.Headers.length >= neededCols)
+            return;
+        // Extend headers (A, B, C, etc.) until we reach 'neededCols'
+        var extendedHeaders = __spreadArray([], props.AdditionalProps.Headers, true);
+        for (var i = (_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Headers.length; i < neededCols; i++) {
+            extendedHeaders.push(String.fromCharCode(65 + i)); // 'A', 'B', ...
+        }
+        // Extend every row in 'data' accordingly
+        var extendedData = (_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Data.map(function (row) {
+            var currentCols = row.length - 1; // minus the row index at row[0]
+            if (currentCols < neededCols)
+                return __spreadArray(__spreadArray([], row, true), Array(neededCols - currentCols).fill(''), true);
+            return row;
+        });
+        (_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.SetHeaders(extendedHeaders);
+        props.AdditionalProps.SetData(extendedData);
+    }, [(_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Fields, (_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.Headers, (_h = props.AdditionalProps) === null || _h === void 0 ? void 0 : _h.Data, (_j = props.AdditionalProps) === null || _j === void 0 ? void 0 : _j.HeaderMap]);
+    //Effect to add additionalFields that cant be determined at build time
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields) == null || ((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.length) === 0 || ((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Data.length) === 0 || ((_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.Headers) == null)
+            return;
+        var requiredCount = props.AdditionalProps.Fields.filter(function (f) { return f.Required; }).length;
+        // If we already have enough columns, do nothing
+        if (((_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Headers.length) >= requiredCount)
+            return;
+        // Extend 'headers' array (e.g., "A", "B", "C"...)
+        var extendedHeaders = __spreadArray([], props.AdditionalProps.Headers, true);
+        for (var i = (_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Headers.length; i < requiredCount; i++) {
+            extendedHeaders.push(String.fromCharCode(65 + i)); // 'A', 'B', 'C', ...
+        }
+        // Extend each row in 'data' with blank strings for the new columns
+        var extendedData = (_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.Data.map(function (row) {
+            // row already has an index at row[0], plus (headers.length - 1) columns
+            var neededCols = requiredCount - (row.length - 1);
+            if (neededCols > 0) {
+                return __spreadArray(__spreadArray([], row, true), Array(neededCols).fill(''), true);
+            }
+            return row;
+        });
+        (_h = props.AdditionalProps) === null || _h === void 0 ? void 0 : _h.SetHeaders(extendedHeaders);
+        (_j = props.AdditionalProps) === null || _j === void 0 ? void 0 : _j.SetData(extendedData);
+    }, [(_k = props.AdditionalProps) === null || _k === void 0 ? void 0 : _k.Fields, (_l = props.AdditionalProps) === null || _l === void 0 ? void 0 : _l.Headers, (_m = props.AdditionalProps) === null || _m === void 0 ? void 0 : _m.Data]);
     React.useEffect(function () {
+        var _a;
         if (props.AdditionalProps == null || props.Errors.length !== 0)
             return;
         var mappedData = [];
-        data.forEach(function (row) {
+        (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data.forEach(function (row) {
+            var _a;
             var record = {};
-            headers.forEach(function (header, index) {
-                var _a;
-                var mappedField = headerMap.get(header);
+            (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Headers.forEach(function (header, index) {
+                var _a, _b;
+                var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
                 if (mappedField == null)
                     return;
-                var field = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields.find(function (f) { return f.Field === mappedField; });
+                var field = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.find(function (f) { return f.Field === mappedField; });
                 if (field == null)
                     return;
                 var value = row[index + 1];
@@ -173,35 +268,46 @@ function CsvPipelineEditStep(props) {
             mappedData.push(record);
         });
         props.SetData(mappedData);
-    }, [data, headers, headerMap, (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields, props.Errors]);
+    }, [(_o = props.AdditionalProps) === null || _o === void 0 ? void 0 : _o.Data, (_p = props.AdditionalProps) === null || _p === void 0 ? void 0 : _p.Headers, (_q = props.AdditionalProps) === null || _q === void 0 ? void 0 : _q.HeaderMap, (_r = props.AdditionalProps) === null || _r === void 0 ? void 0 : _r.Fields, props.Errors]);
     var getFieldSelect = React.useCallback(function (header) {
-        var _a;
+        var _a, _b, _c;
         if (props.AdditionalProps == null || ((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields.length) === 0)
             return;
-        var field = headerMap.get(header);
-        var updateMap = function (head, val) { return setHeaderMap(new Map(headerMap).set(head, val)); };
-        var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === field; });
-        var help = (matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help) != null ? React.createElement("p", { style: { whiteSpace: 'nowrap' } },
-            "=", matchedField === null || matchedField === void 0 ? void 0 :
-            matchedField.Help) : undefined;
-        return React.createElement(react_forms_1.Select, { Record: { Header: header, Value: field }, EmptyOption: true, Options: props.AdditionalProps.Fields.map(function (field) { return ({ Value: field.Field, Label: field.Label }); }), Field: "Value", Setter: function (record) { return updateMap(record.Header, record.Value); }, Label: ' ', Help: help });
-    }, [(_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields, headerMap]);
-    var handleValueChange = function (rowIndex, colIndex, value) {
-        setData(function (prevData) {
-            var newData = __spreadArray([], prevData, true);
-            newData[rowIndex][colIndex] = value;
-            return newData;
+        var field = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap.get(header);
+        var usedFields = Array.from((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.HeaderMap.entries())
+            .filter(function (_a) {
+            var mappedHeader = _a[0], mappedField = _a[1];
+            return mappedHeader !== header && mappedField != null;
+        })
+            .map(function (_a) {
+            var mappedField = _a[1];
+            return mappedField;
         });
-    };
+        var selectOptions = props.AdditionalProps.Fields
+            .filter(function (f) { return !usedFields.includes(f.Field) || f.Field === field; })
+            .map(function (f) { return ({ Value: f.Field, Label: f.Label }); });
+        var updateMap = function (head, val) { var _a, _b; return (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.SetHeaderMap(new Map((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap).set(head, val)); };
+        var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === field; });
+        var help = (matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help) != null ? matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help : undefined;
+        return React.createElement(react_forms_1.Select, { Record: { Header: header, Value: field }, EmptyOption: true, Label: ' ', Help: help, Options: selectOptions, Field: "Value", Setter: function (record) { return updateMap(record.Header, record.Value); } });
+    }, [(_s = props.AdditionalProps) === null || _s === void 0 ? void 0 : _s.Fields, (_t = props.AdditionalProps) === null || _t === void 0 ? void 0 : _t.HeaderMap]);
+    var handleValueChange = React.useCallback(function (rowIndex, colIndex, value) {
+        var _a, _b, _c;
+        var data = __spreadArray([], ((_b = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data) !== null && _b !== void 0 ? _b : []), true);
+        data[rowIndex][colIndex] = value;
+        (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.SetData(data);
+    }, [(_u = props.AdditionalProps) === null || _u === void 0 ? void 0 : _u.Data]);
     var handleRowDelete = function (rowIndex) {
-        var newData = __spreadArray([], data, true);
+        var _a, _b, _c;
+        var newData = __spreadArray([], ((_b = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data) !== null && _b !== void 0 ? _b : []), true);
         newData.splice(rowIndex, 1);
-        setData(newData);
+        (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.SetData(newData);
     };
     var getHeader = function (header) {
+        var _a;
         if (props.AdditionalProps == null)
             return;
-        var mappedField = headerMap.get(header);
+        var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
         if (mappedField == null)
             return header;
         var matchedField = props.AdditionalProps.Fields.find(function (field) { return field.Field === mappedField; });
@@ -225,31 +331,33 @@ function CsvPipelineEditStep(props) {
                                     React.createElement("p", { style: { whiteSpace: 'nowrap' } }, isCSVMissingDataCells ? 'Missing data cells were added to meet the number of required fields.' : 'Missing headers were added to meet the number of required fields.'))))) : null,
                         React.createElement("div", { className: 'row flex-grow-1', style: { overflowY: 'hidden' } },
                             React.createElement("div", { className: 'col-12 h-100' },
-                                React.createElement(react_table_1.ConfigurableTable, { Data: pagedData, SortKey: '', Ascending: false, OnSort: function () { }, KeySelector: function (data) { return data[0]; }, TheadStyle: { width: '100%', display: 'table-header-group', }, TbodyStyle: { width: '100%', display: 'block', height: '100%' }, RowStyle: { display: 'table-row', width: '100%', height: 'auto' }, TableStyle: { width: '100%', height: '100%', tableLayout: 'fixed', marginBottom: 0, display: 'block' }, TableClass: 'table', ModalZIndex: 9995 },
-                                    headers.map(function (header, i) {
-                                        return React.createElement(react_table_1.ConfigurableColumn, { Key: header, Label: header, Default: true },
-                                            React.createElement(react_table_1.Column, { Key: header, Field: i + 1, AllowSort: false, Content: function (_a) {
-                                                    var item = _a.item, field = _a.field;
-                                                    if (props.AdditionalProps == null)
-                                                        return;
-                                                    var mappedField = headerMap.get(header);
-                                                    var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === mappedField; });
-                                                    if (matchedField == null)
-                                                        return item[field];
-                                                    var value = item[field];
-                                                    var isValid = matchedField.Validate(value);
-                                                    var feedback = matchedField.Feedback;
-                                                    var allValues = {};
-                                                    headers.forEach(function (header, index) {
-                                                        var mappedField = headerMap.get(header);
-                                                        if (mappedField != null) {
-                                                            allValues[mappedField] = item[index + 1];
-                                                        }
-                                                    });
-                                                    return (React.createElement(matchedField.EditComponent, { Value: value, SetValue: function (val) { return handleValueChange(parseInt(item[0]), field, val); }, Valid: isValid, Feedback: feedback, AllRecordValues: allValues }));
-                                                } },
-                                                getHeader(header),
-                                                getFieldSelect(header)));
+                                React.createElement(react_table_1.Table, { Data: pagedData, key: (_v = props.AdditionalProps) === null || _v === void 0 ? void 0 : _v.Headers.join(','), SortKey: '', Ascending: false, OnSort: function () { }, KeySelector: function (data) { return data[0]; }, TableClass: 'table', TableStyle: { height: '100%', width: ((_x = (_w = props.AdditionalProps) === null || _w === void 0 ? void 0 : _w.Headers.length) !== null && _x !== void 0 ? _x : 0) * 150 } }, (_y = props.AdditionalProps) === null || _y === void 0 ? void 0 :
+                                    _y.Headers.map(function (header, i) {
+                                        return React.createElement(react_table_1.Column, { Key: header, Field: i + 1, AllowSort: false, Content: function (_a) {
+                                                var _b, _c;
+                                                var item = _a.item, field = _a.field;
+                                                if (props.AdditionalProps == null)
+                                                    return;
+                                                var mappedField = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap.get(header);
+                                                var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === mappedField; });
+                                                if (matchedField == null)
+                                                    return item[field];
+                                                var value = item[field];
+                                                var isValid = matchedField.Validate(value);
+                                                var feedback = matchedField.Feedback;
+                                                var selectOptions = matchedField.SelectOptions;
+                                                var allValues = {};
+                                                (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Headers.forEach(function (header, index) {
+                                                    var _a;
+                                                    var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
+                                                    if (mappedField != null) {
+                                                        allValues[mappedField] = item[index + 1];
+                                                    }
+                                                });
+                                                return (React.createElement(matchedField.EditComponent, { Value: value, SetValue: function (val) { return handleValueChange(parseInt(item[0]), field, val); }, Valid: isValid, Feedback: feedback, AllRecordValues: allValues, SelectOptions: selectOptions }));
+                                            } },
+                                            getHeader(header),
+                                            getFieldSelect(header));
                                     }),
                                     React.createElement(react_table_1.Column, { Key: 'delete', Field: 0, AllowSort: false, RowStyle: { textAlign: 'right' }, Content: function (_a) {
                                             var item = _a.item;
@@ -258,7 +366,7 @@ function CsvPipelineEditStep(props) {
                                         } }, '')))),
                         React.createElement("div", { className: 'row' },
                             React.createElement("div", { className: 'col-12' },
-                                React.createElement(react_table_2.Paging, { Current: page + 1, Total: totalPages, SetPage: function (p) { return setPage(p - 1); } }))))
+                                React.createElement(react_table_1.Paging, { Current: page + 1, Total: totalPages, SetPage: function (p) { return setPage(p - 1); } }))))
                     : null)))));
 }
 //Helper functions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.124",
+  "version": "0.0.126",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,12 +44,12 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.78",
-    "@gpa-gemstone/gpa-symbols": "0.0.45",
-    "@gpa-gemstone/helper-functions": "0.0.36",
-    "@gpa-gemstone/react-forms": "1.1.77",
-    "@gpa-gemstone/react-interactive": "1.0.137",
-    "@gpa-gemstone/react-table": "1.2.58",
+    "@gpa-gemstone/application-typings": "0.0.80",
+    "@gpa-gemstone/gpa-symbols": "0.0.46",
+    "@gpa-gemstone/helper-functions": "0.0.37",
+    "@gpa-gemstone/react-forms": "1.1.79",
+    "@gpa-gemstone/react-interactive": "1.0.139",
+    "@gpa-gemstone/react-table": "1.2.60",
     "@reduxjs/toolkit": "1.8.3",
     "crypto-js": "^4.2.0",
     "moment": "^2.29.4",