@adaptabletools/adaptable 21.0.12 → 21.1.0-canary.1

package/src/Utilities/Hooks/useAdaptableOptions.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableOptions } from '../../types';
+export declare const useAdaptableOptions: <T = AdaptableOptions<any, Record<string, any>>>(fn?: (adaptableOptions: AdaptableOptions) => T) => T;

package/src/Utilities/Hooks/useAdaptableOptions.js

@@ -0,0 +1,5 @@
+import { useAdaptable } from '../../View/AdaptableContext';
+export const useAdaptableOptions = (fn) => {
+    const adaptableOptions = useAdaptable().adaptableOptions;
+    return fn ? fn(adaptableOptions) : adaptableOptions;
+};

package/src/Utilities/Hooks/useAdaptableState.d.ts

@@ -0,0 +1,3 @@
+import { AdaptableState } from '../../types';
+export declare function useAdaptableState(): AdaptableState | null;
+export declare function useAdaptableState<T>(selector: (state: AdaptableState) => T): T | null;

package/src/Utilities/Hooks/useAdaptableState.js

@@ -0,0 +1,39 @@
+import { useRef, useState } from 'react';
+import { useAdaptable } from '../../View/AdaptableContext';
+export function useAdaptableState(selector) {
+    const adaptable = useAdaptable();
+    const store = adaptable.adaptableStore;
+    const [_refreshKey, setRefreshKey] = useState(0);
+    const resultRef = useRef(null);
+    const getResult = () => {
+        if (!store) {
+            return null;
+        }
+        const state = store.getCurrentStorageState();
+        if (!state) {
+            return null;
+        }
+        return selector ? selector(state) : state;
+    };
+    // don't refresh when the state changes
+    // as we're under the adaptable context
+    // and this means it will be refreshed automatically
+    // useEffect(() => {
+    //   if (!store) {
+    //     return;
+    //   }
+    //   return store.onAny(() => {
+    //     const newResult = getResult();
+    //     if (newResult !== resultRef.current) {
+    //       //only refresh when the result has changed
+    //       setRefreshKey((prev) => prev + 1);
+    //     }
+    //   });
+    // }, [store]);
+    if (!adaptable || !adaptable.isReady) {
+        return null;
+    }
+    const res = getResult();
+    resultRef.current = res;
+    return res;
+}

package/src/Utilities/Services/ModuleService.js

