@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

package/src/View/Filter/ColumnFilter/AdaptableColumnFilterNew.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ColumnFilterLocation } from './columnFilterLocation';
+export interface AdaptableColumnFilterNewProps {
+    location: ColumnFilterLocation;
+    columnId: string;
+    wrapperProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+}
+/**
+ * Expression-based replacement for `AdaptableColumnFilter` (the full
+ * filter popup wrapper). Bridges the `QlGroup` model from
+ * `useColumnFilterQlPredicate` to `ColumnFilterComponentNew`.
+ */
+export declare const AdaptableColumnFilterNew: React.FunctionComponent<AdaptableColumnFilterNewProps>;

package/src/View/Filter/ColumnFilter/AdaptableColumnFilterNew.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Panel from '../../../components/Panel';
+import { ColumnFilterComponentNew } from './ColumnFilterNew';
+import { useColumnFilterQlPredicate } from './useColumnFilterQlPredicate';
+import { ColumnFilterLocationProvider, } from './columnFilterLocation';
+export const AdaptableColumnFilterNew = (props) => {
+    const { qlGroup, columnFilter, column, handleGroupChange, handleClear } = useColumnFilterQlPredicate(props.columnId, 'FilterForm');
+    if (!column) {
+        return null;
+    }
+    const filterContent = (_jsx(ColumnFilterLocationProvider, { value: props.location, children: _jsx(ColumnFilterComponentNew, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, qlGroup: qlGroup, disabled: columnFilter?.IsSuspended, onGroupChange: handleGroupChange, onClear: handleClear }) }));
+    if (props.location === 'filtersToolPanel') {
+        return (_jsx(Panel, { className: "twa:p-1", bodyProps: { className: 'twa:p-0 twa:border-none' }, children: filterContent }));
+    }
+    return filterContent;
+};

package/src/View/Filter/ColumnFilter/AdaptableFloatingFilterNew.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
+export interface AdaptableFloatingFilterNewProps extends ColumnFilterProps {
+}
+/**
+ * Expression-based replacement for `AdaptableFloatingFilter`. The
+ * in-memory model is the AQL `QlPredicate` (a `QlGroup` of
+ * `QlPrimitive`s); persistence goes through `ColumnFilter.Expression`.
+ */
+export declare const AdaptableFloatingFilterNew: React.FunctionComponent<AdaptableFloatingFilterNewProps>;

package/src/View/Filter/ColumnFilter/AdaptableFloatingFilterNew.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useAdaptable } from '../../AdaptableContext';
+import { FloatingFilterNew } from './FloatingFilterNew';
+import { useColumnFilterQlPredicate } from './useColumnFilterQlPredicate';
+import { createColumnFilterPrimitive, findOperatorByShortcut } from '../../../aql/columnFilterQl';
+export const AdaptableFloatingFilterNew = (props) => {
+    const adaptable = useAdaptable();
+    const { qlGroup, operatorDefs, columnFilter, column, handleGroupChange, handleClear } = useColumnFilterQlPredicate(props.Column.columnId, 'FilterBar');
+    const onClear = React.useCallback(() => {
+        handleClear();
+    }, [handleClear]);
+    if (!column) {
+        return null;
+    }
+    return (_jsx(FloatingFilterNew, { onKeydown: (event) => {
+            const key = event.key;
+            const operator = findOperatorByShortcut(adaptable.api, column, key);
+            if (operator) {
+                event.stopPropagation();
+                event.preventDefault();
+                handleGroupChange({
+                    ...qlGroup,
+                    children: [createColumnFilterPrimitive(operator, column.columnId)],
+                });
+            }
+        }, onClear: onClear, columnId: props.Column.columnId, qlGroup: qlGroup, operatorDefs: operatorDefs, disabled: columnFilter?.IsSuspended, onGroupChange: handleGroupChange }));
+};

package/src/View/Filter/ColumnFilter/ColumnFilterNew.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { QlGroup } from "../../../../vendor/aql/index.js";
+import { ColumnFilterLocation } from './columnFilterLocation';
+interface ColumnFilterComponentNewProps {
+    location: ColumnFilterLocation;
+    hideActionButtons?: boolean;
+    columnId: string;
+    disabled?: boolean;
+    qlGroup: QlGroup;
+    onGroupChange: (group: QlGroup) => void;
+    onClear: () => void;
+    wrapperProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+}
+/**
+ * Expression-based column filter editor built on top of **QueryBuilder v2**
+ * with a *locked subject*: the LHS of every condition is fixed (readonly) to
+ * the filtered column, so the user only picks operators / values / AND-OR
+ * grouping. The on-the-wire model stays the `QlGroup` the persistence hook
+ * (`useColumnFilterQlPredicate`) understands; we consume the builder's
+ * lossless `QlPredicate` model directly (via `onPredicateChange`) rather
+ * than round-tripping through a printed string, so a half-built condition
+ * can't invalidate the whole filter.
+ */
+export declare const ColumnFilterComponentNew: React.FunctionComponent<ColumnFilterComponentNewProps>;
+export {};

