@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -9,6 +9,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const AdaptableContext_1 = require("../../AdaptableContext");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
+const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
@@ -45,7 +46,7 @@ const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete') })) })] }));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -69,7 +70,7 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
                     return ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
                 }) })] }));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const utils_1 = require("../../../lib/utils");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonDelete_1 = require("../Buttons/ButtonDelete");
@@ -15,8 +16,8 @@ const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const Flex_1 = require("../../../components/Flex");
 const twMerge_1 = require("../../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Tag_1 = require("../../../components/Tag/Tag");
+const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
@@ -39,7 +40,7 @@ const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
+    const deleteActionButton = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, twMerge_1.twMerge)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
                     const labelElement = typeof tag.label === 'function'
                         ? React.createElement(tag.label, { key: index, data: props.abObject })
@@ -51,13 +52,13 @@ const AdaptableObjectListItemView = (props) => {
                                             data: props.abObject,
                                             module: props.module,
                                         })
-                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: tag.values.map(String) })) : null, typeof tag.viewAfter === 'function'
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: tag.values, variant: tag.tagVariant })) : null, typeof tag.viewAfter === 'function'
                                         ? React.createElement(tag.viewAfter, {
                                             data: props.abObject,
                                             module: props.module,
                                         })
                                         : tag.viewAfter] })] }, `${index}-${tag.name}`));
-                }) }), props.showActions && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:justify-end", children: [props.actions, props.teamSharingActivated && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })), props.onDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })), props.deleteAction ? deleteActionButton : null, props.showEditButton && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))] }), props.suspendedEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end", children: (0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }) })] }))] }))] }));
+                }) }), props.showActions && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:justify-end twa:items-center twa:gap-1", children: [props.actions, props.teamSharingActivated && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('share') })), props.showEditButton && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('edit'), onClick: () => props.handleOnEdit() })), props.suspendedEnabled && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { iconSize: ICON_SIZE, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })), props.onDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete') })), props.deleteAction ? deleteActionButton : null] }) }))] }));
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
@@ -76,7 +77,7 @@ const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = (0, clsx_1.default)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = (0, utils_1.cn)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
         `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
@@ -110,6 +111,6 @@ const AdaptableObjectListItem = (props) => {
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
-    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)), children: props?.items?.map((item, index) => ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, utils_1.cn)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className), children: props?.items?.map((item, index) => ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.d.ts

@@ -0,0 +1,2 @@
+export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share' | 'clone';
+export declare const objectListActionButtonClassName: (kind: ObjectListActionKind, className?: string) => string;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectListActionButtonClassName = void 0;
+const utils_1 = require("../../../lib/utils");
+const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);
+exports.objectListActionButtonClassName = objectListActionButtonClassName;

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

@@ -4,12 +4,12 @@ exports.AdaptableObjectRow = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AdaptableObjectRow extends React.Component {
     render() {
         const colItems = this.props.colItems.map((colItem, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", title: typeof colItem.Content === 'string' ? colItem.Content : undefined, children: colItem.Content }, index)));
-        const className = (0, clsx_1.default)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
+        const className = (0, utils_1.cn)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style, children: colItems }));
     }
 }

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -4,10 +4,9 @@ exports.ButtonBase = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../lib/utils");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twMerge_1 = require("../../../../twMerge");
 const Glyphicon = ({ glyph, style }) => {
     return (0, jsx_runtime_1.jsx)("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
@@ -58,7 +57,7 @@ class ButtonBase extends React.Component {
         if (this.props.icon) {
             content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.iconPosition === 'end' ? text : null, " ", (0, jsx_runtime_1.jsx)(Glyphicon, { glyph: this.props.icon }), ' ', this.props.iconPosition !== 'end' ? text : null] }));
         }
-        let button = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
+        let button = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, utils_1.cn)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`, this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
         let buttonwithtooltip = (0, jsx_runtime_1.jsx)("div", { children: button });
         return hideToolTip ? button : buttonwithtooltip;
     }

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

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

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

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

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

@@ -8,6 +8,8 @@ type ButtonNewProps = {
     accessLevel?: SimpleButtonProps['accessLevel'];
     children?: React.ReactNode;
     onClick?: () => void;
+    disabled?: boolean;
+    dataName?: string;
 };
 export declare const ButtonNew: (props: ButtonNewProps) => React.JSX.Element;
 export {};

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

