@adaptabletools/adaptable 20.3.0 → 21.0.0-canary.1

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -45,7 +45,7 @@ export const ColumnsSectionSummary = () => {
             }
             const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
             const header = layout.ColumnHeaders?.[columnId] ?? '';
-            const columnWidth = layout.ColumnWidths?.[columnId];
+            const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
             const columnPinning = layout.ColumnPinning?.[columnId];
             let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
             agg = typeof agg === 'object' ? agg.type : agg;
@@ -156,7 +156,11 @@ const ColumnRow = (props) => {
     ];
     const { column } = props;
     // width
-    const columnWidth = props.layout.ColumnWidths?.[column.columnId];
+    const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
+    const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
+    const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
+    const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
+    const resizable = column.resizable !== false;
     const visible = (!isPivotLayout(props.layout) &&
         props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
@@ -186,11 +190,29 @@ const ColumnRow = (props) => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },
-                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: !props.column.resizable, onChange: (event) => {
+                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
-                            }, value: columnWidth })),
+                            }, value: columnWidth ?? '' })),
+                    React.createElement(FormRow, { label: "Flex" },
+                        React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnFlexChange(props.column.columnId, value);
+                            }, value: columnFlex ?? '' })),
+                    React.createElement(FormRow, { label: "Min Width" },
+                        React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMinWidthChange(props.column.columnId, value);
+                            }, value: minWidth ?? '' })),
+                    React.createElement(FormRow, { label: "Max Width" },
+                        React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMaxWidthChange(props.column.columnId, value);
+                            }, value: maxWidth ?? '' })),
                     React.createElement(FormRow, { label: "Pinning" },
                         React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
@@ -345,12 +367,45 @@ export const ColumnsSection = (props) => {
         });
     };
     const handleColumnWidthChange = (columnId, width) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Flex;
+        colSizingForCol.Width = width;
+        ColumnSizing[columnId] = colSizingForCol;
         onChange({
             ...layout,
-            ColumnWidths: {
-                ...layout.ColumnWidths,
-                [columnId]: width,
-            },
+            ColumnSizing,
+        });
+    };
+    const handleColumnFlexChange = (columnId, flex) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Width;
+        colSizingForCol.Flex = flex;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMinWidthChange = (columnId, minWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MinWidth = minWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MaxWidth = maxWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
         });
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
@@ -382,7 +437,7 @@ export const ColumnsSection = (props) => {
             React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
                     return option.moveable;
                 }, order: currentOrder, renderOption: (option) => {
-                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                 }, onChange: handleColumnsChange }),
             renderSelectionSection({
                 options: visibleIds,

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -327,30 +327,30 @@ export const PivotAggregationsSection = (props) => {
                                     label: StringExtensions.CamelCaseToHumanText(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.GrandTotalRow, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     GrandTotalRow: value,
                                 });
                             }, isClearable: true })),
                     React.createElement(FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions.CapitaliseFirstLetter(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.PivotGrandTotal, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.PivotGrandTotal, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     PivotGrandTotal: value,
                                 });
                             }, isClearable: true })),
-                    React.createElement(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                    React.createElement(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                             return {
                                 label: StringExtensions.CapitaliseFirstLetter(position),
                                 value: position,
                             };
-                        }), placeholder: "Off", value: layout.PivotColumnTotal, onChange: (value) => {
+                        }), placeholder: "[none]", value: layout.PivotColumnTotal, onChange: (value) => {
                             props.onChange({
                                 ...layout,
                                 PivotColumnTotal: value,

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -18,10 +18,7 @@ export const AdaptableStatusBar = (props) => {
     const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     return (React.createElement(Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
         const module = adaptable.ModuleService.getModuleById(subPanel);
-        if (!module) {
-            return React.createElement(React.Fragment, { key: subPanel });
-        }
-        if (!module.isModuleAvailable()) {
+        if (!module?.isModuleVisible()) {
             return React.createElement(React.Fragment, { key: subPanel });
         }
         /**

package/src/View/StatusBar/StatusBarPopup.js

@@ -27,7 +27,7 @@ export const StatusBarPopup = (props) => {
     }, [statusPanels]);
     const availableItems = ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
-        return module && module.isModuleAvailable();
+        return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };

package/src/View/Theme/ThemeSelector.js

@@ -23,7 +23,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -21,7 +21,7 @@ import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
 import { AgGridMenuAdapter } from './AgGridMenuAdapter';
-import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
+import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, InFilterValue, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
@@ -31,6 +31,8 @@ import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { PivotLayoutModel, TableLayoutModel } from '../layout-manager/src/LayoutManagerModel';
 import { AgGridThemeAdapter } from './AgGridThemeAdapter';
+import { AgGridModulesAdapter } from './AgGridModulesAdapter';
+import { EditColumnValueInfo } from '../AdaptableOptions/EditOptions';
 export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'agGridReady' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
 interface AdaptableInitInternalConfig<TData = any> {
@@ -73,6 +75,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     agGridMenuAdapter: AgGridMenuAdapter;
     agGridExportAdapter: AgGridExportAdapter;
     agGridThemeAdapter: AgGridThemeAdapter;
+    agGridModulesAdapter: AgGridModulesAdapter;
     private DANGER_USE_GETTER_adaptableContainerElement;
     private DANGER_USE_GETTER_agGridContainerElement;
     api: AdaptableApi;
@@ -146,7 +149,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private normaliseToolPanelState;
     private getCurrentLayoutModel;
     silentUpdateCurrentLayoutModel(layoutModel?: TableLayoutModel | PivotLayoutModel): void;
-    applyFiltering(): void;
+    applyFiltering(config?: {
+        updateColumnFilterModel?: boolean;
+    }): void;
     showQuickFilter(): void;
     hideQuickFilter(): void;
     private normalizeAdaptableOptions;
@@ -156,7 +161,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     private initializeAgGrid;
     useRowNodeLookUp(): boolean;
-    getAgGridRegisteredModules(): Module[];
     getAgGridContainerElement(): HTMLElement | null;
     getAdaptableContainerElement(): HTMLElement;
     refreshSelectedCellsState(): SelectedCellInfo | undefined;
@@ -181,6 +185,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     private temporaryAdaptableStateUpdates;
     private validatePrimaryKey;
+    isInPivotMode(): boolean;
     private deriveAdaptableColumnStateFromAgGrid;
     private checkShouldClearExistingFiltersOrSearches;
     getGridCellFromRowNode(rowNode: IRowNode, columnId: string): GridCell | undefined;
@@ -252,14 +257,13 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getDistinctFilterValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;
-    }): Promise<GridCell[]>;
+    }): Promise<InFilterValue[]>;
     getDistinctEditValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;
         gridCell?: GridCell;
-    }): Promise<GridCell[]>;
-    getDistinctGridCellsForColumn(column: AdaptableColumn): GridCellWithCount[];
-    private getGridCellsForCustomColumnValues;
+    }): Promise<EditColumnValueInfo[]>;
+    getDistinctGridCellsForColumn(column: AdaptableColumn, rowNodes?: IRowNode[]): GridCellWithCount[];
     private addDistinctColumnValue;
     private getUniqueGridCells;
     getGridCellsForColumn(columnId: string, onlyVisibleRows?: boolean): GridCell[] | undefined;