@adaptabletools/adaptable-cjs 18.0.0-canary.9 → 18.0.0

package/src/agGrid/BadgeRenderer.js

@@ -5,25 +5,38 @@ const tslib_1 = require("tslib");
 const Badge_1 = require("../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const React = tslib_1.__importStar(require("react"));
-const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
-    if (!styledColumn.BadgeStyle) {
-        return;
-    }
+const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
     return class BadgetRenderer {
         getAdaptableInstance(params) {
             const adaptable = params.context.__adaptable;
             return adaptable;
         }
         init(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f;
             const adaptable = this.getAdaptableInstance(params);
             const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-Badge__wrapper';
-            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
-            const isGrouped = params.node.group;
-            if (includeGrouped === false && isGrouped) {
-                const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
+            const isGroupedRow = params.node.group;
+            const isSummaryRow = adapatableApi.gridApi.isSummaryNode(params.node);
+            let shouldRender = true;
+            if (isGroupedRow) {
+                if ((_a = badgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupRows) {
+                    shouldRender = false;
+                }
+            }
+            else if (isSummaryRow) {
+                if ((_b = badgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeSummaryRows) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                if ((_c = badgeStyle.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeDataRows) {
+                    shouldRender = false;
+                }
+            }
+            if (!shouldRender) {
+                const formattedValue = (_f = (_e = (_d = params.formatValue) === null || _d === void 0 ? void 0 : _d.call(params, params.value)) !== null && _e !== void 0 ? _e : params.value) !== null && _f !== void 0 ? _f : '';
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
@@ -54,7 +67,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     userName: adapatableApi.optionsApi.getUserName(),
                     adaptableId: adapatableApi.optionsApi.getAdaptableId(),
                 };
-                const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
+                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                 if (!isNullValue && badge) {
                     badgesConfig.push({
@@ -78,7 +91,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 userName: adapatableApi.optionsApi.getUserName(),
                 adaptableId: adapatableApi.optionsApi.getAdaptableId(),
             };
-            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
             if (
             // empty values

package/src/agGrid/PercentBarRenderer.js

@@ -17,7 +17,8 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
             }
-            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+            // We no longer support showing Percent Bar in Group Rows as it only made sense for Min / Max
+            if (api.gridApi.isGroupRowNode(params.node)) {
                 if (params.value) {
                     this.eGui = document.createElement('div');
                     this.eGui.append(params.value);

package/src/agGrid/buildSortedColumnStateForLayout.d.ts

@@ -0,0 +1,7 @@
+import { ColumnState, GridOptions } from '@ag-grid-community/core';
+import { Layout } from '../types';
+export declare function buildSortedColumnStateForLayout(params: {
+    columnState: ColumnState[];
+    layout: Layout;
+    gridOptions: GridOptions;
+}): ColumnState[];

package/src/agGrid/buildSortedColumnStateForLayout.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSortedColumnStateForLayout = void 0;
+const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const ColumnInternalApi_1 = require("../Api/Internal/ColumnInternalApi");
+const ColumnApiImpl_1 = require("../Api/Implementation/ColumnApiImpl");
+const sortColumnStateForVisibleColumns_1 = require("./sortColumnStateForVisibleColumns");
+function buildSortedColumnStateForLayout(params) {
+    const { columnState, layout, gridOptions } = params;
+    let visibleColumnList = [...layout.Columns];
+    const multipleGroupColumns = gridOptions.groupDisplayType === 'multipleColumns';
+    const singleGroupColumn = !multipleGroupColumns;
+    const rowGroupedColumnsIndexes = {};
+    let generatedRowGroupColumnsIds = [];
+    // here we make sure the visibleColumnList includes all the generated group columns
+    if (layout.RowGroupedColumns) {
+        layout.RowGroupedColumns.forEach((colId, index) => {
+            rowGroupedColumnsIndexes[colId] = index;
+            rowGroupedColumnsIndexes[(0, ColumnInternalApi_1.getAutoRowGroupColumnIdFor)(colId)] = index;
+        });
+        // if the layout does not include the grouped columns,
+        // make sure we add the grouped columns to the visible column list
+        // at the start of the list
+        if (singleGroupColumn) {
+            if (!visibleColumnList.includes(GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
+                visibleColumnList = [GeneralConstants_1.AG_GRID_GROUPED_COLUMN, ...visibleColumnList];
+            }
+            generatedRowGroupColumnsIds.push(GeneralConstants_1.AG_GRID_GROUPED_COLUMN);
+        }
+        else {
+            let missingGroupColumns = 0;
+            [...layout.RowGroupedColumns].reverse().forEach((colId) => {
+                const groupColId = (0, ColumnInternalApi_1.getAutoRowGroupColumnIdFor)(colId);
+                if (!visibleColumnList.includes(groupColId)) {
+                    visibleColumnList = [groupColId, ...visibleColumnList];
+                    missingGroupColumns++;
+                }
+                generatedRowGroupColumnsIds = [groupColId, ...generatedRowGroupColumnsIds];
+            });
+            // now we need to sort the visibleColumnList to contain the group columns
+            // in the correct order
+            // but we only need to do this if the layout.Columns list missed some of the
+            // group columns, but not all of them. if all were missing, we already
+            // inserted them at the start of the list
+            if (missingGroupColumns && missingGroupColumns < layout.RowGroupedColumns.length) {
+                visibleColumnList.sort((colId1, colId2) => {
+                    const isRowGroup1 = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(colId1);
+                    const isRowGroup2 = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(colId2);
+                    if (isRowGroup1 && isRowGroup2) {
+                        return rowGroupedColumnsIndexes[colId1] - rowGroupedColumnsIndexes[colId2];
+                    }
+                    return 0;
+                });
+            }
+        }
+    }
+    const visibleColumnsIndexes = visibleColumnList.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const pivotMode = layout.EnablePivot;
+    if (pivotMode) {
+        // in pivot mode, we sort the Visible columns of the layout
+        // to make sure the group cols are at the beginning
+        const groupCols = visibleColumnList.filter(ColumnApiImpl_1.isAutoRowGroupColumn);
+        visibleColumnList = visibleColumnList.filter((colId) => !(0, ColumnApiImpl_1.isAutoRowGroupColumn)(colId));
+        visibleColumnList = [...groupCols, ...visibleColumnList];
+    }
+    // we're now ready to go over the columnState
+    // we want as much as possible to keep the order of the columns
+    // as they are in the column state.
+    // if the order is different in the visibleColumns, we only move those columns around
+    // if some columns in the columnState are not in the visibleColumns, we need to return them as hide: true
+    // first step - keep the same order, but filter out old group columns
+    // VERY IMPORTANT to only filter out OLD group columns, that is,
+    // group columns that are not in the layout anymore
+    // since we might have different group columns in the layout
+    let newColumnState = [...columnState].filter((colState) => {
+        const { colId } = colState;
+        if ((0, ColumnApiImpl_1.isAutoRowGroupColumn)(colId) && rowGroupedColumnsIndexes[colId] == null) {
+            return false;
+        }
+        return true;
+    });
+    // second step - keep the same order
+    // but make sure the visibility is adjusted to reflect the
+    // visible columns in the layout
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const visibleIndex = visibleColumnsIndexes[colId];
+        if (visibleIndex == null) {
+            return Object.assign(Object.assign({}, colState), { hide: true });
+        }
+        return Object.assign(Object.assign({}, colState), { hide: null });
+    });
+    // third step - correctly mark the columns that are grouped
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const groupIndex = rowGroupedColumnsIndexes[colId];
+        if (groupIndex != null) {
+            return Object.assign(Object.assign({}, colState), { rowGroup: true, rowGroupIndex: groupIndex });
+        }
+        return Object.assign(Object.assign({}, colState), { rowGroup: false, rowGroupIndex: null });
+    });
+    // fourth step - add the new group columns, if they are missing
+    const columnStateIndexes = newColumnState.reduce((acc, colState, index) => {
+        acc[colState.colId] = index;
+        return acc;
+    }, {});
+    generatedRowGroupColumnsIds.reverse().forEach((rowGroupColId) => {
+        if (columnStateIndexes[rowGroupColId] == null) {
+            newColumnState = [
+                {
+                    colId: rowGroupColId,
+                },
+                ...newColumnState,
+            ];
+        }
+    });
+    // fitfth step - sort the column state to respect the order of the visible columns
+    // we can't simply call sort in this case
+    return (0, sortColumnStateForVisibleColumns_1.sortColumnStateForVisibleColumns)(newColumnState, visibleColumnList);
+}
+exports.buildSortedColumnStateForLayout = buildSortedColumnStateForLayout;

package/src/agGrid/defaultAdaptableOptions.js

@@ -14,7 +14,6 @@ const DefaultAdaptableOptions = {
     adaptableStateKey: undefined,
     primaryKey: '',
     autogeneratePrimaryKey: false,
-    autoMigrateState: true,
     userName: GeneralConstants.USER_NAME,
     predefinedConfig: undefined,
     alertOptions: {
@@ -148,8 +147,6 @@ const DefaultAdaptableOptions = {
     customSortOptions: { customSortComparers: undefined },
     dataSetOptions: { dataSets: GeneralConstants_1.EMPTY_ARRAY },
     groupingOptions: {
-        showGroupingTotalsAsHeader: false,
-        balancedGroupsKey: undefined,
         restoreUngroupedColumns: false,
         autoOrderGroupedColumns: true,
     },
@@ -171,16 +168,11 @@ const DefaultAdaptableOptions = {
             autoCheckTagsForLayouts: false,
         },
     },
-    menuOptions: {
+    columnMenuOptions: {
         customColumnMenu: undefined,
+    },
+    contextMenuOptions: {
         customContextMenu: undefined,
-        showAdaptableContextMenu: true,
-        showAdaptableColumnMenu: true,
-        showUngroupColumnMenuItem: true,
-        columnMenuOrder: ['aggrid', 'adaptable', 'user'],
-        contextMenuOrder: ['aggrid', 'adaptable', 'user'],
-        columnMenuItems: undefined,
-        contextMenuItems: undefined,
     },
     columnFilterOptions: {
         quickFilterOptions: {
@@ -224,6 +216,7 @@ const DefaultAdaptableOptions = {
         enableFilterOnSpecialColumns: true,
         showClearFilterButton: false,
         showSuspendFilterButton: false,
+        showDatePicker: true,
     },
     gridFilterOptions: {
         availableFilterEditors: ['ExpressionEditor', 'QueryBuilder'],
@@ -255,6 +248,7 @@ const DefaultAdaptableOptions = {
         loadState: undefined,
         persistState: undefined,
         clearState: undefined,
+        autoMigrateState: true,
     },
     teamSharingOptions: {
         enableTeamSharing: false,
@@ -368,7 +362,8 @@ function applyDefaultAdaptableOptions(adaptableOptions) {
     adaptableOptsWithDefaults.gridFilterOptions = Object.assign({}, DefaultAdaptableOptions.gridFilterOptions, adaptableOptions.gridFilterOptions);
     adaptableOptsWithDefaults.userInterfaceOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions, adaptableOptions.userInterfaceOptions);
     adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions.dateInputOptions, adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions);
-    adaptableOptsWithDefaults.menuOptions = Object.assign({}, DefaultAdaptableOptions.menuOptions, adaptableOptions.menuOptions);
+    adaptableOptsWithDefaults.columnMenuOptions = Object.assign({}, DefaultAdaptableOptions.columnMenuOptions, adaptableOptions.columnMenuOptions);
+    adaptableOptsWithDefaults.contextMenuOptions = Object.assign({}, DefaultAdaptableOptions.contextMenuOptions, adaptableOptions.contextMenuOptions);
     adaptableOptsWithDefaults.stateOptions = Object.assign({}, DefaultAdaptableOptions.stateOptions, adaptableOptions.stateOptions);
     adaptableOptsWithDefaults.exportOptions = Object.assign({}, DefaultAdaptableOptions.exportOptions, adaptableOptions.exportOptions);
     adaptableOptsWithDefaults.teamSharingOptions = Object.assign({}, DefaultAdaptableOptions.teamSharingOptions, adaptableOptions.teamSharingOptions);

package/src/agGrid/editors/AdaptableDateEditor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICellEditorParams, ICellEditorComp } from '@ag-grid-community/core';
+import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 export declare const ReactAdaptableDateEditor: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & {
     showClearButton?: boolean;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -6,8 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
 const core_1 = require("ag-grid-community");
-const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
 const react_1 = require("react");
+const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
 function shouldClearExistingValue(params) {
     return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
 }

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -6,12 +6,12 @@ import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 interface AdaptableNumberCellEditorParams extends ICellEditorParams {
     /**
      * Whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
-     * @default true
+     * @defaultValue true
      */
     showClearButton: boolean;
     /**
      * Value to set for the cell, when the clear button is pressed
-     * @default '' (empty string)
+     * @defaultValue '' (empty string)
      */
     emptyValue: string;
 }

package/src/agGrid/sortColumnStateForVisibleColumns.d.ts

@@ -0,0 +1,12 @@
+type ColState = {
+    colId: string;
+    hide?: boolean | null;
+};
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export declare function sortColumnStateForVisibleColumns<T extends ColState>(columnState: T[], visibleColumns: string[]): T[];
+export {};

package/src/agGrid/sortColumnStateForVisibleColumns.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortColumnStateForVisibleColumns = void 0;
+function insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset = 0, lastVisibleOffset = 0) {
+    const prevColState = result[result.length - 1 - offset];
+    if (!prevColState) {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+        return;
+    }
+    if (prevColState.hide) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /* do not advance this as, as we've encountered a hidden column*/ lastVisibleOffset);
+        return;
+    }
+    const prevCol_visibilityIndex = visibleColumnsIndexes[prevColState.colId];
+    const currentCol_visibilityIndex = visibleColumnsIndexes[colState.colId];
+    if (currentCol_visibilityIndex < prevCol_visibilityIndex) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /*make sure we sync with the normal offset, as we've hit a visible col*/ offset + 1);
+    }
+    else {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+    }
+}
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+function sortColumnStateForVisibleColumns(columnState, visibleColumns) {
+    const visibleColumnsIndexes = visibleColumns.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const result = [];
+    for (let i = 0, len = columnState.length; i < len; i++) {
+        const colState = columnState[i];
+        const colVisible = visibleColumnsIndexes[colState.colId] != null;
+        if (!colVisible) {
+            // for cols not present in this layout, we keep them
+            // where they are
+            result.push(colState);
+            continue;
+        }
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes);
+    }
+    return result;
+}
+exports.sortColumnStateForVisibleColumns = sortColumnStateForVisibleColumns;

package/src/agGrid/weightedAverage.d.ts

@@ -1,9 +1,7 @@
 import { IAggFuncParams } from '@ag-grid-community/core';
-import { CellSummaryOperationContext } from '../types';
 export declare const getNumericValue: (input: unknown) => number | null;
 export declare const weightedAverage: (params: IAggFuncParams, columnId: string, weightColumnId: string) => {
     [x: string]: number | (() => number | "");
     toString: () => number | "";
     valueOf: () => number;
 };
-export declare const cellSummaryWeightedAverage: ({ numericColumns, selectedCellInfo, adaptableApi, }: CellSummaryOperationContext) => any;

package/src/agGrid/weightedAverage.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cellSummaryWeightedAverage = exports.weightedAverage = exports.getNumericValue = void 0;
+exports.weightedAverage = exports.getNumericValue = void 0;
 const tslib_1 = require("tslib");
-const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
 const toNumber_1 = tslib_1.__importDefault(require("lodash/toNumber"));
 const getNumericValue = (input) => {
     if (typeof input === 'number') {
@@ -52,57 +51,3 @@ const weightedAverage = (params, columnId, weightColumnId) => {
     };
 };
 exports.weightedAverage = weightedAverage;
-const cellSummaryWeightedAverage = ({ numericColumns, selectedCellInfo, adaptableApi, }) => {
-    if ((numericColumns === null || numericColumns === void 0 ? void 0 : numericColumns.length) != 1) {
-        return '';
-    }
-    const columnId = numericColumns[0];
-    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
-    const selectedColumnAgg = currentLayout.AggregationColumns[columnId];
-    if (!selectedColumnAgg ||
-        typeof selectedColumnAgg !== 'object' ||
-        selectedColumnAgg.type !== 'weightedAverage') {
-        return '';
-    }
-    const weightedColumnId = selectedColumnAgg.weightedColumnId;
-    if (weightedColumnId) {
-        let sumWeightedValue = 0;
-        let sumPrimaryValues = 0;
-        let isValid = true;
-        selectedCellInfo.gridCells.forEach((gridCell) => {
-            if (adaptableApi.gridApi.isGroupRowNode(gridCell.rowNode)) {
-                isValid = false;
-            }
-            if (isValid) {
-                const weightedGridCell = adaptableApi.gridApi.getGridCellFromRowNode(gridCell.rowNode, weightedColumnId);
-                sumWeightedValue += weightedGridCell.rawValue;
-                sumPrimaryValues += weightedGridCell.rawValue * gridCell.normalisedValue;
-            }
-        });
-        if (!isValid) {
-            return '';
-        }
-        const abColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
-        if (!abColumn) {
-            return '';
-        }
-        const activeFormatColumnsWithDisplayFormat = adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
-        if (activeFormatColumnsWithDisplayFormat.length === 1 &&
-            activeFormatColumnsWithDisplayFormat[0].DisplayFormat.Formatter === 'NumberFormatter') {
-            // there only one FormatColumn on this column, so we will use it to format the aggregated value
-            const [singleActiveFormatColumnsWithDisplayFormat] = activeFormatColumnsWithDisplayFormat;
-            const options = singleActiveFormatColumnsWithDisplayFormat
-                .DisplayFormat.Options;
-            if (options) {
-                return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
-            }
-        }
-        else {
-            // there are multiple (possibly conflicting) FormatColumns for this column, we cannot know which to use
-            return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, {
-                FractionDigits: 2,
-            });
-        }
-    }
-};
-exports.cellSummaryWeightedAverage = cellSummaryWeightedAverage;

package/src/components/Accordion.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+interface AccordionProps {
+    title: string | ReactElement;
+    children: ReactElement;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/src/components/Accordion.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("./SimpleButton"));
+const Panel_1 = tslib_1.__importDefault(require("./Panel"));
+const Accordion = ({ title, children }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [height, setHeight] = (0, react_1.useState)('0px');
+    const content = (0, react_1.useRef)(null);
+    const observer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setHeight(isOpen && content.current ? `${content.current.scrollHeight}px` : '0px');
+    }, [isOpen, content]);
+    (0, react_1.useEffect)(() => {
+        if (content.current) {
+            observer.current = new MutationObserver(() => {
+                var _a;
+                setHeight(`${(_a = content.current) === null || _a === void 0 ? void 0 : _a.scrollHeight}px`);
+            });
+            observer.current.observe(content.current, { childList: true, subtree: true });
+        }
+        return () => {
+            var _a;
+            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, []);
+    const toggleAccordion = () => {
+        setIsOpen(!isOpen);
+    };
+    return (react_1.default.createElement(Panel_1.default, { className: "ab-Accordion" },
+        react_1.default.createElement(SimpleButton_1.default, { iconPosition: 'end', icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
+        react_1.default.createElement("div", { ref: content, style: {
+                maxHeight: `${height}`,
+                overflow: 'hidden',
+                transition: 'max-height 0.6s ease',
+            } }, children)));
+};
+exports.Accordion = Accordion;
+exports.default = exports.Accordion;

package/src/components/Datepicker/index.js

@@ -4,7 +4,6 @@ exports.Datepicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const Input_1 = tslib_1.__importDefault(require("../Input"));
 const react_1 = require("react");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../FieldWrap"));
@@ -17,6 +16,8 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
+const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
+const date_fns_1 = require("date-fns");
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
@@ -102,7 +103,14 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                         setVisible(true);
                     }
                 } }),
-                React.createElement(Input_1.default, { value: inputValue, placehoder: placeholder !== null && placeholder !== void 0 ? placeholder : dateProps.format, style: style, disabled: disabled, readOnly: true, ref: ref }),
+                React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, value: inputValue, 
+                    // We do not want to show the format when the date-picker is visible
+                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '', onChange: (value) => {
+                        const date = new Date(value);
+                        if ((0, date_fns_1.isValid)(date)) {
+                            updateValue(date);
+                        }
+                    }, style: style, disabled: disabled }),
                 !!inputValue ? clearButton : null,
                 calendarButton))));
 });

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 const rebass_1 = require("rebass");
 const predicate_1 = require("../../../parser/src/predicate");