package/src/View/Filter/ColumnFilter/ColumnFilterNew.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import SimpleButton from '../../../components/SimpleButton';
+import { useAdaptable } from '../../AdaptableContext';
+import { Box, Flex } from '../../../components/Flex';
+import { twMerge } from '../../../twMerge';
+import { captureTab, cn } from '../../../lib/utils';
+import * as ModuleConstants from '../../../Utilities/Constants/ModuleConstants';
+import { QueryBuilder } from '../../../components/aql/QueryBuilder';
+import { getQueryBuilderColumnOptions, getQueryBuilderFieldOptions, } from '../../../components/aql/QueryBuilder/qlGroupUtils';
+import { getColumnFilterQueryBuilderLayout, isEmbeddedColumnFilterLocation, } from './columnFilterLocation';
+import { ColumnFilterOverlayHost } from './ColumnFilterOverlayHost';
+import { asColumnFilterGroup, expressionForColumnFilterChangedEvent, foldInFilterFunctionsForEditing, getColumnFilterOperatorDefs, isQlPredicateComplete, unfoldInFilterFunctionsFromEditing, } from '../../../aql/columnFilterQl';
+const noop = () => { };
+export const ColumnFilterComponentNew = (props) => {
+    const { api } = useAdaptable();
+    const manuallyApplyColumnFilter = !props.hideActionButtons &&
+        api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const rootRef = React.useRef(null);
+    const handleFocusTrap = React.useCallback((e) => {
+        if (props.location !== 'columnMenu') {
+            return;
+        }
+        captureTab(rootRef.current, e);
+    }, [props.location]);
+    const getColumns = React.useCallback((type) => getQueryBuilderColumnOptions(api, type), [api]);
+    const getFields = React.useCallback((type) => getQueryBuilderFieldOptions(api, type), [api]);
+    const [resetNonce, setResetNonce] = React.useState(0);
+    const operatorDefs = React.useMemo(() => {
+        const column = api.columnApi.getColumnWithColumnId(props.columnId);
+        return column ? getColumnFilterOperatorDefs(api, column) : [];
+    }, [api, props.columnId]);
+    const seededGroup = React.useMemo(() => foldInFilterFunctionsForEditing(props.columnId, props.qlGroup, operatorDefs), [props.columnId, resetNonce, operatorDefs]);
+    const pendingGroupRef = React.useRef(null);
+    const handlePredicateChange = (predicate) => {
+        const group = unfoldInFilterFunctionsFromEditing(props.columnId, asColumnFilterGroup(predicate), operatorDefs);
+        if (manuallyApplyColumnFilter) {
+            pendingGroupRef.current = group;
+            api.eventApi.internalApi.fireColumnFilterChangedEvent({
+                columnId: props.columnId,
+                isApplied: false,
+                isComplete: isQlPredicateComplete(api, group),
+                expression: expressionForColumnFilterChangedEvent(api, group),
+            });
+        }
+        else {
+            props.onGroupChange(group);
+        }
+    };
+    const applyFilter = () => {
+        if (pendingGroupRef.current) {
+            props.onGroupChange(pendingGroupRef.current);
+            pendingGroupRef.current = null;
+        }
+    };
+    const resetFilter = () => {
+        pendingGroupRef.current = null;
+        setResetNonce((n) => n + 1);
+    };
+    const clearAllFilters = () => {
+        pendingGroupRef.current = null;
+        props.onClear();
+        setResetNonce((n) => n + 1);
+    };
+    const showClear = props.location !== 'filterForm';
+    const showActions = !props.hideActionButtons && (showClear || manuallyApplyColumnFilter);
+    return (_jsx(ColumnFilterOverlayHost, { location: props.location, children: _jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [showActions && (_jsxs(Flex, { className: cn('ab-ColumnFilter-actions twa:m-2', {
+                        'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
+                    }), justifyContent: "space-between", children: [showClear && (_jsx(Box, { className: "ab-ColumnFilter-action-clearall", children: _jsx(SimpleButton, { "aria-label": "Clear All Filters", onClick: clearAllFilters, children: "Clear All" }) })), manuallyApplyColumnFilter && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": "Reset All", tone: "neutral", variant: "raised", onClick: resetFilter, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": "Apply Filter", tone: "accent", variant: "raised", onClick: applyFilter, children: "Apply" }) })] }))] })), _jsx(Box, { style: props.wrapperProps?.style, className: twMerge('ab-ColumnFilter twa:flex-1 twa:min-h-0 twa:overflow-auto twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col', props.location === 'filtersToolPanel' && 'ab-ColumnFilter--tool-panel', props.disabled ? 'twa:opacity-60 twa:pointer-events-none' : '', props.wrapperProps?.className), children: _jsx(QueryBuilder, { module: ModuleConstants.ColumnFilterModuleId, query: "", initialPredicate: seededGroup, onChange: noop, onPredicateChange: handlePredicateChange, getColumns: getColumns, getFields: getFields, subject: { mode: 'locked', columnId: props.columnId }, hideExpressionPreview: true, hideInlineAdd: true, hideAddGroup: true, hideLockedSubject: true, hideDragHandles: true, layout: getColumnFilterQueryBuilderLayout(props.location) }, `${props.columnId}:${resetNonce}`) })] }) }));
+};

