@adaptabletools/adaptable 20.0.0-canary.2 → 20.0.0-canary.20

package/src/agGrid/AgGridExportAdapter.js

@@ -29,6 +29,9 @@ export class AgGridExportAdapter {
     get exportOptions() {
         return this._adaptableInstance.api.optionsApi.getExportOptions();
     }
+    get logger() {
+        return this._adaptableInstance.logger;
+    }
     static getExcelClassNameForCell(colId, primaryKeyValue, userDefinedCellClass) {
         let excelClassName = `--excel-cell-${colId}-${primaryKeyValue}`;
         if (excelClassName.indexOf(' ') > 0) {
@@ -57,14 +60,12 @@ export class AgGridExportAdapter {
                 await waitForTimeout(16);
             }
             this.adaptableApi.exportApi.internalApi.setExportInProgress(config.report.Name, config.format, config.destination);
-            const exportContext = this.buildExportProcessContext(config);
+            const { exportContext, exportParams } = this.buildExportProcessData(config);
             if (exportContext.isVisualExcelReport) {
                 // FIXME AFL patch styles only for exported columns!
                 // or even better, only cells
                 this.patchExcelStyles();
             }
-            const exportParams = this.buildExportParams(exportContext);
-            exportContext.exportedColumnIds = exportParams.columnKeys;
             // 1. easiest case, we download the file using AG Grid
             // these methods will automatically handle the file download
             if (exportContext.destination === 'Download' && exportContext.isExcelReport) {
@@ -98,8 +99,7 @@ export class AgGridExportAdapter {
             };
         }
         catch (error) {
-            // FIXME AFL improve logging
-            console.error(error);
+            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error);
         }
         finally {
             /**
@@ -114,6 +114,21 @@ export class AgGridExportAdapter {
             }
         }
     }
+    /**
+     * Creates export context and parameters for a given export configuration
+     */
+    buildExportProcessData(config) {
+        const exportContext = this.buildExportProcessContext(config);
+        if (exportContext.isVisualExcelReport) {
+            this.patchExcelStyles();
+        }
+        const exportParams = this.buildExportParams(exportContext);
+        exportContext.exportedColumnIds = exportParams.columnKeys;
+        return {
+            exportContext,
+            exportParams,
+        };
+    }
     buildExportParams(exportContext) {
         const baseExportParams = this.buildBaseExportParams(exportContext);
         if (exportContext.format === 'Excel' || exportContext.format === 'VisualExcel') {
@@ -652,9 +667,9 @@ export class AgGridExportAdapter {
             .map((columnId) => this.adaptableApi.columnApi.getColumnWithColumnId(columnId))
             .map((column) => ({
             columnId: column.columnId,
+            field: column.field ?? column.columnId,
             friendlyName: column.friendlyName,
             dataType: column.dataType,
-            field: column.field ?? column.columnId,
         }));
         const reportData = {
             columns,
@@ -726,27 +741,11 @@ export class AgGridExportAdapter {
                 masterRowNode: node,
                 masterRowData: node?.data,
                 isExpanded: node.expanded,
-                createCellCsv: (cellContent) => {
-                    return {
-                        data: {
-                            value: cellContent != undefined ? String(cellContent) : null,
-                        },
-                    };
-                },
-                createCellExcel: (cellContent, cellType) => {
-                    return {
-                        data: {
-                            value: cellContent != undefined ? String(cellContent) : null,
-                            type: cellType,
-                        },
-                    };
-                },
+                createCellCsv: (cellContent) => this.adaptableApi.exportApi.internalApi.createCellCsv(cellContent),
+                createCellExcel: (cellContent, cellType) => this.adaptableApi.exportApi.internalApi.createCellExcel(cellContent, cellType),
                 createCellHeader: (cellContent) => {
                     return {
-                        data: {
-                            value: cellContent != undefined ? String(cellContent) : null,
-                            type: 'String',
-                        },
+                        ...this.adaptableApi.exportApi.internalApi.createCellHeader(cellContent),
                         // see #masterDetailHeader
                         styleId: '_masterDetailHeader',
                     };

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -0,0 +1,19 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { AgGridThemeMode } from './AgGridAdapter';
+import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
+export declare class AgGridThemeAdapter {
+    private _adaptableInstance;
+    private agGridThemeMode;
+    constructor(_adaptableInstance: AdaptableAgGrid);
+    destroy(): void;
+    get logger(): import("./AdaptableLogger").AdaptableLogger;
+    get api(): import("../types").AdaptableApi;
+    setAgGridThemeMode(themeMode: AgGridThemeMode): void;
+    getAgGridThemeMode(): AgGridThemeMode;
+    applyAgGridThemeOnAdaptableThemeChange(adaptableTheme: AdaptableTheme, variantTheme: string, agGridContainer: HTMLElement, themesToRemove: AdaptableTheme[]): void;
+    private getAgGridContainerElement;
+    private legacy_applyAgGridThemeOnAdaptableThemeChange;
+    getAgGridCurrentThemeClassNames(): string;
+    private getAgGridLightThemeName;
+    private legacy_getAgGridCurrentThemeClassNames;
+}

package/src/agGrid/AgGridThemeAdapter.js

@@ -0,0 +1,122 @@
+import { DARK_THEME, LIGHT_THEME } from '../Utilities/Constants/GeneralConstants';
+export class AgGridThemeAdapter {
+    constructor(_adaptableInstance) {
+        this._adaptableInstance = _adaptableInstance;
+    }
+    destroy() { }
+    get logger() {
+        return this._adaptableInstance.logger;
+    }
+    get api() {
+        return this._adaptableInstance.api;
+    }
+    setAgGridThemeMode(themeMode) {
+        this.agGridThemeMode = themeMode;
+    }
+    getAgGridThemeMode() {
+        return this.agGridThemeMode;
+    }
+    applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove) {
+        if (this.agGridThemeMode === 'legacy') {
+            this.legacy_applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove);
+        }
+        const themeName = adaptableTheme.Name;
+        const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
+        if (adaptableTheme && (isSystemTheme || variantTheme)) {
+            if ((variantTheme || themeName) === LIGHT_THEME) {
+                document.body.dataset.agThemeMode = 'light';
+            }
+            if ((variantTheme || themeName) === DARK_THEME) {
+                document.body.dataset.agThemeMode = 'dark';
+            }
+        }
+    }
+    getAgGridContainerElement() {
+        return this._adaptableInstance.getAgGridContainerElement();
+    }
+    legacy_applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove) {
+        const themeName = adaptableTheme.Name;
+        const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
+        const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
+        const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
+        if (adaptableTheme && (isSystemTheme || variantTheme)) {
+            if ((variantTheme || themeName) === LIGHT_THEME) {
+                adaptableTheme.AgGridClassName =
+                    adaptableTheme.AgGridClassName || getAgGridLightThemeName();
+            }
+            if ((variantTheme || themeName) === DARK_THEME) {
+                adaptableTheme.AgGridClassName = adaptableTheme.AgGridClassName || getAgGridDarkThemeName();
+            }
+        }
+        if (!adaptableTheme.AgGridClassName) {
+            // default AG Grid to its light theme
+            adaptableTheme.AgGridClassName = getAgGridLightThemeName();
+        }
+        if (agGridContainer != null) {
+            if (themesToRemove.length) {
+                themesToRemove.forEach((theme) => {
+                    if (theme.AgGridClassName) {
+                        agGridContainer.classList.remove(theme.AgGridClassName);
+                    }
+                });
+            }
+            // also remove all AG Grid theme class names
+            const agGridClassNamesToRemove = [];
+            agGridContainer.classList.forEach((x) => {
+                if (x && x.indexOf('ag-theme-') === 0) {
+                    agGridClassNamesToRemove.push(x);
+                }
+            });
+            agGridClassNamesToRemove.forEach((x) => agGridContainer.classList.remove(x));
+            if (adaptableTheme && adaptableTheme.AgGridClassName) {
+                agGridContainer.classList.add(adaptableTheme.AgGridClassName);
+            }
+        }
+    }
+    getAgGridCurrentThemeClassNames() {
+        if (this.agGridThemeMode === 'legacy') {
+            this.legacy_getAgGridCurrentThemeClassNames();
+        }
+        const currentAgGridTheme = this._adaptableInstance.agGridAdapter.getGridOption('theme');
+        if (currentAgGridTheme === 'legacy') {
+            return this.legacy_getAgGridCurrentThemeClassNames();
+        }
+        // @ts-ignore no other way than to use internals
+        const currentAgGridTheme__cssClassCache = currentAgGridTheme?._cssClassCache;
+        return currentAgGridTheme__cssClassCache ?? '';
+    }
+    getAgGridLightThemeName() {
+        const container = this.getAgGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    // even if dark theme is included, we compute the light theme name out of it
+                    return cls.replace('-dark', '');
+                }
+            }
+        }
+        else {
+            this.logger.warn('No AgGrid container found, defaulting to ag-theme-balham for the light theme');
+        }
+        this.logger.warn('No ag-theme- class found on the grid container, defaulting to ag-theme-balham');
+        // fallback to the default light theme
+        return 'ag-theme-balham';
+    }
+    legacy_getAgGridCurrentThemeClassNames() {
+        const container = this.getAgGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    return cls;
+                }
+            }
+        }
+        return this.getAgGridLightThemeName();
+    }
+}

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -35,7 +35,8 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            if (['NumberArray', 'StringArray'].includes(abColumn.dataType)) {
+            const arrayTypes = ['numberArray', 'textArray'];
+            if (arrayTypes.includes(abColumn.dataType)) {
                 this.renderArrayValues(params, adaptableApi);
             }
             else {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import parseISO from 'date-fns/parseISO';
+import { parseISO } from 'date-fns';
 import useProperty from '../../../components/utils/useProperty';
 import AdaptableInput from '../../../View/Components/AdaptableInput';
 import { DatepickerContext } from '../../../components/Datepicker/DatepickerContext';

package/src/components/ColorPicker/ColorPicker.js

@@ -31,11 +31,11 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
-            }, list: "ABcolorChoices" }),
+            }, list: "ABcolorChoices", title: props.title }),
         ABcolorChoices,
         includeAlpha && (React.createElement(Flex, { alignItems: "center" },
             React.createElement(Box, { mr: 1 }, "Opacity"),
-            React.createElement(Input, { className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+            React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
                     props.onChange(color);
                 }, min: 0, max: 1, step: 0.01, type: "range" })))));

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Locale } from 'date-fns';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { DatepickerButton } from '../../AdaptableOptions/DateInputOptions';
+import { Locale } from 'date-fns';
 export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValue'> & {
     value: Date | undefined;
     defaultValue?: Date | undefined;