@@ -124,7 +124,7 @@ export class ModuleService {
             case 'Comment':
                 return learnUrl + 'handbook-comments';
             case 'CustomSort':
-                return learnUrl + 'handbook-sorting-custom';
+                return learnUrl + 'handbook-custom-sorting';
             case 'Dashboard':
                 return learnUrl + 'ui-dashboard';
             case 'DataChangeHistory':

package/src/Utilities/adaptableQlUtils.js

@@ -17,6 +17,9 @@ export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
     if (dataType === 'textArray') {
         return 'text[]';
     }
+    if (dataType === 'groupColumn') {
+        return 'text';
+    }
 };
 export const mapExpressionFunctionTypeToColumnDataType = (type) => {
     if (type === 'number') {

package/src/View/AdaptableComputedCSSVarsContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const computedCSSVarNames: readonly ["--ab-cmp-select-menu__max-width", "--ab-cmp-select-menu__min-width", "--ab-cmp-select-menu__max-height"];
+type AdaptableComputedCSSVars = {
+    [key in (typeof computedCSSVarNames)[number]]: string | number;
+};
+export declare const AdaptableComputedCSSVarsContext: React.Context<AdaptableComputedCSSVars>;
+export declare const WithAdaptableComputedCSSVars: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useAdaptableComputedCSSVars: () => AdaptableComputedCSSVars;
+export declare const useAdaptableComputedCSSVar: (varName: (typeof computedCSSVarNames)[number]) => string | number;
+export {};

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
+const computedCSSVarNames = [
+    '--ab-cmp-select-menu__max-width',
+    '--ab-cmp-select-menu__min-width',
+    '--ab-cmp-select-menu__max-height',
+];
+const defaultValues = Object.fromEntries(computedCSSVarNames.map((varName) => [varName, 0]));
+export const AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
+export const WithAdaptableComputedCSSVars = ({ children }) => {
+    const [computedCSSVars, setComputedCSSVars] = React.useState(defaultValues);
+    return (React.createElement(AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars },
+        children,
+        computedCSSVarNames.map((varName) => (React.createElement(CSSNumericVariableWatch, { key: varName, varName: varName, onChange: (value) => {
+                setComputedCSSVars((prev) => ({ ...prev, [varName]: value }));
+            } })))));
+};
+export const useAdaptableComputedCSSVars = () => {
+    const context = React.useContext(AdaptableComputedCSSVarsContext);
+    return context;
+};
+export const useAdaptableComputedCSSVar = (varName) => {
+    const context = React.useContext(AdaptableComputedCSSVarsContext);
+    return context?.[varName];
+};

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '.';
-export declare const AdaptableDateInlineInput: React.ForwardRefExoticComponent<Omit<Omit<AdaptableInputProps, "onChange" | "value"> & {
+export declare const AdaptableDateInlineInput: React.ForwardRefExoticComponent<Omit<Omit<AdaptableInputProps, "value" | "onChange"> & {
     onChange: (value: string) => void;
     value: string;
 }, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -7,6 +7,7 @@ import { AdaptableIconComponent } from '../AdaptableIconComponent';
 import { ColumnFilterMenu } from './components/ColumnFilterMenu';
 import { FloatingFilterInputList } from './components/FloatingFilterInputList';
 import { isPredicateEmpty, qlPredicateToString } from './utils';
+import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
     /**
@@ -22,7 +23,10 @@ export const FloatingFilter = (props) => {
         singleFilterPredicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === props.predicate.args[0].operator);
     }
     const noInputs = !singleFilterPredicateDef?.inputs || singleFilterPredicateDef.inputs.length === 0;
-    const showLabel = isMultiple || noInputs || isManualApply;
+    let showLabel = isMultiple || noInputs || isManualApply;
+    if (props.columnId === AG_GRID_GROUPED_COLUMN) {
+        showLabel = false;
+    }
     let label = qlPredicateToString(props.predicate, props.predicateDefs);
     if (isManualApply &&
         singleFilterPredicateDef &&

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js

@@ -33,7 +33,7 @@ export const FloatingFilterInputList = (props) => {
                 });
             }, value: props.predicate.args, 
             // are not known ql operators for now
-            // should change when porting, it has knoladge about predicates
+            // should change when porting, it has knowledge about predicates
             type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
     }
     return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -2,6 +2,15 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ColumnValuesSelect } from '../../FilterForm/ListBoxFilterForm';
+import { AG_GRID_GROUPED_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+const onceFlags = {};
+const logOnce = (message, loggingFn) => {
+    if (onceFlags[message]) {
+        return;
+    }
+    loggingFn(message);
+    onceFlags[message] = true;
+};
 const renderSingleValue = (option) => {
     return option.label;
 };
@@ -41,10 +50,10 @@ export function useDistinctFilterColumnValues(options) {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         let searchValueUsedInFilterValue = false;
-        const columnFilterinternalApi = api.filterApi.columnFilterApi.internalApi;
+        const columnFilterInternalApi = api.filterApi.columnFilterApi.internalApi;
         let promise = undefined;
         if (usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current) {
-            const previousResult = columnFilterinternalApi
+            const previousResult = columnFilterInternalApi
                 .getAdaptableFilterHandler(columnId)
                 ?.getLastCachedFilterDisplayValues();
             if (previousResult) {
@@ -53,7 +62,7 @@ export function useDistinctFilterColumnValues(options) {
         }
         usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current = false;
         if (!promise) {
-            promise = columnFilterinternalApi.getColumnFilterValues({
+            promise = columnFilterInternalApi.getColumnFilterValues({
                 columnId,
                 get currentSearchValue() {
                     searchValueUsedInFilterValue = true;
@@ -91,6 +100,9 @@ export function useDistinctFilterColumnValues(options) {
  */
 export const FloatingFilterValues = (props) => {
     const { api } = useAdaptable();
+    // const evaluateInPredicateUsingTime = useAdaptableOptions(
+    //   (options) => options.predicateOptions.evaluateInPredicateUsingTime
+    // );
     const currentColumn = api.columnApi.getColumnWithColumnId(props.columnId);
     const searchValueRef = React.useRef('');
     const { isDistinctColumnValuesLoading, quickFilterValues, triggerValuesLoad } = useDistinctFilterColumnValues({
@@ -107,9 +119,10 @@ export const FloatingFilterValues = (props) => {
             return;
         }
         // see 😅 usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef 😅
-        const usePrevious = !!api.filterApi.columnFilterApi.internalApi
-            .getAdaptableFilterHandler(props.columnId)
-            ?.getLastCachedFilterDisplayValues();
+        const filterHandler = api.filterApi.columnFilterApi.internalApi.getAdaptableFilterHandler(props.columnId);
+        const usePrevious = filterHandler && typeof filterHandler.getLastCachedFilterDisplayValues === 'function'
+            ? !!filterHandler.getLastCachedFilterDisplayValues()
+            : false;
         // however, if the `value` prop is a non-empty array, we need to load the values
         // so we know which labels to show
         triggerValuesLoad({
@@ -150,6 +163,20 @@ export const FloatingFilterValues = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
+    if (props.columnId === AG_GRID_GROUPED_COLUMN) {
+        if (Array.isArray(props.value) && !props.value.every((value) => Array.isArray(value))) {
+            logOnce(`All the inputs for the IN predicate for the column "${props.columnId}" need to be arrays. Example:
+{
+  PredicateId: 'In',
+  Inputs: [
+      ['United States'],
+      ['Canada'],
+      ['United Kingdom', 'England'],
+  ]
+}
+`, (msg) => console.warn(msg));
+        }
+    }
     return (React.createElement(ColumnValuesSelect, { selectProps: props.inline
             ? {
                 ...props.selectProps,
@@ -182,13 +209,11 @@ export const FloatingFilterValues = (props) => {
                         }
                         : {}),
                 },
-                onMenuOpen,
                 onInputChange,
             }
             : {
                 ...props.selectProps,
                 skipDefaultFiltering: skipDefaultSearch,
-                onMenuOpen,
                 onInputChange,
-            }, disabled: props.disabled, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
+            }, disabled: props.disabled, onMenuOpen: onMenuOpen, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
 };

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -12,5 +12,6 @@ export interface ColumnValuesSelectProps {
     dataType: AdaptableColumnDataType;
     isLoading?: boolean;
     selectProps?: Partial<SelectProps<any, false>>;
+    onMenuOpen?: () => void;
 }
 export declare const ColumnValuesSelect: (props: ColumnValuesSelectProps) => React.JSX.Element;

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

@@ -4,31 +4,108 @@ import { isEqual } from 'date-fns';
 import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 import join from '../../../components/utils/join';
 import { Select } from '../../../components/Select';
+import { toDisplayValueDefault, TreeDropdown } from '../../../components/Tree/TreeDropdown';
+import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
+import { useAdaptable } from '../../AdaptableContext';
+import { useMemo } from 'react';
 const baseClassName = 'ab-ListBoxFilterForm';
+// used for displaying the date values in the input
+function toDateDisplayValue(values) {
+    values = values.map((v) => {
+        if (!Array.isArray(v)) {
+            return v;
+        }
+        return v[v.length - 1];
+    });
+    return toDisplayValueDefault(values);
+}
+const dateOnChangeParser = (value) => {
+    /**
+     * the value looks like this:
+     * [
+     *  ["2021","2021-01","2021-01-01"],
+     *  ["2024","2024-02","2024-02-15T12:34:00"],
+     * ]
+     */
+    // so first need to transfor the above to this:
+    /**
+     * [
+     *  [2023, 12, 1, 1640668800000],
+     *  [2023, 12, 3, 1738377600000]
+     * ]
+     */
+    return value.map((v) => {
+        return v[v.length - 1];
+    });
+};
+const EMPTY_ARRAY = [];
 export const ColumnValuesSelect = (props) => {
     const column = props.column;
-    const selectedColumnValues = props.value || [];
+    const { api } = useAdaptable();
+    let selectedColumnValues = props.value || EMPTY_ARRAY;
+    const optionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
     const value = [];
-    const options = (Array.isArray(props.options) ? props.options : []).filter((distinctValue) => {
-        let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
-        // special case for date objects, need to check against string values
-        if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
-        }
-        if (StringExtensions.IsNullOrEmpty(distinctValue.value)) {
-            return false;
-        }
-        if (isActive) {
-            value.push(distinctValue.value);
-        }
-        return true;
-    });
+    if (column.dataType === 'date') {
+        // we might have a use-case where users might want to get rid of a tree level
+        // because it may contain only one child. currently,
+        // the value is an array of strings that have this form (ISOish)
+        // ["2021-01-01", "2021-10-02", "2021-01-03T12:00:00"]
+        // but we want the full path to each value
+        // but we can't compute that by simply splitting the strings by '-' or 'T',
+        // as if we do that, then we won't support removing a tree level
+        // so we have to compute the paths based on the options
+        const valueToPath = useMemo(() => {
+            const valueToPath = new Map();
+            const withOption = (option, parentPath = []) => {
+                const optionPath = [...parentPath, option.value];
+                valueToPath.set(option.value, optionPath);
+                if (Array.isArray(option.children)) {
+                    option.children.forEach((child) => withOption(child, optionPath));
+                }
+            };
+            optionsFromProps.forEach((option) => withOption(option, []));
+            return valueToPath;
+        }, [optionsFromProps]);
+        selectedColumnValues = selectedColumnValues
+            .map((v) => {
+            return valueToPath.get(v);
+        })
+            .filter(Boolean);
+    }
+    const options = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN
+        ? optionsFromProps
+        : optionsFromProps.filter((distinctValue) => {
+            let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
+            // special case for date objects, need to check against string values
+            if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
+                isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+            }
+            if (StringExtensions.IsNullOrEmpty(distinctValue.value)) {
+                return false;
+            }
+            if (isActive) {
+                value.push(distinctValue.value);
+            }
+            return true;
+        });
     const menuStyle = React.useMemo(() => {
         return {
             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, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: 'menulist', closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
+    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (React.createElement(TreeDropdown, { style: {
+            width: '100%',
+            height: '100%',
+            ...props.selectProps?.styles?.container,
+        }, toDisplayValue: column.dataType === 'date' ? toDateDisplayValue : undefined, fieldStyle: {
+            boxShadow: 'none',
+            ...props.selectProps?.styles?.control,
+        }, resizable: true, onChange: column.dataType === 'date'
+            ? (value) => props.onChange(dateOnChangeParser(value))
+            : props.onChange, options: options, 
+        // for dates, the treeDateOptions have ids that are numbers
+        // so we have to add the `toDateValue` function to convert the values to the correct format
+        value: selectedColumnValues, primaryKey: 'value', onMenuOpen: props.onMenuOpen, onMouseDown: (e) => e.stopPropagation() })) : (React.createElement(Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: 'menulist', closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, onMenuOpen: props.onMenuOpen, 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/View/Layout/Wizard/sections/ColumnsSection.js

@@ -250,7 +250,7 @@ export const ColumnsSection = (props) => {
     // however, changes in RowGroupedColumns done in the previous step
     // are reflected into the layout, so we use the latest layout.RowGroupedColumns
     // to create new columns
-    if (layout.RowGroupedColumns) {
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
         if (layout.RowGroupDisplayType === 'single') {
             allColumns.unshift(generateAutoRowGroupSingleColumn());
         }

package/src/View/renderWithAdaptableContext.js

@@ -3,8 +3,10 @@ import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import theme from '../theme';
 import AdaptableContext from './AdaptableContext';
+import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
 export const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(Provider, { store: adaptable.adaptableStore.TheStore },
         React.createElement(ThemeProvider, { theme: theme },
-            React.createElement(AdaptableContext.Provider, { value: adaptable }, children))));
+            React.createElement(WithAdaptableComputedCSSVars, null,
+                React.createElement(AdaptableContext.Provider, { value: adaptable }, children)))));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -26,7 +26,7 @@ import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { GridCellWithCount } from '../AdaptableState/Selection/GridCell';
+import { GridCellWithCount, GridCellWithChildren } from '../AdaptableState/Selection/GridCell';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { PivotLayoutModel, TableLayoutModel } from '../layout-manager/src/LayoutManagerModel';
@@ -266,6 +266,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
         currentSearchValue: string;
         gridCell?: GridCell;
     }): Promise<EditColumnValueInfo[]>;
+    getDistinctGridCellsForGroupedColumn(rowNodes?: IRowNode[]): GridCellWithChildren[];
+    getDistinctGridCellsForDateColumn(column: AdaptableColumn, rowNodes?: IRowNode[]): GridCellWithChildren[];
     getDistinctGridCellsForColumn(column: AdaptableColumn, rowNodes?: IRowNode[]): GridCellWithCount[];
     private addDistinctColumnValue;
     private getUniqueGridCells;