@adaptabletools/adaptable 13.0.0-canary.11 → 13.0.0-canary.13

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = 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 ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColorPicker_1 = require("../../ColorPicker");
+const RangesComponent_1 = require("../../Components/RangesComponent");
+const StyleVisualItem_1 = require("../../Components/StyleVisualItem");
+const UIHelper_1 = require("../../UIHelper");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, exports.renderStyledColumnStyleSummary)(data, api);
+};
+exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
+const getRanges = (ranges) => {
+    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            r.Min,
+            " to ",
+            r.Max,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: r.Color,
+                ForeColor: r.Color,
+            } }))));
+};
+const getColumnComparison = (columnComparison, api) => {
+    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            "Min Value:",
+            ' ',
+            isNaN(Number(columnComparison.MinValue))
+                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MinValue)) + ']'
+                : columnComparison.MinValue,
+            ' ',
+            ", Max Value:",
+            ' ',
+            isNaN(Number(columnComparison.MaxValue))
+                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MaxValue)) + ']'
+                : columnComparison.MaxValue,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: columnComparison.Color,
+                ForeColor: columnComparison.Color,
+            } })));
+};
+const renderStyledColumnStyleSummary = (data, api) => {
+    if (data.CheckBoxStyle) {
+        return React.createElement(Tag_1.Tag, null, "Checkbox Style");
+    }
+    if (data.GradientStyle) {
+        if (data.GradientStyle.CellRanges) {
+            return getRanges(data.GradientStyle.CellRanges);
+        }
+        if (data.GradientStyle.ColumnComparison) {
+            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
+        }
+    }
+    if (data.PercentBarStyle) {
+        if (data.PercentBarStyle.CellRanges) {
+            return getRanges(data.PercentBarStyle.CellRanges);
+        }
+        if (data.PercentBarStyle.ColumnComparison) {
+            return getColumnComparison(data.PercentBarStyle.ColumnComparison, api);
+        }
+    }
+    return React.createElement(Tag_1.Tag, null, "No Styling Defined");
+};
+exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
+const StyledColumnWizardStyleSection = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId) {
+            return null;
+        }
+        const column = api.columnApi.getColumnFromId(columnId);
+        return {
+            min: api.columnApi.getMinValueForNumericColumn(column),
+            max: api.columnApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
+    // gradient
+    const onUpdateGradientStyleRanges = (ranges) => {
+        const GradientStyle = {
+            CellRanges: ranges,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
+        const GradientStyle = {
+            ColumnComparison: columnComparison,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    // percentbar
+    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
+        const PercentBarStyle = {
+            ColumnComparison: columnComparison,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onUpdatePercentBarStyleRanges = (ranges) => {
+        const PercentBarStyle = {
+            CellRanges: ranges,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onPercentBarCellTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarCellTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onUsePercentStyleColorCheckChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onForeColorSelectChange = (color) => {
+        let percentBarStyle = data.PercentBarStyle;
+        percentBarStyle.BackColor = color;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const disabled = !data.ColumnId;
+    return (React.createElement(rebass_1.Box, null,
+        data.CheckBoxStyle && (React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Check Box Column"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
+        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, columnComparison: (_b = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _b === void 0 ? void 0 : _b.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+        data.PercentBarStyle && (React.createElement(React.Fragment, null,
+            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_c = data.PercentBarStyle) === null || _c === void 0 ? void 0 : _c.CellRanges, columnComparison: (_d = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_f = (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.CellText) === null || _f === void 0 ? void 0 : _f.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_h = (_g = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.ToolTipText) === null || _k === void 0 ? void 0 : _k.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
+                    React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_o = data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_p = data.PercentBarStyle) === null || _p === void 0 ? void 0 : _p.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+        !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
+};
+exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => JSX.Element;
+export interface StyledColumnWizardTypeSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardTypeSection: React.FunctionComponent<StyledColumnWizardTypeSectionProps>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderStyledColumnTypeSummary = (data) => {
+    let type = null;
+    if (data.GradientStyle) {
+        type = 'Gradient Column';
+    }
+    else if (data.PercentBarStyle) {
+        type = 'Percent Bar';
+    }
+    else if (data.CheckBoxStyle) {
+        type = 'Check Box';
+    }
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+        "Type ",
+        React.createElement(Tag_1.Tag, null, type)));
+};
+exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
+const StyledColumnWizardTypeSection = (props) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleTypeChange = (type) => {
+        const newStyledColumn = Object.assign({}, data);
+        switch (type) {
+            case 'gradient':
+                newStyledColumn.GradientStyle = {};
+                delete newStyledColumn.PercentBarStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'percent':
+                newStyledColumn.PercentBarStyle = {};
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'checkbox':
+                newStyledColumn.CheckBoxStyle = true;
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.PercentBarStyle;
+                break;
+        }
+        newStyledColumn.ColumnId = null;
+        props.onChange(newStyledColumn);
+    };
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.default, { checked: Boolean(data.GradientStyle), onChange: () => handleTypeChange('gradient') }, "Gradient Column"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('percent'), checked: Boolean(data.PercentBarStyle) }, "Percent Bar"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('checkbox'), checked: Boolean(data.CheckBoxStyle) }, "Check Box")))));
+};
+exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -8,5 +8,5 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
     constructor(props: SystemStatusViewPanelComponentProps);
     render(): JSX.Element;
 }
-export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "SystemStatusMessageInfos" | "viewType">>;
+export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "SystemStatusMessageInfos" | "viewType">>;
 export {};

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -22,7 +22,7 @@ export interface OnePageAdaptableWizardSection<ENTITY> {
     isValid?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => true | string;
     isVisible?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => boolean;
     render: (data: ENTITY, index: number) => React.ReactNode;
-    renderSummary?: (data: ENTITY) => React.ReactNode;
+    renderSummary?: (data: ENTITY, api: AdaptableApi) => React.ReactNode;
 }
 export interface OnePageAdaptableWizardProps<ENTITY> {
     moduleInfo: ModuleInfo;

package/src/agGrid/Adaptable.d.ts

@@ -1,6 +1,6 @@
 import { ChartModel, ChartRef, ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, ModuleNames, RowNode } from '@ag-grid-community/core';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
-import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+import { AdaptableVariant, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AdaptableApi } from '../Api/AdaptableApi';
@@ -40,6 +40,7 @@ declare type RuntimeConfig = {
     waitForAgGrid?: boolean;
     supressReact18RenderWarning?: boolean;
     renderReactRoot?: RenderReactRootFn;
+    variant?: AdaptableVariant;
 };
 export declare class Adaptable implements IAdaptable {
     api: AdaptableApi;
@@ -62,6 +63,7 @@ export declare class Adaptable implements IAdaptable {
     gridOptions: GridOptions;
     isInitialised: boolean;
     hasAdaptableToolPanel: boolean;
+    variant: AdaptableVariant;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
@@ -155,6 +157,8 @@ export declare class Adaptable implements IAdaptable {
     updateColumnsIntoStore(): void;
     private createAdaptableColumn;
     private safeSetColDefs;
+    private getStyledColumnStyle;
+    private getSpecialColumnStyle;
     private getFormatColumnSpecialColumnStyle;
     private getFormatColumnColumnStyle;
     private getFormatColumnCellStyle;
@@ -363,7 +367,6 @@ export declare class Adaptable implements IAdaptable {
     private setupColumnHeaderAggregations;
     private getConditionalStyleRowClass;
     private getConditionalStyleRowStyle;
-    private getFormatColumnRowStyle;
     private getGridOptionsApi;
     canGenerateCharts(): boolean;
     canHaveSparklines(): boolean;

package/src/agGrid/Adaptable.js

@@ -140,6 +140,7 @@ const forEachColumn = (cols, fn, parentColGroup) => {
 const adaptableInstances = {};
 class Adaptable {
     constructor() {
+        this.variant = 'vanilla';
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
         this.columnMinMaxValuesCache = {};
@@ -342,10 +343,26 @@ class Adaptable {
     // this is still used internally but should not be used externally as a preference
     async init(adaptableOptions, runtimeConfig, _staticInit) {
         var _a, _b, _c, _d, _e, _f;
+        // (globalThis as any).adaptable = this;
         if (runtimeConfig) {
             this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
             if (runtimeConfig.renderReactRoot) {
-                this.renderReactRoot = runtimeConfig.renderReactRoot;
+                this.renderReactRoot = (el, container) => {
+                    const unmount = runtimeConfig.renderReactRoot(el, container);
+                    return () => {
+                        // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
+                        // as we didn't have a native React implementation for our React wrapper
+                        // but we might need to do this again in the future for some other components that are not native React
+                        // captureReactWarnings();
+                        if (typeof unmount === 'function') {
+                            unmount();
+                        }
+                        // releaseReactWarnings();
+                    };
+                };
+            }
+            if (runtimeConfig.variant) {
+                this.variant = runtimeConfig.variant;
             }
         }
         if (!_staticInit) {
@@ -430,10 +447,12 @@ class Adaptable {
             abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
         });
         if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefNumber.cellEditor = AdaptableNumberEditor_1.AdaptableNumberEditor;
+            this.gridOptions.columnTypes.abColDefNumber.cellEditor =
+                this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
         }
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
+            this.gridOptions.columnTypes.abColDefDate.cellEditor =
+                this.variant === 'react' ? AdaptableDateEditor_1.ReactAdaptableDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
         }
         // validate the provided AdaptableOptions
         this.MetamodelService.validateAdaptableOptionsValues();
@@ -893,13 +912,15 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
-        const columnStyle = formatColumn.ColumnStyle;
+    getStyledColumnStyle(styledColumn, abColumn, params) {
+        return this.getSpecialColumnStyle(styledColumn, abColumn, params);
+    }
+    getSpecialColumnStyle(columnStyle, abColumn, params) {
         let style = {};
         const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
         if (gradientStyle) {
-            const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-            const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
+            const min = this.api.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
+            const max = this.api.styledColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
             const clampedValue = (0, clamp_1.default)(params.value, min, max);
             let cellBackColor;
             let reverseGradient = false;
@@ -929,10 +950,26 @@ class Adaptable {
         }
         return style;
     }
+    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
+        return this.getSpecialColumnStyle(formatColumn.ColumnStyle, abColumn, params);
+    }
     getFormatColumnColumnStyle(formatColumns) {
         // first has more precedence, then they need to be applied in reverse order
         return formatColumns.reduceRight((style, formatColumn) => {
             const formatColumnStyle = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            if (formatColumn.CellAlignment) {
+                switch (formatColumn.CellAlignment) {
+                    case 'Left':
+                        style.textAlign = 'left';
+                        break;
+                    case 'Right':
+                        style.textAlign = 'right';
+                        break;
+                    case 'Center':
+                        style.textAlign = 'center';
+                        break;
+                }
+            }
             return Object.assign(Object.assign({}, style), formatColumnStyle);
         }, {});
     }
@@ -956,19 +993,6 @@ class Adaptable {
             }
             style = Object.assign(Object.assign({}, style), this.getFormatColumnColumnStyle(activeFormatColumnsWithStyle));
         }
-        if (formatColumn.CellAlignment) {
-            switch (formatColumn.CellAlignment) {
-                case 'Left':
-                    style.textAlign = 'left';
-                    break;
-                case 'Right':
-                    style.textAlign = 'right';
-                    break;
-                case 'Center':
-                    style.textAlign = 'center';
-                    break;
-            }
-        }
         return style;
     }
     getFormatColumnCellClass(formatColumns, abColumn, params) {
@@ -1310,7 +1334,7 @@ class Adaptable {
             const colId = customSort.ColumnId;
             if (!layoutColumnsMap[colId]) {
                 // pivot layouts may have no pivot columns, only aggregation columns
-                if (layout.AggregationColumns[colId] == undefined) {
+                if (!layout.AggregationColumns || layout.AggregationColumns[colId] == undefined) {
                     return acc;
                 }
             }
@@ -3187,16 +3211,20 @@ class Adaptable {
             };
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
+            let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+            if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
+                styledColumn = null;
+            }
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
-                const formatColumnCellStyle = formatColumn
+                const formatColumnCellStyle = formatColumn && !styledColumn // TODO: remove after refactor columnStyle
                     ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params)
                     : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
                 const conditionalStyleObj = this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), conditionalStyleObj), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), conditionalStyleObj), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3218,10 +3246,12 @@ class Adaptable {
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
                 const flashingClassName = this.getFlashingCellClass(abColumn, params);
+                const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+                const hasStyledColumn = styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumns.length
+                    !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
                     hasConditionalStylesWithClassNames
@@ -3236,7 +3266,9 @@ class Adaptable {
                     // we flatten the array because some rules ('userCellClass',conditionalStyles etc)  might return a string[]
                     .flat()
                     .filter((x) => !!x);
-                return returnValue.length ? returnValue : undefined;
+                const result = returnValue.length ? returnValue : undefined;
+                // console.log(result);
+                return result;
             };
             return cellClass;
         });
@@ -3282,10 +3314,19 @@ class Adaptable {
     }
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.PercentBarStyle) {
+                    return this.agGridHelper.createPercentBarRendererComp(styledColumn, abColumn);
+                }
+                if (styledColumn.CheckBoxStyle) {
+                    return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
+                }
+            }
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
                 if (formatColumn.ColumnStyle.PercentBarStyle) {
-                    return this.agGridHelper.createPercentBarRendererComp(formatColumn, abColumn);
+                    return this.agGridHelper.createPercentBarRendererComp(formatColumn.ColumnStyle, abColumn);
                 }
                 if (formatColumn.ColumnStyle.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
@@ -3304,8 +3345,8 @@ class Adaptable {
                 formatColumn.ColumnStyle.PercentBarStyle.ToolTipText) {
                 if ((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) {
                     return (params) => {
-                        const min = this.api.formatColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const max = this.api.formatColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
+                        const min = this.api.styledColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
+                        const max = this.api.styledColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
                         const textOptions = formatColumn.ColumnStyle.PercentBarStyle.ToolTipText;
                         let returnValue = '';
                         if (textOptions.includes('CellValue')) {
@@ -4366,11 +4407,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     setupRowStyling() {
         // first get the conditional style state
         const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
-        const formatColumnsStyles = this.api.formatColumnApi.getRowFormatColumnsWithStyle();
         // Set any Row Styles (i.e. items without a classname)
         this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
             return (params) => {
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params)), this.getFormatColumnRowStyle(formatColumnsStyles, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
                 return result;
             };
         });
@@ -4384,7 +4424,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     highlightClassName,
                     alertHighlightClassName,
                     this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
-                    this.getFormatColumnRowClass(formatColumnsStyles, params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4427,14 +4466,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             }
         }
     }
-    getFormatColumnRowStyle(formatColumns, params) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(formatColumns)) {
-            const formatColumnWithRowStyle = formatColumns.find((formatColumn) => this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params));
-            if (formatColumnWithRowStyle) {
-                return this.convertAdaptableStyleToCSS(formatColumnWithRowStyle.Style);
-            }
-        }
-    }
     getGridOptionsApi() {
         if (!this.gridOptions.api) {
             (0, LoggingHelper_1.ConsoleLogError)('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');
@@ -4793,7 +4824,9 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         if (value !== undefined) {
             return value;
         }
-        const distinctRawValues = this.api.columnApi.getDistinctRawValuesForColumn(columnId);
+        const distinctRawValues = this.api.columnApi
+            .getUnsortedDistinctRawValuesForColumn(columnId)
+            .map((item) => item.rawValue);
         value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
         this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
         return value;