@adaptabletools/adaptable 21.0.11 → 21.1.0-canary.0

package/src/agGrid/AgGridAdapter.js

@@ -8,6 +8,7 @@ import { agGridDataTypeDefinitions, ALL_ADAPTABLE_DATA_TYPES } from './agGridDat
 import { isPivotGrandTotal } from '../Api/Implementation/ColumnApiImpl';
 import { isPivotColumnTotal } from '../layout-manager/src/isPivotColumnTotal';
 import { isPivotAggTotalColumn } from '../layout-manager/src/isPivotAggTotalColumn';
+import { isWeightedAverageAggFuncName } from '../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 = () => ColumnApiModule;
@@ -23,7 +24,7 @@ export 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!');
                 }
@@ -136,7 +137,8 @@ export 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) {
@@ -159,7 +161,8 @@ export 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;
     }
@@ -483,8 +486,10 @@ export 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())) {
@@ -608,9 +613,10 @@ export 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) => !isWeightedAverageAggFuncName(func));
         return [...new Set(result)];
     }
     isTreeColumn(isGeneratedRowGroupColumn) {

package/src/agGrid/AgGridColumnAdapter.js

@@ -17,6 +17,7 @@ import { AdaptableFilterHandler } from './AdaptableFilterHandler';
 import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
 import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 import { errorOnce } from './AdaptableLogger';
+import { isWeightedAverageAggFuncName } from '../AdaptableState/Common/AggregationColumns';
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -516,7 +517,10 @@ export class AgGridColumnAdapter {
     }
     setupColumnAllowedAggFuncs({ col, abColumn }) {
         this.setColDefProperty(col, 'allowedAggFuncs', () => {
-            return abColumn.availableAggregationFunctions;
+            if (!abColumn.availableAggregationFunctions) {
+                return undefined;
+            }
+            return abColumn.availableAggregationFunctions.filter((func) => !isWeightedAverageAggFuncName(func));
         });
     }
     setupColumnType(columnSetupInfo) {
@@ -588,31 +592,33 @@ export 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: AgGridFilterAdapterFactory(this.adaptableInstance),
-                // doesFilterPass,
-                handler: (params) => new AdaptableFilterHandler(this.adaptableApi, columnSetup),
+                handler: () => new AdaptableFilterHandler(this.adaptableApi, columnSetup),
             };
         });
     }
@@ -629,7 +635,7 @@ export 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'
@@ -640,7 +646,7 @@ export class AgGridColumnAdapter {
             });
             this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
                 // hide button for multi column groups
-                return this.adaptableApi.columnApi.isAutoRowGroupColumnForMulti(col.getColId());
+                return true;
             });
             return;
         }
@@ -650,7 +656,7 @@ export class AgGridColumnAdapter {
             }
             return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
         });
