@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

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

@@ -2,47 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterComponent = 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 ColumnFilterInputList_1 = require("./components/ColumnFilterInputList");
 const hooks_1 = require("./hooks");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-const Select_1 = require("../../../components/Select");
 const utils_1 = require("./utils");
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
+const NewSelect_1 = require("../../../components/NewSelect");
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: (React.createElement(Flex_1.Box, { className: "twa:flex twa:items-center" },
-                React.createElement(SimpleButton_1.default, { variant: "raised", className: "twa:mr-2", tone: "accent" }, 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", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
             value: predicateDef.operator,
         };
     });
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
-    return (React.createElement(Flex_1.Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown", style: {
+    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)',
-        } },
-        React.createElement(Select_1.Select, { className: predicateDef ? `twa:min-w-[10rem]` : null, onChange: (value) => {
+            '--ab-color-input-background': 'var(--ab-color-primary)',
+        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.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(Flex_1.Box, { className: "twa:mb-3" },
-        React.createElement(Flex_1.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_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                React.createElement(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }))),
-        React.createElement(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), (0, jsx_runtime_1.jsx)(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
 };
 const AndOrInput = (props) => {
     return (
@@ -54,17 +54,24 @@ const AndOrInput = (props) => {
         //     { label: 'OR', value: 'OR' },
         //   ]}
         // />
-        (React.createElement(
+        ((0, jsx_runtime_1.jsxs)(
             Flex_1.Flex,
-            { className: "twa:flex-1" },
-            React.createElement(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
-            React.createElement(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
+            { className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }
         ))
     );
 };
 const ColumnFilterComponent = (props) => {
     const adaptable = (0, AdaptableContext_1.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);
@@ -109,7 +116,7 @@ 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 = ((0, jsx_runtime_1.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: {
@@ -125,52 +132,36 @@ const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => (0, utils_1.mapQlPredicateToAdaptablePredicate)(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
-                '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_1.Flex, { className: "twa:m-2" },
-                React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator })),
-            !props.hideActionButtons && (React.createElement(Flex_1.Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between" },
-                React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-clearall" },
-                    React.createElement(SimpleButton_1.default, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters() }, "Clear All")),
-                manuallyApplyColumnFilter ? (React.createElement(React.Fragment, null,
-                    React.createElement(Flex_1.Box, { className: "twa:flex-1", "data-name": "spacer" }),
-                    React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-reset twa:mr-2" },
-                        React.createElement(SimpleButton_1.default, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
-                                setPredicateNotYetApplied(props.predicate);
-                            } }, "Reset")),
-                    React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-apply" },
-                        React.createElement(SimpleButton_1.default, { "aria-label": 'Apply Filter', tone: "accent", variant: "raised", onClick: applyFilter, disabled: !isAtLeastOneColumnFilterValid(predicateNotYetApplied?.args) && !isAtLeastOneColumnFilterValid(currentPredicate.args) }, "Apply")))) : null))),
-        React.createElement(Flex_1.Flex, { flexDirection: "column", style: props.wrapperProps?.style, className: (0, twMerge_1.twMerge)(`ab-ColumnFilter twa:flex-1 twa:min-h-0`, props.wrapperProps?.className) },
-            React.createElement(Flex_1.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 ((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)({
+                    '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: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:m-2", children: (0, jsx_runtime_1.jsx)(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }) }), !props.hideActionButtons && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-ColumnFilter-action-clearall", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters(), children: "Clear All" }) }), manuallyApplyColumnFilter ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", "data-name": "spacer" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
+                                                setPredicateNotYetApplied(props.predicate);
+                                            }, children: "Reset" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-ColumnFilter-action-apply", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": 'Apply Filter', tone: "accent", variant: "raised", onClick: applyFilter, disabled: !isAtLeastOneColumnFilterValid(predicateNotYetApplied?.args) && !isAtLeastOneColumnFilterValid(currentPredicate.args), children: "Apply" }) })] })) : null] }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: contentWrapperRef, flexDirection: "column", style: props.wrapperProps?.style, className: (0, twMerge_1.twMerge)(`ab-ColumnFilter twa:flex-1 twa:min-h-0`, props.wrapperProps?.className), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ColumnFilter-content twa:overflow-auto", children: [currentPredicate.args.map((predicate, index) => {
+                            return ((0, jsx_runtime_1.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] }) })] }));
 };
 exports.ColumnFilterComponent = ColumnFilterComponent;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterWindow = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const ColumnSelector_1 = require("../Selectors/ColumnSelector");