@@ -6,6 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const twMerge_1 = require("../../../twMerge");
 const ButtonNew = (props) => {
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: (0, twMerge_1.twMerge)(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": props.dataName ?? 'new', tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, disabled: props.disabled, onClick: props.onClick, className: (0, twMerge_1.twMerge)(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
 };
 exports.ButtonNew = ButtonNew;

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

@@ -9,9 +9,9 @@ const ButtonClone_1 = require("./ButtonClone");
 const ButtonDelete_1 = require("./ButtonDelete");
 const ButtonShare_1 = require("./ButtonShare");
 const SuspendToggleButton_1 = require("./SuspendToggleButton/SuspendToggleButton");
+const utils_1 = require("../../../lib/utils");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const stopPropagation = (e) => {
     e.stopPropagation();
 };
@@ -36,12 +36,12 @@ class EntityListActionButtons extends React.Component {
     };
     render() {
         const { justifyContent } = this.props;
-        const justifyContentClassName = (0, clsx_1.default)({
+        const justifyContentClassName = (0, utils_1.cn)({
             'twa:justify-start': justifyContent === 'start',
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.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 == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.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 == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.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 == GeneralConstants_1.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 && ((0, jsx_runtime_1.jsx)(ButtonShare_1.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 == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.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 == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == GeneralConstants_1.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 && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: "twa:align-self-center", iconSize: 24, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
     }
 }
 exports.EntityListActionButtons = EntityListActionButtons;

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

@@ -9,6 +9,7 @@ interface EntityListSuspendButtonProps {
     disabled?: boolean;
     accessLevel?: AccessLevel;
     className?: string;
+    iconSize?: number;
 }
 export declare const SuspendToggleButton: React.FunctionComponent<EntityListSuspendButtonProps>;
 export {};

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

@@ -4,19 +4,19 @@ exports.SuspendToggleButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const ToggleButton_1 = require("../../../../components/ToggleButton");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
-    const handleOnChange = React.useCallback((checked) => {
-        if (checked) {
+const utils_1 = require("../../../../lib/utils");
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
+    const isSuspended = suspendableObject.IsSuspended;
+    const handleClick = React.useCallback(() => {
+        if (isSuspended) {
             onUnSuspend(suspendableObject);
         }
         else {
             onSuspend(suspendableObject);
         }
-    }, [onUnSuspend, onSuspend]);
-    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
-    const isSuspended = suspendableObject.IsSuspended;
-    return ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: (0, clsx_1.default)(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
+    }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.cn)('ab-SuspendButton', isSuspended && 'twa:opacity-60', className), "data-name": isSuspended ? 'resume' : 'suspend', disabled: preparedDisabled, style: style, variant: "text", tone: "neutral", iconSize: iconSize, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', accessLevel: accessLevel, onClick: handleClick }));
 });

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export type ColumnFilterLocation = 'columnMenu' | 'filterForm';
+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 {

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableColumnFilter = exports.useColumnFilterLocation = exports.ColumnFilterLocationProvider = void 0;
+exports.AdaptableColumnFilter = exports.useColumnFilterLocation = exports.ColumnFilterLocationProvider = exports.isEmbeddedColumnFilterLocation = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ColumnFilter_1 = require("./ColumnFilter");
 const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+var columnFilterLocation_1 = require("./columnFilterLocation");
+Object.defineProperty(exports, "isEmbeddedColumnFilterLocation", { enumerable: true, get: function () { return columnFilterLocation_1.isEmbeddedColumnFilterLocation; } });
 const ColumnFilterLocationContext = React.createContext(null);
 exports.ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider;
 const useColumnFilterLocation = () => {
@@ -18,8 +21,12 @@ exports.useColumnFilterLocation = useColumnFilterLocation;
  */
 const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.columnId, 'FilterForm');
-    return ((0, jsx_runtime_1.jsx)(exports.ColumnFilterLocationProvider, { value: props.location, children: (0, jsx_runtime_1.jsx)(ColumnFilter_1.ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+    const filterContent = ((0, jsx_runtime_1.jsx)(exports.ColumnFilterLocationProvider, { value: props.location, children: (0, jsx_runtime_1.jsx)(ColumnFilter_1.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 ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:p-1", bodyProps: { className: 'twa:p-0 twa:border-none' }, children: filterContent }));
+    }
+    return filterContent;
 };
 exports.AdaptableColumnFilter = AdaptableColumnFilter;

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

@@ -11,14 +11,16 @@ const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 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 columnFilterLocation_1 = require("./columnFilterLocation");
+const utils_2 = require("../../../lib/utils");
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { as: "span", variant: "raised", className: "twa:mr-2", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { as: "span", variant: "raised", className: "twa:mr-2 twa:p-0.5", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            tooltip: predicateDef.label,
             value: predicateDef.operator,
         };
     });
@@ -26,20 +28,26 @@ const ColumnFilterPredicateDropdown = (props) => {
     const isAndOr = operator === 'AND' || operator === 'OR';
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown twa:p-0.5", style: {
             //@ts-ignore ignore
-            '--ab-cmp-input__background': 'var(--ab-color-primary)',
             '--ab-color-input-background': 'var(--ab-color-primary)',
-        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "filter-predicate-dropdown", 
+        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "filter-predicate-dropdown", extraWidthChars: 8, 
             // The trigger lives inside ag-grid's column menu, which closes itself
             // on mousedowns outside its DOM subtree. Since the popup is portaled
             // to `document.body`, mousedowns inside it would otherwise bubble to
             // `document` and unmount the trigger mid-interaction (causing the
             // popup to re-align to (0,0) before disappearing).
-            stopMouseDownPropagation: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
+            stopMouseDownPropagation: true, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
                 });
-            }, items: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator }) }));
+            }, items: options, 
+            // For the "Add Condition" picker the current predicate is the top-level
+            // AND/OR predicate, which is not a selectable item. Use `null` (a proper
+            // controlled empty value) plus a placeholder rather than a fake string
+            // value: passing a non-item value makes base-ui's Select reconcile and
+            // fire a spurious `onValueChange` when the items change (e.g. switching
+            // the filter to another column), which previously crashed.
+            placeholder: "Add Condition", value: isAndOr ? null : props.predicate?.operator }) }));
 };
 const ColumnFilterEditor = (props) => {
     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 })] }));
