@adaptabletools/adaptable 20.1.3 → 20.1.5

package/src/Redux/Store/AdaptableStore.js

@@ -921,10 +921,10 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 /**
                  * Use Case: Column Filters have changed
                  * Action: Apply Column Filtering and fire associated events
+                 * Note: For LAYOUT_COLUMN_FILTER_EDIT we do not filter (as it seems to be already handled)
                  */
                 case LayoutRedux.LAYOUT_COLUMN_FILTER_ADD:
-                // see ref "also-this-handles-the-LAYOUT_COLUMN_FILTER_EDIT-case"
-                // case LayoutRedux.LAYOUT_COLUMN_FILTER_EDIT:
+                case LayoutRedux.LAYOUT_COLUMN_FILTER_EDIT:
                 case LayoutRedux.LAYOUT_COLUMN_FILTER_SET:
                 case LayoutRedux.LAYOUT_COLUMN_FILTER_CLEAR:
                 case LayoutRedux.LAYOUT_COLUMN_FILTER_CLEAR_ALL:
@@ -937,11 +937,12 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     const shouldTriggerColumnFiltering = adaptable.api.filterApi.columnFilterApi.internalApi.shouldNewColumnFilterTriggerColumnFiltering(action);
                     const oldLayoutState = middlewareAPI.getState().Layout;
                     returnAction = next(action);
-                    setTimeout(() => {
-                        if (shouldTriggerColumnFiltering) {
+                    if (shouldTriggerColumnFiltering &&
+                        action.type !== LayoutRedux.LAYOUT_COLUMN_FILTER_EDIT) {
+                        setTimeout(() => {
                             adaptable.applyFiltering();
-                        }
-                    }, 50);
+                        }, 50);
+                    }
                     adaptable.api.eventApi.internalApi.fireColumnFilterAppliedEvent();
                     adaptable.api.eventApi.internalApi.fireLayoutChangedEvent(action.type, oldLayoutState, middlewareAPI.getState().Layout);
                     return returnAction;

package/src/Utilities/Services/DataService.js

@@ -35,7 +35,6 @@ export class DataService {
         if (cellDataChangedInfo.newValue != cellDataChangedInfo.oldValue) {
             this.emitter.emitSync('CellDataChanged', cellDataChangedInfo);
             this.adaptable.api.eventApi.internalApi.fireCellChangedEvent(cellDataChangedInfo);
-            console.log('cell changed called');
             const dataChangeLogEntry = this.extractDataChangeLogEntry(cellDataChangedInfo);
             this.cellDataChangeLogSubject$.next(dataChangeLogEntry);
         }

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -29,7 +29,7 @@ export const ColumnValuesSelect = (props) => {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
         };
     }, [column.columnId]);
-    const component = (React.createElement(Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
+    const component = (React.createElement(Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
     return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {

package/src/agGrid/AdaptableAgGrid.js

@@ -1353,8 +1353,8 @@ You need to define at least one Layout!`);
          * Action2: Set Selected Cells (on a debounce)
          */
         this.agGridAdapter.getAgGridApi().addEventListener('sortChanged', (this.listenerSortChanged = () => {
-            this.api.eventApi.internalApi.fireGridSortedEvent();
             this.debouncedSetSelectedCells();
+            this.api.eventApi.internalApi.fireGridSortedEvent();
         }));
         /**
          * Use Case: Charts have been created or destroyed, Chart ranges selected or Chart options changed
@@ -1557,8 +1557,11 @@ You need to define at least one Layout!`);
         if (isPivot) {
             // let's also support the pivot result columns
             const pivotResultColumns = gridApi.getPivotResultColumns() || [];
+            const autoGroupColumns = gridApi
+                .getAllGridColumns()
+                .filter((column) => this.api.columnApi.isAutoRowGroupColumn(column.getColId()));
             if (pivotResultColumns.length) {
-                agGridCols = [...agGridCols, ...pivotResultColumns];
+                agGridCols = [...agGridCols, ...pivotResultColumns, ...autoGroupColumns];
             }
         }
         const columnGroupChildren = gridApi
@@ -3042,7 +3045,7 @@ You need to define at least one Layout!`);
         // and is specific to Adaptable, therefore we need to refresh it manually
         this.refreshHeader();
         const layoutModel = layoutStateToLayoutModel(layout);
-        this.layoutManager?.setLayout(layoutModel, {
+        const layoutChanged = this.layoutManager?.setLayout(layoutModel, {
             skipApplyRowGroupsExpandedState: !shouldUpdateExpandState,
         });
         if (layout.AutoSizeColumns) {
@@ -3065,6 +3068,15 @@ You need to define at least one Layout!`);
                 plugin.afterSetLayout(this, layout);
             }
         });
