fuse-importer 0.13.0 → 0.16.0

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

@@ -31,7 +31,7 @@ import { Div } from "../../../styled/utils";
 import { chevronDown as chevronDownIcon } from "../icons";
 import { SortDirection } from "../TableDataProvider";
 import { columnWidthPercentage, defaultTableHeaderHeightPx, TableViewCellContainer, } from "./common";
-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) {
+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) {
     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    "])));
 });
 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 = _
 export var TableHeadersContainer = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
 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; });
 export var TableHeaders = function (_a) {
-    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"]);
+    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"]);
     var containerRef = useRef(null);
     if (containerRef.current)
         containerRef.current.scrollLeft = scrollLeft;
-    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, props, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
+    return (_jsx(TableHeadersContainer, __assign({ ref: containerRef }, { children: _jsx(TableHeadersContent, __assign({ dflex: true, w: "".concat(100 * rowWidth, "%") }, { children: columns.map(function (column, index) {
                 var header = column.header, Header = column.Header;
                 var onHeaderClick = function () {
                     if (!setSortBy || column.disableSort)
@@ -64,7 +64,7 @@ export var TableHeaders = function (_a) {
                         });
                     }
                 };
-                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));
+                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));
             }) }), void 0) }), void 0));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,5 +1,5 @@
 import { TableViewColumn } from ".";
 export declare const defaultTableRowHeightPx = 60;
-export declare const defaultTableHeaderHeightPx = 59;
+export declare const defaultTableHeaderHeightPx = 60;
 export declare const columnWidthPercentage: (column: TableViewColumn, columns: TableViewColumn[]) => string;
 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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled, { css } from "styled-components";
 import { Div } from "../../../styled/utils";
 export var defaultTableRowHeightPx = 60;
