@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

package/src/Utilities/license/decode.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.decode=exports.fieldsToLicenseDetails=void 0;const e=require("./hashing"),t=()=>new Error("Invalid License"),r=e=>{var r;const o=e.reduce(((e,t)=>(e.set(t.name,t.value),e)),new Map),s={count:o.get("DeveloperCount")?Number(o.get("DeveloperCount")):0,start:new Date(o.get("StartDate")),end:new Date(o.get("EndDate")),owner:o.get("Owner"),timestamp:o.get("TS")?Number(o.get("TS")):0,trial:"true"===o.get("Trial"),ref:null!==(r=o.get("Ref"))&&void 0!==r?r:""};if(!(s.start&&s.end&&s.owner&&"boolean"==typeof s.trial&&s.ref))throw t();return s};exports.fieldsToLicenseDetails=r;const o=r=>{let o="",s=r.split("|").map((e=>{let[t,r]=e.split("=");return"C"===t&&(o=r),{name:t,value:r}}));if(!o)throw t();const n=o.split(",").reverse(),a=n.pop();n.forEach(((r,o)=>{const n=s[o];if((0,e.compute_string)(n.value)!==r)throw t()}));const i=[...s];i.pop();const l=i.map((e=>`${e.name}=${e.value}`)).join("|");if((0,e.compute_string)(l)!==a)throw t();return s=s.map((e=>Object.assign(Object.assign({},e),{value:decodeURI(e.value)}))),(0,exports.fieldsToLicenseDetails)(s)};exports.decode=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.decode=exports.fieldsToLicenseDetails=exports.GENERIC_APP_NAME=void 0;const e=require("./hashing"),t=()=>new Error("Invalid License");exports.GENERIC_APP_NAME="GenericAdaptableApp";const r=e=>{var r;const s=e.reduce(((e,t)=>(e.set(t.name,t.value),e)),new Map),o={start:new Date(s.get("StartDate")),end:new Date(s.get("EndDate")),owner:s.get("Owner"),appName:s.get("AppName")||exports.GENERIC_APP_NAME,timestamp:s.get("TS")?Number(s.get("TS")):0,trial:"true"===s.get("Trial"),ref:null!==(r=s.get("Ref"))&&void 0!==r?r:""};if(!(o.start&&o.end&&o.owner&&"boolean"==typeof o.trial&&o.ref))throw t();return o};exports.fieldsToLicenseDetails=r;const s=r=>{let s="",o=r.split("|").map((e=>{let[t,r]=e.split("=");return"C"===t&&(s=r),{name:t,value:r}}));if(!s)throw t();const a=s.split(",").reverse(),n=a.pop();a.forEach(((r,s)=>{const a=o[s];if((0,e.compute_string)(a.value)!==r)throw t()}));const i=[...o];i.pop();const p=i.map((e=>`${e.name}=${e.value}`)).join("|");if((0,e.compute_string)(p)!==n)throw t();return o=o.map((e=>Object.assign(Object.assign({},e),{value:decodeURI(e.value)}))),(0,exports.fieldsToLicenseDetails)(o)};exports.decode=s;

package/src/Utilities/logDeprecation.d.ts

@@ -0,0 +1,3 @@
+export declare const logDeprecation: <T>(typeName: string, oldProp: keyof T, newProp: keyof T, message?: string) => void;
+export declare const logDeprecationExternal: <OLD_TYPE, NEW_TYPE>(oldTypeName: string, oldProp: keyof OLD_TYPE, newTypeName: string, newProp: keyof NEW_TYPE, message?: string) => void;
+export declare const logDeprecationInternal: <T>(typeName: string, oldProp: keyof T) => void;

