@adaptabletools/adaptable 13.0.1 → 13.0.3

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/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.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/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/Components/FilterForm/QuickFilterForm.js

@@ -210,8 +210,8 @@ class QuickFilterFormComponent extends React.Component {
                         e.nativeEvent.stopPropagation();
                         this.clearFilter();
                     }
-                }, flex: 1, style: {
-                    minWidth: 0,
+                }, style: {
+                    width: '100%',
                     padding: 'var(--ab-space-1)',
                     borderRadius: 0,
                     borderLeftWidth: 0,

package/src/agGrid/ActionColumnRenderer.js

@@ -70,6 +70,7 @@ const ReactActionColumnRenderer = (props) => {
         primaryKeyValue: pkValue,
         rowNode: props.node,
         adaptableApi: adaptable.api,
+        data: props.data,
     };
     return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
 };
@@ -96,6 +97,7 @@ class ActionColumnRenderer {
             primaryKeyValue: pkValue,
             rowNode: params.node,
             adaptableApi: adaptable.api,
+            data: params.data,
         };
         const eGui = this.eGui;
         const doRender = () => {

package/src/agGrid/Adaptable.d.ts

@@ -233,6 +233,7 @@ export declare class Adaptable implements IAdaptable {
     redrawRow(rowNode: RowNode): void;
     redrawRows(rowNodes: RowNode[]): void;
     refreshCells(rowNodes: RowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
+    refreshColumns(columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     jumpToRow(rowNode: RowNode): void;
     jumpToColumn(columnId: string): void;
     jumpToCell(columnId: string, rowNode: RowNode): void;
@@ -305,6 +306,7 @@ export declare class Adaptable implements IAdaptable {
     private getExpressionStylesChanges;
     private getStyledColumnComparisonChanges;
     private checkChangedCellCurrentlySelected;
+    refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos: CellDataChangedInfo[]): void;
     private getColumnSorts;
     private onSortChanged;
     expandAllRowGroups(): void;