@adaptabletools/adaptable-cjs 21.0.11 → 21.1.0-canary.0

package/src/agGrid/AgGridAdapter.js

@@ -12,6 +12,7 @@ const agGridDataTypeDefinitions_1 = require("./agGridDataTypeDefinitions");
 const ColumnApiImpl_1 = require("../Api/Implementation/ColumnApiImpl");
 const isPivotColumnTotal_1 = require("../layout-manager/src/isPivotColumnTotal");
 const isPivotAggTotalColumn_1 = require("../layout-manager/src/isPivotAggTotalColumn");
+const AggregationColumns_1 = require("../AdaptableState/Common/AggregationColumns");
 // AG GRID obfuscates its internals, this is (currently) the best way to get hold of its internal services
 const DANGER_AG_GRID_BEANS_MAP = {};
 const getColumnApiModule = () => ag_grid_enterprise_1.ColumnApiModule;
@@ -27,7 +28,7 @@ class AgGridAdapter {
             const ColumnDefFactory_Prototye_preWireBeans = ColumnDefFactory_Prototype.preWireBeans;
             ColumnDefFactory_Prototype.preWireBeans = function (beans) {
                 ColumnDefFactory_Prototye_preWireBeans?.apply(this, arguments);
-                const gridId = beans?.context?.getGridId();
+                const gridId = beans?.context?.getId();
                 if (!gridId) {
                     console.error('CRITICAL: No gridId found in beans, this should never happen!');
                 }
@@ -140,7 +141,8 @@ class AgGridAdapter {
             }
             const pivotColumnFilters = self.adaptableApi.filterApi.columnFilterApi
                 .getActiveColumnFilters()
-                .filter((columnFilter) => self.adaptableApi.columnApi.isPivotResultColumn(columnFilter.ColumnId));
+                .filter((columnFilter) => self.adaptableApi.columnApi.isPivotResultColumn(columnFilter.ColumnId) ||
+                self.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(columnFilter.ColumnId));
             try {
                 if (pivotColumnFilters.length > 0) {
                     for (const columnFilter of pivotColumnFilters) {
@@ -163,7 +165,8 @@ class AgGridAdapter {
         agGridColumnFilterService.doFiltersPass = this.DANGER_doFiltersPassMonkeyPatcher;
         this.DANGER_isAggFilterPresentMonkeyPatcher = function () {
             const columnFilters = self.adaptableApi.filterApi.columnFilterApi.getActiveColumnFilters();
-            return columnFilters.some((colFilter) => self.adaptableApi.columnApi.isPivotResultColumn(colFilter.ColumnId));
+            return columnFilters.some((colFilter) => self.adaptableApi.columnApi.isPivotResultColumn(colFilter.ColumnId) ||
+                self.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(colFilter.ColumnId));
         };
         agGridColumnFilterService.isAggFilterPresent = this.DANGER_isAggFilterPresentMonkeyPatcher;
     }
@@ -487,8 +490,10 @@ class AgGridAdapter {
             this.logger.warn(`Column is undefined, returning 'text' for Type`);
             return 'text';
         }
-        if (this.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(agColumn.getId()) ||
-            this.adaptableApi.columnApi.isSelectionColumn(agColumn.getId())) {
+        if (this.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(agColumn.getId())) {
+            return 'groupColumn';
+        }
+        if (this.adaptableApi.columnApi.isSelectionColumn(agColumn.getId())) {
             return 'unknown';
         }
         if (this.adaptableApi.columnApi.isAutoRowGroupColumnForMulti(agColumn.getId())) {
@@ -612,9 +617,10 @@ class AgGridAdapter {
         return false;
     }
     getColumnAggregationFunctions(colDef) {
-        const result = colDef.allowedAggFuncs || ['sum', 'min', 'max', 'count', 'avg', 'first', 'last']; // those are the default fns aggrid supports out-of-the-box
+        let result = [].concat(colDef.allowedAggFuncs || ['sum', 'min', 'max', 'count', 'avg', 'first', 'last']); // those are the default fns aggrid supports out-of-the-box
         const gridOptionsAggFuncs = this.adaptableApi.agGridApi.getGridOption('aggFuncs') || {};
         result.push(...Object.keys(gridOptionsAggFuncs));
+        result = result.filter((func) => !(0, AggregationColumns_1.isWeightedAverageAggFuncName)(func));
         return [...new Set(result)];
     }
     isTreeColumn(isGeneratedRowGroupColumn) {

package/src/agGrid/AgGridColumnAdapter.js

@@ -21,6 +21,7 @@ const AdaptableFilterHandler_1 = require("./AdaptableFilterHandler");
 const AgGridFilterAdapter_1 = require("./AgGridFilterAdapter");
 const AgGridFloatingFilterAdapter_1 = require("./AgGridFloatingFilterAdapter");
 const AdaptableLogger_1 = require("./AdaptableLogger");
+const AggregationColumns_1 = require("../AdaptableState/Common/AggregationColumns");
 function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableNumberEditor_1.AdaptableReactNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
@@ -521,7 +522,10 @@ class AgGridColumnAdapter {
     }
     setupColumnAllowedAggFuncs({ col, abColumn }) {
         this.setColDefProperty(col, 'allowedAggFuncs', () => {
-            return abColumn.availableAggregationFunctions;
+            if (!abColumn.availableAggregationFunctions) {
+                return undefined;
+            }
+            return abColumn.availableAggregationFunctions.filter((func) => !(0, AggregationColumns_1.isWeightedAverageAggFuncName)(func));
         });
     }
     setupColumnType(columnSetupInfo) {
@@ -593,31 +597,33 @@ class AgGridColumnAdapter {
                 });
             }
             else {
+                // TODO only set auto group column as filterable if at least one group columns is filterable
                 this.setColDefProperty(col, 'filter', () => {
                     return 'agGroupColumnFilter';
                 });
             }
-            return;
+            if (this.adaptableApi.columnApi.isAutoRowGroupColumnForMulti(colId)) {
+                return;
+            }
         }
         // setup "normal" column filter
         this.setColDefProperty(col, 'filter', (original_filter) => {
-            if (!colDef.filter) {
-                return;
-            }
+            const pivotMode = this.adaptableInstance.isInPivotMode();
             if (!useAdaptableFilter) {
                 return original_filter;
             }
-            if (useAdaptableFilter &&
-                typeof original_filter !== 'boolean' &&
+            if (!colDef.filter) {
+                return;
+            }
+            if (typeof original_filter !== 'boolean' &&
                 typeof original_filter?.handler !== 'function' &&
-                !this.adaptableInstance.isInPivotMode()) {
+                !pivotMode) {
                 this.adaptableApi.consoleError(`Column '${colId}' has a custom filter defined in colDef.filter, but Adaptable Filtering accepts only the TRUE/FALSE values!`);
                 return false;
             }
             return {
                 component: (0, AgGridFilterAdapter_1.AgGridFilterAdapterFactory)(this.adaptableInstance),
-                // doesFilterPass,
-                handler: (params) => new AdaptableFilterHandler_1.AdaptableFilterHandler(this.adaptableApi, columnSetup),
+                handler: () => new AdaptableFilterHandler_1.AdaptableFilterHandler(this.adaptableApi, columnSetup),
             };
         });
     }
@@ -634,7 +640,7 @@ class AgGridColumnAdapter {
             !colDef.floatingFilter ||
             !this.adaptableOptions.filterOptions.useAdaptableFiltering ||
             !this.adaptableApi.filterApi.columnFilterApi.isQuickFilterVisible();
-        if (this.adaptableApi.columnApi.isAutoRowGroupColumn(col.getColId())) {
+        if (this.adaptableApi.columnApi.isAutoRowGroupColumnForMulti(col.getColId())) {
             this.setColDefProperty(col, 'floatingFilter', (original_floatingFilter) => {
                 // the floating filter for the group column is "inherited" from the base column
                 // via the colDef.filter =  'agGroupColumnFilter'
@@ -645,7 +651,7 @@ class AgGridColumnAdapter {
             });
             this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
                 // hide button for multi column groups
-                return this.adaptableApi.columnApi.isAutoRowGroupColumnForMulti(col.getColId());
+                return true;
             });
             return;
         }
@@ -655,7 +661,7 @@ class AgGridColumnAdapter {
             }
             return (0, AgGridFloatingFilterAdapter_1.AgGridFloatingFilterAdapterFactory)(this.adaptableInstance);
         });
-        this.setColDefProperty(col, 'floatingFilter', (original_floatingFilter) => {
+        this.setColDefProperty(col, 'floatingFilter', () => {
             if (isFloatingFilterDisabled) {
                 return;
             }

package/src/components/OverlayTrigger/index.js

@@ -200,7 +200,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
                         clearAllOverlays();
                         hideOverlay('overlay-trigger');
                     }
-                } }, props.render({ targetWidth: targetWidth })));
+                } }, props.render({ targetWidth })));
             let preparedConstrainTo;
             if (constrainTo) {
                 preparedConstrainTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);