package/src/Utilities/logDeprecation.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logDeprecationInternal = exports.logDeprecationExternal = exports.logDeprecation = void 0;
+const LoggingHelper_1 = require("./Helpers/LoggingHelper");
+const doOnceFlags = {};
+/**
+ * If the key was passed before, then do NOT execute the func
+ */
+const doOnce = (func, key) => {
+    if (doOnceFlags[key]) {
+        return;
+    }
+    func();
+    doOnceFlags[key] = true;
+};
+const logDeprecation = (typeName, oldProp, newProp, message) => {
+    const newPropMsg = newProp ? `Please use '${typeName}.${newProp}()' instead. ` : '';
+    doOnce(() => (0, LoggingHelper_1.ConsoleLogWarning)(`Adaptable: '${typeName}.${oldProp}()' is deprecated. ${newPropMsg}${message !== null && message !== void 0 ? message : ''}`), `Deprecated_${oldProp}`);
+};
+exports.logDeprecation = logDeprecation;
+const logDeprecationExternal = (oldTypeName, oldProp, newTypeName, newProp, message) => {
+    const newPropMsg = newProp ? `Please use '${newTypeName}.${newProp}()' instead. ` : '';
+    doOnce(() => (0, LoggingHelper_1.ConsoleLogWarning)(`Adaptable: '${oldTypeName}.${oldProp}()' is deprecated. ${newPropMsg}${message !== null && message !== void 0 ? message : ''}`), `Deprecated_${oldProp}`);
+};
+exports.logDeprecationExternal = logDeprecationExternal;
+const logDeprecationInternal = (typeName, oldProp) => {
+    doOnce(() => (0, LoggingHelper_1.ConsoleLogWarning)(`Adaptable: '${typeName}.${oldProp}()' is deprecated. The method will be removed in the next major release.
+        Please contact support if you need the missing functionality.`), `Deprecated_${oldProp}`);
+};
+exports.logDeprecationInternal = logDeprecationInternal;

package/src/View/AdaptablePopover/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AdaptableMessageType } from '../../PredefinedConfig/Common/AdaptableMessageType';
-export interface AdaptablePopoverProps extends React.ClassAttributes<AdaptablePopover> {
+import { OverlayShowParams } from '../../components/InfiniteTable';
+export interface AdaptablePopoverProps extends React.ClassAttributes<React.PropsWithChildren<AdaptablePopover>> {
     headerText?: string;
     showEvent?: string;
     hideEvent?: string;
@@ -14,7 +15,8 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<AdaptablePo
     popoverMinWidth?: number;
     popoverMaxWidth?: number;
     popupPadding?: number;
+    alignPosition?: OverlayShowParams['alignPosition'];
 }
-export declare class AdaptablePopover extends React.Component<AdaptablePopoverProps, {}> {
+export declare class AdaptablePopover extends React.Component<React.PropsWithChildren<AdaptablePopoverProps>, {}> {
     render(): JSX.Element;
 }

package/src/View/AdaptablePopover/index.js

@@ -34,9 +34,13 @@ class AdaptablePopover extends React.Component {
             fill: 'currentColor',
         };
         return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
-            React.createElement(OverlayTrigger_1.default, { showTriangle: true, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
+            React.createElement(OverlayTrigger_1.default
+            // showTriangle
+            , { 
+                // showTriangle
+                render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
-                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
+                }, defaultZIndex: 100000, alignPosition: this.props.alignPosition }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
                 this.props.children,
                 showIcon && React.createElement(icons_1.Icon, { name: icon }))))));
     }

package/src/View/AdaptableView.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
-export declare const AdaptableApp: ({ Adaptable }: {
+export declare const AdaptableApp: React.FunctionComponent<{
     Adaptable: IAdaptable;
-}) => JSX.Element;
+}>;

package/src/View/AdaptableViewFactory.js

@@ -30,6 +30,7 @@ const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryP
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
+const ChartingViewPanel_1 = require("./Components/Charting/ChartingViewPanel");
 exports.AdaptableViewFactory = {
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
@@ -60,4 +61,5 @@ exports.AdaptableViewPanelFactory = new Map([
     [ModuleConstants.DataSetModuleId, DataSetViewPanel_1.DataSetViewPanelControl],
     [ModuleConstants.DataChangeHistoryModuleId, DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl],
     [ModuleConstants.StateManagementModuleId, StateManagementViewPanel_1.StateManagementViewPanel],
+    [ModuleConstants.ChartingModuleId, ChartingViewPanel_1.ChartingViewPanel],
 ]);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOptions } from '../../../types';
