@adaptabletools/adaptable-cjs 23.0.4 → 23.0.5-canary.1

package/src/View/Charting/EditChartButton.js

@@ -9,10 +9,7 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const react_redux_1 = require("react-redux");
 const EditChartButton = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
-    return ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
-        // It gets complicated when a chart is both open and opened in edit wizard
-        // There an be conflicts between the two open charts (preview and main) and the changes to the active chart may not be syncronized correctly.
-        disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {
+    return ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {
             action: 'Edit',
             value: props.chart,
             source: 'Toolbar',

package/src/View/Charting/ShowChartButton.js

@@ -47,9 +47,6 @@ const ShowExternalChartButton = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
     const chartContainers = chartingOptions?.chartContainers;
-    /**
-     * Need to refresh after the chart is closed/opened
-     */
     const { isOpen, showChart: onShow, hideChart: onHide, } = (0, useExternalChartState_1.useExternalChartState)(props.chartDefinition);
     const containerOptions = chartContainers
         ? chartContainers?.map((contianerDef) => ({

package/src/View/Charting/useAgChartState.js

@@ -43,13 +43,8 @@ const useAgChartState = (chartDefinition) => {
         }
         const chartRef = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId);
         if (chartRef) {
-            // chart alredy opened
             return;
         }
-        /**
-         * When using a custom container, make sure multiple charts are not opened in the same container.
-         * If multple charts are opened in the same contianer, it infinitly adds the charts to the container.
-         */
         if (chartContainer && element) {
             if (chartContainer.chartsDisplay !== 'multiple') {
                 closeAlreadyOpenedChartsInContainer(element);

package/src/View/Charting/useChartingElements.js

@@ -23,16 +23,13 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
     const chartContainers = chartingOptions?.chartContainers;
     const [selectedChartId, setSelectedChartId] = React.useState(() => {
-        // ID is kept in state becaus that does not change, the definition might change
         return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
     });
     const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
     const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
     const chartAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(selectedChart, accessLevel);
     const [selectedContainer, setSelectedContainer] = React.useState(null);
-    // Need to always call as they the rule for hooks
     const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = (0, useAgChartState_1.useAgChartState)(isAgChart ? selectedChart : undefined);
-    // Need to always call as they the rule for hooks
     const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
     const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
     const showChart = isAgChart ? showAgChart : showExternalChart;
@@ -57,7 +54,6 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         selectedChartValue = 'No Charts';
     }
     React.useEffect(() => {
-        // select first
         if (!selectedChart && chartDefinitions.length > 0) {
             setSelectedChartId(chartDefinitions[0].Uuid);
         }

package/src/View/Charting/useExternalChartState.js

@@ -4,12 +4,9 @@ exports.useExternalChartState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const AdaptableContext_1 = require("../AdaptableContext");
-// need to trigger other show-chart buttons to close/hide
 const buttonChangeSubscribers = [];
 const useExternalChartState = (chartDefinition) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    // needs to update when ever a chart is:
-    // - opened, hidden
     const [isOpen, setIsOpen] = react_1.default.useState(() => {
         return (chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
@@ -27,7 +24,6 @@ const useExternalChartState = (chartDefinition) => {
             updateIsOpen();
         };
         buttonChangeSubscribers.push(subscriber);
-        // clear own subscriptions
         return () => {
             const index = buttonChangeSubscribers.indexOf(subscriber);
             if (index > -1) {
@@ -38,14 +34,12 @@ 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

@@ -19,19 +19,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',
@@ -40,7 +36,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 = (0, columnLayoutHelpers_1.formatColumnInspectorSizing)(columnId, sizing, resolveDefaultWidth);
     if (explicit !== 'Default') {
@@ -197,13 +192,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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.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);
@@ -219,7 +210,6 @@ const ModuleView = (props) => {
     const handleWizardClose = React.useCallback(() => {
         setIsWizardOpen(false);
     }, []);
-    // filter out items with scope
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)("b", { className: `${BASE_CLASS_NAME}__header`, children: module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), children: "New" })] }), itemsInScope?.length ? (0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectList, { items: itemsInScope, module: module }) : null, isWizardOpen && EditWizard && ((0, jsx_runtime_1.jsx)(EditWizard, { popupParams: {
                     column,
                     action: 'New',

package/src/View/Comments/CommentsEditor.js

@@ -15,14 +15,6 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/Adaptabl
 const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const Flex_1 = require("../../components/Flex");
 const GeneralConstants_1 = require("../../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]
 const CommentsEditor = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showCloseButton = api.optionsApi.getCommentOptions()?.showPopupCloseButton ?? true;
@@ -33,13 +25,6 @@ const CommentsEditor = (props) => {
     const commentThread = (0, react_redux_1.useSelector)((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
     const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === GeneralConstants_1.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('');
@@ -72,7 +57,7 @@ const CommentsEditor = (props) => {
                         }
                         const isOwnComment = comment?.Author?.UserName
                             ? comment?.Author?.UserName === userId
-                            : true; // no owner means it's the current user
+                            : true;
                         return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Comment twa:p-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mb-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold", children: comment?.Author?.UserName }), comment.Timestamp && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "comment-timestamp", className: "twa:text-2", children: formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat()) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
                                                 api.commentApi.deleteComment(comment, cellAddress);
                                                 requestAnimationFrame(() => {

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Icon_1 = require("../../../components/Icon");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
 const AdaptableButtonComponent = (props) => {
     let icon = props.icon;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();

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

@@ -6,9 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const AdaptableButtonComponent_1 = require("./AdaptableButtonComponent");
-/**
- * Default variant/tone when `buttonStyle` omits them — differs by surface by design.
- */
 exports.ADAPTABLE_BUTTON_SURFACE_DEFAULTS = {
     dashboard: { variant: 'text', tone: 'none' },
     customToolbar: { variant: 'outlined', tone: 'neutral' },

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

@@ -11,23 +11,16 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
     const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = (0, useProperty_1.default)(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 ? (0, DateHelper_1.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((0, DateHelper_1.dateToISO)(dateValue) ?? ''),
+        onChange: (dateValue) => setValue((0, DateHelper_1.dateToISO)(dateValue) ?? ''),
         required,
         disabled,
         dateProps: {

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

@@ -4,10 +4,6 @@ exports.AdaptableIconComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Icon_1 = require("../../../components/Icon");
 const useCustomIcon_1 = require("./useCustomIcon");
-/**
- * This is a connected componnet.
- * It needs to be used only inside adaptable context.
- */
 const AdaptableIconComponent = (props) => {
     const icon = (0, useCustomIcon_1.useCustomIcon)(props.icon);
     return (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { ...props, icon: icon });

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

@@ -4,9 +4,6 @@ exports.AdaptableIconSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const IconSelector_1 = require("../../../components/IconSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
-/**
- * This component connects to adaptable to retrieve custom icons
- */
 const AdaptableIconSelector = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();

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

@@ -10,11 +10,9 @@ const AdaptableInput = React.forwardRef((props, ref) => {
     const useNativeInputDate = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions?.dateInputOptions?.useNativeInput;
     const { showClearButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
-        // use AdapTable date input
         return ((0, jsx_runtime_1.jsx)(AdaptableDateInput_1.default, { showClearButton: showClearButton, ...inputProps, ref: ref }));
     }
     else {
-        // native input
         return (0, jsx_runtime_1.jsx)(Input_1.default, { ...inputProps, ref: ref });
     }
 });

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

@@ -13,13 +13,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)
@@ -49,7 +42,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

@@ -7,8 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonNewPage extends React.Component {
     render() {
-        return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
-            , variant: "text", ...this.props }));
+        return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage", variant: "text", ...this.props }));
     }
 }
 exports.ButtonNewPage = ButtonNewPage;

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

@@ -18,7 +18,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) {
@@ -43,7 +43,6 @@ exports.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

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

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

@@ -7,10 +7,6 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FloatingFilter_1 = require("./FloatingFilter");
 const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
-/**
- * This wrapper knows about predicates.
- * It transforms predicates in QlPredicates.
- */
 const AdaptableFloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.Column.columnId, 'FilterBar');

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

@@ -27,46 +27,19 @@ const ColumnFilterPredicateDropdown = (props) => {
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown twa:p-0.5", style: {
-            //@ts-ignore ignore
             '--ab-color-input-background': 'var(--ab-color-primary)',
-        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "filter-predicate-dropdown", extraWidthChars: 8, 
-            // The trigger lives inside ag-grid's column menu, which closes itself
-            // on mousedowns outside its DOM subtree. Since the popup is portaled
-            // to `document.body`, mousedowns inside it would otherwise bubble to
-            // `document` and unmount the trigger mid-interaction (causing the
-            // popup to re-align to (0,0) before disappearing).
-            stopMouseDownPropagation: true, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
+        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), (0, jsx_runtime_1.jsx)(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
 };
 const AndOrInput = (props) => {
-    return (
-        // <Select
-        //   value={props.operator}
-        //   onChange={props.onChange}
-        //   options={[
-        //     { label: 'AND', value: 'AND' },
-        //     { label: 'OR', value: 'OR' },
-        //   ]}
-        // />
-        ((0, jsx_runtime_1.jsxs)(
-            Flex_1.Flex,
-            { className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }
-        ))
-    );
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }));
 };
 const ColumnFilterComponent = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -76,13 +49,9 @@ 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;
@@ -95,8 +64,6 @@ 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);
         }
@@ -112,7 +79,6 @@ const ColumnFilterComponent = (props) => {
         const currentPredicate = currentPredicateRef.current;
         const newPredicate = {
             ...currentPredicate,
-            // @ts-ignore
             args: [...currentPredicate.args, { operator: predicateDef.operator, args: [] }],
         };
         onPredicateChange(newPredicate);
@@ -129,15 +95,10 @@ 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 = ((0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
             const predicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === predicate.operator);
-            // Guard against the select emitting a value that is not a known
-            // predicate for the current column (e.g. a stale/reconciled value while
-            // switching columns).
             if (!predicateDef) {
                 return;
             }
@@ -173,10 +134,6 @@ 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

@@ -18,12 +18,10 @@ 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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { renderOption: (column) => {
                                 const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
                                 const label = column.friendlyName ?? column.columnId;

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

@@ -16,14 +16,9 @@ const utils_2 = require("../../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const FloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.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);
@@ -54,8 +49,6 @@ const FloatingFilter = (props) => {
     const renderTriggerValue = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
     const filterDropdownSelect = ((0, jsx_runtime_1.jsx)(NewSelect_1.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;
@@ -76,12 +69,6 @@ const FloatingFilter = (props) => {
     const showClearButton = isMultiple ||
         !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef);
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
-            // AG Grid's header keyboard navigation intercepts Tab and calls preventDefault(),
-            // which prevents focus from moving between 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;
             }
@@ -97,24 +84,18 @@ 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 = (0, utils_2.getFocusableElements)(wrapper);
                     refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
                 }
             });
-        }, children: [filterDropdown, isInlineEditable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
-                    // It works only with a predicate
-                    predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+        }, children: [filterDropdown, isInlineEditable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 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

@@ -25,12 +25,6 @@ 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);
         }
@@ -41,11 +35,9 @@ 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();
@@ -56,9 +48,8 @@ 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
@@ -88,7 +79,6 @@ const ColumnFilterInput = (props) => {
                     setLiveValue('');
                 }
                 else {
-                    // @ts-ignore
                     onChange(value);
                     setLiveValue(value);
                 }
@@ -100,10 +90,7 @@ 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) {
@@ -124,7 +111,6 @@ 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

@@ -33,10 +33,7 @@ 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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];