@adaptabletools/adaptable-cjs 18.0.0-canary.3 → 18.0.0-canary.4

package/src/View/Comments/CommentsPopup.js

@@ -33,8 +33,8 @@ const CellComments = (props) => {
                     return (0, dateUtils_1.formatDate)(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
                 },
             },
-            message: {
-                header: 'Message',
+            text: {
+                header: 'Text',
                 field: 'Value',
                 defaultFlex: 3,
             },
@@ -42,15 +42,19 @@ const CellComments = (props) => {
         return columns;
     }, []);
     const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
+    const primaryKeyHeader = React.useMemo(() => {
+        const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+        return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
+    }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (React.createElement(Panel_1.default, { mb: 2, header: React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 2 },
                 "Cell Value: ",
                 cellValue),
             React.createElement(rebass_1.Box, { mr: 2 },
-                "Primary Key: [",
-                props.commentThread.PrimaryKeyValue,
-                "]"),
+                primaryKeyHeader,
+                ": ",
+                props.commentThread.PrimaryKeyValue),
             React.createElement(rebass_1.Box, null,
                 "Column: ",
                 columnFriendlyName),
@@ -76,12 +80,12 @@ const CellComments = (props) => {
                 }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const CommentsPopup = (props) => {
-    const cellComments = (0, react_redux_1.useSelector)((state) => {
+    const commentThreads = (0, react_redux_1.useSelector)((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (cellComments !== null && cellComments !== void 0 ? cellComments : []).map((cellComments, index) => {
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads !== null && commentThreads !== void 0 ? commentThreads : []).map((commentThread, index) => {
         var _a;
-        return React.createElement(CellComments, { key: (_a = cellComments === null || cellComments === void 0 ? void 0 : cellComments.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: cellComments });
+        return React.createElement(CellComments, { key: (_a = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: commentThread });
     })));
 };
 exports.CommentsPopup = CommentsPopup;

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -27,7 +27,7 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
         api.notesApi.updateNoteText(value, note);
     }, [note]);
     return (React.createElement(rebass_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
-        React.createElement(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Value, onNoteChange: (value) => handleNoteChange(value) })));
+        React.createElement(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Text, onNoteChange: (value) => handleNoteChange(value) })));
 };
 const GridCellPopup = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -4,4 +4,5 @@ export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
 export declare const SHOW_EXPORT_TABLE = "SHOW_EXPORT_TABLE";
 export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
+export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,17 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.SHOW_THEME_EDITOR = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
+exports.windowFactory = exports.WINDOW_SHOW_TRANSPOSED_VIEW = exports.SHOW_THEME_EDITOR = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
 const GridFilterWindowPopup_1 = require("../../../GridFilter/GridFilterWindowPopup");
 const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
 const ExportTablePopup_1 = require("../../../Export/ExportTablePopup");
 const ThemeEditorWindow_1 = require("../../../Theme/ThemeEditorWindow");
+const TransposedPopup_1 = require("../../../Layout/TransposedPopup");
 exports.WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 exports.SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
 exports.SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
