@adaptabletools/adaptable-cjs 20.3.0 → 21.0.0-canary.1

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,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgGridModulesAdapter = exports.AG_GRID_VERSION = void 0;
+const ag_grid_enterprise_1 = require("ag-grid-enterprise");
+exports.AG_GRID_VERSION = ag_grid_enterprise_1.AllEnterpriseModule.version;
+class AgGridModulesAdapter {
+    constructor(adaptableInstance) {
+        this.adaptableInstance = adaptableInstance;
+        this.allAgGridModules = new Set();
+        this.allAgGridModules = this.extractAgGridModuleNames(ag_grid_enterprise_1.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;
+    }
+}
+exports.AgGridModulesAdapter = AgGridModulesAdapter;

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

@@ -85,5 +85,5 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
                     focus();
                 }
             } },
-            React.createElement(icons_1.Icon, { size: 18, name: "close", tabIndex: 0 }))) : null));
+            React.createElement(icons_1.Icon, { size: 15, name: "close", tabIndex: 0 }))) : null));
 });

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

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

package/src/components/Dialog/index.js

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

package/src/components/Dropdown/Arrows.js

@@ -15,7 +15,7 @@ const Arrows = () => {
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
         } },
-        React.createElement(icons_1.Icon, { name: "triangle-up", size: 24, style: { position: 'relative', top: 7 } }),
-        React.createElement(icons_1.Icon, { name: "triangle-down", size: 24, style: { position: 'relative', top: -7 } })));
+        React.createElement(icons_1.Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }),
+        React.createElement(icons_1.Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })));
 };
 exports.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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimiteValueInput = exports.PrimitiveColumnOrFieldSelector = void 0;
+exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimitiveValueInput = exports.PrimitiveColumnOrFieldSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
@@ -68,7 +68,7 @@ const PrimitiveColumnOrFieldSelector = (props) => {
         input));
 };
 exports.PrimitiveColumnOrFieldSelector = PrimitiveColumnOrFieldSelector;
-const PrimiteValueInput = (props) => {
+const PrimitiveValueInput = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const hasFields = react_1.default.useMemo(() => {
         return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
@@ -135,7 +135,7 @@ const PrimiteValueInput = (props) => {
             } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
+        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }
@@ -174,7 +174,7 @@ const PrimiteValueInput = (props) => {
             }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),
         editor));
 };
-exports.PrimiteValueInput = PrimiteValueInput;
+exports.PrimitiveValueInput = PrimitiveValueInput;
 const PrimitiveMultiValueInput = (props) => {
     return (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
             props.onChange(value);

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

@@ -189,7 +189,7 @@ const PrimitiveFunctionEditor = (props) => {
                                 });
                             } }));
                     }
