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

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

@@ -88,18 +88,18 @@ const FormatColumnSettingsWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
+                        React.createElement(ToggleGroup_1.ToggleGroup, null,
+                            React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Left')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Center')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Right')
+                                    : onCellAlignmentSelectChanged(null) }))),
                     data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                            React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Left')
-                                        : onCellAlignmentSelectChanged(null) }),
-                                React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Center')
-                                        : onCellAlignmentSelectChanged(null) }),
-                                React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Right')
-                                        : onCellAlignmentSelectChanged(null) }))),
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
                             React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                                 React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -17,7 +17,7 @@ const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleAvailable()) {
+        if (!module.isModuleVisible()) {
             return null;
         }
         const items = module?.toViewAll?.();

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -14,9 +14,9 @@ const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const EnvVars_1 = require("../../../EnvVars");
-const agGridModules_1 = require("../../../agGrid/agGridModules");
+const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
-const agGridVersion = agGridModules_1.AG_GRID_VERSION;
+const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
     const api = props.api;
     const CreateGridSummaries = (colItems) => {

package/src/View/Layout/TransposedPopup.js

@@ -32,7 +32,7 @@ const TransposedPopup = (props) => {
         // customisable
         return visibleColumns
             ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getColumns();
+            : adaptable.api.columnApi.getUIAvailableColumns();
     }, []);
     /**
      * This is used as first field
@@ -162,7 +162,7 @@ const TransposedPopup = (props) => {
             rowData: transposedRowsAndColumns.transposedRows,
             sideBar: false,
         };
-        const modules = adaptable.getAgGridRegisteredModules();
+        const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const SettingsSection_1 = require("./sections/SettingsSection");
 const rebass_1 = require("rebass");
@@ -33,17 +32,17 @@ const LayoutWizard = (props) => {
         if (initialLayout) {
             preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
             if (props?.popupParams?.action === 'Clone') {
-                preparedLayout.Name = '';
-                delete preparedLayout.Uuid;
+                preparedLayout = {
+                    ...adaptable.api.layoutApi.internalApi.cloneLayout(preparedLayout),
+                    Name: '',
+                };
             }
         }
         else {
             const shouldCreatePivot = props.popupParams?.config?.layoutType === 'pivot' ||
                 props.abObjectType?.name?.toLowerCase().includes('pivot') ||
                 false;
-            preparedLayout = shouldCreatePivot
-                ? ObjectFactory_1.default.CreateEmptyPivotLayout({ Name: '' })
-                : ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+            preparedLayout = adaptable.api.layoutApi.internalApi.buildInitialLayout({ Name: '' }, shouldCreatePivot ? 'pivot' : 'table');
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
@@ -66,7 +65,6 @@ const LayoutWizard = (props) => {
                 break;
             case 'Clone':
                 const clonedLayout = { ...layout };
-                delete clonedLayout.Uuid;
                 dispatch(LayoutRedux.LayoutAdd(clonedLayout));
                 dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
                 break;

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

@@ -49,7 +49,7 @@ 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;
@@ -161,7 +161,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 = (!(0, isPivotLayout_1.isPivotLayout)(props.layout) &&
         props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
@@ -191,11 +195,29 @@ const ColumnRow = (props) => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: !props.column.resizable, onChange: (event) => {
+                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Flex" },
+                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Min Width" },
+                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Max Width" },
+                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Pinning" },
                         React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
@@ -350,12 +372,45 @@ 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) => {
@@ -387,7 +442,7 @@ const ColumnsSection = (props) => {
             React.createElement(ReorderDraggable_1.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 }),
             (0, ValueSelector_1.renderSelectionSection)({
                 options: visibleIds,

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

@@ -333,30 +333,30 @@ const PivotAggregationsSection = (props) => {
                                     label: StringExtensions_1.default.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(FormLayout_1.FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select_1.Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions_1.default.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(FormLayout_1.FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                             return {
                                 label: StringExtensions_1.default.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

@@ -22,10 +22,7 @@ const AdaptableStatusBar = (props) => {
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
     return (React.createElement(rebass_1.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

@@ -31,7 +31,7 @@ const StatusBarPopup = (props) => {
     }, [statusPanels]);
     const availableItems = Types_1.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

@@ -27,7 +27,7 @@ const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select_1.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_1.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;