@adaptabletools/adaptable 15.0.0-canary.0 → 15.0.0-canary.2

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

@@ -12,7 +12,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
 const AdaptablePopover_1 = require("../../AdaptablePopover");
 const LABEL_WIDTH = 250;
-const SUPPORTED_PRIMITEVE_TYPES = ['string', 'number', 'boolean'];
+const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
     const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
@@ -54,13 +54,13 @@ const OptionInput = (props) => {
     }
     else {
         switch (option.kind) {
-            case 'number':
+            case 'n':
                 input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
                 break;
-            case 'string':
+            case 's':
                 input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
                 break;
-            case 'boolean':
+            case 'b':
                 input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
                 break;
         }
@@ -71,7 +71,7 @@ const OptionInput = (props) => {
             " ",
             info),
         input));
-    if (option.kind === 'boolean') {
+    if (option.kind === 'b') {
         content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
             input,
             " ",

package/src/View/Charting/ShowChartButton.js

@@ -7,6 +7,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const useChartState_1 = require("./useChartState");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ShowChartButton = (props) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -21,7 +22,7 @@ const ShowChartButton = (props) => {
     }
     const containerOptions = [
         {
-            label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : 'Ag Grid Window',
+            label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : GeneralConstants_1.AG_GRID_CHART_WINDOW,
             onClick: () => {
                 showChart(null);
             },

package/src/View/Charting/useChartingElements.js

@@ -12,6 +12,7 @@ const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpe
 const useChartState_1 = require("./useChartState");
 const DeleteChartButton_1 = require("./DeleteChartButton");
 const EditChartButton_1 = require("./EditChartButton");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -75,7 +76,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         iconSize = 15;
     }
     const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || chartingOptions.agGridContainerName || 'Ag Grid Window'));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || chartingOptions.agGridContainerName || GeneralConstants_1.AG_GRID_CHART_WINDOW));
     const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -206,7 +206,7 @@ class QuickFilterFormComponent extends React.Component {
             var _a, _b;
             return (React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
                 // autoFocus has to be FALSE because if the input receives focus in the init phase,
-                // it may scroll the ag-grid header viewport into view and de-synchronize it (relative to the content viewport)
+                // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
                 autoFocus: false, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
                     if (e.nativeEvent.key === 'Escape') {
                         e.nativeEvent.preventDefault();

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -244,7 +244,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
             const api = adaptable.api;
             this.gui = document.createElement('div');
             this.gui.id = getContainerId();
-            // preserve ag-grid naming convention
+            // preserve AG Grid naming convention
             this.gui.className = 'ag-adaptable-panel';
             Object.keys(toolPanelContainerStyle).forEach((key) => {
                 //@ts-ignore

package/src/View/DataChangeHistory/buildActionColumnButton.d.ts

@@ -1,3 +1,3 @@
-import { RowNode } from '@ag-grid-community/core';
+import { IRowNode } from '@ag-grid-community/core';
 import { ActionColumnContext, AdaptableButton, DataChangeHistoryOptions } from '../../types';
-export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, undoRowNode: (rowNode: RowNode) => void) => AdaptableButton<ActionColumnContext>[];
+export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, undoRowNode: (rowNode: IRowNode) => void) => AdaptableButton<ActionColumnContext<any>>[];

package/src/View/Theme/ThemeEditor.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel } from '../../types';
+export interface ThemeEditorProps {
+    theme: string;
+    accessLevel: AccessLevel;
+}
+export declare const ThemeEditor: React.FunctionComponent<ThemeEditorProps>;

package/src/View/Theme/ThemeEditor.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ColorPicker_1 = require("../../components/ColorPicker");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const fields = [
+    {
+        name: 'Primary Color',
+        type: 'color',
+        variable: '--ab-color-primary',
+    },
+    {
+        name: 'Primary Dark Color',
+        type: 'color',
+        variable: '--ab-color-primarydark',
+    },
+    {
+        name: 'Primary Light Color',
+        type: 'color',
+        variable: '--ab-color-primarylight',
+    },
+    {
+        name: 'Text on Primary Color',
+        type: 'color',
+        variable: '--ab-color-text-on-primary',
+    },
+    {
+        name: 'Text on Primary Dark Color',
+        type: 'color',
+        variable: '--ab-color-text-on-primarydark',
+    },
+    {
+        name: 'Secondary Color',
+        type: 'color',
+        variable: '--ab-color-secondary',
+    },
+    {
+        name: 'Secondary Dark Color',
+        type: 'color',
+        variable: '--ab-color-secondarydark',
+    },
+    {
+        name: 'Secondary Light Color',
+        type: 'color',
+        variable: '--ab-color-secondarylight',
+    },
+    {
+        name: 'Text on Secondary Color',
+        type: 'color',
+        variable: '--ab-color-text-on-secondary',
+    },
+    {
+        name: 'Text on Secondary Light Color',
+        type: 'color',
+        variable: '--ab-color-text-on-secondarylight',
+    },
+    {
+        name: 'Default background',
+        type: 'color',
+        variable: '--ab-color-defaultbackground',
+    },
+    {
+        name: 'Text Color on Default Background',
+        type: 'color',
+        variable: '--ab-color-text-on-defaultbackground',
+    },
+];
+const Field = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    let input = null;
+    let value = props.value;
+    const throttledOnChange = React.useMemo(() => {
+        return (0, throttle_1.default)((value) => {
+            props.onChange(value);
+        }, 300);
+    }, []);
+    if (value === undefined) {
+        value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
+    }
+    switch (props.type) {
+        case 'number':
+            input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
+            break;
+        case 'color':
+            input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
+            break;
+    }
+    return (React.createElement(FormLayout_1.FormRow, { label: props.name },
+        React.createElement(rebass_1.Flex, null,
+            input,
+            ' ',
+            React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
+};
+const ThemeEditor = (props) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const allThemes = adaptable.api.themeApi.getUserThemes();
+    const disabled = props.accessLevel === 'ReadOnly';
+    const [currentThemeObject, setCurrentThemeObject] = React.useState(() => {
+        return adaptable.api.themeApi.getCurrentThemeObject();
+    });
+    // THEME variables
+    const themeVariables = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables;
+    const valuesFromTheme = fields.reduce((acc, field) => {
+        if (themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable]) {
+            acc[field.variable] = themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable];
+        }
+        return acc;
+    }, {});
+    React.useEffect(() => {
+        setCurrentThemeObject(adaptable.api.themeApi.getCurrentThemeObject());
+    }, [props.theme]);
+    // This is needed when clearing variables, so the new value is pickedup up from the document
+    React.useEffect(() => {
+        const updateTheme = () => {
+            const theme = adaptable.api.themeApi.getCurrentThemeObject();
+            setCurrentThemeObject(Object.assign({}, theme));
+        };
+        const themeChangedUnsubscribe = adaptable.api.eventApi.on('ThemeChanged', updateTheme);
+        const themeEditedUnsubscribe = adaptable.api.eventApi.on('ThemeEdited', updateTheme);
+        return () => {
+            themeChangedUnsubscribe();
+            themeEditedUnsubscribe();
+        };
+    }, []);
+    const handleNameDescriptionChangeThrottled = React.useMemo(() => {
+        return (0, throttle_1.default)((key, value) => {
+            const theme = adaptable.api.themeApi.getCurrentThemeObject();
+            const newTheme = Object.assign(Object.assign({}, theme), { [key]: value });
+            adaptable.api.themeApi.editTheme(newTheme);
+        }, 600);
+    }, []);
+    const handleDescriptionChange = React.useCallback((key, value) => {
+        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        handleNameDescriptionChangeThrottled(key, value);
+    }, []);
+    const handleDeleteTheme = React.useCallback(() => {
+        adaptable.api.themeApi.loadLightTheme();
+        adaptable.api.themeApi.deleteUserTheme(currentThemeObject);
+    }, []);
+    const handleSaveName = () => {
+        const name = currentThemeObject.Name;
+        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { Name: name })));
+        handleNameDescriptionChangeThrottled('Name', name);
+    };
+    const nameHasChanged = currentThemeObject.Name !== props.theme;
+    const nameIsNotUnique = allThemes.some((theme) => theme.Uuid !== currentThemeObject.Uuid && currentThemeObject.Name === theme.Name);
+    const saveNameDisabled = !nameHasChanged || nameIsNotUnique || currentThemeObject.Name === '';
+    return (React.createElement(Panel_1.default, { header: React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+            React.createElement(rebass_1.Box, { flex: 1 }, " Edit Custom Theme"),
+            React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "trash", onClick: handleDeleteTheme, variant: "text" })) },
+        React.createElement(FormLayout_1.default, null,
+            React.createElement(FormLayout_1.FormRow, { label: "Theme Name" },
+                React.createElement(AdaptableInput_1.default, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
+                React.createElement(SimpleButton_1.default, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
+                React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
+                nameIsNotUnique && (React.createElement(rebass_1.Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+            React.createElement(FormLayout_1.FormRow, { label: "Description" },
+                React.createElement(AdaptableInput_1.default, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
+            fields.map((field) => {
+                return (React.createElement(Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
+                        // needs a fresh copy
+                        const currentThemeObject = adaptable.api.themeApi.getCurrentThemeObject();
+                        let newTheme = null;
+                        if (val === false) {
+                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables) });
+                            delete newTheme.CSSVariables[field.variable];
+                        }
+                        else {
+                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign(Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables), { [field.variable]: val }) });
+                        }
+                        setCurrentThemeObject(newTheme);
+                        adaptable.api.themeApi.editTheme(newTheme);
+                    } }));
+            }))));
+};
+exports.ThemeEditor = ThemeEditor;

