@adaptabletools/adaptable-cjs 21.0.11 → 21.1.0-canary.0

package/src/Utilities/Hooks/useAdaptableColumn.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptableColumn = void 0;
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+function useAdaptableColumn(columnId) {
+    const api = (0, AdaptableContext_1.useAdaptable)().api;
+    const column = api.columnApi.getColumnWithColumnId(columnId);
+    return column;
+}
+exports.useAdaptableColumn = useAdaptableColumn;

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,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptableOptions = void 0;
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const useAdaptableOptions = (fn) => {
+    const adaptableOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions;
+    return fn ? fn(adaptableOptions) : adaptableOptions;
+};
+exports.useAdaptableOptions = useAdaptableOptions;

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,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptableState = void 0;
+const react_1 = require("react");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+function useAdaptableState(selector) {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const store = adaptable.adaptableStore;
+    const [_refreshKey, setRefreshKey] = (0, react_1.useState)(0);
+    const resultRef = (0, react_1.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;
+}
+exports.useAdaptableState = useAdaptableState;

package/src/Utilities/adaptableQlUtils.js

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

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,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptableComputedCSSVar = exports.useAdaptableComputedCSSVars = exports.WithAdaptableComputedCSSVars = exports.AdaptableComputedCSSVarsContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const CSSNumericVariableWatch_1 = require("../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]));
+exports.AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
+const WithAdaptableComputedCSSVars = ({ children }) => {
+    const [computedCSSVars, setComputedCSSVars] = React.useState(defaultValues);
+    return (React.createElement(exports.AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars },
+        children,
+        computedCSSVarNames.map((varName) => (React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { key: varName, varName: varName, onChange: (value) => {
+                setComputedCSSVars((prev) => ({ ...prev, [varName]: value }));
+            } })))));
+};
+exports.WithAdaptableComputedCSSVars = WithAdaptableComputedCSSVars;
+const useAdaptableComputedCSSVars = () => {
+    const context = React.useContext(exports.AdaptableComputedCSSVarsContext);
+    return context;
+};
+exports.useAdaptableComputedCSSVars = useAdaptableComputedCSSVars;
+const useAdaptableComputedCSSVar = (varName) => {
+    const context = React.useContext(exports.AdaptableComputedCSSVarsContext);
+    return context?.[varName];
+};
+exports.useAdaptableComputedCSSVar = useAdaptableComputedCSSVar;

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

@@ -11,6 +11,7 @@ const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const ColumnFilterMenu_1 = require("./components/ColumnFilterMenu");
 const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList");
 const utils_1 = require("./utils");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const FloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     /**
@@ -26,7 +27,10 @@ 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 === GeneralConstants_1.AG_GRID_GROUPED_COLUMN) {
+        showLabel = false;
+    }
     let label = (0, utils_1.qlPredicateToString)(props.predicate, props.predicateDefs);
     if (isManualApply &&
         singleFilterPredicateDef &&

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

@@ -37,7 +37,7 @@ 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

@@ -6,6 +6,15 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ListBoxFilterForm_1 = require("../../FilterForm/ListBoxFilterForm");
+const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const onceFlags = {};
+const logOnce = (message, loggingFn) => {
+    if (onceFlags[message]) {
+        return;
+    }
+    loggingFn(message);
+    onceFlags[message] = true;
+};
 const renderSingleValue = (option) => {
     return option.label;
 };
@@ -45,10 +54,10 @@ 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) {
@@ -57,7 +66,7 @@ function useDistinctFilterColumnValues(options) {
         }
         usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current = false;
         if (!promise) {
-            promise = columnFilterinternalApi.getColumnFilterValues({
+            promise = columnFilterInternalApi.getColumnFilterValues({
                 columnId,
                 get currentSearchValue() {
                     searchValueUsedInFilterValue = true;
@@ -96,6 +105,9 @@ exports.useDistinctFilterColumnValues = useDistinctFilterColumnValues;
  */
 const FloatingFilterValues = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
+    // const evaluateInPredicateUsingTime = useAdaptableOptions(
+    //   (options) => options.predicateOptions.evaluateInPredicateUsingTime
+    // );
     const currentColumn = api.columnApi.getColumnWithColumnId(props.columnId);
     const searchValueRef = React.useRef('');
     const { isDistinctColumnValuesLoading, quickFilterValues, triggerValuesLoad } = useDistinctFilterColumnValues({
@@ -112,9 +124,10 @@ 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({
@@ -155,6 +168,20 @@ const FloatingFilterValues = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
+    if (props.columnId === GeneralConstants_1.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(ListBoxFilterForm_1.ColumnValuesSelect, { selectProps: props.inline
             ? {
                 ...props.selectProps,
@@ -187,14 +214,12 @@ 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 }));
 };
 exports.FloatingFilterValues = FloatingFilterValues;

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

@@ -8,31 +8,108 @@ const date_fns_1 = require("date-fns");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const Select_1 = require("../../../components/Select");
+const TreeDropdown_1 = require("../../../components/Tree/TreeDropdown");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_1 = require("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 (0, TreeDropdown_1.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 = [];
 const ColumnValuesSelect = (props) => {
     const column = props.column;
-    const selectedColumnValues = props.value || [];
+    const { api } = (0, AdaptableContext_1.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) => (0, date_fns_1.isEqual)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
-        }
-        if (StringExtensions_1.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 = (0, react_1.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 === GeneralConstants_1.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) => (0, date_fns_1.isEqual)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
+            }
+            if (StringExtensions_1.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_1.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 === GeneralConstants_1.AG_GRID_GROUPED_COLUMN ? (React.createElement(TreeDropdown_1.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_1.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: (0, join_1.default)(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

@@ -255,7 +255,7 @@ 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((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
         }

package/src/View/renderWithAdaptableContext.js

@@ -7,9 +7,11 @@ const react_redux_1 = require("react-redux");
 const styled_components_1 = require("styled-components");
 const theme_1 = tslib_1.__importDefault(require("../theme"));
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
+const AdaptableComputedCSSVarsContext_1 = require("./AdaptableComputedCSSVarsContext");
 const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore },
         React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
-            React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children))));
+            React.createElement(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, null,
+                React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children)))));
 };
 exports.renderWithAdaptableContext = renderWithAdaptableContext;

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;