package/src/View/Filter/ColumnFilter/ColumnFilterOverlayHost.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ColumnFilterLocation } from './columnFilterLocation';
+/**
+ * AG Grid's column-menu filter popup listens for outside `mousedown` events.
+ * Portaled Select / Menu / Combobox popups live outside the filter DOM tree,
+ * so their clicks bubble to the grid and close the filter — often with a
+ * visible jump to the viewport origin as the anchor unmounts.
+ *
+ * Stop that bubbling on portaled popup content, but keep portaling to
+ * `document.body` (do not mount inside the AG Grid popup — that container
+ * clips and mis-positions floating menus).
+ */
+export declare const ColumnFilterOverlayHost: React.FunctionComponent<{
+    location: ColumnFilterLocation;
+    children: React.ReactNode;
+}>;

package/src/View/Filter/ColumnFilter/ColumnFilterOverlayHost.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { OverlayHostProvider } from "../../../../vendor/components";
+export const ColumnFilterOverlayHost = ({ location, children }) => {
+    if (location !== 'columnMenu') {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(OverlayHostProvider, { value: { stopMouseDownPropagation: true }, children: children }));
+};

package/src/View/Filter/ColumnFilter/ColumnFilterSettingsList.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AdaptableObjectView, IModule } from '../../../Strategy/Interface/IModule';
+/**
+ * Settings Panel list for Column Filters: the same inline-editable cards as the
+ * Layout Wizard, plus the suspend / share / delete actions of the standard list.
+ */
+export declare const ColumnFilterSettingsList: React.FunctionComponent<{
+    items: AdaptableObjectView[];
+    module: IModule;
+}>;