+exports.WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 exports.windowFactory = {
     [exports.WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup_1.GridFilterWindowPopup,
     [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
     [exports.SHOW_EXPORT_TABLE]: ExportTablePopup_1.ExportTablePopup,
     [exports.SHOW_THEME_EDITOR]: ThemeEditorWindow_1.ThemeEditorWindow,
+    [exports.WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup_1.TransposedPopup,
 };

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -13,7 +13,7 @@ const PermittedValuesSelector = function (props) {
     const [filter, setFilter] = React.useState('');
     const columnType = React.useMemo(() => {
         return adaptable.api.columnApi.getColumnDataTypeForColumnId(props.columnId);
-    }, []);
+    }, [props.columnId]);
     React.useEffect(() => {
         if (!props.columnId) {
             setIsLoading(false);

package/src/View/Layout/TransposedPopup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const TransposedPopup: (props: WindowPopupChildProps) => JSX.Element;

package/src/View/Layout/TransposedPopup.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransposedPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
+const TransposedPopup = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const rowNodes = React.useMemo(() => {
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [
+    // can be later triggered by ticking data
+    ]);
+    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    // Thist must be qunique
+    const transposeByColumnId = primaryKey;
+    // Only used to show nice values a the top of the grid, istead on the value
+    // of the primarykey
+    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const columns = React.useMemo(() => {
+        // customisable
+        return adaptable.api.columnApi.getColumns();
+    }, []);
+    const adaptableContainerId = 'transposed-adaptable-container';
+    const agGridContainerId = 'transposed-adaptable-ag-grid-container';
+    /**
+     * This is used as first field
+     */
+    const transposedFirstColumnField = '_transposed_column_value';
+    const transposedFirstColumnHeader = '_transposed_column_header';
+    const transposedRowsAndColumns = React.useMemo(() => {
+        /**
+         * transposed column values become primaryKey of the new tarnsposed rows
+         * we build row by row, might be easer
+         */
+        const transposedColumns = [];
+        const transposedRows = [];
+        for (const row of rowNodes) {
+            // we force the col-ids to be strings, easer to work with
+            //row[transposeByColumnId] + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId) + '';
+            //row[synteticTransposedByColumnId] + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            transposedColumns.push({
+                colId,
+                header,
+            });
+        }
+        for (const column of columns) {
+            /**
+             * We can hide the transposed column, if we want
+             */
+            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+                continue;
+            }
+            const transposedRow = {
+                // [transposed-by-column-id]: [other column id],
+                // the value can be set to friendlyname
+                [transposedFirstColumnField]: column.columnId,
+                [transposedFirstColumnHeader]: column.friendlyName,
+            };
+            for (let row of rowNodes) {
+                // [transposed-by-column-value[n]]: [other column value[n]]
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId);
+                // row[column.field]
+                let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
+                if (value instanceof Date) {
+                    value = value.toLocaleString();
+                }
+                transposedRow[key] = value;
+            }
+            transposedRows.push(transposedRow);
+        }
+        return {
+            transposedColumns,
+            transposedRows,
+        };
+    }, [rowNodes, primaryKey, synteticTransposedByColumnId]);
+    React.useEffect(() => {
+        // Mounting in an effect, so the nodes are rendered/available
+        const hostAdaptableOptions = adaptable.adaptableOptions;
+        const adaptableOptions = {
+            primaryKey: transposedFirstColumnField,
+            licenseKey: hostAdaptableOptions.licenseKey,
+            userName: `${hostAdaptableOptions.userName}`,
+            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
+            containerOptions: {
+                adaptableContainer: adaptableContainerId,
+                agGridContainer: agGridContainerId,
+            },
+            entitlementOptions: {
+                defaultAccessLevel: 'Hidden',
+            },
+            layoutOptions: {
+                createDefaultLayout: false,
+                autoSizeColumnsInLayout: false,
+            },
+            predefinedConfig: {
+                Layout: {
+                    Revision: Date.now(),
+                    CurrentLayout: 'TransposedView',
+                    Layouts: [
+                        {
+                            Name: 'TransposedView',
+                            Columns: [
+                                transposedFirstColumnHeader,
+                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                            ],
+                            PinnedColumnsMap: {
+                                [transposedFirstColumnHeader]: 'left',
+                            },
+                        },
+                    ],
+                },
+                Theme: {
+                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
+                },
+            },
+        };
+        const firstColumn = {
+            field: transposedFirstColumnHeader,
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+        };
+        const agGridOptions = {
+            suppressLoadingOverlay: true,
+            defaultColDef: {
+                floatingFilter: false,
+                filter: false,
+                sortable: true,
+                resizable: true,
+                enableRowGroup: false,
+                editable: false,
+                enablePivot: false,
+                enableValue: false,
+                lockPinned: true,
+                menuTabs: [],
+                width: 120,
+            },
+            columnDefs: [
+                {
+                    field: transposedFirstColumnField,
+                    hide: true,
+                },
+                firstColumn,
+                ...transposedRowsAndColumns.transposedColumns.map((col) => {
+                    return {
+                        field: col.colId,
+                        type: null,
+                        headerName: col.header,
+                    };
+                }),
+            ],
+            rowData: transposedRowsAndColumns.transposedRows,
+            sideBar: false,
+        };
+        const modules = adaptable.getAgGridRegisteredModules();
+        const adaptableInitFn = Object.getPrototypeOf(adaptable).constructor.init;
+        const agGridConfig = {
+            gridOptions: agGridOptions,
+            modules: modules,
+        };
+        let transposedAdaptableApi;
+        (async () => {
+            transposedAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+            adaptable.api.eventApi.on('ThemeChanged', (event) => {
+                transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            });
+        })();
+        return () => {
+            if (transposedAdaptableApi) {
+                transposedAdaptableApi.destroy();
+            }
+        };
+    }, [synteticTransposedByColumnId]);
+    /**
+     * Need to get all data, manualy pivot the grid using the primary key.
+     *
+     * 1. get the data, and pivot using the primary key
+     * 2. create the col definitios, a col definition for each row
+     * 3. create the grid
+     */
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", width: "100%", height: "100%" },
+        React.createElement(Panel_1.default, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
+                    React.createElement(ColumnSelector_1.ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
+                            setSynteticTransposedByColumnId(colId);
+                        } })))),
+        React.createElement(rebass_1.Flex, { height: "100%" },
+            React.createElement(rebass_1.Box, { id: "transposed-adaptable-container" }),
+            React.createElement(rebass_1.Box, { height: "100%", width: "100%", id: "transposed-adaptable-ag-grid-container" }))));
+};
+exports.TransposedPopup = TransposedPopup;

