@adaptabletools/adaptable 12.0.7 → 12.1.0-canary.0

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowGroupingSection = exports.RowGroupingSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Utilities_1 = require("./Utilities");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const RowGroupingSectionSummary = () => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
+};
+exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
+const RowGroupingSection = (props) => {
+    var _a, _b, _c;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
+    const sortedGroupableColumns = React.useMemo(() => {
+        var _a;
+        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allGroupableColumns]);
+    const handleColumnsChange = (columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Rows"),
+        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
+                    return `Selected Columns:`;
+                }, onChange: handleColumnsChange })),
+        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
+                React.createElement(FormLayout_1.default, { p: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag_1.Tag, { mb: 2, mr: 2, key: index }, value))))))))));
+};
+exports.RowGroupingSection = RowGroupingSection;

package/src/View/Layout/Wizard/sections/SettingsSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const SettingsSectionSummary: React.FunctionComponent;
+interface SettingsSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;
+export {};

package/src/View/Layout/Wizard/sections/SettingsSection.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsSection = exports.SettingsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const SettingsSectionSummary = () => {
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Layout Name: ",
+            layout.Name),
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Pivot Layout: ",
+            layout.EnablePivot ? 'Yes' : 'No'),
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Suppress Aggregation Function in Header: ",
+            layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
+};
+exports.SettingsSectionSummary = SettingsSectionSummary;
+const SettingsSection = (props) => {
+    var _a;
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const onNameChange = (event) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
+    };
+    const handlePivotChange = (checked) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { width: "100%", style: { maxWidth: 300 } },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
+};
+exports.SettingsSection = SettingsSection;

package/src/View/Layout/Wizard/sections/SortSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const SortSectionSummary: React.FunctionComponent;
+interface SortSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const SortSection: React.FunctionComponent<SortSectionProps>;
+export {};

package/src/View/Layout/Wizard/sections/SortSection.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortSection = exports.SortSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const SortSectionSummary = () => {
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const sortViewItems = getLayoutSortViewItems_1.getLayoutSortViewItems(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Sorts"))));
+};
+exports.SortSectionSummary = SortSectionSummary;
+const ColumnRow = (props) => {
+    var _a, _b, _c;
+    const SortOrder = (_c = ((_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.ColumnSorts) !== null && _b !== void 0 ? _b : []).find((sort) => sort.ColumnId === props.column.columnId)) === null || _c === void 0 ? void 0 : _c.SortOrder;
+    const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
+    return (React.createElement(rebass_1.Box, null,
+        props.column.friendlyName,
+        SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
+};
+const SortSection = (props) => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allSortableColumns = adaptable.api.columnApi.getSortableColumns().filter((column) => {
+        // filter out columns that are not in the layout
+        return layout.Columns.includes(column.columnId);
+    });
+    const sortedSortColumns = React.useMemo(() => {
+        var _a;
+        return sortWithOrder_1.sortWithOrderArray(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allSortableColumns]);
+    const handleColumnsSelectionChange = React.useCallback((columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {
+                var _a, _b, _c;
+                const SortOrder = (_c = (_b = (_a = layout.ColumnSorts) === null || _a === void 0 ? void 0 : _a.find((sort) => sort.ColumnId === columnId)) === null || _b === void 0 ? void 0 : _b.SortOrder) !== null && _c !== void 0 ? _c : 'Asc';
+                return {
+                    ColumnId: columnId,
+                    SortOrder: SortOrder,
+                };
+            }) }));
+    }, [layout]);
+    const handleSortChange = React.useCallback((columnId, SortOrder) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (_a = layout.ColumnSorts) === null || _a === void 0 ? void 0 : _a.map((sort) => {
+                if (sort.ColumnId === columnId) {
+                    return Object.assign(Object.assign({}, sort), { SortOrder: SortOrder });
+                }
+                return sort;
+            }) }));
+    }, [layout]);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Sorts"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
+                    return `Active aggregations:`;
+                }, onChange: handleColumnsSelectionChange }))));
+};
+exports.SortSection = SortSection;

