fuse-importer 0.13.0 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/lib/esm/Importer/{LoadFonts.d.ts → ImporterFonts.d.ts} +0 -0
  2. package/lib/esm/Importer/{LoadFonts.js → ImporterFonts.js} +0 -0
  3. package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.js +19 -4
  4. package/lib/esm/Importer/Matcher/HeaderMatcher/index.js +18 -4
  5. package/lib/esm/Importer/Review/AppResponseModal.js +1 -1
  6. package/lib/esm/Importer/Review/index.js +1 -1
  7. package/lib/esm/Importer/Stepper.js +2 -2
  8. package/lib/esm/Importer/Uploader/HeadersPreview.js +2 -2
  9. package/lib/esm/Importer/common/Spreadsheet/common/index.js +15 -12
  10. package/lib/esm/Importer/common/Spreadsheet/index.js +13 -6
  11. package/lib/esm/Importer/common/index.d.ts +8 -0
  12. package/lib/esm/Importer/common/index.js +6 -0
  13. package/lib/esm/Importer/index.js +1 -1
  14. package/lib/esm/common/Table/TableView/TableHeaders.d.ts +2 -1
  15. package/lib/esm/common/Table/TableView/TableHeaders.js +4 -4
  16. package/lib/esm/common/Table/TableView/common.d.ts +1 -1
  17. package/lib/esm/common/Table/TableView/common.js +1 -1
  18. package/lib/esm/common/Table/TableView/index.d.ts +2 -1
  19. package/lib/esm/common/Table/TableView/index.js +3 -7
  20. package/lib/main.js +1 -1
  21. package/package.json +1 -1
  22. package/lib/esm/Importer/Matcher/common/index.d.ts +0 -2
  23. package/lib/esm/Importer/Matcher/common/index.js +0 -2
package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.js CHANGED
@@ -10,19 +10,21 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { useRef } from "react";
13
14
  import { TableView } from "../../../../common/Table/TableView";
15
+ import { colors } from "../../../../styled/theme/colorPalette";
14
16
  import { Div } from "../../../../styled/utils";
15
17
  import { useImporterContext } from "../../../ImporterContextProvider";
16
18
  import { MatcherStatus } from "../../common/types";
17
19
  import { EnumFieldMatcherContextProvider } from "../EnumFieldMatcherContext";
18
20
  import { tableColumns } from "./tableColumns";
19
21
  import { defaultTableHeaderHeightPx } from "../../../../common/Table/TableView/common";