package/src/components/Select/Select.js

@@ -14,7 +14,8 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const re_resizable_1 = require("re-resizable");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const OverlayTrigger_1 = require("../OverlayTrigger");
-const CSSNumericVariableWatch_1 = require("./CSSNumericVariableWatch");
+const CheckBox_1 = require("../CheckBox");
+const AdaptableComputedCSSVarsContext_1 = require("../../View/AdaptableComputedCSSVarsContext");
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -56,15 +57,27 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         renderSelectionCheckBox: (params) => {
             // disable reacting to onChange
             // as we handle selection change in the onCellClick
-            return React.createElement(infinite_react_1.components.CheckBox, { checked: params.rowInfo?.rowSelected ?? false });
+            return React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: params.rowInfo?.rowSelected ?? false });
         },
         renderHeaderSelectionCheckBox: true,
         className: 'ab-Select-CheckboxColumn',
         renderValue,
         renderHeader: (headerParams) => {
+            const selected = headerParams.allRowsSelected
+                ? true
+                : headerParams.someRowsSelected
+                    ? null
+                    : false;
+            const { api } = headerParams;
             return (React.createElement(React.Fragment, null,
-                headerParams.renderBag.selectionCheckBox,
-                headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)'));
+                React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: selected, onChange: (selected) => {
+                        if (selected) {
+                            api.rowSelectionApi.selectAll();
+                        }
+                        else {
+                            api.rowSelectionApi.deselectAll();
+                        }
+                    } }, headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)')));
         },
         renderMenuIcon: false,
     },
