fuse-importer 0.1.6-testing → 0.1.8-testing

package/lib/esm/Importer/common/Spreadsheet/transformation/transformators/dateTimeAutoformatUtils.js

@@ -0,0 +1,231 @@
+import { DateTime } from "luxon";
+var MONTH_NAMES = [
+    "january",
+    "february",
+    "march",
+    "april",
+    "may",
+    "june",
+    "july",
+    "august",
+    "september",
+    "october",
+    "november",
+    "december",
+];
+var MONTH_ABBREVIATIONS = [
+    "jan",
+    "feb",
+    "mar",
+    "apr",
+    "may",
+    "jun",
+    "jul",
+    "aug",
+    "sep",
+    "oct",
+    "nov",
+    "dec",
+];
+var DAY_NAMES = [
+    "sunday",
+    "monday",
+    "tuesday",
+    "wednesday",
+    "thursday",
+    "friday",
+    "saturday",
+];
+var DAY_ABBREVIATIONS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+var tryParseCommonDateFormats = function (input) {
+    var _a, _b, _c;
+    var trimmedInput = input.trim();
+    var len = trimmedInput.length;
+    if (len < 6 || len > 10)
+        return null;
+    var parts = input.split(/[-/.]/);
+    if (parts.length !== 3)
+        return null;
+    var _d = parts.map(Number), first = _d[0], second = _d[1], third = _d[2];
+    var year, month, day;
+    if (parts[2].length === 4) {
+        _a = [first, second, third], month = _a[0], day = _a[1], year = _a[2];
+    }
+    else if (parts[0].length === 4) {
+        _b = [first, second, third], year = _b[0], month = _b[1], day = _b[2];
+    }
+    else if (parts[2].length === 2) {
+        // Handles the case where year is two digits
+        _c = [first, second, third], month = _c[0], day = _c[1], year = _c[2];
+        year += year < 50 ? 2000 : 1900; // Convert to 4 digits
+    }
+    else {
+        return null; // Unknown format
+    }
+    if (year >= 0 && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+        var dt = DateTime.fromObject({ day: day, month: month, year: year });
+        return dt.isValid ? dt : null;
+    }
+    return null;
+};
+export var parseDateFromUserInput = function (userInput) {
+    var datePart = userInput;
+    var hasTimePart = userInput.indexOf(":") !== -1 && userInput.split(":").length > 1;
+    if (hasTimePart) {
+        var parts = userInput.trim().split(" ");
+        datePart =
+            parts.length === 2
+                ? parts[0].indexOf(":") !== -1
+                    ? parts[1]
+                    : parts[0]
+                : userInput;
+    }
+    var commonFormatResult = tryParseCommonDateFormats(datePart);
+    if (commonFormatResult)
+        return commonFormatResult;
+    var cleanedInput = datePart
+        .trim()
+        .split(/[\s;|:.\/-]+/)
+        .filter(Boolean)
+        .map(function (word) { return word.toLowerCase(); });
+    var possibleDay = null, possibleMonth = null, possibleYear = null;
+    for (var _i = 0, cleanedInput_1 = cleanedInput; _i < cleanedInput_1.length; _i++) {
+        var word = cleanedInput_1[_i];
+        if (DAY_NAMES.includes(word) || DAY_ABBREVIATIONS.includes(word))
+            continue;
+        var num = parseInt(word, 10);
+        if (!possibleDay && num > 0 && num <= 31) {
+            possibleDay = num;
+            continue;
+        }
+        if (!possibleMonth) {
+            var monthIndex = MONTH_NAMES.indexOf(word);
+            if (monthIndex === -1)
+                monthIndex = MONTH_ABBREVIATIONS.indexOf(word);
+            if (monthIndex !== -1) {
+                possibleMonth = monthIndex + 1;
+                continue;
+            }
+            else if (num > 0 && num <= 12) {
+                possibleMonth = num;
+                continue;
+            }
+        }
+        if (!possibleYear && num >= 0) {
+            possibleYear = num < 100 ? num + (num < 50 ? 2000 : 1900) : num;
+            continue;
+        }
+    }
+    if (possibleDay && possibleMonth && possibleYear) {
+        return DateTime.fromObject({
+            day: possibleDay,
+            month: possibleMonth,
+            year: possibleYear,
+        });
+    }
+    return null;
+};
+export var parseTimeFromUserInput = function (input) {
+    var cleanedInput = input
+        .trim()
+        .replace(/\s*:\s*/g, ":")
+        .replace(/\s+(AM|PM|am|pm)\s*$/, " $1");
+    var len = cleanedInput.length;
+    if (len < 4 || len > 16)
+        return null;
+    var hour = 0, minute = 0, second = 0, millisecond = 0;
+    var meridiem = null;
+    var parts = cleanedInput.split(" ");
+    if (parts.length > 2)
+        return null;
+    if (parts.length === 2) {
+        meridiem = parts[1].toUpperCase();
+        if (meridiem !== "AM" && meridiem !== "PM")
+            return null;
+    }
+    var timeParts = parts[0].split(":");
+    if (timeParts.length < 2 || timeParts.length > 3)
+        return null;
+    hour = parseInt(timeParts[0], 10);
+    minute = parseInt(timeParts[1], 10);
+    if (isNaN(hour) || isNaN(minute))
+        return null;
+    if (timeParts.length === 3) {
+        var secondParts = timeParts[2].split("."); // Split to consider milliseconds
+        second = parseInt(secondParts[0], 10);
+        if (secondParts.length === 2) {
+            millisecond = parseInt(secondParts[1], 10);
+        }
+        if (isNaN(second) || isNaN(millisecond))
+            return null;
+    }
+    if (hour < 0 ||
+        hour > 23 ||
+        minute < 0 ||
+        minute > 59 ||
+        second < 0 ||
+        second > 59 ||
+        millisecond < 0 ||
+        millisecond > 999)
+        return null;
+    if (meridiem === "PM" && hour < 12) {
+        hour += 12;
+    }
+    else if (meridiem === "AM" && hour === 12) {
+        hour = 0;
+    }
+    var dateTime = DateTime.fromObject({ hour: hour, minute: minute, second: second, millisecond: millisecond });
+    return dateTime.isValid ? dateTime : null;
+};
+export var parseTimeFromDateTimeorTimeInput = function (userInput) {
+    var res1 = parseTimeFromUserInput(userInput);
+    if (res1)
+        return res1;
+    var res2 = parseDateTimeFromUserInput(userInput);
+    if (res2)
+        return res2;
+    return null;
+};
+export var parseDateTimeFromUserInput = function (userInput) {
+    var fromISO = DateTime.fromISO(userInput);
+    if (fromISO.isValid && userInput.includes("T"))
+        return fromISO;
+    var cleanedInput = userInput.trim().replace(/\s+/g, " ").toLowerCase();
+    var words = cleanedInput.split(" ");
+    var datePart = "";
+    var timePart = "";
+    var meridiem = "";
+    for (var _i = 0, words_1 = words; _i < words_1.length; _i++) {
+        var word = words_1[_i];
+        if (word === "am" || word === "pm") {
+            meridiem = word.toUpperCase();
+            continue;
+        }
+        if (word.includes(":")) {
+            timePart = word;
+            continue;
+        }
+        datePart = "".concat(datePart, " ").concat(word);
+    }
+    if (meridiem) {
+        timePart = "".concat(timePart, " ").concat(meridiem);
+    }
+    var dateObject = parseDateFromUserInput(datePart.trim());
+    if (!dateObject || !dateObject.isValid)
+        return null;
+    var timeObject = parseTimeFromUserInput(timePart.trim());
+    if (!timeObject || !timeObject.isValid)
+        return null;
+    if (!timeObject || !timeObject.isValid)
+        return null;
+    var combinedDateTime = DateTime.fromObject({
+        year: dateObject.year,
+        month: dateObject.month,
+        day: dateObject.day,
+        hour: timeObject.hour,
+        minute: timeObject.minute,
+        second: timeObject.second,
+        millisecond: timeObject.millisecond,
+    });
+    return combinedDateTime.isValid ? combinedDateTime : null;
+};