20
- import { colors } from "../../../../styled/theme/colorPalette";
21
- import { matcherTableMinHeightPx, matcherTableMaxHeightPx, } from "../../common/index";
22
+ import { getTableHeight } from "../../../common";
22
23
  export var EnumFieldMatcher = function (_a) {
23
24
  var _b;
24
25
  var templateHeaderLabel = _a.templateHeaderLabel;
25
26
  var _c = useImporterContext(), enumFieldValueMatchings = _c.enumFieldValueMatchings, templateHeaders = _c.templateHeaders;
27
+ var isRequired = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.required;
26
28
  var enumFieldValueMatching = enumFieldValueMatchings[templateHeaderLabel];
27
29
  var uploadedDataValues = Object.keys(enumFieldValueMatching);
28
30
  var data = uploadedDataValues.map(function (uploadedDataValue) { return ({
@@ -32,7 +34,20 @@ export var EnumFieldMatcher = function (_a) {
32
34
  ? MatcherStatus.matched
33
35
  : MatcherStatus.unmatched,
34
36
  }); });
35
- var isRequired = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.required;
37
+ var dataSortingOrderRef = useRef(uploadedDataValues
38
+ .map(function (uploadedDataValue, index) { return ({
39
+ index: index,
40
+ isMatched: !!enumFieldValueMatching[uploadedDataValue],
41
+ }); })
42
+ .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
43
+ //sort data based on automatched items
44
+ var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
36
45
  var tableRowHeight = 100;
37
- return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: "Values for the '".concat(templateHeaderLabel).concat(isRequired ? "*" : "", "' Column") }), void 0), _jsx(Div, __assign({ mb: 40 }, { children: _jsx(EnumFieldMatcherContextProvider, __assign({ templateHeaderLabel: templateHeaderLabel }, { children: _jsx(TableView, { minh: matcherTableMinHeightPx, maxh: matcherTableMaxHeightPx, rowHeight: tableRowHeight, h: data.length * tableRowHeight + defaultTableHeaderHeightPx, data: data, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }, void 0));
46
+ var tableHeight = getTableHeight({
47
+ headerHeight: defaultTableHeaderHeightPx,
48
+ rowHeight: tableRowHeight,
49
+ dataCount: data.length,
50
+ maxVisibleRows: 5,
51
+ });
52
+ return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: "Values for the '".concat(templateHeaderLabel).concat(isRequired ? "*" : "", "' Column") }), void 0), _jsx(Div, __assign({ mb: 40 }, { children: _jsx(EnumFieldMatcherContextProvider, __assign({ templateHeaderLabel: templateHeaderLabel }, { children: _jsx(TableView, { h: tableHeight, rowHeight: tableRowHeight, data: sortedData, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }, void 0));
38
53
  };
package/lib/esm/Importer/Matcher/HeaderMatcher/index.js CHANGED
@@ -14,13 +14,13 @@ var __assign = (this && this.__assign) || function () {
14
14
  return __assign.apply(this, arguments);
15
15
  };
16
16
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
17
+ import { useRef } from "react";
17
18
  import styled from "styled-components";
18
- import { TableView } from "../../../common/Table/TableView";
19
+ import { defaultTableHeaderHeightPx, TableView, } from "../../../common/Table/TableView";
19
20
  import { colors } from "../../../styled/theme";
20
21
  import { Div } from "../../../styled/utils";
21
- import { contentWidth } from "../../common/index";
22
+ import { contentWidth, getTableHeight } from "../../common/index";
22
23
  import { useImporterContext } from "../../ImporterContextProvider";
23
- import { matcherTableMaxHeightPx, matcherTableMinHeightPx, } from "../common/index";
24
24
  import { MatcherStatus } from "../common/types";
25
25
  import { tableColumns } from "./tableColumns";
26
26
  var CardContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: row;\n > div {\n margin: 16px;\n }\n"], ["\n flex-direction: row;\n > div {\n margin: 16px;\n }\n"])));
@@ -37,8 +37,22 @@ var HeaderMatcher = function () {
37
37
  : MatcherStatus.unmatched,
38
38
  };
39
39
  });
40
+ var dataSortingOrderRef = useRef(templateHeaderLabels
41
+ .map(function (templateHeaderLabel, index) { return ({
42
+ index: index,
43
+ isMatched: !!templateHeaderMatchings[templateHeaderLabel],
44
+ }); })
45
+ .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
46
+ //sort data based on automatched items
47
+ var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
40
48
  var tableRowHeight = 100;
41
- var headerMatcher = (_jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") }), void 0), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true }, { children: _jsx(Div, __assign({ w: contentWidth }, { children: _jsx(TableView, { minh: matcherTableMinHeightPx, maxh: matcherTableMaxHeightPx, data: data, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }), void 0) }, void 0));
49
+ var tableHeight = getTableHeight({
50
+ headerHeight: defaultTableHeaderHeightPx,
51
+ rowHeight: tableRowHeight,
52
+ dataCount: data.length,
53
+ maxVisibleRows: 5,
54
+ });
55
+ var headerMatcher = (_jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") }), void 0), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true }, { children: _jsx(Div, __assign({ w: contentWidth }, { children: _jsx(TableView, { h: tableHeight, data: sortedData, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }), void 0) }, void 0));
42
56
  return _jsx(_Fragment, { children: headerMatcher }, void 0);
43
57
  };
44
58
  export { HeaderMatcher };
package/lib/esm/Importer/Review/AppResponseModal.js CHANGED
@@ -31,5 +31,5 @@ export var AppResponseModal = function () {
31
31
  var defaultMessage = importWasSuccessful
32
32
  ? "Data imported successfully"
33
33
  : "Some records could not be imported. Please review the errors and resubmit.";
34
- return (_jsx(Modal, __assign({ isOpen: isAppResponseModalOpen, onClose: onCloseModal }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 40 }, { children: [_jsx(Div, __assign({ h5: true, w: 300, textAlignCenter: true, mt: 20 }, { children: (appResponse === null || appResponse === void 0 ? void 0 : appResponse.message) || defaultMessage }), void 0), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ w: 100, ml: 10, onClick: onCloseModal }, { children: "OK" }), void 0) }), void 0)] }), void 0) }), void 0));
34
+ return (_jsx(Modal, __assign({ isOpen: isAppResponseModalOpen, onClose: onCloseModal }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 40 }, { children: [_jsx(Div, __assign({ h6: true, w: 300, textAlignCenter: true, mt: 20 }, { children: (appResponse === null || appResponse === void 0 ? void 0 : appResponse.message) || defaultMessage }), void 0), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ w: 100, ml: 10, onClick: onCloseModal }, { children: "OK" }), void 0) }), void 0)] }), void 0) }), void 0));
35
35
  };