package/src/View/Filter/ColumnFilter/ColumnFilterSettingsList.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDispatch, useSelector } from 'react-redux';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
+import { useAdaptable } from '../../AdaptableContext';
+import { ButtonDelete } from '../../Components/Buttons/ButtonDelete';
+import { ButtonShare } from '../../Components/Buttons/ButtonShare';
+import { SuspendToggleButton } from '../../Components/Buttons/SuspendToggleButton/SuspendToggleButton';
+import { Flex } from '../../../components/Flex';
+import { LayoutColumnFilterCard } from './LayoutColumnFilterCard';
+export const ColumnFilterSettingsList = (props) => {
+    const { api } = useAdaptable();
+    const dispatch = useDispatch();
+    const disableDeleteConfirmationState = useSelector((state) => InternalRedux.DisableDeleteConfirmationSelector(state.Internal));
+    const disableDeleteConfirmation = disableDeleteConfirmationState ||
+        api.optionsApi.getAdaptableOptions()?.userInterfaceOptions?.disableDeleteConfirmation;
+    const moduleName = props.module.moduleInfo.ModuleName;
+    const entityType = props.module.moduleInfo.FriendlyName;
+    const moduleAccessLevel = api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
+    const teamSharingActivated = props.module.isModuleObjectsShareable() &&
+        api.teamSharingApi.isTeamSharingAvailable() &&
+        api.teamSharingApi.hasTeamSharingFullRights();
+    const handleChange = (original, edited) => {
+        const isConfigured = StringExtensions.IsNotNullOrEmpty(edited.Expression) ||
+            StringExtensions.IsNotNullOrEmpty(edited.PreferredFilter);
+        if (!isConfigured) {
+            api.filterApi.columnFilterApi.clearColumnFilterForColumn(original.ColumnId);
+            return;
+        }
+        api.filterApi.columnFilterApi.setColumnFilters([
+            { ...edited, IsSuspended: original.IsSuspended },
+        ]);
+    };
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: props.items.map((item) => {
+            const columnFilter = item.abObject;
+            const accessLevel = AdaptableHelper.getAccessLevelForObject(columnFilter, moduleAccessLevel);
+            const deleteAction = LayoutRedux.LayoutColumnFilterClear(columnFilter.ColumnId);
+            return (_jsx(LayoutColumnFilterCard, { columnFilter: { ...columnFilter, IsSuspended: false }, onChange: (edited) => handleChange(columnFilter, edited), accessLevel: accessLevel, className: columnFilter.IsSuspended ? 'twa:opacity-60' : undefined, extraActions: _jsxs(_Fragment, { children: [_jsx(SuspendToggleButton, { suspendableObject: columnFilter, accessLevel: accessLevel, onSuspend: () => dispatch(LayoutRedux.LayoutColumnFilterSuspend(columnFilter)), onUnSuspend: () => dispatch(LayoutRedux.LayoutColumnFilterUnSuspend(columnFilter)) }), teamSharingActivated && (_jsx(ButtonShare, { Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => api.teamSharingApi.shareAdaptableEntity(columnFilter, moduleName, config) })), _jsx(ButtonDelete, { tooltip: "Delete", accessLevel: accessLevel, ConfirmationTitle: `Delete ${entityType}`, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmAction: disableDeleteConfirmation ? null : deleteAction, onClickAction: disableDeleteConfirmation ? () => dispatch(deleteAction) : undefined })] }) }, columnFilter.ColumnId));
+        }) }));
+};

package/src/View/Filter/ColumnFilter/ColumnFilterWindow.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WindowPopupChildProps } from '../../Components/Popups/WindowPopups/WindowPopups';
+export declare const ColumnFilterWindow: React.FunctionComponent<WindowPopupChildProps>;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
+import { AdaptableColumnFilterNew } from './AdaptableColumnFilterNew';
+import { useColumnFilterQlPredicate } from './useColumnFilterQlPredicate';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
+import { Box, Flex } from '../../../components/Flex';
+import SimpleButton from '../../../components/SimpleButton';
+export const ColumnFilterWindow = (props) => {
+    const { api } = useAdaptable();
+    const { value: initialColumnId } = props?.popupProps;
+    const [columnId, setColumnId] = React.useState(initialColumnId);
+    const columnSelectorWrapperRef = React.useRef(null);
+    React.useEffect(() => {
+        setColumnId(initialColumnId);
+    }, [props.popupProps.value]);
+    const { handleClear } = useColumnFilterQlPredicate(columnId, 'FilterForm');
+    const [clearNonce, setClearNonce] = React.useState(0);
+    const clearFilter = () => {
+        handleClear();
+        setClearNonce((n) => n + 1);
+    };
+    React.useEffect(() => {
+        const focusable = columnSelectorWrapperRef.current?.querySelector('[data-name="column-selector"]');
+        focusable?.focus();
+    }, []);
+    return (_jsxs(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [_jsx(Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Column", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0", children: _jsx(ColumnSelector, { renderOption: (column) => {
+                                            const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
+                                            const label = column.friendlyName ?? column.columnId;
+                                            if (columnFilter &&
+                                                api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
+                                                return (_jsxs(Flex, { children: [label, _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableIconComponent, { icon: { name: 'filter' } })] }));
+                                            }
+                                            return label;
+                                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }), _jsx(SimpleButton, { "aria-label": "Clear Filter", onClick: clearFilter, icon: "delete", variant: "raised", children: "Clear" })] }) }) }) }), _jsx(AdaptableColumnFilterNew, { columnId: columnId, location: 'filterForm' }, `${columnId}:${clearNonce}`)] }));
+};

package/src/View/Filter/ColumnFilter/FloatingFilterNew.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { QlGroup } from "../../../../vendor/aql/index.js";
+import { ColumnFilterOperatorDef } from '../../../aql/columnFilterQl';
+export interface FloatingFilterNewProps {
+    columnId: string;
+    disabled?: boolean;
+    qlGroup: QlGroup;
+    operatorDefs: ColumnFilterOperatorDef[];
+    onGroupChange: (group: QlGroup) => void;
+    onKeydown?: (event: React.KeyboardEventHandler<HTMLDivElement>) => void;
+    onClear?: () => void;
+    onChange?: () => void;
+}
+/**
+ * Expression-based replacement for `FloatingFilter`: works on a
+ * `QlGroup` root whose children are per-row `QlPrimitive`s (AQL
+ * operator names).
+ */
+export declare const FloatingFilterNew: React.FunctionComponent<FloatingFilterNewProps>;