@@ -63,6 +71,7 @@ const AndOrInput = (props) => {
 const ColumnFilterComponent = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const manuallyApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const rootRef = React.useRef(null);
     const contentWrapperRef = React.useRef(null);
     React.useEffect(() => {
         if (props.location !== 'columnMenu')
@@ -72,6 +81,14 @@ const ColumnFilterComponent = (props) => {
         const dropdown = contentWrapperRef.current?.querySelector('[data-name="filter-predicate-dropdown"]');
         dropdown?.focus();
     }, [props.location]);
+    // When rendered inside ag-grid's column menu, Tabbing would otherwise escape
+    // to the surrounding menu/grid. Trap focus so Tab / Shift+Tab cycle within the filter.
+    const handleFocusTrap = React.useCallback((e) => {
+        if (props.location !== 'columnMenu') {
+            return;
+        }
+        (0, utils_2.captureTab)(rootRef.current, e);
+    }, [props.location]);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -118,6 +135,12 @@ const ColumnFilterComponent = (props) => {
     const isLastPredicateValid = true;
     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);
+            // Guard against the select emitting a value that is not a known
+            // predicate for the current column (e.g. a stale/reconciled value while
+            // switching columns).
+            if (!predicateDef) {
+                return;
+            }
             onNewPredicate(predicateDef);
         }, targetProps: {
             tone: 'neutral',
@@ -132,11 +155,11 @@ const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => (0, utils_1.mapQlPredicateToAdaptablePredicate)(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
-                    'twa:bg-primarylight': true,
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, utils_2.cn)({
                     'twa:pb-2': !props.hideActionButtons,
-                    'twa:mb-2': props.location === 'filterForm',
+                    'twa:mb-2': (0, columnFilterLocation_1.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: [(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);

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

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

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

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

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

@@ -0,0 +1,2 @@
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm' | 'filtersToolPanel';
+export declare const isEmbeddedColumnFilterLocation: (location: ColumnFilterLocation) => boolean;