@adaptabletools/adaptable 13.0.0-canary.1 → 13.0.0-canary.3

package/src/agGrid/Adaptable.js

@@ -8,7 +8,6 @@ const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const uniqBy_1 = tslib_1.__importDefault(require("lodash/uniqBy"));
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -64,6 +63,7 @@ const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const RowEditService_1 = require("../Utilities/Services/RowEditService");
 const weightedAverage_1 = require("./weightedAverage");
 const AggregationColumns_1 = require("../PredefinedConfig/Common/AggregationColumns");
+const renderReactRoot_1 = require("../renderReactRoot");
 const tinycolor = require('tinycolor2');
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
@@ -169,6 +169,8 @@ class Adaptable {
         };
         this._adaptableReady = false;
         this.isDestroyed = false;
+        this.supressReact18RenderWarning = false;
+        this.renderReactRoot = (node, container) => (0, renderReactRoot_1.renderReactRoot)(node, container, this.supressReact18RenderWarning);
         this.isPluginLoaded = (pluginId) => {
             const plugins = this.adaptableOptions.plugins || [];
             for (let i = 0, len = plugins.length; i < len; i++) {
@@ -274,7 +276,9 @@ class Adaptable {
         else {
             core_1.ModuleRegistry.registerModules(runtimeConfig.agGridModules);
         }
-        return Adaptable.initInternal(adaptableOptions);
+        return Adaptable.initInternal(adaptableOptions, {
+            supressReact18RenderWarning: true,
+        });
     }
     /**
      * Lazy static constructor for Adaptable
@@ -337,6 +341,12 @@ 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;
+        if (runtimeConfig) {
+            this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
+            if (runtimeConfig.renderReactRoot) {
+                this.renderReactRoot = runtimeConfig.renderReactRoot;
+            }
+        }
         if (!_staticInit) {
             (0, LoggingHelper_1.ConsoleLogWarning)(`
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -475,7 +485,7 @@ class Adaptable {
             }
             if (this.abContainerElement != null) {
                 this.abContainerElement.innerHTML = '';
-                ReactDOM.render((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
+                this.unmountReactRoot = this.renderReactRoot((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
             }
             // create debounce methods that take a time based on user settings
             this.throttleFilterOnEditDataChange = (0, throttle_1.default)(
@@ -888,51 +898,68 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnCellStyle(abColumn, formatColumn, params) {
-        if (!formatColumn.IncludeGroupedRows && this.isGroupRowNode(params.node)) {
-            return;
+    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
+        const columnStyle = formatColumn.ColumnStyle;
+        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 clampedValue = (0, clamp_1.default)(params.value, min, max);
+            let cellBackColor;
+            let reverseGradient = false;
+            if (gradientStyle.ColumnComparison) {
+                cellBackColor = gradientStyle.ColumnComparison.Color;
+            }
+            else {
+                const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
+                    (r.Max == 'Col-Max' || r.Max >= clampedValue));
+                if (matchingRange) {
+                    cellBackColor = matchingRange.Color;
+                    reverseGradient = matchingRange.ReverseGradient;
+                }
+            }
+            const increase = Math.abs(max - min);
+            const percentage = ((params.value - min) / increase) * 100;
+            let alpha = Number((percentage / 100).toPrecision(2));
+            if (reverseGradient) {
+                alpha = 1 - alpha;
+            }
+            const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
+            style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
         }
-        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-            return;
+        if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
+            style.paddingTop = 0;
+            style.paddingBottom = 0;
         }
+        return style;
+    }
+    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);
+            return Object.assign(Object.assign({}, style), formatColumnStyle);
+        }, {});
+    }
+    getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params) {
         let style = {};
         // percent bar && do we show text
         const columnStyle = formatColumn.ColumnStyle;
         if (columnStyle) {
-            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 clampedValue = (0, clamp_1.default)(params.value, min, max);
-                let cellBackColor;
-                let reverseGradient = false;
-                if (gradientStyle.ColumnComparison) {
-                    cellBackColor = gradientStyle.ColumnComparison.Color;
-                }
-                else {
-                    const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
-                        (r.Max == 'Col-Max' || r.Max >= clampedValue));
-                    if (matchingRange) {
-                        cellBackColor = matchingRange.Color;
-                        reverseGradient = matchingRange.ReverseGradient;
-                    }
-                }
-                const increase = Math.abs(max - min);
-                const percentage = ((params.value - min) / increase) * 100;
-                let alpha = Number((percentage / 100).toPrecision(2));
-                if (reverseGradient) {
-                    alpha = 1 - alpha;
-                }
-                const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
-            }
-            if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
-                style.paddingTop = 0;
-                style.paddingBottom = 0;
+            if (columnStyle &&
+                !this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
+                return style;
             }
+            style = Object.assign(Object.assign({}, style), this.getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params));
         }
         else if (formatColumn.Style) {
-            style = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            const activeFormatColumnsWithStyle = formatColumnsWithStyle.filter((formatColumn) => {
+                return this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
+            });
+            if (!activeFormatColumnsWithStyle.length) {
+                return style;
+            }
+            style = Object.assign(Object.assign({}, style), this.getFormatColumnColumnStyle(activeFormatColumnsWithStyle));
         }
         if (formatColumn.CellAlignment) {
             switch (formatColumn.CellAlignment) {
@@ -949,6 +976,30 @@ class Adaptable {
         }
         return style;
     }
+    getFormatColumnCellClass(formatColumns, abColumn, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
+    }
+    getFormatColumnRowClass(formatColumns, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
+    }
     getActiveAlertWithHighlightCell(col, params) {
         return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
     }
@@ -2489,7 +2540,7 @@ class Adaptable {
         return this.gridOptions.api.getDisplayedRowAtIndex(firstDisplayedRowIndex);
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
@@ -2563,37 +2614,37 @@ class Adaptable {
             return;
         }
         if (abContainerElement != null) {
-            ReactDOM.unmountComponentAtNode(abContainerElement);
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         this.gridContainerElement = null;
         this.abContainerElement = null;
-        (_a = this.adaptableStore) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.adaptableStore) === null || _b === void 0 ? void 0 : _b.destroy();
         this.adaptableStore = null;
         this.gridOptions = null;
         this.adaptableOptions = null;
-        (_c = (_b = this.CalculatedColumnExpressionService) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
+        (_d = (_c = this.CalculatedColumnExpressionService) === null || _c === void 0 ? void 0 : _c.destroy) === null || _d === void 0 ? void 0 : _d.call(_c);
         this.CalculatedColumnExpressionService = null;
-        (_e = (_d = this.DataService) === null || _d === void 0 ? void 0 : _d.destroy) === null || _e === void 0 ? void 0 : _e.call(_d);
+        (_f = (_e = this.DataService) === null || _e === void 0 ? void 0 : _e.destroy) === null || _f === void 0 ? void 0 : _f.call(_e);
         this.DataService = null;
-        (_g = (_f = this.EntitlementService) === null || _f === void 0 ? void 0 : _f.destroy) === null || _g === void 0 ? void 0 : _g.call(_f);
+        (_h = (_g = this.EntitlementService) === null || _g === void 0 ? void 0 : _g.destroy) === null || _h === void 0 ? void 0 : _h.call(_g);
         this.EntitlementService = null;
-        (_j = (_h = this.ReportService) === null || _h === void 0 ? void 0 : _h.destroy) === null || _j === void 0 ? void 0 : _j.call(_h);
+        (_k = (_j = this.ReportService) === null || _j === void 0 ? void 0 : _j.destroy) === null || _k === void 0 ? void 0 : _k.call(_j);
         this.ReportService = null;
-        (_l = (_k = this.ModuleService) === null || _k === void 0 ? void 0 : _k.destroy) === null || _l === void 0 ? void 0 : _l.call(_k);
+        (_m = (_l = this.ModuleService) === null || _l === void 0 ? void 0 : _l.destroy) === null || _m === void 0 ? void 0 : _m.call(_l);
         this.ModuleService = null;
-        (_o = (_m = this.ValidationService) === null || _m === void 0 ? void 0 : _m.destroy) === null || _o === void 0 ? void 0 : _o.call(_m);
+        (_p = (_o = this.ValidationService) === null || _o === void 0 ? void 0 : _o.destroy) === null || _p === void 0 ? void 0 : _p.call(_o);
         this.ValidationService = null;
-        (_q = (_p = this.QueryLanguageService) === null || _p === void 0 ? void 0 : _p.destroy) === null || _q === void 0 ? void 0 : _q.call(_p);
+        (_r = (_q = this.QueryLanguageService) === null || _q === void 0 ? void 0 : _q.destroy) === null || _r === void 0 ? void 0 : _r.call(_q);
         this.QueryLanguageService = null;
-        (_s = (_r = this.AlertService) === null || _r === void 0 ? void 0 : _r.destroy) === null || _s === void 0 ? void 0 : _s.call(_r);
+        (_t = (_s = this.AlertService) === null || _s === void 0 ? void 0 : _s.destroy) === null || _t === void 0 ? void 0 : _t.call(_s);
         this.AlertService = null;
-        (_u = (_t = this.TeamSharingService) === null || _t === void 0 ? void 0 : _t.destroy) === null || _u === void 0 ? void 0 : _u.call(_t);
+        (_v = (_u = this.TeamSharingService) === null || _u === void 0 ? void 0 : _u.destroy) === null || _v === void 0 ? void 0 : _v.call(_u);
         this.TeamSharingService = null;
-        (_w = (_v = this.RowEditService) === null || _v === void 0 ? void 0 : _v.destroy) === null || _w === void 0 ? void 0 : _w.call(_v);
+        (_x = (_w = this.RowEditService) === null || _w === void 0 ? void 0 : _w.destroy) === null || _x === void 0 ? void 0 : _x.call(_w);
         this.RowEditService = null;
-        (_y = (_x = this.MetamodelService) === null || _x === void 0 ? void 0 : _x.destroy) === null || _y === void 0 ? void 0 : _y.call(_x);
+        (_z = (_y = this.MetamodelService) === null || _y === void 0 ? void 0 : _y.destroy) === null || _z === void 0 ? void 0 : _z.call(_y);
         this.MetamodelService = null;
-        (_0 = (_z = this.LicenseService) === null || _z === void 0 ? void 0 : _z.destroy) === null || _0 === void 0 ? void 0 : _0.call(_z);
+        (_1 = (_0 = this.LicenseService) === null || _0 === void 0 ? void 0 : _0.destroy) === null || _1 === void 0 ? void 0 : _1.call(_0);
         this.LicenseService = null;
         this.isDestroyed = true;
     }
@@ -3140,15 +3191,17 @@ class Adaptable {
                 borderColor: null,
             };
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
+            const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
                 const formatColumnCellStyle = formatColumn
-                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, params)
+                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params)
                     : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(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), this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params)), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(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));
                 return result;
             };
             return cellStyle;
@@ -3156,9 +3209,7 @@ class Adaptable {
     }
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
-            const formatColumnStyleClassName = formatColumn && !formatColumn.IsSuspended ? (_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName : null;
+            const formatColumns = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi
                 .getConditionalStylesForColumn(abColumn)
                 .filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName));
@@ -3175,7 +3226,9 @@ class Adaptable {
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumnStyleClassName,
+                    formatColumns.length
+                        ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
+                        : null,
                     hasConditionalStylesWithClassNames
                         ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
                         : null,
@@ -3397,7 +3450,7 @@ class Adaptable {
         });
     }
     setupColumnValueFormatter({ col, abColumn }) {
-        this.setColDefProperty(col, 'valueFormatter', () => {
+        this.setColDefProperty(col, 'valueFormatter', (params) => {
             const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
             if (!formatColumn) {
                 return;
@@ -3432,7 +3485,12 @@ class Adaptable {
                         };
                     }
                 }
-                return valueFormatter;
+                if (valueFormatter) {
+                    return (params) => {
+                        const rulePasses = this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
+                        return rulePasses ? valueFormatter(params) : params.value;
+                    };
+                }
             }
         });
     }
@@ -4317,10 +4375,11 @@ 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({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, 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));
                 return result;
             };
         });
@@ -4334,6 +4393,7 @@ 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()
@@ -4376,6 +4436,14 @@ 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.');
@@ -4754,15 +4822,15 @@ class AdaptableNoCodeWizard {
         // this allows people to customize the wizard dimensions & styling
         // when it's visible
         container.classList.add('adaptable--in-wizard');
-        ReactDOM.render(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
+        const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
                 container.classList.remove('adaptable--in-wizard');
-                ReactDOM.unmountComponentAtNode(container);
+                unmount();
                 this.init({
                     adaptableOptions,
                     gridOptions: adaptableOptions.gridOptions,
                     agGridModules: [...this.agGridModules],
                 });
-            } })), container);
+            } })), container, true);
     }
 }
 exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;

package/src/agGrid/FilterWrapper.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterWrapperFactory = void 0;
-const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
 let FilterWrapperFactory = (adaptable) => {
     return class FilterWrapper {
@@ -33,8 +31,9 @@ let FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
+            var _a;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             let column = adaptable.api.columnApi.getColumnFromId(this.column.getColId());
             if (column) {
                 let filterContext = {
@@ -43,11 +42,11 @@ let FilterWrapperFactory = (adaptable) => {
                     ShowCloseButton: params != null && params.hidePopup != null,
                 };
                 adaptable.hideFilterFormPopup = params ? params.hidePopup : null;
-                ReactDOM.render((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
             }
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
+            this.unmountReactRoot();
             this.filterContainer = null;
         }
     };

package/src/agGrid/FloatingFilterWrapper.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
-const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
 const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
     onParentModelChanged(parentModel, filterChangedEvent) {
@@ -30,14 +28,15 @@ const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper
                 Adaptable: adaptable,
                 ShowCloseButton: false,
             };
-            ReactDOM.render((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
         }
     }
     getGui() {
         return this.filterContainer;
     }
     destroy() {
-        ReactDOM.unmountComponentAtNode(this.filterContainer);
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         this.filterContainer = null;
     }
 };

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -13,6 +13,7 @@ export declare const createAgStatusPanelComponent: (component: React.FunctionCom
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params: IStatusPanelParams): void;
         render(): void;
         getGui(): HTMLElement;

package/src/agGrid/createAgStatusPanelComponent.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAgStatusPanelComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const createAgStatusPanelComponent = (component, adaptable, context) => {
     return class StatusBarRenderer {
@@ -20,13 +19,14 @@ const createAgStatusPanelComponent = (component, adaptable, context) => {
                 context,
             };
             const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, props), adaptable);
-            ReactDOM.render(children, this.eGui);
+            this.unmountReactRoot = adaptable.renderReactRoot(children, this.eGui);
         }
         getGui() {
             return this.eGui;
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.eGui);
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     };
 };

package/src/components/CheckBox/index.d.ts

@@ -15,7 +15,7 @@ declare type TypeProps = {
     gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
 };
-export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps> {
+export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
 declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {

package/src/components/Datepicker/index.d.ts

@@ -15,4 +15,4 @@ export declare type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'def
     showWeekNumber?: boolean;
     showOutsideDays?: boolean;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignSelf" | "backgroundColor" | "color" | "content" | "flex" | "fontSize" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "css" | "showClearButton" | "onHide" | "showOutsideDays" | "showWeekNumber" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "showClearButton" | "onHide" | "showOutsideDays" | "showWeekNumber" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/Dialog/index.d.ts

@@ -16,10 +16,12 @@ declare type TypeProps = {
     onDismiss?: () => void;
     dismissOnClickOutside?: boolean;
 };
-export interface DialogProps extends BoxProps, TypeProps {
+export interface DialogProps extends Omit<BoxProps, 'ref'>, TypeProps {
 }
 export declare type DialogRefType = {
     bringToFront: VoidFunction;
 };
-export declare const Dialog: React.FunctionComponent<DialogProps>;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DialogRefType>>;
 export default Dialog;

package/src/components/Dialog/index.js

@@ -14,7 +14,7 @@ const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"))
 const icons_1 = require("../icons");
 const WindowModal_1 = require("../WindowModal");
 const baseClassName = 'ab-Dialog';
-exports.Dialog = React.forwardRef((props, ref) => {
+exports.Dialog = React.forwardRef((props, dialogRef) => {
     let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps } = props, boxProps = tslib_1.__rest(props, ["modal", "fixed", "focusOnBrowserVisible", "autoFocus", "className", "children", "modalProps", "dismissOnClickOutside", "onDismiss", "windowModal", "windowModalProps"]);
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
@@ -76,7 +76,7 @@ exports.Dialog = React.forwardRef((props, ref) => {
             boxRef.current.focus();
         }
     }, [boxRef]);
-    React.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(dialogRef, () => ({
         bringToFront,
     }));
     (0, react_1.useEffect)(() => {

package/src/components/DropdownButton/index.d.ts

@@ -5,7 +5,7 @@ import { ExpandedProps } from './useExpanded';
 import DropdownButtonItem from './DropdownButtonItem';
 import { OverlayTriggerProps } from '../OverlayTrigger';
 export declare const DROPDOWN_ICON: JSX.Element;
-export declare type DropdownButtonProps = BoxProps & React.HTMLProps<HTMLElement> & SimpleButtonProps & ExpandedProps & {
+export declare type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
     collapseOnItemClick?: boolean;
     columns?: string[];
     overlayProps?: OverlayTriggerProps;
@@ -23,7 +23,24 @@ export declare type DropdownButtonProps = BoxProps & React.HTMLProps<HTMLElement
     isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
     showToggleIcon?: boolean;
 };
-declare const DropdownButton: React.FunctionComponent<DropdownButtonProps> & {
-    ref?: React.Ref<HTMLButtonElement>;
-};
+declare const DropdownButton: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & {
+    children?: React.ReactNode;
+} & Omit<React.HTMLProps<HTMLElement>, "ref"> & SimpleButtonProps & ExpandedProps & {
+    collapseOnItemClick?: boolean;
+    columns?: string[];
+    overlayProps?: OverlayTriggerProps;
+    listOffset?: number;
+    items?: DropdownButtonItem[];
+    idProperty?: string;
+    showClearButton?: boolean;
+    focusOnClear?: boolean;
+    onClear?: () => void;
+    clearButtonProps?: SimpleButtonProps;
+    listItemClassName?: string;
+    listStyle?: React.CSSProperties;
+    listMinWidth?: number;
+    listItemStyle?: React.CSSProperties | ((item: DropdownButtonItem, index: number) => React.CSSProperties);
+    isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
+    showToggleIcon?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;