package/lib/esm/Importer/common/Spreadsheet/transformation/{transformators.d.ts → transformators/index.d.ts}

@@ -1,18 +1,18 @@
-import { Field, FieldTransformation } from "../../../../types";
+import { Field, FieldTransformation } from "../../../../../types";
 export type FieldTransformator = (fieldValue: any, transformation?: FieldTransformation, fieldOptions?: Field) => {
     transformationWasNeeded: boolean;
     original: any;
     transformed: any;
 };
-export type DateTimeTransformator = (fieldValue: any, transformation?: FieldTransformation, fieldOptions?: Field, possibleDateFormats?: string[]) => {
+export type FieldTransformations = Partial<{
+    [key: string]: FieldTransformator;
+}>;
+export declare const isTransformationNeeded: (fieldValue: any, transformedValue: any) => {
     transformationWasNeeded: boolean;
     original: any;
     transformed: any;
 };
-export type FieldTransformations = Partial<{
-    [key: string]: FieldTransformator | DateTimeTransformator;
-}>;
 export declare const datesDateTimesAndTimesTransformations: FieldTransformations;
 export declare const fieldTransformations: {
-    [x: string]: FieldTransformator | DateTimeTransformator;
+    [x: string]: FieldTransformator;
 };

package/lib/esm/Importer/common/Spreadsheet/transformation/{transformators.js → transformators/index.js}

@@ -9,11 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { DateTime } from "luxon";
-var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
-    transformationWasNeeded: fieldValue !== transformedValue,
+import { parseDateFromUserInput, parseDateTimeFromUserInput, parseTimeFromDateTimeorTimeInput, } from "./dateTimeAutoformatUtils";
+export var isTransformationNeeded = function (fieldValue, transformedValue) { return ({
+    transformationWasNeeded: !!transformedValue
+        ? fieldValue !== transformedValue
+        : false,
     original: fieldValue,
-    transformed: fieldValue === transformedValue ? null : transformedValue,
+    transformed: fieldValue === transformedValue || transformedValue === undefined
+        ? null
+        : transformedValue,
 }); };
 var isNotANumber = function (fieldValue) {
     return fieldValue === null || fieldValue === undefined || isNaN(fieldValue);
@@ -79,49 +83,24 @@ var stringFieldTransformations = {
         return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
-var parseDate = function (date, possibleFormats) {
-    if (!date)
-        return null;
-    for (var i = 0; i < possibleFormats.length; i++) {
-        var format = possibleFormats[i];
-        try {
-            var currentDate = DateTime.fromFormat(date, format, { zone: "utc" });
-            if (currentDate.isValid) {
-                return currentDate;
-            }
-        }
-        catch (error) {
-            return null;
-        }
-    }
-    return null;
-};
 export var datesDateTimesAndTimesTransformations = {
-    autoformat: function (fieldValue, _, fieldOptions, possibleDateFormats) {
-        var cleanFieldValue = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.replace(/"/g, "");
-        var normalizedFieldValue = cleanFieldValue === null || cleanFieldValue === void 0 ? void 0 : cleanFieldValue.replace(/-/g, "/");
-        var isUnixTimestamp = /^\d+$/.test(normalizedFieldValue);
-        var luxonDate = isUnixTimestamp
-            ? DateTime.fromSeconds(Number(normalizedFieldValue))
-            : parseDate(normalizedFieldValue, possibleDateFormats);
-        var pattern = fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.pattern;
-        var defaultObj = {
-            transformationWasNeeded: false,
-            original: fieldValue,
-            transformed: null,
-        };
-        if (!fieldValue || !pattern || !luxonDate || isNaN(luxonDate.toSeconds())) {
-            return defaultObj;
-        }
-        if (!luxonDate.isValid) {
-            return defaultObj;
-        }
-        var transformedValue = luxonDate.toFormat(pattern);
-        return {
-            transformationWasNeeded: fieldValue !== transformedValue,
-            original: fieldValue,
-            transformed: transformedValue,
+    autoformat: function (fieldValue, _, fieldOptions) {
+        if (fieldValue === null || fieldValue === undefined)
+            return {
+                transformationWasNeeded: false,
+                original: fieldValue,
+                transformed: null,
+            };
+        var type = fieldOptions.type, pattern = fieldOptions.pattern;
+        var parseFunctions = {
+            date: parseDateFromUserInput,
+            datetime: parseDateTimeFromUserInput,
+            time: parseTimeFromDateTimeorTimeInput,
         };
+        var parseFn = parseFunctions[type];
+        var dateValue = parseFn(fieldValue);
+        var transformedValue = dateValue === null || dateValue === void 0 ? void 0 : dateValue.toFormat(pattern);
+        return isTransformationNeeded(fieldValue, transformedValue);
     },
 };
 var urlTransformations = {

package/lib/esm/Importer/common/theme.d.ts

@@ -42,6 +42,7 @@ declare const getCustomTheme: (importerStylePreferences: ImporterStylePreference
             red50: string;
             red100: string;
             red200: string;
+            red250: string;
             red300: string;
             red400: string;
             red500: string;

package/lib/esm/Importer/data/index.d.ts

@@ -7,8 +7,10 @@ export declare const addEmptyRows: (data: Record[], fields: Field[]) => (Record
     };
 })[];
 export declare const addMeta: (record: any, index: number, uploadedRow?: any, transformedRow?: TransformedRecord) => Record;
-export declare const calculatePossibleDateFormats: (fieldsWithDateTransformations: Field[], sample: Record[]) => string[];
-export declare const recordListToDataSet: (data: Record[], fields: Field[]) => RecordDataSet;
+export declare const recordListToDataSet: (data: Record[], fields: Field[], withTransformations?: boolean) => {
+    isDatasetTransformed: boolean;
+    dataSet: RecordDataSet;
+};
 type transformToRecordsArgs = {
     templateHeaderMatchings: HeaderMatchings;
     enumFieldValueMatchings: EnumFieldValueMatchings;
@@ -46,6 +48,7 @@ type GetReviewDataSetArgs = {
     fields: Field[];
 };
 export declare const getReviewDataSet: ({ records, fields }: GetReviewDataSetArgs) => {
+    isDatasetTransformed: boolean;
     initialDataSet: {
         [x: string]: Record;
     };

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

@@ -18,13 +18,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { datesDateTimesAndTimesTransformations } from "../../Importer/common/Spreadsheet/transformation/transformators";
 import { transformRecord } from "../../Importer/common/Spreadsheet/transformation";
 import { FieldTypes, } from "../../types";
 import { parseValue } from "../common/Spreadsheet/common";
-import { DateTime } from "luxon";
-import { allowedPatternValues } from "../../common/datePatterns";
-import _ from "lodash";
 var MINIMUM_ROW_COUNT = 20;
 var getRowId = function (index) {
     return index.toString();
@@ -43,62 +39,34 @@ export var addEmptyRows = function (data, fields) {
 export var addMeta = function (record, index, uploadedRow, transformedRow) {
     var _a;
     if (uploadedRow === void 0) { uploadedRow = null; }
-    if (transformedRow === void 0) { transformedRow = null; }
+    if (transformedRow === void 0) { transformedRow = {}; }
     var rId = getRowId(index);
     var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
-    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, uploadedRow: uploadedRow, transformedRow: __assign(__assign({}, meta.transformedRow), transformedRow) }) });
+    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, uploadedRow: uploadedRow, transformedRow: transformedRow }) });
 };
-export var calculatePossibleDateFormats = function (fieldsWithDateTransformations, sample) {
-    var possibleDateFormats = [];
-    for (var _i = 0, sample_1 = sample; _i < sample_1.length; _i++) {
-        var record = sample_1[_i];
-        for (var _a = 0, fieldsWithDateTransformations_1 = fieldsWithDateTransformations; _a < fieldsWithDateTransformations_1.length; _a++) {
-            var field = fieldsWithDateTransformations_1[_a];
-            var value = record[field.name];
-            if (!value)
-                continue;
-            for (var i = 0; i < allowedPatternValues.length; i++) {
-                var format = allowedPatternValues[i];
-                try {
-                    var currentDate = DateTime.fromFormat(value, format);
-                    if (currentDate.isValid) {
-                        possibleDateFormats.push(format);
-                    }
-                }
-                catch (e) { }
-            }
-        }
-    }
-    return Array.from(new Set(possibleDateFormats));
-};
-export var recordListToDataSet = function (data, fields) {
+export var recordListToDataSet = function (data, fields, withTransformations) {
+    if (withTransformations === void 0) { withTransformations = true; }
     var fieldWithTransformations = fields.filter(function (field) { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.transformations) === null || _a === void 0 ? void 0 : _a.length) > 0; });
     var initialData = data;
     if (data.length < MINIMUM_ROW_COUNT) {
         initialData = addEmptyRows(data, fields);
     }
-    var fieldsWithDateTransformations = fieldWithTransformations.filter(function (field) {
-        return field.transformations.some(function (t) {
-            return Object.keys(datesDateTimesAndTimesTransformations).includes(t.transformation_type);
-        });
-    });
-    var possibleDateFormats = [];
-    if (fieldsWithDateTransformations.length > 0) {
-        possibleDateFormats.push.apply(possibleDateFormats, calculatePossibleDateFormats(fieldsWithDateTransformations, _.sampleSize(initialData, 100)));
-    }
-    return initialData.reduce(function (dataSet, record, i) {
-        var transformedRecord = null;
-        if (fieldWithTransformations.length > 0) {
+    var isDatasetTransformed = false;
+    var res = initialData.reduce(function (dataSet, record, i) {
+        var transformedRecord = {};
+        if (withTransformations && fieldWithTransformations.length > 0) {
             transformedRecord = transformRecord({
                 record: record,
                 fields: fieldWithTransformations,
-                possibleDateFormats: possibleDateFormats,
             });
         }
+        if (JSON.stringify(transformedRecord) !== "{}")
+            isDatasetTransformed = true;
         var recordWithMeta = addMeta(record, i, undefined, transformedRecord);
         dataSet[recordWithMeta._meta.id] = recordWithMeta;
         return dataSet;
     }, {});
+    return { isDatasetTransformed: isDatasetTransformed, dataSet: res };
 };
 var compareFormattedRecord = function (originalRecord, formattedRecord) {
     var comparisonResult = {};
@@ -177,7 +145,7 @@ export var getPreviewDataSet = function (_a) {
             });
             return entry;
         });
-        return recordListToDataSet(data, fields);
+        return recordListToDataSet(data, fields).dataSet;
     };
     return { fields: fields, initialDataSet: getInitialDataSet() };
 };
