@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

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

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonNewPage extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
+        return (_jsx(SimpleButton, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
             , variant: "text", ...this.props }));
     }
 }

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

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonOpen extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text", ...this.props }));
     }
 }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonPause = (props) => {
     const buttonIcon = props.fillColor === 'red'
@@ -11,5 +11,5 @@ export const ButtonPause = (props) => {
         : {
             name: 'pause',
         };
-    return (React.createElement(SimpleButton, { "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...props }));
 };

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 export const ButtonPlay = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(props.tooltip) ? 'Play' : props.tooltip, iconSize: 20, icon: "play", variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(props.tooltip) ? 'Play' : props.tooltip, iconSize: 20, icon: "play", variant: "text", ...props }));
 };

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

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonSave extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text", ...this.props }));
     }
 }

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonSchedule = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text", ...props }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import { AdaptablePopupTeamSharing } from '../Popups/AdaptablePopupTeamSharing';
@@ -8,11 +9,9 @@ export class ButtonShare extends React.Component {
     }
     render() {
         const { onShare, Header, ...buttonProps } = this.props;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton, { "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: buttonProps.iconSize ?? 24, onClick: () => this.setState({ open: true }), ...buttonProps }),
-            this.state.open && (React.createElement(AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
-                    this.setState({ open: false });
-                    onShare(config);
-                } }))));
+        return (_jsxs(_Fragment, { children: [_jsx(SimpleButton, { "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: buttonProps.iconSize ?? 24, onClick: () => this.setState({ open: true }), ...buttonProps }), this.state.open && (_jsx(AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
+                        this.setState({ open: false });
+                        onShare(config);
+                    } }))] }));
     }
 }

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

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonStop extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text", ...this.props }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonUnsuspend extends React.Component {
@@ -12,6 +13,6 @@ export class ButtonUnsuspend extends React.Component {
             : {
                 name: 'resume',
             };
-        return (React.createElement(SimpleButton, { "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...this.props }));
     }
 }

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,11 @@
 import * as React from 'react';
+import { ColumnFilterLocation } from './columnFilterLocation';
+export type { ColumnFilterLocation } from './columnFilterLocation';
+export { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
+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,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ColumnFilterComponent } from './ColumnFilter';
 import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
+import Panel from '../../../components/Panel';
+export { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
+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]) }));
+    const filterContent = (_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]) }) }));
+    if (props.location === 'filtersToolPanel') {
+        return (_jsx(Panel, { className: "twa:mb-2", bodyProps: { className: 'twa:p-0' }, children: filterContent }));
+    }
+    return filterContent;
 };

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.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
+import { ColumnFilterLocation } from './columnFilterLocation';
 interface ColumnFilterComponentProps {
-    location: 'columnMenu' | 'filterForm';
+    location: ColumnFilterLocation;
     hideActionButtons?: boolean;
     columnId: string;
     disabled?: boolean;

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

@@ -1,44 +1,45 @@
+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';
+import { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
 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 +51,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 +113,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 +129,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:pb-2': !props.hideActionButtons,
+                    'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
+                    'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',
+                    'twa:mx-2': props.location === 'filtersToolPanel',
+                    '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" }))] }));
 };