package/src/View/Notes/NotesPopup.js

@@ -19,7 +19,7 @@ const tableDOMProps = {
 const NotesPopup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
-    const allNotes = (0, react_redux_1.useSelector)((state) => (0, NotesRedux_1.GetNotesSelector)(state.Notes));
+    const allNotes = (0, react_redux_1.useSelector)((state) => (0, NotesRedux_1.GetAllNotesSelector)(state.Notes));
     const columnsMap = React.useMemo(() => {
         const columns = {
             primaryKey: {
@@ -28,13 +28,14 @@ const NotesPopup = (props) => {
             },
             column: {
                 field: 'ColumnId',
+                header: 'Column',
                 valueGetter: (params) => {
                     return adaptable.api.columnApi.getFriendlyNameForColumnId(params.data.ColumnId);
                 },
             },
-            note: {
-                field: 'Value',
-                header: 'Note',
+            text: {
+                field: 'Text',
+                header: 'Text',
                 defaultEditable: true,
                 defaultFlex: 3,
             },
@@ -44,10 +45,6 @@ const NotesPopup = (props) => {
                     return new Date(params.data.Timestamp).toDateString();
                 },
             },
-            author: {
-                header: 'Author',
-                valueGetter: (params) => params.data.Author.UserName,
-            },
             delete: {
                 defaultWidth: 50,
                 render: (params) => {
@@ -68,8 +65,8 @@ const NotesPopup = (props) => {
                         if (change.type === 'update') {
                             const data = change.data;
                             const prevNote = allNotes.find((x) => x.Uuid === uuid);
-                            if (prevNote.Value !== data.Value) {
-                                adaptable.api.notesApi.updateNoteText(data.Value, prevNote);
+                            if (prevNote.Text !== data.Text) {
+                                adaptable.api.notesApi.updateNoteText(data.Text, prevNote);
                             }
                         }
                     }
@@ -80,6 +77,7 @@ const NotesPopup = (props) => {
                         align: 'start',
                         defaultFlex: 1,
                         defaultSortable: false,
+                        style: { fontSize: 'var(--ab-font-size-3)' },
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,

package/src/View/Theme/ThemeSelector.js

@@ -12,6 +12,7 @@ const ThemeSelector = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const availableThemes = adaptable.api.themeApi.getThemes();
+    const currentTheme = (0, react_redux_1.useSelector)((state) => state.Theme.CurrentTheme);
     const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants_1.ThemeModuleId) === 'ReadOnly';
     const optionThemes = availableThemes.map((theme) => {
         if (typeof theme === 'string') {
@@ -26,8 +27,7 @@ const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    const theme = adaptable.api.themeApi.getCurrentThemeObject();
-    return (React.createElement(Select_1.Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select_1.Select, { "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/agGrid/Adaptable.js

@@ -1927,7 +1927,7 @@ class Adaptable {
         if (column.dataType == 'String' && this.api.predicateApi.useCaseSensitivity()) {
             uniqueVals = (0, uniqBy_1.default)(uniqueVals, (d) => d.displayValue.toLowerCase());
         }
-        return uniqueVals.slice(0, this.adaptableOptions.columnFilterOptions.valuesFilterOptions.maxFilterValuesToDisplay);
+        return uniqueVals.slice(0, this.api.columnFilterApi.getMaxFilterValue(column));
     }
     getGridCellsForPermittedValues(column, distinctValuesParams) {
         var _a;
@@ -2065,7 +2065,7 @@ class Adaptable {
                 eachFn(rowNode, columnId);
             });
         }
-        return returnArray.slice(0, this.adaptableOptions.columnFilterOptions.valuesFilterOptions.maxFilterValuesToDisplay);
+        return returnArray.slice(0, this.api.columnFilterApi.getMaxFilterValue(abColumn));
     }
     addDistinctColumnValue(rowNode, columnId) {
         // we do not return the values of the aggregates when in grouping mode

package/src/agGrid/agGridMenuHelper.js

@@ -69,7 +69,7 @@ class agGridMenuHelper {
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
         // sort Adaptable menu items by default order
-        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER, adaptableMenuItems);
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE, adaptableMenuItems);
         // 1. first check if there is a custom column menu defined
         if (typeof menuOptions.customColumnMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -338,8 +338,8 @@ class agGridMenuHelper {
         const adaptableMenuItems = this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext);
         // sort Adaptable menu items by default order
         adaptableMenuItems.sort((first, second) => {
-            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(first.module);
-            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(second.module);
+            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE.indexOf(first.module);
+            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE.indexOf(second.module);
             return firstPriority - secondPriority;
         });
         // And then convert them into Menu Item Defs

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

@@ -10,6 +10,8 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     options: readonly SelectOption<SelectValue>[] | SelectOption<SelectValue>[];
     disabled?: boolean;
     menuPosition?: 'fixed' | 'absolute';
+    menuPlacement?: 'auto' | 'bottom' | 'top';
+    searchable?: boolean;
     isClearable?: boolean;
     isMulti?: IsMulti;
     onChange: (value: IsMulti extends true ? SelectValue[] : SelectValue) => void;

package/src/components/Select/Select.js

@@ -16,7 +16,7 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 const Select = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const doesOptionMatchValue = function (option) {
         if (typeof option.value === 'object' && option.value instanceof Date) {
             return (0, date_fns_1.isSameDay)(option.value, props.value);
@@ -84,7 +84,7 @@ const Select = function (props) {
                 React.createElement(icons_1.Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
         };
     }, []);
-    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'absolute', 
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, menuPlacement: (_g = props.menuPlacement) !== null && _g !== void 0 ? _g : 'auto', isSearchable: props.searchable, isMulti: props.isMulti, value: selectedOption, menuPosition: (_h = props.menuPosition) !== null && _h !== void 0 ? _h : 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     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: 1707926781705 || Date.now(),
-    VERSION: "18.0.0-canary.3" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1710512556255 || Date.now(),
+    VERSION: "18.0.0-canary.4" || '--current-version--',
 };

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

@@ -1927,6 +1927,22 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    CommentableCellContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
+    CommentsOptions: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        }[];
+    };
     CompatibleContext: {
         name: string;
         kind: string;
@@ -3659,6 +3675,18 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    InteropioPluginOptions: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+        }[];
+    };
     IPushPullDomain: {
         name: string;
         kind: string;
@@ -3955,7 +3983,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
-    NoteState: {
+    NotesState: {
         name: string;
         kind: string;
         desc: string;
@@ -4512,7 +4540,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
-    Report_2: {
+    Report: {
         name: string;
         kind: string;
         desc: string;