@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.11

package/src/agGrid/AdaptableFilterHandler.js

@@ -1,4 +1,8 @@
 export class AdaptableFilterHandler {
+    adaptableApi;
+    colId;
+    filterDisplayValuesResult;
+    previousFilterDisplayValuesResult;
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
     }

package/src/agGrid/AdaptableLogger.d.ts

@@ -1,5 +1,8 @@
 import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
 export declare const errorOnce: (message: string) => void;
+/**
+ * AdapTable's Logger
+ */
 export declare class AdaptableLogger {
     private adaptableId;
     private debugger;

package/src/agGrid/AdaptableLogger.js

@@ -11,7 +11,17 @@ export const errorOnce = (message) => {
     console.error(message);
     errorOnceFlags[message] = true;
 };
+/**
+ * AdapTable's Logger
+ */
 export class AdaptableLogger {
+    adaptableId;
+    debugger;
+    infoLogger;
+    successLogger;
+    warnLogger;
+    errorLogger;
+    perfLogger;
     // use static loggers whenever access to AdaptableLogger instance is not feasible
     static consoleErrorBase(message, ...optionalParams) {
         if (optionalParams?.length) {

package/src/agGrid/AgGridAdapter.js

@@ -13,9 +13,19 @@ import { isWeightedAverageAggFuncName } from '../AdaptableState/Common/Aggregati
 const DANGER_AG_GRID_BEANS_MAP = {};
 const getColumnApiModule = () => ColumnApiModule;
 export class AgGridAdapter {
+    _adaptableInstance;
+    DANGER_USE_GETTER_gridApi;
+    DANGER_gridApi_from_args;
+    // see #gridOpts_monkey_patch
+    DANGER_updateGridOptionsMonkeyPatcher;
+    // see #aggColumnFilters_monkey_patch
+    DANGER_doFiltersPassMonkeyPatcher;
+    DANGER_isAggFilterPresentMonkeyPatcher;
+    activePivotColumnFilters_MEMO = new WeakMap();
+    initialGridOptions;
+    _agGridId;
     constructor(_adaptableInstance, config) {
         this._adaptableInstance = _adaptableInstance;
-        this.activePivotColumnFilters_MEMO = new WeakMap();
         const columnApiModuleReference = config?.getAgGridColumnApiModuleReference?.() ?? getColumnApiModule();
         const ColumnDefFactory_Prototype = columnApiModuleReference?.beans?.[0]?.prototype;
         if (!ColumnDefFactory_Prototype) {
@@ -135,7 +145,7 @@ export class AgGridAdapter {
                     }
                 }
                 options['columnDefs'] = colDefsWithSpecialColumns;
-                self.logger.info(`Added SpecialColumns on GridOptions.columnDefs update (source=${source})`);
+                self.logger.info(`Added special columns on GridOptions.columnDefs update (source="${source}").`);
             }
             // `context`
             const passedContext = options.context;
@@ -155,7 +165,7 @@ export class AgGridAdapter {
         }
         const agGridColumnFilterService = this.DANGER_getPrivateAgGridBeans()?.colFilter;
         if (!agGridColumnFilterService) {
-            this.logger.consoleError('Could not get hold of ColumnFilterService! This is a critical error and will prevent Adaptable from working correctly.');
+            this.logger.consoleError('Failed to initialize ColumnFilterService. Filtering and related features will not function correctly.');
             return;
         }
         const self = this;
@@ -201,7 +211,7 @@ export class AgGridAdapter {
     DANGER_getPrivateAgGridBeans() {
         const beans = DANGER_AG_GRID_BEANS_MAP[this._agGridId];
         if (!beans) {
-            this.logger.consoleError('Could not get hold of AgGridBeans! This is a critical error and will prevent Adaptable from working correctly.');
+            this.logger.consoleError('Failed to access AG Grid internal beans. Adaptable will not function correctly.');
         }
         return beans;
     }
@@ -345,7 +355,7 @@ export class AgGridAdapter {
                     if (isEndRowPin) {
                         shouldIncludeRange = false;
                     }
-                    this.logger.consoleWarn('Cannot select pinned rows in AG Grid.');
+                    this.logger.consoleWarn('Pinned rows cannot be selected in AG Grid.');
                 }
                 if (shouldIncludeRange) {
                     const y1 = Math.min(rangeSelection.startRow.rowIndex, rangeSelection.endRow.rowIndex);
@@ -515,7 +525,7 @@ export class AgGridAdapter {
     deriveAdaptableColumnDataType(agColumn, logWarning = true) {
         // Some columns can have no ID or Title. we return string as a consequence but it needs testing
         if (!agColumn) {
-            this.logger.warn(`Column is undefined, returning 'text' for Type`);
+            this.logger.warn('Column is undefined. Defaulting data type to "text".');
             return 'text';
         }
         if (this.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(agColumn.getId())) {
@@ -558,7 +568,7 @@ export class AgGridAdapter {
         let row = this.getAgGridApi().getDisplayedRowAtIndex(0);
         if (row == null) {
             // possible that there will be no data.
-            this.logger.consoleError(`No data in grid, returning type "unknown" for Column: "${agColumn.getColId()}". This will impact several Adaptable features, such as Filters and ColumnFormats.`);
+            this.logger.consoleError(`No data in grid. Returning type "unknown" for column "${agColumn.getColId()}". This will affect features such as Filters and Column Formats.`);
             return 'unknown';
         }
         // // if it's a group we need the content of the group
@@ -600,7 +610,7 @@ export class AgGridAdapter {
                 dataType = arrayDataType;
             }
         }
-        this.logger.consoleWarn(`No defined type for column '${agColumn.getColId()}'. Defaulting to type of first row value: ${dataType}`);
+        this.logger.consoleWarn(`No explicit type for column "${agColumn.getColId()}". Inferred type from first row value: "${dataType}".`);
         return dataType;
     }
     isColumnReadonly(colDef) {
@@ -786,7 +796,7 @@ export class AgGridAdapter {
                 colDef.colId = colDef.field;
             }
             if (!colDef.colId) {
-                this.logger.warn('A column is missing the colId - please check ', colDef, 'Either pass a "field" property or a "colId" property.');
+                this.logger.warn('Column definition is missing colId. Provide either a "field" or "colId" property.', colDef);
             }
         };
         this.patchColDefs(colDefs, assignColId);

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -71,6 +71,7 @@ export declare class AgGridColumnAdapter {
     private getAlertCellStyle;
     private getFlashingCellStyle;
     private getCellHighlightStyle;
+    private getColumnHighlightStyle;
     isColGroupDef(columnDefinition: ColDef | ColGroupDef): columnDefinition is ColGroupDef;
     private getRelevantFormatColumnHeaderStyles;
 }

package/src/agGrid/AgGridColumnAdapter.js

@@ -27,6 +27,8 @@ export function getEditorForColumnDataType(columnDataType, variant) {
     }
 }
 export class AgGridColumnAdapter {
+    adaptableInstance;
+    colDefPropertyCache;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
@@ -300,12 +302,10 @@ export class AgGridColumnAdapter {
                 // see #header_text_align
                 const formatColumnWithTextAlignment = this.getRelevantFormatColumnHeaderStyles(abColumn)
                     // we take the first one only, even if multiple are defined
-                    .find((fc) => fc.CellAlignment != undefined);
+                    .find((fc) => fc.Style?.Alignment != undefined);
                 if (formatColumnWithTextAlignment) {
-                    baseHeaderClass = [
-                        ...baseHeaderClass,
-                        `ab-header__align-${formatColumnWithTextAlignment.CellAlignment.toLowerCase()}`,
-                    ];
+                    const alignment = formatColumnWithTextAlignment.Style.Alignment.toLowerCase();
+                    baseHeaderClass = [...baseHeaderClass, `ab-header__align-${alignment}`];
                 }
                 const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
                     target,
@@ -398,6 +398,7 @@ export class AgGridColumnAdapter {
                     ...this.getAlertCellStyle(gridCell, params),
                     ...this.getFlashingCellStyle(gridCell, params),
                     ...this.getCellHighlightStyle(gridCell, params),
+                    ...this.getColumnHighlightStyle(gridCell, params),
                 };
                 return normalizeStyleForAgGrid(result);
             };
@@ -655,7 +656,7 @@ export class AgGridColumnAdapter {
             if (typeof original_filter !== 'boolean' &&
                 typeof original_filter?.handler !== 'function' &&
                 !pivotMode) {
-                this.adaptableApi.consoleError(`Column '${colId}' has a custom filter defined in colDef.filter, but Adaptable Filtering accepts only the TRUE/FALSE values!`);
+                this.adaptableApi.consoleError(`Column "${colId}" has a custom filter in colDef.filter, but Adaptable filtering only accepts boolean (true/false) values for this property.`);
                 return false;
             }
             return {
@@ -1261,19 +1262,6 @@ export class AgGridColumnAdapter {
             const formatColumnStyle = formatColumn.Style
                 ? convertAdaptableStyleToCSS(formatColumn.Style)
                 : {};
-            if (formatColumn.CellAlignment) {
-                switch (formatColumn.CellAlignment) {
-                    case 'Left':
-                        style.textAlign = 'left';
-                        break;
-                    case 'Right':
-                        style.textAlign = 'right';
-                        break;
-                    case 'Center':
-                        style.textAlign = 'center';
-                        break;
-                }
-            }
             return { ...style, ...formatColumnStyle };
         }, {});
     }
@@ -1302,14 +1290,24 @@ export class AgGridColumnAdapter {
                 : flashingCell.flashingCellDefinition.NeutralChangeStyle) ?? {});
     }
     getCellHighlightStyle(gridCell, params) {
-        const cellHightlight = this.adaptableApi.internalApi
+        const cellHighlight = this.adaptableApi.internalApi
             .getInternalState()
             .CellHighlightInfo.find((cellHighlightInfo) => {
             return (gridCell.column.columnId === cellHighlightInfo.columnId &&
                 cellHighlightInfo.primaryKeyValue === gridCell.primaryKeyValue);
         });
-        if (cellHightlight) {
-            return convertAdaptableStyleToCSS(cellHightlight.highlightStyle);
+        if (cellHighlight) {
+            return convertAdaptableStyleToCSS(cellHighlight.highlightStyle);
+        }
+    }
+    getColumnHighlightStyle(gridCell, params) {
+        const columnHighlight = this.adaptableApi.internalApi
+            .getInternalState()
+            .ColumnHighlightInfo.find((columnHighlightInfo) => {
+            return (gridCell.column.columnId === columnHighlightInfo.columnId);
+        });
+        if (columnHighlight) {
+            return convertAdaptableStyleToCSS(columnHighlight.highlightStyle);
         }
     }
     isColGroupDef(columnDefinition) {

package/src/agGrid/AgGridExportAdapter.js

@@ -8,17 +8,18 @@ import { createUuid } from '../AdaptableState/Uuid';
 import { inferSchema, initParser } from 'udsv';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 export class AgGridExportAdapter {
+    _adaptableInstance;
+    /**
+     * !!!
+     * do NOT mutate this array reference, this is passed only initially to AG Grid and we can only change it's internal state
+     */
+    DANGER_excelStyles = [];
+    originalExcelStyles = [];
+    excelStylesCache = {};
+    cellOrHeaderClassKey2ExcelStyleIdMap = {};
+    excelStylesWithFormattedDate = {};
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
-        /**
-         * !!!
-         * do NOT mutate this array reference, this is passed only initially to AG Grid and we can only change it's internal state
-         */
-        this.DANGER_excelStyles = [];
-        this.originalExcelStyles = [];
-        this.excelStylesCache = {};
-        this.cellOrHeaderClassKey2ExcelStyleIdMap = {};
-        this.excelStylesWithFormattedDate = {};
     }
     get agGridApi() {
         return this._adaptableInstance.agGridAdapter.getAgGridApi();
@@ -65,7 +66,7 @@ export class AgGridExportAdapter {
         try {
             if (showProgressIndicator) {
                 this.adaptableApi.userInterfaceApi.showProgressIndicator({
-                    text: `${report.Name} Export in progress...`,
+                    text: `Exporting ${report.Name}...`,
                 });
                 // waitForTimeout required to give the ProgressIndicator rendering a head-start (see rAF in ProgressIndicator implementation)
                 // see #raf_progress_indicator
@@ -119,7 +120,7 @@ export class AgGridExportAdapter {
             };
         }
         catch (error) {
-            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error.stack);
+            this.logger.consoleError(`Export failed: report="${report.Name}", format="${format}", destination="${config.destination}".`, error.stack);
         }
         finally {
             /**
@@ -141,7 +142,7 @@ export class AgGridExportAdapter {
         const exportContext = this.buildExportProcessContext(config);
         let exportParams = this.buildExportParams(exportContext);
         if (typeof config?.customExportParams === 'function') {
-            this.logger.info(`Custom export params for ${config.report.Name} in ${config.format} format`);
+            this.logger.info(`Applying custom export params: report="${config.report.Name}", format="${config.format}".`);
             exportParams = config.customExportParams(exportParams);
         }
         exportContext.exportedColumnIds = exportParams.columnKeys;
@@ -507,7 +508,7 @@ export class AgGridExportAdapter {
             const columnId = column.getId();
             const adaptableColumn = getAdaptableColumnWithColumnId(columnId);
             if (!adaptableColumn) {
-                this.logger.warn(`Export Styling: Column with id ${columnId} not found in Adaptable`);
+                this.logger.warn(`Export styling: column "${columnId}" not found in Adaptable.`);
                 return;
             }
             let headerClassParams = {
@@ -570,7 +571,7 @@ export class AgGridExportAdapter {
                 const columnId = column.getId();
                 const adaptableColumn = getAdaptableColumnWithColumnId(columnId);
                 if (!adaptableColumn) {
-                    this.logger.warn(`Export Styling: Column with id ${columnId} not found in Adaptable`);
+                    this.logger.warn(`Export styling: column "${columnId}" not found in Adaptable.`);
                     return;
                 }
                 const isDateCellExportedAsFormattedValue = this.isDateCellExportedAsFormattedValue(adaptableColumn, exportContext);

package/src/agGrid/AgGridFilterAdapter.js

@@ -14,6 +14,10 @@ export const AgGridFilterAdapterFactory = (adaptable) => {
         return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
     }
     return class AgGridFilterAdapter {
+        params;
+        filterContainer;
+        column;
+        unmountReactRoot;
         init(params) {
             this.params = params;
             this.column = params.column;

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -54,10 +54,13 @@ export const AgGridFloatingFilterAdapterFactory = (adaptable) => {
         // Find and update header cell
         const headerCell = findParentWithClass(filterContainer, 'ag-header-cell', stopClasses);
         if (headerCell?.classList.contains('ag-floating-filter')) {
-            headerCell.style.padding = 'var(--ab-space-1)';
+            headerCell.style.padding = 'var(--ab-base-space)';
         }
     }
     return class AgGridFloatingFilterAdapter {
+        colId;
+        filterContainer;
+        unmountReactRoot;
         init(params) {
             const colId = params.column.getColId();
             this.colId = colId;

package/src/agGrid/AgGridMenuAdapter.js

@@ -3,6 +3,7 @@ import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
 export class AgGridMenuAdapter {
+    _adaptableInstance;
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
     }
@@ -16,12 +17,16 @@ export class AgGridMenuAdapter {
         this._adaptableInstance = null;
     }
     buildColumnMenu(params, originalGetMainMenuItems) {
-        const columnMenuOptions = this.adaptableOptions.columnMenuOptions;
         const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             // return only AG Grid context if the Adaptable column is not found (should not happen)
             return agGridMenuItems;
         }
+        // If Adaptable UI is hidden, return only AG Grid default items
+        if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
+            return agGridMenuItems;
+        }
+        const columnMenuOptions = this.adaptableOptions.columnMenuOptions;
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         /**
@@ -59,6 +64,10 @@ export class AgGridMenuAdapter {
         if (!params.column) {
             return [];
         }
+        // If Adaptable UI is hidden, return only AG Grid default items
+        if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
+            return (params.defaultItems ? [...params.defaultItems] : []);
+        }
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
         // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
         this._adaptableInstance.refreshSelectedCellsState();

package/src/agGrid/AgGridModulesAdapter.js

@@ -2,9 +2,10 @@ import { AdaptableLogger } from '.';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
 export const AG_GRID_VERSION = AllEnterpriseModule.version;
 export class AgGridModulesAdapter {
+    adaptableInstance;
+    allAgGridModules = new Set();
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
-        this.allAgGridModules = new Set();
         this.allAgGridModules = this.extractAgGridModuleNames(AllEnterpriseModule);
     }
     destroy() {

package/src/agGrid/AgGridOptionsService.js

@@ -1,4 +1,7 @@
 export class AgGridOptionsService {
+    adaptableInstance;
+    gridOptionsPropertyCache;
+    colDefPropertyCache;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.gridOptionsPropertyCache = new Map();

package/src/agGrid/AgGridThemeAdapter.js

@@ -1,5 +1,7 @@
 import { DARK_THEME, LIGHT_THEME } from '../Utilities/Constants/GeneralConstants';
 export class AgGridThemeAdapter {
+    _adaptableInstance;
+    agGridThemeMode;
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
     }
@@ -99,9 +101,9 @@ export class AgGridThemeAdapter {
             }
         }
         else {
-            this.logger.warn('No AgGrid container found, defaulting to ag-theme-balham for the light theme');
+            this.logger.warn('AG Grid container not 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');
+        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';
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -97,6 +97,11 @@ export const ReactActionColumnRenderer = (props) => {
         React.createElement(ActionButtons, { buttons: actionButtons, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender })));
 };
 export class ActionColumnRenderer {
+    eGui;
+    eventListener;
+    unmountReactRoot;
+    layoutSwitchUnsubscribe;
+    actionButtons;
     // gets called once before the renderer is used
     init(params) {
         const adaptable = params.context.__adaptable;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -3,6 +3,8 @@ import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContex
 import * as React from 'react';
 export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
     return class BadgetRenderer {
+        eGui;
+        unmountReactRoot;
         getAdaptableInstance(params) {
             const adaptable = params.context.__adaptable;
             return adaptable;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -5,6 +5,7 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
         return;
     }
     return class PercentBarRenderer {
+        eGui;
         init(params) {
             const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
             const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);

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

@@ -94,9 +94,12 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
  * We strongly recommend you specify a `colDef.valueParser` function
  */
 export class AdaptableDateEditor {
-    constructor() {
-        this.valueParser = defaultDateValueParser;
-    }
+    value;
+    el;
+    params;
+    editor;
+    unmountReactRoot;
+    valueParser = defaultDateValueParser;
     init(params) {
         this.value = getStartValue(params);
         const { valueParser } = params.column.getColDef();

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -81,18 +81,13 @@ AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
  * Number Editor provided by AdapTable and used by default for all `number` columns
  */
 export class AdaptableNumberEditor {
-    constructor() {
-        this.valueParser = defaultValueParser;
-        this.onValueChange = (value) => {
-            this.value = this.valueParser
-                ? this.valueParser({
-                    ...this.params,
-                    oldValue: this.params.value,
-                    newValue: value,
-                })
-                : value;
-        };
-    }
+    value;
+    columnId;
+    el;
+    params;
+    editor;
+    valueParser = defaultValueParser;
+    unmountReactRoot;
     init(params) {
         this.value = getStartValue(params);
         this.params = params;
@@ -143,4 +138,13 @@ export class AdaptableNumberEditor {
     destroy() {
         this.unmountReactRoot?.();
     }
+    onValueChange = (value) => {
+        this.value = this.valueParser
+            ? this.valueParser({
+                ...this.params,
+                oldValue: this.params.value,
+                newValue: value,
+            })
+            : value;
+    };
 }

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -65,19 +65,13 @@ AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
  * Used to edit percentage columns as percentages (similar to how its done in Excel)
  */
 export class AdaptablePercentageEditor {
-    constructor() {
-        this.valueParser = defaultValueParser;
-        this.onValueChange = (value) => {
-            const newValue = this.valueParser
-                ? this.valueParser({
-                    ...this.params,
-                    oldValue: this.params.value,
-                    newValue: value,
-                })
-                : value;
-            this.value = NumberExtensions.divideBy100(newValue);
-        };
-    }
+    value;
+    columnId;
+    el;
+    params;
+    editor;
+    valueParser = defaultValueParser;
+    unmountReactRoot;
     init(params) {
         this.value = getStartValue(params);
         this.params = params;
@@ -128,4 +122,14 @@ export class AdaptablePercentageEditor {
     destroy() {
         this.unmountReactRoot?.();
     }
+    onValueChange = (value) => {
+        const newValue = this.valueParser
+            ? this.valueParser({
+                ...this.params,
+                oldValue: this.params.value,
+                newValue: value,
+            })
+            : value;
+        this.value = NumberExtensions.divideBy100(newValue);
+    };
 }

package/src/agGrid/index.d.ts

@@ -2,5 +2,11 @@ import { Adaptable, AdaptableNoCodeWizard as ABWizard } from './Adaptable';
 import { AdaptableLogger as ABLogger } from './AdaptableLogger';
 export { default as AdaptableWizardView } from '../View/AdaptableWizardView';
 export default Adaptable;
+/**
+ * AdapTable's No Code Wizard
+ */
 export declare const AdaptableNoCodeWizard: typeof ABWizard;
+/**
+ * AdapTable's Logger
+ */
 export declare const AdaptableLogger: typeof ABLogger;

package/src/agGrid/index.js

@@ -4,5 +4,11 @@ AdaptableNoCodeWizard as ABWizard, } from './Adaptable';
 import { AdaptableLogger as ABLogger } from './AdaptableLogger';
 export { default as AdaptableWizardView } from '../View/AdaptableWizardView';
 export default Adaptable;
+/**
+ * AdapTable's No Code Wizard
+ */
 export const AdaptableNoCodeWizard = ABWizard;
+/**
+ * AdapTable's Logger
+ */
 export const AdaptableLogger = ABLogger;

package/src/components/CheckBox/index.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 const Square = (props) => {
     return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
 };
-const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-space-1)', childrenPosition = 'end', as = 'label', ...props }) => {
+const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', as = 'label', ...props }) => {
     const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {

package/src/components/ColorPicker/ColorPicker.js

@@ -49,8 +49,9 @@ export const ColorPicker = React.forwardRef((props, ref) => {
         ABcolorChoices,
         includeAlpha && (React.createElement(Flex, { alignItems: "center", className: "twa:gap-1" },
             React.createElement(Box, null, "Opacity"),
-            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();
-                    debouncedOnChange(color);
-                }, min: 0, max: 1, step: 0.01, type: "range" })))));
+            React.createElement(Flex, { alignItems: "center", className: "twa:min-h-input" },
+                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();
+                        debouncedOnChange(color);
+                    }, min: 0, max: 1, step: 0.01, type: "range" }))))));
 });

package/src/components/Dashboard/DashboardToolbar.js

@@ -8,5 +8,5 @@ export function DashboardToolbar(props) {
         React.createElement(Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
             React.createElement("span", { className: "twa:text-2" }, props.title),
             props.showConfigure && (React.createElement(SimpleButton, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            props.showClose && (React.createElement(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
 }

package/src/components/Datepicker/index.js

@@ -112,7 +112,7 @@ export const Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
     const overlayDOMRef = useRef(null);
-    return (React.createElement(Flex, null,
+    return (React.createElement(Flex, { className: "twa:flex-1" },
         React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);

package/src/components/Dropdown/Arrows.js

@@ -8,7 +8,7 @@ const Arrows = () => {
             // background: 'var(--ab-color-defaultbackground)',
             fill: 'var(--ab-cmp-dropdown__fill)',
             top: '50%',
-            right: 'var(--ab-space-1)',
+            right: 'var(--ab-base-space)',
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
         } },

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -35,11 +35,11 @@ export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type
             hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                     float: 'right',
                     margin: 0,
-                    paddingTop: 'var(--ab-space-1)',
-                    paddingBottom: 'var(--ab-space-1)',
+                    paddingTop: 'var(--ab-base-space)',
+                    paddingBottom: 'var(--ab-base-space)',
                 } }, labels?.showIds ?? 'Show Column IDs')),
             React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
+        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
             .filter((field) => {
             if (!searchInputValue) {
                 return true;