@adaptabletools/adaptable 13.1.0 → 13.1.1

package/src/agGrid/Adaptable.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
 const tslib_1 = require("tslib");
 const core_1 = require("@ag-grid-community/core");
+const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
@@ -350,7 +351,7 @@ class Adaptable {
     // the 'old' constructor which takes an Adaptable adaptable object
     // 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;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (runtimeConfig) {
             this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
             if (runtimeConfig.renderReactRoot) {
@@ -453,6 +454,7 @@ class Adaptable {
             abColDefDate: (_d = this.gridOptions.columnTypes.abColDefDate) !== null && _d !== void 0 ? _d : {},
             abColDefObject: (_e = this.gridOptions.columnTypes.abColDefObject) !== null && _e !== void 0 ? _e : {},
             abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
+            abColDefNumberArray: (_g = this.gridOptions.columnTypes.abColDefNumberArray) !== null && _g !== void 0 ? _g : {},
         });
         if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
             this.gridOptions.columnTypes.abColDefNumber.cellEditor =
@@ -1514,9 +1516,10 @@ class Adaptable {
      * This is the opposite of setLayout
      */
     updateLayoutFromGrid() {
+        var _a, _b;
         const currentLayout = this.api.layoutApi.getCurrentLayout();
         const layout = Object.assign({}, currentLayout);
-        const columnOrder = [];
+        let columnOrder = [];
         const columnFlexes = {};
         const pinnedColumns = {};
         const columnSorts = [];
@@ -1566,6 +1569,12 @@ class Adaptable {
         });
         groupedColumns = groupedColumns.filter((x) => !!x);
         pivotedColumns = pivotedColumns.filter((x) => !!x);
+        if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.keepGroupedColumnIndex) {
+            columnOrder = this.restoreUnGroupColumnOrder({
+                columnOrder,
+                newGroupColumns: groupedColumns,
+            });
+        }
         layout.ColumnWidthMap = columnWidths;
         //  layout.ColumnFlexMap = columnFlexes;
         layout.PinnedColumnsMap = pinnedColumns;
@@ -2848,9 +2857,13 @@ class Adaptable {
          * Action: Make the column invisible
          */
         this.gridOptions.api.addEventListener(core_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED, (this.listenerColumnRowGroupChanged = (params) => {
+            var _a, _b;
             if (this.api.internalApi.isGridInPivotMode()) {
                 return;
             }
+            if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.keepGroupedColumnIndex) {
+                this.persistColumnIndexBeforeGrouping(params);
+            }
             if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
                 params.source !== 'api') {
                 params.columns.forEach((col) => {
@@ -3312,6 +3325,18 @@ class Adaptable {
                 if (styledColumn.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
                 }
+                if (styledColumn.SparkLineStyle) {
+                    return 'agSparklineCellRenderer';
+                }
+            }
+        });
+        this.setColDefProperty(col, 'cellRendererParams', (userDefined) => {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.SparkLineStyle) {
+                    const sparklineOptions = (0, merge_1.default)({}, userDefined === null || userDefined === void 0 ? void 0 : userDefined.sparklineOptions, styledColumn.SparkLineStyle.options);
+                    return Object.assign(Object.assign({}, userDefined), { sparklineOptions });
+                }
             }
         });
     }
@@ -4651,17 +4676,19 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     processRowGroupForExcelExport(rowNode) {
-        if (!rowNode.field || !rowNode.key) {
+        var _a, _b, _c, _d, _e;
+        const columnId = (_c = (_a = rowNode.field) !== null && _a !== void 0 ? _a : (_b = rowNode.rowGroupColumn) === null || _b === void 0 ? void 0 : _b.getColId()) !== null && _c !== void 0 ? _c : (_e = (_d = rowNode.rowGroupColumn) === null || _d === void 0 ? void 0 : _d.getColDef()) === null || _e === void 0 ? void 0 : _e.field;
+        if (!columnId || !rowNode.key) {
             return;
         }
-        const columnId = rowNode.field;
         let rawValue = rowNode.key;
         if (this.api.columnApi.getColumnDataTypeFromColumnId(columnId) === 'Date' &&
             typeof rawValue === 'string') {
             // AG-Grid converts the value to string, we have to reconvert it back
-            const numericRawValue = parseInt(rawValue);
-            if (!isNaN(numericRawValue)) {
-                rawValue = numericRawValue;
+            const dateRawValue = (0, DateHelper_1.parseDateValue)(rawValue);
+            if (dateRawValue != undefined) {
+                // @ts-ignore
+                rawValue = dateRawValue;
             }
         }
         return this.ReportService.getCellExportValueFromRawValue(rowNode, rawValue, columnId);
@@ -4795,6 +4822,61 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
         return value;
     }
+    persistColumnIndexBeforeGrouping(params) {
+        const layout = this.api.layoutApi.getCurrentLayout();
+        const columnGroupsInLayout = layout.RowGroupedColumns;
+        const columnGroupsInGrid = params.columns.map((col) => col.getColId());
+        // what is new
+        const newGroups = columnGroupsInGrid.filter((colId) => !columnGroupsInLayout.includes(colId));
+        newGroups.forEach((colId) => {
+            const columnIndex = layout.Columns.findIndex((columnIdInLayout) => columnIdInLayout === colId);
+            // user may group after a column not in layout
+            if (columnIndex !== -1) {
+                this.api.internalApi.persistPreviousGroupedColumnsIndex(layout.Uuid, colId, columnIndex);
+            }
+        });
+    }
+    /**
+     * Restores the order previous grouping order.
+     
+     */
+    restoreUnGroupColumnOrder({ newGroupColumns, columnOrder, }) {
+        var _a;
+        const newColumnOrder = [...columnOrder];
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        const previousGroupedColumnsIndex = this.api.internalApi.getPreviousGroupedColumnsIndex(currentLayout.Uuid);
+        const isUnGroup = newGroupColumns.length < ((_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length);
+        if (!isUnGroup) {
+            return columnOrder;
+        }
+        if (!previousGroupedColumnsIndex) {
+            return columnOrder;
+        }
+        for (let [colId, previousIndex] of Object.entries(previousGroupedColumnsIndex)) {
+            const isStillGrouped = newGroupColumns.includes(colId);
+            const isAlreadyInGrid = currentLayout.Columns.includes(colId); // was not just added by ungrouping
+            if (isStillGrouped) {
+                break;
+            }
+            if (isAlreadyInGrid) {
+                // no longer grouped, but already in grid, this means it was already in grid before ungrouping
+                // in this case the state can be cleared
+                this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
+                break;
+            }
+            const indexInGrid = newColumnOrder.indexOf(colId);
+            const hasDifferentPositionAsPreviousLayout = previousIndex !== null && // if null, the reorder was already applied
+                indexInGrid > 0 && // needs to be in grid
+                previousIndex !== indexInGrid;
+            const isPreviousPositionInRange = previousIndex < newColumnOrder.length;
+            if (hasDifferentPositionAsPreviousLayout && isPreviousPositionInRange) {
+                newColumnOrder.splice(indexInGrid, 1);
+                newColumnOrder.splice(previousIndex, 0, colId);
+            }
+            this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
+        }
+        return newColumnOrder;
+    }
 }
 exports.Adaptable = Adaptable;
 class AdaptableNoCodeWizard {

package/src/agGrid/agGridHelper.js

@@ -474,6 +474,12 @@ class agGridHelper {
                     return 'Date';
                 case 'abColDefObject':
                     return 'Object';
+                case 'abColDefNumberArray':
+                    return 'NumberArray';
+                case 'abColDefTupleNumberArray':
+                    return 'TupleNumberArray';
+                case 'abColDefObjectNumberArray':
+                    return 'ObjectNumberArray';
                 default:
                     return 'Unknown';
             }
@@ -495,6 +501,12 @@ class agGridHelper {
                 return 'abColDefObject';
             case 'String':
                 return 'abColDefString';
+            case 'NumberArray':
+                return 'abColDefNumberArray';
+            case 'TupleNumberArray':
+                return 'abColDefTupleNumberArray';
+            case 'ObjectNumberArray':
+                return 'abColDefObjectNumberArray';
             default:
                 return 'abColDefCustom';
         }

package/src/components/ColorPicker/ColorPicker.js

@@ -43,5 +43,5 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
             React.createElement(Input_1.default, { className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
                     props.onChange(color);
-                }, min: 0, max: 1, step: 0.1, type: "range" })))));
+                }, min: 0, max: 1, step: 0.01, type: "range" })))));
 });

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" | "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" | "onResize" | "onResizeCapture" | "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" | "showOutsideDays" | "showWeekNumber" | "onHide" | "showClearButton" | "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" | "onResize" | "onResizeCapture" | "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" | "onHide" | "showOutsideDays" | "showWeekNumber" | "showClearButton" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/Datepicker/index.js