package/src/View/Filter/ColumnFilter/FloatingFilterNew.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Maximize2 } from 'lucide-react';
+import SimpleButton from '../../../components/SimpleButton';
+import { SingleSelect } from '../../../components/Select';
+import { isAdaptableIcon } from '../../../components/Icon';
+import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
+import { Box, Flex } from '../../../components/Flex';
+import { cn, getFocusableElements } from '../../../lib/utils';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
+import { buildInFilterGroup, createColumnFilterPrimitive, findColumnFilterOperatorDef, getColumnFilterOperatorValue, getEditableColumnFilterPrimitive, getInFilterContext, isColumnFilterPrimitiveEmpty, primitiveHasNonEditableRhs, qlGroupToLabel, } from '../../../aql/columnFilterQl';
+import { FloatingFilterInputListNew } from './components/FloatingFilterInputListNew';
+const renderOperatorIcon = (def) => {
+    const icon = def?.icon;
+    if (!icon) {
+        return null;
+    }
+    if (isAdaptableIcon(icon)) {
+        return _jsx(AdaptableIconComponent, { icon: icon });
+    }
+    if ('text' in icon) {
+        return _jsx("div", { children: icon.text });
+    }
+    return null;
+};
+export const FloatingFilterNew = (props) => {
+    const adaptable = useAdaptable();
+    const inFilterCtx = React.useMemo(() => getInFilterContext(props.columnId, props.qlGroup), [props.columnId, props.qlGroup]);
+    const isMultiple = inFilterCtx ? false : props.qlGroup.children.length > 1;
+    const isManualApply = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const singleChild = inFilterCtx
+        ? inFilterCtx.inPrimitive
+        : props.qlGroup.children.length === 1
+            ? props.qlGroup.children[0]
+            : null;
+    const singleOperatorDef = findColumnFilterOperatorDef(props.operatorDefs, singleChild);
+    const singlePrimitive = getEditableColumnFilterPrimitive(singleChild);
+    const singlePrimitiveEditable = singlePrimitive && !primitiveHasNonEditableRhs(singlePrimitive) ? singlePrimitive : null;
+    const isInlineEditable = !isMultiple && !isManualApply && (!singleChild || !!singlePrimitiveEditable);
+    const noInputs = !singleOperatorDef || singleOperatorDef.slots.length === 0;
+    let showLabel = isMultiple || noInputs || isManualApply || (singleChild && !singlePrimitiveEditable);
+    if (props.columnId === AG_GRID_GROUPED_COLUMN) {
+        showLabel = false;
+    }
+    let label = qlGroupToLabel(props.qlGroup, props.operatorDefs);
+    if (isManualApply &&
+        singlePrimitive &&
+        isColumnFilterPrimitiveEmpty(singlePrimitive, singleOperatorDef)) {
+        label = '';
+    }
+    const showQuickFilterDropdown = adaptable.api.filterApi.columnFilterApi.internalApi.showQuickFilterDropdown(props.columnId);
+    const colDef = adaptable.api.columnApi.getAGGridColDefForColumnId(props.columnId);
+    const showExpandFilterButton = colDef?.suppressHeaderFilterButton !== true;
+    const handleClear = () => props.onClear?.();
+    const openColumnFilterPopup = () => {
+        if (props.disabled) {
+            return;
+        }
+        adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
+            onChange: props.onChange,
+        });
+    };
+    const [selectOpen, setSelectOpen] = React.useState(false);
+    const currentOperator = singleOperatorDef
+        ? getColumnFilterOperatorValue(singleOperatorDef)
+        : undefined;
+    const operatorOptions = props.operatorDefs.map((def) => ({
+        label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(Box, { className: "twa:mr-2 twa:flex twa:items-center", children: renderOperatorIcon(def) }), _jsx(Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": def.label, children: def.label })] })),
+        tooltip: def.label,
+        value: getColumnFilterOperatorValue(def),
+    }));
+    const renderTriggerValue = () => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleOperatorDef?.icon ? (renderOperatorIcon(singleOperatorDef)) : (_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 filterDropdownSelect = (_jsx("div", { className: cn('twa:flex twa:box-border twa:self-stretch twa:min-h-0 twa:h-full twa:py-0.5 twa:px-0.5', !isInlineEditable && 'twa:min-w-0 twa:flex-1'), children: _jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: "Column Filter Operator Dropdown", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: setSelectOpen, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operatorValue) => {
+                const def = props.operatorDefs.find((entry) => getColumnFilterOperatorValue(entry) === operatorValue) ?? null;
+                if (!def) {
+                    return;
+                }
+                props.onGroupChange({
+                    ...props.qlGroup,
+                    children: [createColumnFilterPrimitive(def.operator, props.columnId)],
+                });
+            }, className: cn('twa:h-full twa:w-full twa:min-h-0 twa:text-left twa:px-0.5 twa:py-0.5 twa:border-none', 'twa:shadow-none twa:cursor-pointer', 'twa:text-primary-foreground twa:hover:bg-current/15', !isInlineEditable && 'twa:min-w-0 twa:flex-1') }) }));
+    const filterLabelTrigger = (_jsx(Flex, { role: "button", tabIndex: props.disabled ? -1 : 0, "data-name": "floating-filter-button", "aria-label": `Open column filter${label ? `: ${label}` : ''}`, title: label, className: cn('ab-FloatingFilter-trigger twa:flex-1 twa:min-w-0 twa:items-center', 'twa:self-center twa:mx-0.5 twa:my-0.5 twa:p-0.5 twa:text-left', props.disabled ? 'twa:pointer-events-none twa:opacity-60' : 'twa:cursor-pointer'), onClick: openColumnFilterPopup, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                openColumnFilterPopup();
+            }
+        }, children: renderTriggerValue() }));
+    if (isInlineEditable) {
+        filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
+    }
+    else {
+        filterDropdown = filterLabelTrigger;
+    }
+    const showClearButton = isMultiple ||
+        (singleChild && !singlePrimitiveEditable) ||
+        !!inFilterCtx?.functionNames.length ||
+        !isColumnFilterPrimitiveEmpty(singlePrimitive, singleOperatorDef);
+    return (_jsxs(Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
+            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) {
+                return;
+            }
+            e.preventDefault();
+            e.nativeEvent.stopImmediatePropagation();
+            focusable[nextIndex]?.focus();
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body || document.activeElement === null) {
+                    const refreshed = getFocusableElements(wrapper);
+                    refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
+                }
+            });
+        }, children: [filterDropdown, isInlineEditable && singlePrimitiveEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0 twa:min-h-0 twa:h-full", children: _jsx(FloatingFilterInputListNew, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, primitive: singlePrimitiveEditable, operatorDef: singleOperatorDef, enableExpressionFunctions: !!inFilterCtx && singleOperatorDef?.operator === 'IN', selectedFunctionNames: inFilterCtx?.functionNames, onInFilterChange: inFilterCtx && singleOperatorDef
+                        ? (literals, functionNames) => props.onGroupChange(buildInFilterGroup(props.columnId, singleOperatorDef.operator, literals, functionNames, singleOperatorDef.slots))
+                        : undefined, onPrimitiveChange: (primitive) => {
+                        props.onGroupChange({
+                            ...props.qlGroup,
+                            children: [primitive],
+                        });
+                    } }) })), isInlineEditable && showExpandFilterButton && (_jsx(SimpleButton, { className: cn('twa:px-1 twa:my-0.5', !showClearButton && 'twa:mr-0.5'), "aria-label": "Expand filter", tooltip: "Open filter popup", onClick: () => {
+                    adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
+                        onChange: props.onChange,
+                    });
+                }, "data-name": "expand-filter", icon: _jsx(Maximize2, { size: 20, strokeWidth: 1.5 }), variant: "text" })), showClearButton && (_jsx(SimpleButton, { "data-name": "clear-filter", className: "twa:p-0 twa:my-0.5 twa:mr-0.5", variant: "text", onClick: handleClear, icon: "close", tooltip: "Clear filter" }))] }));
+};