@@ -106,15 +119,11 @@ const doesOptionMatchValue = function (value) {
 };
 const Select = function (props) {
     let maxLabelLength = 0;
-    const cssVarsValuesRef = React.useRef({
-        '--ab-cmp-select-menu__max-width': 0,
-        '--ab-cmp-select-menu__min-width': 0,
-        '--ab-cmp-select-menu__max-height': 0,
-    });
+    const computedCSSVars = (0, AdaptableComputedCSSVarsContext_1.useAdaptableComputedCSSVars)();
     const CSS_VARS_VALUES = {
-        '--ab-cmp-select-menu__max-width': cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] || '60vw',
-        '--ab-cmp-select-menu__min-width': cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] || 150,
-        '--ab-cmp-select-menu__max-height': cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] || '60vh',
+        '--ab-cmp-select-menu__max-width': computedCSSVars['--ab-cmp-select-menu__max-width'] || '60vw',
+        '--ab-cmp-select-menu__min-width': computedCSSVars['--ab-cmp-select-menu__min-width'] || 150,
+        '--ab-cmp-select-menu__max-height': computedCSSVars['--ab-cmp-select-menu__max-height'] || '60vh',
     };
     const searchableInMenulist = props.searchable === 'menulist';
     const searchableInline = props.searchable === 'inline';