@@ -197,7 +165,7 @@ export var getTemplateFields = function (_a) {
 export var getReviewDataSet = function (_a) {
     var _b;
     var records = _a.records, fields = _a.fields;
-    var baseInitialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
+    var _c = recordListToDataSet(addEmptyRows(records, fields), fields), isDatasetTransformed = _c.isDatasetTransformed, baseInitialDataSet = _c.dataSet;
     var highestRowIndex = 0;
     Object.keys(baseInitialDataSet).forEach(function (key) {
         var record = baseInitialDataSet[key];
@@ -207,5 +175,5 @@ export var getReviewDataSet = function (_a) {
     });
     var emptyRowAtBottom = addMeta({}, highestRowIndex + 1);
     var initialDataSet = __assign(__assign({}, baseInitialDataSet), (_b = {}, _b[emptyRowAtBottom._meta.id] = emptyRowAtBottom, _b));
-    return { initialDataSet: initialDataSet };
+    return { isDatasetTransformed: isDatasetTransformed, initialDataSet: initialDataSet };
 };

package/lib/esm/Importer/hooks/useSubmitToServer.d.ts

@@ -1,5 +1,5 @@
 import { AppResponse, RecordDataSet } from "../../types";
-export declare const useSubmitToServer: () => {
+export declare const useSubmitToServer: (setIsTransformTooltipOpened: any) => {
     appResponse: AppResponse;
     isSubmitting: boolean;
     onSubmitToServer: (dataSet: RecordDataSet, afterSubmitCallback: (dataSet: RecordDataSet) => void) => Promise<void>;

package/lib/esm/Importer/hooks/useSubmitToServer.js

@@ -118,7 +118,7 @@ var filterAndMapWithBackendErrors = function (dataSet, errors) {
         return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
     }, []);
 };
-export var useSubmitToServer = function () {
+export var useSubmitToServer = function (setIsTransformTooltipOpened) {
     var _a = useImporterContext(), templateHeaderMatchings = _a.templateHeaderMatchings, templateHeaders = _a.templateHeaders, integrations = _a.integrations, templateSlug = _a.templateSlug, fuseApi = _a.fuseApi, previewMode = _a.importerOptions.previewMode, onSubmit = _a.onSubmit;
     var _b = useState(false), isSubmitting = _b[0], setIsSubmitting = _b[1];
     var _c = useState(false), importWasSuccessful = _c[0], setImportWasSuccessful = _c[1];
@@ -157,7 +157,8 @@ export var useSubmitToServer = function () {
                         });
                         invalidRecords_1 = __spreadArray(__spreadArray([], invalidRecords_1, true), (recordsToDisplayFiltered || []), true);
                     }
-                    invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields_1);
+                    invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields_1, false).dataSet;
+                    setIsTransformTooltipOpened(false);
                     afterSubmitCallback(invalidDataSet);
                     if (!!previewMode) return [3 /*break*/, 5];
                     return [4 /*yield*/, trackImportedRowsCount(fuseApi, templateSlug, validDataSetLength)];

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

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useSpreadsheetContext } from "../../../../Importer";
+import { addToast } from "../../../../common/Toast";
+import { useReviewContext, useSpreadsheetContext } from "../../../../Importer";
 import { useFilteredDataContext } from "../../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
 import { useValidationContext } from "../../../../Importer/common/Spreadsheet/ValidationContextProvider";
