@adaptabletools/adaptable 18.0.0-canary.4 → 18.0.0-canary.5

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -0,0 +1,28 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { Column, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from '@ag-grid-community/core';
+import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableMenuItem, ColumnMenuContext } from '../PredefinedConfig/Common/Menu';
+export declare class AgGridMenuAdapter {
+    private adaptableInstance;
+    constructor(adaptableInstance: AdaptableAgGrid);
+    private get adaptableOptions();
+    private get adaptableApi();
+    destroy(): void;
+    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
+    buildStructuredAdaptableColumnItems(menuContext: ColumnMenuContext): {
+        adaptableMenuItems: AdaptableMenuItem[];
+        structuredAdaptableMenuItems: AdaptableMenuItem[];
+    };
+    buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
+    createColumnMenuContextObject(adaptableColumn: AdaptableColumn, agGridColumn: Column): ColumnMenuContext;
+    private createAdaptableContextMenuItems;
+    private createContextMenuContextObject;
+    private mapAdaptableMenuItemToAgGridMenuDefinition;
+    private mapCustomMenuItemToAgGridMenuDefinition;
+    private mapUserMenuItemToAgGridMenuDefinition;
+    private buildGroupedModuleItems;
+    private mapAdaptableMenuItemToSystemMenuItems;
+    private createAdaptableColumnMenuItems;
+    private mapAdaptableIconToAgGridIcon;
+    buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
+}

package/src/agGrid/AgGridMenuAdapter.js