package/lib/esm/Importer/Review/index.js CHANGED
@@ -80,6 +80,6 @@ var Review = function () {
80
80
  onValidateBatch: onValidateBatch,
81
81
  onValidateRecord: onValidateRecord,
82
82
  }), void 0) }, void 0)); }, [appResponse, submittedData]);
83
- return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}, void 0), _jsx(Div, __assign({ h2: true, mt: 40 }, { children: "Review Your Spreadsheet before Submitting" }), void 0), _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15, textAlignCenter: true }, { children: "Some cells in the document might have errors in format or missing information. Please review these to continue." }), void 0), initialData && spreadsheetUI] }), void 0));
83
+ return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}, void 0), _jsxs(Div, __assign({ w: 1400 }, { children: [_jsxs(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: "Review Your Spreadsheet before Submitting" }), void 0), _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: "Some cells in the document might have errors in format or missing information. Please review these to continue." }), void 0)] }), void 0), initialData && spreadsheetUI] }), void 0)] }), void 0));
84
84
  };
85
85
  export default Review;
package/lib/esm/Importer/Stepper.js CHANGED
@@ -63,7 +63,7 @@ var getEnumFieldValueMatchingsInitialValue = function (_a) {
63
63
  var Stepper = function (_a) {
64
64
  var stepLabels = _a.stepLabels, logoURL = _a.logoURL;
65
65
  var _b = useState(false), isUnmatchedHeadersModalOpen = _b[0], setIsUnmatchedHeadersModalOpen = _b[1];
66
- var _c = useSpreadsheetReviewContext(), isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
66
+ var _c = useSpreadsheetReviewContext(), appResponse = _c.appResponse, isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
67
67
  var _d = useState(false), isSubmitModalOpen = _d[0], setIsSubmitModalOpen = _d[1];
68
68
  var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setCurrentStepIndex = _e.setCurrentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, setMatcherSubstep = _e.setMatcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, onClose = _e.onClose;
69
69
  var submitModalUI = (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return setIsSubmitModalOpen(false); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitSvg }, void 0), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: "Ready to submit?" }), void 0), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: "We didn't find anything wrong with your file. You're good to go!" }), void 0), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return setIsSubmitModalOpen(false); } }, { children: "Go back" }), void 0), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
@@ -121,7 +121,7 @@ var Stepper = function (_a) {
121
121
  var unmatchedHeadersModalUI = (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return setIsUnmatchedHeadersModalOpen(false); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon }), void 0), _jsx(Div, __assign({ textAlignCenter: true, h3: true, mb: 8 }, { children: "Unmatched Headers" }), void 0), _jsxs(Div, __assign({ maxw: 395, textAlignCenter: true, body1: true, mb: 40 }, { children: ["There are ", unmatchedHeadersCount, " unmatched column headers. You will have to fill these out manually if you proceed."] }), void 0), _jsxs(Div, __assign({ dflex: true, centered: true }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return setIsUnmatchedHeadersModalOpen(false); }, w: 160, mr: 16 }, { children: "Assign Headers" }), void 0), _jsx(Button, __assign({ variant: "primary", w: 68, onClick: skipStep }, { children: "Skip" }), void 0)] }), void 0)] }), void 0) }), void 0));
122
122
  var isMatchStep = currentStepIndex === 1;
123
123
  var isReviewStep = currentStepIndex === 2;
124
- var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }), void 0)) }), void 0));
124
+ var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }), void 0)) }), void 0));
125
125
  var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }), void 0)), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: !isSpreadsheetReviewComplete, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" }), void 0))] }), void 0));
