fuse-importer 0.25.6 → 0.25.8
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.
- package/lib/esm/Importer/ImporterWithContext.js +9 -6
- package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.js +1 -1
- package/lib/esm/Importer/Matcher/EnumFieldsMatchers/index.js +2 -3
- package/lib/esm/Importer/Matcher/HeaderMatcher/index.js +6 -6
- package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.js +1 -1
- package/lib/esm/Importer/Matcher/index.js +3 -19
- package/lib/esm/Importer/Review/ReviewWithContext.js +4 -8
- package/lib/esm/Importer/Stepper/StepIndex.js +2 -2
- package/lib/esm/Importer/Stepper/index.js +22 -12
- package/lib/esm/Importer/Uploader/DragAndDropImporter/DragAndDropImporter.styles.d.ts +3 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/DragAndDropImporter.styles.js +11 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js +2 -2
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/ImporterSectionHeader.styles.d.ts +7 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/ImporterSectionHeader.styles.js +11 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/index.d.ts +7 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/index.js +44 -0
- package/lib/esm/Importer/Uploader/DragAndDropImporter/index.js +7 -45
- package/lib/esm/Importer/Uploader/HeaderButtons.js +4 -7
- package/lib/esm/Importer/Uploader/HeadersPreview.js +9 -1
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider.d.ts +1 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider.js +9 -1
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData.js +2 -2
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.js +9 -12
- package/lib/esm/Importer/common/Spreadsheet/components/ValidationProgress.js +1 -1
- package/lib/esm/Importer/common/Spreadsheet/components/fields/SpeadsheetAutocomplete.js +1 -1
- package/lib/esm/Importer/common/Spreadsheet/components/fields/SpreadsheetInput.js +3 -3
- package/lib/esm/Importer/common/Spreadsheet/hooks.js +3 -2
- package/lib/esm/Importer/common/Spreadsheet/styles.d.ts +1 -1
- package/lib/esm/Importer/common/Spreadsheet/styles.js +1 -1
- package/lib/esm/Importer/data/index.js +7 -1
- package/lib/esm/common/Table/TableActions/DeleteSelectedRows.d.ts +0 -1
- package/lib/esm/common/Table/TableActions/DeleteSelectedRows.js +2 -2
- package/lib/esm/common/Table/TableActions/ExportData.d.ts +3 -0
- package/lib/esm/common/Table/TableActions/ExportData.js +21 -0
- package/lib/esm/common/Table/TableActions/SearchRows.js +2 -2
- package/lib/esm/common/Table/TableActions/TableActions.d.ts +1 -3
- package/lib/esm/common/Table/TableActions/TableActions.js +3 -16
- package/lib/esm/common/Table/TableActions/TableActions.styles.d.ts +5 -0
- package/lib/esm/common/Table/TableActions/TableActions.styles.js +17 -0
- package/lib/esm/common/Table/TableActions/icons.d.ts +1 -0
- package/lib/esm/common/Table/TableActions/icons.js +1 -0
- package/lib/esm/common/Table/TableView/CustomScrollbar.d.ts +2 -0
- package/lib/esm/common/Table/TableView/CustomScrollbar.js +34 -0
- package/lib/esm/common/Table/TableView/TableCells.js +2 -2
- package/lib/esm/common/Table/TableView/TableHeaders.d.ts +6 -2
- package/lib/esm/common/Table/TableView/TableHeaders.js +11 -8
- package/lib/esm/common/Table/TableView/TableRow.d.ts +2 -1
- package/lib/esm/common/Table/TableView/TableRow.js +4 -4
- package/lib/esm/common/Table/TableView/common.d.ts +5 -1
- package/lib/esm/common/Table/TableView/common.js +11 -4
- package/lib/esm/common/Table/TableView/index.d.ts +4 -1
- package/lib/esm/common/Table/TableView/index.js +24 -11
- package/lib/esm/common/Table/index.js +1 -1
- package/lib/esm/common/buttons.js +21 -14
- package/lib/esm/common/icons/index.d.ts +1 -1
- package/lib/esm/common/icons/index.js +4 -1
- package/lib/esm/common/inputs/Checkbox.js +1 -1
- package/lib/esm/common/inputs/TextInput.js +1 -1
- package/lib/esm/locales/en.js +2 -2
- package/lib/esm/styled/theme/textStyles.js +2 -2
- package/lib/main.js +11 -11
- package/package.json +2 -1
|
@@ -6,6 +6,7 @@ export * from "./TableHeaders";
|
|
|
6
6
|
export * from "./TableRow";
|
|
7
7
|
type TableViewWrapperProps = {
|
|
8
8
|
isLoading: boolean;
|
|
9
|
+
checkboxColumnWidth?: number;
|
|
9
10
|
};
|
|
10
11
|
export declare const TableViewWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & TableViewWrapperProps, never>;
|
|
11
12
|
export type TableViewColumn = {
|
|
@@ -39,5 +40,7 @@ export type TableViewProps = {
|
|
|
39
40
|
getItemKey?: (row: any) => string;
|
|
40
41
|
shouldBeDraggable?: boolean;
|
|
41
42
|
isInsideImporter?: boolean;
|
|
43
|
+
checkboxColumnWidth?: number;
|
|
44
|
+
isSpreadsheetTable?: boolean;
|
|
42
45
|
} & DivCSSProps;
|
|
43
|
-
export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, ...props }: TableViewProps) => JSX.Element>;
|
|
46
|
+
export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, isInsideImporter, checkboxColumnWidth, ...props }: TableViewProps) => JSX.Element>;
|
|
@@ -35,15 +35,19 @@ import { Spinner } from "../../Spinner";
|
|
|
35
35
|
import { defaultTableRowHeightPx, defaultTableHeaderHeightPx } from "./common";
|
|
36
36
|
import { TableHeaders } from "./TableHeaders";
|
|
37
37
|
import { Cell, DraggableCell } from "./TableCells";
|
|
38
|
+
import { CustomScrollbarsVirtualList } from "./CustomScrollbar";
|
|
38
39
|
export * from "./common";
|
|
39
40
|
export * from "./TableHeaders";
|
|
40
41
|
export * from "./TableRow";
|
|
41
|
-
export var TableViewWrapper = styled(Div)(
|
|
42
|
+
export var TableViewWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n\n ", "\n\n // prevents clipped dropdowns\n .ReactVirtualized__Grid__innerScrollContainer {\n overflow: visible !important;\n }\n .ReactVirtualized__Table__row {\n overflow: visible !important;\n }\n\n // fix scrollbar layout issues on windows/macos\n .ReactVirtualized__Grid {\n ", ";\n }\n"], ["\n ", "\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n\n ", "\n\n // prevents clipped dropdowns\n .ReactVirtualized__Grid__innerScrollContainer {\n overflow: visible !important;\n }\n .ReactVirtualized__Table__row {\n overflow: visible !important;\n }\n\n // fix scrollbar layout issues on windows/macos\n .ReactVirtualized__Grid {\n ", ";\n }\n"])), function (p) {
|
|
42
43
|
return p.isLoading && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0.5;\n "], ["\n opacity: 0.5;\n "])));
|
|
43
|
-
}, function (p) { return p.theme.colors.gray300; }, function (
|
|
44
|
-
var
|
|
44
|
+
}, function (p) { return p.theme.colors.gray300; }, function (_a) {
|
|
45
|
+
var checkboxColumnWidth = _a.checkboxColumnWidth;
|
|
46
|
+
return checkboxColumnWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: calc(100vw - ", "px);\n "], ["\n max-width: calc(100vw - ", "px);\n "])), checkboxColumnWidth);
|
|
47
|
+
}, function (p) { return p.theme.css.scrollbarDark; });
|
|
48
|
+
var SpinnerWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n pointer-events: none;\n z-index: 100;\n"], ["\n pointer-events: none;\n z-index: 100;\n"])));
|
|
45
49
|
var tableHeaderId = "tableHeaderId";
|
|
46
|
-
var StyledGrid = styled(Grid)(
|
|
50
|
+
var StyledGrid = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n scrollbar-width: thin;\n\n /* width */\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background-color: #b1b1b2;\n border-radius: 3px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n"], ["\n scrollbar-width: thin;\n\n /* width */\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background-color: #b1b1b2;\n border-radius: 3px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n"])));
|
|
47
51
|
var buildGridStyles = function (rowWidth) {
|
|
48
52
|
/* using style={{ willChange: "unset" }} is important for having items
|
|
49
53
|
like backdrops with position fixed inside of the table working as
|
|
@@ -55,18 +59,19 @@ var buildGridStyles = function (rowWidth) {
|
|
|
55
59
|
if (rowWidth === 1)
|
|
56
60
|
gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
|
|
57
61
|
else if (rowWidth > 1)
|
|
58
|
-
gridStyles = __assign(__assign({}, gridStyles), { overflowX: "
|
|
62
|
+
gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden" });
|
|
59
63
|
return gridStyles;
|
|
60
64
|
};
|
|
61
65
|
export var TableView = React.memo(function (_a) {
|
|
62
|
-
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, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter"]);
|
|
66
|
+
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, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter", "checkboxColumnWidth"]);
|
|
63
67
|
/*
|
|
64
68
|
multiply the rowWidth by 0.95 to let the user know they can scroll
|
|
65
69
|
horizontally (will display partial column on the right)
|
|
66
70
|
*/
|
|
67
71
|
var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
|
|
68
72
|
var headerContainerRef = useRef();
|
|
69
|
-
var
|
|
73
|
+
var listRef = useRef();
|
|
74
|
+
var tableHeadersUI = data.length > 0 && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy, isSpreadsheetTable: isInsideImporter }));
|
|
70
75
|
var onScroll = function (_a) {
|
|
71
76
|
var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
|
|
72
77
|
if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
|
|
@@ -97,10 +102,18 @@ export var TableView = React.memo(function (_a) {
|
|
|
97
102
|
highlightFirstRow: highlightFirstRow,
|
|
98
103
|
rowHeight: rowHeight,
|
|
99
104
|
getItemKey: getItemKey,
|
|
100
|
-
|
|
101
|
-
|
|
105
|
+
isSpreadsheetTable: isInsideImporter,
|
|
106
|
+
}); }, [
|
|
107
|
+
data,
|
|
108
|
+
onRowClick,
|
|
109
|
+
columns,
|
|
110
|
+
highlightFirstRow,
|
|
111
|
+
rowHeight,
|
|
112
|
+
isInsideImporter,
|
|
113
|
+
]);
|
|
114
|
+
return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth }, (!isInsideImporter ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
|
|
102
115
|
var width = _a.width, height = _a.height;
|
|
103
|
-
return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
|
|
116
|
+
return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length, ref: listRef, outerElementType: isInsideImporter ? CustomScrollbarsVirtualList : undefined }, { children: Cell })))] }));
|
|
104
117
|
} })] })));
|
|
105
118
|
}, areEqual);
|
|
106
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
119
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -72,7 +72,7 @@ import { TableView as TableViewBase } from "./TableView";
|
|
|
72
72
|
import { useReorderRows } from "./useReorderRows";
|
|
73
73
|
import { addToast } from "../../common/Toast";
|
|
74
74
|
var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
75
|
-
return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0px;\n
|
|
75
|
+
return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0px;\n "], ["\n border-radius: 0px;\n "])));
|
|
76
76
|
});
|
|
77
77
|
var Table = function (_a) {
|
|
78
78
|
var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.shouldBeDraggable, shouldBeDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "shouldBeDraggable"]);
|
|
@@ -53,30 +53,37 @@ var getSvgStrokeColorForActiveState = function (props) {
|
|
|
53
53
|
var getSvgStrokeColorForDisabledState = function (props) {
|
|
54
54
|
return get(props, "svgDisabledStrokeColorOverride", get(props.theme, "colors.black"));
|
|
55
55
|
};
|
|
56
|
+
var withoutBrandingCSS = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n text-decoration: underline;\n"], ["\n text-decoration: underline;\n"])));
|
|
57
|
+
var withBrandingCSS = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n :hover {\n background: transparent;\n text-decoration: underline;\n }\n"], ["\n :hover {\n background: transparent;\n text-decoration: underline;\n }\n"])));
|
|
56
58
|
var styles = {
|
|
57
|
-
primary: css(
|
|
58
|
-
return props.isDisabled && css(
|
|
59
|
+
primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n\n border: solid 4px ", ";\n box-sizing: border-box;\n\n :hover {\n background: ", ";\n /* a3 at the end adds 0.64 opacity */\n box-shadow: 0px 0px 8px ", "a3;\n }\n :active {\n background: ", ";\n border: 4px solid ", ";\n }\n :focus {\n background: ", ";\n /* a3 at the end adds 0.64 opacity */\n box-shadow: 0px 0px 8px ", "a3;\n }\n ", "\n "], ["\n color: ", ";\n background: ", ";\n\n border: solid 4px ", ";\n box-sizing: border-box;\n\n :hover {\n background: ", ";\n /* a3 at the end adds 0.64 opacity */\n box-shadow: 0px 0px 8px ", "a3;\n }\n :active {\n background: ", ";\n border: 4px solid ", ";\n }\n :focus {\n background: ", ";\n /* a3 at the end adds 0.64 opacity */\n box-shadow: 0px 0px 8px ", "a3;\n }\n ", "\n "])), function (props) { return props.theme.colors.white; }, getBgColor, getBgColor, getBgColor, getBgColor, getBgColor, getBorderColor, getBgColor, getBgColor, function (props) {
|
|
60
|
+
return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", " !important;\n opacity: 0.4;\n box-shadow: none !important;\n border: none !important;\n cursor: not-allowed !important;\n "], ["\n background: ", " !important;\n opacity: 0.4;\n box-shadow: none !important;\n border: none !important;\n cursor: not-allowed !important;\n "])), getBgColor);
|
|
59
61
|
}),
|
|
60
|
-
secondary: css(
|
|
61
|
-
return props.isDisabled && css(
|
|
62
|
+
secondary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n box-sizing: border-box;\n border: solid 1px ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n :active {\n border: 1px solid ", ";\n background: ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n }\n :focus {\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n }\n ", "\n "], ["\n background: ", ";\n box-sizing: border-box;\n border: solid 1px ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n :active {\n border: 1px solid ", ";\n background: ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n }\n :focus {\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n }\n ", "\n "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, getSvgFillColorForNormalState, getSvgStrokeColorForNormalState, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, getSvgFillColorForActiveState, getSvgStrokeColorForActiveState, function (props) {
|
|
63
|
+
return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 2px solid ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n "], ["\n border: 2px solid ", ";\n color: ", ";\n & > svg {\n & > path {\n fill: ", ";\n stroke: ", ";\n }\n }\n "])), function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; }, getSvgFillColorForDisabledState, getSvgStrokeColorForDisabledState);
|
|
62
64
|
}),
|
|
63
|
-
tertiary: css(
|
|
64
|
-
return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (props) { return props.theme.colors.gray300; });
|
|
65
|
-
}),
|
|
66
|
-
link: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n text-decoration: underline;\n :hover {\n background: ", ";\n }\n :active {\n background: ", ";\n color: ", ";\n }\n ", "\n "], ["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n text-decoration: underline;\n :hover {\n background: ", ";\n }\n :active {\n background: ", ";\n color: ", ";\n }\n ", "\n "])), function (props) { return props.theme.colors.text; }, function (props) { return props.theme.colors.white50; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) {
|
|
65
|
+
tertiary: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n :hover {\n background: ", ";\n }\n :active {\n background: ", ";\n color: ", ";\n }\n ", "\n "], ["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n :hover {\n background: ", ";\n }\n :active {\n background: ", ";\n color: ", ";\n }\n ", "\n "])), function (props) { return props.theme.colors.text; }, function (props) { return props.theme.colors.white50; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) {
|
|
67
66
|
return props.isDisabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (props) { return props.theme.colors.gray300; });
|
|
68
67
|
}),
|
|
68
|
+
link: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n :active {\n background: ", ";\n color: ", ";\n }\n "], ["\n background: transparent;\n border: solid 1px transparent;\n color: ", ";\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n :active {\n background: ", ";\n color: ", ";\n }\n "])), function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white50; }, function (props) {
|
|
69
|
+
return props.isDisabled && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (props) { return props.theme.colors.gray300; });
|
|
70
|
+
}, function (_a) {
|
|
71
|
+
var theme = _a.theme;
|
|
72
|
+
return theme.colors.black === "black"
|
|
73
|
+
? withoutBrandingCSS
|
|
74
|
+
: withBrandingCSS;
|
|
75
|
+
}, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }),
|
|
69
76
|
};
|
|
70
|
-
var commonButtonStyle = css(
|
|
71
|
-
return props.isSmall && css(
|
|
77
|
+
var commonButtonStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 12px 24px;\n user-select: none;\n width: fit-content;\n\n ", "\n\n border: solid 1px black;\n border-radius: 4px;\n\n font-family: DM Sans;\n\n :focus {\n outline: none;\n }\n :hover {\n cursor: pointer;\n }\n\n ", "\n ", ";\n\n ", ";\n"], ["\n padding: 12px 24px;\n user-select: none;\n width: fit-content;\n\n ", "\n\n border: solid 1px black;\n border-radius: 4px;\n\n font-family: DM Sans;\n\n :focus {\n outline: none;\n }\n :hover {\n cursor: pointer;\n }\n\n ", "\n ", ";\n\n ", ";\n"])), function (props) {
|
|
78
|
+
return props.isSmall && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n padding: 6px 20px;\n "], ["\n padding: 6px 20px;\n "])));
|
|
72
79
|
}, function (props) {
|
|
73
|
-
return props.isDisabled && css(
|
|
80
|
+
return props.isDisabled && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
74
81
|
}, function (props) {
|
|
75
82
|
var c = props.theme.css;
|
|
76
83
|
return [c.centered, c.buttonText];
|
|
77
84
|
}, function (props) { return styles[props.variant || "primary"]; });
|
|
78
|
-
export var ButtonWrapper = styled(Div)(
|
|
79
|
-
export var ButtonElementWrapper = styled(HTMLButton)(
|
|
85
|
+
export var ButtonWrapper = styled(Div)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), commonButtonStyle);
|
|
86
|
+
export var ButtonElementWrapper = styled(HTMLButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), commonButtonStyle);
|
|
80
87
|
export var Button = function (_a) {
|
|
81
88
|
var _b = _a.onClick, onClick = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.isSmall, isSmall = _e === void 0 ? false : _e, children = _a.children, _f = _a.isButtonElement, isButtonElement = _f === void 0 ? false : _f, props = __rest(_a, ["onClick", "isDisabled", "variant", "isSmall", "children", "isButtonElement"]);
|
|
82
89
|
return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ isSmall: isSmall, isDisabled: isDisabled, disabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ role: "button", w: "fit-content", p: 12, isSmall: isSmall, onClick: isDisabled ? null : onClick, onKeyDown: function (_a) {
|
|
@@ -87,4 +94,4 @@ export var Button = function (_a) {
|
|
|
87
94
|
}
|
|
88
95
|
}, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick, disabled: isDisabled }, props), { children: _jsx(_Fragment, { children: children }) }))) }));
|
|
89
96
|
};
|
|
90
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
97
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -4,7 +4,7 @@ export declare const checkIcon: JSX.Element;
|
|
|
4
4
|
export declare const greenCheckIcon: JSX.Element;
|
|
5
5
|
export declare const redXIcon: JSX.Element;
|
|
6
6
|
export declare const defaultCheckIcon: JSX.Element;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const WhiteCheckIcon: () => JSX.Element;
|
|
8
8
|
export declare const chevronLeftIcon: JSX.Element;
|
|
9
9
|
export declare const ChevronRightIcon: () => JSX.Element;
|
|
10
10
|
export declare const weatherStarsIcon: JSX.Element;
|
|
@@ -17,7 +17,10 @@ export var checkIcon = (_jsx("svg", __assign({ width: "12", height: "10", viewBo
|
|
|
17
17
|
export var greenCheckIcon = (_jsx("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22ZM8.70711 10.2426C8.31658 9.85208 7.68342 9.85208 7.29289 10.2426C6.90237 10.6331 6.90237 11.2663 7.29289 11.6568L9.41421 13.7781L10.1213 14.4852L10.8284 13.7781L15.0711 9.53549C15.4616 9.14497 15.4616 8.5118 15.0711 8.12128C14.6805 7.73076 14.0474 7.73076 13.6569 8.12128L10.1213 11.6568L8.70711 10.2426Z", fill: "#00D085" }) })));
|
|
18
18
|
export var redXIcon = (_jsxs("svg", __assign({ width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "9.49967", cy: "8.99992", r: "7.79167", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M7.375 6.875L11.625 11.125", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.375 11.125L11.625 6.875", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
19
19
|
export var defaultCheckIcon = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "12", cy: "12", r: "11", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M9 11.9497L11.1213 14.071L15.364 9.82839", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })));
|
|
20
|
-
export var
|
|
20
|
+
export var WhiteCheckIcon = function () {
|
|
21
|
+
var theme = useTheme();
|
|
22
|
+
return (_jsx("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22ZM8.70711 10.2426C8.31658 9.85208 7.68342 9.85208 7.29289 10.2426C6.90237 10.6331 6.90237 11.2663 7.29289 11.6568L9.41421 13.7781L10.1213 14.4852L10.8284 13.7781L15.0711 9.53549C15.4616 9.14497 15.4616 8.5118 15.0711 8.12128C14.6805 7.73076 14.0474 7.73076 13.6569 8.12128L10.1213 11.6568L8.70711 10.2426Z", fill: theme.colors.blue500 }) })));
|
|
23
|
+
};
|
|
21
24
|
export var chevronLeftIcon = (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "8", height: "14", viewBox: "0 0 8 14", fill: "none" }, { children: _jsx("path", { d: "M6.22266 1.75L1.00028 6.97238L6.22266 12.1948", stroke: "#000000", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
22
25
|
export var ChevronRightIcon = function () {
|
|
23
26
|
var theme = useTheme();
|
|
@@ -38,7 +38,7 @@ var Checkbox = function (_a) {
|
|
|
38
38
|
var handleOnChange = function (event) {
|
|
39
39
|
if (!onChange)
|
|
40
40
|
return;
|
|
41
|
-
if (event.shiftKey && onShiftKeyPressed) {
|
|
41
|
+
if ((event.shiftKey || event.nativeEvent.metaKey) && onShiftKeyPressed) {
|
|
42
42
|
onShiftKeyPressed();
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
@@ -31,7 +31,7 @@ import { FormInputLabel } from "..";
|
|
|
31
31
|
import { useDebounce } from "../../hooks";
|
|
32
32
|
import { Div } from "../../styled/utils";
|
|
33
33
|
import Tooltip from "./tooltip";
|
|
34
|
-
export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n padding: ", ";\n height: 68px;\n outline: none;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: 8px;\n width: 100%;\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n -moz-appearance: textfield;\n\n ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", ";\n\n /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n box-shadow: 0px 0px 8px ", "3d;\n }\n\n ", "\n ", "\n"], ["\n position: relative;\n padding: ", ";\n height: 68px;\n outline: none;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: 8px;\n width: 100%;\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n -moz-appearance: textfield;\n\n ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", ";\n\n /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n box-shadow: 0px 0px 8px ", "3d;\n }\n\n ", "\n ", "\n"])), function (_a) {
|
|
34
|
+
export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n\n /* TODO: remove !important's when we start rendering importer through iframe */\n padding: ", " !important;\n height: 68px !important;\n margin: 0px !important;\n box-shadow: none !important;\n\n outline: none;\n\n border: 1px solid ", " !important;\n box-sizing: border-box;\n border-radius: 8px;\n width: 100%;\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n -moz-appearance: textfield;\n\n ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", "!important;\n\n /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n box-shadow: 0px 0px 8px ", "3d !important;\n }\n\n /* TODO: remove !important's when we start rendering importer through iframe */\n :hover {\n box-shadow: none !important;\n background: transparent !important;\n }\n\n ", "\n ", "\n"], ["\n position: relative;\n\n /* TODO: remove !important's when we start rendering importer through iframe */\n padding: ", " !important;\n height: 68px !important;\n margin: 0px !important;\n box-shadow: none !important;\n\n outline: none;\n\n border: 1px solid ", " !important;\n box-sizing: border-box;\n border-radius: 8px;\n width: 100%;\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n -moz-appearance: textfield;\n\n ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", "!important;\n\n /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n box-shadow: 0px 0px 8px ", "3d !important;\n }\n\n /* TODO: remove !important's when we start rendering importer through iframe */\n :hover {\n box-shadow: none !important;\n background: transparent !important;\n }\n\n ", "\n ", "\n"])), function (_a) {
|
|
35
35
|
var padding = _a.padding;
|
|
36
36
|
return (padding ? padding : "20px 16px");
|
|
37
37
|
}, function (props) { return props.theme.colors.gray300; }, function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.placeholder; }, function (props) { return props.theme.colors.blue500; }, function (props) { return props.theme.colors.blue500; }, function (props) {
|
package/lib/esm/locales/en.js
CHANGED
|
@@ -13,8 +13,8 @@ export default {
|
|
|
13
13
|
headers_preview: {
|
|
14
14
|
title: "Verify Your Column Headers",
|
|
15
15
|
description: "File must contain column headers to proceed.",
|
|
16
|
-
cancel: "
|
|
17
|
-
continue: "
|
|
16
|
+
cancel: "Re-upload file",
|
|
17
|
+
continue: "Continue",
|
|
18
18
|
},
|
|
19
19
|
error: {
|
|
20
20
|
title: "Something’s wrong",
|
|
@@ -5,9 +5,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import { css } from "../themeType";
|
|
6
6
|
export var textStyles = {
|
|
7
7
|
h1: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: DM Serif Display;\n font-weight: 400;\n font-style: normal;\n font-size: 48px;\n line-height: 72px;\n "], ["\n font-family: DM Serif Display;\n font-weight: 400;\n font-style: normal;\n font-size: 48px;\n line-height: 72px;\n "]))),
|
|
8
|
-
h2: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: DM
|
|
8
|
+
h2: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 28px;\n line-height: 36px;\n "], ["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 28px;\n line-height: 36px;\n "]))),
|
|
9
9
|
h3: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 40px;\n line-height: 48px;\n "], ["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 40px;\n line-height: 48px;\n "]))),
|
|
10
|
-
h4: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: DM
|
|
10
|
+
h4: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 400;\n font-style: normal;\n font-size: 32px;\n line-height: 48px;\n "], ["\n font-family: DM Sans;\n font-weight: 400;\n font-style: normal;\n font-size: 32px;\n line-height: 48px;\n "]))),
|
|
11
11
|
h5: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 24px;\n line-height: 36px;\n "], ["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 24px;\n line-height: 36px;\n "]))),
|
|
12
12
|
h6: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 20px;\n line-height: 32px;\n "], ["\n font-family: DM Sans;\n font-weight: 700;\n font-style: normal;\n font-size: 20px;\n line-height: 32px;\n "]))),
|
|
13
13
|
subtitle: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-family: DM Sans;\n font-weight: 500;\n font-style: normal;\n font-size: 18px;\n line-height: 24px;\n "], ["\n font-family: DM Sans;\n font-weight: 500;\n font-style: normal;\n font-size: 18px;\n line-height: 24px;\n "]))),
|