@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -5,6 +5,7 @@ import SimpleButton from '../../../components/SimpleButton';
 import { useAdaptable } from '../../AdaptableContext';
 import { Box, Flex } from '../../../components/Flex';
 import { TagList } from '../../../components/Tag/Tag';
+import { objectListActionButtonClassName } from './objectListActionButtonStyles';
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 export const AdaptableObjectCompactListItem = (props) => {
@@ -41,7 +42,7 @@ export const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: objectListActionButtonClassName('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: objectListActionButtonClassName('delete') })) })] }));
 };
 export const AdaptableObjectCompactList = (props) => {
     const adaptable = useAdaptable();
@@ -64,7 +65,7 @@ export const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { 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 && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
                     return (_jsx(AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
                 }) })] }));
 };

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
 import SimpleButton from '../../../components/SimpleButton';
+import { cn } from '../../../lib/utils';
 import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
 import { useAdaptable } from '../../AdaptableContext';
 import { ButtonDelete } from '../Buttons/ButtonDelete';
@@ -11,8 +12,8 @@ import { ButtonShare } from '../Buttons/ButtonShare';
 import { SuspendToggleButton } from '../Buttons/SuspendToggleButton/SuspendToggleButton';
 import { Box, Flex } from '../../../components/Flex';
 import { twMerge } from '../../../twMerge';
-import clsx from 'clsx';
 import { TagList } from '../../../components/Tag/Tag';