126
126
  return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }, void 0), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI }), void 0), rightButtonUI] }), void 0), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }), void 0)] }), void 0)] }, void 0));
127
127
  };
package/lib/esm/Importer/Uploader/HeadersPreview.js CHANGED
@@ -36,7 +36,7 @@ var HeaderButtons = function () {
36
36
  var onClick = function () {
37
37
  setCurrentStepIndex(1);
38
38
  };
39
- return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 24 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
39
+ return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 12 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
40
40
  };
41
41
  var HeadersPreview = function () {
42
42
  var uploadedData = useImporterContext().uploadedData;
@@ -72,7 +72,7 @@ var HeadersPreview = function () {
72
72
  isRequired: false,
73
73
  };
74
74
  });
75
- return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mt: 30, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
75
+ return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
76
76
  };
77
77
  export default HeadersPreview;
78
78
  var templateObject_1;
package/lib/esm/Importer/common/Spreadsheet/common/index.js CHANGED
@@ -12,8 +12,14 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { FieldTypes, } from "../../../../types";
13
13
  export var spreadsheetRowHeightPx = 40;
14
14
  export var spreadsheetHeaderHeightPx = 40;
15
+ var isEmpty = function (value) {
16
+ return (value === undefined ||
17
+ value === null ||
18
+ (typeof value === "object" && Object.keys(value).length === 0) ||
19
+ (typeof value === "string" && value.trim().length === 0));
20
+ };
15
21
  export var recordIsEmpty = function (record, fields) {
16
- return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && !record[f.name]; }, true);
22
+ return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && isEmpty(record[f.name]); }, true);
17
23
  };