package/src/View/Theme/ThemePopup.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import { AdaptableTheme } from '../../PredefinedConfig/ThemeState';
 interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
     CurrentTheme: string;
+    UserThemes: AdaptableTheme[];
     SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
 }
 declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
     render(): JSX.Element;
     onChangeTheme(value: string): void;
+    handleCreateNewTheme: () => void;
 }
 export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, any>;
 export {};

package/src/View/Theme/ThemePopup.js

@@ -8,11 +8,31 @@ const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/The
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const ThemeEditor_1 = require("./ThemeEditor");
+const rebass_1 = require("rebass");
+const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 class ThemePopupComponent extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleCreateNewTheme = () => {
+            let nthItem = this.props.UserThemes.length + 1;
+            let name = 'Custom-Theme-' + nthItem;
+            // make sure it is unique
+            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
+                nthItem++;
+                name = 'Custom-Theme-' + nthItem;
+            }
+            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
+            this.props.api.themeApi.addUserTheme(newTheme);
+            this.props.api.themeApi.loadTheme(newTheme.Name);
+        };
+    }
     render() {
         const availableThemes = this.props.api.themeApi.getThemes();
-        let currentThemeDescription = '';
-        let optionThemes = availableThemes.map((theme) => {
+        const theme = this.props.api.themeApi.getCurrentThemeObject();
+        const currentThemeDescription = theme.Description || theme.Name;
+        const optionThemes = availableThemes.map((theme) => {
             if (typeof theme === 'string') {
                 // protection against old state, which could be string
                 theme = {
@@ -20,19 +40,22 @@ class ThemePopupComponent extends React.Component {
                     Description: theme,
                 };
             }
-            if (theme.Name === this.props.CurrentTheme) {
-                currentThemeDescription = theme.Description;
-            }
             return {
                 value: theme.Name,
                 label: theme.Description,
                 onClick: () => this.onChangeTheme(theme.Name),
             };
         });
+        const isCustomTheme = this.props.api.themeApi
+            .getUserThemes()
+            .some((theme) => theme.Name === this.props.CurrentTheme);
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription)))));
+                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription),
+                    React.createElement(ButtonNew_1.ButtonNew, { ml: 2, onClick: this.handleCreateNewTheme, accessLevel: this.props.accessLevel }))),
+            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
+                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);
@@ -41,6 +64,7 @@ class ThemePopupComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         CurrentTheme: state.Theme.CurrentTheme,
+        UserThemes: state.Theme.UserThemes,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/agGrid/ActionColumnRenderer.js

