@adaptabletools/adaptable-cjs 23.0.0-canary.2 → 23.0.0-canary.4

package/src/Api/Internal/EventInternalApi.js

@@ -103,7 +103,8 @@ class EventInternalApi extends ApiBase_1.ApiBase {
     fireScheduledReportRanEvent(reportSchedule) {
         const reportScheduleRanInfo = {
             ...this.getAdaptableInternalApi().buildBaseContext(),
-            reportSchedule: reportSchedule,
+            reportSchedule,
+            RanAt: new Date().toISOString(),
         };
         this.getEventApi().emit('ReportScheduleRan', reportScheduleRanInfo);
     }

package/src/Strategy/CalculatedColumnModule.js

@@ -36,7 +36,9 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger !== 'aggChange' && !cellDataChangedInfo.preventEdit) {
+            if (cellDataChangedInfo.trigger !== 'aggChange' &&
+                cellDataChangedInfo.trigger !== 'calculatedColumnChange' &&
+                !cellDataChangedInfo.preventEdit) {
                 this.api.internalApi
                     .getCalculatedColumnExpressionService()
                     .listentoCellDataChange(cellDataChangedInfo);

package/src/Utilities/Services/CalculatedColumnExpressionService.d.ts

@@ -8,6 +8,7 @@ export declare class CalculatedColumnExpressionService implements ICalculatedCol
     private adaptableApi;
     private aggregatedScalarLiveValuesMap;
     constructor(adaptableApi: AdaptableApi);
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
     destroy(): void;

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnExpressionService = void 0;
 const ModuleConstants_1 = require("../Constants/ModuleConstants");
 const AggregatedScalarLiveValue_1 = require("./AggregatedScalarLiveValue");
+const CalculatedColumnSyntheticChange_1 = require("./CalculatedColumnSyntheticChange");
 class CalculatedColumnExpressionService {
     adaptableApi;
     aggregatedScalarLiveValuesMap = new Map();
@@ -10,7 +11,13 @@ class CalculatedColumnExpressionService {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
     }
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo) {
+        return (0, CalculatedColumnSyntheticChange_1.buildSyntheticCellDataChangedInfosForCalcColumns)(this.adaptableApi, cellDataChangedInfo);
+    }
     listentoCellDataChange(cellDataChangedInfo) {
+        if (cellDataChangedInfo.trigger === 'calculatedColumnChange') {
+            return;
+        }
         const refreshedCalculatedColumns = [];
         this.aggregatedScalarLiveValuesMap.forEach((aggregatedScalarLiveValue, calculatedColumnId) => {
             const calculatedColumn = this.adaptableApi.calculatedColumnApi.getCalculatedColumnById(calculatedColumnId);

package/src/Utilities/Services/CalculatedColumnSyntheticChange.d.ts

@@ -0,0 +1,4 @@
+import { AdaptableApi } from '../../types';
+import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
+export declare function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi: AdaptableApi, info: CellDataChangedInfo): CellDataChangedInfo[];
+export declare function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi: AdaptableApi, cellDataChangedInfos: CellDataChangedInfo[]): CellDataChangedInfo[];

package/src/Utilities/Services/CalculatedColumnSyntheticChange.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSyntheticCellDataChangedInfosForCalcColumns = buildSyntheticCellDataChangedInfosForCalcColumns;
+exports.expandCellDataChangedInfosWithCalculatedColumns = expandCellDataChangedInfosWithCalculatedColumns;
+const tslib_1 = require("tslib");
+const parser = tslib_1.__importStar(require("../../parser/src"));
+const ModuleConstants_1 = require("../Constants/ModuleConstants");
+const Helper_1 = tslib_1.__importDefault(require("../Helpers/Helper"));
+function isScalarCalculatedColumn(calculatedColumn) {
+    return !!calculatedColumn.Query?.ScalarExpression;
+}
+function collectDependentScalarCalculatedColumns(adaptableApi, rootColumnId) {
+    const collected = [];
+    const seenCalcColumnIds = new Set();
+    const queue = [rootColumnId];
+    while (queue.length > 0) {
+        const columnId = queue.shift();
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        if (!adaptableColumn) {
+            continue;
+        }
+        const dependentColumnIds = adaptableApi.calculatedColumnApi.internalApi.getCalculatedColumnsDependentOnColumn(adaptableColumn);
+        dependentColumnIds.forEach((dependentColumnId) => {
+            if (seenCalcColumnIds.has(dependentColumnId)) {
+                return;
+            }
+            const calculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(dependentColumnId);
+            if (!calculatedColumn || !isScalarCalculatedColumn(calculatedColumn)) {
+                return;
+            }
+            seenCalcColumnIds.add(dependentColumnId);
+            collected.push(calculatedColumn);
+            queue.push(dependentColumnId);
+        });
+    }
+    return collected;
+}
+function buildShadowRowData(adaptableApi, info) {
+    const shadowData = Helper_1.default.cloneObject(info.rowNode?.data ?? info.rowData ?? {});
+    const fieldName = info.column.field ?? info.column.columnId;
+    adaptableApi.internalApi.setValueUsingField(shadowData, fieldName, info.oldValue);
+    return shadowData;
+}
+function evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, rowNode, shadowData) {
+    const internalApi = adaptableApi.internalApi;
+    const moduleFns = internalApi
+        .getQueryLanguageService()
+        .getModuleExpressionFunctionsMap(ModuleConstants_1.CalculatedColumnModuleId);
+    const baseFunctions = { ...moduleFns.booleanFunctions, ...moduleFns.scalarFunctions };
+    const resolveColumnValue = (columnId) => {
+        const childCalculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(columnId);
+        if (childCalculatedColumn?.Query?.ScalarExpression) {
+            return evaluateScalarExpressionWithShadowData(adaptableApi, childCalculatedColumn, rowNode, shadowData);
+        }
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        return internalApi.getValueUsingField(shadowData, adaptableColumn?.field ?? columnId);
+    };
+    const customFunctions = {
+        ...baseFunctions,
+        COL: {
+            ...baseFunctions.COL,
+            handler: (args) => resolveColumnValue(args[0]),
+        },
+        FIELD: {
+            ...baseFunctions.FIELD,
+            handler: (args) => internalApi.getValueUsingField(shadowData, args[0]),
+        },
+    };
+    return parser.evaluate(calculatedColumn.Query.ScalarExpression, {
+        node: { ...rowNode, data: shadowData },
+        functions: customFunctions,
+        ...internalApi.buildBaseContext(),
+    });
+}
+function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info) {
+    if (!info.rowNode ||
+        info.preventEdit ||
+        info.trigger === 'undo' ||
+        info.trigger === 'aggChange' ||
+        info.trigger === 'calculatedColumnChange') {
+        return [];
+    }
+    const calculatedColumns = collectDependentScalarCalculatedColumns(adaptableApi, info.column.columnId);
+    if (!calculatedColumns.length) {
+        return [];
+    }
+    const shadowData = buildShadowRowData(adaptableApi, info);
+    const expressionService = adaptableApi.internalApi.getCalculatedColumnExpressionService();
+    const syntheticEvents = [];
+    calculatedColumns.forEach((calculatedColumn) => {
+        const oldValue = evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, info.rowNode, shadowData);
+        const newValue = expressionService.evaluateCalculatedColumnQuery(calculatedColumn, info.rowNode);
+        if (oldValue == newValue) {
+            return;
+        }
+        const column = adaptableApi.columnApi.getColumnWithColumnId(calculatedColumn.ColumnId);
+        if (!column) {
+            return;
+        }
+        syntheticEvents.push(adaptableApi.internalApi.buildCellDataChangedInfo({
+            oldValue,
+            newValue,
+            column,
+            primaryKeyValue: info.primaryKeyValue,
+            rowNode: info.rowNode,
+            trigger: 'calculatedColumnChange',
+        }));
+    });
+    return syntheticEvents;
+}
+function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi, cellDataChangedInfos) {
+    if (!cellDataChangedInfos.length) {
+        return cellDataChangedInfos;
+    }
+    const syntheticEvents = cellDataChangedInfos.flatMap((info) => buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info));
+    if (!syntheticEvents.length) {
+        return cellDataChangedInfos;
+    }
+    return [...cellDataChangedInfos, ...syntheticEvents];
+}