package/src/components/Datepicker/index.js

@@ -9,7 +9,7 @@ import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { DayPicker } from 'react-day-picker';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
-import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays } from 'date-fns';
+import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {

package/src/components/OverlayTrigger/useAgGridClassName.js

@@ -4,7 +4,7 @@ const useAgGridClassName = (deps = []) => {
     const adaptable = useAdaptable();
     return useMemo(() => {
         if (adaptable) {
-            return adaptable.getAgGridCurrentThemeName();
+            return adaptable.agGridThemeAdapter.getAgGridCurrentThemeClassNames();
         }
         return '';
     }, deps);

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

@@ -17,6 +17,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     isClearable?: boolean;
     closeMenuOnSelect?: boolean;
     hideSelectedOptions?: boolean;
+    showHeaderSelectionCheckbox?: boolean;
     isMulti?: IsMulti;
     onChange: (value: IsMulti extends true ? SelectValue[] : SelectValue) => void;
     value: IsMulti extends true ? SelectValue[] : SelectValue;

package/src/components/Select/Select.js

@@ -27,9 +27,17 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         style: {
             lineHeight: '30px',
         },
+        resizable: false,
+        defaultSortable: false,
         renderSelectionCheckBox: ({ renderBag }) => {
             return (React.createElement(Box, { display: 'inline-block', style: checkboxStyle }, renderBag.selectionCheckBox));
         },
+        renderHeader: (headerParams) => {
+            return (React.createElement(React.Fragment, null,
+                headerParams.renderBag.selectionCheckBox,
+                headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)'));
+        },
+        renderMenuIcon: false,
     },
 };
 const INFINITE_COLUMNS_WITH_RADIO = {
@@ -87,6 +95,7 @@ export const Select = function (props) {
     };
     const renderMultipleValues = props.renderMultipleValues;
     const isMulti = props.isMulti ?? Array.isArray(props.value);
+    const showHeaderSelectionCheckbox = isMulti && (props.showHeaderSelectionCheckbox ?? false);
     let selectedOption = null;
     if (isMulti) {
         selectedOption =
@@ -212,10 +221,24 @@ export const Select = function (props) {
                     }
                     : selectedRows[0];
             }, [selectedRows, isMulti]);
-            const onRowSelectionChange = React.useCallback(({ selectedRows }) => {
-                const selection = selectedRows.map((row) => {
-                    return { value: row };
-                });
+            const onRowSelectionChange = React.useCallback((selectionParams) => {
+                let selection = [];
+                const { selectedRows, defaultSelection, deselectedRows } = selectionParams;
+                if (defaultSelection === true && deselectedRows.length === 0) {
+                    // all selected
+                    selection = options.map((option) => {
+                        return { value: option.value };
+                    });
+                }
+                else if (defaultSelection === false && selectedRows.length === 0) {
+                    // none selected
+                    selection = [];
+                }
+                else {
+                    selection = selectedRows.map((row) => {
+                        return { value: row };
+                    });
+                }
                 //@ts-ignore
                 setValue(selection, 'select-option');
             }, [setValue]);
@@ -239,9 +262,9 @@ export const Select = function (props) {
                 data: props.options, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
                 onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, filterFunction: filterFunction, isRowDisabled: isRowDisabled },
-                React.createElement(InfiniteTable, { header: false, rowClassName: rowClassName, showZebraRows: false, onCellClick: isLoading ? null : onCellClick, keyboardNavigation: isLoading ? false : 'row', activeRowIndex: focusedOptionIndex, keyboardSelection: true, rowHeight: ROW_HEIGHT, columns: isMulti ? INFINITE_COLUMNS_WITH_CHECKBOX : INFINITE_COLUMNS_WITH_RADIO, domProps: INFINITE_DOM_PROPS })));
+                React.createElement(InfiniteTable, { header: isMulti && showHeaderSelectionCheckbox ? true : false, rowClassName: rowClassName, showZebraRows: false, onCellClick: isLoading ? null : onCellClick, keyboardNavigation: isLoading ? false : 'row', activeRowIndex: focusedOptionIndex, keyboardSelection: true, rowHeight: ROW_HEIGHT, columns: isMulti ? INFINITE_COLUMNS_WITH_CHECKBOX : INFINITE_COLUMNS_WITH_RADIO, domProps: INFINITE_DOM_PROPS })));
         };
