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

package/src/components/ExpressionEditor/EditorInput.js

@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 import { BaseEditorInput } from './BaseEditorInput';
 import { editorButtonsSearch } from './editorButtonsSearch';
 import { useExpressionEditor } from './EditorContext';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
 import { cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
 import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
@@ -49,8 +48,25 @@ function EditorInput(props) {
             };
     }, [props.type]);
     const { setSelectedFunction } = useExpressionEditor();
-    const queryName = `${StringExtensions.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    let queryName;
+    switch (props.type) {
+        case 'boolean':
+            queryName = 'Create an Expression that returns true / false';
+            break;
+        case 'scalar':
+            queryName = "Create an Expression that returns a single value of any type";
+            break;
+        case 'aggregatedScalar':
+            queryName = "Create an Expression that evaluates multiple rows and returns a value of any type";
+            break;
+        case 'cumulativeAggregatedScalar':
+            queryName = "Create a Cumulative Expression";
+            break;
+        case 'quantileAggregatedScalar':
+            queryName = "Create a Quantile Expression";
+            break;
+    }
+    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -15,5 +15,5 @@ export const ExpressionFunctionDocumentation = (props) => {
                 React.createElement("pre", { className: signatureClassName }, example))))))),
         props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full" }, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1" }, props.expressionFunction.returnType))))) : null;
 };

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

@@ -4,7 +4,7 @@ import ReactSelect, { components, } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
 import { DataSource, InfiniteTable, } from '@infinite-table/infinite-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 import { Resizable } from 're-resizable';
 import Tooltip from '../Tooltip';
 import { ensurePortalElement } from '../OverlayTrigger';
@@ -115,6 +115,7 @@ const doesOptionMatchValue = function (value) {
 };
 export const Select = function (props) {
     let maxLabelLength = 0;
+    const inputId = useId();
     const computedCSSVars = useAdaptableComputedCSSVars();
     const CSS_VARS_VALUES = {
         '--ab-cmp-select-menu__max-width': computedCSSVars['--ab-cmp-select-menu__max-width'] || '60vw',
@@ -126,14 +127,15 @@ export const Select = function (props) {
     // relevant for menulist search only
     const menulistInputRef = React.useRef(null);
     const [isSelectMenuOpen, setIsSelectMenuOpen] = useState(false);
-    const openSelectMenu = () => {
+    const propsOnMenuOpen = props.onMenuOpen;
+    const openSelectMenu = React.useCallback(() => {
         setIsSelectMenuOpen(true);
         // it's a react-select bug, onMenuOpen is not called with controlled menuIsOpen
-        props.onMenuOpen?.();
-    };
-    const closeSelectMenu = () => {
+        propsOnMenuOpen?.();
+    }, [propsOnMenuOpen]);
+    const closeSelectMenu = React.useCallback(() => {
         setIsSelectMenuOpen(false);
-    };
+    }, []);
     const ref = React.useRef(null);
     const valueToOptionMap = new Map((props.options || []).map((opt) => {
         let label = opt.label;
@@ -199,6 +201,18 @@ export const Select = function (props) {
     /**
      * If on each render a new reference is passed, the menu will not open using the keyboard.
      */
+    /**
+     * Use refs for isSelectMenuOpen, openSelectMenu, and closeSelectMenu so that
+     * SelectContainer is stable across re-renders. If SelectContainer gets a new
+     * reference when menu opens/closes, react-select recreates its internal
+     * component tree, the DummyInput is removed from DOM, and focus is lost.
+     */
+    const isSelectMenuOpenRef = React.useRef(isSelectMenuOpen);
+    isSelectMenuOpenRef.current = isSelectMenuOpen;
+    const openSelectMenuRef = React.useRef(openSelectMenu);
+    openSelectMenuRef.current = openSelectMenu;
+    const closeSelectMenuRef = React.useRef(closeSelectMenu);
+    closeSelectMenuRef.current = closeSelectMenu;
     const SelectContainer = React.useMemo(() => {
         return (selectContainerProps) => {
             return (React.createElement(components.SelectContainer, { ...selectContainerProps, innerProps: {
@@ -211,15 +225,50 @@ export const Select = function (props) {
                         if (!searchableInMenulist) {
                             return;
                         }
-                        if (!isSelectMenuOpen) {
-                            openSelectMenu();
+                        if (!isSelectMenuOpenRef.current) {
+                            openSelectMenuRef.current();
                             e.stopPropagation();
                             e.preventDefault();
                         }
                     },
+                    onKeyDownCapture: (e) => {
+                        if (!searchableInMenulist) {
+                            return;
+                        }
+                        if (isSelectMenuOpenRef.current) {
+                            if (e.key === 'Escape') {
+                                closeSelectMenuRef.current();
+                                e.stopPropagation();
+                                e.preventDefault();
+                                e.nativeEvent.stopImmediatePropagation();
+                                // we do this because the focus is lost when the menu is closed
+                                // and document.body is set as the active element
+                                requestAnimationFrame(() => {
+                                    document.getElementById(inputId)?.focus();
+                                    // we need to do it again
+                                    // also don't store a ref to the input element
+                                    // but query the DOM again
+                                    // as the old ref is no longer in the DOM
+                                    // because of a react-select bug I presume
+                                    requestAnimationFrame(() => {
+                                        document.getElementById(inputId)?.focus();
+                                    });
+                                });
+                            }
+                        }
+                        else {
+                            // open the menu
+                            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                                openSelectMenuRef.current();
+                                e.stopPropagation();
+                                e.preventDefault();
+                                e.nativeEvent.stopImmediatePropagation();
+                            }
+                        }
+                    },
                 } }));
         };
-    }, [isSelectMenuOpen]);
+    }, [searchableInMenulist]);
     const resizable = props.resizable ?? false;
     const ValueContainer = React.useMemo(() => {
         return (props) => {
@@ -521,11 +570,25 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    const SingleValue = React.useCallback((singleValueProps) => {
-        return (React.createElement(components.SingleValue, { ...singleValueProps }, props.renderSingleValue
-            ? props.renderSingleValue(selectedOption)
-            : singleValueProps.children));
-    }, [selectedOption]);
+    /**
+     * Use refs for selectedOption and renderSingleValue so that the
+     * SingleValue component function is stable across re-renders.
+     * If SingleValue gets a new reference on each render, selectComponents changes,
+     * react-select recreates its internal component tree, the DummyInput is removed
+     * from DOM, and focus is lost (the keyboard stops working).
+     * See the comment above SelectContainer about this exact issue.
+     */
+    const selectedOptionRef = React.useRef(selectedOption);
+    selectedOptionRef.current = selectedOption;
+    const renderSingleValueRef = React.useRef(props.renderSingleValue);
+    renderSingleValueRef.current = props.renderSingleValue;
+    const SingleValue = React.useMemo(() => {
+        return (singleValueProps) => {
+            return (React.createElement(components.SingleValue, { ...singleValueProps }, renderSingleValueRef.current
+                ? renderSingleValueRef.current(selectedOptionRef.current)
+                : singleValueProps.children));
+        };
+    }, []);
     const selectComponents = useMemo(() => {
         return {
             SelectContainer,
@@ -546,7 +609,7 @@ export const Select = function (props) {
         MenuList,
     ]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: clsx(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, inputId: inputId, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: clsx(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
             // This needed so the menu is not clipped by overflow: hidden
             menuPortalTarget: ensurePortalElement(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
                 if (isMulti) {
@@ -636,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);
@@ -249,7 +249,7 @@ export function TreeDropdown(props) {
                     } }, children));
             } },
             React.createElement(FieldWrap, { style: props.fieldStyle, className: "twa:w-full" },
-                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }

package/src/components/overlayBaseZIndex.js

@@ -1 +1 @@
-export const OVERLAY_BASE_Z_INDEX = 9999999;
+export const OVERLAY_BASE_Z_INDEX = 9_999_999;

package/src/components/utils/useContainerScrollObserver/index.js

@@ -1,20 +1,11 @@
 import { useCallback, useRef } from 'react';
 class SectionSelector {
+    scrollTop = 0;
+    node;
+    boxHeight;
+    childrenHeights = [];
+    maxScrollTop;
     constructor(node) {
-        this.scrollTop = 0;
-        this.childrenHeights = [];
-        this.select = (scrollTop) => {
-            this.refreshFromDOM();
-            const relativeCurrentHeight = (scrollTop * this.boxHeight) / this.maxScrollTop;
-            let heightSum = 0;
-            for (let i = 0, len = this.childrenHeights.length; i < len; i++) {
-                heightSum += this.childrenHeights[i];
-                if (heightSum > relativeCurrentHeight) {
-                    return i;
-                }
-            }
-            return this.childrenHeights.length - 1;
-        };
         this.node = node;
         this.refreshFromDOM();
     }
@@ -33,6 +24,18 @@ class SectionSelector {
             height,
         };
     }
+    select = (scrollTop) => {
+        this.refreshFromDOM();
+        const relativeCurrentHeight = (scrollTop * this.boxHeight) / this.maxScrollTop;
+        let heightSum = 0;
+        for (let i = 0, len = this.childrenHeights.length; i < len; i++) {
+            heightSum += this.childrenHeights[i];
+            if (heightSum > relativeCurrentHeight) {
+                return i;
+            }
+        }
+        return this.childrenHeights.length - 1;
+    };
 }
 export const useContainerScrollObserver = (callback) => {
     const containerNodeRef = useRef(null);

package/src/devTools/index.js

@@ -22,66 +22,32 @@ function getColor(identifier) {
     return color;
 }
 export class DevToolsMarker {
+    adaptableId;
     static create(adaptableId) {
         return new DevToolsMarker(adaptableId);
     }
+    markerDetails = {
+        label: '',
+        track: '',
+        trackGroup: undefined,
+        color: undefined,
+        details: [],
+        tooltip: undefined,
+    };
+    stopped = false;
     constructor(adaptableId) {
         this.adaptableId = adaptableId;
-        this.markerDetails = {
-            label: '',
-            track: '',
-            trackGroup: undefined,
-            color: undefined,
-            details: [],
-            tooltip: undefined,
-        };
-        this.stopped = false;
-        this.start = (startDetails) => {
-            if (this.markerDetails.startTs) {
-                return this;
-            }
-            const start = performance.now();
-            this.markerDetails.details = startDetails?.details ?? [];
-            this.markerDetails.startTs = start;
-            return this;
-        };
-        this.end = (markerDetails = {}) => {
-            if (this.stopped) {
-                return this;
-            }
-            this.stopped = true;
-            const start = markerDetails.startTs ?? this.markerDetails.startTs;
-            const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
-            let color = markerDetails.color || this.markerDetails.color || '';
-            const trackGroup = markerDetails.trackGroup ||
-                this.markerDetails.trackGroup ||
-                `AdapTable (${this.adaptableId})`;
-            const details = [...(this.markerDetails.details || []), ...(markerDetails.details || [])];
-            const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
-            const label = markerDetails.label || this.markerDetails.label || 'Unknown';
-            const track = markerDetails.track || this.markerDetails.track || 'Unknown';
-            if (!color) {
-                const identifier = `${trackGroup}:${track}:${label}`;
-                color = getColor(identifier);
-            }
-            performance.measure(label, {
-                start,
-                end,
-                detail: {
-                    devtools: {
-                        dataType: 'track-entry',
-                        trackGroup,
-                        track,
-                        color: color || 'primary',
-                        properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : undefined,
-                        tooltipText: tooltip,
-                    },
-                },
-            });
-            return this;
-        };
         this.adaptableId = adaptableId;
     }
+    start = (startDetails) => {
+        if (this.markerDetails.startTs) {
+            return this;
+        }
+        const start = performance.now();
+        this.markerDetails.details = startDetails?.details ?? [];
+        this.markerDetails.startTs = start;
+        return this;
+    };
     get startTimestamp() {
         return this.markerDetails.startTs;
     }
@@ -131,6 +97,41 @@ export class DevToolsMarker {
             return acc;
         }, {});
     }
+    end = (markerDetails = {}) => {
+        if (this.stopped) {
+            return this;
+        }
+        this.stopped = true;
+        const start = markerDetails.startTs ?? this.markerDetails.startTs;
+        const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+        let color = markerDetails.color || this.markerDetails.color || '';
+        const trackGroup = markerDetails.trackGroup ||
+            this.markerDetails.trackGroup ||
+            `AdapTable (${this.adaptableId})`;
+        const details = [...(this.markerDetails.details || []), ...(markerDetails.details || [])];
+        const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+        const label = markerDetails.label || this.markerDetails.label || 'Unknown';
+        const track = markerDetails.track || this.markerDetails.track || 'Unknown';
+        if (!color) {
+            const identifier = `${trackGroup}:${track}:${label}`;
+            color = getColor(identifier);
+        }
+        performance.measure(label, {
+            start,
+            end,
+            detail: {
+                devtools: {
+                    dataType: 'track-entry',
+                    trackGroup,
+                    track,
+                    color: color || 'primary',
+                    properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : undefined,
+                    tooltipText: tooltip,
+                },
+            },
+        });
+        return this;
+    };
 }
 export function areAdaptableProfileTracksEnabled(adaptableId) {
     const trakcsSupported = typeof performance !== 'undefined' &&

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: 1769179404024 || Date.now(),
-    VERSION: "22.0.0-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770996876134 || Date.now(),
+    VERSION: "22.0.0-canary.11" || '--current-version--',
 };

package/src/layout-manager/src/LMEmitter.js

@@ -2,20 +2,20 @@ import { LMLogger } from './LMLogger';
 function x(a, b) { }
 const xtype = [1, '2'];
 export class LMEmitter extends LMLogger {
+    destroyed = false;
+    suspended = false;
     constructor(options) {
         super(options);
-        this.destroyed = false;
-        this.suspended = false;
-        /**
-         * For each supported event, we have a Set that holds all the callbacks that should be executed
-         * when the event is triggered.
-         */
-        this.eventSets = {
-            gridLayoutChanged: new Set(),
-            columnDefsChanged: new Set(),
-            rowModelUpdated: new Set(),
-        };
     }
+    /**
+     * For each supported event, we have a Set that holds all the callbacks that should be executed
+     * when the event is triggered.
+     */
+    eventSets = {
+        gridLayoutChanged: new Set(),
+        columnDefsChanged: new Set(),
+        rowModelUpdated: new Set(),
+    };
     on(event, callback) {
         this.eventSets[event].add(callback);
         return () => {

package/src/layout-manager/src/LMLogger.js

@@ -4,6 +4,13 @@ const performanceTime = (previousTime) => {
     return Math.round(previousTime ? now - previousTime : now);
 };
 export class LMLogger {
+    debugger;
+    infoLogger;
+    successLogger;
+    warnLogger;
+    errorLogger;
+    perfLogger;
+    debugId;
     constructor(options) {
         this.debugId = options.debugId;
         this.debugger = debugFactory(this.debugId ? `LayoutManager:${this.debugId}` : 'LayoutManager');

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -172,5 +172,6 @@ export interface PivotLayoutModel extends BaseLayoutModel {
      * Display automatically calculated Totals within EACH Pivot Column Group, in the position specified
      */
     PivotColumnTotal?: 'before' | 'after' | boolean;
+    PivotResultColumnsOrder?: string[] | boolean;
 }
 export type LayoutModel = TableLayoutModel | PivotLayoutModel;