-import { addToast } from "../../../../common/Toast";
 import { useEventManagerContext } from "../../../EventManagerContextProvider";
 import * as S from "./FilterByErrors.styles";
 export var FilterByErrors = function () {
     var _a, _b;
     var _c = useFilteredDataContext(), spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
     var _d = useEventManagerContext(), on = _d.on, off = _d.off, EVENTS = _d.EVENTS;
-    var _e = useSpreadsheetContext(), fields = _e.fields, isTransformTooltipOpened = _e.isTransformTooltipOpened;
+    var fields = useSpreadsheetContext().fields;
+    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
     var columnsWithErrorCounts = useValidationContext().columnsWithErrorCounts;
     var t = useTranslation("review").t;
-    var _f = useState([]), errorArray = _f[0], setErrorArray = _f[1];
-    var _g = useState(false), isMenuOpened = _g[0], setIsMenuOpened = _g[1];
+    var _e = useState([]), errorArray = _e[0], setErrorArray = _e[1];
+    var _f = useState(false), isMenuOpened = _f[0], setIsMenuOpened = _f[1];
     useEffect(function () {
         var listener = function () {
             var getErrorArray = function () {

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

@@ -17,7 +17,7 @@ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { useSpreadsheetContext } from "../../../Importer";
+import { useReviewContext } from "../../../Importer";
 import { useDataSetContext } from "../../../Importer/common/Spreadsheet/DataSetContextProvider";
 import { useDuplicateDataContext } from "../../../Importer/common/Spreadsheet/DuplicateDataContextProvider";
 import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
@@ -39,13 +39,13 @@ var Filter = function (_a) {
     var labelToId = function (label) {
         return label.toLowerCase().replace(/\s/g, "_") + "_filter";
     };
-    return (_jsxs(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count.toLocaleString(), ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataIds.length })) }))] })));
+    return (_jsx(Div, __assign({ disabledWhen: isDisabled, dflex: true, clickable: true, onClick: function () { return !isDisabled && onClick(); }, "data-test-id": labelToId(label) }, { children: _jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count.toLocaleString(), ")"] })] })) })));
 };
 export var RowFilters = function () {
     var _a = useFilteredDataContext(), spreadsheetFilter = _a.spreadsheetFilter, filterRecordsByRowType = _a.filterRecordsByRowType;
     var _b = useDuplicateDataContext(), duplicateRecordIds = _b.duplicateRecordIds, calculateDuplicateRecords = _b.calculateDuplicateRecords;
     var invalidRowsCountRef = useValidationContext().invalidRowsCountRef;
-    var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
+    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
     var _c = useState(invalidRowsCountRef.current), invalidRowsCount = _c[0], setInvalidRowsCount = _c[1];
     var _d = useDataSetContext(), dataSetLength = _d.dataSetLength, emptyRecordIds = _d.emptyRecordIds;
     var _e = useEventManagerContext(), on = _e.on, off = _e.off, EVENTS = _e.EVENTS;

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

@@ -13,18 +13,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { useSpreadsheetContext } from "../../../Importer";
-import { SearchIcon } from "./icons";
 import { useDebounce } from "../../../hooks";
-import { useRef, useState } from "react";
+import { useReviewContext } from "../../../Importer";
 import { colors } from "../../../styled/theme/colorPalette";
 import { textStyles } from "../../../styled/theme/textStyles";
+import { SearchIcon, ReplaceIcon } from "./icons";
 import { TooltipProvider } from "../../../common/TooltipProvider";
 import { useTranslation } from "react-i18next";
 import { Div } from "../../../styled";
 import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
+import { FindAndReplaceModal } from "../../../Importer/common/Spreadsheet/components/FindAndReplace";
 var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  height: 24px;\n  overflow: hidden;\n  padding: 8px;\n  position: relative;\n  transition: width 0.25s ease-in-out;\n  width: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? colors.orange50 : "none");