package/src/View/Filter/ColumnFilter/LayoutColumnFilter.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ColumnFilter } from '../../../types';
+/**
+ * Expression-based Layout Wizard column filter editor (replaces the
+ * legacy Predicates editor).
+ *
+ * Unlike the window / column-menu hosts (which persist to Redux via
+ * `useColumnFilterQlPredicate`), the wizard edits a **draft `Layout`**:
+ * every change flows out through `onColumnFilterChange` and is only
+ * persisted when the wizard is saved. The read/write semantics are the
+ * shared `columnFilterQl.ts` bridge helpers, so this host cannot drift
+ * from the Redux one.
+ */
+export declare const LayoutColumnFilter: (props: {
+    columnFilter: ColumnFilter;
+    onColumnFilterChange: (columnFilter: ColumnFilter) => void;
+}) => React.JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ModuleConstants from '../../../Utilities/Constants/ModuleConstants';
+import { buildQueryBuilderMapper } from '../../../components/aql/QueryBuilder/mapper';
+import { useAdaptable } from '../../AdaptableContext';
+import { ColumnFilterLocationProvider } from './columnFilterLocation';
+import { ColumnFilterComponentNew } from './ColumnFilterNew';
+import { buildColumnFilterFromGroup, deriveColumnFilterGroup, expressionForColumnFilterChangedEvent, isQlPredicateComplete, } from '../../../aql/columnFilterQl';
+export const LayoutColumnFilter = (props) => {
+    const { columnFilter, onColumnFilterChange } = props;
+    const { api } = useAdaptable();
+    const column = api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+    const mapper = React.useMemo(() => buildQueryBuilderMapper(api, ModuleConstants.ColumnFilterModuleId), [api]);
+    const qlGroup = React.useMemo(() => deriveColumnFilterGroup(api, column, columnFilter, mapper, 'FilterForm'), [api, mapper, columnFilter.ColumnId]);
+    const handleGroupChange = (group) => {
+        const next = buildColumnFilterFromGroup(api, columnFilter, columnFilter.ColumnId, group);
+        if (next === 'clear') {
+            onColumnFilterChange({ ColumnId: columnFilter.ColumnId });
+        }
+        else if (next) {
+            onColumnFilterChange(next);
+        }
+        api.eventApi.internalApi.fireColumnFilterChangedEvent({
+            columnId: columnFilter.ColumnId,
+            isApplied: false,
+            isComplete: isQlPredicateComplete(api, group),
+            expression: expressionForColumnFilterChangedEvent(api, group),
+        });
+    };
+    const handleClear = () => {
+        onColumnFilterChange({ ColumnId: columnFilter.ColumnId });
+        api.eventApi.internalApi.fireColumnFilterChangedEvent({
+            columnId: columnFilter.ColumnId,
+            isApplied: false,
+            isComplete: false,
+            expression: undefined,
+        });
+    };
+    if (!column) {
+        return null;
+    }
+    return (_jsx(ColumnFilterLocationProvider, { value: "filterForm", children: _jsx(ColumnFilterComponentNew, { location: "filterForm", columnId: columnFilter.ColumnId, qlGroup: qlGroup, disabled: columnFilter?.IsSuspended, onGroupChange: handleGroupChange, onClear: handleClear, hideActionButtons: true }) }));
+};

