@adaptabletools/adaptable 18.0.0-canary.20 → 18.0.0-canary.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "18.0.0-canary.20",
+  "version": "18.0.0-canary.22",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -10,7 +10,7 @@ import { SelectedCellInfo } from '../PredefinedConfig/Selection/SelectedCellInfo
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
-import { AdaptableMenuItem, AdaptableOptions, AdaptablePlugin, ChartDefinition, SelectedRowInfo } from '../types';
+import { AdaptableMenuItem, AdaptableOptions, AdaptablePlugin, AdaptableState, ChartDefinition, SelectedRowInfo } from '../types';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
 import { CellPopupService } from '../Utilities/Services/CellPopupService';
@@ -265,4 +265,5 @@ export interface IAdaptable {
     canExportToExcel(): boolean;
     exportToExcel(reportData: ReportData, fileName: string): void;
     exportVisualDataToExcel(): void;
+    normalizeAdaptableState(state: AdaptableState, gridOptions: GridOptions): AdaptableState;
 }

package/src/AdaptableOptions/AdaptableOptions.d.ts

@@ -65,12 +65,6 @@ export interface AdaptableOptions<TData = any> {
      * Commercial license key. If the license is not provided or is expired, various visual information notes will be displayed and some functionality may be limited.
      */
     licenseKey?: string;
-    /**
-     * Automatically migrate the state from the previous version of Adaptable to the current version.
-     *
-     * @defaultValue true
-     */
-    autoMigrateState?: boolean;
     /**
      * User State set at design-time and shipped with AdapTable for first use; can be `PredefinedConfig` object or url to file containing config
      *

package/src/AdaptableOptions/CommentOptions.d.ts

@@ -12,10 +12,16 @@ export interface CommentOptions<TData = any> {
      */
     loadCommentThreads?(commentLoadContext: CommentLoadContext): Promise<CommentThread[]>;
     /**
-     * Called when Comments change and need to be saved
+     * Saves changed Comments
      * @param commentThreads
      */
     persistCommentThreads?(commentThreads: CommentThread[]): void;
+    /**
+     * Format string for formatting in the Comments Popup
+     *
+     * @defaultValue 'dd-MM-yyyy HH:mm:ss'
+     */
+    dateFormat?: string;
 }
 /**
  * Context used when determining if a cell can show Comments

package/src/AdaptableOptions/GroupingOptions.d.ts

@@ -4,10 +4,6 @@ import { KeyCreatorParams } from '@ag-grid-community/core';
  * Options for managing Row and Column Groups in AdapTable
  */
 export interface GroupingOptions<TData = any> {
-    /**
-    * Value to use for 'Balanced Groups' (string columns only)
-    */
-    balancedGroupsKey?: string | ((context: BalancedGroupsKeyContext<TData>) => string);
     /**
      * Places ungrouped columns at pre-grouping indexed position
      * @defaultValue false

package/src/AdaptableOptions/NoteOptions.d.ts

@@ -7,13 +7,19 @@ export interface NoteOptions<TData = any> {
      * Whether a cell can contain Notes
      */
     isCellNotable?: (context: NotableCellContext) => boolean;
+    /**
+     * Format string for formatting in the Notes Popup
+     *
+     * @defaultValue 'dd-MM-yyyy HH:mm:ss'
+     */
+    dateFormat?: string;
 }
 /**
  * Context used when determining if a Note can be added to a Cell
  */
 export interface NotableCellContext extends BaseContext {
     /**
-      * Grid Cell in AdapTable which has been clicked
-      */
+     * Grid Cell in AdapTable which has been clicked
+     */
     gridCell: GridCell;
 }

package/src/AdaptableOptions/StateOptions.d.ts

