@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.0

package/src/View/Charting/useExternalChartState.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import { useAdaptable } from '../AdaptableContext';
-// need to trigger other show-chart buttons to close/hide
 const buttonChangeSubscribers = [];
 export const useExternalChartState = (chartDefinition) => {
     const adaptable = useAdaptable();
-    // needs to update when ever a chart is:
-    // - opened, hidden
     const [isOpen, setIsOpen] = React.useState(() => {
         return (chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
@@ -23,7 +20,6 @@ export const useExternalChartState = (chartDefinition) => {
             updateIsOpen();
         };
         buttonChangeSubscribers.push(subscriber);
-        // clear own subscriptions
         return () => {
             const index = buttonChangeSubscribers.indexOf(subscriber);
             if (index > -1) {
@@ -34,14 +30,12 @@ export const useExternalChartState = (chartDefinition) => {
     return {
         showChart: (container) => {
             adaptable.api.chartingApi.internalApi.onShowExternalChart(chartDefinition, container);
-            // The small delay allows the library to render the chart before the button is updated
             requestAnimationFrame(() => {
                 buttonChangeSubscribers.forEach((subscriber) => subscriber());
             });
         },
         hideChart: () => {
             adaptable.api.chartingApi.internalApi.onHideExternalChart(chartDefinition);
-            // The small delay allows the library to destroy the chart before the button is updated
             requestAnimationFrame(() => {
                 buttonChangeSubscribers.forEach((subscriber) => subscriber());
             });

package/src/View/ColumnInfo/ColumnInfo.js

@@ -15,19 +15,15 @@ const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
     className: 'twa:flex-1 twa:min-h-0 twa:w-full',
 };
-// TODOS:
-// - use column from props as initial value
-// - table summary
-// - access level for edit/new buttons
 const MODULES_WITH_COLUMN = [
-    'Alert', // Scope
-    'CalculatedColumn', // ColumnId
-    'CustomSort', // ColumnId
-    'FormatColumn', // Scope
+    'Alert',
+    'CalculatedColumn',
+    'CustomSort',
+    'FormatColumn',
     'FlashingCell',
-    'PlusMinus', // Scope
-    'Shortcut', // Scope
-    'StyledColumn', // Scope
+    'PlusMinus',
+    'Shortcut',
+    'StyledColumn',
 ];
 const MODULES_WITH_SCOPE = [
     'Alert',
@@ -36,7 +32,6 @@ const MODULES_WITH_SCOPE = [
     'Shortcut',
     'StyledColumn',
 ];
-/** Column Info summary only — shows the resolved default width when layout has no explicit sizing. */
 const formatColumnInfoSummaryWidth = (columnId, sizing, resolveDefaultWidth) => {
     const explicit = formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth);
     if (explicit !== 'Default') {
@@ -193,13 +188,9 @@ const ModuleView = (props) => {
     const EditWizard = module?.getViewProperties?.()?.getEditWizard?.();
     const column = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
     const allItems = module?.toViewAll?.();
-    // Dont show calculated column for non calc cols
     if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
         return _jsx(_Fragment, {});
     }
-    // if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
-    //   return <></>;
-    // }
     const itemsInScope = allItems.filter((item) => {
         if ('Scope' in item.abObject) {
             return adaptable.api.columnScopeApi.isColumnInScope(column, item.abObject.Scope);
@@ -215,7 +206,6 @@ const ModuleView = (props) => {
     const handleWizardClose = React.useCallback(() => {
         setIsWizardOpen(false);
     }, []);
-    // filter out items with scope
     return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, children: [_jsxs(Flex, { children: [_jsx("b", { className: `${BASE_CLASS_NAME}__header`, children: module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), _jsx(ButtonNew, { onClick: () => setIsWizardOpen(true), children: "New" })] }), itemsInScope?.length ? _jsx(AdaptableObjectList, { items: itemsInScope, module: module }) : null, isWizardOpen && EditWizard && (_jsx(EditWizard, { popupParams: {
                     column,
                     action: 'New',

package/src/View/Comments/CommentsEditor.js

@@ -11,14 +11,6 @@ import AdaptableInput from '../Components/AdaptableInput';
 import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
 import { Box, Flex } from '../../components/Flex';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
-// Edit Mode
-// [author] [edit, delete]
-// [text-editor] * this is different
-// [show-all-comments-button]
-// View Mode
-// [author] [edit, delete]
-// [text]
-// [show-all-comments-button]
 export const CommentsEditor = (props) => {
     const { api } = useAdaptable();
     const showCloseButton = api.optionsApi.getCommentOptions()?.showPopupCloseButton ?? true;
@@ -29,13 +21,6 @@ export const CommentsEditor = (props) => {
     const commentThread = useSelector((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
     const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === ACCESS_LEVEL_READ_ONLY;
     const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
-        /**
-         * When opening the popup and there is only one comment, we want to open it in edit mode.
-         * This happens usualy when a new comment is added via cell menu.
-         */
-        // if (cellComments?.Comments?.length === 1 && cellComments?.Comments[0].Value === '') {
-        //   return cellComments?.Comments[0].Uuid;
-        // }
         return null;
     });
     const [newCommentText, setNewCommentText] = React.useState('');
@@ -68,7 +53,7 @@ export const CommentsEditor = (props) => {
                         }
                         const isOwnComment = comment?.Author?.UserName
                             ? comment?.Author?.UserName === userId
-                            : true; // no owner means it's the current user
+                            : true;
                         return (_jsxs(Box, { className: "ab-Comment twa:p-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:mb-2", children: [_jsxs(Box, { children: [_jsx(Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold", children: comment?.Author?.UserName }), comment.Timestamp && (_jsx(Box, { "data-name": "comment-timestamp", className: "twa:text-2", children: formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat()) }))] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }), _jsx(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
                                                 api.commentApi.deleteComment(comment, cellAddress);
                                                 requestAnimationFrame(() => {

package/src/View/Components/AdaptableButton/AdaptableButtonComponent.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isAdaptableSystemIcon } from '../../../components/Icon';
 import SimpleButton from '../../../components/SimpleButton';
 import { useAdaptable } from '../../AdaptableContext';
-/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
 export const AdaptableButtonComponent = (props) => {
     let icon = props.icon;
     const adaptable = useAdaptable();

package/src/View/Components/AdaptableButton/AdaptableButtonView.js

@@ -2,9 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
 import { AdaptableButtonComponent } from './AdaptableButtonComponent';
-/**
- * Default variant/tone when `buttonStyle` omits them — differs by surface by design.
- */
 export const ADAPTABLE_BUTTON_SURFACE_DEFAULTS = {
     dashboard: { variant: 'text', tone: 'none' },
     customToolbar: { variant: 'outlined', tone: 'neutral' },

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

@@ -8,23 +8,16 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
     const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
-        onChange: (dateString) => 
-        // wrap date value in ChangeEvent in order to keep the external API unchanged
-        props.onChange?.({
+        onChange: (dateString) => props.onChange?.({
             target: {
-                // ALWAYS trigger onChange with the ISO format
                 value: dateString,
             },
         }),
     });
     const dateValue = value ? parseDateValue(value) : null;
     const datepickerProps = {
-        // this is OK as long as we do not support range datepicker
         value: dateValue,
-        onChange: (dateValue) => 
-        // convert to ISO8601 string format
-        // see https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings
-        setValue(dateToISO(dateValue) ?? ''),
+        onChange: (dateValue) => setValue(dateToISO(dateValue) ?? ''),
         required,
         disabled,
         dateProps: {

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

@@ -1,10 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconComponent } from '../../../components/Icon';
 import { useCustomIcon } from './useCustomIcon';
-/**
- * This is a connected componnet.
- * It needs to be used only inside adaptable context.
- */
 export const AdaptableIconComponent = (props) => {
     const icon = useCustomIcon(props.icon);
     return _jsx(IconComponent, { ...props, icon: icon });

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

@@ -1,9 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconSelector } from '../../../components/IconSelector';
 import { useAdaptable } from '../../AdaptableContext';
-/**
- * This component connects to adaptable to retrieve custom icons
- */
 export const AdaptableIconSelector = (props) => {
     const adaptable = useAdaptable();
     const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();

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

@@ -7,11 +7,9 @@ const AdaptableInput = React.forwardRef((props, ref) => {
     const useNativeInputDate = useAdaptable().adaptableOptions.userInterfaceOptions?.dateInputOptions?.useNativeInput;
     const { showClearButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
-        // use AdapTable date input
         return (_jsx(AdaptableDateInput, { showClearButton: showClearButton, ...inputProps, ref: ref }));
     }
     else {
-        // native input
         return _jsx(Input, { ...inputProps, ref: ref });
     }
 });

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

@@ -10,13 +10,6 @@ const DENSITY_CLASS = {
     Normal: 'ab-Badge--normal',
     Comfortable: 'ab-Badge--comfortable',
 };
-/**
- * Maps a {@link BadgePillStyle} to React/CSS properties for the pill.
- *
- * Intentionally does **not** read corner radius (owned by `Shape`), text
- * alignment (owned by `BadgeStyle.Font.Alignment` at the cell level),
- * `ClassName`, or `FontSize` — none make sense on a pill.
- */
 const pillStyleToCss = (pill) => {
     const result = {};
     if (!pill)
@@ -46,7 +39,6 @@ const pillStyleToCss = (pill) => {
     }
     if (pill.BorderColor) {
         result.borderColor = pill.BorderColor;
-        // Subtler 1px outline; pills are usually only ~20px tall.
         result.borderWidth = 1;
         result.borderStyle = 'solid';
     }

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

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

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

@@ -13,7 +13,6 @@ const stopPropagation = (e) => {
 };
 export class EntityListActionButtons extends React.Component {
     static defaultProps = {
-        // Adaptable: null,
         suspendableObject: null,
         showEdit: true,
         showDelete: true,

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

@@ -14,7 +14,7 @@ const ensurePortalElement = (className) => {
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
-    portalElement.style.zIndex = '4'; // under the context menu
+    portalElement.style.zIndex = '4';
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
     if (className) {
@@ -39,7 +39,6 @@ export const CellPopup = React.forwardRef((props, ref) => {
         const showOverlayOptions = {
             id: OVERLAY_ID,
             alignPosition: [
-                // overlay - target
                 ['TopLeft', 'TopRight'],
                 ['TopRight', 'TopLeft'],
                 ['TopCenter', 'BottomCenter'],

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

@@ -9,10 +9,6 @@ export const ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider
 export const useColumnFilterLocation = () => {
     return React.useContext(ColumnFilterLocationContext) ?? 'columnMenu';
 };
-/**
- * This wrapper knows about predicates.
- * It transforms predicates in QlPredicates.
- */
 export const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId, 'FilterForm');
     const filterContent = (_jsx(ColumnFilterLocationProvider, { value: props.location, children: _jsx(ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {

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

@@ -3,10 +3,6 @@ import * as React from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { FloatingFilter } from './FloatingFilter';
 import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
-/**
- * This wrapper knows about predicates.
- * It transforms predicates in QlPredicates.
- */
 export const AdaptableFloatingFilter = (props) => {
     const adaptable = useAdaptable();
     const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId, 'FilterBar');

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

@@ -23,46 +23,19 @@ const ColumnFilterPredicateDropdown = (props) => {
     const operator = props.predicate?.operator;
     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-color-input-background': 'var(--ab-color-primary)',
-        }, 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, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
+        }, children: _jsx(SingleSelect, { "data-name": "filter-predicate-dropdown", extraWidthChars: 8, stopMouseDownPropagation: true, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
                 });
-            }, 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 }) }));
+            }, items: options, 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 })] }));
 };
 const AndOrInput = (props) => {
-    return (
-        // <Select
-        //   value={props.operator}
-        //   onChange={props.onChange}
-        //   options={[
-        //     { label: 'AND', value: 'AND' },
-        //     { label: 'OR', value: 'OR' },
-        //   ]}
-        // />
-        (_jsxs(
-            Flex,
-            { className: "twa:flex-1", children: [_jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), _jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }
-        ))
-    );
+    return (_jsxs(Flex, { className: "twa:flex-1", children: [_jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), _jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }));
 };
 export const ColumnFilterComponent = (props) => {
     const adaptable = useAdaptable();
@@ -72,13 +45,9 @@ export const ColumnFilterComponent = (props) => {
     React.useEffect(() => {
         if (props.location !== 'columnMenu')
             return;
-        // when the location is columnMenu, and this is not displayed
-        // inside the ColumnFilterWindow, we want to focus on the first dropdown
         const dropdown = contentWrapperRef.current?.querySelector('[data-name="filter-predicate-dropdown"]');
         dropdown?.focus();
     }, [props.location]);
-    // 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;
@@ -91,8 +60,6 @@ export const ColumnFilterComponent = (props) => {
         setPredicateNotYetApplied(undefined);
     };
     const onPredicateChange = (predicate) => {
-        // even if manuallyApplyColumnFilter is false, when we explicitly clear the filter
-        // we want to apply the filter immediately
         if (!manuallyApplyColumnFilter || !predicate) {
             props.onPredicateChange(predicate);
         }
@@ -108,7 +75,6 @@ export const ColumnFilterComponent = (props) => {
         const currentPredicate = currentPredicateRef.current;
         const newPredicate = {
             ...currentPredicate,
-            // @ts-ignore
             args: [...currentPredicate.args, { operator: predicateDef.operator, args: [] }],
         };
         onPredicateChange(newPredicate);
@@ -125,15 +91,10 @@ export const ColumnFilterComponent = (props) => {
         ? props.predicate
         : predicateNotYetApplied ?? props.predicate;
     const currentPredicateRef = React.useRef(currentPredicate);
-    //#ref-predicate
     currentPredicateRef.current = currentPredicate;
-    // Not sure how to check this but would be nice...
     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;
             }
@@ -169,10 +130,6 @@ export const ColumnFilterComponent = (props) => {
                                         args: newArgs,
                                     });
                                 }, columnId: props.columnId, disabled: props.disabled, predicate: predicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
-                                    // #ref-predicate - for whatever reason
-                                    // the `currentPredicate` here would be one from an old render
-                                    // if we weren't using a ref. we're not using memo/usecallback here,
-                                    // so I don't understand why this is happening
                                     const currentPredicate = currentPredicateRef.current;
                                     const newArgs = [...currentPredicate.args];
                                     newArgs[index] = predicate;

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

@@ -14,12 +14,10 @@ export const ColumnFilterWindow = (props) => {
     React.useEffect(() => {
         setColumnId(initialColumnId);
     }, [props.popupProps.value]);
-    // when the window is opened, focus on the column selector
     React.useEffect(() => {
         const focusable = columnSelectorWrapperRef.current?.querySelector('[data-name="column-selector"]');
         focusable?.focus();
     }, []);
-    // const onChange = props.popupProps.onChange;
     return (_jsxs(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [_jsx(Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Column", children: _jsx(ColumnSelector, { renderOption: (column) => {
                                 const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
                                 const label = column.friendlyName ?? column.columnId;

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

@@ -12,14 +12,9 @@ import { cn, getFocusableElements } from '../../../lib/utils';
 import { Maximize2 } from 'lucide-react';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
-    /**
-     * We always have a syntetic predicate with AND or OR, so the logic is easyer.
-     * The wrapper is in charge of constructing the correct column filter.
-     */
     const isMultiple = props.predicate?.args?.length > 1;
     const isManualApply = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
     const isInlineEditable = !isMultiple && !isManualApply;
-    // only used when there is only one filter selected
     let singleFilterPredicateDef = null;
     if (props.predicate.args.length === 1) {
         singleFilterPredicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === props.predicate.args[0].operator);
@@ -50,8 +45,6 @@ export const FloatingFilter = (props) => {
     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 filterDropdownSelect = (_jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: `Column Filter Operator Dropdown: current operator is ${label}`, 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;
@@ -72,12 +65,6 @@ export const FloatingFilter = (props) => {
     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 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;
             }
@@ -93,24 +80,18 @@ export const FloatingFilter = (props) => {
             }
             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) => {
+        }, 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, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
                         props.onPredicateChange({
                             operator: props.predicate.operator,
                             args: [predicate],

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

@@ -21,12 +21,6 @@ export const ColumnFilterInput = (props) => {
         setHasFocus(false);
     }, []);
     React.useEffect(() => {
-        // only update if the input is not focused
-        // eg: value coming from a sidebar filter
-        // should be reflected in the input
-        // but if the input is focused, it means the user is typing
-        // so we don't want to update the input value from the outside (from state)
-        // but we leave liveValue as is in the local component state
         if (!hasFocus) {
             setLiveValue(value);
         }
@@ -37,11 +31,9 @@ export const ColumnFilterInput = (props) => {
     const showDatePicker = filterOptions.showDatePicker;
     const onChange = React.useMemo(() => {
         return debounceOrImmediate((value) => {
-            //@ts-ignore
             onChangeProp(value);
         }, debounceTime);
     }, [onChangeProp, debounceTime]);
-    // the onClear needs to have the same debounce time as the onChange
     const onClear = React.useMemo(() => {
         return debounceOrImmediate(() => {
             onClearProp();
@@ -52,9 +44,8 @@ export const ColumnFilterInput = (props) => {
                 ? true
                 : value === 'unchecked'
                     ? false
-                    : // 'all'
+                    :
                         null, onChange: (checked) => {
-                // sequence: 'checked' -> 'unchecked' -> 'all' -> 'checked'
                 const newCheckedValue = value === 'unchecked' && checked === true
                     ? 'all'
                     : checked === true
@@ -84,7 +75,6 @@ export const ColumnFilterInput = (props) => {
                     setLiveValue('');
                 }
                 else {
-                    // @ts-ignore
                     onChange(value);
                     setLiveValue(value);
                 }
@@ -96,10 +86,7 @@ export const ColumnFilterInput = (props) => {
                 padding: 'var(--ab-base-space)',
                 border: 'none',
             }
-            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
-        // autoFocus has to be FALSE because if the input receives focus in the init phase,
-        // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
-        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
             const prevValue = `${liveValue}`;
             const value = e.target.value;
             if (value) {
@@ -120,7 +107,6 @@ export const ColumnFilterInput = (props) => {
                         const newValueEndsWithZero = value.endsWith('0');
                         const separatorCount = (value.match(/[.,]/g) || []).length;
                         if (prevValueHasSeparator && separatorCount > 1) {
-                            // not a valid number
                             return;
                         }
                         if (newValueEndsWithSeparator) {

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

@@ -29,10 +29,7 @@ export const ColumnFilterInputList = (props) => {
                         operator: props.predicate.operator,
                         args: inputs,
                     });
-                }, value: props.predicate.args, 
-                // are not known ql operators for now
-                // should change when porting, it has knoladge about predicates
-                type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }) }));
+                }, value: props.predicate.args, type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }) }));
     }
     return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];

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

@@ -26,7 +26,6 @@ export const ColumnFilterMenu = (props) => {
     }, []);
     useEffect(() => {
         const onKeyDown = (e) => {
-            // Only handle arrow keys and Enter - let other keys (like Tab) pass through
             if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') {
                 return;
             }

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

@@ -29,18 +29,13 @@ export const FloatingFilterInputList = (props) => {
                     operator: props.predicate.operator,
                     args: inputs,
                 });
-            }, value: props.predicate.args, 
-            // are not known ql operators for now
-            // should change when porting, it has knowledge about predicates
-            type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
+            }, value: props.predicate.args, type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
     }
     return (_jsx("div", { className: cn('twa:relative twa:w-full twa:flex twa:flex-row twa:[&>*:not(:first-child)]:border-l! twa:[&>*:not(:first-child)]:border-input-border!', {
             'twa:**:[input]:min-h-auto!': 'make all inputs inside not have a height fixed',
-            // this is especially for the date picker filter
             'twa:*:[[role=button]]:rounded-input': true,
             'twa:*:[[role=button]]:absolute': 'make date picker absolute filter',
             'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto': 'make date picker - and give it some padding, so the focus is not cut off absolute outline filter',
-            // and this is for text and number inputs
             'twa:*:[input]:rounded-input': true,
             'twa:*:[input]:absolute': 'make inputs absolute filter',
             'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto': 'make inputs - and give it some padding, so the focus is not cut off absolute outline filter',