@adaptabletools/adaptable 20.0.0-canary.22 → 20.0.0-canary.24

package/src/agGrid/AgGridColumnAdapter.js

@@ -3,7 +3,7 @@ import { FilterWrapperFactory } from './FilterWrapper';
 import { FloatingFilterWrapperFactory } from './FloatingFilterWrapper';
 import { convertAdaptableStyleToCSS, getVariableColor, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../PredefinedConfig/Common/AdaptableColumn';
+import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import tinycolor from 'tinycolor2';
 import UIHelper from '../View/UIHelper';
 import { getPercentBarRendererForColumn } from './cellRenderers/PercentBarRenderer';
@@ -135,7 +135,7 @@ export class AgGridColumnAdapter {
             this.setupColumnComparator(colSetupInfo);
             this.setupColumnCellEditor(colSetupInfo);
             this.setupColumnHeader(colSetupInfo);
-            this.setupColumnQuickFilerText(colSetupInfo);
+            this.setupColumnQuickFilterText(colSetupInfo);
             this.setupColumnAllowedAggFuncs(colSetupInfo);
             this.setupColumnType(colSetupInfo);
             this.setupColumnCellDataType(colSetupInfo);
@@ -157,7 +157,7 @@ export class AgGridColumnAdapter {
                 if (!gridCell.column) {
                     return null;
                 }
-                // if a Visual Data export is in progress, we are interested only in the Excel Style Class
+                // if a VisualExcel report format export is in progress, we are interested only in the Excel Style Class
                 if (this.adaptableApi.exportApi.internalApi.isVisualDataExportInProgress()) {
                     const userDefinedCellClass = typeof userCellClass === 'function' ? userCellClass(params) : userCellClass;
                     const cellClassKey = AgGridExportAdapter.getExcelClassNameForCell(colId, gridCell.primaryKeyValue, userDefinedCellClass);
@@ -325,7 +325,7 @@ export class AgGridColumnAdapter {
             }
         });
     }
-    setupColumnQuickFilerText({ col, abColumn }) {
+    setupColumnQuickFilterText({ col, abColumn }) {
         this.setColDefProperty(col, 'getQuickFilterText', (userGetQuickFilterText) => {
             if (userGetQuickFilterText) {
                 return userGetQuickFilterText;

package/src/agGrid/AgGridExportAdapter.d.ts

@@ -1,8 +1,8 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { Report, ReportFormatType } from '../PredefinedConfig/ExportState';
+import { Report, ReportFormatType } from '../AdaptableState/ExportState';
 import { CsvExportParams, ExcelExportParams, ExcelStyle } from 'ag-grid-enterprise';
 import { ExportDestinationType, ExportResultData } from '../AdaptableOptions/ExportOptions';
-import { Layout } from '../PredefinedConfig/LayoutState';
+import { Layout } from '../AdaptableState/LayoutState';
 export interface ExportConfig {
     report: Report;
     format: ReportFormatType;

package/src/agGrid/AgGridExportAdapter.js

@@ -4,7 +4,7 @@ import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from
 import { DateFormatter } from '../Utilities/Helpers/FormatHelper';
 import tinycolor from 'tinycolor2';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import { createUuid } from '../PredefinedConfig/Uuid';
+import { createUuid } from '../AdaptableState/Uuid';
 import { inferSchema, initParser } from 'udsv';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 export class AgGridExportAdapter {

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,7 +1,7 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
-import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
+import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
+import { AdaptableMenuItem } from '../AdaptableState/Common/Menu';
 export declare class AgGridMenuAdapter {
     private _adaptableInstance;
     constructor(_adaptableInstance: AdaptableAgGrid);

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -1,6 +1,6 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { AgGridThemeMode } from './AgGridAdapter';
-import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
+import { AdaptableTheme } from '../AdaptableState/ThemeState';
 export declare class AgGridThemeAdapter {
     private _adaptableInstance;
     private agGridThemeMode;

package/src/agGrid/FilterWrapper.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { forwardRef, useImperativeHandle, useState } from 'react';
 import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
 import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 export const FilterWrapperFactory = (adaptable) => {
@@ -9,9 +8,7 @@ export const FilterWrapperFactory = (adaptable) => {
             return false;
         }
         //make the small filter icon to appear when there is a filter
-        return (adaptable.api.filterApi.columnFilterApi
-            .getColumnFilters()
-            .findIndex((x) => x.ColumnId == colId) > -1);
+        return adaptable.api.filterApi.columnFilterApi.isColumnFilterActiveForColumn(colId);
     }
     function getFilterProps(colId, hidePopup) {
         let column = adaptable.api.columnApi.getColumnWithColumnId(colId);
@@ -26,35 +23,62 @@ export const FilterWrapperFactory = (adaptable) => {
         return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
     }
     if (adaptable.variant === 'react') {
-        return forwardRef(function ReactFilterWrapper(props, ref) {
-            const [filterProps, setFilterProps] = useState(null);
-            const colId = props.column.getId();
-            const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
-            const afterGuidAttached = React.useCallback((params) => {
-                const hidePopup = params?.hidePopup ?? null;
-                const filterProps = getFilterProps(colId, !!hidePopup);
-                setFilterProps(filterProps);
-            }, [colId]);
-            React.useEffect(() => {
-                afterGuidAttached();
-            }, []);
-            useImperativeHandle(ref, () => {
-                return {
-                    isFilterActive: () => isFilterActive(colId),
-                    // left here for backward compatibility
-                    afterGuidAttached,
-                    getModel: () => { },
-                    setModel: () => { },
-                    //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
-                    doesFilterPass: () => true,
-                };
-            });
-            if (!column || !filterProps) {
-                return null;
-            }
-            return renderWithAdaptableContext(React.createElement("div", { id: getContainerId(colId) },
-                React.createElement(AdaptableColumnFilter, { wrapperProps: { p: 2 }, columnId: filterProps.Column.columnId })), adaptable);
-        });
+        // We used to have the implementation below. However, for updating the filtered/not filtered state of the column
+        // we have to call the onModelChange function, and also provide the doesFilterPass function.
+        // starting with version 33 of AG Grid, the doesFilterPass has to be passed to the `useGridFilter` hook
+        // which needs to be imported from 'ag-grid-react' - see https://www.ag-grid.com/react-data-grid/component-filter/#implementing-a-filter-component
+        // but since Adaptable cannot depend on 'ag-grid-react' directly, we can't use a React component anymore
+        // so we simply return the same implementation as the vanilla version
+        // and comment out the implementation below
+        //
+        // return forwardRef(function ReactFilterWrapper(
+        //   props: {
+        //     column: Column;
+        //     onModelChange: (model: any) => void;
+        //   },
+        //   ref
+        // ) {
+        //   const [filterProps, setFilterProps] = useState<ColumnFilterProps | null>(null);
+        //   const colId = props.column.getId();
+        //   const column: AdaptableColumn | undefined =
+        //     adaptable.api.columnApi.getColumnWithColumnId(colId);
+        //   const afterGuidAttached = React.useCallback(
+        //     (params?: { hidePopup?: Function }) => {
+        //       const hidePopup = params?.hidePopup ?? null;
+        //       const filterProps = getFilterProps(colId, !!hidePopup);
+        //       setFilterProps(filterProps);
+        //     },
+        //     [colId]
+        //   );
+        //   const notifyModel = getNotifyModel(colId, props.onModelChange);
+        //   React.useEffect(() => {
+        //     afterGuidAttached();
+        //   }, []);
+        //   useImperativeHandle(ref, () => {
+        //     return {
+        //       isFilterActive: () => isFilterActive(colId),
+        //       // left here for backward compatibility
+        //       afterGuidAttached,
+        //       // getModel: () => {},
+        //       // setModel: () => {},
+        //       //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
+        //       doesFilterPass: () => true,
+        //     };
+        //   });
+        //   if (!column || !filterProps) {
+        //     return null;
+        //   }
+        //   return renderWithAdaptableContext(
+        //     <div id={getContainerId(colId)}>
+        //       <AdaptableColumnFilter
+        //         wrapperProps={{ p: 2 }}
+        //         columnId={filterProps.Column.columnId}
+        //         onChange={notifyModel}
+        //       />
+        //     </div>,
+        //     adaptable
+        //   );
+        // });
     }
     return class FilterWrapper {
         init(params) {
@@ -82,11 +106,16 @@ export const FilterWrapperFactory = (adaptable) => {
         afterGuiAttached(params) {
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
             this.unmountReactRoot?.();
-            let column = adaptable.api.columnApi.getColumnWithColumnId(this.column.getColId());
+            const columnId = this.column.getColId();
+            let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+            // for whatever reason, it works without this
+            // const notifyModel = getNotifyModel(colId, this.params.filterChangedCallback);
             if (column) {
                 this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
-                    columnId: this.column.getColId(),
+                    columnId,
                     wrapperProps: { p: 2 },
+                    // for whatever reason, it works without this
+                    // onChange: notifyModel,
                 }), adaptable), 
                 // AdaptableColumnFilter(filterProps),
                 this.filterContainer);

package/src/agGrid/FloatingFilterWrapper.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle } from 'react';
 import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 import { AdaptableFloatingFilter } from '../View/Components/ColumnFilter/AdaptableFloatingFilter';
+import { getAgGridFilterNotifyModelFn } from './getAgGridFilterNotifyModelFn';
 const filterContainerStyle = {
     overflow: 'hidden',
     minWidth: '0',
@@ -24,6 +25,9 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
         };
         return columnFilterProps;
     }
+    function getNotifyModel(colId, onModelChange) {
+        return getAgGridFilterNotifyModelFn(adaptableApi, colId, onModelChange);
+    }
     function patchParentElement(filterContainer) {
         if (filterContainer) {
             // todo: consider theme
@@ -54,17 +58,19 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
     if (adaptable.variant === 'react') {
         return forwardRef(function ReactFloatingFilterWrapper(props, ref) {
             const colId = props.column.getId();
+            const { onModelChange } = props;
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             useImperativeHandle(ref, () => {
                 return {
                     onParentModelChanged() { },
                 };
             });
+            const notifyModel = getNotifyModel(colId, onModelChange);
             if (!column) {
                 return null;
             }
             return renderWithAdaptableContext(React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle },
-                React.createElement(AdaptableFloatingFilter, { ...getFilterProps(colId) })), adaptable);
+                React.createElement(AdaptableFloatingFilter, { ...getFilterProps(colId), onChange: notifyModel, onClear: notifyModel })), adaptable);
         });
     }
     return class FloatingFilterWrapper {
@@ -82,10 +88,15 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
                 //@ts-ignore
                 this.filterContainer.style[key] = filterContainerStyle[key];
             });
+            const notifyModel = getNotifyModel(colId, params.filterParams.filterChangedCallback);
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             if (column) {
                 const filterProps = getFilterProps(colId);
-                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, filterProps), adaptable), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, {
+                    ...filterProps,
+                    onChange: notifyModel,
+                    onClear: notifyModel,
+                }), adaptable), this.filterContainer);
             }
         }
         getGui() {

package/src/agGrid/agGridDataTypeDefinitions.d.ts

@@ -1,5 +1,5 @@
 import { GridOptions } from 'ag-grid-enterprise';
-import { AdaptableColumnDataType } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumnDataType } from '../AdaptableState/Common/AdaptableColumn';
 export declare const TEXT_ARRAY_DATA_TYPE: AdaptableColumnDataType;
 export declare const NUMBER_ARRAY_DATA_TYPE: AdaptableColumnDataType;
 export declare const TUPLE_ARRAY_DATA_TYPE: AdaptableColumnDataType;

package/src/agGrid/cellRenderers/BadgeRenderer.d.ts

@@ -1,4 +1,4 @@
-import { BadgeStyle } from '../../PredefinedConfig/StyledColumnState';
+import { BadgeStyle } from '../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
 export declare const getBadgeRendererForColumn: (badgeStyle: BadgeStyle, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/cellRenderers/PercentBarRenderer.d.ts

@@ -1,4 +1,4 @@
-import { StyledColumn } from '../../PredefinedConfig/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
 export declare const getPercentBarRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/getAgGridFilterNotifyModelFn.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableApi } from '../types';
+export declare function getAgGridFilterNotifyModelFn(adaptableApi: AdaptableApi, colId: string, onModelChange: (model: any) => void): () => void;

package/src/agGrid/getAgGridFilterNotifyModelFn.js

@@ -0,0 +1,10 @@
+export function getAgGridFilterNotifyModelFn(adaptableApi, colId, onModelChange) {
+    const notifyModel = () => {
+        const isActive = adaptableApi.filterApi.columnFilterApi.isColumnFilterActiveForColumn(colId);
+        // call it with non null to indicate that the filter is active
+        // call it with null to indicate that the filter is not active
+        // as per the AG Grid documentation
+        onModelChange(isActive ? true : null);
+    };
+    return notifyModel;
+}

package/src/components/AdaptableFormComponent/AdaptableFormComponent.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { AdaptableFormData, AdaptableForm } from '../../PredefinedConfig/Common/AdaptableForm';
+import { AdaptableFormData, AdaptableForm } from '../../AdaptableState/Common/AdaptableForm';
 import { SimpleButtonProps } from '../SimpleButton';
 import { BaseContext } from '../../types';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
+import { AdaptableButton } from '../../AdaptableState/Common/AdaptableButton';
 interface AdaptableFormComponentProps {
     formDef: AdaptableForm<BaseContext>;
     data: AdaptableFormData;

package/src/components/Dashboard/DashboardManager.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DashboardTab } from '../../PredefinedConfig/DashboardState';
-import { AdaptableDashboardToolbar } from '../../PredefinedConfig/Common/Types';
+import { DashboardTab } from '../../AdaptableState/DashboardState';
+import { AdaptableDashboardToolbar } from '../../AdaptableState/Common/Types';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 export interface DashboardToolbar {
     Id: AdaptableDashboardToolbar | string;

package/src/components/Dashboard/DashboardToolbar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
 export type DashboardToolbarProps = {
     className?: string;
     title: string;

package/src/components/ExpressionEditor/EditorInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
+import { AdaptableModule } from '../../AdaptableState/Common/Types';
 interface EditorInputProps {
     type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
     module: AdaptableModule;

package/src/components/ExpressionEditor/EditorInputWithWhereClause.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
+import { AdaptableModule } from '../../AdaptableState/Common/Types';
 interface EditorInputWithWhereClauseProps {
     type: 'observable' | 'aggregatedBoolean';
     module: AdaptableModule;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableElementIcon, AdaptableCustomIcon, AdaptableIcon, AdaptableSystemIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableElementIcon, AdaptableCustomIcon, AdaptableIcon, AdaptableSystemIcon } from '../../AdaptableState/Common/AdaptableIcon';
 export interface IconComponentProps {
     icon: AdaptableIcon;
     iconClassName?: string;

package/src/components/Select/Select.js

@@ -198,20 +198,36 @@ export const Select = function (props) {
             const { setValue, getValue, focusedOption, options, selectProps } = props;
             const { filterOption, inputValue, options: selectOptions, isLoading } = selectProps;
             const filterFunction = React.useCallback(({ data }) => filterOption({ data, label: `${data.label}`, value: data.value }, inputValue), [filterOption, inputValue]);
+            const hasFilter = inputValue !== '';
+            const filteredOptionsValues = new Set();
+            const filteredOptions = !hasFilter
+                ? options
+                : options.filter((data) => {
+                    const included = filterOption({ data, label: `${data.label}`, value: data.value }, inputValue);
+                    if (included) {
+                        filteredOptionsValues.add(data.value);
+                    }
+                    return included;
+                });
             const focusedOptionIndex = options
                 .filter((option) => filterFunction({ data: option }))
                 .indexOf(focusedOption);
+            const valueStr = getValue()
+                .map((option) => option.value)
+                .join(',');
             const selectedRows = useMemo(() => {
                 const selectedRows = [];
+                // we build the Infinite Table selection
                 getValue().forEach((option) => {
-                    selectedRows.push(option.value);
+                    // if there are no filters, include everything that is in the value
+                    // but if there is a filter (which will be smaller than the current value)
+                    // only include the current options that match the filter
+                    if (!hasFilter || filteredOptionsValues.has(option.value)) {
+                        selectedRows.push(option.value);
+                    }
                 });
                 return selectedRows;
-            }, [
-                getValue()
-                    .map((option) => option.value)
-                    .join(','),
-            ]);
+            }, [valueStr, inputValue, hasFilter]);
             const rowSelection = React.useMemo(() => {
                 return isMulti
                     ? {
@@ -224,24 +240,74 @@ export const Select = function (props) {
             const onRowSelectionChange = React.useCallback((selectionParams) => {
                 let selection = [];
                 const { selectedRows, defaultSelection, deselectedRows } = selectionParams;
-                if (defaultSelection === true && deselectedRows.length === 0) {
-                    // all selected
-                    selection = options.map((option) => {
-                        return { value: option.value };
-                    });
-                }
-                else if (defaultSelection === false && selectedRows.length === 0) {
-                    // none selected
-                    selection = [];
+                if (hasFilter) {
+                    if (defaultSelection === true && deselectedRows.length === 0) {
+                        // all selected
+                        const currentValue = getValue();
+                        const includedKeys = new Set();
+                        // add all the options that are in the current value
+                        selection = currentValue.map((option) => {
+                            includedKeys.add(option.value);
+                            return option;
+                        });
+                        // also add all the options that match the filter
+                        filteredOptions.forEach((option) => {
+                            // make sure you don't add the same option twice
+                            if (!includedKeys.has(option.value)) {
+                                selection.push({ value: option.value });
+                            }
+                        });
+                    }
+                    else if (defaultSelection === false && selectedRows.length === 0) {
+                        // we need to clear the selection
+                        // but we have a filter, so we need to clear only those options that are included in the filter
+                        // and leave the rest
+                        const currentValue = getValue();
+                        selection = currentValue.filter((row) => !filteredOptionsValues.has(row.value));
+                    }
+                    else {
+                        // some selected
+                        const currentValue = getValue();
+                        const includedKeys = new Set();
+                        // start with an empty selection
+                        selection = [];
+                        // add those in the value that are not in the filter
+                        selection = currentValue.filter((row) => {
+                            const res = !filteredOptionsValues.has(row.value);
+                            if (res) {
+                                includedKeys.add(row.value);
+                            }
+                            return res;
+                        });
+                        // and now also add those in the filter that are actually selected
+                        selectedRows.forEach((row) => {
+                            if (!includedKeys.has(row)) {
+                                selection.push({ value: row });
+                            }
+                        });
+                    }
                 }
                 else {
-                    selection = selectedRows.map((row) => {
-                        return { value: row };
-                    });
+                    if (defaultSelection === true && deselectedRows.length === 0) {
+                        // all selected
+                        selection = options.map((option) => {
+                            return { value: option.value };
+                        });
+                    }
+                    else if (defaultSelection === false && selectedRows.length === 0) {
+                        // none selected
+                        selection = [];
+                    }
+                    else {
+                        // some selected
+                        selection = selectedRows.map((row) => {
+                            return { value: row };
+                        });
+                    }
                 }
                 //@ts-ignore
                 setValue(selection, 'select-option');
-            }, [setValue]);
+            }, [setValue, filterOption, inputValue, hasFilter, filteredOptions, rowSelection, valueStr]);
             const onSingleRowSelectionChange = React.useCallback((value) => {
                 if (value == undefined && rowSelection != undefined) {
                     return;
@@ -259,9 +325,11 @@ export const Select = function (props) {
             }, []);
             return (React.createElement(DataSource, { 
                 // @ts-ignore
-                data: props.options, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
+                // data={props.options}
+                // @ts-ignore
+                data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
-                onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, filterFunction: filterFunction, isRowDisabled: isRowDisabled },
+                onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, isRowDisabled: isRowDisabled },
                 React.createElement(InfiniteTable, { header: isMulti && showHeaderSelectionCheckbox ? true : false, rowClassName: rowClassName, showZebraRows: false, onCellClick: isLoading ? null : onCellClick, keyboardNavigation: isLoading ? false : 'row', activeRowIndex: focusedOptionIndex, keyboardSelection: true, rowHeight: ROW_HEIGHT, columns: isMulti ? INFINITE_COLUMNS_WITH_CHECKBOX : INFINITE_COLUMNS_WITH_RADIO, domProps: INFINITE_DOM_PROPS })));
         };
     }, [isMulti, showHeaderSelectionCheckbox]);
@@ -284,7 +352,12 @@ export const Select = function (props) {
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {
-                props.onChange(option.map((x) => x?.value));
+                const value = option.map((x) => x?.value);
+                props.onChange(value);
+                // ensure element keeps focus
+                requestAnimationFrame(() => {
+                    ref.current?.focus();
+                });
             }
             else {
                 props.onChange(option?.value);

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ButtonProps } from 'rebass';
 import { ReactNode } from 'react';
-import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
-import { AdaptableIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
+import { AdaptableIcon } from '../../AdaptableState/Common/AdaptableIcon';
 export declare const baseClassName = "ab-SimpleButton";
 export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
     tooltip?: string;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
 import IconProps from './DefaultIcon';
-import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../AdaptableState/Common/AdaptableIcon';
 export declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
 type IconProps = {
     style?: React.CSSProperties;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1742409282792 || Date.now(),
-    VERSION: "20.0.0-canary.22" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1742562389225 || Date.now(),
+    VERSION: "20.0.0-canary.24" || '--current-version--',
 };

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

@@ -1525,6 +1525,17 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    BaseState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        }[];
+    };
     BroadcastConfig: {
         name: string;
         kind: string;
@@ -2106,17 +2117,6 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
-    ConfigState: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-        }[];
-    };
     ContainerOptions: {
         name: string;
         kind: string;
@@ -3807,6 +3807,24 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    InitialState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            ref: string;
+            isOpt?: undefined;
+        })[];
+    };
     InteropioPluginOptions: {
         name: string;
         kind: string;