@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
@@ -22,26 +23,9 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
-            disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
-            suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
-            enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
-            (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
+        const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && (_jsx(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && (_jsx(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
-            enabled && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
-                !!activationTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    DateFormatter(activationTime, { Pattern: dateFormat }),
-                    ")")))),
-            suspended && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
-                !!suspensionTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    DateFormatter(suspensionTime, { Pattern: dateFormat }),
-                    ")")))),
-            disabled && React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
+        const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && _jsx(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -58,19 +42,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
             .getAdaptableInstance()
             .agGridThemeAdapter.getAgGridThemeMode();
         const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
-                React.createElement(Flex, { style: {
-                        color: 'var(--ab-dashboard__color)',
-                        background: 'var(--ab-dashboard__background)',
-                    } },
-                    React.createElement(Flex, { flexDirection: 'row' },
-                        buttonPanel,
-                        statusPanel)),
-                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column' },
-                    React.createElement("div", { id: adaptableContainerId }),
-                    React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
-                    React.createElement(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
+        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [_jsx(Flex, { style: {
+                            color: 'var(--ab-dashboard__color)',
+                            background: 'var(--ab-dashboard__background)',
+                        }, children: _jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), _jsxs(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: [_jsx("div", { id: adaptableContainerId }), _jsx("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }), _jsx(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })] })] }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DataChangeHistoryViewPanelControl } from './DataChangeHistoryViewPanel';
 export const DataChangeHistoryStatusBarContent = () => {
-    return React.createElement(DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
+    return _jsx(DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
 };

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
@@ -29,23 +30,8 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = props.gap ?? 'var(--ab-base-space)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
-    const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
-        disabled && (React.createElement(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-        suspended && (React.createElement(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-        enabled && (React.createElement(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
-        (enabled || suspended) && (React.createElement(ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+    const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY }, children: [disabled && (_jsx(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })), suspended && (_jsx(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })), enabled && (_jsx(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })), (enabled || suspended) && (_jsx(ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))] }));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-    const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
-        enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success" }, "Active"))),
-        suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn" }, "Suspended"))),
-        disabled && (React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2" }, "Activate Data Tracking"))));
-    return (React.createElement(Flex, { flexDirection: 'row' },
-        buttonPanel,
-        statusPanel,
-        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-            React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
-                React.createElement(Icon, { name: "open-in-new" }),
-                React.createElement(Box, { className: "twa:ml-1" }, "Show")))));
+    const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && (_jsx(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && (_jsx(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && (_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
+    return (_jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel, _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsxs(SimpleButton, { onClick: handleOpenPopup, variant: "text", children: [_jsx(Icon, { name: "open-in-new" }), _jsx(Box, { className: "twa:ml-1", children: "Show" })] }) })] }));
 };

package/src/View/DataImport/DataImportPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import HelpBlock from '../../components/HelpBlock';
 import SimpleButton from '../../components/SimpleButton';
@@ -12,16 +13,11 @@ export const DataImportPopup = (props) => {
             setIsWizardOpen(true);
         }
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
-            React.createElement(Box, null,
-                React.createElement(HelpBlock, { className: "twa:mb-2 twa:text-3" }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
-                React.createElement(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
-        isWizardOpen && (React.createElement(DataImportWizard, { onClose: () => {
-                setIsWizardOpen(false);
-                if (props?.popupParams == undefined ||
-                    ['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes(props?.popupParams?.source)) {
-                    props.onClosePopup();
-                }
-            } }))));
+    return (_jsxs(_Fragment, { children: [_jsx(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage, children: _jsxs(Box, { children: [_jsx(HelpBlock, { className: "twa:mb-2 twa:text-3", children: "Click the 'Import Data' button to Insert or Update data into AdapTable" }), _jsx(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true), children: "Import Data" })] }) }), isWizardOpen && (_jsx(DataImportWizard, { onClose: () => {
+                    setIsWizardOpen(false);
+                    if (props?.popupParams == undefined ||
+                        ['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes(props?.popupParams?.source)) {
+                        props.onClosePopup();
+                    }
+                } }))] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
@@ -156,12 +157,7 @@ export const DataImportWizard = (props) => {
             adaptableApi.logError(`Error reading file ${file.name}. Please check the file is valid.`);
         }
     }, [adaptable]);
-    const fileMessage = file ? (React.createElement(HelpBlock, { className: "twa:mb-2" },
-        "File ",
-        React.createElement(Tag, null, file.name),
-        " is ready to be imported.")) : (React.createElement(HelpBlock, { className: "twa:mb-2" },
-        "Supported file types: ",
-        supportedFileFormats));
+    const fileMessage = file ? (_jsxs(HelpBlock, { className: "twa:mb-2", children: ["File ", _jsx(Tag, { children: file.name }), " is ready to be imported."] })) : (_jsxs(HelpBlock, { className: "twa:mb-2", children: ["Supported file types: ", supportedFileFormats] }));
     // ---- TEXT IMPORT ----
     const [textError, setTextError] = React.useState(null);
     const handleTextChange = React.useCallback(async (text) => {
@@ -228,7 +224,7 @@ export const DataImportWizard = (props) => {
         });
         adaptableApi.dataImportApi.internalApi.importData(validData);
     };
-    return (React.createElement(OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
+    return (_jsx(OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
             handleFinish();
             props.onClose();
         }, onHide: () => {
@@ -241,7 +237,7 @@ export const DataImportWizard = (props) => {
                 },
                 details: 'Upload the data',
                 render: () => {
-                    return (React.createElement(UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
+                    return (_jsx(UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
                         // FILE
                         readFile: readFile, supportedFileFormats: supportedFileFormats, fileMessage: fileMessage, 
                         // TEXT
@@ -261,7 +257,7 @@ export const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
+                    return (_jsx(ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
                             setColumnsMap(columnsMap);
                         } }));
                 },
@@ -277,7 +273,7 @@ export const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                    return (_jsx(ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
                 },
             },
         ] }));

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
@@ -46,7 +47,7 @@ export const ColumnsSection = (props) => {
                 maxWidth: 110,
                 align: 'center',
                 render: (params) => {
-                    return (React.createElement(CheckBox, { disabled: params.data?.abColumn?.field === primaryKey, onChange: (checked) => {
+                    return (_jsx(CheckBox, { disabled: params.data?.abColumn?.field === primaryKey, onChange: (checked) => {
                             handleColumnMapChange({
                                 ...params.data,
                                 include: checked,
@@ -76,15 +77,15 @@ export const ColumnsSection = (props) => {
                             },
                         };
                     });
-                    return (React.createElement(DropdownButton, { showClearButton: true, onClear: () => {
+                    return (_jsx(DropdownButton, { showClearButton: true, onClear: () => {
                             handleColumnMapChange({
                                 ...params.data,
                                 abColumn: null,
                                 include: false,
                             });
-                        }, className: "twa:w-full", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
-                        params.data?.abColumn?.columnId ??
-                        'Select Column'));
+                        }, className: "twa:w-full", columns: ['label'], items: availableColumns, children: params.data?.abColumn?.friendlyName ??
+                            params.data?.abColumn?.columnId ??
+                            'Select Column' }));
                 },
             },
             valid: {
@@ -94,34 +95,25 @@ export const ColumnsSection = (props) => {
                 align: 'center',
                 render: (row) => {
                     if (!row.data.abColumn) {
-                        return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
+                        return (_jsx(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
                     }
                     const successColor = UIHelper.getColorByMessageType('Success');
-                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    return _jsx(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 },
             },
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (React.createElement(Box, { className: "twa:p-2" },
-            React.createElement(HelpBlock, { className: "twa:text-error" },
-                "No Data has been Imported. Go to ",
-                React.createElement(Tag, null, "Upload"),
-                " step and provide Data")));
+        return (_jsx(Box, { className: "twa:p-2", children: _jsxs(HelpBlock, { className: "twa:text-error", children: ["No Data has been Imported. Go to ", _jsx(Tag, { children: "Upload" }), " step and provide Data"] }) }));
     }
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-        React.createElement(Tabs, { className: "twa:mb-2 twa:h-full" },
-            React.createElement(Tabs.Tab, null, "Columns"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(DataSource, { data: props.columnsMap, primaryKey: 'field' },
-                    React.createElement(InfiniteTableGrid, { columnPinning: {
-                            valid: 'end',
-                            type: 'end',
-                        }, columnTypes: {
-                            default: {
-                                minWidth: 100,
-                                defaultFlex: 1,
-                            },
-                        }, domProps: tableDOMProps, columns: columns }))))));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: _jsxs(Tabs, { className: "twa:mb-2 twa:h-full", children: [_jsx(Tabs.Tab, { children: "Columns" }), _jsx(Tabs.Content, { children: _jsx(DataSource, { data: props.columnsMap, primaryKey: 'field', children: _jsx(InfiniteTableGrid, { columnPinning: {
+                                valid: 'end',
+                                type: 'end',
+                            }, columnTypes: {
+                                default: {
+                                    minWidth: 100,
+                                    defaultFlex: 1,
+                                },
+                            }, domProps: tableDOMProps, columns: columns }) }) })] }) }));
 };
 ColumnsSection.displayName = 'ColumnsSection';

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import flatten from '../../../../Utilities/utils/flatten';
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
@@ -31,10 +32,7 @@ export const DataPreview = (props) => {
     const adaptable = useAdaptable();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return (React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
-            "No Data has been Imported. Go to ",
-            React.createElement(Tag, null, "Upload"),
-            " step and provide Data"));
+        return (_jsxs(HelpBlock, { color: 'var(--ab-color-error)', children: ["No Data has been Imported. Go to ", _jsx(Tag, { children: "Upload" }), " step and provide Data"] }));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
     const columns = React.useMemo(() => {
@@ -93,10 +91,10 @@ export const DataPreview = (props) => {
                 const cellErrors = getRowErrors(props.errors, getPrimaryKeyValue(params.data));
                 const successColor = UIHelper.getColorByMessageType('Success');
                 if (!cellErrors || cellErrors.length === 0) {
-                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    return _jsx(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 }
                 const errorsStr = cellErrors.map((e) => e.error).join(', ');
-                return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
+                return (_jsx(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
             },
         };
         infiniteColumns['type'] = {
@@ -111,7 +109,7 @@ export const DataPreview = (props) => {
                 catch (error) {
                     // empty
                 }
-                return React.createElement(React.Fragment, null);
+                return _jsx(_Fragment, {});
             },
         };
         return infiniteColumns;
@@ -125,7 +123,7 @@ export const DataPreview = (props) => {
             border: 'var(--ab-Dataimport-validation-error__border)',
         };
     };
-    return (React.createElement(DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
+    return (_jsx(DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
             const newRowData = [...props.data];
             const mutationsList = flatten(Array.from(params.mutations.values()));
             if (!mutationsList.length) {
@@ -138,8 +136,7 @@ export const DataPreview = (props) => {
                 }
             });
             props.onDataChange(newRowData);
-        } },
-        React.createElement(InfiniteTableGrid, { columnPinning: {
+        }, children: _jsx(InfiniteTableGrid, { columnPinning: {
                 valid: 'end',
                 type: 'end',
             }, columnTypes: {
@@ -150,5 +147,5 @@ export const DataPreview = (props) => {
                     minWidth: 100,
                     defaultFlex: 1,
                 },
-            }, domProps: tableDOMProps, columns: columns })));
+            }, domProps: tableDOMProps, columns: columns }) }));
 };

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import FileDroppable from '../../../../../components/FileDroppable/index';
 import HelpBlock from '../../../../../components/HelpBlock/index';
 export const ImportFileSection = (props) => {
-    return (React.createElement(FileDroppable, { loadingText: React.createElement(HelpBlock, { className: "twa: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", className: "twa:h-full", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+    return (_jsx(FileDroppable, { loadingText: _jsx(HelpBlock, { className: "twa:mb-2", children: "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", className: "twa:h-full", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
 };

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

@@ -1,18 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Radio from '../../../../../components/Radio/index';
 import { Tabs } from '../../../../../components/Tabs/index';
 import { ImportFileSection } from './UploadFileSection';
 import { ImportTextSection } from './UploadTextSection';
 import { Flex } from '../../../../../components/Flex';
 export const UploadSection = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-        React.createElement(Tabs, { className: "twa: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, { className: "twa: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 }))))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file', children: "File" }), _jsx(Radio, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text', children: "Text" })] }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: props.importType === 'file' ? 'File Upload' : 'Text' }), _jsx(Tabs.Content, { children: props.importType === 'file' ? (_jsx(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (_jsx(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
 };

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

@@ -1,8 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import HelpBlock from '../../../../../components/HelpBlock/index';
 import Textarea from '../../../../../components/Textarea/index';
 export const ImportTextSection = (props) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }),
-        props.message && React.createElement(HelpBlock, null, props.message)));
+    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }), props.message && _jsx(HelpBlock, { children: props.message })] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tabs } from '../../../../components/Tabs';
@@ -14,17 +14,7 @@ const getRowErrors = (errors, primaryKeyValue) => {
     return errors[primaryKeyValue];
 };
 export const ValidationSection = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-        React.createElement(Tabs, { className: "twa: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, { className: "twa: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 })))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Options" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Exclude Invalid Rows", children: _jsx(CheckBox, { onChange: () => {
+                                        props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                                    }, checked: props.skipInvalidRows }) }) }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: "Preview" }), _jsx(Tabs.Content, { children: _jsx(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
 };

package/src/View/DataSet/DataSetSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Radio from '../../components/Radio';
 import { useAdaptable } from '../AdaptableContext';
@@ -10,5 +11,5 @@ export const DataSetSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.dataSetApi.setDataSet(data.name);
     }, [isSelected]);
-    return (React.createElement(Radio, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (_jsx(Radio, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };

package/src/View/DataSet/DataSetStatusPanelPopover.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { SelectList } from '../../components/SelectList';
 import { useAdaptable } from '../AdaptableContext';
@@ -11,5 +12,5 @@ export const DataSetStatusPanelPopover = () => {
         label: dataSet.name,
         value: dataSet.name,
     }));
-    return React.createElement(SelectList, { options: options, onChange: handleDataSetChange });
+    return _jsx(SelectList, { options: options, onChange: handleDataSetChange });
 };

package/src/View/DataSet/DataSetViewPanel.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as React from 'react';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { connect } from 'react-redux';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
 class DataSetViewPanelComponent extends React.Component {
     getCurrentDataSet() {
         return StringExtensions.IsNullOrEmpty(this.props.CurrentDataSetName)
@@ -25,8 +26,7 @@ class DataSetViewPanelComponent extends React.Component {
             };
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
-            React.createElement(Select, { "aria-label": 'Select Data Set', placeholder: 'Select Data Set', disabled: ArrayExtensions.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select twa:w-full`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
+        return (_jsx(Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap`, children: _jsx(SingleSelect, { ariaLabel: 'Select Data Set', placeholder: 'Select Data Set', disabled: ArrayExtensions.IsNullOrEmpty(availableDataSets), items: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select twa:w-full`, onValueChange: (destination) => this.onSelectedDataSetChanged(destination) }) }));
     }
     onSelectedDataSetChanged(dataSetName) {
         if (StringExtensions.IsNullOrEmpty(dataSetName)) {

package/src/View/Export/ExportDestinationPicker.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import DropdownButton from '../../components/DropdownButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewDropdownButton } from '../../components/NewDropdownButton';
 import { Icon } from '../../components/icons';
 import { useAdaptable } from '../AdaptableContext';
 import { ButtonExport } from '../Components/Buttons/ButtonExport';
@@ -12,12 +12,11 @@ export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, })
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (React.createElement(ButtonExport, { className: clsx(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
+        return (_jsx(ButtonExport, { tooltip: 'Export Report', className: clsx(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,
         onClick: () => handleExport(destination),
     }));
-    return (React.createElement(DropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
-        React.createElement(Icon, { name: "export" })));
+    return (_jsx(NewDropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, tooltip: "Export Report", variant: "text", items: destinationItems, children: _jsx(Icon, { name: "export" }) }));
 };

package/src/View/Export/ExportSchedulesTab.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ExportSchedulesTab: React.FunctionComponent;

package/src/View/Export/ExportSchedulesTab.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
+import { formatScheduledReportSummary } from '../../Strategy/Utilities/Export/formatScheduledReportSummary';
+import { useAdaptable } from '../AdaptableContext';
+import { AdaptableObjectListItemView } from '../Components/AdaptableObjectList/AdaptableObjectList';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
+import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
+import EmptyContent from '../../components/EmptyContent';
+import { ScheduledReportWizard } from './Wizard/ScheduledReportWizard';
+import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
+export const ExportSchedulesTab = () => {
+    const { api } = useAdaptable();
+    const dispatch = useDispatch();
+    useSelector((state) => state.Export?.Revision);
+    const accessLevel = api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ExportModuleId);
+    const [editingSchedule, setEditingSchedule] = React.useState(null);
+    const schedules = api.exportApi.getScheduledReports();
+    const exportModule = api.internalApi
+        .getModuleService()
+        .getModuleById(ModuleConstants.ExportModuleId);
+    const moduleInfo = exportModule?.moduleInfo;
+    if (!exportModule) {
+        return null;
+    }
+    if (!schedules.length) {
+        return (_jsx(EmptyContent, { children: "No report schedules configured. Schedule a report from the Export toolbar or create one when editing a report." }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "ab-Adaptable-Object-List twa:list-none twa:p-0 twa:m-0 twa:flex twa:flex-col twa:gap-3", children: schedules.map((reportSchedule) => (_jsx(ExportScheduleListItem, { module: exportModule, reportSchedule: reportSchedule, accessLevel: accessLevel, onEdit: () => setEditingSchedule(reportSchedule), onSuspend: () => dispatch(ExportRedux.ScheduledReportSuspend(reportSchedule)), onUnSuspend: () => dispatch(ExportRedux.ScheduledReportUnSuspend(reportSchedule)) }, reportSchedule.Uuid))) }), editingSchedule && moduleInfo && (_jsx(ScheduledReportWizard, { moduleInfo: moduleInfo, data: editingSchedule, popupParams: {
+                    action: 'Edit',
+                    source: 'Other',
+                    value: {
+                        reportName: editingSchedule.ReportName,
+                        schedule: editingSchedule,
+                    },
+                }, configEntities: null, onCloseWizard: () => setEditingSchedule(null), onFinishWizard: () => setEditingSchedule(null) }))] }));
+};
+const ExportScheduleListItem = (props) => {
+    const { reportSchedule, accessLevel } = props;
+    return (_jsx(AdaptableObjectListItemView, { module: props.module, abObject: reportSchedule, accessLevel: accessLevel, entityType: "Schedule", showActions: true, showEditButton: false, items: [
+            {
+                name: 'Report',
+                values: [reportSchedule.ReportName],
+            },
+            {
+                name: 'Schedule',
+                values: [formatScheduledReportSummary(reportSchedule)],
+            },
+        ], actions: [
+            _jsx(ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule" }, "edit"),
+            _jsx(ButtonDelete, { accessLevel: accessLevel, tooltip: "Delete Schedule", ConfirmationTitle: "Delete Schedule", ConfirmationMsg: "Are you sure you want to delete this schedule?", ConfirmAction: ExportRedux.ScheduledReportDelete(reportSchedule) }, "delete"),
+        ], suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
+};

package/src/View/Export/ExportStatusBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 import { ReportNameSelector } from './ReportNameSelector';
 import { ReportFormatSelector } from './ReportFormatSelector';
@@ -10,9 +10,5 @@ export const ExportStatusBar = () => {
     const exportApi = adaptable.api.exportApi;
     const currentReportName = useSelector((state) => state.Export.CurrentReport);
     const currentFormat = useSelector((state) => state.Export.CurrentFormat);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { className: "twa:gap-1" },
-            React.createElement(ReportNameSelector, { viewType: "StatusBar", reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
-            React.createElement(ReportFormatSelector, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) })),
-        React.createElement(ExportDestinationPicker, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(ReportNameSelector, { viewType: "StatusBar", reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }), _jsx(ReportFormatSelector, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) })] }), _jsx(ExportDestinationPicker, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat })] }));
 };