-interface AdaptableOptionsFormOptions {
+export declare const AdaptableOptionsForm: React.FunctionComponent<{
     adaptableOptions: AdaptableOptions;
     onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
-}
-declare const AdaptableOptionsForm: (props: AdaptableOptionsFormOptions) => JSX.Element;
-export default AdaptableOptionsForm;
+}>;

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

@@ -1,101 +1,112 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableOptionsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+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 Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const rebass_1 = require("rebass");
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const LABEL_WIDTH = 250;
+const SUPPORTED_PRIMITEVE_TYPES = ['string', 'number', 'boolean'];
+const OptionInput = (props) => {
+    const { name, defaultValue, value, description, uiLabel } = props.option;
+    const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
+    let input = React.createElement(React.Fragment, null);
+    const info = (React.createElement(rebass_1.Box, { ml: 2 },
+        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
+    const handleInputChange = (event) => props.onChange(Object.assign(Object.assign({}, props.option), { value: event.currentTarget.value }));
+    const handleCheckboxChange = (checked) => props.onChange(Object.assign(Object.assign({}, props.option), { value: checked }));
+    // option is mutated to acomodate complex types overrides
+    const option = Object.assign({}, props.option);
+    const isOptionNonHomogenusUnion = (option) => {
+        const isUnion = option.kind.includes('|');
+        return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
+    };
+    if (isOptionNonHomogenusUnion(option)) {
+        // pick the first type
+        const newKind = option.kind
+            .split('|')
+            .find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
+            .trim();
+        if (newKind)
+            option.kind = newKind;
+    }
+    const inputProps = {
+        value: value !== null && value !== void 0 ? value : defaultValue,
+        minWidth: 200,
+        fontSize: 3,
+        mr: 2,
+    };
+    if (option.kind.includes('|')) {
+        const options = option.kind
+            .split('|')
+            .map((str) => str.trim().replace(/['"]/g, ''))
+            .map((str) => ({
+            label: StringExtensions_1.default.Humanize(str),
+            onClick: () => props.onChange(Object.assign(Object.assign({}, option), { value: str })),
+        }));
+        input = (React.createElement(DropdownButton_1.default, Object.assign({}, inputProps, { columns: ['label'], items: options }), StringExtensions_1.default.Humanize(value)));
+    }
+    else {
+        switch (option.kind) {
+            case 'number':
+                input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
+                break;
+            case 'string':
+                input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
+                break;
+            case 'boolean':
+                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
+                break;
+        }
+    }
+    let content = (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+            label,
+            " ",
+            info),
+        input));
+    if (option.kind === 'boolean') {
+        content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
+            input,
+            " ",
+            info));
+    }
+    return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
+};
+const OptionsSection = (props) => {
+    var _a;
+    if (!props.options.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(rebass_1.Box, { mb: 2 },
+        React.createElement(HelpBlock_1.default, { mb: 2 }, (_a = props.name) !== null && _a !== void 0 ? _a : props.id),
+        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
+};
 const AdaptableOptionsForm = (props) => {
-    var _a, _b;
-    let abOptions = props.adaptableOptions;
-    const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
-    const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
-    const adaptableQLOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.adaptableQLOptions), abOptions.adaptableQLOptions);
-    const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HelpBlock_1.default, null, "Base Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'label', style: { textAlign: 'start' } }, { name: 'children' }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Adaptable ID" },
-                React.createElement(Input_1.default, { value: (_b = (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.adaptableId) !== null && _b !== void 0 ? _b : null, onChange: (event) => {
-                        var _a;
-                        props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { adaptableId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
-                    }, style: { minWidth: '20rem' } }))),
-        React.createElement(HelpBlock_1.default, null, "General Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show Missing Primary Key Warning" },
-                React.createElement(CheckBox_1.CheckBox, { checked: generalOptions.showMissingPrimaryKeyAlert, onChange: (showMissingPrimaryKeyWarning) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.generalOptions = Object.assign({}, abOptions.generalOptions);
-                        abOptions.generalOptions.showMissingPrimaryKeyAlert = showMissingPrimaryKeyWarning;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Layout Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Save Layouts" },
-                React.createElement(CheckBox_1.CheckBox, { checked: layoutOptions.autoSaveLayouts, onChange: (autoSaveLayouts) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.layoutOptions = Object.assign({}, abOptions.layoutOptions);
-                        abOptions.layoutOptions.autoSaveLayouts = autoSaveLayouts;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Search Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Case Sensitive Text Comparison" },
-                React.createElement(CheckBox_1.CheckBox, { checked: adaptableQLOptions.caseSensitiveTextComparisons, onChange: (caseSensitiveTextComparisons) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.adaptableQLOptions = Object.assign({}, abOptions.adaptableQLOptions);
-                        abOptions.adaptableQLOptions.caseSensitiveTextComparisons =
-                            caseSensitiveTextComparisons;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use AG Grid Filter Form Style" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAgGridFilterFormStyle, onChange: (useAgGridFilterFormStyle) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAgGridFilterFormStyle = useAgGridFilterFormStyle;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableQuickFilter == true, onChange: (useAdaptableQuickFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableQuickFilter = useAdaptableQuickFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Filter Form" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableFilterForm == true, onChange: (useAdaptableFilterForm) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableFilterForm = useAdaptableFilterForm;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Indicate Filtered Columns" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.indicateFilteredColumns, onChange: (indicateFilteredColumns) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.indicateFilteredColumns = indicateFilteredColumns;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Apply Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.autoApplyFilter, onChange: (autoApplyFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.autoApplyFilter = autoApplyFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", margin: 2 },
-            React.createElement(rebass_1.Text, { style: { flex: 3 }, marginRight: 2 }, "Max Column Value Items To Display"),
-            React.createElement(rebass_1.Flex, { flex: 7, flexDirection: "row", alignItems: "center" },
-                React.createElement(Input_1.default, { style: { flex: 1 }, type: "number", placeholder: "Enter Number", onChange: (event) => {
-                        let e = event.target;
-                        let maxColumnValueItemsDisplayed = parseInt(e.value);
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.maxFilterValuesToDisplay = maxColumnValueItemsDisplayed;
-                        props.onChangeadAptableOptions(abOptions);
-                    }, value: filterOptions.maxFilterValuesToDisplay, marginRight: 3 })))));
+    const nocodeOptions = React.useMemo(() => {
+        const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
+        return [...metamodelService.getGridInfoNoCodeOptions()];
+    }, [props.adaptableOptions]);
+    const handleOptionChange = (sectionName) => (option) => {
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        if (sectionName === 'baseOptions') {
+            // @ts-ignore
+            adaptableOptions[option.name] = option.value;
+        }
+        else {
+            // @ts-ignore
+            adaptableOptions[sectionName] = Object.assign(Object.assign({}, adaptableOptions[sectionName]), { [option.name]: option.value });
+        }
+        props.onChangeadAptableOptions(adaptableOptions);
+    };
+    return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
+    })));
 };