@@ -13,26 +14,24 @@ const ColumnFilterWindow = (props) => {
     const { api } = (0, AdaptableContext_1.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_1.Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full" },
-        React.createElement(Flex_1.Box, { className: "twa:mb-2" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Column" },
-                    React.createElement(ColumnSelector_1.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_1.Flex, null,
-                                    label,
-                                    React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                                    React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })));
-                            }
-                            return label;
-                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
-        React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.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 ((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' })] }));
 };
 exports.ColumnFilterWindow = ColumnFilterWindow;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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"));
@@ -12,6 +13,8 @@ const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList"
 const utils_1 = require("./utils");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../../components/Flex");
+const utils_2 = require("../../../lib/utils");
+const lucide_react_1 = require("lucide-react");
 const FloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     /**
@@ -38,12 +41,14 @@ 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_1.default, { variant: "text", "data-name": "floating-filter-button", onBlur: () => {
+    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);
             }
@@ -54,34 +59,32 @@ 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(Flex_1.Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } }))),
-        showLabel && (React.createElement(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label }, label))));
+        }, 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 }))] }));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && (React.createElement(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: () => {
+        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 (React.createElement(ColumnFilterMenu_1.ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                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],
                         });
                     } }));
-            } }, filterDropdownButton));
+            }, children: filterDropdownButton }));
     }
     else {
         filterDropdown = filterDropdownButton;
     }
-    return (React.createElement(Flex_1.Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
+    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).
@@ -96,10 +99,10 @@ 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');
@@ -110,23 +113,17 @@ const FloatingFilter = (props) => {
                     }
                 }
             }
-        } },
-        filterDropdown,
-        isInlineEditable && (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0" },
-            React.createElement(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) => {
-                    props.onPredicateChange({
-                        operator: props.predicate.operator,
-                        args: [predicate],
+        }, 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) => {
+                        props.onPredicateChange({
+                            operator: props.predicate.operator,
+                            args: [predicate],
+                        });
+                    } }) })), isInlineEditable && showExpandFilterButton && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_2.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_1.default, { 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 ||
-            !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton_1.default, { "data-name": "clear-filter", className: "twa:p-0", variant: "text", onClick: handleClear, icon: "close" }))));
+                }, "data-name": "expand-filter", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 20, strokeWidth: 1.5 }), variant: "text" })), showClearButton && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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" }))] }));
 };
 exports.FloatingFilter = FloatingFilter;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutColumnFilter = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ColumnFilter_1 = require("./ColumnFilter");
@@ -25,6 +24,6 @@ const LayoutColumnFilter = (props) => {
         };
         props.onColumnFilterChange(newFilter);
     };
-    return (React.createElement(ColumnFilter_1.ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
+    return ((0, jsx_runtime_1.jsx)(ColumnFilter_1.ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
 };
 exports.LayoutColumnFilter = LayoutColumnFilter;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterInput = void 0;
 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 AdaptableInput_1 = tslib_1.__importDefault(require("../../AdaptableInput"));
@@ -51,7 +52,7 @@ const ColumnFilterInput = (props) => {
         }, debounceTime);
     }, [onClearProp, debounceTime]);
     if (type === 'boolean') {
-        return (React.createElement(CheckBox_1.CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
+        return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
                 ? true
                 : value === 'unchecked'
                     ? false
@@ -75,13 +76,14 @@ const ColumnFilterInput = (props) => {
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput_1.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 ((0, jsx_runtime_1.jsx)(AdaptableDateInlineInput_1.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_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
+        // we use the permitted values selector
+        return ((0, jsx_runtime_1.jsx)(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();
                     setLiveValue('');
@@ -93,19 +95,16 @@ const ColumnFilterInput = (props) => {
                 }
             } }));
     }
-    return (React.createElement(AdaptableInput_1.default, { style: filterType === 'floating'
+    return ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterInputList = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const debounce_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/debounce"));
 const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../components/ExpressionEditor/QueryBuilder/utils");
@@ -25,8 +26,7 @@ const ColumnFilterInputList = (props) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
-        return (React.createElement(Panel_1.default, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0" },
-            React.createElement(FloatingFilterValues_1.FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
+        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0", children: (0, jsx_runtime_1.jsx)(FloatingFilterValues_1.FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
                     props.onPredicateChange({ operator: props.predicate.operator, args: [] });
                 }, onChange: (inputs) => {
                     props.onPredicateChange({
@@ -36,28 +36,26 @@ 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_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (matchingInputs ?? []).map((input, index) => {
+            const value = props?.predicate?.args?.[index];
+            return ((0, jsx_runtime_1.jsx)(ColumnFilterInput_1.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));
+        }) }));
 };
 exports.ColumnFilterInputList = ColumnFilterInputList;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterMenu = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
@@ -9,9 +10,7 @@ const Flex_1 = require("../../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const react_1 = require("react");
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
-    return (React.createElement(SimpleButton_1.default, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
-        React.createElement(Flex_1.Box, { className: "twa:mr-2" }, icon),
-        React.createElement(Flex_1.Box, { className: "twa:text-2" }, label)));
+    return ((0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: label })] }));
 };
 const ColumnFilterMenu = (props) => {
     const [activeIndex, setActiveIndex] = React.useState(() => {
@@ -62,13 +61,12 @@ const ColumnFilterMenu = (props) => {
             document.removeEventListener('keydown', onKeyDown);
         };
     }, [confirm]);
-    return (React.createElement(Panel_1.default, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
-        const active = activeIndex === index;
-        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)("twa:mb-1", active && "twa:bg-primarylight"), key: index, onMouseDownCapture: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-            } },
-            React.createElement(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active })));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:min-w-max", children: props.predicateDefs?.map((predicateDef, index) => {
+            const active = activeIndex === index;
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }, children: (0, jsx_runtime_1.jsx)(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active }) }, index));
+        }) }));
 };
 exports.ColumnFilterMenu = ColumnFilterMenu;