@adaptabletools/adaptable 20.3.0-canary.2 → 21.0.0-canary.0

package/src/agGrid/{FloatingFilterWrapper.js → AgGridFloatingFilterAdapter.js}

@@ -1,8 +1,6 @@
 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',
@@ -12,7 +10,7 @@ const filterContainerStyle = {
     position: 'relative',
     flex: '1 1 auto',
 };
-export const FloatingFilterWrapperFactory = (adaptable) => {
+export const AgGridFloatingFilterAdapterFactory = (adaptable) => {
     const adaptableApi = adaptable.api;
     function getContainerId(colId) {
         return `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
@@ -26,9 +24,6 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
         };
         return columnFilterProps;
     }
-    function getNotifyModel(colId, onModelChange) {
-        return getAgGridFilterNotifyModelFn(adaptableApi, colId, onModelChange);
-    }
     function findParentWithClass(element, className, stopClasses, applyToAll) {
         let current = element.parentElement;
         while (current) {
@@ -82,55 +77,49 @@ 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), onChange: notifyModel, onClear: notifyModel })), adaptable);
-        });
-    }
-    return class FloatingFilterWrapper {
-        onParentModelChanged(parentModel, filterChangedEvent) {
-            // todo?
-        }
-        afterGuiAttached() {
-            patchParentElement(this.filterContainer);
-        }
+    return class AgGridFloatingFilterAdapter {
         init(params) {
             const colId = params.column.getColId();
+            this.colId = colId;
             this.filterContainer = document.createElement('div');
             this.filterContainer.id = getContainerId(colId);
             Object.keys(filterContainerStyle).forEach((key) => {
                 //@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,
-                    onChange: notifyModel,
-                    onClear: notifyModel,
                 }), adaptable), this.filterContainer);
             }
         }
+        onParentModelChanged(parentModel, filterChangedEvent) {
+            // AFL: this should NOT be required, but AG Grid calls this method
+            // most likely is a bug and will be removed in future versions
+        }
+        afterGuiAttached() {
+            patchParentElement(this.filterContainer);
+        }
         getGui() {
             return this.filterContainer;
         }
+        refresh(params) {
+            // always reuse the current instance
+            // the filte ris refreshed in the underlying React component
+            return true;
+        }
         destroy() {
-            this.unmountReactRoot?.();
+            // Use setTimeout to defer unmounting to next event loop tick
+            // This ensures we're not unmounting during React's rendering phase
+            if (this.unmountReactRoot) {
+                const unmount = this.unmountReactRoot;
+                setTimeout(() => {
+                    unmount();
+                }, 0);
+                this.unmountReactRoot = undefined;
+            }
             this.filterContainer = null;
         }
     };

package/src/agGrid/AgGridModulesAdapter.d.ts

@@ -0,0 +1,15 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { Module, AgModuleName } from 'ag-grid-enterprise';
+export declare const AG_GRID_VERSION: string;
+export declare class AgGridModulesAdapter {
+    private adaptableInstance;
+    private allAgGridModules;
+    constructor(adaptableInstance: AdaptableAgGrid);
+    destroy(): void;
+    private get agGridApi();
+    isAgGridModuleRegistered(moduleName: AgModuleName): boolean;
+    getAgGridRegisteredModules(): Module[];
+    getAgGridRegisteredModuleNames(): AgModuleName[];
+    getMandatoryAgGridModuleNames(): AgModuleName[];
+    private extractAgGridModuleNames;
+}

package/src/agGrid/AgGridModulesAdapter.js

@@ -0,0 +1,66 @@
+import { AllEnterpriseModule } from 'ag-grid-enterprise';
+export const AG_GRID_VERSION = AllEnterpriseModule.version;
+export class AgGridModulesAdapter {
+    constructor(adaptableInstance) {
+        this.adaptableInstance = adaptableInstance;
+        this.allAgGridModules = new Set();
+        this.allAgGridModules = this.extractAgGridModuleNames(AllEnterpriseModule);
+    }
+    destroy() {
+        this.adaptableInstance = null;
+        this.allAgGridModules.clear();
+        this.allAgGridModules = null;
+    }
+    get agGridApi() {
+        return this.adaptableInstance.agGridAdapter.getAgGridApi();
+    }
+    isAgGridModuleRegistered(moduleName) {
+        return this.agGridApi.isModuleRegistered(moduleName);
+    }
+    getAgGridRegisteredModules() {
+        const registeredModules = [];
+        this.allAgGridModules.forEach((module) => {
+            const agModuleName = `${module.moduleName}Module`;
+            if (this.isAgGridModuleRegistered(agModuleName)) {
+                registeredModules.push(module);
+            }
+        });
+        return registeredModules;
+    }
+    getAgGridRegisteredModuleNames() {
+        return this.getAgGridRegisteredModules().map((module) => {
+            const agModuleName = `${module.moduleName}Module`;
+            return agModuleName;
+        });
+    }
+    getMandatoryAgGridModuleNames() {
+        const mandatoryModules = [];
+        const rowModelType = this.agGridApi.getGridOption('rowModelType');
+        switch (rowModelType) {
+            case 'serverSide':
+                mandatoryModules.push('ServerSideRowModelModule');
+                mandatoryModules.push('ServerSideRowModelApiModule');
+                break;
+            case 'infinite':
+                mandatoryModules.push('InfiniteRowModelModule');
+                break;
+            default:
+                mandatoryModules.push('ClientSideRowModelModule');
+                mandatoryModules.push('ClientSideRowModelApiModule');
+        }
+        mandatoryModules.push('CellApiModule', 'CellStyleModule', 'ColumnApiModule', 'ColumnMenuModule', 'ContextMenuModule', 'CustomFilterModule', 'EventApiModule', 'ExternalFilterModule', 'GridStateModule', 'GroupFilterModule', 'RenderApiModule', 'RowApiModule', 'RowGroupingModule', 'RowStyleModule', 'ScrollApiModule');
+        return mandatoryModules;
+    }
+    extractAgGridModuleNames(module, collectedModules = new Set()) {
+        if (!module || !module.moduleName) {
+            return collectedModules;
+        }
+        collectedModules.add(module);
+        if (module.dependsOn) {
+            module.dependsOn.forEach((dep) => {
+                this.extractAgGridModuleNames(dep, collectedModules);
+            });
+        }
+        return collectedModules;
+    }
+}

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -81,5 +81,5 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
                     focus();
                 }
             } },
-            React.createElement(Icon, { size: 18, name: "close", tabIndex: 0 }))) : null));
+            React.createElement(Icon, { size: 15, name: "close", tabIndex: 0 }))) : null));
 });

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -74,7 +74,7 @@ export const InternalAdaptablePercentageEditor = React.forwardRef(function Inter
                     focus();
                 }
             } },
-            React.createElement(Icon, { size: 18, name: "close", tabIndex: 0 }))) : null,
+            React.createElement(Icon, { size: 15, name: "close", tabIndex: 0 }))) : null,
         React.createElement("div", { style: {
                 position: 'absolute',
                 right: showClear ? 20 : 0,

package/src/components/Dialog/index.js

@@ -95,7 +95,7 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
         return null;
     }
     const closeButton = showCloseButton ? (React.createElement(Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
-        React.createElement(Icon, { size: 24, name: "close" }))) : null;
+        React.createElement(Icon, { size: 20, name: "close" }))) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;

package/src/components/Dropdown/Arrows.js

@@ -12,7 +12,7 @@ const Arrows = () => {
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
         } },
-        React.createElement(Icon, { name: "triangle-up", size: 24, style: { position: 'relative', top: 7 } }),
-        React.createElement(Icon, { name: "triangle-down", size: 24, style: { position: 'relative', top: -7 } })));
+        React.createElement(Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }),
+        React.createElement(Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })));
 };
 export default Arrows;

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

@@ -8,7 +8,7 @@ export declare const PrimitiveColumnOrFieldSelector: (props: {
     onChange: (colId: string) => void;
     hideFields?: boolean;
 }) => React.JSX.Element;
-export declare const PrimiteValueInput: (props: {
+export declare const PrimitiveValueInput: (props: {
     inputType: ExpressionFunctionInputType;
     value: any;
     onChange(value: any): void;

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

@@ -63,7 +63,7 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
             } }),
         input));
 };
-export const PrimiteValueInput = (props) => {
+export const PrimitiveValueInput = (props) => {
     const adaptable = useAdaptable();
     const hasFields = React.useMemo(() => {
         return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
@@ -130,7 +130,7 @@ export const PrimiteValueInput = (props) => {
             } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
+        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }

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

@@ -9,7 +9,7 @@ import DropdownButton from '../../DropdownButton';
 import ErrorBox from '../../ErrorBox';
 import { Icon } from '../../icons';
 import SimpleButton from '../../SimpleButton';
-import { CombinatorSelector, ExpressionSelector, PrimiteValueInput, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
+import { CombinatorSelector, ExpressionSelector, PrimitiveValueInput, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
 import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapExpressionToFieldValue, } from './utils';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
@@ -185,7 +185,7 @@ const PrimitiveFunctionEditor = (props) => {
                                 });
                             } }));
                     }
-                    return (React.createElement(PrimiteValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
+                    return (React.createElement(PrimitiveValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
                             const args = [...props.predicate.args];
                             // +1 because col is the first argument
                             args[index + 1] = value;

package/src/components/FileDroppable/index.js

@@ -35,7 +35,7 @@ export const readJSONFile = async (file, toJSON) => {
     });
 };
 const FileDroppable = (props = {}) => {
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 48 }), value, ...domProps } = props;
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 40 }), value, ...domProps } = props;
     const [state, dispatch] = useReducer(reducer, initialState);
     const onDragEnter = (e) => {
         dispatch({

package/src/components/IconSelector/IconSelector.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
-import { UserInterfaceOptions } from '../../types';
+import { CustomIcon } from '../../types';
 export interface IconSelectorProps {
-    customIcons?: UserInterfaceOptions['customIcons'];
+    customIcons?: CustomIcon[];
     value?: string;
     onChange: (iconName: string) => void;
     clearable?: boolean;

package/src/components/OverlayTrigger/index.js

@@ -40,7 +40,7 @@ const ensurePortalElement = () => {
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
-    portalElement.style.zIndex = '999999';
+    portalElement.style.zIndex = '9999999';
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
     document.body.appendChild(portalElement);

package/src/components/Select/Select.d.ts

@@ -13,7 +13,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     menuPlacement?: 'auto' | 'bottom' | 'top';
     menuStyle?: React.CSSProperties;
     menuMinWidth?: string | number;
-    searchable?: boolean;
+    searchable?: false | 'inline' | 'menulist';
     resizable?: boolean;
     isClearable?: boolean;
     closeMenuOnSelect?: boolean;

package/src/components/Select/Select.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import ReactSelect, { components, } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
-import { Box } from 'rebass';
+import { Box, Flex } from 'rebass';
 import { DataSource, InfiniteTable, components as InfiniteTableComponents, } from '@infinite-table/infinite-react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import join from '../utils/join';
 import { Resizable } from 're-resizable';
+import Tooltip from '../Tooltip';
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -28,6 +29,15 @@ const INFINITE_DOM_PROPS = {
         width: '100%',
     },
 };
+const infiniteContentValueClassName = 'InfiniteCell_content_value';
+const renderValue = ({ renderBag, data, value }) => {
+    if (data.tooltip) {
+        const tooltipNode = typeof data.tooltip === 'string' ? data.tooltip : value;
+        return (React.createElement(Tooltip, { label: tooltipNode },
+            React.createElement("div", { className: infiniteContentValueClassName }, renderBag.value)));
+    }
+    return React.createElement("div", { className: infiniteContentValueClassName }, renderBag.value);
+};
 const INFINITE_COLUMNS_WITH_CHECKBOX = {
     label: {
         field: 'label',
@@ -44,9 +54,7 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         },
         renderHeaderSelectionCheckBox: true,
         className: 'ab-Select-CheckboxColumn',
-        renderValue: ({ renderBag }) => {
-            return React.createElement("div", { className: "InfiniteCell_content_value" }, renderBag.value);
-        },
+        renderValue,
         renderHeader: (headerParams) => {
             return (React.createElement(React.Fragment, null,
                 headerParams.renderBag.selectionCheckBox,
@@ -59,6 +67,7 @@ const INFINITE_COLUMNS_WITH_RADIO = {
     label: {
         field: 'label',
         defaultFlex: 1,
+        renderValue,
     },
 };
 const isRowDisabled = ({ data, }) => {
@@ -91,6 +100,19 @@ const doesOptionMatchValue = function (value) {
 };
 export const Select = function (props) {
     let maxLabelLength = 0;
+    const searchableInMenulist = props.searchable === 'menulist';
+    const searchableInline = props.searchable === 'inline';
+    // relevant for menulist search only
+    const menulistInputRef = React.useRef(null);
+    const [isSelectMenuOpen, setIsSelectMenuOpen] = useState(false);
+    const openSelectMenu = () => {
+        setIsSelectMenuOpen(true);
+        // it's a react-select bug, onMenuOpen is not called with controlled menuIsOpen
+        props.onMenuOpen?.();
+    };
+    const closeSelectMenu = () => {
+        setIsSelectMenuOpen(false);
+    };
     const ref = React.useRef(null);
     const valueToOptionMap = new Map((props.options || []).map((opt) => {
         let label = opt.label;
@@ -153,12 +175,23 @@ export const Select = function (props) {
      * If on each render a new reference is passed, the menu will not open using the keyboard.
      */
     const SelectContainer = React.useMemo(() => {
-        return (inputProps) => {
-            return (React.createElement(components.SelectContainer, { ...inputProps, innerProps: {
+        return (selectContainerProps) => {
+            return (React.createElement(components.SelectContainer, { ...selectContainerProps, innerProps: {
                     // @ts-ignore
                     'data-name': props['data-name'],
                     'data-id': props['data-id'],
-                    ...inputProps.innerProps,
+                    'data-test': props.searchable || false,
+                    ...selectContainerProps.innerProps,
+                    onMouseDown: (e) => {
+                        if (!searchableInMenulist) {
+                            return;
+                        }
+                        if (!isSelectMenuOpen) {
+                            openSelectMenu();
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }
+                    },
                 } }));
         };
     }, []);
@@ -193,10 +226,10 @@ export const Select = function (props) {
     }, [renderMultipleValues, props.placeholder]);
     const sizeRef = React.useRef({ ...defaultResizableSize });
     const MenuComponent = React.useMemo(() => {
-        return (inputProps) => {
-            const { isLoading } = inputProps;
+        return (menuProps) => {
+            const { isLoading } = menuProps;
             const theChildren = (React.createElement(React.Fragment, null,
-                inputProps.children,
+                menuProps.children,
                 React.createElement("div", { style: {
                         display: isLoading ? 'block' : 'none',
                         position: 'absolute',
@@ -212,9 +245,37 @@ export const Select = function (props) {
                 sizeRef.current = newSize;
             }, []);
             return (React.createElement(React.Fragment, null,
-                React.createElement(components.Menu, { ...inputProps, innerProps: {
+                React.createElement(components.Menu, { ...menuProps, innerProps: {
+                        // @ts-ignore
                         'data-name': 'menu-container',
-                        ...inputProps.innerProps,
+                        ...menuProps.innerProps,
+                        onBlur: (e) => {
+                            if (!searchableInMenulist) {
+                                return;
+                            }
+                            const { relatedTarget } = e;
+                            const menuDOMNode = menuProps.innerRef && 'current' in menuProps.innerRef
+                                ? menuProps.innerRef.current
+                                : null;
+                            if ((menuDOMNode && relatedTarget == menuDOMNode) ||
+                                menuDOMNode?.contains(relatedTarget)) {
+                                // ignore the event if the focus is still inside the menu
+                                return;
+                            }
+                            setTimeout(() => {
+                                // wee need to wait for the single value selectio to complete before closing
+                                closeSelectMenu();
+                            }, 100);
+                        },
+                        onMouseDownCapture: (event) => {
+                            if (!searchableInMenulist) {
+                                return;
+                            }
+                            if (props.isMulti) {
+                                // to avoid the menu closing when clicking inside it
+                                event.stopPropagation();
+                            }
+                        },
                     } }, resizable ? (React.createElement(Resizable, { enable: resizableDirections, minWidth: '100%', maxHeight: '60vh', maxWidth: '60vw', defaultSize: sizeRef.current, onResizeStop: onResizeStop }, theChildren)) : (theChildren))));
         };
     }, [resizable]);
@@ -229,6 +290,12 @@ export const Select = function (props) {
         return (props) => {
             const { setValue, getValue, focusedOption, options, selectProps } = props;
             const { filterOption, inputValue, options: selectOptions, isLoading } = selectProps;
+            // Focus the input when MenuList mounts
+            React.useEffect(() => {
+                if (menulistInputRef.current) {
+                    menulistInputRef.current.focus();
+                }
+            }, []);
             const filterFunction = React.useCallback(({ data }) => filterOption({ data, label: `${data.label}`, value: data.value }, inputValue), [filterOption, inputValue]);
             const hasFilter = inputValue !== '';
             const filteredOptionsValues = new Set();
@@ -352,11 +419,13 @@ export const Select = function (props) {
                     const pk = dataSourceApi.getPrimaryKeyByIndex(rowIndex);
                     api.rowSelectionApi.toggleRowSelection(pk);
                 }
-                // see #ensure-select-closes-after-clicking-outside
-                requestAnimationFrame(() => {
-                    ref.current?.focus();
-                });
+                if (searchableInMenulist) {
+                    requestAnimationFrame(() => {
+                        menulistInputRef.current?.focus();
+                    });
+                }
             }, []);
+            const prevInputValueRef = React.useRef('');
             return (React.createElement(DataSource, { 
                 // @ts-ignore
                 // data={props.options}
@@ -364,12 +433,33 @@ export const Select = function (props) {
                 data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
                 onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, isRowDisabled: isRowDisabled },
+                searchableInMenulist && (React.createElement(Flex, { p: 1 },
+                    React.createElement("input", { ref: menulistInputRef, "data-name": "menulist-search-input", style: {
+                            width: '100%',
+                        }, className: 'ab-Select-MenulistSearch ab-Input ab-Input--type-text', autoCorrect: "off", autoComplete: "off", spellCheck: "false", type: "text", value: inputValue, onChange: (e) => {
+                            const currentValue = e.currentTarget.value;
+                            onInputChange(currentValue, {
+                                action: 'input-change',
+                                prevInputValue: prevInputValueRef.current,
+                            });
+                            prevInputValueRef.current = currentValue;
+                        }, onMouseDown: (e) => {
+                            e.stopPropagation();
+                            const inputElement = e.target;
+                            inputElement?.focus?.();
+                        }, onTouchEnd: (e) => {
+                            e.stopPropagation();
+                            const inputElement = e.target;
+                            inputElement?.focus?.();
+                        }, placeholder: "Search..." }))),
                 React.createElement(InfiniteTable, { header: isMulti && showHeaderSelectionCheckbox ? true : false, rowClassName: rowClassName, showZebraRows: false, rowHeight: '--ab-grid-row-height', onCellClick: isLoading ? null : onCellClick, keyboardNavigation: isLoading ? false : 'row', activeRowIndex: focusedOptionIndex, keyboardSelection: true, columns: isMulti ? INFINITE_COLUMNS_WITH_CHECKBOX : INFINITE_COLUMNS_WITH_RADIO, domProps: INFINITE_DOM_PROPS })));
         };
     }, [isMulti, showHeaderSelectionCheckbox]);
     const DropdownIndicator = React.useMemo(() => {
-        return (props) => {
-            return (React.createElement(components.DropdownIndicator, { ...props },
+        return (dropdownIndicatorProps) => {
+            return (React.createElement(components.DropdownIndicator, { ...dropdownIndicatorProps, innerProps: {
+                    ...dropdownIndicatorProps.innerProps,
+                } },
                 React.createElement(Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
         };
     }, []);
@@ -391,20 +481,22 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (React.createElement(SelectComponent, { ref: ref, "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', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+    return (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: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {
                 const value = option.map((x) => x?.value);
                 props.onChange(value);
-                // ensure element keeps focus
-                requestAnimationFrame(() => {
-                    ref.current?.focus();
-                });
             }
             else {
                 props.onChange(option?.value);
             }
+            if (searchableInMenulist) {
+                // ensure element keeps focus
+                requestAnimationFrame(() => {
+                    menulistInputRef.current?.focus();
+                });
+            }
         }, placeholder: props.placeholder, createOptionPosition: 'first', 
         // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
         // we use this:  https://react-select.com/creatable

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

@@ -8,6 +8,5 @@ export type IconProps = {
     style?: React.CSSProperties;
     color?: string;
 };
-export declare const getSize: (size: number) => number;
 declare const _default: ({ children, size, name, tabIndex, color, ...props }: IconProps) => React.JSX.Element;
 export default _default;

package/src/components/icons/DefaultIcon.js

@@ -1,12 +1,6 @@
 import * as React from 'react';
 import join from '../utils/join';
-const HUNDRED_PERCENT_SIZE = 24;
 const DEFAULT_SIZE = 20;
-export const getSize = (size) => Math.round(size * (DEFAULT_SIZE / HUNDRED_PERCENT_SIZE));
 export default ({ children, size = DEFAULT_SIZE, name, tabIndex, color, ...props }) => {
-    size =
-        typeof size === 'number' || parseInt(size) == size
-            ? getSize(size)
-            : size;
     return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", tabIndex: tabIndex, "data-id": name, "data-name": "AdaptableIcon", ...props, className: join(props.className, `ab-Icon ab-Icon--${name}`), style: { verticalAlign: 'middle', fill: color ?? 'currentColor', ...props.style } }, children));
 };

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: 1752841742262 || Date.now(),
-    VERSION: "20.3.0-canary.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1756391396935 || Date.now(),
+    VERSION: "21.0.0-canary.0" || '--current-version--',
 };

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -1,3 +1,4 @@
+import { ColumnSizingMap } from '../../AdaptableState/LayoutState';
 import { XOR } from '../../Utilities/Extensions/TypeExtensions';
 /**
  * Defines how a Column is sorted
@@ -13,6 +14,10 @@ export interface ColumnSortModel {
     SortOrder: 'Asc' | 'Desc';
 }
 export interface BaseLayoutModel {
+    /**
+     * @defaultValue 'single'
+     */
+    RowGroupDisplayType?: 'single' | 'multi';
     /**
      * Those are not actually used by the LayoutManager,
      * but we need to keep them here so we can give the layout
@@ -55,12 +60,7 @@ export interface BaseLayoutModel {
     ColumnVisibility?: {
         [columnId: string]: false;
     };
-    /**
-     * Set of widths for some (or all columns)
-     */
-    ColumnWidths?: {
-        [columnId: string]: number;
-    };
+    ColumnSizing?: ColumnSizingMap;
     /**
      * Behaviour for Expanding / Collapsing Row Groups
      */
@@ -142,10 +142,6 @@ export interface TableLayoutModel extends BaseLayoutModel {
      * Columns which are row-grouped when the Layout is applied
      */
     RowGroupedColumns?: string[];
-    /**
-     * @defaultValue 'single'
-     */
-    RowGroupDisplayType?: 'single' | 'multi';
     PivotAggregationColumns?: never;
     PivotColumns?: never;
     PivotGroupedColumns?: never;