@adaptabletools/adaptable 22.0.0-canary.6 → 22.0.0-canary.8

package/src/agGrid/AgGridColumnAdapter.js

@@ -656,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 {

package/src/agGrid/AgGridExportAdapter.js

@@ -66,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
@@ -120,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 {
             /**
@@ -142,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;
@@ -508,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 = {
@@ -571,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/AgGridFloatingFilterAdapter.js

@@ -54,7 +54,7 @@ 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 {

package/src/agGrid/AgGridMenuAdapter.js

@@ -17,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);
         /**
@@ -60,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/AgGridThemeAdapter.js

@@ -101,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/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/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;

package/src/components/FormLayout/index.js

@@ -14,7 +14,7 @@ const defaultColumns = {
 };
 const PLACEHOLDER = React.createElement("div", null);
 const FormLayout = (props) => {
-    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true, ...boxProps } = props;
+    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'calc(var(--ab-base-space) * 2)', gridRowGap = 'calc(var(--ab-base-space) * 2)', style, childrenToColumns = true, ...boxProps } = props;
     columns = columns.map((c) => {
         if (typeof c === 'string' || typeof c === 'number') {
             c = {

package/src/components/OverlayTrigger/index.js

@@ -152,7 +152,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
             target = targetProp(target);
         }
         if (!target) {
-            adaptable.logger.warn('No OverlayTrigger target - make sure you render a child inside the OverlayTrigger, which will be the overlay target');
+            adaptable.logger.warn('OverlayTrigger target not found. Ensure a child element is rendered inside the OverlayTrigger component.');
             return;
         }
         targetRef.current = target;

package/src/components/Select/Select.js

@@ -699,7 +699,7 @@ export const Select = function (props) {
                 valueContainer: (baseStyle) => {
                     return {
                         ...baseStyle,
-                        padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
+                        padding: props.size === 'small' ? `0 var(--ab-base-space)` : baseStyle.padding,
                         ...props.styles?.valueContainer,
                     };
                 },

package/src/components/Tree/TreeDropdown/index.js

@@ -221,7 +221,7 @@ export function TreeDropdown(props) {
                     };
                 if (!hasChildren) {
                     // @ts-ignore - don't leave any space for the > expand icon, as there are no children
-                    treeListStyle['--infinite-group-row-column-nesting'] = 'var(--ab-space-2)';
+                    treeListStyle['--infinite-group-row-column-nesting'] = 'calc(var(--ab-base-space) * 2)';
                 }
                 const treeList = (React.createElement(TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 30, onReady: ({ api }) => {
                         setTreeListApi(api);

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: 1770400478241 || Date.now(),
-    VERSION: "22.0.0-canary.6" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770905030327 || Date.now(),
+    VERSION: "22.0.0-canary.8" || '--current-version--',
 };

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

@@ -314,6 +314,16 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
+    AdaptableColumnsContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableColumnSummary: {
         name: string;
         kind: string;
@@ -364,6 +374,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         }[];
     };
+    AdaptableContainerValue: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableContextMenuItem: {
         name: string;
         kind: string;
@@ -384,6 +399,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableCSSSelector: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableCustomIcon: {
         name: string;
         kind: string;
@@ -889,6 +914,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableRowContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableSaveStateFunction: {
         name: string;
         kind: string;
@@ -2244,6 +2279,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    ContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     ContainerOptions: {
         name: string;
         kind: string;
@@ -4148,6 +4188,16 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    InitContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     InitialState: {
         name: string;
         kind: string;
@@ -6310,6 +6360,18 @@ export declare const ADAPTABLE_METAMODEL: {
             noCode?: undefined;
         })[];
     };
+    UserInterfaceState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+        }[];
+    };
     UserMenuItem: {
         name: string;
         kind: string;