@adaptabletools/adaptable 20.1.4 → 20.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.1.4",
+  "version": "20.1.5",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableState/Common/AdaptableFilterState.d.ts

@@ -8,7 +8,7 @@ export interface AdaptableFilterState {
      */
     gridFilter: string | undefined;
     /**
-     * AST for Grid Filter
+     * AST for Current Grid Filter
      */
     gridFilterAST: any;
     /**

package/src/AdaptableState/Common/AdaptableSortState.d.ts

@@ -1,15 +1,20 @@
+import { ColumnValuesComparer } from '../../AdaptableOptions/CustomSortOptions';
 import { CustomSort } from '../CustomSortState';
 import { ColumnSort } from './ColumnSort';
 /**
- * Overview of current sorting state in the grid
+ * Overview of current, live, sorting state in grid
  */
 export interface AdaptableSortState {
     /**
-     * Which columns have sorting applied and,if so, which direction
+     * Columns currently being sorted (with direction)
      */
     columnSorts: ColumnSort[];
     /**
-     * All active Custom Sorts in State
+     * Custom Sorts which are currently applied
      */
     customSorts: CustomSort[];
+    /**
+     * Custom Sort Comparers which are currently applied
+     */
+    customSortComparers: ColumnValuesComparer[];
 }

package/src/Api/CustomSortApi.d.ts

@@ -1,3 +1,4 @@
+import { ColumnValuesComparer } from '../AdaptableOptions/CustomSortOptions';
 import { CustomSortState, CustomSort } from '../AdaptableState/CustomSortState';
 /**
  *  Provides run-time access to the Custom Sort function
@@ -16,19 +17,28 @@ export interface CustomSortApi {
     /**
      * Retrieves Custom Sort by the technical ID (from `CustomSortState`)
      * @param id Custom Sort technical id
-     * @returns sort column
+     * @returns Custom Sort
      */
     getCustomSortById(id: CustomSort['Uuid']): CustomSort;
+    /**
+     * Retrieves all Custom Sorts in Adaptable State that are currently applied
+     * @returns Custom Sorts
+     */
+    getLiveCustomSorts(): CustomSort[];
+    /**
+     * Returns all Custom Sort Comparers in Custom Sort Options that are currently applied
+     */
+    getLiveCustomSortComparers(): ColumnValuesComparer[];
     /**
      * Retrieves all Custom Sorts that are active (not-suspended) in Adaptable State
-     * @returns sort columns
+     * @returns Custom Sorts
      */
     getActiveCustomSorts(config?: {
         includeLayoutNotAssociatedObjects?: boolean;
     }): CustomSort[];
     /**
      * Retrieves all Custom Sorts that are suspended in Adaptable State
-     * @returns sort columns
+     * @returns Custom Sorts
      */
     getSuspendedCustomSorts(config?: {
         includeLayoutNotAssociatedObjects?: boolean;
@@ -36,27 +46,27 @@ export interface CustomSortApi {
     /**
      * Retrieves Custom Sort from Adaptable State for Column with given ColumnId
      * @param columnId Id of Column to retrieve Custom Sort for
-     * @returns sort column
+     * @returns Custom Sort
      */
     getCustomSortForColumn(columnId: string): CustomSort | undefined;
     /**
      * Adds a Custom Sort to Custom Sort collection in Adaptable State
      * @param customSort Custom Sort to add
-     * @returns sort column
+     * @returns Custom Sort
      */
     addCustomSort(customSort: CustomSort): CustomSort;
     /**
      * Creates new Custom Sort based on given values
      * @param columnId Id of Column to which to apply Custom Sort
      * @param values Custom Sort values to apply
-     * @returns sort column
+     * @returns Custom Sort
      */
     createCustomSort(columnId: string, values: string[]): CustomSort;
     /**
      * Updates existing Custom Sort with new set of Sorted Values
      * @param columnId Id of Column on which to edit the Custom Sort
      * @param values Custom Sort values to use (replaces what was previously used)
-     * @returns sort column
+     * @returns Custom Sort
      */
     editCustomSort(columnId: string, values: string[]): CustomSort;
     /**
@@ -67,7 +77,7 @@ export interface CustomSortApi {
     /**
      * Suspends Custom Sort
      * @param customSort Custom Sort to suspend
-     * @returns sort column
+     * @returns Custom Sort
      */
     suspendCustomSort(customSort: CustomSort): CustomSort;
     /**
@@ -81,7 +91,7 @@ export interface CustomSortApi {
     /**
      * Un-suspends or activates a suspended Custom Sort
      * @param customSort Custom Sort to suspend
-     * @returns sort column
+     * @returns Custom Sort
      */
     unSuspendCustomSort(customSort: CustomSort): CustomSort;
     /**

package/src/Api/Implementation/CustomSortApiImpl.d.ts

@@ -3,6 +3,7 @@ import { CustomSortApi } from '../CustomSortApi';
 import { CustomSort, CustomSortState } from '../../AdaptableState/CustomSortState';
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { CustomSortInternalApi } from '../Internal/CustomSortInternalApi';
+import { ColumnValuesComparer } from '../../AdaptableOptions/CustomSortOptions';
 export declare class CustomSortApiImpl extends ApiBase implements CustomSortApi {
     internalApi: CustomSortInternalApi;
     constructor(_adaptable: IAdaptable);
@@ -11,6 +12,8 @@ export declare class CustomSortApiImpl extends ApiBase implements CustomSortApi
         includeLayoutNotAssociatedObjects?: boolean;
     }): CustomSort[];
     getCustomSortById(id: CustomSort['Uuid']): CustomSort;
+    getLiveCustomSorts(): CustomSort[];
+    getLiveCustomSortComparers(): ColumnValuesComparer[];
     getActiveCustomSorts(config?: {
         includeLayoutNotAssociatedObjects?: boolean;
     }): CustomSort[];

package/src/Api/Implementation/CustomSortApiImpl.js

@@ -16,6 +16,42 @@ export class CustomSortApiImpl extends ApiBase {
     getCustomSortById(id) {
         return this.getCustomSorts().find((customSort) => customSort.Uuid === id);
     }
+    getLiveCustomSorts() {
+        let returnVals = [];
+        const sortedColIds = this.getGridApi()
+            .getColumnSorts()
+            .map((c) => c.ColumnId);
+        const activeCustomSorts = this.getActiveCustomSorts();
+        if (sortedColIds == undefined || activeCustomSorts == undefined) {
+            return returnVals;
+        }
+        sortedColIds.forEach((columnId) => {
+            const customSort = activeCustomSorts.find((c) => c.ColumnId == columnId);
+            if (customSort) {
+                returnVals.push(customSort);
+            }
+        });
+        return returnVals;
+    }
+    getLiveCustomSortComparers() {
+        let returnComparers = [];
+        const sortedColIds = this.getGridApi()
+            .getColumnSorts()
+            .map((c) => c.ColumnId);
+        const sortedCols = this.getColumnApi().getColumnsWithColumnIds(sortedColIds);
+        const customSortComparers = this.getCustomSortOptions().customSortComparers;
+        if (sortedColIds == undefined || customSortComparers == undefined) {
+            return returnComparers;
+        }
+        const scopeApi = this.getColumnScopeApi();
+        sortedCols.forEach((column) => {
+            const comparer = customSortComparers.find((acs) => scopeApi.isColumnInScope(column, acs.scope));
+            if (comparer && !returnComparers.includes(comparer)) {
+                returnComparers.push(comparer);
+            }
+        });
+        return returnComparers;
+    }
     getActiveCustomSorts(config) {
         return this.getCustomSorts(config).filter((customSort) => !customSort.IsSuspended);
     }

package/src/Api/Implementation/StateApiImpl.d.ts

@@ -17,7 +17,7 @@ import { FreeTextColumnState } from '../../AdaptableState/FreeTextColumnState';
 import { ToolPanelState } from '../../AdaptableState/ToolPanelState';
 import { StateApi } from '../StateApi';
 import { AdaptableModule, AdaptableStateKey } from '../../AdaptableState/Common/Types';
-import { AdaptableOptions, AdaptableFilterState, AdaptableSortState, FlashingCellState, InitialState, NamedQueryState, ScheduleState, StatusBarState, StyledColumnState } from '../../types';
+import { AdaptableFilterState, AdaptableSortState, FlashingCellState, InitialState, NamedQueryState, ScheduleState, StatusBarState, StyledColumnState } from '../../types';
 import { PredefinedConfig } from '../../AdaptableState/InitialState';
 import { ChartingState } from '../../AdaptableState/ChartingState';
 import { NoteState } from '../../AdaptableState/NoteState';
@@ -35,7 +35,6 @@ export declare class StateApiImpl extends ApiBase implements StateApi {
     loadUserState(state: InitialState): void;
     getAdaptableFilterState(): AdaptableFilterState;
     getAdaptableSortState(): AdaptableSortState;
-    getAdaptableOptions(): Readonly<AdaptableOptions>;
     setAdaptableStateKey(adaptableStateKey: string, config?: {
         initialState?: InitialState;
         flushCurrentState?: boolean;

package/src/Api/Implementation/StateApiImpl.js

@@ -109,13 +109,11 @@ export class StateApiImpl extends ApiBase {
     getAdaptableSortState() {
         const adaptableSortState = {
             columnSorts: this.getGridApi().getColumnSorts(),
-            customSorts: this.getCustomSortApi().getActiveCustomSorts(),
+            customSorts: this.getCustomSortApi().getLiveCustomSorts(),
+            customSortComparers: this.getCustomSortApi().getLiveCustomSortComparers(),
         };
         return adaptableSortState;
     }
-    getAdaptableOptions() {
-        return undefined;
-    }
     setAdaptableStateKey(adaptableStateKey, config) {
         return new Promise((resolve, reject) => {
             this.getAdaptableInternalApi().executeWithProgressIndicator(config?.progressIndicatorLabel ?? `Initialising...`, () => {

package/src/Api/Internal/EventInternalApi.js

@@ -3,12 +3,14 @@ import isEqual from 'lodash/isEqual';
 export class EventInternalApi extends ApiBase {
     fireGridSortedEvent() {
         if (this.isAdapTableReady()) {
-            const adaptableSortState = this.getStateApi().getAdaptableSortState();
-            const gridSortedInfo = {
-                adaptableSortState,
-                ...this.getAdaptableInternalApi().buildBaseContext(),
-            };
-            this.getEventApi().emit('GridSorted', gridSortedInfo);
+            setTimeout(() => {
+                const adaptableSortState = this.getStateApi().getAdaptableSortState();
+                const gridSortedInfo = {
+                    adaptableSortState,
+                    ...this.getAdaptableInternalApi().buildBaseContext(),
+                };
+                this.getEventApi().emit('GridSorted', gridSortedInfo);
+            }, 50);
         }
     }
     fireCellChangedEvent(cellDataChangedInfo) {

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

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;

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) => {
@@ -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: 1747747693470 || Date.now(),
-    VERSION: "20.1.4" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1748008314697 || Date.now(),
+    VERSION: "20.1.5" || '--current-version--',
 };