-exports.default = AdaptableOptionsForm;
+exports.AdaptableOptionsForm = AdaptableOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -5,10 +5,11 @@ export interface NocodeColumn extends Partial<ColDef> {
     type?: string | string[];
     caption?: string;
 }
-declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }: {
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }: {
     onValidityChange: (valid: boolean) => any;
     handle: React.MutableRefObject<any>;
     columns: NocodeColumn[];
+    theme?: string;
     onChange?: (columns: NocodeColumn[]) => void;
     onSelectionChange?: (column: any, flag: boolean) => void;
     selectedColumns?: {

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

@@ -58,7 +58,7 @@ const tableDOMProps = {
         minHeight: 600,
     },
 };
-const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }) => {
     const rerender = useForceRender();
     const columnsRef = (0, react_1.useRef)(cols);
     const silentSetColumns = (columns) => {
@@ -316,7 +316,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             },
         },
     };
-    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: "light" },
+    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: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BoxProps } from 'rebass';
-export declare const NocodeWizardFormBox: React.FunctionComponent<BoxProps>;
+export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps>>;

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

@@ -8,10 +8,11 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
 const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
 const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
-const AdaptableOptionsForm_1 = tslib_1.__importDefault(require("./AdaptableOptionsForm"));
 const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
 const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
 const FinanceForm_1 = require("./FinanceForm");
