@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -1,17 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const useSelection_1 = tslib_1.__importDefault(require("./useSelection"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Dropdown_1 = tslib_1.__importDefault(require("../../../components/Dropdown"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const react_1 = require("react");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const InfiniteTable_1 = require("../../../components/InfiniteTable");
-const rebass_1 = require("rebass");
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import useSelection from './useSelection';
+import { CheckBox } from '../../../components/CheckBox';
+import Radio from '../../../components/Radio';
+import Dropdown from '../../../components/Dropdown';
+import Input from '../../../components/Input';
+import { useRef, useState } from 'react';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+import { Box, Flex } from 'rebass';
+import throttle from 'lodash/throttle';
 const dataTypes = [
     {
         value: 'abColDefString',
@@ -33,14 +31,14 @@ const inputStyle = {
     textAlign: 'start',
 };
 const useForceRender = () => {
-    const [, setNow] = (0, react_1.useState)(Date.now());
+    const [, setNow] = useState(Date.now());
     return () => {
         setNow(Date.now());
     };
 };
 const ThrottledInput = React.memo((props) => {
-    const [stateValue, setStateValue] = (0, react_1.useState)(props.value);
-    const throttleOnChange = React.useRef((0, throttle_1.default)(props.onChange, 600, { leading: false }));
+    const [stateValue, setStateValue] = useState(props.value);
+    const throttleOnChange = React.useRef(throttle(props.onChange, 600, { leading: false }));
     const handleChange = React.useCallback((event) => {
         const newValue = event.target.value;
         setStateValue(newValue);
@@ -49,7 +47,7 @@ const ThrottledInput = React.memo((props) => {
     React.useEffect(() => {
         setStateValue(props.value);
     }, [props.value]);
-    return React.createElement(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
+    return React.createElement(Input, { style: props.style, value: stateValue, onChange: handleChange });
 });
 const tableDOMProps = {
     style: {
@@ -60,7 +58,7 @@ const tableDOMProps = {
 };
 const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }) => {
     const rerender = useForceRender();
-    const columnsRef = (0, react_1.useRef)(cols);
+    const columnsRef = useRef(cols);
     const silentSetColumns = (columns) => {
         columnsRef.current = columns;
         onChange === null || onChange === void 0 ? void 0 : onChange(columns);
@@ -105,12 +103,12 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
         setColumns(cols);
     };
     const [primaryKeyField, setPrimaryKeyField] = React.useState(columns[0].field);
-    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = (0, useSelection_1.default)(columns, selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : true, null, { onChange: onSelectionChange });
+    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = useSelection(columns, selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : true, null, { onChange: onSelectionChange });
     handle.current = {
         getColumns: () => getColumns().filter((col) => isIncludedColumn(col.field)),
         getPrimaryKey: () => primaryKeyField,
     };
-    const { isSelected: isSortableColumn, isAllSelected: isAllSortableColumns, isNoneSelected: isNoneSortableColumns, selectColumn: setSortableColumn, deselectColumn: setUnsortableColumn, selectAll: setAllSortable, deselectAll: setAllUnsortable, } = (0, useSelection_1.default)(columns, true, 'sortable', {
+    const { isSelected: isSortableColumn, isAllSelected: isAllSortableColumns, isNoneSelected: isNoneSortableColumns, selectColumn: setSortableColumn, deselectColumn: setUnsortableColumn, selectAll: setAllSortable, deselectAll: setAllUnsortable, } = useSelection(columns, true, 'sortable', {
         onBatchChange: (flag) => {
             onColumnBatchChange(flag, 'sortable');
         },
@@ -118,7 +116,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             onColumnChange(col, flag, 'sortable');
         },
     });
-    const { isSelected: isGroupableColumn, isAllSelected: isAllGroupableColumns, isNoneSelected: isNoneGroupableColumns, selectColumn: setGroupableColumn, deselectColumn: setUngroupableColumn, selectAll: setAllGroupable, deselectAll: setAllUngroupable, } = (0, useSelection_1.default)(columns, true, 'enableRowGroup', {
+    const { isSelected: isGroupableColumn, isAllSelected: isAllGroupableColumns, isNoneSelected: isNoneGroupableColumns, selectColumn: setGroupableColumn, deselectColumn: setUngroupableColumn, selectAll: setAllGroupable, deselectAll: setAllUngroupable, } = useSelection(columns, true, 'enableRowGroup', {
         onBatchChange: (flag) => {
             onColumnBatchChange(flag, 'enableRowGroup');
         },
@@ -126,7 +124,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             onColumnChange(col, flag, 'enableRowGroup');
         },
     });
-    const { isSelected: isResizableColumn, isAllSelected: isAllResizableColumns, isNoneSelected: isNoneResizableColumns, selectColumn: setResizableColumn, deselectColumn: setUnresizableColumn, selectAll: setAllResizable, deselectAll: setAllUnresizable, } = (0, useSelection_1.default)(columns, true, 'resizable', {
+    const { isSelected: isResizableColumn, isAllSelected: isAllResizableColumns, isNoneSelected: isNoneResizableColumns, selectColumn: setResizableColumn, deselectColumn: setUnresizableColumn, selectAll: setAllResizable, deselectAll: setAllUnresizable, } = useSelection(columns, true, 'resizable', {
         onBatchChange: (flag) => {
             onColumnBatchChange(flag, 'resizable');
         },
@@ -134,7 +132,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             onColumnChange(col, flag, 'resizable');
         },
     });
-    const { isSelected: isEditableColumn, isAllSelected: isAllEditableColumns, isNoneSelected: isNoneEditableColumns, selectColumn: setEditableColumn, deselectColumn: setUneditableColumn, selectAll: setAllEditable, deselectAll: setAllUneditable, } = (0, useSelection_1.default)(columns, true, 'editable', {
+    const { isSelected: isEditableColumn, isAllSelected: isAllEditableColumns, isNoneSelected: isNoneEditableColumns, selectColumn: setEditableColumn, deselectColumn: setUneditableColumn, selectAll: setAllEditable, deselectAll: setAllUneditable, } = useSelection(columns, true, 'editable', {
         onBatchChange: (flag) => {
             onColumnBatchChange(flag, 'editable');
         },
@@ -142,7 +140,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             onColumnChange(col, flag, 'editable');
         },
     });
-    const { isSelected: isFilterableColumn, isAllSelected: isAllFilterableColumns, isNoneSelected: isNoneFilterableColumns, selectColumn: setFilterableColumn, deselectColumn: setUnFilterableColumn, selectAll: setAllFilterable, deselectAll: setAllUnfilterable, } = (0, useSelection_1.default)(columns, true, 'filter', {
+    const { isSelected: isFilterableColumn, isAllSelected: isAllFilterableColumns, isNoneSelected: isNoneFilterableColumns, selectColumn: setFilterableColumn, deselectColumn: setUnFilterableColumn, selectAll: setAllFilterable, deselectAll: setAllUnfilterable, } = useSelection(columns, true, 'filter', {
         onBatchChange: (flag) => {
             onColumnBatchChange(flag, 'filter');
         },
@@ -158,27 +156,27 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     const rowHeight = 40;
     const data = columns;
     const CellWrapper = (props) => {
-        return (React.createElement(rebass_1.Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
+        return (React.createElement(Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
     };
     const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, Object.assign({}, props, { fontSize: 3, style: { fontWeight: 600 } })));
     const HeaderWithCheckbox = (props) => {
-        const { label, onChange, checked } = props, flexProps = tslib_1.__rest(props, ["label", "onChange", "checked"]);
+        const { label, onChange, checked } = props, flexProps = __rest(props, ["label", "onChange", "checked"]);
         return (React.createElement(HeaderCellWrapper, Object.assign({}, flexProps, { flexDirection: "column" }),
-            React.createElement(rebass_1.Box, null, label),
-            React.createElement(rebass_1.Box, { style: { textAlign: 'center' } },
-                React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
+            React.createElement(Box, null, label),
+            React.createElement(Box, { style: { textAlign: 'center' } },
+                React.createElement(CheckBox, { checked: checked, onChange: onChange }))));
     };
     const columnsMap = {
         pk: {
             header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
             maxWidth: 80,
-            sortable: false,
+            defaultSortable: false,
             renderMenuIcon: false,
             render: (params) => {
                 const { data } = params;
                 const column = data;
                 const isPrimaryKey = (column === null || column === void 0 ? void 0 : column.field) === primaryKeyField;
-                return (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
+                return (React.createElement(Radio, { checked: isPrimaryKey, onChange: (checked) => {
                         if (checked && isIncludedColumn(column.field)) {
                             setPrimaryKeyField(column.field);
                         }
@@ -200,7 +198,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const column = params.data;
                 return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
+                    React.createElement(CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
                             if (included) {
                                 includeColumn(column.field);
                             }
@@ -217,8 +215,8 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             renderMenuIcon: false,
             render: (params) => {
                 const column = params.data;
-                const humanized = StringExtensions_1.default.Humanize(column.field);
-                return (React.createElement(rebass_1.Box, { p: 2 },
+                const humanized = StringExtensions.Humanize(column.field);
+                return (React.createElement(Box, { p: 2 },
                     React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
                             setColumnCaption(value, column.field);
                         } })));
@@ -232,7 +230,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 var _a;
                 const column = params.data;
                 return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
-                    React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
+                    React.createElement(Dropdown, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
             },
         },
         sortable: {
@@ -247,7 +245,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
+                return (React.createElement(CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
                         sortable ? setSortableColumn(column.field) : setUnsortableColumn(column.field);
                     } }));
             },
@@ -265,7 +263,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const col = params.data;
                 return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
+                    React.createElement(CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
                             editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
                         } })));
             },
@@ -283,7 +281,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const col = params.data;
                 return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
+                    React.createElement(CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
                             resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
                         } })));
             },
@@ -301,7 +299,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const col = params.data;
                 return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
+                    React.createElement(CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
                             groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
                         } })));
             },
@@ -319,19 +317,19 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const col = params.data;
                 return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
+                    React.createElement(CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
                             filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
                         } })));
             },
         },
     };
-    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
-        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+    return (React.createElement(Box, { p: 2, style: { height: '100%' }, className: theme },
+        React.createElement(DataSource, { data: data, primaryKey: "colId" },
+            React.createElement(InfiniteTable, { columnTypes: {
                     default: {
                         defaultFlex: 1,
                         align: 'center',
-                        sortable: false,
+                        defaultSortable: false,
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,
@@ -344,4 +342,4 @@ function areEqual() {
      */
     return true;
 }
-exports.default = React.memo(ColumnsList, areEqual);
+export default React.memo(ColumnsList, areEqual);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -1,9 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NocodeWizardFormBox = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const NocodeWizardFormBox = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { padding: 2, mb: 2, className: (0, join_1.default)('ab-NocodeWizardFormBox', props.className) })));
-exports.NocodeWizardFormBox = NocodeWizardFormBox;
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../../../../components/utils/join';
+export const NocodeWizardFormBox = (props) => (React.createElement(Box, Object.assign({}, props, { padding: 2, mb: 2, className: join('ab-NocodeWizardFormBox', props.className) })));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -1,30 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigurationWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
-const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
-const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
-const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
-const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
-const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
-const ConfigurationWizard = (props) => {
+import * as React from 'react';
+import { useState } from 'react';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { OnePageWizard } from '../../Wizard/OnePageWizards';
+import { ConfigurationWizardColumnsStep } from './ConfigurationWizardColumnsStep';
+import GridOptionsForm from './GridOptionsForm';
+import EntitlementsForm from './EntitlementsForm';
+import { UIElementsForm } from './UIOptions/UiOptionsForm';
+import { AdaptableOptionsForm } from './AdaptableOptionsForm';
+import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
+export const ConfigurationWizard = (props) => {
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
-    const [adaptableConfig, setAdaptableConfig] = (0, react_1.useState)(() => {
+    const [adaptableConfig, setAdaptableConfig] = useState(() => {
         const gridOptionDefaults = {
             sideBar: {
                 toolPanels: ['columns', 'filters', 'adaptable'],
             },
         };
         const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
-        const adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
+        const adaptableOptions = AdaptableHelper.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
         return { gridOptions, adaptableOptions };
     });
-    const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {
+    const [selectedColumns, setSelectedColumns] = useState(() => {
         var _a, _b;
         return (_b = (_a = props.adaptableConfig.gridOptions) === null || _a === void 0 ? void 0 : _a.columnDefs) === null || _b === void 0 ? void 0 : _b.reduce((acc, col) => {
             acc[col.field] = true;
@@ -37,7 +33,7 @@ const ConfigurationWizard = (props) => {
         const newGridOptions = Object.assign({}, adaptableConfig.gridOptions);
         if (columnsHandle.current) {
             adaptableConfig.gridOptions.columnDefs = columnsHandle.current.getColumns().map((column) => {
-                const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions_1.default.Humanize(column.field) });
+                const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions.Humanize(column.field) });
                 delete newColumn.caption;
                 return newColumn;
             });
@@ -79,28 +75,28 @@ const ConfigurationWizard = (props) => {
                 }
                 return true;
             },
-            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+            render: () => (React.createElement(ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
         },
         {
             title: 'AdapTable Options',
             details: 'Configure Adaptable Options',
             isValid: () => adaptableConfig.adaptableOptions.adaptableId ? true : 'Adaptable ID is required',
-            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
+            render: () => (React.createElement(AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
         },
         {
             title: 'AG Grid Options',
             details: 'Configure AG Grid Options',
-            render: () => (React.createElement(GridOptionsForm_1.default, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
+            render: () => (React.createElement(GridOptionsForm, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'UI Elements',
             details: 'Configure UI Elements',
-            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
+            render: () => (React.createElement(UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'Entitlements',
             details: 'Configure Entitlements',
-            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
+            render: () => (React.createElement(EntitlementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
         },
         /**
         financePlugin && {
@@ -129,6 +125,5 @@ const ConfigurationWizard = (props) => {
             ...sections,
         ];
     }
-    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+    return (React.createElement(OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
 };
-exports.ConfigurationWizard = ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigurationWizardColumnsStep = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
-const ConfigurationWizardColumnsStep = (props) => {
+import * as React from 'react';
+import ColumnsList from './ColumnsList';
+export const ConfigurationWizardColumnsStep = (props) => {
     var _a, _b;
     let theme = 'light';
     if (typeof props.adaptableConfig.adaptableOptions.predefinedConfig === 'object' &&
         ((_a = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
         theme = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
     }
-    return (React.createElement(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
+    return (React.createElement(ColumnsList, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
         }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = props.adaptableConfig.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
 };
-exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const Types_1 = require("../../../PredefinedConfig/Common/Types");
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
-const InfiniteTable_1 = require("../../../components/InfiniteTable");
-const ALL_ENTITLEMENTS_MODULES = Types_1.ALL_MODULES;
+import * as React from 'react';
+import HelpBlock from '../../../components/HelpBlock';
+import { ALL_MODULES } from '../../../PredefinedConfig/Common/Types';
+import { Box, Flex } from 'rebass';
+import Radio from '../../../components/Radio';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { ADAPTABLE_MODULE_MAP } from '../../../Utilities/Constants/ModuleConstants';
+import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+const ALL_ENTITLEMENTS_MODULES = ALL_MODULES;
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -22,7 +19,7 @@ const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = (_b = (_a = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _a === void 0 ? void 0 : _a.moduleEntitlements) !== null && _b !== void 0 ? _b : [];
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const entitlementsMap = React.useMemo(() => {
         return entitlements.reduce((acc, entitlement) => {
@@ -51,7 +48,7 @@ const EntitlementsListForm = (props) => {
         props.onChangedAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const columnsMap = {
         name: {
@@ -66,7 +63,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
             },
         },
         readonly: {
@@ -74,7 +71,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
             },
         },
         hidden: {
@@ -82,23 +79,23 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
             },
         },
     };
-    const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ModuleConstants_1.ADAPTABLE_MODULE_MAP[module] }));
+    const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ADAPTABLE_MODULE_MAP[module] }));
     let theme = 'light';
     if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
         ((_c = props.adaptableOptions.predefinedConfig.Theme) === null || _c === void 0 ? void 0 : _c.CurrentTheme)) {
         theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
     }
-    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
-        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+    return (React.createElement(Box, { flex: 1, height: "100%", className: theme },
+        React.createElement(DataSource, { data: data, primaryKey: "name" },
+            React.createElement(InfiniteTable, { columnTypes: {
                     default: {
                         defaultFlex: 1,
                         align: 'center',
-                        sortable: false,
+                        defaultSortable: false,
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,
@@ -110,21 +107,21 @@ const DefaultEntitlementForm = (props) => {
     const entitlementOptions = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.entitlementOptions;
     const defaultEntitlement = entitlementOptions === null || entitlementOptions === void 0 ? void 0 : entitlementOptions.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
-        return React.createElement(HelpBlock_1.default, { mb: 2 }, "Default Entitlement is controlled by a custom function");
+        return React.createElement(HelpBlock, { mb: 2 }, "Default Entitlement is controlled by a custom function");
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
         props.onChangedAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { defaultAccessLevel: accessLevel }) }));
     }, [(_b = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _b === void 0 ? void 0 : _b.defaultAccessLevel]);
-    return (React.createElement(FormLayout_1.default, { mb: 2 },
-        React.createElement(FormLayout_1.FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', mr: 3 }, "Read Only"),
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
+    return (React.createElement(FormLayout, { mb: 2 },
+        React.createElement(FormRow, { label: "Default Entitlement:" },
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', mr: 3 }, "Read Only"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", p: 2 },
+    return (React.createElement(Flex, { height: "100%", flexDirection: "column", p: 2 },
         React.createElement(DefaultEntitlementForm, Object.assign({}, props)),
         React.createElement(EntitlementsListForm, Object.assign({}, props))));
 };
-exports.default = EntitlementsForm;
+export default EntitlementsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.js

@@ -1,5 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 /*
 
 This is no longer required since we cannot build FDC3 columns
@@ -630,4 +629,4 @@ export const FinanceForm: React.FunctionComponent<React.PropsWithChildren<Financ
 };
 
 
-*/ 
+*/

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -1,38 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const rebass_1 = require("rebass");
+import * as React from 'react';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import HelpBlock from '../../../components/HelpBlock';
+import { Box } from 'rebass';
 const GridOptionsForm = (props) => {
     var _a;
     let { gridOptions } = props;
-    return (React.createElement(rebass_1.Box, { p: 2 },
-        React.createElement(HelpBlock_1.default, null, "Grid Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
+    return (React.createElement(Box, { p: 2 },
+        React.createElement(HelpBlock, null, "Grid Options"),
+        React.createElement(FormLayout, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
+            React.createElement(FormRow, { label: "Enable Range Selection" },
+                React.createElement(CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { enableRangeSelection: enableRangeSelection });
                         props.onChangedGridOptions(gridOptions);
                     } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Show Filter Bar" },
-                React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
+            React.createElement(FormRow, { label: "Show Filter Bar" },
+                React.createElement(CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { defaultColDef: {
                                 floatingFilter,
                             } });
                         props.onChangedGridOptions(gridOptions);
                     } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
+            React.createElement(FormRow, { label: "Suppress Column Virtualisation" },
+                React.createElement(CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressColumnVirtualisation: suppressColumnVirtualisation });
                         props.onChangedGridOptions(gridOptions);
                     } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
+            React.createElement(FormRow, { label: "Show Column Menu Button" },
+                React.createElement(CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressMenuHide: suppressMenuHide });
                         props.onChangedGridOptions(gridOptions);
                     } })))));
 };
-exports.default = GridOptionsForm;
+export default GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIOptionsActionColumnsForm = 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 HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
-const UIOptionsActionColumnsForm = (props) => {
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import HelpBlock from '../../../../components/HelpBlock';
+export const UIOptionsActionColumnsForm = (props) => {
     var _a, _b, _c, _d, _e;
     const options = [
         { value: 'clone', label: 'Clone' },
@@ -28,8 +24,7 @@ const UIOptionsActionColumnsForm = (props) => {
         }
         props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionRowOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionRowOptions), { actionRowButtons: newActionRowButtons }) }));
     };
-    return (React.createElement(rebass_1.Box, null,
-        React.createElement(HelpBlock_1.default, null, "Action Row Buttons"),
-        React.createElement(rebass_1.Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
+    return (React.createElement(Box, null,
+        React.createElement(HelpBlock, null, "Action Row Buttons"),
+        React.createElement(Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
 };
-exports.UIOptionsActionColumnsForm = UIOptionsActionColumnsForm;