@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ButtonEdit } from './ButtonEdit';
 import { ButtonClone } from './ButtonClone';
@@ -36,11 +37,6 @@ export class EntityListActionButtons extends React.Component {
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        return (React.createElement(Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation },
-            this.props.showEdit && (React.createElement(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
-            this.props.showClone && (React.createElement(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
-            this.props.showDelete && (React.createElement(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
-            this.props.showShare && (React.createElement(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
-            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == ACCESS_LEVEL_READ_ONLY }))));
+        return (_jsxs(Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && (_jsx(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && (_jsx(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && (_jsx(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && (_jsx(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && (_jsx(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == ACCESS_LEVEL_READ_ONLY }))] }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ToggleButton } from '../../../../components/ToggleButton';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
@@ -13,5 +14,5 @@ export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend,
     }, [onUnSuspend, onSuspend]);
     const preparedDisabled = (accessLevel && accessLevel === ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
-    return (React.createElement(ToggleButton, { className: clsx(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended }, isSuspended ? 'inactive' : 'active'));
+    return (_jsx(ToggleButton, { className: clsx(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
 });

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

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOverlay } from '../../../components/InfiniteTable';
 import { getRect } from '../../../components/OverlayTrigger/utils';
@@ -63,5 +64,5 @@ export const CellPopup = React.forwardRef((props, ref) => {
             refreshContent: () => showCellPopupContent(),
         };
     });
-    return React.createElement(React.Fragment, null, portal);
+    return _jsx(_Fragment, { children: portal });
 });

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm';
+export declare const ColumnFilterLocationProvider: React.Provider<ColumnFilterLocation>;
+export declare const useColumnFilterLocation: () => ColumnFilterLocation;
 export interface AdaptableColumnFilterProps {
-    location: 'columnMenu' | 'filterForm';
+    location: ColumnFilterLocation;
     columnId: string;
     wrapperProps?: {
         className?: string;

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

@@ -1,13 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ColumnFilterComponent } from './ColumnFilter';
 import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
+const ColumnFilterLocationContext = React.createContext(null);
+export const ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider;
+export const useColumnFilterLocation = () => {
+    return React.useContext(ColumnFilterLocationContext) ?? 'columnMenu';
+};
 /**
  * This wrapper knows about predicates.
  * It transforms predicates in QlPredicates.
  */
 export const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId, 'FilterForm');
-    return (React.createElement(ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
-            handlePredicateChange(predicate);
-        }, [handlePredicateChange]) }));
+    return (_jsx(ColumnFilterLocationProvider, { value: props.location, children: _jsx(ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+                handlePredicateChange(predicate);
+            }, [handlePredicateChange]) }) }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { FloatingFilter } from './FloatingFilter';
@@ -18,7 +19,7 @@ export const AdaptableFloatingFilter = (props) => {
     if (!column) {
         return null;
     }
-    return (React.createElement(FloatingFilter, { onKeydown: (event) => {
+    return (_jsx(FloatingFilter, { onKeydown: (event) => {
             const key = event.key;
             const predicate = adaptable.api.filterApi.columnFilterApi.internalApi.findPredicateDefByShortcut(key, column);
             if (predicate) {

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

@@ -1,44 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import { ColumnFilterInputList } from './components/ColumnFilterInputList';
 import { usePredicateDef } from './hooks';
 import Radio from '../../../components/Radio';
 import { useAdaptable } from '../../AdaptableContext';
-import { Select } from '../../../components/Select';
 import { mapQlPredicateToAdaptablePredicate } from './utils';
 import { Box, Flex } from '../../../components/Flex';
 import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
+import { SingleSelect } from '../../../components/NewSelect';
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: (React.createElement(Box, { className: "twa:flex twa:items-center" },
-                React.createElement(SimpleButton, { variant: "raised", className: "twa:mr-2", tone: "accent" }, predicateDef.icon),
-                predicateDef.label)),
+            label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(SimpleButton, { as: "span", variant: "raised", className: "twa:mr-2", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
             value: predicateDef.operator,
         };
     });
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
-    return (React.createElement(Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown", style: {
+    return (_jsx(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)',
-        } },
-        React.createElement(Select, { className: predicateDef ? `twa:min-w-[10rem]` : null, onChange: (value) => {
+            '--ab-color-input-background': 'var(--ab-color-primary)',
+        }, children: _jsx(SingleSelect, { "data-name": "filter-predicate-dropdown", 
+            // 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) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
                 });
-            }, options: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator })));
+            }, items: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator }) }));
 };
 const ColumnFilterEditor = (props) => {
-    return (React.createElement(Box, { className: "twa:mb-3" },
-        React.createElement(Flex, { className: "twa:mb-2" },
-            React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }),
-            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                React.createElement(SimpleButton, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }))),
-        React.createElement(ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })));
+    return (_jsxs(Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [_jsxs(Flex, { className: "twa:mb-2", children: [_jsx(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(SimpleButton, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), _jsx(ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
 };
 const AndOrInput = (props) => {
     return (
@@ -50,17 +50,24 @@ const AndOrInput = (props) => {
         //     { label: 'OR', value: 'OR' },
         //   ]}
         // />
-        (React.createElement(
+        (_jsxs(
             Flex,
-            { className: "twa:flex-1" },
-            React.createElement(Radio, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
-            React.createElement(Radio, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
+            { className: "twa:flex-1", children: [_jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), _jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }
         ))
     );
 };
 export const ColumnFilterComponent = (props) => {
     const adaptable = useAdaptable();
     const manuallyApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const contentWrapperRef = React.useRef(null);
+    React.useEffect(() => {
+        if (props.location !== 'columnMenu')
+            return;
+        // when the location is columnMenu, and this is not displayed
+        // inside the ColumnFilterWindow, we want to focus on the first dropdown
+        const dropdown = contentWrapperRef.current?.querySelector('[data-name="filter-predicate-dropdown"]');
+        dropdown?.focus();
+    }, [props.location]);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -105,7 +112,7 @@ export const ColumnFilterComponent = (props) => {
     currentPredicateRef.current = currentPredicate;
     // Not sure how to check this but would be nice...
     const isLastPredicateValid = true;
-    const filterPredicateDropdown = (React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+    const filterPredicateDropdown = (_jsx(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
             const predicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === predicate.operator);
             onNewPredicate(predicateDef);
         }, targetProps: {
@@ -121,51 +128,35 @@ export const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => mapQlPredicateToAdaptablePredicate(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { flexDirection: "column", className: clsx({
-                'twa:bg-primarylight': true,
-                'twa:pb-2': !props.hideActionButtons,
-                'twa:mb-2': props.location === 'filterForm',
-                'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',
-                'twa:rounded-standard': true,
-            }) },
-            React.createElement(Flex, { className: "twa:m-2" },
-                React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator })),
-            !props.hideActionButtons && (React.createElement(Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between" },
-                React.createElement(Box, { className: "ab-ColumnFilter-action-clearall" },
-                    React.createElement(SimpleButton, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters() }, "Clear All")),
-                manuallyApplyColumnFilter ? (React.createElement(React.Fragment, null,
-                    React.createElement(Box, { className: "twa:flex-1", "data-name": "spacer" }),
-                    React.createElement(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2" },
-                        React.createElement(SimpleButton, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
-                                setPredicateNotYetApplied(props.predicate);
-                            } }, "Reset")),
-                    React.createElement(Box, { className: "ab-ColumnFilter-action-apply" },
-                        React.createElement(SimpleButton, { "aria-label": 'Apply Filter', tone: "accent", variant: "raised", onClick: applyFilter, disabled: !isAtLeastOneColumnFilterValid(predicateNotYetApplied?.args) && !isAtLeastOneColumnFilterValid(currentPredicate.args) }, "Apply")))) : null))),
-        React.createElement(Flex, { flexDirection: "column", style: props.wrapperProps?.style, className: twMerge(`ab-ColumnFilter twa:flex-1 twa:min-h-0`, props.wrapperProps?.className) },
-            React.createElement(Box, { className: "ab-ColumnFilter-content twa:overflow-auto" },
-                currentPredicate.args.map((predicate, index) => {
-                    return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
-                            const currentPredicate = currentPredicateRef.current;
-                            const newArgs = [...currentPredicate.args];
-                            newArgs.splice(index, 1);
-                            onPredicateChange({
-                                operator: currentPredicate.operator,
-                                args: newArgs,
-                            });
-                        }, key: index, columnId: props.columnId, disabled: props.disabled, predicate: predicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
-                            // #ref-predicate - for whatever reason
-                            // the `currentPredicate` here would be one from an old render
-                            // if we weren't using a ref. we're not using memo/usecallback here,
-                            // so I don't understand why this is happening
-                            const currentPredicate = currentPredicateRef.current;
-                            const newArgs = [...currentPredicate.args];
-                            newArgs[index] = predicate;
-                            onPredicateChange({
-                                operator: currentPredicate.operator,
-                                args: newArgs,
-                            });
-                        } }));
-                }),
-                isLastPredicateValid && filterPredicateDropdown))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
+                    'twa:bg-primarylight': true,
+                    'twa:pb-2': !props.hideActionButtons,
+                    'twa:mb-2': props.location === 'filterForm',
+                    'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',
+                    'twa:rounded-standard': true,
+                }), children: [_jsx(Flex, { className: "twa:m-2", children: _jsx(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }) }), !props.hideActionButtons && (_jsxs(Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between", children: [_jsx(Box, { className: "ab-ColumnFilter-action-clearall", children: _jsx(SimpleButton, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters(), children: "Clear All" }) }), manuallyApplyColumnFilter ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
+                                                setPredicateNotYetApplied(props.predicate);
+                                            }, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": 'Apply Filter', tone: "accent", variant: "raised", onClick: applyFilter, disabled: !isAtLeastOneColumnFilterValid(predicateNotYetApplied?.args) && !isAtLeastOneColumnFilterValid(currentPredicate.args), children: "Apply" }) })] })) : null] }))] }), _jsx(Flex, { ref: contentWrapperRef, flexDirection: "column", style: props.wrapperProps?.style, className: twMerge(`ab-ColumnFilter twa:flex-1 twa:min-h-0`, props.wrapperProps?.className), children: _jsxs(Box, { className: "ab-ColumnFilter-content twa:overflow-auto", children: [currentPredicate.args.map((predicate, index) => {
+                            return (_jsx(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
+                                    const currentPredicate = currentPredicateRef.current;
+                                    const newArgs = [...currentPredicate.args];
+                                    newArgs.splice(index, 1);
+                                    onPredicateChange({
+                                        operator: currentPredicate.operator,
+                                        args: newArgs,
+                                    });
+                                }, columnId: props.columnId, disabled: props.disabled, predicate: predicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                                    // #ref-predicate - for whatever reason
+                                    // the `currentPredicate` here would be one from an old render
+                                    // if we weren't using a ref. we're not using memo/usecallback here,
+                                    // so I don't understand why this is happening
+                                    const currentPredicate = currentPredicateRef.current;
+                                    const newArgs = [...currentPredicate.args];
+                                    newArgs[index] = predicate;
+                                    onPredicateChange({
+                                        operator: currentPredicate.operator,
+                                        args: newArgs,
+                                    });
+                                } }, index));
+                        }), isLastPredicateValid && filterPredicateDropdown] }) })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { ColumnSelector } from '../Selectors/ColumnSelector';
@@ -9,25 +10,23 @@ export const ColumnFilterWindow = (props) => {
     const { api } = useAdaptable();
     const { value: initialColumnId } = props?.popupProps;
     const [columnId, setColumnId] = React.useState(initialColumnId);
+    const columnSelectorWrapperRef = React.useRef(null);
     React.useEffect(() => {
         setColumnId(initialColumnId);
     }, [props.popupProps.value]);
+    // when the window is opened, focus on the column selector
+    React.useEffect(() => {
+        const focusable = columnSelectorWrapperRef.current?.querySelector('[data-name="column-selector"]');
+        focusable?.focus();
+    }, []);
     // const onChange = props.popupProps.onChange;
-    return (React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full" },
-        React.createElement(Box, { className: "twa:mb-2" },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Column" },
-                    React.createElement(ColumnSelector, { renderOption: (column) => {
-                            const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
-                            const label = column.friendlyName ?? column.columnId;
-                            if (columnFilter &&
-                                api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
-                                return (React.createElement(Flex, null,
-                                    label,
-                                    React.createElement(Box, { className: "twa:flex-1" }),
-                                    React.createElement(AdaptableIconComponent, { icon: { name: 'filter' } })));
-                            }
-                            return label;
-                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
-        React.createElement(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })));
+    return (_jsxs(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [_jsx(Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Column", children: _jsx(ColumnSelector, { renderOption: (column) => {
+                                const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
+                                const label = column.friendlyName ?? column.columnId;
+                                if (columnFilter &&
+                                    api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
+                                    return (_jsxs(Flex, { children: [label, _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableIconComponent, { icon: { name: 'filter' } })] }));
+                                }
+                                return label;
+                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId }) }) }) }), _jsx(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import OverlayTrigger from '../../../components/OverlayTrigger';
 import SimpleButton from '../../../components/SimpleButton';
@@ -8,6 +9,8 @@ import { FloatingFilterInputList } from './components/FloatingFilterInputList';
 import { isPredicateEmpty, qlPredicateToString } from './utils';
 import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 import { Box, Flex } from '../../../components/Flex';
+import { cn } from '../../../lib/utils';
+import { Maximize2 } from 'lucide-react';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
     /**
@@ -34,12 +37,14 @@ export const FloatingFilter = (props) => {
         label = '';
     }
     const showQuickFilterDropdown = adaptable.api.filterApi.columnFilterApi.internalApi.showQuickFilterDropdown(props.columnId);
+    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);
     let filterDropdown = null;
-    const filterDropdownButton = (React.createElement(SimpleButton, { variant: "text", "data-name": "floating-filter-button", onBlur: () => {
+    const filterDropdownButton = (_jsxs(SimpleButton, { variant: "text", "data-name": "floating-filter-button", "aria-label": "Column Filter Operator Dropdown", tooltip: "Click to change filter operator", onBlur: () => {
             if (isInlineEditable) {
                 setOverlayVisible(false);
             }
@@ -50,34 +55,32 @@ export const FloatingFilter = (props) => {
             else {
                 setOverlayVisible(true);
             }
-        }, style: {
-            textAlign: 'left',
-            marginRight: 1, // just so that the focus outline is not cut off
+        }, className: "twa:my-0.5 twa:mx-0.5 twa:text-left twa:p-0.5", style: {
             ...(!isInlineEditable
                 ? {
                     minWidth: 0,
                     flex: 1,
                 }
                 : {}),
-        } },
-        React.createElement(Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent, { icon: { name: 'filter' } }))),
-        showLabel && (React.createElement(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label }, label))));
+        }, children: [_jsx(Box, { children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label, children: label }))] }));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && (React.createElement(OverlayTrigger, { 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: () => {
+        filterDropdown = showQuickFilterDropdown && (_jsx(OverlayTrigger, { 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 (React.createElement(ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                return (_jsx(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],
                         });
                     } }));
-            } }, filterDropdownButton));
+            }, children: filterDropdownButton }));
     }
     else {
         filterDropdown = filterDropdownButton;
     }
-    return (React.createElement(Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
+    const showClearButton = isMultiple ||
+        !isPredicateEmpty(props.predicate.args[0], singleFilterPredicateDef);
+    return (_jsxs(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).
@@ -92,10 +95,10 @@ export const FloatingFilter = (props) => {
                             e.preventDefault();
                             e.nativeEvent.stopImmediatePropagation();
                             selectInput.focus();
-                            // When the DummyInput gets focus, react-select sets isFocused=true,
+                            // When the DummyInput gets focus the combobox sets isFocused=true,
                             // triggering a React re-render. During this re-render, unstable component
-                            // references in selectComponents can cause the DummyInput to be removed
-                            // from DOM and recreated, losing focus. We restore focus after the re-render.
+                            // 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');
@@ -106,22 +109,16 @@ export const FloatingFilter = (props) => {
                     }
                 }
             }
-        } },
-        filterDropdown,
-        isInlineEditable && (React.createElement(Flex, { className: "twa:flex-1 twa:min-w-0" },
-            React.createElement(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) => {
-                    props.onPredicateChange({
-                        operator: props.predicate.operator,
-                        args: [predicate],
+        }, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0", children: _jsx(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) => {
+                        props.onPredicateChange({
+                            operator: props.predicate.operator,
+                            args: [predicate],
+                        });
+                    } }) })), isInlineEditable && showExpandFilterButton && (_jsx(SimpleButton, { className: cn('twa:px-1 twa:my-0.5', !showClearButton && 'twa:mr-0.5'), "aria-label": "Expand filter", tooltip: "Open filter popup", onClick: () => {
+                    adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
+                        onChange: props.onChange,
                     });
-                } }))),
-        isInlineEditable && (React.createElement(SimpleButton, { className: "twa:px-0", onClick: () => {
-                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
-                    onChange: props.onChange,
-                });
-            }, "data-name": "expand-filter", icon: "expand", variant: "text" })),
-        (isMultiple ||
-            !isPredicateEmpty(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton, { "data-name": "clear-filter", className: "twa:p-0", variant: "text", onClick: handleClear, icon: "close" }))));
+                }, "data-name": "expand-filter", icon: _jsx(Maximize2, { size: 20, strokeWidth: 1.5 }), variant: "text" })), showClearButton && (_jsx(SimpleButton, { "data-name": "clear-filter", className: "twa:p-0 twa:my-0.5 twa:mr-0.5", variant: "text", onClick: handleClear, icon: "close", tooltip: "Clear filter" }))] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../AdaptableContext';
 import { ColumnFilterComponent as ColumnFilterComponent } from './ColumnFilter';
@@ -21,5 +21,5 @@ export const LayoutColumnFilter = (props) => {
         };
         props.onColumnFilterChange(newFilter);
     };
-    return (React.createElement(ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
+    return (_jsx(ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import AdaptableInput from '../../AdaptableInput';
@@ -47,7 +48,7 @@ export const ColumnFilterInput = (props) => {
         }, debounceTime);
     }, [onClearProp, debounceTime]);
     if (type === 'boolean') {
-        return (React.createElement(CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
+        return (_jsx(CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
                 ? true
                 : value === 'unchecked'
                     ? false
@@ -71,13 +72,14 @@ export const ColumnFilterInput = (props) => {
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (_jsx(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        return (React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
+        // we use the permitted values selector
+        return (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();
                     setLiveValue('');
@@ -89,19 +91,16 @@ export const ColumnFilterInput = (props) => {
                 }
             } }));
     }
-    return (React.createElement(AdaptableInput, { style: filterType === 'floating'
+    return (_jsx(AdaptableInput, { style: filterType === 'floating'
             ? {
-                width: '100%',
+                width: 'auto',
                 padding: 'var(--ab-base-space)',
-                borderRadius: 0,
                 border: 'none',
             }
-            : {
-                width: '100%',
-            }, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
-        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: "twa:flex-1", onChange: (e) => {
+        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
             const prevValue = `${liveValue}`;
             const value = e.target.value;
             if (value) {

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
@@ -21,8 +22,7 @@ export const ColumnFilterInputList = (props) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
-        return (React.createElement(Panel, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0" },
-            React.createElement(FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
+        return (_jsx(Panel, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0", children: _jsx(FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
                     props.onPredicateChange({ operator: props.predicate.operator, args: [] });
                 }, onChange: (inputs) => {
                     props.onPredicateChange({
@@ -32,27 +32,25 @@ export const ColumnFilterInputList = (props) => {
                 }, value: props.predicate.args, 
                 // are not known ql operators for now
                 // should change when porting, it has knoladge about predicates
-                type: props.predicate.operator === 'In' ? 'In' : 'NotIn' })));
+                type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }) }));
     }
-    return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
-        const value = props?.predicate?.args?.[index];
-        const operator = props.predicate?.operator;
-        const usePermittedValuesSelector = input === 'number' || operator === 'Is' || operator === 'IsNot';
-        return (React.createElement(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
-                const args = [...props.predicate.args];
-                args.splice(index, 1);
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: args,
-                };
-                debouncedPredicateChange(newPredicate);
-            }, onChange: (value) => {
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: [...props.predicate.args],
-                };
-                newPredicate.args[index] = value;
-                debouncedPredicateChange(newPredicate);
-            } }));
-    })));
+    return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
+            const value = props?.predicate?.args?.[index];
+            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+                    const args = [...props.predicate.args];
+                    args.splice(index, 1);
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: args,
+                    };
+                    debouncedPredicateChange(newPredicate);
+                }, onChange: (value) => {
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: [...props.predicate.args],
+                    };
+                    newPredicate.args[index] = value;
+                    debouncedPredicateChange(newPredicate);
+                } }, index));
+        }) }));
 };