+const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
 const ConfigurationWizard = (props) => {
     var _a, _b;
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
@@ -22,7 +23,7 @@ const ConfigurationWizard = (props) => {
                 toolPanels: ['columns', 'filters', 'adaptable'],
             },
         };
-        return Object.assign(Object.assign({}, props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
+        return Object.assign(Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions), props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
     });
     const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {
         return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
@@ -77,7 +78,7 @@ const ConfigurationWizard = (props) => {
             title: 'Adaptable Options',
             details: 'Configure Adaptable Options',
             isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
-            render: () => (React.createElement(AdaptableOptionsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
         },
         {
             title: 'Grid Options',

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

@@ -5,9 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
-    var _a, _b;
-    return (React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+    var _a, _b, _c;
+    let theme = 'light';
+    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
+        ((_a = props.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
+        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    }
+    return (React.createElement(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
-        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_c = (_b = props.adaptableOptions) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.columnDefs }));
 };
 exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

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

@@ -4,7 +4,6 @@ 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 AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -19,7 +18,7 @@ const tableDOMProps = {
     },
 };
 const EntitlementsListForm = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     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') {
@@ -31,28 +30,6 @@ const EntitlementsListForm = (props) => {
             return acc;
         }, {});
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
-    const colItems = [
-        {
-            Content: React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, "Entitlement"),
-            Size: 3,
-            key: 'name',
-        },
-        {
-            Content: 'Visible',
-            Size: 3,
-            key: 'Visible',
-        },
-        {
-            Content: 'Read Only',
-            Size: 3,
-            key: 'ReadOnly',
-        },
-        {
-            Content: 'Hidden',
-            Size: 3,
-            key: 'Hidden',
-        },
-    ];
     const handleOnChange = React.useCallback((module, accessLevel) => {
         let newEntitlements = entitlements;
         // change
@@ -73,15 +50,6 @@ const EntitlementsListForm = (props) => {
         }
         props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
-    const items = ALL_ENTITLEMENTS_MODULES.map((module) => {
-        const cItems = colItems.map((item) => (Object.assign({}, item)));
-        const accessLevel = entitlementsMap[module];
-        cItems[0].Content = React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, ModuleConstants_1.ADAPTABLE_MODULE_MAP[module]);
-        cItems[1].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
-        cItems[2].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
-        cItems[3].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: module, colItems: cItems, style: { cursor: 'pointer' } });
-    });
     if (typeof entitlements === 'function') {
         return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
@@ -119,7 +87,12 @@ const EntitlementsListForm = (props) => {
         },
     };
     const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ModuleConstants_1.ADAPTABLE_MODULE_MAP[module] }));
-    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: "light" },
+    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: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.d.ts