@@ -517,15 +526,6 @@ const Select = function (props) {
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-width", onChange: (value) => {
-                cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] = value;
-            } }),
-        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__min-width", onChange: (value) => {
-                cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] = value;
-            } }),
-        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-height", onChange: (value) => {
-                cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] = value;
-            } }),
         React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: (0, join_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
             // This needed so the menu is not clipped by overflow: hidden
             menuPortalTarget: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TreeListItem, TreeListProps } from '../TreeList';
+export type TreeDropdownProps<T extends TreeListItem<any>> = {
+    placeholder?: string;
+    style?: React.CSSProperties;
+    fieldStyle?: React.CSSProperties;
+    listSizeConstraints?: {
+        minWidth?: number | string;
+        maxWidth?: number | string;
+        minHeight?: number | string;
+        maxHeight?: number | string;
+    };
+    options: TreeListProps<T>['options'];
+    labelField?: string;
+    primaryKey?: keyof T;
+    value?: any[][] | string[];
+    defaultValue?: any[][] | string[];
+    toDisplayValue?: (value: any[][] | string[]) => string;
+    onChange: (value: any[][] | string[]) => void;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    resizable?: boolean;
+    clearable?: boolean;
+};
+export declare function toDisplayValueDefault(value: any[][] | string[]): string;
+export declare function TreeDropdown<T extends TreeListItem<any>>(props: TreeDropdownProps<T>): React.JSX.Element;