-    }, [isMulti]);
+    }, [isMulti, showHeaderSelectionCheckbox]);
     const DropdownIndicator = React.useMemo(() => {
         return (props) => {
             return (React.createElement(components.DropdownIndicator, { ...props },
@@ -312,7 +335,7 @@ export const Select = function (props) {
                     zIndex: 999999,
                     boxShadow: 'var(--ab-cmp-select-menu__box-shadow)',
                     minWidth: `var(--ab-cmp-select-menu__min-width)`,
-                    '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length * ROW_HEIGHT}px, 20rem)`,
+                    '--ab-cmp-select-menu__min-height': `min(${((props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)) * ROW_HEIGHT}px, 20rem)`,
                     ...commonStyles(state),
                     ...props.menuStyle,
                 };

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1740401859424 || Date.now(),
-    VERSION: "20.0.0-canary.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1742294870281 || Date.now(),
+    VERSION: "20.0.0-canary.20" || '--current-version--',
 };

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

@@ -1856,12 +1856,14 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             isOpt?: undefined;
             defVal?: undefined;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
             defVal: string;
+            ref: string;
         })[];
     };
     ColumnFilterDef: {
@@ -2289,6 +2291,22 @@ export declare const ADAPTABLE_METAMODEL: {
             ref?: undefined;
         })[];
     };
+    CustomEditColumnValueInfo: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+        })[];
+    };
     CustomEditColumnValuesContext: {
         name: string;
         kind: string;
@@ -2721,16 +2739,6 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
-    DataFormatTypeContext: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-        }[];
-    };
     DataImportFileHandler: {
         name: string;
         kind: string;
@@ -2967,11 +2975,6 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
-    ExportableColumnContext: {
-        name: string;
-        kind: string;
-        desc: string;
-    };
     ExportFormContext: {
         name: string;
         kind: string;
@@ -4465,6 +4468,11 @@ export declare const ADAPTABLE_METAMODEL: {
             gridInfo?: undefined;
         })[];
     };
+    PredicatesOperator: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     PreProcessExportContext: {
         name: string;
         kind: string;