+import { objectListActionButtonClassName } from './objectListActionButtonStyles';
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
@@ -35,7 +36,7 @@ export const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = _jsx(ButtonDelete, { ...deleteActionProps });
+    const deleteActionButton = (_jsx(ButtonDelete, { ...deleteActionProps, className: twMerge(objectListActionButtonClassName('delete'), deleteActionProps.className) }));
     return (_jsxs(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: twMerge(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [_jsx(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 })
@@ -47,13 +48,13 @@ export const AdaptableObjectListItemView = (props) => {
                                             data: props.abObject,
                                             module: props.module,
                                         })
-                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values.map(String) })) : null, typeof tag.viewAfter === 'function'
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(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 && (_jsxs(Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: [_jsxs(Flex, { className: "twa:justify-end", children: [props.actions, props.teamSharingActivated && (_jsx(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })), props.onDelete && (_jsx(SimpleButton, { "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 && (_jsx(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))] }), props.suspendedEnabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1 twa:min-h-[20px]" }), _jsx(Flex, { className: "twa:justify-end", children: _jsx(SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }) })] }))] }))] }));
+                }) }), props.showActions && (_jsx(Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: _jsxs(Flex, { className: "twa:justify-end twa:items-center twa:gap-1", children: [props.actions, props.teamSharingActivated && (_jsx(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare, className: objectListActionButtonClassName('share') })), props.showEditButton && (_jsx(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, className: objectListActionButtonClassName('edit'), onClick: () => props.handleOnEdit() })), props.suspendedEnabled && (_jsx(SuspendToggleButton, { iconSize: ICON_SIZE, className: objectListActionButtonClassName('suspend'), onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })), props.onDelete && (_jsx(SimpleButton, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text", className: objectListActionButtonClassName('delete') })), props.deleteAction ? deleteActionButton : null] }) }))] }));
 };
 export const AdaptableObjectListItem = (props) => {
     const adaptable = useAdaptable();
@@ -71,7 +72,7 @@ export const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = clsx(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = 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);
@@ -104,5 +105,5 @@ export const AdaptableObjectListItem = (props) => {
     return (_jsxs(_Fragment, { children: [_jsx(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteConfirmationMsg: deleteConfirmationMsg, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }), isEditWizardVisible && EditWizard && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
 };
 export const AdaptableObjectList = (props) => {
-    return (_jsx("ul", { className: twMerge(clsx(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) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
+    return (_jsx("ul", { className: 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) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };

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,2 @@
+import { cn } from '../../../lib/utils';
+export const objectListActionButtonClassName = (kind, className) => cn('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../../lib/utils';
 import { Flex, Box } from '../../../components/Flex';
-import clsx from 'clsx';
 export class AdaptableObjectRow extends React.Component {
     render() {
         const colItems = this.props.colItems.map((colItem, index) => (_jsx(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 = clsx('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
+        const className = cn('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
         return (_jsx(Flex, { className: className, onClick: this.props.onClick, style: this.props.style, children: colItems }));
     }
 }

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../../../lib/utils';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { Box } from '../../../../components/Flex';
-import clsx from 'clsx';
-import { twMerge } from '../../../../twMerge';
 const Glyphicon = ({ glyph, style }) => {
     return _jsx("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
@@ -54,7 +53,7 @@ export class ButtonBase extends React.Component {
         if (this.props.icon) {
             content = (_jsxs(_Fragment, { children: [this.props.iconPosition === 'end' ? text : null, " ", _jsx(Glyphicon, { glyph: this.props.icon }), ' ', this.props.iconPosition !== 'end' ? text : null] }));
         }
-        let button = (_jsx(Box, { ...this.props, as: "button", style: this.props.style, className: twMerge(clsx(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 = (_jsx(Box, { ...this.props, as: "button", style: this.props.style, className: 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 = _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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
-export const ButtonInfo = (props) => {
-    return (_jsx(SimpleButton, { "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
-};
+export const ButtonInfo = React.forwardRef(function ButtonInfo(props, ref) {
+    return (_jsx(SimpleButton, { 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

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 import { twMerge } from '../../../twMerge';
 export const ButtonNew = (props) => {
-    return (_jsx(SimpleButton, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: twMerge(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
+    return (_jsx(SimpleButton, { "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: twMerge(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
 };

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

@@ -5,9 +5,9 @@ import { ButtonClone } from './ButtonClone';
 import { ButtonDelete } from './ButtonDelete';
 import { ButtonShare } from './ButtonShare';
 import { SuspendToggleButton } from './SuspendToggleButton/SuspendToggleButton';
+import { cn } from '../../../lib/utils';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
 import { Flex } from '../../../components/Flex';
-import clsx from 'clsx';
 const stopPropagation = (e) => {
     e.stopPropagation();
 };
@@ -32,11 +32,11 @@ export class EntityListActionButtons extends React.Component {
     };
     render() {
         const { justifyContent } = this.props;
-        const justifyContentClassName = clsx({
+        const justifyContentClassName = cn({
             'twa:justify-start': justifyContent === 'start',
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        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 }))] }));
+        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-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, 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-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, 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-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, 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-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 == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && (_jsx(SuspendToggleButton, { className: "twa:align-self-center", iconSize: 24, 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.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

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { ToggleButton } from '../../../../components/ToggleButton';
+import SimpleButton from '../../../../components/SimpleButton';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
-import clsx from 'clsx';
-export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
-    const handleOnChange = React.useCallback((checked) => {
-        if (checked) {
+import { cn } from '../../../../lib/utils';
+export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+    const preparedDisabled = (accessLevel && accessLevel === 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 === ACCESS_LEVEL_READ_ONLY) || disabled;
-    const isSuspended = suspendableObject.IsSuspended;
-    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' }));
+    }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
+    return (_jsx(SimpleButton, { className: 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.js

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

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

@@ -7,15 +7,16 @@ import Radio from '../../../components/Radio';
 import { useAdaptable } from '../../AdaptableContext';
 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';
+import { cn, captureTab } from '../../../lib/utils';
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            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] })),
+            label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(SimpleButton, { 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,
         };
     });
@@ -23,20 +24,26 @@ const ColumnFilterPredicateDropdown = (props) => {
     const isAndOr = operator === 'AND' || operator === 'OR';
     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)',
             '--ab-color-input-background': 'var(--ab-color-primary)',
-        }, children: _jsx(SingleSelect, { "data-name": "filter-predicate-dropdown", 
+        }, children: _jsx(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 (_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 })] }));
@@ -60,6 +67,7 @@ const AndOrInput = (props) => {
 export const ColumnFilterComponent = (props) => {
     const adaptable = 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')
@@ -69,6 +77,14 @@ export 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;
+        }
+        captureTab(rootRef.current, e);
+    }, [props.location]);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -115,6 +131,12 @@ export const ColumnFilterComponent = (props) => {
     const isLastPredicateValid = true;
     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);
+            // 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',
@@ -129,7 +151,7 @@ export const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => mapQlPredicateToAdaptablePredicate(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
+    return (_jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [_jsxs(Flex, { flexDirection: "column", className: cn({
                     'twa:pb-2': !props.hideActionButtons,
                     'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
                     'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',

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

@@ -28,5 +28,5 @@ export const ColumnFilterWindow = (props) => {
                                     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' })] }));
+                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }) }) }), _jsx(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
 };

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

@@ -1,15 +1,14 @@
 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';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
-import { ColumnFilterMenu } from './components/ColumnFilterMenu';
+import { SingleSelect } from '../../../components/NewSelect';
 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 { cn, getFocusableElements } from '../../../lib/utils';
 import { Maximize2 } from 'lucide-react';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
@@ -40,75 +39,74 @@ export 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: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), _jsx(Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": predicateDef.label, children: predicateDef.label })] })),
+        tooltip: predicateDef.label,
+        value: predicateDef.operator,
+    }));
+    const renderTriggerValue = () => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    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);
-            }
-        }, "data-value": props.predicate?.args[0]?.operator, onClick: () => {
-            if (!isInlineEditable) {
+    const filterDropdownSelect = (_jsx(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: [_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 }))] }));
+            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: 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 && (_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 (_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],
-                        });
-                    } }));
-            }, children: filterDropdownButton }));
+        filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
     }
     else {
-        filterDropdown = filterDropdownButton;
+        filterDropdown = filterDropdownSelect;
     }
     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).
-            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 = 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 = getFocusableElements(wrapper);
+                    refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
+                }
+            });
         }, 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) => {

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

@@ -5,7 +5,7 @@ import AdaptableInput from '../../AdaptableInput';
 import { AdaptableDateInlineInput } from '../../AdaptableInput/AdaptableDateInlineInput';
 import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector';
 import { useAdaptable } from '../../../AdaptableContext';
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import { useCallback } from 'react';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;
@@ -78,7 +78,6 @@ export const ColumnFilterInput = (props) => {
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        // we use the permitted values selector
         return (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import Panel from '../../../../components/Panel';
@@ -36,7 +36,9 @@ export const ColumnFilterInputList = (props) => {
     }
     return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];
-            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+            const operator = props.predicate?.operator;
+            const usePermittedValuesSelector = input === 'number' || operator === 'Is' || operator === 'IsNot';
+            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
                     const args = [...props.predicate.args];
                     args.splice(index, 1);
                     const newPredicate = {

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

@@ -3,8 +3,8 @@ import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
 import { Box, Flex } from '../../../../components/Flex';
-import clsx from 'clsx';
 import { useEffect, useLayoutEffect } from 'react';
+import { cn } from '../../../../lib/utils';
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
     return (_jsxs(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick, "aria-label": label, children: [_jsx(Box, { className: "twa:mr-2", children: icon }), _jsx(Box, { className: "twa:text-2", children: label })] }));
 };
@@ -59,7 +59,7 @@ export const ColumnFilterMenu = (props) => {
     }, [confirm]);
     return (_jsx(Panel, { className: "twa:min-w-max", children: props.predicateDefs?.map((predicateDef, index) => {
             const active = activeIndex === index;
-            return (_jsx(Flex, { className: clsx('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
+            return (_jsx(Flex, { className: cn('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                 }, children: _jsx(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active }) }, index));

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';