@@ -0,0 +1,271 @@
+import { DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE, DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, } from '../AdaptableOptions/MenuOptions';
+import { isAdaptableElementIcon } from '../components/Icon';
+import { iconToString } from '../components/icons';
+import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
+export class AgGridMenuAdapter {
+    constructor(adaptableInstance) {
+        this.adaptableInstance = adaptableInstance;
+    }
+    get adaptableOptions() {
+        return this.adaptableInstance.adaptableOptions;
+    }
+    get adaptableApi() {
+        return this.adaptableInstance.api;
+    }
+    destroy() {
+        this.adaptableInstance = null;
+    }
+    buildColumnMenu(params, originalGetMainMenuItems) {
+        var _a;
+        const menuOptions = this.adaptableOptions.menuOptions;
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
+        }
+        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
+        const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
+        const { adaptableMenuItems, structuredAdaptableMenuItems } = this.buildStructuredAdaptableColumnItems(menuContext);
+        // 1. first check if there is a custom column menu defined
+        if (typeof menuOptions.customColumnMenu === 'function') {
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
+                menuType: 'AgGrid',
+                name: itemName,
+            }));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
+        }
+        // 2. if not, return the default context menu
+        const defaultContextMenu = [
+            ...agGridMenuItems,
+            'separator',
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+        ];
+        return defaultContextMenu;
+    }
+    buildStructuredAdaptableColumnItems(menuContext) {
+        const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
+        // sort Adaptable menu items by default order
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE, adaptableMenuItems);
+        return { adaptableMenuItems, structuredAdaptableMenuItems };
+    }
+    buildContextMenu(params, originalGetContextMenuItems) {
+        var _a;
+        // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
+        // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
+        this.adaptableInstance.refreshSelectedCellsState();
+        const menuOptions = this.adaptableOptions.menuOptions;
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
+        }
+        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
+        const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
+        const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
+        // sort Adaptable menu items by default order
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, adaptableMenuItems);
+        // 1. first check if there is a custom context menu defined
+        if (typeof menuOptions.customContextMenu === 'function') {
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
+                menuType: 'AgGrid',
+                name: itemName,
+            }));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
+        }
+        // 2. if not, return the default context menu
+        const defaultContextMenu = [
+            ...agGridMenuItems,
+            'separator',
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+        ];
+        return defaultContextMenu;
+    }
+    createColumnMenuContextObject(adaptableColumn, agGridColumn) {
+        return Object.assign(Object.assign({}, this.adaptableInstance.api.internalApi.buildBaseContext()), { adaptableColumn: adaptableColumn, agGridColumn: agGridColumn, isRowGroupColumn: this.adaptableInstance.api.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()) });
+    }
+    createAdaptableContextMenuItems(menuContext) {
+        let contextMenuItems = [];
+        this.adaptableInstance.adaptableModules.forEach((module) => {
+            let menuItems = module.addContextMenuItems(menuContext);
+            if (menuItems) {
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
+            }
+        });
+        this.adaptableInstance._emitSync('CreateAdaptableContextMenuItems', {
+            items: contextMenuItems,
+            menuContext: menuContext,
+        });
+        return contextMenuItems;
+    }
+    createContextMenuContextObject(params, adaptableColumn) {
+        // lets build a picture of what has been right clicked.  Will take time to get right but lets start
+        let isSingleSelectedColumn = false;
+        let isSelectedCell = false;
+        let isSelectedRow = false;
+        // row group columns dont provide an AdapTable Column so return bare minimum
+        if (!adaptableColumn) {
+            return Object.assign(Object.assign({}, this.adaptableApi.internalApi.buildBaseContext()), { isSelectedCell: false, isSelectedRow: false, gridCell: undefined, adaptableColumn: undefined, agGridColumn: params.column, rowNode: params.node, isGroupedNode: params.node ? params.node.group : false, isSingleSelectedColumn: false, isSingleSelectedCell: false, primaryKeyValue: undefined, selectedCellInfo: undefined, selectedRowInfo: undefined, isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()) });
+        }
+        const clickedCell = this.adaptableInstance.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        const selectedCellInfo = this.adaptableApi.gridApi.getSelectedCellInfo();
+        if (selectedCellInfo) {
+            let matchedCell = selectedCellInfo.gridCells.find((gc) => gc != null &&
+                gc.column == clickedCell.column &&
+                gc.primaryKeyValue == clickedCell.primaryKeyValue);
+            isSelectedCell = matchedCell != null;
+            if (isSelectedCell) {
+                isSingleSelectedColumn = ArrayExtensions.CorrectLength(selectedCellInfo.columns, 1);
+            }
+        }
+        const selectedRowInfo = this.adaptableApi.gridApi.getSelectedRowInfo();
+        if (selectedRowInfo) {
+            const matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
+            isSelectedRow = matchedPKValue != null;
+        }
+        return Object.assign(Object.assign({}, this.adaptableApi.internalApi.buildBaseContext()), { isSelectedCell: isSelectedCell, isSelectedRow: isSelectedRow, gridCell: clickedCell, adaptableColumn: adaptableColumn, agGridColumn: params.column, rowNode: params.node, isGroupedNode: params.node ? params.node.group : false, isSingleSelectedColumn: isSingleSelectedColumn, isSingleSelectedCell: isSelectedCell && (selectedCellInfo === null || selectedCellInfo === void 0 ? void 0 : selectedCellInfo.gridCells.length) == 1, primaryKeyValue: clickedCell ? clickedCell.primaryKeyValue : undefined, selectedCellInfo: selectedCellInfo, selectedRowInfo: selectedRowInfo, isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()) });
+    }
+    mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
+        var _a;
+        return {
+            name: adaptableMenuItem.label,
+            action: adaptableMenuItem.onClick
+                ? adaptableMenuItem.onClick
+                : adaptableMenuItem.reduxAction
+                    ? () => this.adaptableInstance.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
+                    : undefined,
+            icon: this.mapAdaptableIconToAgGridIcon(adaptableMenuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
+            subMenu: (_a = adaptableMenuItem.subItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
+        };
+    }
+    mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext) {
+        var _a;
+        if (customMenuItem === '-') {
+            return 'separator';
+        }
+        if (customMenuItem.menuType === 'Group') {
+            return {
+                name: customMenuItem.label,
+                icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
+                    fill: 'var(--ab-color-text-on-primary)',
+                }),
+                disabled: customMenuItem.disabled,
+                subMenu: !customMenuItem.disabled
+                    ? (_a = customMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext)).filter(Boolean)
+                    : undefined,
+            };
+        }
+        if (customMenuItem.menuType === 'AgGrid') {
+            return customMenuItem.name;
+        }
+        if (customMenuItem.menuType === 'Adaptable') {
+            return this.mapAdaptableMenuItemToAgGridMenuDefinition(customMenuItem);
+        }
+        if (customMenuItem.menuType === 'User') {
+            return this.mapUserMenuItemToAgGridMenuDefinition(customMenuItem, menuContext);
+        }
+    }
+    mapUserMenuItemToAgGridMenuDefinition(userMenuItem, menuContext) {
+        var _a;
+        if (userMenuItem.hidden) {
+            return;
+        }
+        return {
+            name: userMenuItem.label,
+            action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
+            icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
+            disabled: userMenuItem.disabled,
+            subMenu: (_a = userMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => {
+                return this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext);
+            }).filter(Boolean),
+        };
+    }
+    buildGroupedModuleItems(sortedMenuItems, adaptableMenuItems) {
+        return sortedMenuItems
+            .map((moduleOrGroup) => {
+            if (typeof moduleOrGroup === 'object') {
+                const submenuItems = this.buildGroupedModuleItems(moduleOrGroup.modules, adaptableMenuItems);
+                // if there is only one item in the submenu, we don't need to show the submenu
+                if (submenuItems.length === 1) {
+                    return submenuItems[0];
+                }
+                return {
+                    label: moduleOrGroup.title,
+                    icon: moduleOrGroup.icon,
+                    subItems: submenuItems,
+                };
+            }
+            else {
+                return adaptableMenuItems.find((menuItem) => menuItem.module === moduleOrGroup);
+            }
+        })
+            .filter((menuItem) => {
+            if (!menuItem) {
+                return false;
+            }
+            if (menuItem.subItems && menuItem.subItems.length === 0) {
+                return false;
+            }
+            return true;
+        });
+    }
+    mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
+        return (adaptableMenuItems !== null && adaptableMenuItems !== void 0 ? adaptableMenuItems : []).map((menuItem) => {
+            let subItems = menuItem.subItems;
+            if (subItems && subItems.length > 0) {
+                subItems = subItems.map((subItem) => this.mapAdaptableMenuItemToSystemMenuItems(subItem.subItems));
+            }
+            return Object.assign(Object.assign({}, menuItem), { menuType: 'Adaptable', subItems });
+        });
+    }
+    createAdaptableColumnMenuItems(menuContext) {
+        let contextMenuItems = [];
+        this.adaptableInstance.adaptableModules.forEach((s) => {
+            let menuItems = s.addColumnMenuItems(menuContext.adaptableColumn);
+            if (menuItems) {
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
+            }
+        });
+        return contextMenuItems;
+    }
+    // TODO AFL MIG: pretty sure this logic is duplicated in several other places
+    mapAdaptableIconToAgGridIcon(adaptableIcon, style) {
+        const icon = this.adaptableInstance.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(adaptableIcon);
+        if (isAdaptableElementIcon(icon)) {
+            let element = icon.element;
+            if (typeof element === 'string') {
+                return element;
+            }
+            // THe element neets to be cloned.
+            // when it is used in more than one plce the element is removed from the DOM
+            return element.cloneNode(true);
+        }
+        else {
+            return iconToString(icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            });
+        }
+    }
+    buildStandaloneColumnHeader(adaptableColumn) {
+        const agGridColumn = this.adaptableInstance.getAgGridColumnForColumnId(adaptableColumn.columnId);
+        const menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
+        return this.buildStructuredAdaptableColumnItems(menuContext).adaptableMenuItems;
+    }
+}