package/src/View/Filter/ColumnFilter/LayoutColumnFilterCard.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AccessLevel, ColumnFilter } from '../../../types';
+export declare const LayoutColumnFilterCard: React.FunctionComponent<{
+    columnFilter: ColumnFilter;
+    onChange: (columnFilter: ColumnFilter) => void;
+    onDelete?: () => void;
+    /** Rendered after the Edit button (e.g. suspend / share / confirmed delete). */
+    extraActions?: React.ReactNode;
+    accessLevel?: AccessLevel;
+    className?: string;
+}>;

package/src/View/Filter/ColumnFilter/LayoutColumnFilterCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { getColumnFilterExpressionPreview } from '../../../View/ObjectItemViews/Layout/getLayoutFilterViewItems';
+import { Card } from '../../../components/Card';
+import { Tag } from '../../../components/Tag';
+import SimpleButton from '../../../components/SimpleButton';
+import { Box, Flex } from '../../../components/Flex';
+import { useAdaptable } from '../../AdaptableContext';
+import { LayoutColumnFilter } from './LayoutColumnFilter';
+const isColumnFilterConfigured = (columnFilter) => StringExtensions.IsNotNullOrEmpty(columnFilter?.Expression) ||
+    StringExtensions.IsNotNullOrEmpty(columnFilter?.PreferredFilter);
+export const LayoutColumnFilterCard = (props) => {
+    const { api } = useAdaptable();
+    const column = api.columnApi.getColumnWithColumnId(props.columnFilter.ColumnId);
+    const columnLabel = column?.friendlyName ?? props.columnFilter.ColumnId;
+    const [isEditing, setIsEditing] = React.useState(() => !isColumnFilterConfigured(props.columnFilter));
+    const [draftFilter, setDraftFilter] = React.useState(props.columnFilter);
+    const [editSession, setEditSession] = React.useState(0);
+    React.useEffect(() => {
+        if (!isEditing) {
+            setDraftFilter(props.columnFilter);
+        }
+    }, [props.columnFilter, isEditing]);
+    const expressionPreview = getColumnFilterExpressionPreview(props.columnFilter, api);
+    const handleEdit = () => {
+        setDraftFilter(props.columnFilter);
+        setEditSession((session) => session + 1);
+        setIsEditing(true);
+    };
+    const handleCancel = () => {
+        setDraftFilter(props.columnFilter);
+        setIsEditing(false);
+    };
+    const handleSave = () => {
+        props.onChange(draftFilter);
+        setIsEditing(false);
+    };
+    return (_jsxs(Card, { shadow: false, gap: 0, className: `ab-LayoutColumnFilterCard twa:border twa:border-border ${props.className ?? ''}`, "data-name": "layout-column-filter-card", "data-column-id": props.columnFilter.ColumnId, children: [_jsxs(Card.Title, { border: isEditing, className: "twa:items-center twa:gap-2", children: [_jsxs(Flex, { className: "twa:flex-1 twa:min-w-0 twa:gap-2", alignItems: "center", flexWrap: "wrap", children: [_jsx(Tag, { variant: "accent", children: columnLabel }), !isEditing &&
+                                (expressionPreview ? (_jsx(Tag, { children: expressionPreview })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:italic", children: "No filter configured" })))] }), _jsxs(Flex, { className: "twa:gap-1 twa:shrink-0", alignItems: "center", children: [!isEditing && (_jsx(SimpleButton, { "data-name": "layout-column-filter-edit", icon: "edit", variant: "text", tooltip: "Edit filter", accessLevel: props.accessLevel, onClick: handleEdit })), props.extraActions, props.onDelete && (_jsx(SimpleButton, { "data-name": "layout-column-filter-delete", icon: "delete", variant: "text", tooltip: "Remove column filter", accessLevel: props.accessLevel, onClick: props.onDelete }))] })] }), isEditing && (_jsxs(Card.Body, { className: "twa:p-2", children: [_jsx(LayoutColumnFilter, { columnFilter: draftFilter, onColumnFilterChange: setDraftFilter }, `${props.columnFilter.ColumnId}:${editSession}`), _jsxs(Flex, { className: "twa:justify-end twa:gap-2 twa:mt-2", children: [_jsx(SimpleButton, { "data-name": "layout-column-filter-cancel", tone: "neutral", variant: "raised", onClick: handleCancel, children: "Cancel" }), _jsx(SimpleButton, { "data-name": "layout-column-filter-save", tone: "accent", variant: "raised", onClick: handleSave, children: "Save" })] })] }))] }));
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm' | 'filtersToolPanel';
+export declare const isEmbeddedColumnFilterLocation: (location: ColumnFilterLocation) => boolean;
+/** Resolve where an AG Grid filter host is mounted (popup vs filters tool panel). */
+export declare const detectColumnFilterLocationFromHost: (host: HTMLElement, attachParams?: {
+    hidePopup?: Function;
+}) => ColumnFilterLocation;
+export declare const getColumnFilterQueryBuilderLayout: (location: ColumnFilterLocation) => "inline" | "stacked" | "auto";
+export declare const ColumnFilterLocationProvider: React.Provider<ColumnFilterLocation>;
+export declare const useColumnFilterLocation: () => ColumnFilterLocation;

package/src/View/Filter/ColumnFilter/columnFilterLocation.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export const isEmbeddedColumnFilterLocation = (location) => location === 'filterForm' || location === 'filtersToolPanel';
+export const detectColumnFilterLocationFromHost = (host, attachParams) => {
+    if (host.closest('.ag-filter-toolpanel') ||
+        host.closest('.ag-filter-toolpanel-instance-filter')) {
+        return 'filtersToolPanel';
+    }
+    if (typeof attachParams?.hidePopup !== 'function') {
+        return 'filtersToolPanel';
+    }
+    return 'columnMenu';
+};
+export const getColumnFilterQueryBuilderLayout = (location) => {
+    if (location === 'filtersToolPanel') {
+        return 'stacked';
+    }
+    if (location === 'columnMenu' || location === 'filterForm') {
+        return 'inline';
+    }
+    return 'auto';
+};
+const ColumnFilterLocationContext = React.createContext(null);
+export const ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider;
+export const useColumnFilterLocation = () => {
+    return React.useContext(ColumnFilterLocationContext) ?? 'columnMenu';
+};