package/src/Utilities/Services/Interface/ICalculatedColumnExpressionService.d.ts

@@ -11,4 +11,5 @@ export interface ICalculatedColumnExpressionService extends IAdaptableService {
     destroyAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
 }

package/src/View/AdaptablePopover/index.js

@@ -29,7 +29,7 @@ class AdaptablePopover extends React.Component {
         const openOnHover = showEvent === 'mouseenter';
         const triggerElement = useButton ? ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText, disabled: this.props.disabled, children: this.props.children })) : ((0, jsx_runtime_1.jsxs)("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' }, children: [this.props.children, showIcon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: icon, style: iconStyle })] }));
         const controlledProps = this.props.visible !== undefined ? { open: this.props.visible } : {};
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: this.props.className, children: (0, jsx_runtime_1.jsxs)(popover_1.Popover, { ...controlledProps, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { nativeButton: !!useButton, openOnHover: openOnHover, delay: 0, closeDelay: 0, render: triggerElement }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { align: "start", sideOffset: 10, className: "ab-Popover twa:w-auto twa:gap-0 twa:p-0", style: {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: this.props.className, children: (0, jsx_runtime_1.jsxs)(popover_1.Popover, { ...controlledProps, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { nativeButton: !!useButton, openOnHover: openOnHover, delay: 0, closeDelay: 0, render: triggerElement }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { align: "start", sideOffset: 10, className: "ab-Popover twa:border twa:border-primarylight twa:w-auto twa:gap-0 twa:p-0", style: {
                             minWidth: popoverMinWidth,
                             maxWidth: this.props.popoverMaxWidth ?? 300,
                         }, children: [title ? (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:p-2", children: title }) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `ab-Popover__body ${(this.props.popupPadding ?? 2) === 0 ? 'twa:p-0' : 'twa:p-2'}`, children: this.props.bodyText.map((textOrHTML, index) => ((0, jsx_runtime_1.jsx)("span", { children: textOrHTML }, index))) })] })] }) }));

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const NewSelect_1 = require("../../../../components/NewSelect");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
@@ -40,28 +40,20 @@ const SettingsSection = (props) => {
         });
     }, [props.chartDefinition]);
     const aggFuncs = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
-    const aggFuncsOptions = aggFuncs.map((aggFunc) => ({
-        label: aggFunc,
-        onClick: () => {
-            props.onChange({
-                ...props.chartDefinition,
-                Model: {
-                    ...props.chartDefinition.Model,
-                    aggFunc,
-                },
-            });
-        },
-    }));
     const aggFunc = props.chartDefinition.Model.aggFunc;
-    const handleAggFuncClear = React.useCallback(() => {
+    const handleAggFuncChange = React.useCallback((value) => {
         props.onChange({
             ...props.chartDefinition,
             Model: {
                 ...props.chartDefinition.Model,
-                aggFunc: '',
+                aggFunc: value,
             },
         });
     }, [props.chartDefinition]);
-    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
+    const aggFuncsOptions = aggFuncs.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Select", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: handleAggFuncChange }) }))] }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/Components/Buttons/ButtonInfo.d.ts

@@ -4,4 +4,4 @@ export interface InfoButtonProps extends SimpleButtonProps {
     glyph?: string;
     tooltip?: string;
 }
-export declare const ButtonInfo: React.FunctionComponent<InfoButtonProps>;
+export declare const ButtonInfo: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/src/View/Components/Buttons/ButtonInfo.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonInfo = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const ButtonInfo = (props) => {
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
-};
-exports.ButtonInfo = ButtonInfo;
+exports.ButtonInfo = React.forwardRef(function ButtonInfo(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ref: ref, "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
+});

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

@@ -25,7 +25,7 @@ const AdaptableColumnFilter = (props) => {
                 handlePredicateChange(predicate);
             }, [handlePredicateChange]) }) }));
     if (props.location === 'filtersToolPanel') {
-        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mb-2", bodyProps: { className: 'twa:p-0' }, children: filterContent }));
+        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:p-1", bodyProps: { className: 'twa:p-0 twa:border-none' }, children: filterContent }));
     }
     return filterContent;
 };

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

@@ -15,11 +15,13 @@ const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
 const NewSelect_1 = require("../../../components/NewSelect");
 const columnFilterLocation_1 = require("./columnFilterLocation");
+const utils_2 = require("../../../lib/utils");
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { as: "span", variant: "raised", className: "twa:mr-2", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { as: "span", variant: "raised", className: "twa:mr-2 twa:p-0.5", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            tooltip: predicateDef.label,
             value: predicateDef.operator,
         };
     });
@@ -27,15 +29,14 @@ const ColumnFilterPredicateDropdown = (props) => {
     const isAndOr = operator === 'AND' || operator === 'OR';
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown twa:p-0.5", style: {
             //@ts-ignore ignore
-            '--ab-cmp-input__background': 'var(--ab-color-primary)',
             '--ab-color-input-background': 'var(--ab-color-primary)',
-        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "filter-predicate-dropdown", 
+        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "filter-predicate-dropdown", extraWidthChars: 8, 
             // The trigger lives inside ag-grid's column menu, which closes itself
             // on mousedowns outside its DOM subtree. Since the popup is portaled
             // to `document.body`, mousedowns inside it would otherwise bubble to
             // `document` and unmount the trigger mid-interaction (causing the
             // popup to re-align to (0,0) before disappearing).
-            stopMouseDownPropagation: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
+            stopMouseDownPropagation: true, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
@@ -64,6 +65,7 @@ const AndOrInput = (props) => {
 const ColumnFilterComponent = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const manuallyApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const rootRef = React.useRef(null);
     const contentWrapperRef = React.useRef(null);
     React.useEffect(() => {
         if (props.location !== 'columnMenu')
@@ -73,6 +75,14 @@ const ColumnFilterComponent = (props) => {
         const dropdown = contentWrapperRef.current?.querySelector('[data-name="filter-predicate-dropdown"]');
         dropdown?.focus();
     }, [props.location]);
+    // When rendered inside ag-grid's column menu, Tabbing would otherwise escape
+    // to the surrounding menu/grid. Trap focus so Tab / Shift+Tab cycle within the filter.
+    const handleFocusTrap = React.useCallback((e) => {
+        if (props.location !== 'columnMenu') {
+            return;
+        }
+        (0, utils_2.captureTab)(rootRef.current, e);
+    }, [props.location]);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -133,7 +143,7 @@ const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => (0, utils_1.mapQlPredicateToAdaptablePredicate)(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
                     'twa:pb-2': !props.hideActionButtons,
                     'twa:mb-2': (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(props.location),
                     'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',

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

@@ -32,6 +32,6 @@ const ColumnFilterWindow = (props) => {
                                     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [label, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })] }));
                                 }
                                 return label;
-                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId }) }) }) }), (0, jsx_runtime_1.jsx)(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
+                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }) }) }), (0, jsx_runtime_1.jsx)(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
 };
 exports.ColumnFilterWindow = ColumnFilterWindow;

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