+const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
 const AdaptableContext_1 = require("../../../View/AdaptableContext");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
@@ -114,7 +115,7 @@ const PrimitiveFunctionEditor = (props) => {
         }
         columnId = col.replace(/[\[\]]/g, '');
         columnDataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
-        columnInputDataType = (0, utils_1.mapColumnDataTypeToExpressionFunctionType)(columnDataType);
+        columnInputDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnDataType);
         functionInputInputDataTypes = (_a = booleanExpressionFunctions_1.booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
         restOfFunctionInputDataTypes = functionInputInputDataTypes
             ? (0, utils_1.getOperatorMatchingInputs)(columnInputDataType, functionInputInputDataTypes)

package/src/components/ExpressionEditor/QueryBuilder/utils.d.ts

@@ -2,7 +2,6 @@ import { QlPredicate, QlPredicateError } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
 export declare const reorder: (predicate: QlPredicate, from: string, to: string) => any;
-export declare const mapColumnDataTypeToExpressionFunctionType: (dataType: AdaptableColumnDataType) => ExpressionFunctionInputType;
 export declare const mapExpressionFunctionTypeToColumnDataType: (type: ExpressionFunctionInputType) => AdaptableColumnDataType;
 export declare const getOperatorMatchingInputs: (columnType: ExpressionFunctionInputType, inputs: ExpressionFunctionInputType[] | Array<ExpressionFunctionInputType>[]) => ExpressionFunctionInputType[];
 export declare const getFunctionsForColumnType: (dataType: AdaptableColumnDataType, availableBooleanFunctions: BooleanFunctionName[]) => BooleanFunctionName[];

package/src/components/ExpressionEditor/QueryBuilder/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUnsuportedExpressionFromQlPredicate = exports.getFunctionsForColumnType = exports.getOperatorMatchingInputs = exports.mapExpressionFunctionTypeToColumnDataType = exports.mapColumnDataTypeToExpressionFunctionType = exports.reorder = void 0;
+exports.getUnsuportedExpressionFromQlPredicate = exports.getFunctionsForColumnType = exports.getOperatorMatchingInputs = exports.mapExpressionFunctionTypeToColumnDataType = exports.reorder = void 0;
+const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const predicate_1 = require("../../../parser/src/predicate");
 const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
@@ -30,21 +31,6 @@ const reorder = (predicate, from, to) => {
     return predicateCopy;
 };
 exports.reorder = reorder;
-const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
-    if (dataType === 'Number') {
-        return 'number';
-    }
-    if (dataType === 'Boolean') {
-        return 'boolean';
-    }
-    if (dataType === 'String') {
-        return 'text';
-    }
-    if (dataType === 'Date') {
-        return 'date';
-    }
-};
-exports.mapColumnDataTypeToExpressionFunctionType = mapColumnDataTypeToExpressionFunctionType;
 const mapExpressionFunctionTypeToColumnDataType = (type) => {
     if (type === 'number') {
         return 'Number';
@@ -72,7 +58,7 @@ const getOperatorMatchingInputs = (columnType, inputs) => {
 };
 exports.getOperatorMatchingInputs = getOperatorMatchingInputs;
 const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
-    const columnType = (0, exports.mapColumnDataTypeToExpressionFunctionType)(dataType);
+    const columnType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(dataType);
     return booleanExpressions_1.booleanExpressionsAvailableInQueryBuilder.filter((boolFnName) => {
         if (!availableBooleanFunctions.includes(boolFnName)) {
             return false;