@@ -33,6 +33,12 @@ export interface StateOptions {
      * @defaultValue 400
      */
     debounceStateDelay?: number;
+    /**
+     * Automatically migrate the state from the previous version of Adaptable to the current version.
+     *
+     * @defaultValue true
+     */
+    autoMigrateState?: boolean;
 }
 /**
  * State Function Config object passed into all State Options functions (except 'applyState')

package/src/Api/ColumnApi.d.ts

@@ -266,4 +266,9 @@ export interface ColumnApi {
      * Returns available columns types defined under columnOptions.columnTypes
      */
     getColumnTypes(): string[];
+    /**
+     * Returns all columns of a given columnType
+     * @param columnType the columnType to filter by
+     */
+    getColumnsByColumnType(columnType: string): AdaptableColumn[];
 }

package/src/Api/CommentApi.d.ts

@@ -8,9 +8,9 @@ export interface CommentApi {
      * Add a Comment to a Comment Thread
      *
      * @param comment comment
-     * @param address where the comment should be added
+     * @param cellAddress cell where comment is added
      */
-    addComment(commentText: string, address: CellAddress): void;
+    addComment(commentText: string, cellAddress: CellAddress): void;
     /**
      * Edit a Comment
      *

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -3,6 +3,8 @@ import { AdaptableColumn, AdaptableColumnDataType } from '../../PredefinedConfig
 import { ColumnApi } from '../ColumnApi';
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { ColumnInternalApi } from '../Internal/ColumnInternalApi';
+export declare function isAutoRowGroupColumn(columnId: string): boolean;
+export declare function isAutoPivotColumn(columnId: string): boolean;
 export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     internalApi: ColumnInternalApi;
     constructor(adaptable: IAdaptable);
@@ -64,4 +66,5 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     isSpecialColumn(columnId: string): boolean;
     openColumnInfoSettingsPanel(): void;
     getColumnTypes(): string[];
+    getColumnsByColumnType(columnType: string): AdaptableColumn[];
 }

package/src/Api/Implementation/ColumnApiImpl.js

@@ -4,6 +4,16 @@ import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { ColumnInternalApi } from '../Internal/ColumnInternalApi';
 import { createBaseContext } from '../../Utilities/ObjectFactory';
+export function isAutoRowGroupColumn(columnId) {
+    // put this here as there might be other indicators we are not aware of
+    // perhaps with non auto groups ?
+    //https://www.ag-grid.com/javascript-grid-grouping/
+    return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_GROUPED_COLUMN);
+}
+export function isAutoPivotColumn(columnId) {
+    // put this here as there might be other indicators we are not aware of?
+    return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_PIVOT_COLUMN);
+}
 export class ColumnApiImpl extends ApiBase {
     constructor(adaptable) {
         super(adaptable);
@@ -52,14 +62,10 @@ export class ColumnApiImpl extends ApiBase {
         this.adaptable.showColumn(columnId);
     }
     isAutoRowGroupColumn(columnId) {
-        // put this here as there might be other indicators we are not aware of
-        // perhaps with non auto groups ?
-        //https://www.ag-grid.com/javascript-grid-grouping/
-        return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_GROUPED_COLUMN);
+        return isAutoRowGroupColumn(columnId);
     }
     isAutoPivotColumn(columnId) {
-        // put this here as there might be other indicators we are not aware of?
-        return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_PIVOT_COLUMN);
+        return isAutoPivotColumn(columnId);
     }
     isCalculatedColumn(columnId) {
         return (this.adaptable.api.calculatedColumnApi
@@ -343,4 +349,11 @@ export class ColumnApiImpl extends ApiBase {
             return columnTypes;
         }
     }
+    getColumnsByColumnType(columnType) {
+        const abColumns = this.getColumns();
+        return abColumns.filter((c) => {
+            var _a;
+            return ((_a = c.columnTypes) !== null && _a !== void 0 ? _a : []).includes(columnType);
+        });
+    }
 }

package/src/Api/Implementation/ConfigApiImpl.js

@@ -133,6 +133,9 @@ export class ConfigApiImpl extends ApiBase {
                         adaptable: this.adaptable,
                         adaptableStateKey,
                         predefinedConfig,
+                        postLoadHook: (state) => {
+                            return this.adaptable.normalizeAdaptableState(state, this.adaptable.agGridAdapter.getLiveGridOptions());
+                        },
                     });
                     promise
                         .then(() => {

package/src/Api/Implementation/GridApiImpl.js

@@ -526,11 +526,12 @@ export class GridApiImpl extends ApiBase {
         return this.getRowCount();
     }
     showTransposedView(transposeConfig = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const transposedColumnId = (_a = transposeConfig.transposedColumnId) !== null && _a !== void 0 ? _a : this.getAdaptableApi().optionsApi.getPrimaryKey();
         const hideTransposedColumn = (_b = transposeConfig.hideTransposedColumn) !== null && _b !== void 0 ? _b : true;
         const visibleColumns = (_c = transposeConfig.visibleColumns) !== null && _c !== void 0 ? _c : false;
         const visibleRows = (_d = transposeConfig.visibleRows) !== null && _d !== void 0 ? _d : false;
+        const autosize = (_e = transposeConfig.autosize) !== null && _e !== void 0 ? _e : true;
         this.adaptable.api.internalApi.showPopupWindow({
             id: WINDOW_SHOW_TRANSPOSED_VIEW,
             factoryId: WINDOW_SHOW_TRANSPOSED_VIEW,
@@ -541,6 +542,7 @@ export class GridApiImpl extends ApiBase {
                 hideTransposedColumn,
                 visibleColumns,
                 visibleRows,
+                autosize,
             },
         });
     }

package/src/Api/Implementation/ScopeApiImpl.js

@@ -43,7 +43,9 @@ export class ScopeApiImpl extends ApiBase {
             return 'Columns: All';
         }
         if ('ColumnTypes' in scope) {
-            return ((scope.ColumnTypes.length > 0 ? 'ColumnTypes' : 'ColumnType') + ': ' + scope.ColumnTypes.join(', '));
+            return ((scope.ColumnTypes.length > 0 ? 'ColumnTypes' : 'ColumnType') +
+                ': ' +
+                scope.ColumnTypes.join(', '));
         }
         if ('DataTypes' in scope) {
             return ((scope.DataTypes.length > 0 ? 'DataTypes' : 'DataType') + ': ' + scope.DataTypes.join(', '));
@@ -160,6 +162,7 @@ export class ScopeApiImpl extends ApiBase {
         return undefined;
     }
     isColumnInNumericScope(column, scope) {
+        var _a, _b;
         // if column is not even numeric then return false
         if (column == null || column == undefined || column.dataType !== 'Number') {
             return false;
@@ -176,9 +179,14 @@ export class ScopeApiImpl extends ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('Number')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isColumnInStringsScope(column, scope) {
+        var _a, _b;
         // if column is not even string then return false
         if (column == null || column == undefined || column.dataType !== 'String') {
             return false;
@@ -195,9 +203,14 @@ export class ScopeApiImpl extends ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('String')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isColumnInDateScope(column, scope) {
+        var _a, _b;
         // if column is not even numeric then return false
         if (column == null || column == undefined || column.dataType !== 'Date') {
             return false;
@@ -214,6 +227,10 @@ export class ScopeApiImpl extends ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('Date')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isScopeInScope(a, b) {
@@ -240,6 +257,22 @@ export class ScopeApiImpl extends ApiBase {
             })) {
             return true;
         }
+        if ('ColumnTypes' in a &&
+            'ColumnTypes' in b &&
+            a.ColumnTypes.every((columnType) => b.ColumnTypes.includes(columnType))) {
+            return true;
+        }
+        // check if each colum in a has column types in b
+        if ('ColumnIds' in a && 'ColumnTypes' in b) {
+            const inScope = a.ColumnIds.every((columnId) => {
+                const column = this.adaptable.api.columnApi.getColumnWithColumnId(columnId);
+                // check if at least one column-type is in scope
+                return column.columnTypes.some((columnColumnType) => b.ColumnTypes.includes(columnColumnType));
+            });
+            if (inScope) {
+                return true;
+            }
+        }
         return false;
     }
     createCellColorRangesForScope(scope) {

package/src/Api/Internal/ActionRowInternalApi.d.ts

@@ -16,6 +16,7 @@ export declare class ActionRowInternalApi extends ApiBase {
     private buildActionRowFields;
     private showColumnInActionRowForm;
     private buidActionRowButtons;
+    private prepareCreateData;
     private prepareEditData;
     private isColumnEditable;
     private buildFormField;

package/src/Api/Internal/ActionRowInternalApi.js

@@ -100,7 +100,7 @@ export class ActionRowInternalApi extends ApiBase {
                 const eventInfo = type === 'rowCreated'
                     ? {
                         type: 'rowCreated',
-                        formData: context.formData,
+                        formData: this.prepareCreateData(formFields, context),
                         adaptableApi: context.adaptableApi,
                         userName: this.getOptions().userName,
                         adaptableId: this.getOptions().adaptableId,
@@ -120,6 +120,17 @@ export class ActionRowInternalApi extends ApiBase {
         };
         return [cancelButton, saveButton];
     }
+    // private getNullValueForColumn(column: AdaptableColumn) {}
+    prepareCreateData(formFields, context) {
+        // when creating we just omit values that are not set
+        const dataToSave = Object.assign({}, context.formData);
+        for (const formField of formFields) {
+            if (dataToSave[formField.name] === '') {
+                delete dataToSave[formField.name];
+            }
+        }
+        return dataToSave;
+    }
     prepareEditData(formFields, context) {
         const dataToSave = Object.assign({}, context.formData);
         for (const formField of formFields) {

package/src/Api/Internal/ColumnInternalApi.d.ts

@@ -2,6 +2,7 @@ import { ApiBase } from '../Implementation/ApiBase';
 import { Column, IRowNode } from '@ag-grid-community/core';
 import { CustomSort } from '../../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../../AdaptableOptions/CustomSortOptions';
+export declare function getAutoRowGroupColumnIdFor(columnId: string): string;
 export declare class ColumnInternalApi extends ApiBase {
     /**
      * Retrieves 'ColumnType' property for a given Column
@@ -15,6 +16,7 @@ export declare class ColumnInternalApi extends ApiBase {
      * Retrieves a list providing the Friendly Name / Caption for all columns
      */
     getAllColumnFriendlyNames(): string[];
+    getAutoRowGroupColumnIdFor(columnId: string): string;
     /**
      * Retrieves AG Grid's field property for the column
      * @param columnId columnId to look up

package/src/Api/Internal/ColumnInternalApi.js

@@ -1,5 +1,8 @@
 import { ApiBase } from '../Implementation/ApiBase';
-import { ADAPTABLE_ROW_ACTION_BUTTONS } from '../../Utilities/Constants/GeneralConstants';
+import { ADAPTABLE_ROW_ACTION_BUTTONS, AG_GRID_GROUPED_COLUMN, } from '../../Utilities/Constants/GeneralConstants';
+export function getAutoRowGroupColumnIdFor(columnId) {
+    return `${AG_GRID_GROUPED_COLUMN}-${columnId}`;
+}
 export class ColumnInternalApi extends ApiBase {
     /**
      * Retrieves 'ColumnType' property for a given Column
@@ -21,6 +24,9 @@ export class ColumnInternalApi extends ApiBase {
             return c.friendlyName;
         });
     }
+    getAutoRowGroupColumnIdFor(columnId) {
+        return getAutoRowGroupColumnIdFor(columnId);
+    }
     /**
      * Retrieves AG Grid's field property for the column
      * @param columnId columnId to look up

package/src/PredefinedConfig/Common/TransposeConfig.d.ts

@@ -22,4 +22,9 @@ export interface TransposeConfig {
       * @defaultValue false
       */
     visibleRows?: boolean;
+    /**
+     * Autosize columns in transposed view
+     * @defaultValue true
+     */
+    autosize?: boolean;
 }