package/src/View/Layout/Wizard/sections/Utilities.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableColumn } from '../../../../types';
+export declare const columnFilter: (column: AdaptableColumn, searchText: string) => boolean;

package/src/View/Layout/Wizard/sections/Utilities.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnFilter = void 0;
+const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate.toLowerCase().includes(searchText.toLowerCase()));
+exports.columnFilter = columnFilter;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -11,7 +11,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const CheckBox_1 = require("../../../../components/CheckBox");
 const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error'];
 const ScheduleSettingsReminder = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const messageTypes = MESSAGE_TYPES.map((messageType) => ({
         label: messageType,
         value: messageType,
@@ -30,6 +30,9 @@ const ScheduleSettingsReminder = (props) => {
     const handleDisplayNotificationChange = (checked) => {
         props.onChange(Object.assign(Object.assign({}, props.reminderSchedule), { DisplayNotification: checked }));
     };
+    const handleDisplaySystemStatusChange = (checked) => {
+        props.onChange(Object.assign(Object.assign({}, props.reminderSchedule), { DisplaySystemStatusMessage: checked }));
+    };
     return (React.createElement(rebass_1.Box, { "data-name": "schedule-settings-remainder" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Reminder Schedule Settings"),
@@ -42,6 +45,8 @@ const ScheduleSettingsReminder = (props) => {
                     React.createElement(FormLayout_1.FormRow, { label: "Type" },
                         React.createElement(DropdownButton_1.default, { style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")))))));
+                        React.createElement(CheckBox_1.CheckBox, { checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(CheckBox_1.CheckBox, { checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
 };
 exports.ScheduleSettingsReminder = ScheduleSettingsReminder;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -29,8 +29,8 @@ const ScheduleSettingsReport = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
-                        React.createElement(DropdownButton_1.default, { style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Destination" },
-                        React.createElement(DropdownButton_1.default, { style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
 };
 exports.ScheduleSettingsReport = ScheduleSettingsReport;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsSummary.js

@@ -26,6 +26,10 @@ const getScheduleSettingsValues = (data) => {
                 label: 'Display Toast Notification',
                 value: (reminder === null || reminder === void 0 ? void 0 : reminder.DisplayNotification) ? 'True' : 'False',
             },
+            {
+                label: 'Show System Status Message',
+                value: (reminder === null || reminder === void 0 ? void 0 : reminder.DisplaySystemStatusMessage) ? 'True' : 'False',
+            },
         ];
     }
     if (data.ScheduleType === Enums_1.ScheduleType.Report) {

package/src/View/StatusBar/StatusBarPanel.js

@@ -39,7 +39,7 @@ const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (React.createElement(rebass_1.Flex, Object.assign({}, flexProps, { alignItems: "center", justifyContent: "center", as: shouldTriggerActionOnWrapperClick ? 'button' : 'div', className: baseClassName, onClick: handleWrapperClick }),
+    return (React.createElement(rebass_1.Flex, Object.assign({}, flexProps, { alignItems: "center", justifyContent: "center", className: baseClassName, onClick: handleWrapperClick, style: { cursor: shouldTriggerActionOnWrapperClick ? 'pointer' : 'default' } }),
         props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
         popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
         ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(rebass_1.Box, { ml: 1 }, (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 : _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))))));

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

@@ -36,6 +36,7 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
     onFinish?: (data: ENTITY) => any;
     children?: React.ReactNode;
     style?: CSSProperties;
+    titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
 }

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -75,8 +75,8 @@ const OnePageAdaptableWizard = (props) => {
 };
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
-    const { setCurrentSection } = OnePageWizards_1.useOnePageWizardContext();
-    const { sections, data, api } = useOnePageAdaptableWizardContext();
+    const { setCurrentSection, sections, data } = OnePageWizards_1.useOnePageWizardContext();
+    const { api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -97,7 +97,7 @@ const OnePageWizardSummary = () => {
                 section.title,
                 " ",
                 renderEdit(index)),
-            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data, api))));
+            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data))));
     })
         .filter(Boolean)));
 };

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

@@ -31,6 +31,7 @@ export interface OnePageWizardProps<ENTITY> {
     onFinish?: (data: ENTITY) => any;
     children?: React.ReactNode;
     style?: CSSProperties;
+    titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
 }

package/src/View/Wizard/OnePageWizards.js

@@ -139,7 +139,7 @@ const OnePageWizard = (props) => {
                 } },
                 React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: Object.assign({ height: '100%', width: '90vw', maxWidth: 1200 }, props.style) },
                     React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
-                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: { overflow: 'auto', position: 'relative', flex: 'none' } },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: Object.assign({ overflow: 'auto', position: 'relative', flex: 'none' }, props.titleContainerStyle) },
                             visibleSections.map((section, index) => {
                                 if (section === '-') {
                                     return (React.createElement(rebass_1.Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {

package/src/agGrid/Adaptable.d.ts

@@ -95,6 +95,7 @@ export declare class Adaptable implements IAdaptable {
     private listenerGlobalSetRowSelection;
     private listenerGlobalColumnEventsThatTriggerStateChange;
     private listenerGlobalColumnEventsThatTriggerAutoLayoutSave;
+    private listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave;
     static init(adaptableOptions: AdaptableOptions): Promise<AdaptableApi>;
     /**
      * Lazy static constructor for Adaptable
@@ -259,6 +260,7 @@ export declare class Adaptable implements IAdaptable {
     setupColumnCellEditor({ colId, col }: ColumnSetupInfo): void;
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
+    setupColumnQuickFilerText({ col, abColumn }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;
@@ -325,6 +327,7 @@ export declare class Adaptable implements IAdaptable {
     isGridGroupingActive(): boolean;
     isGridPivotable(): boolean;
     isQuickFilterAvailable(): boolean;
+    setAgQuickSearch(query: string): void;
     private hasFloatingFilterOnAtLeastOneColumn;
     showQuickFilter(): void;
     hideQuickFilter(): void;

package/src/agGrid/Adaptable.js

@@ -2515,6 +2515,7 @@ class Adaptable {
             this.gridOptions.api.removeGlobalListener(this.listenerGlobalSetRowSelection);
             this.gridOptions.api.removeGlobalListener(this.listenerGlobalColumnEventsThatTriggerStateChange);
             this.gridOptions.api.removeGlobalListener(this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave);
+            this.gridOptions.api.removeGlobalListener(this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave);
             this.listenerFirstDataRendered = null;
             this.listenerPivotModeChanged = null;
             this.listenerPivotChanged = null;
@@ -2526,6 +2527,7 @@ class Adaptable {
             this.listenerModelUpdated = null;
             this.listenerGlobalColumnEventsThatTriggerStateChange = null;
             this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = null;
+            this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave = null;
             this.gridOptions.api.__adaptable = null;
             this.gridOptions.api.setColumnDefs = GridApi_setColumnDefs;
             this.gridOptions.getRowStyle = null;
@@ -2759,7 +2761,6 @@ class Adaptable {
             all_modules_1.Events.EVENT_DISPLAYED_COLUMNS_CHANGED,
             all_modules_1.Events.EVENT_SORT_CHANGED,
             all_modules_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED,
-            all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
         // ADD filter event
@@ -2768,6 +2769,18 @@ class Adaptable {
                 this.debouncedSaveGridLayout();
             }
         }));
+        // Save Layout if Display Row Groups is "dynamic"
+        const rowGroupEventsThatTriggersAutoLayoutSave = [
+            all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
+            all_modules_1.Events.EVENT_EXPAND_COLLAPSE_ALL,
+        ];
+        this.gridOptions.api.addGlobalListener((this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave = (type) => {
+            if (rowGroupEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
+                if (this.adaptableOptions.layoutOptions.displayRowGroups == 'dynamic') {
+                    this.debouncedSaveGridLayout();
+                }
+            }
+        }));
         /**
          * Use Case: A visible Column has become row grouped and 'hideColumnWhenGrouped' is true
          * Action: Make the column invisible
@@ -3019,6 +3032,7 @@ class Adaptable {
             this.setupColumnComparator(colSetupInfo);
             this.setupColumnCellEditor(colSetupInfo);
             this.setupColumnHeader(colSetupInfo);
+            this.setupColumnQuickFilerText(colSetupInfo);
         });
         this.setupRowStyling();
         // setupAggregationColumnHeaders() is executed on every setLayout()
@@ -3029,6 +3043,9 @@ class Adaptable {
         this.redrawHeader();
     }
     setGridOptionsProperty(propertyName, propertyGetter) {
+        if (this.isDestroyed) {
+            return;
+        }
         const userKey = `user.${propertyName}`;
         const adaptableKey = `adaptable.${propertyName}`;
         const value = this.gridOptions[propertyName];
@@ -3037,15 +3054,17 @@ class Adaptable {
             this.gridOptionsPropertyCache.set(userKey, value);
         }
         const userValue = this.gridOptionsPropertyCache.get(userKey);
-        const adaptableValue = (...args) => {
-            if (this.isDestroyed) {
-                return;
-            }
-            if (propertyGetter) {
-                return propertyGetter(userValue)(...args);
-            }
-            return undefined;
-        };
+        let adaptableValue = propertyGetter(userValue);
+        // usualy it is a function, but not always, e.g. in the case of 'suppressAggFuncInHeader'
+        if (typeof adaptableValue === 'function') {
+            const previousValue = adaptableValue;
+            adaptableValue = (...args) => {
+                if (this.isDestroyed) {
+                    return;
+                }
+                return previousValue(...args);
+            };
+        }
         if (adaptableValue != null) {
             this.gridOptionsPropertyCache.set(adaptableKey, adaptableValue);
         }
@@ -3246,6 +3265,21 @@ class Adaptable {
             }
         });
     }
+    setupColumnQuickFilerText({ col, abColumn }) {
+        this.setColDefProperty(col, 'getQuickFilterText', (userGetQuickFilterText) => {
+            if (userGetQuickFilterText) {
+                return userGetQuickFilterText;
+            }
+            return (params) => {
+                const visibleCoulmnsMap = this.api.layoutApi.getCurrentVisibleColumnIdsMap();
+                const isVisible = visibleCoulmnsMap[abColumn.columnId];
+                if (!isVisible) {
+                    return '';
+                }
+                return this.getDisplayValueFromRowNode(params.node, abColumn.columnId);
+            };
+        });
+    }
     setupColumnHeader({ col, abColumn }) {
         var _a, _b;
         const previousColumnHeader = (_a = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _a === void 0 ? void 0 : _a.headerName;
@@ -4049,6 +4083,9 @@ class Adaptable {
     isQuickFilterAvailable() {
         return this.hasFloatingFilterOnAtLeastOneColumn() === true;
     }
+    setAgQuickSearch(query) {
+        this.gridOptions.api.setQuickFilter(query);
+    }
     hasFloatingFilterOnAtLeastOneColumn(defs = this.gridOptions.columnDefs) {
         if (this.gridOptions.defaultColDef && this.gridOptions.defaultColDef.floatingFilter) {
             return true;

package/src/agGrid/agGridHelper.js

@@ -130,7 +130,17 @@ class agGridHelper {
         }
         else {
             this.gridOptions.getRowId = (params) => {
-                return params.data[primaryKey];
+                var _a;
+                if (params.data[primaryKey]) {
+                    return params.data[primaryKey];
+                }
+                // row does not have primary key => might be a group row
+                const parentKeys = (_a = params.parentKeys) !== null && _a !== void 0 ? _a : [];
+                const values = Object.values(params.data);
+                if (values.length) {
+                    const id = [...parentKeys, values[0]].join('/');
+                    return id;
+                }
             };
         }
         return true;

package/src/components/ExpressionEditor/editorButtonsAggregatedScalar.js

@@ -27,6 +27,11 @@ exports.editorButtonsAggregatedScalar = [
         data: 'MAX()',
         text: 'Max',
     },
+    {
+        functionName: 'QUANT',
+        data: 'QUANT()',
+        text: 'Quantile',
+    },
     {
         functionName: 'GROUP_BY',
         data: 'GROUP_BY()',

package/src/components/ExpressionEditor/index.js

@@ -45,7 +45,7 @@ function ExpressionEditor(props) {
             props.onChange(value);
         }, testData: data, isFullExpression: props.isFullExpression, api: props.api }));
     // currently only boolean and scalar expressions support nested calculated columns (calc cols which reference other calc cols)
-    const queryableColumns = type === 'scalar' || type === 'boolean'
+    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

package/src/components/Tabs/index.js

@@ -13,10 +13,12 @@ const TabContext = React.createContext({
     setSelectedIndex: (index) => { },
 });
 const isTab = (c) => {
-    return c.type === exports.Tab || c.props.isTabsTab;
+    var _a;
+    return c.type === exports.Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
 };
 const isTabContent = (c) => {
-    return c.type === exports.Content || c.props.isTabsContent;
+    var _a;
+    return c.type === exports.Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
 };
 const Tabs = (props) => {
     var _a;

package/src/components/icons/arrow-down-long.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/arrow-down-long.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props),
+    React.createElement("path", { d: "m12 22-7-7 1.4-1.425 4.6 4.6V2h2v16.175l4.6-4.575L19 15Z" })));

package/src/components/icons/arrow-up-long.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/arrow-up-long.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props),
+    React.createElement("path", { d: "M11 22V5.825L6.4 10.4 5 9l7-7 7 7-1.4 1.425-4.6-4.6V22Z" })));

package/src/components/icons/index.js

@@ -7,6 +7,8 @@ const ReactDOMServer = tslib_1.__importStar(require("react-dom/server"));
 const arrow_right_1 = tslib_1.__importDefault(require("./arrow-right"));
 const arrow_down_1 = tslib_1.__importDefault(require("./arrow-down"));
 const arrow_up_1 = tslib_1.__importDefault(require("./arrow-up"));
+const arrow_up_long_1 = tslib_1.__importDefault(require("./arrow-up-long"));
+const arrow_down_long_1 = tslib_1.__importDefault(require("./arrow-down-long"));
 const arrow_left_1 = tslib_1.__importDefault(require("./arrow-left"));
 const triangle_up_1 = tslib_1.__importDefault(require("./triangle-up"));
 const triangle_down_1 = tslib_1.__importDefault(require("./triangle-down"));
@@ -194,8 +196,10 @@ const allIcons = {
     'boolean-list': boolean_list_1.default,
     'arrow-right': arrow_right_1.default,
     'arrow-up': arrow_up_1.default,
+    'arrow-up-long': arrow_up_long_1.default,
     'triangle-up': triangle_up_1.default,
     'arrow-down': arrow_down_1.default,
+    'arrow-down-long': arrow_down_long_1.default,
     'triangle-down': triangle_down_1.default,
     'arrow-left': arrow_left_1.default,
     'check-circle': check_circle_1.default,

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4066,6 +4066,14 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             description: string;
             uiLabel: string;
+            isOptional?: undefined;
+            reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
             reference?: undefined;
         } | {
             name: string;
@@ -4073,6 +4081,7 @@ export declare const ADAPTABLE_METAMODEL: {
             description: string;
             uiLabel: string;
             reference: string;
+            isOptional?: undefined;
         })[];
     };
     ReportContext: {