package/src/agGrid/AgGridOptionsService.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { GridOptions } from '@ag-grid-community/core';
+export declare class AgGridOptionsService {
+    private adaptableInstance;
+    private gridOptionsPropertyCache;
+    private colDefPropertyCache;
+    constructor(adaptableInstance: AdaptableAgGrid);
+    destroy(): void;
+    setGridOptionsProperty<T extends keyof GridOptions>(gridOptions: GridOptions, propertyName: T, propertyGetter: (userPropertyValue: GridOptions[T]) => GridOptions[T] | undefined): GridOptions;
+    revertGridOptionsPropertiesToUserValue<T extends keyof GridOptions>(gridOptions: GridOptions, propertyNames: T[]): void;
+}

package/src/agGrid/AgGridOptionsService.js

@@ -0,0 +1,50 @@
+export class AgGridOptionsService {
+    constructor(adaptableInstance) {
+        this.adaptableInstance = adaptableInstance;
+        this.gridOptionsPropertyCache = new Map();
+        this.colDefPropertyCache = new Map();
+    }
+    destroy() {
+        this.gridOptionsPropertyCache.clear();
+        this.colDefPropertyCache.clear();
+        this.gridOptionsPropertyCache = null;
+        this.colDefPropertyCache = null;
+    }
+    setGridOptionsProperty(gridOptions, propertyName, propertyGetter) {
+        if (this.adaptableInstance.lifecycleState === 'preDestroyed') {
+            return;
+        }
+        const userKey = `user.${propertyName}`;
+        const adaptableKey = `adaptable.${propertyName}`;
+        const value = gridOptions[propertyName];
+        const isUserDefined = value !== this.gridOptionsPropertyCache.get(adaptableKey);
+        if (isUserDefined) {
+            this.gridOptionsPropertyCache.set(userKey, value);
+        }
+        const userValue = this.gridOptionsPropertyCache.get(userKey);
+        let adaptableValue = propertyGetter(userValue);
+        if (typeof adaptableValue === 'function') {
+            const previousValue = adaptableValue;
+            // @ts-ignore we know that adaptableValue is a function
+            adaptableValue = (...args) => {
+                if (this.adaptableInstance.isDestroyed) {
+                    return;
+                }
+                return previousValue(...args);
+            };
+        }
+        if (adaptableValue != null) {
+            this.gridOptionsPropertyCache.set(adaptableKey, adaptableValue);
+        }
+        gridOptions[propertyName] = adaptableValue !== null && adaptableValue !== void 0 ? adaptableValue : userValue;
+        return gridOptions;
+    }
+    revertGridOptionsPropertiesToUserValue(gridOptions, propertyNames) {
+        for (const propertyName of propertyNames) {
+            // see this.setGridOptionsProperty(...)
+            const userKey = `user.${propertyName}`;
+            const userValue = this.gridOptionsPropertyCache.get(userKey);
+            gridOptions[propertyName] = userValue;
+        }
+    }
+}