@@ -61,6 +61,7 @@ const ReactActionColumnRenderer = (props) => {
     if (!actionColumn || !actionButtons.length) {
         return null;
     }
+    // TODO: see why types do not match
     if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
         return null;
     }

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ChartRef, ColDef, ColGroupDef, Column, ColumnRowGroupChangedEvent, ExcelStyle, GridOptions, Module, ModuleNames, RowNode } from '@ag-grid-community/core';
+import { ChartRef, ColDef, ColGroupDef, Column, ColumnRowGroupChangedEvent, ExcelStyle, GridOptions, Module, ModuleNames, IRowNode } from '@ag-grid-community/core';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { AdaptableVariant, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -61,6 +61,7 @@ export declare class Adaptable implements IAdaptable {
     RowEditService: IRowEditService;
     private LicenseService;
     private ChartingService;
+    private ThemeService;
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
@@ -149,9 +150,9 @@ export declare class Adaptable implements IAdaptable {
     private filterOnEditDataChange;
     private filterOnTickingDataChange;
     applyGridFiltering(): void;
-    isGroupRowNode(rowNode: RowNode): boolean;
-    isVisibleNode(rowNode: RowNode): boolean;
-    isPinnedRowNode(rowNode: RowNode): boolean;
+    isGroupRowNode(rowNode: IRowNode): boolean;
+    isVisibleNode(rowNode: IRowNode): boolean;
+    isPinnedRowNode(rowNode: IRowNode): boolean;
     clearGridFiltering(): void;
     clearColumnFiltering(columnIds: string[]): void;
     hideFilterFormPopup: Function;
@@ -180,7 +181,7 @@ export declare class Adaptable implements IAdaptable {
     private getEditableCellClass;
     private getReadonlyCellClass;
     private isQuickSearchActive;
-    getPrimaryKeyValueFromRowNode(rowNode: RowNode): any;
+    getPrimaryKeyValueFromRowNode(rowNode: IRowNode): any;
     private getSortedColumnStateForVisibleColumns;
     setColumnOrder(VisibleColumnList: string[]): void;
     private persistLayout;
@@ -189,59 +190,59 @@ export declare class Adaptable implements IAdaptable {
     private updateLayoutFromGrid;
     setSelectedCells(): SelectedCellInfo | undefined;
     setSelectedRows(): SelectedRowInfo | undefined;
-    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: RowNode): void;
+    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: IRowNode): void;
     setCellValue(cellDataChangedInfo: CellDataChangedInfo): void;
     cancelEdit(): void;
-    isCellEditable(rowNode: RowNode, column: Column): boolean;
-    getDistinctValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: RowNode, permittedValues?: any[]): GridCell[];
-    getDistinctFilterValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, filter: string, skipRowNode?: RowNode): Promise<{
+    isCellEditable(rowNode: IRowNode, column: Column): boolean;
+    getDistinctValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: IRowNode, permittedValues?: any[]): GridCell[];
+    getDistinctFilterValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, filter: string, skipRowNode?: IRowNode): Promise<{
         suppressClientSideFilter?: boolean;
         gridCells: GridCell[];
     }>;