+        if (!layoutChanged) {
+            // we won't get an onLayoutChange event
+            // most likely only filters have changed (column or grid filters)
+            // and because filters are not part of the layout manager
+            // there will be no change to the layout
+            // so we need to manually trigger the onLayoutChange event
+            // for other layout-related updates
+            this.onLayoutChange(layout, { skipRefresh: true });
+        }
         perfSetLayout.end();
     }
     getActiveAdaptableAggFuncForCol(columnId) {
@@ -3373,18 +3385,21 @@ You need to define at least one Layout!`);
         };
         return hasPivotTotals(one) || hasPivotTotals(other);
     }
-    onLayoutChange(layout) {
+    onLayoutChange(layout, options) {
         this.logger.info('onLayoutChange()');
-        const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
-        // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
-        const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
-        const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevOnChangeLayout, layout);
-        const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
-        if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
-            this.updateColumnModelAndRefreshGrid();
-        }
-        else {
-            this.deriveAdaptableColumnStateFromAgGrid();
+        const skipRefresh = options?.skipRefresh;
+        if (!skipRefresh) {
+            const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
+            // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
+            const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
+            const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevOnChangeLayout, layout);
+            const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
+            if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
+                this.updateColumnModelAndRefreshGrid();
+            }
+            else {
+                this.deriveAdaptableColumnStateFromAgGrid();
+            }
         }
         this.__prevLayoutForOnChange = layout;
         this.api.layoutApi.createOrUpdateLayout(layout);

package/src/agGrid/AgGridExportAdapter.js

@@ -108,7 +108,7 @@ export class AgGridExportAdapter {
             };
         }
         catch (error) {
-            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error);
+            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error.message);
         }
         finally {
             /**

package/src/components/Datepicker/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import OverlayTrigger from '../OverlayTrigger';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import FieldWrap from '../FieldWrap';
 import SimpleButton from '../SimpleButton';
@@ -10,9 +10,45 @@ 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';
-const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
+import { Select } from '../Select';
+const onDatePickerDropdownKeyDown = (e) => {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+        e.stopPropagation();
+    }
+};
+const DatePickerComponents = {
+    YearsDropdown: (props) => {
+        const onChange = useCallback((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select, { onKeyDown: onDatePickerDropdownKeyDown, value: props.value, onChange: onChange, options: props.options }));
+    },
+    MonthsDropdown: (props) => {
+        const onChange = useCallback((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select, { onKeyDown: onDatePickerDropdownKeyDown, value: `${props.value}`, onChange: onChange, options: props.options.map((option) => {
+                return {
+                    label: option.label,
+                    value: `${option.value}`,
+                };
+            }) }));
+    },
+};
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDOMRef, }) => {
     const domRef = React.useRef(null);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", tabIndex: -1, ref: (el) => {
+            domRef.current = el;
+            overlayDOMRef.current = el;
+        }, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const node = domRef.current;
             // relatedTarget is the newly focused element as a result of this blur event
@@ -74,13 +110,14 @@ export const Datepicker = React.forwardRef((props, ref) => {
             clearValue();
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    const overlayDOMRef = useRef(null);
     return (React.createElement(Flex, null,
-        React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
+        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);
                     }
                 } },
-                React.createElement(DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, footer: React.createElement(Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+                React.createElement(DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
             React.createElement(FieldWrap, { ...boxProps, style: {
                     borderRadius: style?.borderRadius,
                     width: style?.width,
@@ -90,6 +127,14 @@ export const Datepicker = React.forwardRef((props, ref) => {
                     if (!visible) {
                         setVisible(true);
                     }
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    const overlayDOMNode = overlayDOMRef.current;
+                    if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
+                        overlayDOMNode?.contains(relatedTarget)) {
+                        return;
+                    }
+                    setVisible(false);
                 } },
                 React.createElement(AdaptableDateInlineInput, { ref: ref, value: inputValue, 
                     // We do not want to show the format when the date-picker is visible

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

@@ -14,6 +14,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     menuStyle?: React.CSSProperties;
     menuMinWidth?: string | number;
     searchable?: boolean;
+    resizable?: boolean;
     isClearable?: boolean;
     closeMenuOnSelect?: boolean;
     hideSelectedOptions?: boolean;
@@ -47,5 +48,6 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     size?: 'small' | 'normal';
     isCreatable?: boolean;
     menuPortalTarget?: HTMLElement;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => React.JSX.Element;

package/src/components/Select/Select.js

@@ -5,8 +5,17 @@ import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
 import { Box } from 'rebass';
 import { DataSource, InfiniteTable, } from '@infinite-table/infinite-react';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import join from '../utils/join';
+import { Resizable } from 're-resizable';
+const resizableDirections = {
+    right: true,
+    bottom: true,
+    bottomRight: true,
+};
+const defaultResizableSize = {
+    width: '100%',
+};
 const checkboxStyle = {
     position: 'relative',
     top: 1,
@@ -15,7 +24,7 @@ const INFINITE_DOM_PROPS = {
     style: {
         height: '100%',
         minHeight: `var(--ab-cmp-select-menu__min-height, 25rem)`,
-        maxHeight: '50vh',
+        // maxHeight: '50vh',
         width: '100%',
     },
 };
@@ -148,6 +157,7 @@ export const Select = function (props) {
                 } }));
         };
     }, []);
+    const resizable = props.resizable ?? false;
     const ValueContainer = React.useMemo(() => {
         return (props) => {
             let { children, ...inputProps } = props;
@@ -176,24 +186,33 @@ export const Select = function (props) {
                 } }, children));
         };
     }, [renderMultipleValues, props.placeholder]);
+    const sizeRef = React.useRef({ ...defaultResizableSize });
     const MenuComponent = React.useMemo(() => {
         return (inputProps) => {
             const { isLoading } = inputProps;
+            const theChildren = (React.createElement(React.Fragment, null,
+                inputProps.children,
+                React.createElement("div", { style: {
+                        display: isLoading ? 'block' : 'none',
+                        position: 'absolute',
+                        inset: 0,
+                        background: `var(--ab-cmp-select-loading__background)`,
+                        zIndex: 1,
+                    } })));
+            const onResizeStop = useCallback((_e, _direction, ref) => {
+                const newSize = {
+                    width: ref.style.width,
+                    height: ref.style.height,
+                };
+                sizeRef.current = newSize;
+            }, []);
             return (React.createElement(React.Fragment, null,
                 React.createElement(components.Menu, { ...inputProps, innerProps: {
                         'data-name': 'menu-container',
                         ...inputProps.innerProps,
-                    } },
-                    inputProps.children,
-                    React.createElement("div", { style: {
-                            display: isLoading ? 'block' : 'none',
-                            position: 'absolute',
-                            inset: 0,
-                            background: `var(--ab-cmp-select-loading__background)`,
-                            zIndex: 1,
-                        } }))));
+                    } }, resizable ? (React.createElement(Resizable, { enable: resizableDirections, minWidth: '100%', maxHeight: '60vh', maxWidth: '60vw', defaultSize: sizeRef.current, onResizeStop: onResizeStop }, theChildren)) : (theChildren))));
         };
-    }, []);
+    }, [resizable]);
     const SelectComponent = props.isCreatable ? CreatableSelect : ReactSelect;
     const ClearIndicator = React.useMemo(() => {
         return (clearIndicatorProps) => {
@@ -365,7 +384,7 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (React.createElement(SelectComponent, { ref: ref, "aria-label": props['aria-label'], inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+    return (React.createElement(SelectComponent, { ref: ref, "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: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {
@@ -425,7 +444,7 @@ export const Select = function (props) {
                     zIndex: 999999,
                     boxShadow: 'var(--ab-cmp-select-menu__box-shadow)',
                     minWidth: `var(--ab-cmp-select-menu__min-width)`,
-                    width: `${Math.max(maxLabelLength, 10)}ch`,
+                    width: resizable ? '100%' : `${Math.max(maxLabelLength, 10)}ch`,
                     '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height), 20rem)`,
                     maxHeight: 'var(--ab-cmp-select-menu__max-height)',
                     maxWidth: 'var(--ab-cmp-select-menu__max-width)',

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: 1747298992714 || Date.now(),
-    VERSION: "20.1.3" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1748008314697 || Date.now(),
+    VERSION: "20.1.5" || '--current-version--',
 };

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

@@ -443,6 +443,16 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    AdaptableFilterState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableFlashingCell: {
         name: string;
         kind: string;
@@ -879,16 +889,6 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
-    AdaptableSearchState: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-        }[];
-    };
     AdaptableSettingsPanel: {
         name: string;
         kind: string;