package/src/agGrid/BadgeRenderer.js

@@ -7,7 +7,7 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     }
     return class BadgetRenderer {
         getAdaptableInstance(params) {
-            const adaptable = params.api.__adaptable;
+            const adaptable = params.context.__adaptable;
             return adaptable;
         }
         init(params) {

package/src/agGrid/CheckboxRenderer.js

@@ -65,7 +65,7 @@ export class CheckboxEditor {
     // however, using ReactUI makes some race conditions possible, in which cases the editor will be displayed for a few milliseconds
     // we provide this logic for those few cases (to avoid a flicker effect)
     init(params) {
-        const adaptable = params.api.__adaptable;
+        const adaptable = params.context.__adaptable;
         const inputElement = document.createElement('input');
         inputElement.type = 'checkbox';
         inputElement.checked = params.value;

package/src/agGrid/FilterWrapper.d.ts

@@ -1,2 +1,2 @@
-import { Adaptable } from './Adaptable';
-export declare let FilterWrapperFactory: (adaptable: Adaptable) => any;
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+export declare const FilterWrapperFactory: (adaptable: AdaptableAgGrid) => any;

package/src/agGrid/FilterWrapper.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { FilterFormReact } from '../View/Components/FilterForm/FilterForm';
-export let FilterWrapperFactory = (adaptable) => {
+export const FilterWrapperFactory = (adaptable) => {
     function isFilterActive(colId) {
         // we need this here
         if (adaptable.isDestroyed) {

package/src/agGrid/attachAddaptableColumnTypes.d.ts

@@ -1,16 +1,16 @@
 import { GridOptions } from '@ag-grid-community/core';
 export declare const attachColumnTypes: (gridOptions: GridOptions) => {
-    [key: string]: import("@ag-grid-community/core").ColDef<any, any>;
+    [key: string]: import("@ag-grid-community/core").ColTypeDef<any, any>;
 } & {
-    [x: string]: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefNumber: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefString: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefBoolean: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefDate: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefObject: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefCustom: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefStringArray: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefTupleNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
-    abColDefObjectNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
+    [x: string]: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefNumber: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefString: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefBoolean: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefDate: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefObject: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefCustom: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefStringArray: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefNumberArray: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefTupleNumberArray: import("@ag-grid-community/core").ColTypeDef<any, any>;
+    abColDefObjectNumberArray: import("@ag-grid-community/core").ColTypeDef<any, any>;
 };

package/src/agGrid/defaultAdaptableOptions.d.ts

@@ -0,0 +1,3 @@
+import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
+export declare function applyDefaultAdaptableOptions(adaptableOptions: AdaptableOptions): AdaptableOptions;
+export declare const getDefaultAdaptableOptions: () => AdaptableOptions<any>;

package/src/{Utilities/Defaults/DefaultAdaptableOptions.js → agGrid/defaultAdaptableOptions.js}

@@ -1,15 +1,16 @@
-import * as GeneralConstants from '../Constants/GeneralConstants';
-import { EMPTY_ARRAY } from '../Constants/GeneralConstants';
-import UIHelper, { getHexForName, GRAY, GREEN, RED } from '../../View/UIHelper';
-import { SystemAlertPredicateIds, SystemBadgeStylePredicateIds, SystemFilterPredicateIds, SystemFlashingCellPredicateIds, SystemFormatColumnPredicateIds, } from '../../PredefinedConfig/Common/AdaptablePredicate';
-import { ExportDestination } from '../../PredefinedConfig/Common/Enums';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-// change type to DeepRequired<AdaptableOptions> to check which properties have no default values defined
-export const DefaultAdaptableOptions = {
+import * as GeneralConstants from '../Utilities/Constants/GeneralConstants';
+import UIHelper, { getHexForName, GRAY, GREEN, RED } from '../View/UIHelper';
+import { EMPTY_ARRAY } from '../Utilities/Constants/GeneralConstants';
+import { ExportDestination } from '../PredefinedConfig/Common/Enums';
+import { SystemAlertPredicateIds, SystemBadgeStylePredicateIds, SystemFilterPredicateIds, SystemFlashingCellPredicateIds, SystemFormatColumnPredicateIds, } from '../PredefinedConfig/Common/AdaptablePredicate';
+import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
+import { initPredefinedConfigWithUuids } from '../Utilities/Helpers/AdaptableHelper';
+const DefaultAdaptableOptions = {
     adaptableId: GeneralConstants.ADAPTABLE_ID,
     adaptableStateKey: undefined,
     primaryKey: '',
     autogeneratePrimaryKey: false,
+    autoMigrateState: true,
     userName: GeneralConstants.USER_NAME,
     predefinedConfig: undefined,
     alertOptions: {
@@ -268,6 +269,9 @@ export const DefaultAdaptableOptions = {
         useCustomMacLikeScrollbars: false,
         englishVariant: 'GB',
         showLoadingScreen: true,
+        loadingScreenDelay: 200,
+        loadingScreenTitle: 'Initialising Grid',
+        loadingScreenText: 'Retrieving your settings and setting up the grid...',
         disableDeleteConfirmation: false,
         dateInputOptions: {
             useNativeInput: false,
@@ -325,3 +329,60 @@ export const DefaultAdaptableOptions = {
         },
     },
 };
+export function applyDefaultAdaptableOptions(adaptableOptions) {
+    var _a;
+    const adaptableOptsWithDefaults = Object.assign({}, DefaultAdaptableOptions, adaptableOptions);
+    adaptableOptsWithDefaults.adaptableStateKey =
+        (_a = adaptableOptsWithDefaults.adaptableStateKey) !== null && _a !== void 0 ? _a : adaptableOptsWithDefaults.adaptableId;
+    adaptableOptsWithDefaults.dataImportOptions = Object.assign({}, DefaultAdaptableOptions.dataImportOptions, adaptableOptions.dataImportOptions);
+    adaptableOptsWithDefaults.expressionOptions = Object.assign({}, DefaultAdaptableOptions.expressionOptions, adaptableOptions.expressionOptions);
+    adaptableOptsWithDefaults.calendarOptions = Object.assign({}, DefaultAdaptableOptions.calendarOptions, adaptableOptions.calendarOptions);
+    adaptableOptsWithDefaults.columnOptions = Object.assign({}, DefaultAdaptableOptions.columnOptions, adaptableOptions.columnOptions);
+    adaptableOptsWithDefaults.customSortOptions = Object.assign({}, DefaultAdaptableOptions.customSortOptions, adaptableOptions.customSortOptions);
+    adaptableOptsWithDefaults.dataSetOptions = Object.assign({}, DefaultAdaptableOptions.dataSetOptions, adaptableOptions.dataSetOptions);
+    adaptableOptsWithDefaults.cellSummaryOptions = Object.assign({}, DefaultAdaptableOptions.cellSummaryOptions, adaptableOptions.cellSummaryOptions);
+    adaptableOptsWithDefaults.predicateOptions = Object.assign({}, DefaultAdaptableOptions.predicateOptions, adaptableOptsWithDefaults.predicateOptions);
+    adaptableOptsWithDefaults.layoutOptions = Object.assign({}, DefaultAdaptableOptions.layoutOptions, adaptableOptions.layoutOptions);
+    adaptableOptsWithDefaults.notificationsOptions = Object.assign({}, DefaultAdaptableOptions.notificationsOptions, adaptableOptions.notificationsOptions);
+    adaptableOptsWithDefaults.alertOptions = Object.assign({}, DefaultAdaptableOptions.alertOptions, adaptableOptions.alertOptions);
+    adaptableOptsWithDefaults.flashingCellOptions = Object.assign({}, DefaultAdaptableOptions.flashingCellOptions, adaptableOptions.flashingCellOptions);
+    adaptableOptsWithDefaults.entitlementOptions = Object.assign({}, DefaultAdaptableOptions.entitlementOptions, adaptableOptions.entitlementOptions);
+    adaptableOptsWithDefaults.dashboardOptions = Object.assign({}, DefaultAdaptableOptions.dashboardOptions, adaptableOptions.dashboardOptions);
+    adaptableOptsWithDefaults.editOptions = Object.assign({}, DefaultAdaptableOptions.editOptions, adaptableOptions.editOptions);
+    adaptableOptsWithDefaults.actionColumnOptions = Object.assign({}, DefaultAdaptableOptions.actionColumnOptions, adaptableOptions.actionColumnOptions);
+    // to do
+    adaptableOptsWithDefaults.actionRowOptions = Object.assign({}, DefaultAdaptableOptions.actionRowOptions, adaptableOptions.actionRowOptions);
+    adaptableOptsWithDefaults.actionRowOptions.actionRowButtonOptions = Object.assign({}, DefaultAdaptableOptions.actionRowOptions.actionRowButtonOptions, adaptableOptsWithDefaults.actionRowOptions.actionRowButtonOptions);
+    adaptableOptsWithDefaults.actionRowOptions.actionRowFormOptions = Object.assign({}, DefaultAdaptableOptions.actionRowOptions.actionRowFormOptions, adaptableOptsWithDefaults.actionRowOptions.actionRowFormOptions);
+    adaptableOptsWithDefaults.containerOptions = Object.assign({}, DefaultAdaptableOptions.containerOptions, adaptableOptions.containerOptions);
+    adaptableOptsWithDefaults.groupingOptions = Object.assign({}, DefaultAdaptableOptions.groupingOptions, adaptableOptions.groupingOptions);
+    adaptableOptsWithDefaults.quickSearchOptions = Object.assign({}, DefaultAdaptableOptions.quickSearchOptions, adaptableOptions.quickSearchOptions);
+    adaptableOptsWithDefaults.columnFilterOptions = Object.assign({}, DefaultAdaptableOptions.columnFilterOptions, adaptableOptions.columnFilterOptions);
+    adaptableOptsWithDefaults.columnFilterOptions.quickFilterOptions = Object.assign({}, DefaultAdaptableOptions.columnFilterOptions.quickFilterOptions, adaptableOptsWithDefaults.columnFilterOptions.quickFilterOptions);
+    adaptableOptsWithDefaults.columnFilterOptions.filterFormOptions = Object.assign({}, DefaultAdaptableOptions.columnFilterOptions.filterFormOptions, adaptableOptsWithDefaults.columnFilterOptions.filterFormOptions);
+    adaptableOptsWithDefaults.columnFilterOptions.valuesFilterOptions = Object.assign({}, DefaultAdaptableOptions.columnFilterOptions.valuesFilterOptions, adaptableOptsWithDefaults.columnFilterOptions.valuesFilterOptions);
+    adaptableOptsWithDefaults.gridFilterOptions = Object.assign({}, DefaultAdaptableOptions.gridFilterOptions, adaptableOptions.gridFilterOptions);
+    adaptableOptsWithDefaults.userInterfaceOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions, adaptableOptions.userInterfaceOptions);
+    adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions.dateInputOptions, adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions);
+    adaptableOptsWithDefaults.menuOptions = Object.assign({}, DefaultAdaptableOptions.menuOptions, adaptableOptions.menuOptions);
+    adaptableOptsWithDefaults.stateOptions = Object.assign({}, DefaultAdaptableOptions.stateOptions, adaptableOptions.stateOptions);
+    adaptableOptsWithDefaults.exportOptions = Object.assign({}, DefaultAdaptableOptions.exportOptions, adaptableOptions.exportOptions);
+    adaptableOptsWithDefaults.teamSharingOptions = Object.assign({}, DefaultAdaptableOptions.teamSharingOptions, adaptableOptions.teamSharingOptions);
+    adaptableOptsWithDefaults.toolPanelOptions = Object.assign({}, DefaultAdaptableOptions.toolPanelOptions, adaptableOptions.toolPanelOptions);
+    adaptableOptsWithDefaults.dataChangeHistoryOptions = Object.assign({}, DefaultAdaptableOptions.dataChangeHistoryOptions, adaptableOptions.dataChangeHistoryOptions);
+    adaptableOptsWithDefaults.chartingOptions = Object.assign({}, DefaultAdaptableOptions.chartingOptions, adaptableOptions.chartingOptions);
+    adaptableOptsWithDefaults.chartingOptions.externalChartingOptions = Object.assign({}, DefaultAdaptableOptions.chartingOptions.externalChartingOptions, adaptableOptsWithDefaults.chartingOptions.externalChartingOptions);
+    adaptableOptsWithDefaults.settingsPanelOptions = Object.assign({}, DefaultAdaptableOptions.settingsPanelOptions, adaptableOptions.settingsPanelOptions);
+    adaptableOptsWithDefaults.fdc3Options = Object.assign({}, DefaultAdaptableOptions.fdc3Options, adaptableOptions.fdc3Options);
+    adaptableOptsWithDefaults.fdc3Options.actionColumnDefaultConfiguration = Object.assign({}, DefaultAdaptableOptions.fdc3Options.actionColumnDefaultConfiguration, adaptableOptsWithDefaults.fdc3Options.actionColumnDefaultConfiguration);
+    adaptableOptsWithDefaults.fdc3Options.uiControlsDefaultConfiguration = Object.assign({}, DefaultAdaptableOptions.fdc3Options.uiControlsDefaultConfiguration, adaptableOptsWithDefaults.fdc3Options.uiControlsDefaultConfiguration);
+    const { predefinedConfig } = adaptableOptsWithDefaults;
+    if (predefinedConfig) {
+        adaptableOptsWithDefaults.predefinedConfig =
+            typeof predefinedConfig === 'string'
+                ? predefinedConfig
+                : initPredefinedConfigWithUuids(predefinedConfig);
+    }
+    return adaptableOptsWithDefaults;
+}
+export const getDefaultAdaptableOptions = () => DefaultAdaptableOptions;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -29,7 +29,7 @@ export const ReactAdaptableDateEditor = forwardRef((props, ref) => {
     const valueRef = useRef(initialValue);
     const colValueParser = props.column.getColDef().valueParser;
     const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultDateValueParser;
-    const adaptable = props.api.__adaptable;
+    const adaptable = props.context.__adaptable;
     const editorRef = useRef(null);
     useImperativeHandle(ref, () => {
         return {
@@ -135,7 +135,7 @@ export class AdaptableDateEditor {
     }
     focusOut() { }
     getAdaptableInstance(params) {
-        const adaptable = params.api.__adaptable;
+        const adaptable = params.context.__adaptable;
         return adaptable;
     }
     // after this component has been created and inserted into the grid

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

@@ -35,7 +35,7 @@ export const ReactAdaptableNumberEditor = forwardRef((props, ref) => {
     const [initialValue] = useState(() => getStartValue(props));
     const valueRef = useRef(initialValue);
     const columnId = props.column.getColId();
-    const adaptable = props.api.__adaptable;
+    const adaptable = props.context.__adaptable;
     const colValueParser = props.column.getColDef().valueParser;
     const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
     function onValueChange(value) {
@@ -134,7 +134,7 @@ export class AdaptableNumberEditor {
     // after this component has been created and inserted into the grid
     afterGuiAttached() {
         var _a, _b;
-        const adaptable = this.params.api.__adaptable;
+        const adaptable = this.params.context.__adaptable;
         const defaultValue = this.value;
         const editorElement = (React.createElement(InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
                 this.editor = editor;

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

@@ -15,4 +15,4 @@ export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValu
     showWeekNumber?: boolean;
     showOutsideDays?: boolean;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "onHide" | "showClearButton" | "datepickerButtons" | "dateProps" | "showWeekNumber" | "showOutsideDays"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "showClearButton" | "onHide" | "datepickerButtons" | "dateProps" | "showWeekNumber" | "showOutsideDays"> & React.RefAttributes<HTMLInputElement>>;