-                    return (react_1.default.createElement(QueryBuilderInputs_1.PrimiteValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
+                    return (react_1.default.createElement(QueryBuilderInputs_1.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

@@ -40,7 +40,7 @@ const readJSONFile = async (file, toJSON) => {
 };
 exports.readJSONFile = readJSONFile;
 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(icons_1.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(icons_1.Icon, { name: "paperclip", size: 40 }), value, ...domProps } = props;
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, 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

@@ -46,7 +46,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

@@ -12,6 +12,7 @@ const infinite_react_1 = require("@infinite-table/infinite-react");
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const re_resizable_1 = require("re-resizable");
+const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -32,6 +33,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_1.default, { 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',
@@ -48,9 +58,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,
@@ -63,6 +71,7 @@ const INFINITE_COLUMNS_WITH_RADIO = {
     label: {
         field: 'label',
         defaultFlex: 1,
+        renderValue,
     },
 };
 const isRowDisabled = ({ data, }) => {
@@ -95,6 +104,19 @@ const doesOptionMatchValue = function (value) {
 };
 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] = (0, react_1.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;
@@ -157,12 +179,23 @@ 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(react_select_1.components.SelectContainer, { ...inputProps, innerProps: {
+        return (selectContainerProps) => {
+            return (React.createElement(react_select_1.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();
+                        }
+                    },
                 } }));
         };
     }, []);
@@ -197,10 +230,10 @@ 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',
@@ -216,9 +249,37 @@ const Select = function (props) {
                 sizeRef.current = newSize;
             }, []);
             return (React.createElement(React.Fragment, null,
-                React.createElement(react_select_1.components.Menu, { ...inputProps, innerProps: {
+                React.createElement(react_select_1.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(re_resizable_1.Resizable, { enable: resizableDirections, minWidth: '100%', maxHeight: '60vh', maxWidth: '60vw', defaultSize: sizeRef.current, onResizeStop: onResizeStop }, theChildren)) : (theChildren))));
         };
     }, [resizable]);
@@ -233,6 +294,12 @@ 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();
@@ -356,11 +423,13 @@ 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(infinite_react_1.DataSource, { 
                 // @ts-ignore
                 // data={props.options}
@@ -368,12 +437,33 @@ 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(rebass_1.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(infinite_react_1.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(react_select_1.components.DropdownIndicator, { ...props },
+        return (dropdownIndicatorProps) => {
+            return (React.createElement(react_select_1.components.DropdownIndicator, { ...dropdownIndicatorProps, innerProps: {
+                    ...dropdownIndicatorProps.innerProps,
+                } },
                 React.createElement(icons_1.Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
         };
     }, []);
@@ -395,20 +485,22 @@ 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: (0, join_1.default)(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: (0, join_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: 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,17 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSize = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const HUNDRED_PERCENT_SIZE = 24;
 const DEFAULT_SIZE = 20;
-const getSize = (size) => Math.round(size * (DEFAULT_SIZE / HUNDRED_PERCENT_SIZE));
-exports.getSize = getSize;
 exports.default = ({ children, size = DEFAULT_SIZE, name, tabIndex, color, ...props }) => {
-    size =
-        typeof size === 'number' || parseInt(size) == size
-            ? (0, exports.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: (0, join_1.default)(props.className, `ab-Icon ab-Icon--${name}`), style: { verticalAlign: 'middle', fill: color ?? 'currentColor', ...props.style } }, children));
 };

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1753107549084 || Date.now(),
-    VERSION: "20.3.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1756456094068 || Date.now(),
+    VERSION: "21.0.0-canary.1" || '--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;

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

@@ -42,11 +42,16 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     getTableLayoutModelFromGrid(): TableLayoutModel;
     private isTreeMode;
     getUndecidedLayoutModelFromGrid(columnState: ColumnState[]): TableLayoutModel | PivotLayoutModel;
-    static getAGGridInitialStateForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs'], options?: {
+    static getColumnDefsChangesForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs']): GridOptions['columnDefs'] | null;
+    static getAGGridInitialStateForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs'], options: {
         isTree: boolean;
+        colTypes: GridOptions['columnTypes'];
+        defaultColDef: GridOptions['defaultColDef'];
     }): GridState;
     static getAGGridInitialStateForTableLayout(layout: TableLayoutModel, colDefs: GridOptions['columnDefs'], _options?: {
-        isTree: boolean;
+        isTree?: boolean;
+        colTypes?: GridOptions['columnTypes'];
+        defaultColDef?: GridOptions['defaultColDef'];
     }): GridState;
     static getAGGridInitialStateForPivotLayout(layout: PivotLayoutModel, colDefs: GridOptions['columnDefs']): GridState;
     silentSetCurrentLayout(layout: TableLayoutModel | PivotLayoutModel, options?: {
@@ -60,6 +65,8 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private suspendAgGridListener;
     private resumeAgGridListener;
     private applyLayout;
+    applyColumnDefsChanges(layout: TableLayoutModel | PivotLayoutModel): boolean;
+    private applyColumnSizingColumnDefsChanges;
     private applyTableLayout;
     private getRowGroupNodePathsAs;
     applyRowGroupValues(RowGroupValues: TableLayoutModel['RowGroupValues'], rowGroupedColumns: string[]): void;
@@ -71,7 +78,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private computeRowGrouping;
     private computeColumnSorts;
     private getDefaultColumnWidthForCol;
-    private computeColumnWidths;
+    private computeColumnSizing;
     private computeColumnOrderAndVisibility;
     autoSizeColumns(columnIds?: string[]): false | string[];
     private applyPivotLayout;
@@ -82,5 +89,6 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private setupPivotTotals;
     private patchPivotAggregationTotal;
     private getPivotTotalColumnConfig;
+    private isInPivotMode;
 }
 export {};