@@ -4,11 +4,10 @@ exports.FloatingFilter = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const ColumnFilterMenu_1 = require("./components/ColumnFilterMenu");
+const NewSelect_1 = require("../../../components/NewSelect");
 const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList");
 const utils_1 = require("./utils");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
@@ -44,75 +43,74 @@ const FloatingFilter = (props) => {
     const colDef = adaptable.api.columnApi.getAGGridColDefForColumnId(props.columnId);
     const showExpandFilterButton = colDef?.suppressHeaderFilterButton !== true;
     const handleClear = () => props.onClear?.();
-    const showEvent = 'click';
-    const hideEvent = 'blur';
-    const [overlayVisible, setOverlayVisible] = React.useState(false);
+    const [selectOpen, setSelectOpen] = React.useState(false);
+    const currentOperator = props.predicate?.args[0]?.operator;
+    const operatorOptions = props.predicateDefs.map((predicateDef) => ({
+        label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": predicateDef.label, children: predicateDef.label })] })),
+        tooltip: predicateDef.label,
+        value: predicateDef.operator,
+    }));
+    const renderTriggerValue = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    const filterDropdownButton = ((0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { variant: "text", "data-name": "floating-filter-button", "aria-label": "Column Filter Operator Dropdown", tooltip: "Click to change filter operator", onBlur: () => {
-            if (isInlineEditable) {
-                setOverlayVisible(false);
-            }
-        }, "data-value": props.predicate?.args[0]?.operator, onClick: () => {
-            if (!isInlineEditable) {
+    const filterDropdownSelect = ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: "Column Filter Operator Dropdown", size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
+            // In non-inline mode the select doesn't pick an operator inline; opening it
+            // instead opens the full column filter popup, so keep the dropdown closed.
+            if (nextOpen && !isInlineEditable) {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+                return;
             }
-            else {
-                setOverlayVisible(true);
-            }
-        }, className: "twa:my-0.5 twa:mx-0.5 twa:text-left twa:p-0.5", style: {
-            ...(!isInlineEditable
-                ? {
-                    minWidth: 0,
-                    flex: 1,
-                }
-                : {}),
-        }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label, children: label }))] }));
+            setSelectOpen(nextOpen);
+        }, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
+            props.onPredicateChange({
+                operator: props.predicate.operator,
+                args: [{ operator: operator, args: [] }],
+            });
+        }, className: (0, utils_2.cn)('twa:self-center twa:mx-0.5 twa:my-0.5 twa:text-left twa:p-0.5 twa:border-none', 'twa:shadow-none', !isInlineEditable && 'twa:min-w-0 twa:flex-1') }));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, visible: overlayVisible, onVisibleChange: setOverlayVisible, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
-                // we render this only for single filter
-                return ((0, jsx_runtime_1.jsx)(ColumnFilterMenu_1.ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
-                        setOverlayVisible(false);
-                        props.onPredicateChange({
-                            operator: props.predicate.operator,
-                            args: [predicate],
-                        });
-                    } }));
-            }, children: filterDropdownButton }));
+        filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
     }
     else {
-        filterDropdown = filterDropdownButton;
+        filterDropdown = filterDropdownSelect;
     }
     const showClearButton = isMultiple ||
         !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef);
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
             // AG Grid's header keyboard navigation intercepts Tab and calls preventDefault(),