18
24
  export var getRenderedRecordWithErrors = function (_a) {
19
25
  var record = _a.record, validationErrors = _a.validationErrors;
@@ -26,20 +32,17 @@ export var getRecordErrors = function (_a) {
26
32
  var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
27
33
  return Boolean(value.match(emailRegex));
28
34
  };
29
- var isEmptyString = function (string) {
30
- return string.replace(/\s/g, "") === "";
31
- };
32
35
  var recordHasData = !recordIsEmpty(record, fields);
33
36
  if (recordHasData) {
34
- var recordIsRequiredErrors = fields.reduce(function (errors, field) {
37
+ var recordTemplateValidationErrors = fields.reduce(function (errors, field) {
35
38
  var newErrors = __assign({}, errors);
36
39
  var fieldValue = record[field.name];
37
- if (field.isRequired && !fieldValue)
38
- newErrors[field.name] = "".concat(field.label, " is required");
39
- if (FieldTypes.email === field.type &&
40
- !isEmptyString(fieldValue) &&
41
- !isEmail(fieldValue)) {
42
- newErrors[field.name] = "Must be an email";
40
+ if (isEmpty(fieldValue)) {
41
+ if (field.isRequired)
42
+ newErrors[field.name] = "".concat(field.label, " is required");
43
+ }
44
+ else if (field.type === FieldTypes.email && !isEmail(fieldValue)) {
45
+ newErrors[field.name] = "".concat(field.label, " is not a valid email");
43
46
  }
44
47
  return newErrors;
45
48
  }, {});
@@ -61,7 +64,7 @@ export var getRecordErrors = function (_a) {
61
64
  return newErrors;
62
65
  }, {});
63
66
  }
64
- var recordErrors = __assign(__assign(__assign({}, recordValidationErrors), recordIsRequiredErrors), appValidationErrors);
67
+ var recordErrors = __assign(__assign(__assign({}, recordValidationErrors), recordTemplateValidationErrors), appValidationErrors);
65
68
  return recordErrors;
66
69
  }
67
70
  return {};
package/lib/esm/Importer/common/Spreadsheet/index.js CHANGED
@@ -52,21 +52,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
52
52
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
53
53
  import { useEffect, useMemo, useRef, useState } from "react";
54
54
  import styled, { css } from "styled-components";
55
- import { TableView as TableViewBase, TableViewCellContainer, TableViewHeader, TableViewRow, } from "../../../common/Table/TableView";
55
+ import { getTableHeight } from "..";
56
+ import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
56
57
  import { colors } from "../../../styled/theme/colorPalette";
57
58
  import { Div } from "../../../styled/utils";
58
59
  import { FieldTypes, } from "../../../types";
59
- import GlobalStyle from "./GlobalStyle";
60
60
  import { useSpreadsheetReviewContext } from "../../SpreadsheetReviewContextProvider";
61
61
  import { getUnsubmittedData } from "../utils";
62
62
  import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "./common";
63
63
  import { SpreadsheetAutocomplete } from "./common/fields/SpeadsheetAutocomplete";
64
64
  import { SpreadsheetTextInput } from "./common/fields/SpreadsheetTextInput";
65
+ import GlobalStyle from "./GlobalStyle";
65
66
  import { SpreadsheetContextProvider, useSpreadsheetContext, } from "./SpreadsheetContextProvider";
66
67
  import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
67
- var SPREADSHEET_HEIGHT = 540;
68
68
  var SpreadSheetWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: solid 1px ", ";\n border-radius: 8px;\n background: ", ";\n overflow: hidden !important;\n"], ["\n border: solid 1px ", ";\n border-radius: 8px;\n background: ", ";\n overflow: hidden !important;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
69
- var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n border: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n ", " {\n border-bottom: none;\n height: 40px;\n }\n ", " {\n padding: 0;\n border-right: 1px solid ", ";\n }\n ", " {\n background: ", ";\n height: ", "px;\n box-shadow: inset 0 -1px 0 ", ";\n border-bottom: none;\n }\n"], ["\n width: 100%;\n border: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n ", " {\n border-bottom: none;\n height: 40px;\n }\n ", " {\n padding: 0;\n border-right: 1px solid ", ";\n }\n ", " {\n background: ", ";\n height: ", "px;\n box-shadow: inset 0 -1px 0 ", ";\n border-bottom: none;\n }\n"])), TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; }, TableViewHeader, function (p) { return p.theme.colors.tableHeader; }, spreadsheetHeaderHeightPx, function (p) { return p.theme.colors.gray300; });
69
+ var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n border: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n background-color: ", ";\n ", " {\n border-bottom: none;\n height: 40px;\n }\n ", " {\n padding: 0;\n border-right: 1px solid ", ";\n }\n"], ["\n width: 100%;\n border: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n background-color: ", ";\n ", " {\n border-bottom: none;\n height: 40px;\n }\n ", " {\n padding: 0;\n border-right: 1px solid ", ";\n }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
70
70
  var ErrorCount = styled(Div)(function (_a) {
71
71
  var _b = _a.theme, colors = _b.colors, c = _b.css;
72
72
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n border: solid 1px ", ";\n padding: 4px 7px;\n border-radius: 56px;\n min-width: 22px;\n ", ";\n ", ";\n "], ["\n color: ", ";\n background: ", ";\n border: solid 1px ", ";\n padding: 4px 7px;\n border-radius: 56px;\n min-width: 22px;\n ", ";\n ", ";\n "])), colors.error, colors.red100, colors.error, c.label3, c.centered);
@@ -90,7 +90,7 @@ var Spreadsheet = function (_a) {
90
90
  var SpreadSheetWithContext = function () {
91
91
  var _a = useSpreadsheetContext(), isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, batchValidationPercentage = _a.batchValidationPercentage;
92
92
  var batchValidationProgressUI = (_jsxs(Div, __assign({ body1: true, dflex: true, mb: 22 }, { children: ["Calculating Data...", _jsxs(Div, __assign({ bold: true, ml: 5 }, { children: [batchValidationPercentage, "%"] }), void 0), _jsxs(Div, __assign({ bold: true, c: colors.error, ml: 5 }, { children: ["(", totalErrors, " errors)"] }), void 0)] }), void 0));
93
- return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ h: 32 }, { children: !isReadOnly &&
93
+ return (_jsxs(Div, { children: [_jsx(Div, __assign({ h: 32 }, { children: !isReadOnly &&
94
94
  batchValidationPercentage < 100 &&
95
95
  batchValidationProgressUI }), void 0), _jsx(SpreadsheetData, {}, void 0)] }, void 0));
96
96
  };
@@ -171,7 +171,14 @@ var SpreadsheetData = function () {
171
171
  }); });
172
172
  }, [fields]);
173
173
  var unsubmittedData = getUnsubmittedData(data, appResponse);