-export var defaultTableHeaderHeightPx = 59;
+export var defaultTableHeaderHeightPx = 60;
 export var columnWidthPercentage = function (column, columns) {
     var totalColumnWidthCount = columns.reduce(function (sum, c) {
         return sum + (c.width ? c.width : 1);

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

@@ -33,8 +33,9 @@ export declare type TableViewProps = {
     highlightFirstRow?: boolean;
     rowWidth?: number;
     rowHeight?: number;
+    tableHeadersHeight?: number;
     onSectionRendered?: (section: TableSection) => void;
     onTableScroll?: (scrollTop: number) => void;
     onRowClick?: (row: any) => void;
 } & DivCSSProps;
-declare const TableView: ({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, rowHeight, h, onTableScroll, ...props }: TableViewProps) => JSX.Element;
+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

@@ -43,16 +43,14 @@ export var TableViewWrapper = styled(Div)(templateObject_2 || (templateObject_2
 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"])));
 var tableHeaderId = "tableHeaderId";
 var TableView = function (_a) {
-    var _b;
-    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"]);
+    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"]);
     var _m = useState(0), scrollLeft = _m[0], setScrollLeft = _m[1];
     /*
       multiply the rowWidth by 0.95 to let the user know they can scroll
       horizontally (will display partial column on the right)
     */
     var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
-    var tableHeadersHeight = ((_b = document.getElementById(tableHeaderId)) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
-    var tableHeadersUI = (_jsx(_Fragment, { children: data.length > 0 && (_jsx(TableHeaders, __assign({ id: tableHeaderId }, {
+    var tableHeadersUI = (_jsx(_Fragment, { children: data.length > 0 && (_jsx(TableHeaders, __assign({ id: tableHeaderId, height: tableHeadersHeight }, {
             rowHeight: rowHeight,
             rowWidth: _rowWidth,
             scrollLeft: scrollLeft,
@@ -84,9 +82,7 @@ var TableView = function (_a) {
             }, { h: rowHeight, row: data[rowIndex], indexI: rowIndex, isLast: rowIndex === data.length - 1, pRelative: true }), void 0) }), key));
     };
     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));
-    var tableHeight = pageSize
-        ? pageSize * rowHeight + defaultTableHeaderHeightPx
-        : h;
+    var tableHeight = pageSize ? pageSize * rowHeight + tableHeadersHeight : h;
     return (_jsxs(TableViewWrapper, __assign({}, { isLoading: isLoading }, { h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
                     /* using style={{ willChange: "unset" }} is important for having items

package/lib/esm/common/TooltipProvider.js

@@ -37,6 +37,14 @@ export var TooltipProvider = function (_a) {
     var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
     var _f = usePopper(referenceElement, popperElement, {
         placement: placement,
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 4],
+                },
+            },
+        ],
     }), styles = _f.styles, attributes = _f.attributes, update = _f.update;
     useEffect(function () {
         if (update)

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

@@ -3,7 +3,6 @@ import { CSSProps } from "../styled/utils";
 export declare const fuseImporterId = "fuse-importer-root";
 declare type MenuItemProps = {
     isSelected?: boolean;
-    isLast?: boolean;
 };
 export declare const MenuItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CSSProps & MenuItemProps, never>;
 declare type LabelProps = {

package/lib/esm/common/index.js

@@ -18,20 +18,18 @@ import styled, { css } from "styled-components";
 import { Div, themeProps } from "../styled/utils";
 import { colors } from "../styled/theme/colorPalette";
 export var fuseImporterId = "fuse-importer-root";
-export var MenuItem = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  ", "\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  ", "\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (p) {
-    return !p.isLast && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-bottom: 8px;\n    "], ["\n      margin-bottom: 8px;\n    "])));
-}, function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.text; }, function (props) { return props.theme.css.body1; }, function (p) { return p.theme.css.selectNone; }, function (p) {
-    return p.isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; });
+export var MenuItem = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  background: ", ";\n  color: ", ";\n  ", "\n  ", ";\n  ", "\n  :hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.text; }, function (props) { return props.theme.css.body1; }, function (p) { return p.theme.css.selectNone; }, function (p) {
+    return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; });
 }, function (props) { return props.theme.colors.blue100; });
-export var FormInputLabel = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return props.theme.css.body4; }, function (props) { return props.theme.colors.text; }, function (props) {
-    return props.isDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (props) { return props.theme.colors.gray500; });
+export var FormInputLabel = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  ", "\n"])), function (props) { return props.theme.css.body4; }, function (props) { return props.theme.colors.text; }, function (props) {
+    return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (props) { return props.theme.colors.gray500; });
 });
 export var InfoDivider = function (_a) {
     var msg = _a.msg;
     return (_jsxs(Div, __assign({ dflex: true, alignCenter: true, mt: 7, mb: 7 }, { children: [_jsx(Div, { w100: true, h: 1, bg: colors.gray300 }, void 0), _jsx(Div, __assign({ w100: true, textAlignCenter: true, c: colors.gray700, body1: true, centered: true, p: 20 }, { children: msg }), void 0), _jsx(Div, { w100: true, h: 1, bg: colors.gray300 }, void 0)] }), void 0));
 };
-export var Avatar = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  border-radius: 100%;\n  height: 36px;\n  width: 36px;\n"], ["\n  ", ";\n  border-radius: 100%;\n  height: 36px;\n  width: 36px;\n"])), themeProps);
-export var Divider = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background: ", ";\n"], ["\n  width: 100%;\n  height: 1px;\n  background: ", ";\n"])), colors.black);
+export var Avatar = styled.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border-radius: 100%;\n  height: 36px;\n  width: 36px;\n"], ["\n  ", ";\n  border-radius: 100%;\n  height: 36px;\n  width: 36px;\n"])), themeProps);
+export var Divider = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background: ", ";\n"], ["\n  width: 100%;\n  height: 1px;\n  background: ", ";\n"])), colors.black);
 export * from "./icons";
 export * from "./inputs";
 export * from "./Table";
@@ -41,4 +39,4 @@ export * from "./logo";
 export * from "./Modal";
 export * from "./Spinner";
 export * from "./TooltipProvider";
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/inputs/Autocomplete.d.ts

@@ -8,12 +8,13 @@ declare type Option = {
 declare type Props = {
     label?: any;
     placeholder?: string;
-    value: any;
+    value?: any;
     onChange: (v: string | null) => void;
     options: Option[];
     isInputDisabled?: boolean;
     onToggle?: (isOpen: boolean) => void;
     placement?: Placement;
+    icon?: JSX.Element;
 } & DivCSSProps;
-declare const Autocomplete: ({ label, isInputDisabled, placeholder, value, onChange, placement, options, onToggle, ...props }: Props) => JSX.Element;
+declare const Autocomplete: ({ label, isInputDisabled, placeholder, value, icon, onChange, placement, options, onToggle, ...props }: Props) => JSX.Element;
 export { Autocomplete };

package/lib/esm/common/inputs/Autocomplete.js

@@ -29,7 +29,6 @@ import { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { MenuItem } from "..";
 import { Div } from "../../styled/utils";
-import { chevronDown } from "../Table/icons";
 import { SelectMenu } from "./SelectMenu";
 import { TextInput as TextInputBase } from "./TextInput";
 var TextInput = styled(TextInputBase)(function (_a) {
@@ -42,16 +41,20 @@ var ClearIcon = styled(Div)(function (_a) {
     var _b = _a.theme, colors = _b.colors, c = _b.css;
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: auto;\n  "], ["\n    pointer-events: auto;\n  "])));
 });
+var ClickableArea = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css, isInputDisabled = _a.isInputDisabled;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isInputDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n        opacity: 0.9;\n      }\n    "]))));
+});
 var Autocomplete = function (_a) {
     var _b;
-    var _c = _a.label, label = _c === void 0 ? null : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Select option..." : _e, value = _a.value, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, props = __rest(_a, ["label", "isInputDisabled", "placeholder", "value", "onChange", "placement", "options", "onToggle"]);
+    var _c = _a.label, label = _c === void 0 ? null : _c, _d = _a.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Select option..." : _e, value = _a.value, icon = _a.icon, onChange = _a.onChange, placement = _a.placement, options = _a.options, onToggle = _a.onToggle, props = __rest(_a, ["label", "isInputDisabled", "placeholder", "value", "icon", "onChange", "placement", "options", "onToggle"]);
     var _f = useState(false), updatedText = _f[0], setUpdatedText = _f[1];
-    var findOptionLabel = ((_b = options.find(function (o) { return o.value === value; })) === null || _b === void 0 ? void 0 : _b.label) || "";
-    var _g = useState(findOptionLabel), text = _g[0], setText = _g[1];
+    var selectedLabel = ((_b = options.find(function (o) { return o.value === value; })) === null || _b === void 0 ? void 0 : _b.label) || "";
+    var _g = useState(selectedLabel), text = _g[0], setText = _g[1];
     var _h = useState(false), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
     useEffect(function () {
         if (value)
-            setText(findOptionLabel);
+            setText(selectedLabel);
         else
             setText("");
     }, [value]);
@@ -60,7 +63,7 @@ var Autocomplete = function (_a) {
     }, [text]);
     useEffect(function () {
         setUpdatedText(false);
-        setText(findOptionLabel);
+        setText(selectedLabel);
         if (onToggle)
             onToggle(isMenuOpen);
     }, [isMenuOpen]);
@@ -75,10 +78,16 @@ var Autocomplete = function (_a) {
     var inputIconUI = text ? (_jsx(ClearIcon, __assign({ clickable: true, dim: 24, centered: true, onClick: function (evt) {
             evt.preventDefault();
             evt.stopPropagation();
-            onChange(null);
-        } }, { children: clearIcon }), void 0)) : (_jsx(Div, __assign({ centered: true, dim: 24 }, { children: chevronDown }), void 0));
-    return (_jsxs(Div, __assign({ w100: true }, props, { children: [_jsx(Div, __assign({ onClick: function () { return setIsMenuOpen(true); } }, { children: _jsx(TextInput, { label: label, isDisabled: isInputDisabled, placeholder: placeholder, value: text, onChange: function (v) { return setText(v); }, icon: inputIconUI }, void 0) }), void 0), filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ isLast: index === filteredOptions.length - 1, isSelected: value === o.value, onClick: function () { return onSelect(o.value); } }, { children: o.label }), void 0) }, index)); }) }), void 0))] }), void 0));
+            onChange(undefined);
+        } }, { children: clearIcon }), void 0)) : (_jsx(Div, __assign({ centered: true, dim: 24 }, { children: icon || chevronDownIcon }), void 0));
+    return (_jsxs(Div, __assign({ w100: true }, props, { children: [_jsx(ClickableArea, __assign({ isInputDisabled: isInputDisabled, onClick: function () { return setIsMenuOpen(true); } }, { children: _jsx(TextInput, { onBlur: function () {
+                        if (filteredOptions.length === 0) {
+                            setText(selectedLabel);
+                            setIsMenuOpen(false);
+                        }
+                    }, label: label, isDisabled: isInputDisabled, placeholder: placeholder, value: text, onChange: function (v) { return setText(v); }, icon: inputIconUI }, void 0) }), void 0), filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ isSelected: value === o.value, onClick: function () { return onSelect(o.value); } }, { children: o.label }), void 0) }, index)); }) }), void 0))] }), void 0));
 };
+var chevronDownIcon = (_jsx("svg", __assign({ width: "16", height: "9", viewBox: "0 0 16 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M14.9263 1L7.9631 7.96317L0.999928 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
 var clearIcon = (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M4 4L12.5161 12.5161", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M4 12.5161L12.5161 3.99998", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
 export { Autocomplete };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/inputs/TextInput.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { DivCSSProps } from "../../styled/utils";
 export declare const HTMLInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextInputIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../styled/utils").CSSProps, never>;
 declare type Props = {
     label?: string;
     icon?: any;

package/lib/esm/common/inputs/TextInput.js

@@ -35,7 +35,7 @@ export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __ma
 }, function (props) {
     return props.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-right: 50px;\n      border: solid 2px ", ";\n    "], ["\n      padding-right: 50px;\n      border: solid 2px ", ";\n    "])), function (props) { return props.theme.colors.error; });
 });
-var Icon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"], ["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"])));
+export var TextInputIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"], ["\n  position: absolute;\n  right: 11px;\n  top: 0;\n  height: 100%;\n"])));
 var TextInput = function (_a) {
     var label = _a.label, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, value = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, onChange = _a.onChange, _e = _a.onBlur, onBlur = _e === void 0 ? null : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f, _g = _a.hasError, hasError = _g === void 0 ? false : _g, _h = _a.onFocus, onFocus = _h === void 0 ? null : _h, _j = _a.withDebounce, withDebounce = _j === void 0 ? true : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, props = __rest(_a, ["label", "icon", "placeholder", "value", "type", "onChange", "onBlur", "isDisabled", "hasError", "onFocus", "withDebounce", "autoFocus"]);
     var _l = useDebounce(value, onChange, withDebounce ? 0 : 300), _value = _l._value, set_Value = _l.set_Value;
@@ -48,7 +48,7 @@ var TextInput = function (_a) {
                         }, onBlur: function () {
                             if (onBlur)
                                 onBlur(_value);
-                        } }), void 0), _jsx(Icon, __assign({ centered: true }, { children: hasError ? errorIcon : _icon }), void 0)] }), void 0)] }), void 0));
+                        } }), void 0), _jsx(TextInputIcon, __assign({ centered: true }, { children: hasError ? errorIcon : _icon }), void 0)] }), void 0)] }), void 0));
 };
 var PIcon = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
     var c = props.theme.css;

package/lib/esm/index.d.ts

@@ -1,10 +1,11 @@
-import { EnvironmentType, OnSubmit, OnValidateBatch, OnValidateRecord } from "./types";
+import { EnvironmentType, ImporterOptions, OnSubmit, OnValidateBatch, OnValidateRecord } from "./types";
 declare class FuseImporter {
     apiToken: string;
-    templateId: string;
+    templateSlug: string;
     env: EnvironmentType;
     zIndex: number;
-    constructor(apiToken: string, templateId: string, env?: EnvironmentType, zIndex?: number);
+    options: ImporterOptions;
+    constructor(apiToken: string, templateSlug: string, options?: ImporterOptions);
     onValidateRecord: OnValidateRecord;
     onValidateBatch: OnValidateBatch;
     onSubmit: OnSubmit;

package/lib/esm/index.js

@@ -1,15 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from "react";
 import ReactDOM from "react-dom";
 import { Importer } from "./Importer";
 import { fuseImporterId } from "./common";
 var FuseImporter = /** @class */ (function () {
-    function FuseImporter(apiToken, templateId, env, zIndex) {
-        if (env === void 0) { env = "local"; }
-        if (zIndex === void 0) { zIndex = 1000; }
+    function FuseImporter(apiToken, templateSlug, options) {
+        if (options === void 0) { options = {}; }
         this.apiToken = apiToken;
-        this.templateId = templateId;
-        this.env = env;
-        this.zIndex = zIndex;
+        this.templateSlug = templateSlug;
+        this.options = __assign({ env: "production", zIndex: 1000, batchValidationDelayMs: 500 }, options);
     }
     FuseImporter.prototype.close = function () {
         var _a;
@@ -25,9 +34,8 @@ var FuseImporter = /** @class */ (function () {
         document.body.appendChild(div);
         ReactDOM.render(React.createElement(Importer, {
             apiToken: this.apiToken,
-            environment: this.env,
-            templateId: this.templateId,
-            zIndex: this.zIndex,
+            templateSlug: this.templateSlug,
+            options: this.options,
             onValidateRecord: this.onValidateRecord,
             onValidateBatch: this.onValidateBatch,
             onSubmit: this.onSubmit,

package/lib/esm/styled/utils.d.ts

@@ -11,4 +11,6 @@ export declare const Div: import("styled-components").StyledComponent<"div", imp
 export declare const Span: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CSSProps, never>;
 export declare const P: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, CSSProps, never>;
 export declare type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type HTMLInputProps = React.InputHTMLAttributes<HTMLInputElement>;
 export declare type DivCSSProps = DivProps & CSSProps;
+export declare type HTMLInputCSSProps = HTMLInputProps & CSSProps;

package/lib/esm/types.d.ts

@@ -1,5 +1,13 @@
 declare const EnvironmentTypes: readonly ["local", "development", "production", "test"];
 export declare type EnvironmentType = typeof EnvironmentTypes[number];
+export declare type SpreadsheetOptions = {
+    batchValidationDelayMs?: number;
+    batchValidationSize?: number;
+};
+export declare type ImporterOptions = {
+    zIndex?: number;
+    env?: EnvironmentType;
+} & SpreadsheetOptions;
 export declare enum FieldTypes {
     boolean = "boolean",
     integer = "integer",
@@ -33,13 +41,17 @@ export declare type ValidationErrors = {
     [k: string]: string;
 };
 export declare type OnValidateRecord = (record: Record) => Promise<ValidationErrors>;
-export declare type OnValidateBatch = (batch: Record[]) => Promise<ValidationErrors[]>;
+export declare type RowValidationError = {
+    rowId: string;
+    errors: ValidationErrors;
+};
+export declare type BatchValidationErrors = {
+    [rowId: string]: ValidationErrors;
+};
+export declare type OnValidateBatch = (batch: Record[]) => Promise<BatchValidationErrors>;
 export declare type AppResponse = {
     errors?: SpreadsheetValidationErrors;
     message?: string;
 };
 export declare type OnSubmit = (reviewedData: Record[]) => Promise<AppResponse>;
-export declare type BatchValidationErrors = {
-    [k: string]: ValidationErrors;
-};
 export {};