fuse-importer 0.26.7 → 0.26.9

package/lib/esm/Importer/data/index.js

@@ -18,6 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import { transformRecord } from "../../Importer/common/Spreadsheet/transformation";
 import { FieldTypes, } from "../../types";
 import { parseValue } from "../common/Spreadsheet/common";
 var MINIMUM_ROW_COUNT = 20;
@@ -54,7 +55,7 @@ export var recordListToDataSet = function (data, fields) {
         return dataSet;
     }, {});
 };
-var transformToRecords = function (_a) {
+export var transformToRecords = function (_a) {
     var templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
     var matchedColumnsLabels = Object.keys(templateHeaderMatchings)
         .filter(function (label) { return !!templateHeaderMatchings[label]; })
@@ -84,17 +85,14 @@ var transformToRecords = function (_a) {
         });
         return formatRecord ? formatRecord(record) : record;
     };
-    return uploadedData.slice(1).map(getRecord);
+    return uploadedData.map(getRecord);
 };
 export var getPreviewDataSet = function (_a) {
     var uploadedData = _a.uploadedData;
-    var getFirstRowLen = function () {
-        if (uploadedData.length > 0 && Array.isArray(uploadedData[0])) {
-            return uploadedData[0].length;
-        }
-        return 0;
-    };
-    var fields = new Array(getFirstRowLen()).fill(null).map(function (_, i) {
+    var rowLen = 0;
+    for (var i = 0; i < uploadedData.length; i++)
+        rowLen = Math.max(rowLen, uploadedData[i].length);
+    var fields = new Array(rowLen).fill(null).map(function (_, i) {
         var key = String.fromCharCode(65 + i);
         return {
             label: key,
@@ -104,9 +102,7 @@ export var getPreviewDataSet = function (_a) {
         };
     });
     var getInitialDataSet = function () {
-        //Showing only the first 100 rows to improve performance
-        //TODO: Check with Mike
-        var data = uploadedData.slice(0, 100).map(function (row, index) {
+        var data = uploadedData.map(function (row, index) {
             var entry = addMeta({}, index);
             fields.forEach(function (field, index) {
                 entry[field.name] = row[index];
@@ -117,10 +113,9 @@ export var getPreviewDataSet = function (_a) {
     };
     return { fields: fields, initialDataSet: getInitialDataSet() };
 };
-export var getReviewDataSet = function (_a) {
-    var _b;
-    var templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
-    var fields = templateHeaders.map(function (templateHeader) { return ({
+export var getTemplateFields = function (_a) {
+    var templateHeaders = _a.templateHeaders;
+    return templateHeaders.map(function (templateHeader) { return ({
         label: templateHeader.label,
         name: templateHeader.internal_key,
         type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
@@ -128,24 +123,28 @@ export var getReviewDataSet = function (_a) {
         options: templateHeader.values,
         pattern: templateHeader.pattern,
         validations: templateHeader.validations,
+        transformations: templateHeader.transformations,
     }); });
-    var records = transformToRecords({
-        templateHeaderMatchings: templateHeaderMatchings,
-        enumFieldValueMatchings: enumFieldValueMatchings,
-        templateHeaders: templateHeaders,
-        uploadedDataHeaders: uploadedDataHeaders,
-        uploadedData: uploadedData,
-        formatRecord: formatRecord,
-    });
+};
+export var getReviewDataSet = function (_a) {
+    var _b;
+    var records = _a.records, fields = _a.fields;
+    for (var _i = 0, records_1 = records; _i < records_1.length; _i++) {
+        var record = records_1[_i];
+        transformRecord({
+            record: record,
+            fields: fields,
+        });
+    }
     var baseInitialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
     var highestRowIndex = 0;
-    for (var _i = 0, records_1 = records; _i < records_1.length; _i++) {
-        var obj = records_1[_i];
-        if (obj._meta && obj._meta.rowIndex > highestRowIndex) {
-            highestRowIndex = obj._meta.rowIndex;
+    Object.keys(baseInitialDataSet).forEach(function (key) {
+        var record = baseInitialDataSet[key];
+        if (record._meta.rowIndex > highestRowIndex) {
+            highestRowIndex = record._meta.rowIndex;
         }
-    }
+    });
     var emptyRowAtBottom = addMeta({}, highestRowIndex + 1);
     var initialDataSet = __assign(__assign({}, baseInitialDataSet), (_b = {}, _b[emptyRowAtBottom._meta.id] = emptyRowAtBottom, _b));
-    return { fields: fields, initialDataSet: initialDataSet };
+    return { initialDataSet: initialDataSet };
 };

package/lib/esm/Importer/index.js

@@ -20,7 +20,7 @@ var p = function (path) { return "".concat(ACCOUNT_VIEW_PATH).concat(path); };
 export var TEMPLATES_ROUTE = p(ACCOUNT_ROUTES.TEMPLATES);
 var Importer = function (_a) {
     var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose, dynamicColumns = _a.dynamicColumns;
-    return (_jsx(ImporterContextProvider, __assign({ options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns }, { children: _jsx(ImporterWithContext, {}) })));
+    return (_jsx(ImporterContextProvider, __assign({ initialRecords: options.records, options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns }, { children: _jsx(ImporterWithContext, {}) })));
 };
 export * from "./common/Spreadsheet";
 export * from "./common/utils";

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.js

@@ -6,12 +6,13 @@ import { useTranslation } from "react-i18next";
 import { addToast } from "../../../../common/Toast";
 import { useState } from "react";
 export var FilterByErrors = function () {
-    var _a;
-    var _b = useSpreadsheetContext(), errors = _b.errors, fields = _b.fields, selectedErrorToFilter = _b.selectedErrorToFilter, setSelectedErrorToFilter = _b.setSelectedErrorToFilter;
+    var _a, _b;
+    var _c = useSpreadsheetContext(), errors = _c.errors, fields = _c.fields, spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
     var t = useTranslation("review").t;
-    var _c = useState(false), isMenuOpened = _c[0], setIsMenuOpened = _c[1];
+    var _d = useState(false), isMenuOpened = _d[0], setIsMenuOpened = _d[1];
     var prefix = t("table_actions.filter_by_errors.filter_by_errors");
     var search_or_select = t("table_actions.filter_by_errors.search_or_select");
+    var selectedErrorToFilter = ((_a = spreadsheetFilter === null || spreadsheetFilter === void 0 ? void 0 : spreadsheetFilter.byColumn) === null || _a === void 0 ? void 0 : _a.field) || null;
     var getSelectedErrorLabel = function (selectedFieldName) {
         var _a;
         var selectedField = fields.filter(function (field) { return (field === null || field === void 0 ? void 0 : field.name) === selectedFieldName; });
@@ -21,15 +22,18 @@ export var FilterByErrors = function () {
     var onChange = function (selected) {
         if (selected) {
             var label = getSelectedErrorLabel(selected);
+            filterRecordsByFieldErrors(selected);
             addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
         }
-        setSelectedErrorToFilter(selected || "");
+        else {
+            resetSpreadsheetFilter();
+        }
     };
     var uniqueErrors = getUniqueErrors(fields, errors);
     var errorArray = formatErrors(fields, uniqueErrors);
     // the average size of each character in the input (in px)
     var widthPerCharacter = 5.8;
-    var amountOfCharacters = prefix.length + ((_a = getSelectedErrorLabel(selectedErrorToFilter)) === null || _a === void 0 ? void 0 : _a.length);
+    var amountOfCharacters = prefix.length + ((_b = getSelectedErrorLabel(selectedErrorToFilter)) === null || _b === void 0 ? void 0 : _b.length);
     // 24 -> padding + 64px of the X icon area
     var totalWidth = widthPerCharacter * amountOfCharacters + 24 + 64;
     var inputWidth = selectedErrorToFilter ? "".concat(totalWidth, "px") : "fit-content";

package/lib/esm/common/Table/TableActions/RowFilters.d.ts

@@ -0,0 +1 @@
+export declare const RowFilters: () => JSX.Element;

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { Div } from "../../../styled";
+import { useTranslation } from "react-i18next";
+var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"])), function (p) { return p.theme.css.body3; }, function (p) {
+    return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "], ["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "])), function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.white; });
+});
+var Container = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.backgroundInterface; });
+var FilteredDataCount = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"], ["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"])), function (p) { return p.theme.colors.highlight01; }, function (p) { return p.theme.colors.black; });
+var Filter = function (_a) {
+    var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
+    var labelToId = function (label) {
+        return label.toLowerCase().replace(/\s/g, "_") + "_filter";
+    };
+    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+};
+export var RowFilters = function () {
+    var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount;
+    var t = useTranslation("review").t;
+    var all_rows = t("table_actions.filters_by_rows.all_rows");
+    var valid_rows = t("table_actions.filters_by_rows.valid_rows");
+    var invalid_rows = t("table_actions.filters_by_rows.invalid_rows");
+    return (_jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "valid", label: valid_rows, onClick: function () { return filterRecordsByRowType("valid"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); } })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/TableActions/TableActions.js

@@ -27,7 +27,8 @@ import { SearchRows } from "./SearchRows";
 import { ExportData } from "./ExportData";
 import { ButtonActionsContainer, TableActionsContainer, TableActionsContent, } from "./TableActions.styles";
 import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
+import { RowFilters } from "./RowFilters";
 export var TableActions = function (_a) {
     var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
-    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(FilterByErrors, {}), _jsxs(ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }) })));
+    return (_jsx(TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: _jsxs(TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {})] })] }) })));
 };

package/lib/esm/common/Table/TableActions/hooks.d.ts

@@ -14,7 +14,5 @@ interface UseTableActionsProps {
 }
 export declare const useTableActions: ({ setDataSet, setErrors, setWarnings, }: UseTableActionsProps) => {
     deleteRecords: (selectedRecords: string[], errors: BatchValidationErrors, warnings: BatchValidationErrors) => void;
-    filterRecordsBySearchValue: (obj: RecordDataSet, value: string) => {};
-    filterRecordsByError: (obj: RecordDataSet, keyToFilter: string, errors: BatchValidationErrors, fields: Field[]) => {};
 };
 export {};

package/lib/esm/common/Table/TableActions/hooks.js

@@ -22,17 +22,6 @@ var removeItemsFromObject = function (obj, idsToRemove) {
     }
     return newObj;
 };
-var isObject = function (value) {
-    return typeof value === "object" && value !== null && !Array.isArray(value);
-};
-var includesSearchValue = function (value, searchValue) {
-    if (typeof value === "string" || typeof value === "number") {
-        var stringValue = String(value).toLowerCase();
-        var searchValueLower = searchValue.toLowerCase();
-        return stringValue.includes(searchValueLower);
-    }
-    return false;
-};
 export var useTableActions = function (_a) {
     var setDataSet = _a.setDataSet, setErrors = _a.setErrors, setWarnings = _a.setWarnings;
     // Delete records from dataSet and from validations
@@ -46,35 +35,7 @@ export var useTableActions = function (_a) {
             return newDataSet;
         });
     };
-    // Filter records by search value
-    var filterRecordsBySearchValue = function (obj, value) {
-        var filteredObj = {};
-        for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], currentObj = _b[1];
-            if (!isObject(currentObj)) {
-                continue;
-            }
-            var matches = Object.values(currentObj).some(function (propertyValue) {
-                return includesSearchValue(propertyValue, value);
-            });
-            if (matches) {
-                filteredObj[key] = currentObj;
-            }
-        }
-        return filteredObj;
-    };
-    // Filter records by selected column error
-    var filterRecordsByError = function (obj, keyToFilter, errors, fields) {
-        var filteredObj = {};
-        var filteredKeys = Object.keys(errors).filter(function (key) { var _a, _b; return ((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) && errors[key][keyToFilter]; });
-        for (var i = 0; i < filteredKeys.length; i++) {
-            filteredObj[filteredKeys[i]] = obj[filteredKeys[i]];
-        }
-        return filteredObj;
-    };
     return {
         deleteRecords: deleteRecords,
-        filterRecordsBySearchValue: filterRecordsBySearchValue,
-        filterRecordsByError: filterRecordsByError,
     };
 };