-    getDistinctCustomSortValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: RowNode): Promise<GridCell[]>;
-    getDistinctBulkUpdateValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, selectedGridCells: GridCell[], skipRowNode?: RowNode): Promise<GridCell[]>;
+    getDistinctCustomSortValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: IRowNode): Promise<GridCell<any>[]>;
+    getDistinctBulkUpdateValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, selectedGridCells: GridCell[], skipRowNode?: IRowNode): Promise<GridCell<any>[]>;
     getColumnValueDisplayValuePairList(columnId: string, visibleRowsOnly: boolean, onlyIncludeIds?: {
         [key: string]: boolean;
     }): GridCell[];
     private addDistinctColumnValue;
     getDisplayValue(primaryKey: any, columnId: string): string | undefined;
-    getGridCellFromRowNode(rowNode: RowNode, columnId: string): GridCell | undefined;
-    getDisplayValueFromRowNode(rowNode: RowNode, columnId: string): string | undefined;
-    getDisplayValueFromRawValue(rowNode: RowNode, columnId: string, rawValue: any): string | undefined;
+    getGridCellFromRowNode(rowNode: IRowNode, columnId: string): GridCell | undefined;
+    getDisplayValueFromRowNode(rowNode: IRowNode, columnId: string): string | undefined;
+    getDisplayValueFromRawValue(rowNode: IRowNode, columnId: string, rawValue: any): string | undefined;
     private getFormattedValue;
     getNormalisedValueFromRawValue(rawValue: any, column: AdaptableColumn): string | number | boolean | Date | unknown;
-    getRawValueFromRowNode(rowNode: RowNode, columnId: string): any;
-    getDataRowFromRowNode(rowNode: RowNode): any;
+    getRawValueFromRowNode(rowNode: IRowNode, columnId: string): any;
+    getDataRowFromRowNode(rowNode: IRowNode): any;
     getRowNodeForPrimaryKey(primaryKeyValue: any): any;
-    getRowNodeByIndex(index: number): RowNode;
+    getRowNodeByIndex(index: number): IRowNode;
     getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
