@adaptabletools/adaptable 20.1.2 → 20.1.4

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/Icon/index.js

@@ -34,7 +34,7 @@ export const IconComponent = (props) => {
         };
     }, [icon]);
     if (isAdaptableSystemIcon(icon) && icon.name in allIcons) {
-        return (React.createElement(Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
+        return (React.createElement(Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if (isAdaptableCustomIcon(icon)) {
         let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';

package/src/components/InfiniteTable/index.d.ts

@@ -1,5 +1,5 @@
 import { InfiniteTableProps } from '@infinite-table/infinite-react';
 export * from '@infinite-table/infinite-react';
 import * as React from 'react';
-declare function InfiniteTable<T = any>(props: InfiniteTableProps<T>): React.JSX.Element;
-export { InfiniteTable };
+declare function InfiniteTableGrid<T = any>(props: InfiniteTableProps<T>): React.JSX.Element;
+export { InfiniteTableGrid };

package/src/components/InfiniteTable/index.js

@@ -2,8 +2,8 @@ import { InfiniteTable as InfiniteTableComponent, } from '@infinite-table/infini
 export * from '@infinite-table/infinite-react';
 import { INFINITE_TABLE_LICENSE_KEY } from '../../EnvVars';
 import * as React from 'react';
-function InfiniteTable(props) {
+function InfiniteTableGrid(props) {
     return (React.createElement(InfiniteTableComponent, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: INFINITE_TABLE_LICENSE_KEY }));
 }
 InfiniteTableComponent.licenseKey = INFINITE_TABLE_LICENSE_KEY;
-export { InfiniteTable };
+export { InfiniteTableGrid };

package/src/components/List/GridList/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import join from '../../utils/join';
 const baseClassName = 'ab-GridList';
 const columnsMap = {
@@ -13,7 +13,7 @@ const GridList = (props) => {
         };
     }).filter((data) => !!data.item);
     return (React.createElement(DataSource, { data: data, primaryKey: "id" },
-        React.createElement(InfiniteTable, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
+        React.createElement(InfiniteTableGrid, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
                 className: join(baseClassName, props.className),
                 style: {
                     minHeight: '15rem',

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

@@ -43,8 +43,10 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     };
     onInputChange?: (value: string) => void;
     onMenuOpen?: VoidFunction;
+    'aria-label'?: string;
     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

@@ -365,7 +365,7 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (React.createElement(SelectComponent, { ref: ref, 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) {

package/src/components/SimpleButton/index.js

@@ -81,7 +81,11 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     const fontWeight = buttonProps.fontWeight
         ? theme[buttonProps.fontWeight] ?? buttonProps.fontWeight ?? 'normal'
         : 'normal';
-    const btn = (React.createElement(Button, { ...buttonProps, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }, children));
+    const btn = (React.createElement(Button, { ...buttonProps, "aria-label": buttonProps['aria-label'] ||
+            buttonProps.label ||
+            tooltip ||
+            buttonProps.title ||
+            `${buttonProps.key}`, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }, children));
     return tooltip ? React.createElement(Tooltip, { label: tooltip }, btn) : btn;
 });
 export default SimpleButton;

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: 1746687651579 || Date.now(),
-    VERSION: "20.1.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1747747693470 || Date.now(),
+    VERSION: "20.1.4" || '--current-version--',
 };

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

@@ -242,19 +242,28 @@ export class LayoutManager extends LMEmitter {
             : this.getTableLayoutModelFromGrid();
     }
     getPivotLayoutModelFromGrid() {
-        const pivotResultColumnsSet = new Set((this.gridApi.getPivotResultColumns() || []).map((col) => col.getColId()));
+        const pivotResultColumns = this.gridApi.getPivotResultColumns() || [];
+        const pivotResultColumnsSet = new Set(pivotResultColumns.map((col) => col.getColId()));
         const prevLayout = this.currentLayout;
         const columnState = this.gridApi
             .getColumnState()
             .filter((col) => !pivotResultColumnsSet.has(col.colId));
         let PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
         const layout = this.getUndecidedLayoutModelFromGrid(columnState);
+        let ColumnWidths = layout.ColumnWidths || {};
+        //let's also include the column widths of the pivotResult columns
+        pivotResultColumns.forEach((col) => {
+            ColumnWidths[col.getColId()] = col.getActualWidth();
+        });
+        if (!Object.keys(ColumnWidths).length) {
+            ColumnWidths = undefined;
+        }
         delete layout.TableColumns;
         const pivotLayout = {
             PivotColumns,
             ColumnPinning: layout.ColumnPinning,
             ColumnSorts: layout.ColumnSorts,
-            ColumnWidths: layout.ColumnWidths,
+            ColumnWidths,
             ColumnVisibility: layout.ColumnVisibility,
             RowGroupValues: layout.RowGroupValues,
             PivotGroupedColumns: layout.RowGroupedColumns,
@@ -821,7 +830,10 @@ export class LayoutManager extends LMEmitter {
             return acc;
         }, {});
         columnState.applyOrder = true;
-        const columnIds = getColumnOrderIdsForAllColDefs([...layout.PivotColumns, ...layout.PivotAggregationColumns.map((col) => col.ColumnId)], this.gridApi.getColumnDefs());
+        const columnIds = getColumnOrderIdsForAllColDefs([
+            ...layout.PivotColumns,
+            ...(layout.PivotAggregationColumns || []).map((col) => col.ColumnId),
+        ], this.gridApi.getColumnDefs());
         const pivotAggsToIndexes = layout.PivotAggregationColumns.reduce((acc, { ColumnId }, index) => {
             acc[ColumnId] = index;
             return acc;
@@ -1036,6 +1048,23 @@ export class LayoutManager extends LMEmitter {
         // now recompute and apply the last one
         this.computePivotAggregations(layout, columnState);
         this.gridApi.applyColumnState(columnState);
+        // let's also include the column widths of the pivotResult columns
+        // we can't simply include those in the columnState because the columnState will also apply order
+        // but we don't want to affect the order of the pivotResult columns
+        // so we'll do it manually, and apply the widths after the columnState
+        // by using the gridApi.setColumnWidths method
+        if (layout.ColumnWidths) {
+            const colWidthForPivotResultColumns = [];
+            (this.gridApi.getPivotResultColumns() || []).forEach((col) => {
+                const colId = col.getColId();
+                if (layout.ColumnWidths[colId]) {
+                    colWidthForPivotResultColumns.push({ key: colId, newWidth: layout.ColumnWidths[colId] });
+                }
+            });
+            if (colWidthForPivotResultColumns.length) {
+                this.gridApi.setColumnWidths(colWidthForPivotResultColumns);
+            }
+        }
         this.applyPivotExpandLevel(layout);
         const hasGroupedColumns = layout.PivotGroupedColumns && layout.PivotGroupedColumns.length;
         // but also let's not forget to apply the row group values

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;