-            // which prevents focus from moving between elements inside the floating filter.
-            // We handle Tab manually in the capture phase (before AG Grid's handlers).
-            if (e.key === 'Tab') {
-                const target = e.target;
-                const wrapper = e.currentTarget;
-                if (!e.shiftKey) {
-                    // Tab forward: from filter button → select input
-                    if (target.getAttribute('data-name') === 'floating-filter-button') {
-                        const selectInput = wrapper.querySelector('[data-name="Select Values"] input');
-                        if (selectInput) {
-                            e.preventDefault();
-                            e.nativeEvent.stopImmediatePropagation();
-                            selectInput.focus();
-                            // When the DummyInput gets focus the combobox sets isFocused=true,
-                            // triggering a React re-render. During this re-render, unstable component
-                            // references can cause the DummyInput to be removed from the DOM and
-                            // recreated, losing focus. We restore focus after the re-render.
-                            requestAnimationFrame(() => {
-                                if (document.activeElement === document.body || document.activeElement === null) {
-                                    const newInput = wrapper.querySelector('[data-name="Select Values"] input');
-                                    newInput?.focus();
-                                }
-                            });
-                        }
-                    }
-                }
+            // which prevents focus from moving between the controls inside the floating filter
+            // (operator select, filter input(s), expand/clear buttons). We handle Tab ourselves
+            // in the capture phase (before AG Grid's handlers) and move focus to the next/previous
+            // focusable control. At the boundaries we let the event through so AG Grid can move
+            // to the adjacent header cell.
+            if (e.key !== 'Tab') {
+                return;
+            }
+            const wrapper = e.currentTarget;
+            const focusable = (0, utils_2.getFocusableElements)(wrapper);
+            if (focusable.length === 0) {
+                return;
             }
+            const active = document.activeElement;
+            const currentIndex = active ? focusable.indexOf(active) : -1;
+            if (currentIndex === -1) {
+                return;
+            }
+            const nextIndex = currentIndex + (e.shiftKey ? -1 : 1);
+            if (nextIndex < 0 || nextIndex >= focusable.length) {
+                // boundary reached: let AG Grid navigate between header cells
+                return;
+            }
+            e.preventDefault();
+            e.nativeEvent.stopImmediatePropagation();
+            focusable[nextIndex]?.focus();
+            // Focusing the values combobox's input makes it set isFocused=true, which
+            // re-renders and can momentarily recreate the input, dropping focus to <body>.
+            // Re-resolve the target after the re-render and restore focus to it.
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body || document.activeElement === null) {
+                    const refreshed = (0, utils_2.getFocusableElements)(wrapper);
+                    refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
+                }
+            });
         }, children: [filterDropdown, isInlineEditable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
                     // It works only with a predicate
                     predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {

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

@@ -166,7 +166,7 @@ const ColumnValuesSelect = (props) => {
             : props.onChange, items: 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', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
+        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
                 // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -13,6 +13,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
+    const clearDisabled = StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString());
     return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
@@ -35,5 +36,5 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                             input.focus();
                         }
                     });