-        this.setColDefProperty(col, 'floatingFilter', (original_floatingFilter) => {
+        this.setColDefProperty(col, 'floatingFilter', () => {
             if (isFloatingFilterDisabled) {
                 return;
             }

package/src/components/OverlayTrigger/index.js

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

package/src/components/Select/Select.js

@@ -4,13 +4,14 @@ import ReactSelect, { components, } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
 import { Box, Flex } from 'rebass';
-import { DataSource, InfiniteTable, components as InfiniteTableComponents, } from '@infinite-table/infinite-react';
+import { DataSource, InfiniteTable, } from '@infinite-table/infinite-react';
 import { useCallback, useMemo, useState } from 'react';
 import join from '../utils/join';
 import { Resizable } from 're-resizable';
 import Tooltip from '../Tooltip';
 import { ensurePortalElement } from '../OverlayTrigger';
-import { CSSNumericVariableWatch } from './CSSNumericVariableWatch';
+import { CheckBox } from '../CheckBox';
+import { useAdaptableComputedCSSVars } from '../../View/AdaptableComputedCSSVarsContext';
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -52,15 +53,27 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         renderSelectionCheckBox: (params) => {
             // disable reacting to onChange
             // as we handle selection change in the onCellClick
-            return React.createElement(InfiniteTableComponents.CheckBox, { checked: params.rowInfo?.rowSelected ?? false });
+            return React.createElement(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, { mx: 1, checked: selected, onChange: (selected) => {
+                        if (selected) {
+                            api.rowSelectionApi.selectAll();
+                        }
+                        else {
+                            api.rowSelectionApi.deselectAll();
+                        }
+                    } }, headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)')));
         },
         renderMenuIcon: false,
     },
@@ -102,15 +115,11 @@ const doesOptionMatchValue = function (value) {
 };
 export 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 = 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';
@@ -513,15 +522,6 @@ export const Select = function (props) {
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-width", onChange: (value) => {
-                cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] = value;
-            } }),
-        React.createElement(CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__min-width", onChange: (value) => {
-                cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] = value;
-            } }),
-        React.createElement(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: join(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: 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,250 @@
+import * as React from 'react';
+import FieldWrap from '../../FieldWrap';
+import { TreeList } from '../TreeList';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import OverlayTrigger from '../../OverlayTrigger';
+import { Box, Flex } from 'rebass';
+import NotifyResize from '../../NotifyResize';
+import Input from '../../Input';
+import { TreeSelectionState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
+import SimpleButton from '../../SimpleButton';
+import { CheckBox } from '../../CheckBox';
+import { useLatest } from '../../utils/useLatest';
+import { Resizable } from 're-resizable';
+import { useAdaptableComputedCSSVars } from '../../../View/AdaptableComputedCSSVarsContext';
+const resizableDirections = {
+    right: true,
+    bottom: true,
+    bottomRight: true,
+};
+export function toDisplayValueDefault(value) {
+    if (!Array.isArray(value)) {
+        return `${value}`;
+    }
+    return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
+}
+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, { 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(Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
+                    // so we can keep the focus on the Grid
+                    e.preventDefault();
+                } },
+                React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
+                        if (allRowsSelected) {
+                            dataSourceApi.treeApi.deselectAll();
+                        }
+                        else {
+                            dataSourceApi.treeApi.selectAll();
+                        }
+                        api.focus();
+                    } }),
+                React.createElement(Flex, { flex: 1 }),
+                React.createElement(SimpleButton, { 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);
+}
+export function TreeDropdown(props) {
+    const [visible, doSetVisible] = useState(false);
+    const overlayDOMRef = useRef(null);
+    const getProps = useLatest(props);
+    const computedCSSVars = useAdaptableComputedCSSVars();
+    const [treeExpandState, setTreeExpandState] = useState(undefined);
+    const [searchValue, setSearchValue] = useState('');
+    const labelField = props.labelField ?? 'label';
+    const columns = useMemo(() => {
+        return {
+            label: getLabelColumn(labelField),
+        };
+    }, [labelField]);
+    const [stateValue, setStateValue] = useState(props.value !== undefined ? props.value : props.defaultValue || []);
+    const onChange = useCallback((value) => {
+        const paths = value instanceof 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 = useMemo(() => {
+        const selection = {
+            defaultSelection: false,
+            selectedPaths: value,
+        };
+        return selection;
+    }, [value]);
+    const rowCount = useMemo(() => {
+        return getRowCount(props.options);
+    }, [props.options]);
+    const [size, setSize] = useState({
+        width: 0,
+        height: rowCount * 35,
+    });
+    const setHeight = useCallback((height) => {
+        setSize((s) => {
+            return {
+                ...s,
+                height,
+            };
+        });
+    }, []);
+    const setWidth = useCallback((width) => {
+        setSize((s) => {
+            return {
+                ...s,
+                width,
+            };
+        });
+    }, []);
+    const getSize = useLatest(size);
+    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] = useState(null);
+    const { listSizeConstraints } = props;
+    const nodeMatches = useCallback(({ data }) => {
+        return !searchValue
+            ? data
+            : `${data[labelField]}`.toLowerCase().includes(searchValue.toLowerCase());
+    }, [searchValue]);
+    const filterFunction = 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(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, { onResize: (newSize) => {
+                setWidth(newSize.width);
+            } }),
+        React.createElement(OverlayTrigger, { 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, { 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: withSelectedLeafNodesOnly(onChange), style: resizable
+                        ? sizeFull
+                        : {
+                            width: size.width,
+                            height: size.height,
+                            maxWidth,
+                            minHeight,
+                            maxHeight,
+                            minWidth,
+                        } }));
+                let children = (React.createElement(Flex, { flexDirection: 'column', height: '100%' },
+                    React.createElement(Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
+                        React.createElement(Input, { "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(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(Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container" }, children));
+            } },
+            React.createElement(FieldWrap, { style: { width: '100%', ...props.fieldStyle } },
+                React.createElement(Input, { 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, { style: {
+                        visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
+                    }, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
+}

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,35 @@
+import * as React from 'react';
+import { TreeDataSource, TreeGrid, } from '../../InfiniteTable';
+import { Flex } from 'rebass';
+import join from '../../../../../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,
+};
+export function TreeList(props) {
+    return (React.createElement(Flex, { flex: 1, flexDirection: 'column', className: "ab-TreeList", style: props.style },
+        React.createElement(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(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: join(domProps.className, props.domProps?.className),
+                    style: { ...domProps.style, ...props.domProps?.style },
+                }, columns: props.columns ?? columns, showZebraRows: false }))));
+}

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,31 @@
+export const 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',
+        },
+    },
+};

package/src/devTools/PerfMarker.d.ts

@@ -0,0 +1,12 @@
+export type PerfMarkerDetails = {
+    name: string;
+    value: string | number | boolean;
+}[];
+export interface PerfMarker {
+    start(options?: {
+        details?: PerfMarkerDetails;
+    }): PerfMarker;
+    end(options?: {
+        details?: PerfMarkerDetails;
+    }): PerfMarker;
+}