package/lib/esm/common/Table/TableView/TableRows/TableRow.d.ts

@@ -7,7 +7,7 @@ type TableViewRowProps = {
     isLast: boolean;
 };
 export declare const TableViewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../styled/utils").CSSProps & TableViewRowProps, never>;
-type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"> & {
+type Props = Pick<TableViewProps, "columns" | "onRowClick"> & {
     row: any;
     rowWidth: number;
     indexI: number;
@@ -15,5 +15,5 @@ type Props = Pick<TableViewProps, "columns" | "onRowClick" | "highlightFirstRow"
     getItemKey?: (row: any) => string;
     isRowSelected?: boolean;
 } & DivCSSProps;
-export declare const TableRow: ({ row, indexI, columns, isLast, highlightFirstRow, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
+export declare const TableRow: ({ row, indexI, columns, isLast, onRowClick, getItemKey, rowWidth, isRowSelected, ...props }: Props) => JSX.Element;
 export {};

package/lib/esm/common/Table/TableView/TableRows/TableRow.js

@@ -40,11 +40,11 @@ export var TableViewRow = styled(Div)(templateObject_3 || (templateObject_3 = __
     return p.isHighlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 3px ", ";\n\n      .input-content {\n        background: transparent;\n        border: none;\n        box-shadow: none;\n\n        &,\n        input {\n          color: ", ";\n        }\n      }\n    "])), p.theme.colors.blue100, p.theme.colors.blue500, p.theme.colors.gray1000);
 });
 export var TableRow = function (_a) {
-    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, highlightFirstRow = _a.highlightFirstRow, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "highlightFirstRow", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
-    var isHighlighted = (indexI === 0 && highlightFirstRow) || isRowSelected;
-    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
+    var row = _a.row, indexI = _a.indexI, columns = _a.columns, isLast = _a.isLast, onRowClick = _a.onRowClick, getItemKey = _a.getItemKey, rowWidth = _a.rowWidth, _b = _a.isRowSelected, isRowSelected = _b === void 0 ? false : _b, props = __rest(_a, ["row", "indexI", "columns", "isLast", "onRowClick", "getItemKey", "rowWidth", "isRowSelected"]);
+    var isHighlighted = isRowSelected;
+    var key = getItemKey ? getItemKey(row) : "".concat(indexI);
+    return (_jsx(TableViewRow, __assign({ "data-test-id": "row-".concat(indexI), id: "row-id-".concat(key), dflex: true }, { isHighlighted: isHighlighted, isLast: isLast }, props, { children: columns.map(function (column, indexJ) {
             var Content = column.Content;
-            var key = getItemKey ? getItemKey(row) : "".concat(indexI);
             var resolvedKey = "column-".concat(indexJ, "-row-").concat(key);
             var columnWidthPercentages = getColumnWidthsPx(columns, rowWidth);
             var columnWidthPercentage = columnWidthPercentages[indexJ];

package/lib/esm/common/Table/TableView/TableRows/index.js

@@ -10,17 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CSS } from "@dnd-kit/utilities";
 import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { Div } from "../../../../styled/utils";
-import { TableRow } from "./TableRow";
 import React from "react";
 import { areEqual } from "react-window";
 import { useSpreadsheetContext } from "../../../../Importer";
+import { TableRow } from "./TableRow";
 var Row = React.memo(function (_a) {
     var _b;
     var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
-    var items = data.items, rowWidth = data.rowWidth, isDraggable = data.isDraggable, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
+    var items = data.items, rowWidth = data.rowWidth, isDraggable = data.isDraggable, onRowClick = data.onRowClick, columns = data.columns, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
     var item = items[rowIndex];
     var selectedRows = useSpreadsheetContext().selectedRows;
     var isRowSelected = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes((_b = item === null || item === void 0 ? void 0 : item._meta) === null || _b === void 0 ? void 0 : _b.id);
@@ -28,7 +28,10 @@ var Row = React.memo(function (_a) {
     var containerProps = { style: style };
     if (isDraggable)
         containerProps = __assign(__assign({}, containerProps), { item: item });
-    return (_jsx(Container, __assign({}, containerProps, { children: _jsx(TableRow, { rowWidth: rowWidth, columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false }) })));
+    return (_jsx(Container, __assign({}, containerProps, { children: _jsx(TableRow, { rowWidth: rowWidth, columns: columns, onRowClick: onRowClick, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey, isRowSelected: isRowSelected || false, className: rowIndex <
+                items.findIndex(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item._meta) === null || _a === void 0 ? void 0 : _a.id) === (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0]); })
+                ? "before-selected-row"
+                : "" }) })));
 }, areEqual);
 var DraggableRow = React.memo(function (_a) {
     var item = _a.item, baseStyle = _a.style, children = _a.children;

package/lib/esm/common/Table/TableView/index.d.ts

@@ -8,4 +8,4 @@ type TableViewWrapperProps = {
     checkboxColumnWidth?: number;
 };
 export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, setSortBy, rowWidthScalingFactor, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, isDraggable, checkboxColumnWidth, isFiltering, ...props }: TableViewProps) => JSX.Element>;

package/lib/esm/common/Table/TableView/index.js

@@ -66,7 +66,7 @@ var buildGridStyles = function (rowWidthScalingFactor) {
     return gridStyles;
 };
 export var TableView = React.memo(function (_a) {
-    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidthScalingFactor, rowWidthScalingFactor = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.isDraggable, isDraggable = _o === void 0 ? false : _o, checkboxColumnWidth = _a.checkboxColumnWidth, _p = _a.isFiltering, isFiltering = _p === void 0 ? false : _p, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidthScalingFactor", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
+    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.setSortBy, setSortBy = _e === void 0 ? null : _e, _f = _a.rowWidthScalingFactor, rowWidthScalingFactor = _f === void 0 ? 1 : _f, onSectionRendered = _a.onSectionRendered, _g = _a.tableHeadersHeight, tableHeadersHeight = _g === void 0 ? defaultTableHeaderHeightPx : _g, _h = _a.rowHeight, rowHeight = _h === void 0 ? defaultTableRowHeightPx : _h, _j = _a.h, h = _j === void 0 ? 500 : _j, _k = _a.onTableScroll, onTableScroll = _k === void 0 ? null : _k, _l = _a.getItemKey, getItemKey = _l === void 0 ? null : _l, _m = _a.isDraggable, isDraggable = _m === void 0 ? false : _m, checkboxColumnWidth = _a.checkboxColumnWidth, _o = _a.isFiltering, isFiltering = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
     var headerContainerRef = useRef();
     var onScroll = function (_a) {
         var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
@@ -107,7 +107,6 @@ export var TableView = React.memo(function (_a) {
                             rowWidth: rowWidth,
                             onRowClick: onRowClick,
                             columns: columns,
-                            highlightFirstRow: highlightFirstRow,
                             rowHeight: rowHeight,
                             getItemKey: getItemKey,
                         },

package/lib/esm/common/Table/TableView/types.d.ts

@@ -22,7 +22,6 @@ export type TableViewProps = {
     setSortBy?: React.Dispatch<React.SetStateAction<SortBy>>;
     isLoading?: boolean;
     pageSize?: number;
-    highlightFirstRow?: boolean;
     rowWidthScalingFactor?: number;
     rowHeight?: number;
     tableHeadersHeight?: number;

package/lib/esm/common/columnsTransformations.d.ts

@@ -0,0 +1,15 @@
+import { TransformationOptionKeys, TransformationTypes } from "../types";
+export type TransformationOption = {
+    type: "text" | "number";
+    key: TransformationOptionKeys;
+    tooltip: string;
+};
+export type Transformation = {
+    value: TransformationTypes;
+    label: string;
+    options?: TransformationOption[];
+};
+export declare const transformationsByColumnType: {
+    [key: string]: Transformation[];
+};
+export declare const transformationsByType: {};

package/lib/esm/common/columnsTransformations.js

@@ -0,0 +1,92 @@
+var commonDateAndTimeTransformations = [
+    {
+        value: "autoformat",
+        label: "Autoformat",
+    },
+];
+var stringTransformations = [
+    {
+        value: "sentence_case",
+        label: "Sentence Case",
+    },
+    {
+        value: "capitalize",
+        label: "Capitalize",
+    },
+    {
+        value: "uppercase",
+        label: "Uppercase",
+    },
+    {
+        value: "lowercase",
+        label: "Lowercase",
+    },
+    {
+        value: "trim_whitespace",
+        label: "Trim Whitespace",
+    },
+];
+var urlTransformations = [
+    {
+        value: "prefix",
+        label: "Prefix",
+        options: [
+            {
+                key: "prefix",
+                type: "text",
+                tooltip: "Add Prefix (e.g., 'example.com' becomes 'https://example.com')",
+            },
+        ],
+    },
+];
+var floatTransformations = [
+    {
+        value: "number_of_decimals",
+        label: "Number of Decimals",
+        options: [
+            {
+                key: "number_of_decimals",
+                type: "number",
+                tooltip: "Set Number of Decimals (e.g., '10.567' becomes '10.57' with 2 decimals)",
+            },
+        ],
+    },
+];
+var integerTransformations = [
+    {
+        value: "round",
+        label: "Round",
+    },
+    {
+        value: "floor",
+        label: "Floor",
+    },
+    {
+        value: "ceiling",
+        label: "Ceiling",
+    },
+];
+var enumTransformations = [
+    {
+        value: "autodetect",
+        label: "Autodetect",
+    },
+];
+export var transformationsByColumnType = {
+    string: stringTransformations,
+    integer: integerTransformations,
+    float: floatTransformations,
+    enum: enumTransformations,
+    url: urlTransformations,
+    date: commonDateAndTimeTransformations,
+    datetime: commonDateAndTimeTransformations,
+    time: commonDateAndTimeTransformations,
+};
+// the final object will look like this:
+// { autodetect: { value: "autodetect", label: "Autodetect" }, ... }
+export var transformationsByType = Object.values(transformationsByColumnType)
+    .reduce(function (acc, arr) { return acc.concat(arr); }, [])
+    .reduce(function (result, p) {
+    result[p.value] = p;
+    return result;
+}, {});

package/lib/esm/common/columnsValidations.js

@@ -44,7 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as yup from "yup";
-import { FieldTypes, mutableValidationTypes, } from "../types";
+import { FieldTypes, mutableValidationTypes, mutableTransformationTypes, } from "../types";
 var commonValidations = [
     {
         value: "regex",
@@ -252,7 +252,7 @@ export var allowedPatterns = {
 };
 export var patternsColumnTypes = Object.keys(allowedPatterns);
 var iso8601Regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
-var schema = yup
+var validationsSchema = yup
     .mixed()
     .test("validations", "Invalid validations", function (value) {
     var isAnArray = Array.isArray(value);
@@ -263,6 +263,13 @@ var schema = yup
             var optionsPropertyIsNotRequiredFor = [
                 "unique_case_insensitive",
                 "unique_case_sensitive",
+                "integer",
+                "boolean",
+                "odd",
+                "even",
+                "email",
+                "url",
+                "float",
             ];
             if (mutableValidationTypes.includes(validation_type)) {
                 if (optionsPropertyIsNotRequiredFor.includes(validation_type)) {
@@ -302,12 +309,85 @@ var schema = yup
     }
     return true;
 });
+var transformationsOptionsPropIsRequiredFor = [
+    "prefix",
+    "number_of_decimals",
+];
+var transformationsSchema = yup
+    .array()
+    .of(yup.object().shape({
+    transformation_type: yup
+        .string()
+        .oneOf(mutableTransformationTypes)
+        .required(),
+    options: yup.mixed().when("transformation_type", {
+        is: function (type) {
+            return transformationsOptionsPropIsRequiredFor.includes(type);
+        },
+        then: yup
+            .object()
+            .required("Options is required for this transformation type"),
+    }),
+}))
+    .test("transformations", "Invalid transformations", function (value, context) {
+    var isAnArray = Array.isArray(value);
+    if (isAnArray) {
+        for (var _i = 0, value_2 = value; _i < value_2.length; _i++) {
+            var transformation = value_2[_i];
+            var transformation_type = transformation.transformation_type;
+            // if user is selecting autoformat (for date, datetime and time) but has not
+            // defined pattern, it should throw an error
+            if (transformation_type === "autoformat") {
+                var parentRecord = context.parent;
+                if (!(parentRecord === null || parentRecord === void 0 ? void 0 : parentRecord.pattern)) {
+                    var columnType = parentRecord.column_type;
+                    var availablePatternsForColumnType = null;
+                    var getAvailablePatterns = function (patterns) {
+                        var patternValues = patterns.map(function (pattern) { return pattern.value; });
+                        return patternValues.join(", ");
+                    };
+                    switch (columnType) {
+                        case "date":
+                            availablePatternsForColumnType = getAvailablePatterns(datePatterns);
+                            break;
+                        case "datetime":
+                            availablePatternsForColumnType = getAvailablePatterns(dateTimePatterns);
+                            break;
+                        case "time":
+                            availablePatternsForColumnType = getAvailablePatterns(timePatterns);
+                            break;
+                    }
+                    return this.createError({
+                        path: "transformations",
+                        message: "The selected transformation type requires you to specify a pattern to your column. Available patterns for your column_type: ".concat(availablePatternsForColumnType),
+                    });
+                }
+            }
+            if (!mutableTransformationTypes.includes(transformation_type)) {
+                return this.createError({
+                    path: "transformations",
+                    message: "".concat(transformation_type, " is not a valid transformation type. Please check the values you inserted."),
+                });
+            }
+        }
+        return true;
+    }
+    var arrayIsNotDefined = !["undefined", "null"].includes(typeof value);
+    if (arrayIsNotDefined && !isAnArray) {
+        return this.createError({
+            path: "validations",
+            message: "Validations must be an array",
+        });
+    }
+    return true;
+});
 var columnSchema = yup.object().shape({
     column_type: yup.string().oneOf(availableColumnTypes).required(),
     internal_key: yup.string().required(),
     label: yup.string().required(),
     required: yup.boolean().required(),
-    validations: schema,
+    validations: validationsSchema,
+    transformations: transformationsSchema,
 });
 var dateColumnSchema = columnSchema.shape({
     pattern: yup.string().oneOf(datePatterns.map(function (p) { return p.value; })),

package/lib/esm/common/index.d.ts

@@ -24,3 +24,4 @@ export * from "./Spinner";
 export * from "./TooltipProvider";
 export * from "./ConfirmationModal";
 export * from "./columnsValidations";
+export * from "./columnsTransformations";

package/lib/esm/common/index.js

@@ -41,4 +41,5 @@ export * from "./Spinner";
 export * from "./TooltipProvider";
 export * from "./ConfirmationModal";
 export * from "./columnsValidations";
+export * from "./columnsTransformations";
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;