-                }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
+                }, disabled: clearDisabled })] }));
 });

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -71,7 +71,7 @@ const AdaptablePopup = (props) => {
                     props.onHide();
                 }
             },
-        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-background twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
                         ? GeneralConstants.READ_ONLY_STYLE
                         : ''), children: [!isStandalone && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', 'twa:rounded-br-standard', !isStandalone && 'twa:*:p-3'), children: moduleViewContent })] })] }) }));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
 const icons_1 = require("../../../../components/icons");
 const AdaptableObjectList_1 = require("../../AdaptableObjectList");
@@ -21,6 +20,7 @@ const useRerender_1 = require("../../../../components/utils/useRerender");
 const Flex_1 = require("../../../../components/Flex");
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const Tabs_1 = require("../../../../components/Tabs");
+const NewDropdownButton_1 = require("../../../../components/NewDropdownButton");
 const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -84,7 +84,7 @@ const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? abObjectType.name,
             };
         });
-        newButton = ((0, jsx_runtime_1.jsxs)(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
+        newButton = ((0, jsx_runtime_1.jsxs)(NewDropdownButton_1.NewDropdownButton, { showDivider: false, tone: "accent", variant: "raised", items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {

package/src/View/Components/Selectors/ColumnSelector.js

@@ -19,6 +19,7 @@ const ColumnSelector = function (props) {
         return {
             label,
             textLabel,
+            tooltip: textLabel,
             value: column.columnId,
         };
     })
@@ -35,7 +36,11 @@ const ColumnSelector = function (props) {
         virtualized: true,
         items: options,
         showClear: false,
+        showItemTooltip: true,
         onValueChange: (colId) => {
+            if (colId === null) {
+                return;
+            }
             props.onChange(colId);
         },
         value: props.value,

package/src/View/Components/ValueSelector/index.js

@@ -106,7 +106,7 @@ function ValueSelector(props) {
             notifyChange();
         },
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), (0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), (0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -10,7 +10,9 @@ const Flex_1 = require("../../../components/Flex");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
+    const availableColumns = React.useMemo(() => api.columnApi
+        .getUIAvailableColumns()
+        .filter((column) => !column.isActionColumn && !api.columnApi.isFdc3Column(column.columnId)), [api]);
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',