@adaptabletools/adaptable-cjs 20.0.0-canary.1 → 20.0.0-canary.10

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,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgGridThemeAdapter = void 0;
+const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+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) === GeneralConstants_1.LIGHT_THEME) {
+                document.body.dataset.agThemeMode = 'light';
+            }
+            if ((variantTheme || themeName) === GeneralConstants_1.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) === GeneralConstants_1.LIGHT_THEME) {
+                adaptableTheme.AgGridClassName =
+                    adaptableTheme.AgGridClassName || getAgGridLightThemeName();
+            }
+            if ((variantTheme || themeName) === GeneralConstants_1.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();
+    }
+}
+exports.AgGridThemeAdapter = AgGridThemeAdapter;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -39,7 +39,8 @@ 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/components/ColorPicker/ColorPicker.js

@@ -35,11 +35,11 @@ exports.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(rebass_1.Flex, { alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
-            React.createElement(Input_1.default, { className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+            React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
                     props.onChange(color);
                 }, min: 0, max: 1, step: 0.01, type: "range" })))));

package/src/components/OverlayTrigger/useAgGridClassName.js

@@ -6,7 +6,7 @@ const useAgGridClassName = (deps = []) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     return (0, react_1.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

@@ -31,9 +31,17 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         style: {
             lineHeight: '30px',
         },
+        resizable: false,
+        defaultSortable: false,
         renderSelectionCheckBox: ({ renderBag }) => {
             return (React.createElement(rebass_1.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 = {
@@ -91,6 +99,7 @@ const Select = function (props) {
     };
     const renderMultipleValues = props.renderMultipleValues;
     const isMulti = props.isMulti ?? Array.isArray(props.value);
+    const showHeaderSelectionCheckbox = props.showHeaderSelectionCheckbox ?? false;
     let selectedOption = null;
     if (isMulti) {
         selectedOption =
@@ -216,10 +225,24 @@ 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]);
@@ -243,9 +266,9 @@ 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(infinite_react_1.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(infinite_react_1.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(react_select_1.components.DropdownIndicator, { ...props },

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1740125131508 || Date.now(),
-    VERSION: "20.0.0-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1741781327852 || Date.now(),
+    VERSION: "20.0.0-canary.10" || '--current-version--',
 };

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

@@ -309,11 +309,6 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
-    AdaptableColumnType: {
-        name: string;
-        kind: string;
-        desc: string;
-    };
     AdaptableComment: {
         name: string;
         kind: string;
@@ -920,6 +915,11 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableSpecialColumnType: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableState: {
         name: string;
         kind: string;
@@ -2289,6 +2289,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 +2737,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 +2973,6 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
-    ExportableColumnContext: {
-        name: string;
-        kind: string;
-        desc: string;
-    };
     ExportFormContext: {
         name: string;
         kind: string;
@@ -3010,6 +3011,11 @@ export declare const ADAPTABLE_METAMODEL: {
             gridInfo?: undefined;
         })[];
     };
+    ExportResultData: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     ExportState: {
         name: string;
         kind: string;