package/src/components/Tree/TreeDropdown/index.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeDropdown = exports.toDisplayValueDefault = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../../FieldWrap"));
+const TreeList_1 = require("../TreeList");
+const react_1 = require("react");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../../OverlayTrigger"));
+const rebass_1 = require("rebass");
+const NotifyResize_1 = tslib_1.__importDefault(require("../../NotifyResize"));
+const Input_1 = tslib_1.__importDefault(require("../../Input"));
+const InfiniteTable_1 = require("../../InfiniteTable");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
+const CheckBox_1 = require("../../CheckBox");
+const useLatest_1 = require("../../utils/useLatest");
+const re_resizable_1 = require("re-resizable");
+const AdaptableComputedCSSVarsContext_1 = require("../../../View/AdaptableComputedCSSVarsContext");
+const resizableDirections = {
+    right: true,
+    bottom: true,
+    bottomRight: true,
+};
+function toDisplayValueDefault(value) {
+    if (!Array.isArray(value)) {
+        return `${value}`;
+    }
+    return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
+}
+exports.toDisplayValueDefault = toDisplayValueDefault;
+const getLabelColumn = (field) => {
+    return {
+        field,
+        defaultFlex: 1,
+        renderTreeIcon: true,
+        defaultSortable: false,
+        resizable: false,
+        renderSelectionCheckBox: ({ rowInfo, dataSourceApi, api }) => {
+            if (!rowInfo.isTreeNode) {
+                return null;
+            }
+            return (React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: rowInfo?.rowSelected, onChange: (checked) => {
+                    dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
+                    api.focus();
+                } }));
+        },
+        renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
+            const { treeApi } = dataSourceApi;
+            const allFirstLevelCollapsed = dataSourceApi
+                .getOriginalDataArray()
+                .every((item) => !treeApi.isNodeExpanded([item.id]));
+            return (React.createElement(rebass_1.Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
+                    // so we can keep the focus on the Grid
+                    e.preventDefault();
+                } },
+                React.createElement(CheckBox_1.CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
+                        if (allRowsSelected) {
+                            dataSourceApi.treeApi.deselectAll();
+                        }
+                        else {
+                            dataSourceApi.treeApi.selectAll();
+                        }
+                        api.focus();
+                    } }),
+                React.createElement(rebass_1.Flex, { flex: 1 }),
+                React.createElement(SimpleButton_1.default, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
+                        if (allFirstLevelCollapsed) {
+                            dataSourceApi.treeApi.expandAll();
+                        }
+                        else {
+                            dataSourceApi.treeApi.collapseAll();
+                        }
+                    }, iconPosition: "end" }, allFirstLevelCollapsed ? 'Expand All' : 'Collapse All')));
+        },
+    };
+};
+const sizeFull = {
+    width: '100%',
+    height: '100%',
+};
+function getRowCount(options) {
+    return options.reduce((acc, option) => {
+        if (Array.isArray(option.children)) {
+            return acc + getRowCount(option.children) + 1;
+        }
+        return acc + 1;
+    }, 0);
+}
+function TreeDropdown(props) {
+    const [visible, doSetVisible] = (0, react_1.useState)(false);
+    const overlayDOMRef = (0, react_1.useRef)(null);
+    const getProps = (0, useLatest_1.useLatest)(props);
+    const computedCSSVars = (0, AdaptableComputedCSSVarsContext_1.useAdaptableComputedCSSVars)();
+    const [treeExpandState, setTreeExpandState] = (0, react_1.useState)(undefined);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const labelField = props.labelField ?? 'label';
+    const columns = (0, react_1.useMemo)(() => {
+        return {
+            label: getLabelColumn(labelField),
+        };
+    }, [labelField]);
+    const [stateValue, setStateValue] = (0, react_1.useState)(props.value !== undefined ? props.value : props.defaultValue || []);
+    const onChange = (0, react_1.useCallback)((value) => {
+        const paths = value instanceof InfiniteTable_1.TreeSelectionState
+            ? value.getState().selectedPaths
+            : value.selectedPaths || [];
+        if (props.value === undefined) {
+            setStateValue(paths);
+        }
+        props.onChange?.(paths);
+    }, [props.onChange, props.value]);
+    const value = props.value !== undefined ? props.value : stateValue;
+    const treeSelection = (0, react_1.useMemo)(() => {
+        const selection = {
+            defaultSelection: false,
+            selectedPaths: value,
+        };
+        return selection;
+    }, [value]);
+    const rowCount = (0, react_1.useMemo)(() => {
+        return getRowCount(props.options);
+    }, [props.options]);
+    const [size, setSize] = (0, react_1.useState)({
+        width: 0,
+        height: rowCount * 35,
+    });
+    const setHeight = (0, react_1.useCallback)((height) => {
+        setSize((s) => {
+            return {
+                ...s,
+                height,
+            };
+        });
+    }, []);
+    const setWidth = (0, react_1.useCallback)((width) => {
+        setSize((s) => {
+            return {
+                ...s,
+                width,
+            };
+        });
+    }, []);
+    const getSize = (0, useLatest_1.useLatest)(size);
+    (0, react_1.useEffect)(() => {
+        if (!getSize().height) {
+            setHeight(rowCount * 35);
+        }
+    }, [rowCount]);
+    const setVisible = (visible) => {
+        if (visible) {
+            const { onMenuOpen } = getProps();
+            if (onMenuOpen) {
+                onMenuOpen();
+            }
+            requestAnimationFrame(() => {
+                doSetVisible(visible);
+            });
+        }
+        else {
+            const { onMenuClose } = getProps();
+            if (onMenuClose) {
+                onMenuClose();
+            }
+            doSetVisible(visible);
+        }
+    };
+    const [treeListApi, setTreeListApi] = (0, react_1.useState)(null);
+    const { listSizeConstraints } = props;
+    const nodeMatches = (0, react_1.useCallback)(({ data }) => {
+        return !searchValue
+            ? data
+            : `${data[labelField]}`.toLowerCase().includes(searchValue.toLowerCase());
+    }, [searchValue]);
+    const filterFunction = (0, react_1.useCallback)(({ data, filterTreeNode }) => {
+        if (!Array.isArray(data.children)) {
+            return nodeMatches({ data });
+        }
+        // allow non-leaf nodes to match
+        if (nodeMatches({ data })) {
+            return data;
+        }
+        return filterTreeNode(data);
+    }, [nodeMatches]);
+    return (React.createElement(rebass_1.Flex, { flexDirection: 'row', className: "ab-TreeDropdown", style: {
+            width: '100%',
+            ...props.style,
+        }, onMouseDown: props.onMouseDown, onBlur: (e) => {
+            const { relatedTarget } = e;
+            const overlayDOMNode = overlayDOMRef.current;
+            if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
+                overlayDOMNode?.contains(relatedTarget)) {
+                return;
+            }
+            setVisible(false);
+        } },
+        React.createElement(NotifyResize_1.default, { onResize: (newSize) => {
+                setWidth(newSize.width);
+            } }),
+        React.createElement(OverlayTrigger_1.default, { visible: visible, targetOffset: 20, render: () => {
+                const minWidth = listSizeConstraints?.minWidth ||
+                    computedCSSVars['--ab-cmp-select-menu__min-width'] ||
+                    240;
+                const maxWidth = listSizeConstraints?.maxWidth ||
+                    computedCSSVars['--ab-cmp-select-menu__max-width'] ||
+                    '60vw';
+                const minHeight = listSizeConstraints?.minHeight || 200;
+                const maxHeight = listSizeConstraints?.maxHeight ||
+                    computedCSSVars['--ab-cmp-select-menu__max-height'] ||
+                    '50vh';
+                const resizable = getProps().resizable;
+                const treeList = (React.createElement(TreeList_1.TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 40, onReady: ({ api }) => {
+                        setTreeListApi(api);
+                        api.focus();
+                    }, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: (0, InfiniteTable_1.withSelectedLeafNodesOnly)(onChange), style: resizable
+                        ? sizeFull
+                        : {
+                            width: size.width,
+                            height: size.height,
+                            maxWidth,
+                            minHeight,
+                            maxHeight,
+                            minWidth,
+                        } }));
+                let children = (React.createElement(rebass_1.Flex, { flexDirection: 'column', height: '100%' },
+                    React.createElement(rebass_1.Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
+                        React.createElement(Input_1.default, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
+                    treeList));
+                if (resizable) {
+                    const onResizeStop = (_e, _direction, ref) => {
+                        const newSize = {
+                            width: ref.style.width,
+                            height: ref.style.height,
+                        };
+                        setSize(newSize);
+                    };
+                    children = (React.createElement(re_resizable_1.Resizable, { enable: resizableDirections, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight, defaultSize: size, onResizeStop: onResizeStop, onResizeStart: (e) => {
+                            // in order to prevent focus from being lost
+                            e.preventDefault();
+                        } }, children));
+                }
+                return (React.createElement(rebass_1.Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container" }, children));
+            } },
+            React.createElement(FieldWrap_1.default, { style: { width: '100%', ...props.fieldStyle } },
+                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', style: {
+                        width: '100%',
+                    }, pr: props.clearable ? 0 : undefined, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+                        if (!visible) {
+                            setVisible(true);
+                        }
+                        treeListApi?.focus();
+                    } }),
+                props.clearable && (React.createElement(SimpleButton_1.default, { style: {
+                        visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
+                    }, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
+}
+exports.TreeDropdown = TreeDropdown;

package/src/components/Tree/TreeList/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { DataSourcePropOnTreeSelectionChange_MultiNode, InfiniteTableProps, TreeDataSourceProps } from '../../InfiniteTable';
+export type TreeListItem<T = any> = {
+    id: string | number;
+    label: string;
+    children?: TreeListItem<T>[];
+};
+export type TreeListProps<T extends TreeListItem<T>> = {
+    options: T[];
+    debugId?: string;
+    primaryKey?: keyof T;
+    domProps?: InfiniteTableProps<T>['domProps'];
+    style?: React.CSSProperties;
+    rowHeight?: number | string;
+    treeSelection?: TreeDataSourceProps<T>['treeSelection'];
+    defaultTreeSelection?: TreeDataSourceProps<T>['defaultTreeSelection'];
+    onTreeSelectionChange?: DataSourcePropOnTreeSelectionChange_MultiNode;
+    defaultTreeExpandState?: TreeDataSourceProps<T>['defaultTreeExpandState'];
+    onTreeExpandStateChange?: TreeDataSourceProps<T>['onTreeExpandStateChange'];
+    columns?: InfiniteTableProps<T>['columns'];
+    columnHeaderHeight?: number | string;
+    onReady?: InfiniteTableProps<T>['onReady'];
+    treeFilterFunction?: TreeDataSourceProps<T>['treeFilterFunction'];
+};
+export declare function TreeList<T extends TreeListItem<T>>(props: TreeListProps<T>): React.JSX.Element;

package/src/components/Tree/TreeList/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeList = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InfiniteTable_1 = require("../../InfiniteTable");
+const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../../../../../adaptable-react-aggrid/src/utils/join"));
+const columns = {
+    label: {
+        field: 'label',
+        header: 'Label',
+        defaultFlex: 1,
+        renderTreeIcon: true,
+        renderSelectionCheckBox: true,
+        defaultSortable: false,
+    },
+};
+const domProps = {
+    style: {
+        height: '100%',
+        flex: 1,
+    },
+    className: 'ab-TreeList',
+};
+const DEFAULT_TREE_EXPAND_STATE = {
+    expandedPaths: [],
+    defaultExpanded: false,
+};
+function TreeList(props) {
+    return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: 'column', className: "ab-TreeList", style: props.style },
+        React.createElement(InfiniteTable_1.TreeDataSource, { data: props.options, primaryKey: props.primaryKey ?? 'id', defaultTreeSelection: props.defaultTreeSelection, treeSelection: props.treeSelection, onTreeSelectionChange: props.onTreeSelectionChange, treeFilterFunction: props.treeFilterFunction, onTreeExpandStateChange: props.onTreeExpandStateChange, defaultTreeExpandState: props.defaultTreeExpandState ?? DEFAULT_TREE_EXPAND_STATE },
+            React.createElement(InfiniteTable_1.TreeGrid, { defaultActiveRowIndex: 0, onReady: props.onReady, debugId: props.debugId, keyboardSelection: true, rowHeight: props.rowHeight ?? '--ab-grid-row-height', keyboardNavigation: "row", columnHeaderHeight: props.columnHeaderHeight, domProps: {
+                    ...domProps,
+                    ...props.domProps,
+                    className: (0, join_1.default)(domProps.className, props.domProps?.className),
+                    style: { ...domProps.style, ...props.domProps?.style },
+                }, columns: props.columns ?? columns, showZebraRows: false }))));
+}
+exports.TreeList = TreeList;

package/src/devTools/DevToolsTracks.d.ts

@@ -0,0 +1,31 @@
+export declare const DevToolsTracks: {
+    readonly Init: {
+        readonly track: "Initialisation";
+        readonly labels: {
+            readonly Init: "Init";
+            readonly InitStore: "Init store";
+            readonly LoadStore: "Loading store";
+            readonly InitAGGrid: "AG Grid init";
+        };
+    };
+    readonly LayoutManager: {
+        readonly track: "Layout Manager";
+        readonly labels: {
+            readonly SetLayout: "Setting layout";
+            readonly ApplyPivotLayout: "Apply pivot layout";
+            readonly ApplyTableLayout: "Apply table layout";
+        };
+    };
+    readonly Runtime: {
+        readonly track: "Runtime";
+        readonly labels: {
+            readonly SetLayout: "Setting layout";
+        };
+    };
+    readonly Redux: {
+        readonly track: "Redux";
+        readonly labels: {
+            readonly Action: "Action";
+        };
+    };
+};

package/src/devTools/DevToolsTracks.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevToolsTracks = void 0;
+exports.DevToolsTracks = {
+    Init: {
+        track: 'Initialisation',
+        labels: {
+            Init: 'Init',
+            InitStore: 'Init store',
+            LoadStore: 'Loading store',
+            InitAGGrid: 'AG Grid init',
+        },
+    },
+    LayoutManager: {
+        track: 'Layout Manager',
+        labels: {
+            SetLayout: 'Setting layout',
+            ApplyPivotLayout: 'Apply pivot layout',
+            ApplyTableLayout: 'Apply table layout',
+        },
+    },
+    Runtime: {
+        track: 'Runtime',
+        labels: {
+            SetLayout: 'Setting layout',
+        },
+    },
+    Redux: {
+        track: 'Redux',
+        labels: {
+            Action: 'Action',
+        },
+    },
+};