174
- return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}, void 0), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: SPREADSHEET_HEIGHT, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: SPREADSHEET_HEIGHT }, void 0), _jsx(TableView, { highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: SPREADSHEET_HEIGHT, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading }, void 0)] }), void 0))] }, void 0));
174
+ var spreadsheetHeight = getTableHeight({
175
+ headerHeight: spreadsheetHeaderHeightPx,
176
+ rowHeight: spreadsheetRowHeightPx,
177
+ dataCount: unsubmittedData.length,
178
+ mininmumTableHeight: 450,
179
+ maxVisibleRows: 12,
180
+ });
181
+ return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}, void 0), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: spreadsheetHeight }, void 0), _jsx(TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: spreadsheetHeight, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading }, void 0)] }), void 0))] }, void 0));
175
182
  };
176
183
  export { Spreadsheet };
177
184
  var templateObject_1, templateObject_2, templateObject_3;
package/lib/esm/Importer/common/index.d.ts CHANGED
@@ -4,4 +4,12 @@ declare type Environments = {
4
4
  [K in EnvironmentType]?: any;
5
5
  };
6
6
  export declare const baseUrls: Environments;
7
+ declare type GetTableHeightArgs = {
8
+ headerHeight: number;
9
+ rowHeight: number;
10
+ maxVisibleRows: number;
11
+ mininmumTableHeight?: number;
12
+ dataCount: number;
13
+ };
14
+ export declare const getTableHeight: ({ headerHeight, rowHeight, maxVisibleRows, mininmumTableHeight, dataCount, }: GetTableHeightArgs) => number;
7
15
  export {};
package/lib/esm/Importer/common/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { defaultTableHeaderHeightPx, defaultTableRowHeightPx, } from "../../common/Table/TableView/common";
1
2
  export var contentWidth = 1120;