@@ -87,7 +87,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, alignHorizontal: 'left', render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }

package/src/components/DropdownButton/index.js

@@ -102,9 +102,9 @@ const DropdownButton = React.forwardRef((props, theRef) => {
         hasClearButton ? clearButton : null,
         icon));
     const buttonRef = (0, react_1.useRef)(null);
-    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, constrainTo: constrainTo, anchor: "vertical", targetOffset: listOffset, render: () => {
+    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
             return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list` }, content));
-        } }, overlayProps, { target: domProps.tooltip ? (node) => node.previousSibling : undefined }),
+        } }, overlayProps),
         React.createElement(SimpleButton_1.default, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {

package/src/components/ExpressionEditor/index.js

@@ -50,50 +50,12 @@ function ExpressionEditor(props) {
     const queryableColumns = type === 'scalar' || type === 'boolean' || type === 'aggregatedScalar'
         ? props.columns
         : props.columns.filter((c) => !props.api.columnApi.isCalculatedColumn(c.columnId));
-    // borrowed from https://github.com/ag-grid/ag-grid/blob/v27.2.1/community-modules/core/src/ts/utils/object.ts#L205
     const getColValue = (column) => {
-        var _a, _b;
-        const columnValueKey = (_a = column.field) !== null && _a !== void 0 ? _a : column.columnId;
-        const isColumnValueContainsDots = (_b = column.field) === null || _b === void 0 ? void 0 : _b.includes('.');
-        // if no '.', then it's not a deep value
-        if (!isColumnValueContainsDots) {
-            return data[columnValueKey];
-        }
-        // otherwise it is a deep value, so need to dig for it
-        const fields = columnValueKey.split('.');
-        let currentObject = data;
-        for (let i = 0; i < fields.length; i++) {
-            if (currentObject == null) {
-                return undefined;
-            }
-            currentObject = currentObject[fields[i]];
-        }
-        return currentObject;
+        return props.api.internalApi.getValueUsingField(data, column);
     };
-    // borrowed from https://github.com/ag-grid/ag-grid/blob/v27.2.1/community-modules/core/src/ts/valueService/valueService.ts#L217
     const updateColValue = (rowData, column, newValue) => {
-        var _a, _b;
-        const columnValueKey = (_a = column.field) !== null && _a !== void 0 ? _a : column.columnId;
-        const isColumnValueContainsDots = (_b = column.field) === null || _b === void 0 ? void 0 : _b.includes('.');
-        // if no '.', then it's not a deep value
-        if (!isColumnValueContainsDots) {
-            rowData[columnValueKey] = newValue;
-        }
-        else {
-            // otherwise it is a deep value, so need to dig for it
-            const fieldPieces = columnValueKey.split('.');
-            let currentObject = rowData;
-            while (fieldPieces.length > 0 && currentObject) {
-                const fieldPiece = fieldPieces.shift();
-                if (fieldPieces.length === 0) {
-                    currentObject[fieldPiece] = newValue;
-                }
-                else {
-                    currentObject = currentObject[fieldPiece];
-                }
-            }
-        }
-        return Object.assign({}, rowData);
+        const updatedRowData = props.api.internalApi.setValueUsingField(rowData, column, newValue);
+        return Object.assign({}, updatedRowData);
     };
     const getColDateValue = (column) => {
         const colValue = getColValue(column);

package/src/components/OverlayTrigger/Overlay.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { HTMLAttributes } from 'react';
-import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
 export interface OverlayProps extends HTMLAttributes<HTMLElement> {
     visible: boolean;
-    anchor: 'vertical' | 'horizontal';
-    position: 'top' | 'bottom' | 'left' | 'right';
-    getConstrainRect: () => BoundingClientRect;
+    onTransitionEnd?: () => void;
 }
 export declare const useRefresh: () => () => void;
 declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<Element>>;

package/src/components/OverlayTrigger/Overlay.js

@@ -6,8 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
-const utils_1 = require("./utils");
 const useRefresh = () => {
     const [x, update] = (0, react_1.useState)(0);
     return () => {
@@ -15,13 +13,8 @@ const useRefresh = () => {
     };
 };
 exports.useRefresh = useRefresh;
-const translateToValues = (x) => x
-    .split('(')[1]
-    .split(')')[0]
-    .split(',')
-    .map((s) => s.trim());
 const Overlay = React.forwardRef((props, ref) => {
-    const { visible, getConstrainRect, anchor, position } = props, domProps = tslib_1.__rest(props, ["visible", "getConstrainRect", "anchor", "position"]);
+    const { visible } = props, domProps = tslib_1.__rest(props, ["visible"]);
     const domRef = (0, react_1.useRef)(null);
     const setRef = (node) => {
         domRef.current = node;
@@ -40,44 +33,14 @@ const Overlay = React.forwardRef((props, ref) => {
             setOpacity(props.visible ? 1 : 0);
         }).commit();
     }, [visible]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (!visible) {
-            return;
-        }
-        const constrainRect = getConstrainRect();
-        const domNode = domRef.current;
-        const thisRect = (0, utils_1.getRect)(domNode);
-        const intersection = (0, utils_1.getIntersection)(constrainRect, thisRect);
-        if (!(0, isEqual_1.default)(intersection, thisRect)) {
-            const transform = props.style
-                ? props.style.transform || 'translate3d(0px, 0px, 0px)'
-                : 'translate3d(0px, 0px, 0px)';
-            const horizontalDiff = Math.round(thisRect.left < constrainRect.left
-                ? constrainRect.left - thisRect.left
-                : thisRect.right > constrainRect.right
-                    ? constrainRect.right - thisRect.right
-                    : 0);
-            const verticalDiff = Math.round(thisRect.top < constrainRect.top
-                ? constrainRect.top - thisRect.top
-                : thisRect.bottom > constrainRect.bottom
-                    ? constrainRect.bottom - thisRect.bottom
-                    : 0);
-            const values = translateToValues(transform);
-            if (horizontalDiff) {
-                values[0] = `calc(${values[0]} + ${horizontalDiff}px)`;
-            }
-            if (verticalDiff) {
-                values[1] = `calc(${values[1]} + ${verticalDiff}px)`;
-            }
-            domNode.style.transform = `translate3d(${values.join(', ')})`;
-        }
-    }, [visible]);
     if (prevVisible && !visible) {
         transitionInProgressRef.current = true;
     }
     const onTransitionEnd = () => {
+        var _a;
         transitionInProgressRef.current = false;
         refresh();
+        (_a = props === null || props === void 0 ? void 0 : props.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(props);
     };
     const renderTime = Date.now();
     const renderTimeRef = (0, react_1.useRef)(renderTime);

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ReactNode, CSSProperties } from 'react';
-import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
-import { OverlayHorizontalAlign } from './getOverlayStyle';
+import { OverlayShowParams } from '../InfiniteTable';
 export declare type ConstrainToType = ((node: HTMLElement) => HTMLElement) | string;
-export declare const getConstrainRect: (target: HTMLElement, constrainTo?: ConstrainToType) => BoundingClientRect;
+export declare const getConstrainElement: (target: HTMLElement, constrainTo?: ConstrainToType) => HTMLElement;
+export declare const getConstrainRect: (target: HTMLElement, constrainTo?: ConstrainToType) => import("../utils/getAvailableSizeInfo").BoundingClientRect;
 export interface OverlayTriggerProps extends React.HTMLAttributes<HTMLElement> {
     opacityTransitionDuration?: string | number;
     children: React.ReactNode;
@@ -20,7 +20,7 @@ export interface OverlayTriggerProps extends React.HTMLAttributes<HTMLElement> {
     targetOffset?: number;
     defaultZIndex?: number;
     anchor?: 'vertical' | 'horizontal';
-    alignHorizontal?: OverlayHorizontalAlign;
+    alignPosition?: OverlayShowParams['alignPosition'];
     constrainTo?: ConstrainToType;
 }
 declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<{

package/src/components/OverlayTrigger/index.js

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConstrainRect = void 0;
+exports.getConstrainRect = exports.getConstrainElement = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
-const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
-const react_dom_1 = require("react-dom");
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Overlay_1 = tslib_1.__importDefault(require("./Overlay"));
-const getOverlayStyle_1 = tslib_1.__importDefault(require("./getOverlayStyle"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
 const utils_1 = require("./utils");
@@ -18,7 +15,9 @@ const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const useAgGridClassName_1 = tslib_1.__importDefault(require("./useAgGridClassName"));
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
 const UIHelper_1 = require("../../View/UIHelper");
-const getConstrainRect = (target, constrainTo) => {
+const InfiniteTable_1 = require("../InfiniteTable");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const getConstrainElement = (target, constrainTo) => {
     let el = null;
     if (typeof constrainTo === 'string') {
         el = (0, selectParent_1.default)(constrainTo, target);
@@ -26,6 +25,11 @@ const getConstrainRect = (target, constrainTo) => {
     if (typeof constrainTo === 'function') {
         el = constrainTo(target);
     }
+    return el;
+};
+exports.getConstrainElement = getConstrainElement;
+const getConstrainRect = (target, constrainTo) => {
+    let el = (0, exports.getConstrainElement)(target, constrainTo);
     if (el && el.tagName) {
         return (0, utils_1.getRect)(el);
     }
@@ -41,10 +45,25 @@ const ensurePortalElement = () => {
         return;
     }
     portalElement = document.createElement('div');
+    portalElement.style.position = 'absolute';
+    portalElement.style.zIndex = '999999';
+    portalElement.style.top = '0px';
+    portalElement.style.left = '0px';
     document.body.appendChild(portalElement);
 };
 const OverlayTrigger = React.forwardRef((props, ref) => {
-    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignHorizontal, constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignHorizontal", "constrainTo", "target"]);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
+        // overlay - target
+        ['TopLeft', 'BottomLeft'],
+        ['TopRight', 'BottomRight'],
+        ['TopRight', 'BottomCenter'],
+        ['TopRight', 'BottomLeft'],
+        ['TopRight', 'BottomLeft'],
+    ], constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignPosition", "constrainTo", "target"]);
+    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
+        portalContainer: portalElement,
+    });
     const domRef = (0, react_1.useRef)(null);
     const targetRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
@@ -64,8 +83,6 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         doSetVisible(true);
     }, []);
-    const [targetRect, setTargetRect] = (0, react_1.useState)(null);
-    const [sizeInfo, setSizeInfo] = (0, react_1.useState)(null);
     const prevVisible = (0, usePrevious_1.default)(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {
@@ -78,14 +95,6 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         (0, batchUpdate_1.default)(() => {
             setVisible(true);
-            const target = targetRef.current;
-            const targetRect = target.getBoundingClientRect();
-            const sizeInfo = (0, getAvailableSizeInfo_1.default)({
-                targetRect,
-                constrainRect: (0, exports.getConstrainRect)(target, constrainTo),
-            });
-            setTargetRect(targetRect);
-            setSizeInfo(sizeInfo);
         }).commit();
     }, [constrainTo, preventPortalEventPropagation]);
     const onHide = React.useCallback((_event) => {
@@ -105,6 +114,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         }
     }, [ref]);
+    const previousVisible = (0, usePrevious_1.default)(visible, visible);
     (0, react_1.useEffect)(() => {
         let target = domRef.current.previousSibling;
         if (targetProp) {
@@ -133,41 +143,52 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         };
     }, [props.visible, showEvent, hideEvent, onShow, onHide]);
-    let overlay;
+    React.useEffect(() => {
+        var _a, _b;
+        const target = targetRef.current;
+        if (!target) {
+            return;
+        }
+        if ((prevVisible && !visible) || visible) {
+            const overlayContent = (React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
+                    if (overlayRef.current && overlayRef.current != node) {
+                        overlayRef.current.removeEventListener(showEvent, onShow);
+                        overlayRef.current.removeEventListener(hideEvent, onHide);
+                    }
+                    overlayRef.current = node;
+                    if (node) {
+                        node.addEventListener(showEvent, onShow);
+                        node.addEventListener(hideEvent, onHide);
+                    }
+                }, className: (0, join_1.default)('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
+                    if (!visible) {
+                        clearAllOverlays();
+                        hideOverlay('overlay-trigger');
+                    }
+                } }), props.render()));
+            let preparedConstrinTo;
+            if (constrainTo) {
+                preparedConstrinTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
+            }
+            else {
+                preparedConstrinTo = adaptable === null || adaptable === void 0 ? void 0 : adaptable.getAgGridContainerElement();
+            }
+            // show only if visible or if it was visible and now it is invisible
+            const showOverlayOptions = {
+                id: 'overlay-trigger',
+                alignPosition,
+                constrainTo: (_b = (_a = preparedConstrinTo === null || preparedConstrinTo === void 0 ? void 0 : preparedConstrinTo.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(preparedConstrinTo)) !== null && _b !== void 0 ? _b : true,
+                alignTo: target.getBoundingClientRect(),
+            };
+            showOverlay(() => overlayContent, showOverlayOptions);
+        }
+        else {
+            clearAllOverlays();
+        }
+    }, [visible, props.render]);
     const agGridClassName = (0, useAgGridClassName_1.default)([visible]);
-    if (targetRect) {
-        const overlayTarget = targetRef.current;
-        alignHorizontal =
-            alignHorizontal ||
-                getComputedStyle(overlayTarget)
-                    .getPropertyValue('--ab-overlay-horizontal-align')
-                    .trim();
-        let overlayStyle = (0, getOverlayStyle_1.default)({
-            constrainRect: (0, exports.getConstrainRect)(overlayTarget, constrainTo),
-            targetRect,
-            targetOffset,
-            anchor,
-            alignHorizontal,
-        });
-        overlayStyle.transition = `opacity ${opacityTransitionDuration}`;
-        overlayStyle.overflow = `visible`;
-        overlayStyle.zIndex = defaultZIndex;
-        overlayStyle = Object.assign(Object.assign({}, overlayStyle), props.style);
-        const position = anchor === 'vertical' ? sizeInfo.verticalPosition : sizeInfo.horizontalPosition;
-        overlay = (0, react_dom_1.createPortal)(React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
-                if (overlayRef.current && overlayRef.current != node) {
-                    overlayRef.current.removeEventListener(showEvent, onShow);
-                    overlayRef.current.removeEventListener(hideEvent, onHide);
-                }
-                overlayRef.current = node;
-                if (node) {
-                    node.addEventListener(showEvent, onShow);
-                    node.addEventListener(hideEvent, onHide);
-                }
-            }, className: (0, join_1.default)('ab-Overlay', `ab-Overlay--position-${position}`, showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), visible: visible, style: overlayStyle, anchor: anchor, position: position, getConstrainRect: () => (0, exports.getConstrainRect)(targetRef.current) }), props.render()), portalElement);
-    }
     return (React.createElement(React.Fragment, null,
-        props.children,
+        React.Children.only(props.children),
         React.createElement("div", { "data-name": "OverlayTrigger", "data-visible": visible, ref: domRef, style: {
                 visibility: 'hidden',
                 flex: 'none',
@@ -176,7 +197,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                 pointerEvents: 'none',
                 display: 'inline-flex',
             } }),
-        overlay));
+        portal));
 });
 OverlayTrigger.defaultProps = {
     showEvent: 'mouseenter',