@@ -33,22 +34,27 @@ var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplate
     return (isOpen ? "332px" : "24px");
 });
 var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
+var ResultsText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  color: ", ";\n  display: block;\n  text-wrap: nowrap;\n  text-align: right;\n  border-right: solid 1px ", ";\n  margin-right: 8px;\n  padding-right: 8px;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  color: ", ";\n  display: block;\n  text-wrap: nowrap;\n  text-align: right;\n  border-right: solid 1px ", ";\n  margin-right: 8px;\n  padding-right: 8px;\n"])), colors.gray700, colors.gray300);
+var ActionsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-center;\n"], ["\n  display: flex;\n  align-items: flex-center;\n"])));
+var Input = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"], ["\n  ", ";\n  width: 100%;\n\n  background-color: none;\n  background: none;\n  border: none;\n  box-shadow: none;\n  color: ", ";\n  height: 20px;\n  line-height: 20px;\n  outline: none;\n  padding: 1px 2px;\n\n  ", ";\n"])), textStyles.body3, colors.gray700, function (_a) {
     var isOpen = _a.isOpen;
-    return !isOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
+    return !isOpen && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: absolute;\n      top: -9999px;\n    "], ["\n      position: absolute;\n      top: -9999px;\n    "])));
 });
 var SearchInput = function (_a) {
     var testId = _a.testId, value = _a.value, onChange = _a.onChange, isDisabled = _a.isDisabled;
     var _b = useDebounce(value, onChange, 300), _value = _b._value, set_Value = _b.set_Value;
     var inputRef = useRef(null);
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var filteredDataIds = useFilteredDataContext().filteredDataIds;
+    var _c = useState(false), findAndReplaceModalOpen = _c[0], setFindAndReplaceModalOpen = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var actionsRef = useRef();
     var t = useTranslation("review").t;
     var handleInputChange = function (_a) {
         var target = _a.target;
         set_Value(target.value);
     };
-    var handleInputOnBlur = function () {
-        if (!_value) {
+    var handleInputOnBlur = function (e) {
+        if (!_value && e.relatedTarget !== actionsRef.current) {
             setIsOpen(false);
         }
     };
@@ -61,15 +67,17 @@ var SearchInput = function (_a) {
             }
         }
     };
-    return (_jsx(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: _jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") })] })) })));
+    return (_jsxs(TooltipProvider, __assign({ tooltip: !isOpen && !isDisabled ? t("table_actions.search_rows.tooltip") : "", placement: "right", flip: false, centered: true, w: "auto", "data-testid": testId }, { children: [_jsxs(Wrapper, __assign({ isOpen: isOpen, onClick: function () { return !isDisabled && handleWrapperClick(); }, disabledWhen: isDisabled }, { children: [_jsx(IconWrapper, { children: _jsx(SearchIcon, {}) }), _jsx(Input, { isOpen: isOpen, ref: inputRef, value: _value, onChange: handleInputChange, onBlur: handleInputOnBlur, type: "text", placeholder: t("table_actions.search_rows.placeholder") }), _jsxs(ActionsWrapper, __assign({ "data-cy": "open-find-replace", ref: actionsRef, onClick: function () { return setFindAndReplaceModalOpen(true); }, tabIndex: 0 }, { children: [_jsx(ResultsText, { children: t("table_actions.search_rows.number_of_results", {
+                                    length: value ? filteredDataIds.length : 0,
+                                }) }), _jsx(IconWrapper, { children: _jsx(ReplaceIcon, {}) })] }))] })), findAndReplaceModalOpen && (_jsx(FindAndReplaceModal, { initialText: value, onClose: function () { return setFindAndReplaceModalOpen(false); } }))] })));
 };
 export var SearchRows = function (_a) {
     var _b = _a.testId, testId = _b === void 0 ? "ta-search-rows" : _b;
     var _c = useFilteredDataContext(), filteredInputValue = _c.filteredInputValue, setFilteredInputValue = _c.setFilteredInputValue;
-    var isTransformTooltipOpened = useSpreadsheetContext().isTransformTooltipOpened;
+    var isTransformTooltipOpened = useReviewContext().isTransformTooltipOpened;
     var handleChangeInputValue = function (value) {
         setFilteredInputValue(value);
     };
-    return (_jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }));
+    return (_jsx(_Fragment, { children: _jsx(SearchInput, { testId: testId, value: filteredInputValue, onChange: handleChangeInputValue, isDisabled: isTransformTooltipOpened }) }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;