2
3
  export var baseUrls = {
3
4
  local: "http://localhost:3000",
@@ -5,3 +6,8 @@ export var baseUrls = {
5
6
  production: "https://fuse.flatironsdevelopment.com",
6
7
  test: "https://fuse-test.flatironsdevelopment.com",
7
8
  };
9
+ var MINIMUM_TABLE_HEIGHT = 375;
10
+ export var getTableHeight = function (_a) {
11
+ var _b = _a.headerHeight, headerHeight = _b === void 0 ? defaultTableHeaderHeightPx : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? defaultTableRowHeightPx : _c, _d = _a.maxVisibleRows, maxVisibleRows = _d === void 0 ? 7 : _d, _e = _a.mininmumTableHeight, mininmumTableHeight = _e === void 0 ? MINIMUM_TABLE_HEIGHT : _e, dataCount = _a.dataCount;
12
+ return Math.max(headerHeight + rowHeight * Math.min(dataCount, maxVisibleRows + 0.5), mininmumTableHeight);
13
+ };
package/lib/esm/Importer/index.js CHANGED
@@ -21,7 +21,7 @@ import { Div } from "../styled/utils";
21
21
  import { Footer } from "./Footer";
22
22
  import { GlobalStyle } from "./GlobalStyle";
23
23
  import { ImporterContextProvider, useImporterContext, } from "./ImporterContextProvider";
24
- import { ImporterFonts } from "./LoadFonts";
24
+ import { ImporterFonts } from "./ImporterFonts";
25
25
  import { Matcher } from "./Matcher";
26
26
  import Review from "./Review";
27
27
  import { SpreadsheetReviewContextProvider } from "./SpreadsheetReviewContextProvider";
package/lib/esm/common/Table/TableView/TableHeaders.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare const TableHeadersContainer: import("styled-components").StyledCo
14
14
  export declare const TableHeadersContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
15
15
  declare type TableHeadersProps = Pick<TableViewProps, "columns" | "sortBy" | "setSortBy" | "rowHeight" | "rowWidth"> & {
16
16
  scrollLeft: number;
17
+ height: number;
17
18
  } & DivCSSProps;
18
- export declare const TableHeaders: ({ scrollLeft, columns, sortBy, setSortBy, rowHeight, rowWidth, ...props }: TableHeadersProps) => JSX.Element;
19
+ export declare const TableHeaders: ({ scrollLeft, columns, sortBy, setSortBy, rowHeight, rowWidth, height, ...props }: TableHeadersProps) => JSX.Element;
19
20
  export {};
package/lib/esm/common/Table/TableView/TableHeaders.js CHANGED
@@ -31,7 +31,7 @@ import { Div } from "../../../styled/utils";
31
31
  import { chevronDown as chevronDownIcon } from "../icons";
32
32
  import { SortDirection } from "../TableDataProvider";
33
33
  import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
34
- export var TableViewHeader = styled(TableViewCellContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: solid 1px ", ";\n background-color: ", ";\n height: ", "px;\n ", ";\n color: ", ";\n ", "\n"], ["\n border-bottom: solid 1px ", ";\n background-color: ", ";\n height: ", "px;\n ", ";\n color: ", ";\n ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, defaultTableHeaderHeightPx, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
34
+ export var TableViewHeader = styled(TableViewCellContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: none;\n box-shadow: inset 0 -1px 0 ", ";\n background-color: ", ";\n ", ";\n color: ", ";\n ", "\n"], ["\n border-bottom: none;\n box-shadow: inset 0 -1px 0 ", ";\n background-color: ", ";\n ", ";\n color: ", ";\n ", "\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.tableHeader; }, function (p) { return p.theme.css.body2; }, function (p) { return p.theme.colors.text; }, function (p) {
35
35
  return p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-right: solid 1px transparent !important;\n "], ["\n border-right: solid 1px transparent !important;\n "])));
36
36
  });
37
37
  export var SortIndicator = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 10px;\n margin-top: -4px;\n ", "\n svg {\n path {\n fill: ", ";\n }\n }\n"], ["\n margin-left: 10px;\n margin-top: -4px;\n ", "\n svg {\n path {\n fill: ", ";\n }\n }\n"])), function (p) {
@@ -40,11 +40,11 @@ export var SortIndicator = styled(Div)(templateObject_4 || (templateObject_4 = _
40
40
  export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n overflow-x: hidden;\n"], ["\n overflow-x: hidden;\n"])));
41
41
  export var TableHeadersContent = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /* table scrollbar offset */\n border-right: solid 10px ", ";\n"], ["\n /* table scrollbar offset */\n border-right: solid 10px ", ";\n"])), function (p) { return p.theme.colors.tableHeader; });
42
42
  export var TableHeaders = function (_a) {
43
- var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, setSortBy = _a.setSortBy, rowHeight = _a.rowHeight, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "setSortBy", "rowHeight", "rowWidth"]);
43
+ var _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, columns = _a.columns, sortBy = _a.sortBy, setSortBy = _a.setSortBy, rowHeight = _a.rowHeight, _c = _a.rowWidth, rowWidth = _c === void 0 ? 1 : _c, _d = _a.height, height = _d === void 0 ? defaultTableHeaderHeightPx : _d, props = __rest(_a, ["scrollLeft", "columns", "sortBy", "setSortBy", "rowHeight", "rowWidth", "height"]);
44
44
  var containerRef = useRef(null);
45
45
  if (containerRef.current)
46
46
  containerRef.current.scrollLeft = scrollLeft;
47
- return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, props, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
47
+ return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
48
48
  var header = column.header, Header = column.Header;
49
49
  var onHeaderClick = function () {
50
50
  if (!setSortBy || column.disableSort)
@@ -64,7 +64,7 @@ export var TableHeaders = function (_a) {
64
64
  });
65
65
  }
66
66
  };
67
- return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick }, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}, void 0) : header }, void 0), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon }), void 0))] }), index));
67
+ return (_jsxs(TableViewHeader, __assign({ isLast: index === columns.length - 1, w: columnWidthPercentage(column, columns), onClick: onHeaderClick, h: height }, props, { children: [_jsx(_Fragment, { children: Header ? _jsx(Header, {}, void 0) : header }, void 0), (sortBy === null || sortBy === void 0 ? void 0 : sortBy.field) === column.dataAccessor && (_jsx(SortIndicator, __assign({ direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction }, { children: chevronDownIcon }), void 0))] }), index));
68
68
  }) }), void 0) }), void 0));
69
69
  };
70
70
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/lib/esm/common/Table/TableView/common.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { TableViewColumn } from ".";
2
2
  export declare const defaultTableRowHeightPx = 60;