@@ -4,4 +4,4 @@ export interface FinanceFormProps {
     adaptableOptions: AdaptableOptions;
     onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
-export declare const FinanceForm: React.FunctionComponent<FinanceFormProps>;
+export declare const FinanceForm: React.FunctionComponent<React.PropsWithChildren<FinanceFormProps>>;

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

@@ -71,11 +71,11 @@ const FDC3InstrumentColumnBuilder = (props) => {
     return (React.createElement(rebass_1.Flex, null,
         React.createElement(FormLayout_1.default, { mr: 2 }, fields.slice(0, 4).map((field) => {
             var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
         })),
         React.createElement(FormLayout_1.default, null, fields.slice(4).map((field) => {
             var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
         })),
         React.createElement(rebass_1.Flex, { ml: 3, flexDirection: "column" }, fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => {
             var _a, _b;
@@ -89,7 +89,7 @@ const FDC3BaseColumnBuilder = (props) => {
         React.createElement(FormLayout_1.default, null,
             fields.map((field) => {
                 var _a, _b;
-                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
+                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
             }),
             React.createElement(FormLayout_1.FormRow, { label: "" },
                 React.createElement(rebass_1.Flex, { flexDirection: "column" }, intents.map((intent) => {
@@ -132,7 +132,7 @@ const FDC3ColumnBuilder = (props) => {
         props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { broadcastContextMenuLabel: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
     }, [props.fdc3Column]);
     return (React.createElement(FormBox_1.NocodeWizardFormBox, null,
-        React.createElement(rebass_1.Flex, null,
+        React.createElement(rebass_1.Flex, { flexWrap: "wrap" },
             React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
                 props.beforeContent,
                 React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
@@ -210,7 +210,7 @@ const FDC3ColumnCreator = (props) => {
     }
     return (React.createElement(FDC3ColumnBuilder, { disabled: fieldsDisabled, columnOptions: props.columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (newFDC3Column) => setFDC3Column(newFDC3Column), beforeContent: typeSelector, footer: React.createElement(rebass_1.Flex, null,
             React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { ml: 2 }, error)))),
+            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { key: error, ml: 2 }, error)))),
             React.createElement(SimpleButton_1.default, { disabled: fieldsDisabled || !fdc3Column.columnId, onClick: handleOnNew, icon: "plus", variant: "raised" }, "Add FDC3 Column")) }));
 };
 const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
@@ -238,8 +238,8 @@ const FinanceForm = (props) => {
         props.onChangeadAptableOptions(Object.assign(Object.assign({}, props.adaptableOptions), { plugins: [...props.adaptableOptions.plugins] }));
     };
     const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
-        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { mb: 3 },
-            React.createElement(FDC3ColumnEditor, { key: currentFDCColumnId, columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
+        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { key: currentFDCColumnId, mb: 3 },
+            React.createElement(FDC3ColumnEditor, { columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
                     const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
                         if (index === currentFDCColumnId) {
                             return editedFDC3Column;

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

@@ -6,11 +6,12 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const rebass_1 = require("rebass");
 const GridOptionsForm = (props) => {
     var _a;
     let abOptions = props.adaptableOptions;
     const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
-    return (React.createElement(React.Fragment, null,
+    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" },

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

@@ -7,14 +7,16 @@ const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const UIOptionsActionColumnsForm = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const options = [
         { value: 'clone', label: 'Clone' },
         { value: 'create', label: 'Create' },
         { value: 'edit', label: 'Edit' },
         { value: 'delete', label: 'Delete' },
     ];
-    const actionRowButtons = (_c = (_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons) !== null && _c !== void 0 ? _c : [];
+    const actionRowButtons = Array.isArray((_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons)
+        ? (_d = (_c = props.abOptions) === null || _c === void 0 ? void 0 : _c.actionOptions) === null || _d === void 0 ? void 0 : _d.actionRowButtons
+        : (_e = []) !== null && _e !== void 0 ? _e : [];
     const handleCheckChange = (type, checked) => {
         var _a;
         let newActionRowButtons = actionRowButtons;

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

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIElementsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
 const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
         React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
         React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })));

package/src/View/AdaptableWizardView/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { AdaptableWizardViewProps } from './Wizard';
-declare const AdaptableWizardView: React.FunctionComponent<AdaptableWizardViewProps>;
+declare const AdaptableWizardView: React.FunctionComponent<React.PropsWithChildren<AdaptableWizardViewProps>>;
 export default AdaptableWizardView;