@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataImportWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const Tag_1 = require("../../../components/Tag");
-const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const systemFileHandlers_1 = require("../systemFileHandlers");
-const ColumnsSection_1 = require("./sections/ColumnsSection");
-const UploadSection_1 = require("./sections/UploadSection");
-const ValidationSection_1 = require("./sections/ValidationSection");
-const DataImportWizard = (props) => {
+import * as React from 'react';
+import HelpBlock from '../../../components/HelpBlock';
+import { Tag } from '../../../components/Tag';
+import { createBaseContext } from '../../../Utilities/ObjectFactory';
+import { useAdaptable } from '../../AdaptableContext';
+import { OnePageAdaptableWizard } from '../../Wizard/OnePageAdaptableWizard';
+import { parseCSV, systemFileHandlers } from '../systemFileHandlers';
+import { ColumnsSection } from './sections/ColumnsSection';
+import { UploadSection } from './sections/UploadSection';
+import { ValidationSection } from './sections/ValidationSection';
+export const DataImportWizard = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     const module = adaptable.ModuleService.getModuleById('DataImport');
     const [rowData, setRowData] = React.useState(null);
@@ -28,13 +24,13 @@ const DataImportWizard = (props) => {
     const hasDynamicallyAddedPrimaryKey = typeof dataImportOptions._getPrimaryKeyValue === 'function';
     const getPrimaryKeyValue = (rowData) => {
         if (hasDynamicallyAddedPrimaryKey) {
-            return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+            return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
         }
         return rowData[primaryKey];
     };
     const preprocessRowData = (rowData) => {
         if (typeof (dataImportOptions === null || dataImportOptions === void 0 ? void 0 : dataImportOptions._preprocessRowData) === 'function') {
-            return dataImportOptions._preprocessRowData(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+            return dataImportOptions._preprocessRowData(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
         }
         // by default just trim the keys
         let processedRowData = {};
@@ -133,7 +129,7 @@ const DataImportWizard = (props) => {
     const fileHandlers = React.useMemo(() => {
         var _a, _b;
         const userDefinedHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
-        return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
+        return [...userDefinedHandlers, ...systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
         return fileHandlers.map((h) => h.fileExtension).join(', ');
@@ -142,7 +138,7 @@ const DataImportWizard = (props) => {
         var _a, _b;
         const userDefinedFileHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
         const fileExtension = `.${file.name.split('.').pop()}`;
-        const handler = [...userDefinedFileHandlers, ...systemFileHandlers_1.systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
+        const handler = [...userDefinedFileHandlers, ...systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
         if (!handler) {
             adaptable.api.logError(`No file handler found for file extension ${fileExtension}. Please provide a file handler in Data Import Options.`);
             return;
@@ -157,10 +153,10 @@ const DataImportWizard = (props) => {
             adaptable.api.logError(`Error reading file ${file.name}. Please check the file is valid.`);
         }
     }, [adaptable]);
-    const fileMessage = file ? (React.createElement(HelpBlock_1.default, { mb: 2 },
+    const fileMessage = file ? (React.createElement(HelpBlock, { mb: 2 },
         "File ",
-        React.createElement(Tag_1.Tag, null, file.name),
-        " is ready to be imported.")) : (React.createElement(HelpBlock_1.default, { mb: 2 },
+        React.createElement(Tag, null, file.name),
+        " is ready to be imported.")) : (React.createElement(HelpBlock, { mb: 2 },
         "Supported file types: ",
         supportedFileFormats));
     // ---- TEXT IMPORT ----
@@ -176,7 +172,7 @@ const DataImportWizard = (props) => {
                 textHandler = JSON.parse;
             }
             else {
-                textHandler = systemFileHandlers_1.parseCSV;
+                textHandler = parseCSV;
             }
         }
         setText(text);
@@ -212,7 +208,7 @@ const DataImportWizard = (props) => {
             return null;
         }
         return (_a = rowData === null || rowData === void 0 ? void 0 : rowData.reduce) === null || _a === void 0 ? void 0 : _a.call(rowData, (acc, rowData) => {
-            const error = dataImportOptions.validate(Object.assign({ rowData }, (0, ObjectFactory_1.createBaseContext)(adaptable.api)));
+            const error = dataImportOptions.validate(Object.assign({ rowData }, createBaseContext(adaptable.api)));
             const primaryKeyValue = getPrimaryKeyValue(rowData);
             if (error && primaryKeyValue && error.length) {
                 acc[primaryKeyValue] = error;
@@ -228,7 +224,7 @@ const DataImportWizard = (props) => {
         });
         adaptable.api.dataImportApi.internalApi.importData(validData);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
+    return (React.createElement(OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
             handleFinish();
             props.onClose();
         }, onHide: () => {
@@ -241,7 +237,7 @@ const DataImportWizard = (props) => {
                 },
                 details: 'Upload the data',
                 render: () => {
-                    return (React.createElement(UploadSection_1.UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
+                    return (React.createElement(UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
                         // FILE
                         readFile: readFile, supportedFileFormats: supportedFileFormats, fileMessage: fileMessage, 
                         // TEXT
@@ -261,7 +257,7 @@ const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ColumnsSection_1.ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
+                    return (React.createElement(ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
                             setColumnsMap(columnsMap);
                         } }));
                 },
@@ -277,9 +273,8 @@ const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                    return (React.createElement(ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
                 },
             },
         ] }));
 };
-exports.DataImportWizard = DataImportWizard;

package/src/View/DataImport/DataImportWizard/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./DataImportWizard"), exports);
+export * from './DataImportWizard';

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnsSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
-const icons_1 = require("../../../../components/icons");
-const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const AdaptablePopover_1 = require("../../../AdaptablePopover");
-const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import DropdownButton from '../../../../components/DropdownButton';
+import HelpBlock from '../../../../components/HelpBlock';
+import { Icon } from '../../../../components/icons';
+import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { useAdaptable } from '../../../AdaptableContext';
+import { AdaptablePopover } from '../../../AdaptablePopover';
+import UIHelper from '../../../UIHelper';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -22,8 +18,8 @@ const tableDOMProps = {
         flex: 1,
     },
 };
-const ColumnsSection = (props) => {
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+export const ColumnsSection = (props) => {
+    const { api } = useAdaptable();
     const primaryKey = api.optionsApi.getPrimaryKey();
     const allColumns = React.useMemo(() => {
         return api.columnApi
@@ -52,7 +48,7 @@ const ColumnsSection = (props) => {
                 align: 'center',
                 render: (params) => {
                     var _a, _b;
-                    return (React.createElement(CheckBox_1.CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
+                    return (React.createElement(CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
                             handleColumnMapChange(Object.assign(Object.assign({}, params.data), { include: checked }));
                         }, checked: Boolean(params.data.include) }));
                 },
@@ -73,7 +69,7 @@ const ColumnsSection = (props) => {
                                 handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: col.value, include: true }));
                             } });
                     });
-                    return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
+                    return (React.createElement(DropdownButton, { showClearButton: true, onClear: () => {
                             handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: null, include: false }));
                         }, width: "100%", columns: ['label'], items: availableColumns }, (_f = (_c = (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.friendlyName) !== null && _c !== void 0 ? _c : (_e = (_d = params.data) === null || _d === void 0 ? void 0 : _d.abColumn) === null || _e === void 0 ? void 0 : _e.columnId) !== null && _f !== void 0 ? _f : 'Select Column'));
                 },
@@ -85,27 +81,27 @@ const ColumnsSection = (props) => {
                 align: 'center',
                 render: (row) => {
                     if (!row.data.abColumn) {
-                        return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
+                        return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
                     }
-                    const successColor = UIHelper_1.default.getColorByMessageType('Success');
-                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    const successColor = UIHelper.getColorByMessageType('Success');
+                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 },
             },
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (React.createElement(rebass_1.Box, { p: 2 },
-            React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+        return (React.createElement(Box, { p: 2 },
+            React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
                 "No Data has been Imported. Go to ",
-                React.createElement(Tag_1.Tag, null, "Upload"),
+                React.createElement(Tag, null, "Upload"),
                 " step and provide Data")));
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
-                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs, { mb: 2, height: "100%" },
+            React.createElement(Tabs.Tab, null, "Columns"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(DataSource, { data: props.columnsMap, primaryKey: 'field' },
+                    React.createElement(InfiniteTable, { columnPinning: {
                             valid: 'end',
                             type: 'end',
                         }, columnTypes: {
@@ -115,5 +111,4 @@ const ColumnsSection = (props) => {
                             },
                         }, domProps: tableDOMProps, columns: columns }))))));
 };
-exports.ColumnsSection = ColumnsSection;
-exports.ColumnsSection.displayName = 'ColumnsSection';
+ColumnsSection.displayName = 'ColumnsSection';

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPreview = void 0;
-const tslib_1 = require("tslib");
-const lodash_1 = require("lodash");
-const React = tslib_1.__importStar(require("react"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
-const icons_1 = require("../../../../components/icons");
-const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const Tag_1 = require("../../../../components/Tag");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const AdaptablePopover_1 = require("../../../AdaptablePopover");
-const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
-const ObjectFactory_1 = require("../../../../Utilities/ObjectFactory");
+import { flatten } from 'lodash';
+import * as React from 'react';
+import HelpBlock from '../../../../components/HelpBlock';
+import { Icon } from '../../../../components/icons';
+import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import { Tag } from '../../../../components/Tag';
+import { useAdaptable } from '../../../AdaptableContext';
+import { AdaptablePopover } from '../../../AdaptablePopover';
+import UIHelper from '../../../UIHelper';
+import { createBaseContext } from '../../../../Utilities/ObjectFactory';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -33,13 +29,13 @@ const getCellError = (errors, primaryKeyValue, columnId) => {
     var _a, _b;
     return (_b = (_a = getRowErrors(errors, primaryKeyValue)) === null || _a === void 0 ? void 0 : _a.find((e) => e.columnId === columnId)) !== null && _b !== void 0 ? _b : null;
 };
-const DataPreview = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+export const DataPreview = (props) => {
+    const adaptable = useAdaptable();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return (React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+        return (React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
             "No Data has been Imported. Go to ",
-            React.createElement(Tag_1.Tag, null, "Upload"),
+            React.createElement(Tag, null, "Upload"),
             " step and provide Data"));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
@@ -59,7 +55,7 @@ const DataPreview = (props) => {
         };
         const getPrimaryKeyValue = (rowData) => {
             if (typeof dataImportOptions._getPrimaryKeyValue === 'function') {
-                return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+                return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
             }
             return rowData[primaryKey];
         };
@@ -94,12 +90,12 @@ const DataPreview = (props) => {
             align: 'center',
             renderValue: (params) => {
                 const cellErrors = getRowErrors(props.errors, getPrimaryKeyValue(params.data));
-                const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                const successColor = UIHelper.getColorByMessageType('Success');
                 if (!cellErrors || cellErrors.length === 0) {
-                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 }
                 const errorsStr = cellErrors.map((e) => e.error).join(', ');
-                return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
+                return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
             },
         };
         infiniteColumns['type'] = {
@@ -128,9 +124,9 @@ const DataPreview = (props) => {
             border: 'var(--ab-Dataimport-validation-error__border)',
         };
     };
-    return (React.createElement(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
+    return (React.createElement(DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
             const newRowData = [...props.data];
-            const mutationsList = (0, lodash_1.flatten)(Array.from(params.mutations.values()));
+            const mutationsList = flatten(Array.from(params.mutations.values()));
             if (!mutationsList.length) {
                 return;
             }
@@ -142,7 +138,7 @@ const DataPreview = (props) => {
             });
             props.onDataChange(newRowData);
         } },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+        React.createElement(InfiniteTable, { columnPinning: {
                 valid: 'end',
                 type: 'end',
             }, columnTypes: {
@@ -155,4 +151,3 @@ const DataPreview = (props) => {
                 },
             }, domProps: tableDOMProps, columns: columns })));
 };
-exports.DataPreview = DataPreview;

package/src/View/DataImport/DataImportWizard/sections/ImportSection.js

@@ -1,24 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImportSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const check_box_1 = tslib_1.__importDefault(require("../../../../components/icons/check-box"));
-const Tabs_1 = require("../../../../components/Tabs");
-const DataPreview_1 = require("./DataPreview");
-const ImportSection = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
-                        React.createElement(check_box_1.default, null))))),
-        React.createElement(Tabs_1.Tabs, { flex: 1 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(DataPreview_1.DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
+import * as React from 'react';
+import { Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import CheckBox from '../../../../components/icons/check-box';
+import { Tabs } from '../../../../components/Tabs';
+import { DataPreview } from './DataPreview';
+export const ImportSection = (props) => {
+    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(CheckBox, null))))),
+        React.createElement(Tabs, { flex: 1 },
+            React.createElement(Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
 };
-exports.ImportSection = ImportSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.js

@@ -1,11 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImportFileSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const index_1 = tslib_1.__importDefault(require("../../../../../components/FileDroppable/index"));
-const index_2 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
-const ImportFileSection = (props) => {
-    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+import * as React from 'react';
+import FileDroppable from '../../../../../components/FileDroppable/index';
+import HelpBlock from '../../../../../components/HelpBlock/index';
+export const ImportFileSection = (props) => {
+    return (React.createElement(FileDroppable, { loadingText: React.createElement(HelpBlock, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
 };
-exports.ImportFileSection = ImportFileSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-declare type UploadSectionProps = {
+type UploadSectionProps = {
     readFile: (data: File) => Promise<Record<string, unknown>[]>;
     supportedFileFormats: string;
     fileMessage: ReactNode;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.js

@@ -1,23 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadSection = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
-const index_1 = tslib_1.__importDefault(require("../../../../../components/Radio/index"));
-const index_2 = require("../../../../../components/Tabs/index");
-const UploadFileSection_1 = require("./UploadFileSection");
-const UploadTextSection_1 = require("./UploadTextSection");
-const UploadSection = (props) => {
-    return (react_1.default.createElement(rebass_1.Flex, { p: 2, height: "100%", flexDirection: "column" },
-        react_1.default.createElement(index_2.Tabs, { mb: 2 },
-            react_1.default.createElement(index_2.Tabs.Tab, null, "Import Type"),
-            react_1.default.createElement(index_2.Tabs.Content, null,
-                react_1.default.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
-                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
-        react_1.default.createElement(index_2.Tabs, { flex: 1 },
-            react_1.default.createElement(index_2.Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
-            react_1.default.createElement(index_2.Tabs.Content, null, props.importType === 'file' ? (react_1.default.createElement(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (react_1.default.createElement(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
+import React from 'react';
+import { Flex } from 'rebass';
+import Radio from '../../../../../components/Radio/index';
+import { Tabs } from '../../../../../components/Tabs/index';
+import { ImportFileSection } from './UploadFileSection';
+import { ImportTextSection } from './UploadTextSection';
+export const UploadSection = (props) => {
+    return (React.createElement(Flex, { p: 2, height: "100%", flexDirection: "column" },
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Import Type"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(Radio, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
+                    React.createElement(Radio, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
+        React.createElement(Tabs, { flex: 1 },
+            React.createElement(Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
+            React.createElement(Tabs.Content, null, props.importType === 'file' ? (React.createElement(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (React.createElement(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
 };
-exports.UploadSection = UploadSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImportTextSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const index_1 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
-const index_2 = tslib_1.__importDefault(require("../../../../../components/Textarea/index"));
-const ImportTextSection = (props) => {
+import * as React from 'react';
+import HelpBlock from '../../../../../components/HelpBlock/index';
+import Textarea from '../../../../../components/Textarea/index';
+export const ImportTextSection = (props) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
-        props.message && React.createElement(index_1.default, null, props.message)));
+        React.createElement(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
+        props.message && React.createElement(HelpBlock, null, props.message)));
 };
-exports.ImportTextSection = ImportTextSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./UploadSection"), exports);
+export * from './UploadSection';

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
-const DataPreview_1 = require("./DataPreview");
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { Tabs } from '../../../../components/Tabs';
+import { DataPreview } from './DataPreview';
 const getRowErrors = (errors, primaryKeyValue) => {
     if (!errors) {
         return null;
@@ -17,19 +13,18 @@ const getRowErrors = (errors, primaryKeyValue) => {
     }
     return errors[primaryKeyValue];
 };
-const ValidationSection = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
-                        React.createElement(CheckBox_1.CheckBox, { onChange: () => {
+export const ValidationSection = (props) => {
+    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(CheckBox, { onChange: () => {
                                 props.onSkipInvalidRowsChange(!props.skipInvalidRows);
                             }, checked: props.skipInvalidRows }))))),
-        React.createElement(Tabs_1.Tabs, { flex: 1 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(DataPreview_1.DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
+        React.createElement(Tabs, { flex: 1 },
+            React.createElement(Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
 };
-exports.ValidationSection = ValidationSection;

package/src/View/DataImport/systemFileHandlers.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemFileHandlers = exports.parseCSV = void 0;
-const FileDroppable_1 = require("../../components/FileDroppable");
+import { readJSONFile } from '../../components/FileDroppable';
 const jsonHandler = {
     fileExtension: '.json',
-    handleFile: (file) => (0, FileDroppable_1.readJSONFile)(file),
+    handleFile: (file) => readJSONFile(file),
 };
-const parseCSV = (content) => {
+export const parseCSV = (content) => {
     const lines = content.split('\n');
     const headers = lines[0].split(',');
     const data = [];
@@ -26,7 +23,6 @@ const parseCSV = (content) => {
     }
     return data;
 };
-exports.parseCSV = parseCSV;
 const csvFileHandler = {
     fileExtension: '.csv',
     handleFile: (file) => {
@@ -35,10 +31,10 @@ const csvFileHandler = {
             reader.onload = (event) => {
                 var _a;
                 const content = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-                resolve((0, exports.parseCSV)(content));
+                resolve(parseCSV(content));
             };
             reader.readAsText(file);
         });
     },
 };
-exports.systemFileHandlers = [jsonHandler, csvFileHandler];
+export const systemFileHandlers = [jsonHandler, csvFileHandler];

package/src/View/DataSet/DataSetSelector.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataSetSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const DataSetSelector = ({ data }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import Radio from '../../components/Radio';
+import { useAdaptable } from '../AdaptableContext';
+export const DataSetSelector = ({ data }) => {
+    const adaptable = useAdaptable();
     const dataSets = adaptable.api.dataSetApi.getDataSets();
     const selectedDataSet = adaptable.api.dataSetApi.getCurrentDataSet();
     const isDisabled = (dataSets === null || dataSets === void 0 ? void 0 : dataSets.length) === 1;
@@ -14,6 +10,5 @@ const DataSetSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.dataSetApi.setDataSet(data.name);
     }, [isSelected]);
-    return (React.createElement(Radio_1.default, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (React.createElement(Radio, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
-exports.DataSetSelector = DataSetSelector;