3
- export declare const defaultTableHeaderHeightPx = 59;
3
+ export declare const defaultTableHeaderHeightPx = 60;
4
4
  export declare const columnWidthPercentage: (column: TableViewColumn, columns: TableViewColumn[]) => string;
5
5
  export declare const TableViewCellContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
package/lib/esm/common/Table/TableView/common.js CHANGED
@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  import styled, { css } from "styled-components";
6
6
  import { Div } from "../../../styled/utils";
7
7
  export var defaultTableRowHeightPx = 60;
8
- export var defaultTableHeaderHeightPx = 59;
8
+ export var defaultTableHeaderHeightPx = 60;
9
9
  export var columnWidthPercentage = function (column, columns) {
10
10
  var totalColumnWidthCount = columns.reduce(function (sum, c) {
11
11
  return sum + (c.width ? c.width : 1);
package/lib/esm/common/Table/TableView/index.d.ts CHANGED
@@ -33,8 +33,9 @@ export declare type TableViewProps = {
33
33
  highlightFirstRow?: boolean;
34
34
  rowWidth?: number;
35
35
  rowHeight?: number;
36
+ tableHeadersHeight?: number;
36
37
  onSectionRendered?: (section: TableSection) => void;
37
38
  onTableScroll?: (scrollTop: number) => void;
38
39
  onRowClick?: (row: any) => void;
39
40
  } & DivCSSProps;
40
- declare const TableView: ({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, rowHeight, h, onTableScroll, ...props }: TableViewProps) => JSX.Element;
41
+ declare const TableView: ({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, ...props }: TableViewProps) => JSX.Element;
package/lib/esm/common/Table/TableView/index.js CHANGED
@@ -43,16 +43,14 @@ export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2
43
43
  var SpinnerWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n z-index: 100;\n"], ["\n pointer-events: none;\n z-index: 100;\n"])));
44
44
  var tableHeaderId = "tableHeaderId";
45
45
  var TableView = function (_a) {
46
- var _b;
47
- var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _c = _a.onRowClick, onRowClick = _c === void 0 ? null : _c, _d = _a.sortBy, sortBy = _d === void 0 ? { field: null, direction: null } : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.highlightFirstRow, highlightFirstRow = _f === void 0 ? false : _f, _g = _a.setSortBy, setSortBy = _g === void 0 ? null : _g, _h = _a.rowWidth, rowWidth = _h === void 0 ? 1 : _h, onSectionRendered = _a.onSectionRendered, _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, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "rowHeight", "h", "onTableScroll"]);
46
+ 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.rowWidth, rowWidth = _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, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll"]);
48
47
  var _m = useState(0), scrollLeft = _m[0], setScrollLeft = _m[1];
49
48
  /*
50
49
  multiply the rowWidth by 0.95 to let the user know they can scroll
51
50
  horizontally (will display partial column on the right)
52
51
  */
53
52
  var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
54
- var tableHeadersHeight = ((_b = document.getElementById(tableHeaderId)) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
55
- var tableHeadersUI = (_jsx(_Fragment, { children: data.length > 0 && (_jsx(TableHeaders, __assign({ id: tableHeaderId }, {
53
+ var tableHeadersUI = (_jsx(_Fragment, { children: data.length > 0 && (_jsx(TableHeaders, __assign({ id: tableHeaderId, height: tableHeadersHeight }, {
56
54
  rowHeight: rowHeight,
57
55
  rowWidth: _rowWidth,
58
56
  scrollLeft: scrollLeft,
@@ -84,9 +82,7 @@ var TableView = function (_a) {
84
82
  }, { h: rowHeight, row: data[rowIndex], indexI: rowIndex, isLast: rowIndex === data.length - 1, pRelative: true }), void 0) }), key));
85
83
  };
86
84
  var loadingUI = (_jsx(_Fragment, { children: isLoading && (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}, void 0) }), void 0) }), void 0)) }, void 0));
87
- var tableHeight = pageSize
88
- ? pageSize * rowHeight + defaultTableHeaderHeightPx
89
- : h;
85
+ var tableHeight = pageSize ? pageSize * rowHeight + tableHeadersHeight : h;
90
86
  return (_jsxs(TableViewWrapper, __assign({}, { isLoading: isLoading }, { h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
91
87
  var width = _a.width, height = _a.height;
92
88
  /* using style={{ willChange: "unset" }} is important for having items