-    forAllRowNodesDo(func: (rowNode: RowNode) => void, config?: {
+    forAllRowNodesDo(func: (rowNode: IRowNode) => void, config?: {
         includeGroupRows?: boolean;
-        filterFn?: (rowNode: RowNode) => boolean;
+        filterFn?: (rowNode: IRowNode) => boolean;
     }): void;
-    forAllVisibleRowNodesDo(func: (rowNode: RowNode, rowIndex: number) => void): void;
-    getVisibleRowNodes(): RowNode[];
+    forAllVisibleRowNodesDo(func: (rowNode: IRowNode, rowIndex: number) => void): void;
+    getVisibleRowNodes(): IRowNode[];
     getAllRowNodes(config?: {
         includeGroupRows?: boolean;
-        filterFn?: (rowNode: RowNode) => boolean;
-    }): RowNode[];
-    getRowsInViewport(): RowNode[];
-    selectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
-    deSelectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
-    selectNode(rowNode: RowNode, clearSelection: boolean): void;
-    deSelectNode(rowNode: RowNode, clearSelection: boolean): void;
-    selectCells(columnIds: string[], startNode: RowNode, endNode: RowNode, clearSelection?: boolean): void;
-    isRowNodeVisible(rowNode: RowNode): boolean;
+        filterFn?: (rowNode: IRowNode) => boolean;
+    }): IRowNode[];
+    getRowsInViewport(): IRowNode[];
+    selectNodes(rowNodes: IRowNode[], clearSelection: boolean): void;
+    deSelectNodes(rowNodes: IRowNode[], clearSelection: boolean): void;
+    selectNode(rowNode: IRowNode, clearSelection: boolean): void;
+    deSelectNode(rowNode: IRowNode, clearSelection: boolean): void;
+    selectCells(columnIds: string[], startNode: IRowNode, endNode: IRowNode, clearSelection?: boolean): void;
+    isRowNodeVisible(rowNode: IRowNode): boolean;
     redrawBody(): void;
     redrawRenderedRows(): void;
     redrawHeader(): void;
-    redrawRow(rowNode: RowNode): void;
-    redrawRows(rowNodes: RowNode[]): void;
-    refreshCells(rowNodes: RowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
+    redrawRow(rowNode: IRowNode): void;
+    redrawRows(rowNodes: IRowNode[]): void;
+    refreshCells(rowNodes: IRowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     refreshColumns(columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
-    jumpToRow(rowNode: RowNode): void;
+    jumpToRow(rowNode: IRowNode): void;
     jumpToColumn(columnId: string): void;
-    jumpToCell(columnId: string, rowNode: RowNode): void;
+    jumpToCell(columnId: string, rowNode: IRowNode): void;
     /**
      * This creates a clone of the current column definitions. If config.removeEmpty is true, will also remove empty column groups
      *
@@ -260,8 +261,8 @@ export declare class Adaptable implements IAdaptable {
     getColDefs(): ColDef[];
     getGroupedColDefs(): ColDef[];
     getColumnDefsWithCorrectVisibility: () => ColDef[];
-    getFirstRowNode(): RowNode;
-    getFirstDisplayedRowNode(): RowNode;
+    getFirstRowNode(): IRowNode;
+    getFirstDisplayedRowNode(): IRowNode;
     destroy(config?: {
         unmount: boolean;
         destroyApi?: boolean;
@@ -345,9 +346,9 @@ export declare class Adaptable implements IAdaptable {
     getGridData(): any[];
     getFilteredData(): any[];
     loadDataSource(dataSource: any[]): void;
-    updateRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<RowNode[]>;
-    addRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<RowNode[]>;
-    deleteRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<RowNode[]>;
+    updateRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
+    addRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
+    deleteRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     getFirstGroupedColumn(): AdaptableColumn | undefined;
     private checkColumnsDataTypeSet;
     private updateColumnDataTypeIfRowDataIsEmpty;
@@ -362,7 +363,7 @@ export declare class Adaptable implements IAdaptable {
     showQuickFilter(): void;
     hideQuickFilter(): void;
     getAgGridColumnType(columnId: string): string | string[];
-    getActiveColumnComparator(columnId: string, customSort?: CustomSort, customSortComparer?: ColumnValuesComparer): (valueA: any, valueB: any, nodeA?: RowNode, nodeB?: RowNode, isInverted?: boolean) => number | undefined;
+    getActiveColumnComparator(columnId: string, customSort?: CustomSort, customSortComparer?: ColumnValuesComparer): (valueA: any, valueB: any, nodeA?: IRowNode, nodeB?: IRowNode, isInverted?: boolean) => number | undefined;
     getAgGridLightThemeName(): string;
     getAgGridCurrentThemeName(): string;
     applyAdaptableTheme(theme: AdaptableTheme | string): void;