package/src/Strategy/LayoutModule.js

@@ -39,6 +39,9 @@ export class LayoutModule extends AdaptableModuleBase {
         this.rowSummariesSubscribtions();
     }
     rowSummariesSubscribtions() {
+        if (this.api.isDestroyed()) {
+            return;
+        }
         // ROW SUMMARY
         this.evaluateRowSummary();
         this.api.eventApi.on('AdaptableStateReloaded', () => {
@@ -468,6 +471,9 @@ export class LayoutModule extends AdaptableModuleBase {
      */
     evaluateRowSummary(reason) {
         var _a;
+        if (this.api.isDestroyed()) {
+            return;
+        }
         const currentLayout = this.api.layoutApi.getCurrentLayout();
         const rowSummaries = (_a = this.api.layoutApi.getCurrentLayout().RowSummaries) !== null && _a !== void 0 ? _a : [];
         const rowSummariesResults = rowSummaries.map(({ ColumnsMap, Position }) => {

package/src/Utilities/Constants/GeneralConstants.d.ts

@@ -35,6 +35,7 @@ export declare const ADAPTABLE_ROW_ACTION_BUTTONS = "adaptableRowActionButtons";
 export declare const ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = "(ActionRowButtons)";
 export declare const ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = "(FDC3ActionColumn)";
 export declare const DEFAULT_DATE_FORMAT_PATTERN = "dd-MM-yyyy";
+export declare const DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME = "dd-MM-yyyy HH:mm:ss";
 export declare const BLANK_DISTINCT_COLUMN_VALUE = "[BLANKS]";
 export declare const DEFAULT_STRING_DISPLAY_VALUE = "Hello World";
 export declare const DEFAULT_INTEGER_DISPLAY_VALUE = 12345;

package/src/Utilities/Constants/GeneralConstants.js

@@ -34,6 +34,7 @@ export const ADAPTABLE_ROW_ACTION_BUTTONS = 'adaptableRowActionButtons';
 export const ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = '(ActionRowButtons)';
 export const ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = '(FDC3ActionColumn)';
 export const DEFAULT_DATE_FORMAT_PATTERN = 'dd-MM-yyyy';
+export const DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME = 'dd-MM-yyyy HH:mm:ss';
 export const BLANK_DISTINCT_COLUMN_VALUE = '[BLANKS]';
 export const DEFAULT_STRING_DISPLAY_VALUE = 'Hello World';
 export const DEFAULT_INTEGER_DISPLAY_VALUE = 12345;

package/src/View/Comments/CommentsPopup.js

@@ -3,10 +3,11 @@ import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Box, Flex } from 'rebass';
-import { formatDate } from '../../Utilities/ExpressionFunctions/dateUtils';
+import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
+import { DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -14,7 +15,9 @@ const tableDOMProps = {
     },
 };
 const CellComments = (props) => {
+    var _a;
     const adaptable = useAdaptable();
+    const dateFormat = (_a = adaptable.api.optionsApi.getCommentOptions().dateFormat) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
         const columns = {
@@ -27,7 +30,7 @@ const CellComments = (props) => {
                 field: 'Timestamp',
                 maxWidth: 150,
                 valueGetter: (params) => {
-                    return formatDate(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
+                    return dateFnsFormat(params.data.Timestamp, dateFormat);
                 },
             },
             text: {

package/src/View/Components/CellPopup/index.js

@@ -13,7 +13,7 @@ const ensurePortalElement = (className) => {
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
-    portalElement.style.zIndex = '999';
+    portalElement.style.zIndex = '4'; // under the context menu
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
     if (className) {

package/src/View/Components/FilterForm/QuickFilterValues.js

@@ -6,6 +6,7 @@ import { isSameDay } from 'date-fns';
 import OverlayTrigger from '../../../components/OverlayTrigger';
 import { Flex } from 'rebass';
 import { ListBoxFilterForm } from './ListBoxFilterForm';
+import { Resizable } from 're-resizable';
 export const QuickFilterValues = (props) => {
     const { api } = props;
     const currentOverlayVisible = useRef(false);
@@ -135,33 +136,48 @@ export const QuickFilterValues = (props) => {
             }
         }, render: ({ targetWidth }) => {
             var _a;
-            return (React.createElement(Flex, { onMouseEnter: () => {
-                    if (showEvent === 'click') {
-                        // For showEvent=mousenter this is not needed.
-                        // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
-                        // But in this case because the trigger is click, another show is not triggered.
-                        // The hide event is added direcly on the element so it does not use the React event system.
-                        // But this event does, maybe beause it uses event delegation it is triggered to soon.
-                        requestAnimationFrame(() => {
-                            var _a;
-                            (_a = valuesDropdownRef.current) === null || _a === void 0 ? void 0 : _a.show();
-                        });
-                    }
-                }, "data-name": "quick-filter-form", flexDirection: "column", style: {
+            return (React.createElement(Resizable, { style: {
                     fontSize: 'var(--ab-font-size-2)',
                     border: '1px solid var(--ab-color-primarydark)',
                     background: 'var(--ab-color-defaultbackground)',
                     zIndex: 1000,
-                    width: getPopoverWidth(targetWidth),
-                } },
-                React.createElement(Flex, { m: 2 },
-                    React.createElement(SimpleButton, { onClick: () => clearColumnFilter() }, "Clear Filter"),
-                    ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton, { ml: 2, onClick: () => {
-                            if (transientColumnFilter) {
-                                props.updateColumnFilter(transientColumnFilter);
-                            }
-                        } }, "Apply Filter"))),
-                React.createElement(ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) })));
+                }, enable: {
+                    top: false,
+                    right: true,
+                    bottom: false,
+                    left: false,
+                    topRight: false,
+                    bottomRight: false,
+                    bottomLeft: false,
+                    topLeft: false,
+                }, minWidth: getPopoverWidth(targetWidth) },
+                React.createElement(Flex, { onMouseEnter: () => {
+                        if (showEvent === 'click') {
+                            // For showEvent=mousenter this is not needed.
+                            // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
+                            // But in this case because the trigger is click, another show is not triggered.
+                            // The hide event is added direcly on the element so it does not use the React event system.
+                            // But this event does, maybe beause it uses event delegation it is triggered to soon.
+                            requestAnimationFrame(() => {
+                                var _a;
+                                (_a = valuesDropdownRef.current) === null || _a === void 0 ? void 0 : _a.show();
+                            });
+                        }
+                    }, "data-name": "quick-filter-form", flexDirection: "column", style: {
+                    // fontSize: 'var(--ab-font-size-2)',
+                    // border: '1px solid var(--ab-color-primarydark)',
+                    // background: 'var(--ab-color-defaultbackground)',
+                    // zIndex: 1000,
+                    // width: getPopoverWidth(targetWidth),
+                    } },
+                    React.createElement(Flex, { m: 2 },
+                        React.createElement(SimpleButton, { onClick: () => clearColumnFilter() }, "Clear Filter"),
+                        ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton, { ml: 2, onClick: () => {
+                                if (transientColumnFilter) {
+                                    props.updateColumnFilter(transientColumnFilter);
+                                }
+                            } }, "Apply Filter"))),
+                    React.createElement(ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) }))));
         } },
         React.createElement(SimpleButton, { "data-name": 'Select Values', style: {
                 flex: 1,

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -132,7 +132,7 @@ export const DataImportWizard = (props) => {
         return [...userDefinedHandlers, ...systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
-        return fileHandlers.map((h) => h.fileExtension).join(', ');
+        return [...new Set(fileHandlers.map((h) => h.fileExtension)).values()].join(', ');
     }, [fileHandlers]);
     const readFile = React.useCallback(async (file) => {
         var _a, _b;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -143,6 +143,19 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
@@ -189,7 +202,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -248,13 +261,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, { mr: 3 },
                         React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Integer Separator" },
-                            React.createElement(Input, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Truncate" },
                             React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormRow, { label: "Ceiling" },
@@ -279,7 +292,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Input, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),