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

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

@@ -30,7 +30,6 @@ const ColumnFilterMenu = (props) => {
     }, []);
     (0, react_1.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

@@ -33,18 +33,13 @@ 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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_2.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',

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

@@ -36,7 +36,6 @@ function useDistinctFilterColumnValues(options) {
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
     (0, react_1.useEffect)(() => {
         if (valuesLoadTrigger === 0) {
-            // skip the first render
             return;
         }
         let ignore = false;
@@ -86,15 +85,8 @@ function useDistinctFilterColumnValues(options) {
         triggerValuesLoad,
     };
 }
-/**
- * This component was ported and modified to not know about colum  filter and predicates.
- * It should be further refactored to be easily ported;
- */
 const FloatingFilterValues = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    // const evaluateInPredicateUsingTime = useAdaptableOptions(
-    //   (options) => options.predicateOptions.evaluateInPredicateUsingTime
-    // );
     const currentColumn = api.columnApi.getColumnWithColumnId(props.columnId);
     const searchValueRef = React.useRef('');
     const { isDistinctColumnValuesLoading, quickFilterValues, triggerValuesLoad } = useDistinctFilterColumnValues({
@@ -103,20 +95,14 @@ const FloatingFilterValues = (props) => {
     });
     const valueRef = React.useRef(props.value);
     (0, react_1.useEffect)(() => {
-        // we used to load values initially on mount, without any condition
         const value = valueRef.current;
-        // but we now optimize it - if there are no values to show (for which we would need a label)
-        // then we skip it altogether, so we'll only load onMenuOpen
         if (!value || !Array.isArray(value) || value.length === 0) {
             return;
         }
-        // see 😅 usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef 😅
         const filterHandler = api.filterApi.columnFilterApi.internalApi.getAdaptableFilterHandler(props.columnId);
         const usePrevious = filterHandler && typeof filterHandler.getLastCachedFilterDisplayValues === 'function'
             ? !!filterHandler.getLastCachedFilterDisplayValues()
             : false;
-        // however, if the `value` prop is a non-empty array, we need to load the values
-        // so we know which labels to show
         triggerValuesLoad({
             usePrevious,
         });
@@ -124,14 +110,8 @@ const FloatingFilterValues = (props) => {
     const quickFilterValuesRef = React.useRef(quickFilterValues);
     quickFilterValuesRef.current = quickFilterValues;
     (0, react_1.useEffect)(() => {
-        // since we did the optimization above,
-        // we now hit a scenario where the value is set via an API method
-        // so we also need to account for that - so whenever props.value changes, we need to check
-        // and if we previously didn't have a valid array
-        // and now we do, we need to load the values - if they are not already loaded
         if (quickFilterValuesRef.current.values.length > 0 ||
             quickFilterValuesRef.current.dataLoadIsComplete) {
-            // values have already been loaded, so we can skip
             return;
         }
         const currentValue = props.value;

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

@@ -18,7 +18,6 @@ const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOver
     const column = api.columnApi.getColumnWithColumnId(columnId);
     const columnFilterOptions = api.optionsApi.getFilterOptions().columnFilterOptions;
     const qlPredicateDefs = React.useMemo(() => {
-        // this is NOT the ideal place to do this, but it is what it is: autoGroupCol should NOT have the 'Blanks'/'NonBlanks' predicates
         const predicateDefs = api.filterApi.columnFilterApi
             .getFilterPredicateDefsForColumn(column)
             .filter((predDef) => {
@@ -38,7 +37,6 @@ const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOver
         ? (0, utils_1.mapColumnFilterToQlPredicate)(columnFilter, column, qlPredicateDefs, columnFilterOptions, filterComponent, api)
         : null;
     const handleOnChange = (adaptablePredicate, logic = 'AND') => {
-        // make sure we always have the latest columnFiler
         const columnFilter = adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(columnId);
         const newFilter = {
             ...columnFilter,
@@ -56,9 +54,6 @@ const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOver
         }
     };
     const handleClear = React.useCallback(() => dispatch(LayoutRedux.LayoutColumnFilterClear(columnId)), [columnId]);
-    /**
-     * Converts a QlPredicate to an AdaptablePredicate and dispatches the change.
-     */
     const handlePredicateChange = React.useCallback((newPredicate) => {
         if (!newPredicate) {
             handleClear();

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

@@ -5,9 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Icon_1 = require("../../../components/Icon");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const mapAdaptablePredicateDefToQlPredicateDef = (adaptablePredicateDef, 
-// used to determine values type
-dataType) => {
+const mapAdaptablePredicateDefToQlPredicateDef = (adaptablePredicateDef, dataType) => {
     let icon = null;
     if ((0, Icon_1.isAdaptableIcon)(adaptablePredicateDef.icon)) {
         icon = react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: adaptablePredicateDef.icon });
@@ -20,11 +18,9 @@ dataType) => {
     });
     if (adaptablePredicateDef.id === 'In' || adaptablePredicateDef.id === 'NotIn') {
         if (['text', 'number', 'date'].includes(dataType)) {
-            // add array type
             inputs.push(`${dataType}[]`);
         }
         if (['text[]', 'number[]'].includes(dataType)) {
-            // add array type
             inputs.push(dataType);
         }
     }
@@ -43,7 +39,7 @@ dataType) => {
 exports.mapAdaptablePredicateDefToQlPredicateDef = mapAdaptablePredicateDefToQlPredicateDef;
 const mapAdaptablePredicateToQlPredicate = (adaptablePredicate) => {
     return {
-        operator: adaptablePredicate.PredicateId, // make sure all predicates are in qal
+        operator: adaptablePredicate.PredicateId,
         args: adaptablePredicate.Inputs,
     };
 };
@@ -59,7 +55,6 @@ const qlPredicateToString = (qlPredicate, predicateDefs) => {
     if (typeof qlPredicate === 'object' &&
         'operator' in qlPredicate &&
         (qlPredicate.operator === 'AND' || qlPredicate.operator === 'OR')) {
-        // save to join args because there is no extra nesting
         return qlPredicate.args
             .filter((str) => str)
             .map((arg) => (0, exports.qlPredicateToString)(arg, predicateDefs))
@@ -98,7 +93,6 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
         args: (columnFilter?.Predicates ?? []).map?.(exports.mapAdaptablePredicateToQlPredicate),
     };
     if (qlPredicate.args.length === 0) {
-        // used when none is defined
         let defaultQlPredicate = null;
         switch (abColumn.dataType) {
             case 'number':
@@ -187,7 +181,6 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
                 break;
         }
         if (defaultQlPredicate === null) {
-            // take the firstavailable one
             if (qlPredicateDefs.length > 0) {
                 defaultQlPredicate = { operator: qlPredicateDefs[0].operator, args: [] };
             }

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -39,7 +39,6 @@ const EntityRulePredicateEditor = (props) => {
             });
         }
         else {
-            // no previous predicate, e.g. it was cleared
             newPredicates = [newPredicateDef];
         }
         props.onChange({
@@ -65,7 +64,6 @@ const EntityRulePredicateEditor = (props) => {
         label: col.label,
         value: col.value,
     }));
-    // use global scope or custom scope
     let predicateColumnId = null;
     if (predicate?.ColumnId && predicate.ColumnId !== '') {
         predicateColumnId = predicate.ColumnId;

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicatesEditor.js

@@ -18,7 +18,6 @@ const EntityRulePredicatesEditor = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const columnPredicateEnabled = props.data.Rule.Predicates.some((predicate) => predicate.ColumnId !== undefined);
-    // filter out predicates that are already in use
     const defaultPredicateDefs = props.predicateDefs.filter((predicateDef) => {
         return props.data.Rule?.Predicates?.every((rulePrediate) => rulePrediate.PredicateId !== predicateDef.id);
     });

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

@@ -18,7 +18,6 @@ const QueryTab = (props) => {
     const text = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [label, " ", (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "query" })] }));
     return ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps, children: !disabled && props.showRadio ? ((0, jsx_runtime_1.jsx)(Radio_1.default, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value, children: text })) : (text) }));
 };
-// needed here to be considered a child Tab component, inside the Tabs component
 Tabs_1.SupportedTabMenuComps.add(QueryTab);
 const EntityRulesSummary = (props) => {
     const { data } = props;
@@ -29,16 +28,7 @@ const EntityRulesSummary = (props) => {
         !data?.Rule?.AggregatedBooleanExpression) {
         return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "No Rule defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(
-        Flex_1.Box,
-        { className: "twa:text-2", children: data.Rule.Predicates ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (
-                // predicate id is not unique
-                ((0, jsx_runtime_1.jsx)(
-                    React.Fragment,
-                    { children: props.renderPredicate(predicateApi.predicateToString(predicate)) },
-                    index
-                )))) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }
-    ));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: data.Rule.Predicates ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => ((0, jsx_runtime_1.jsx)(React.Fragment, { children: props.renderPredicate(predicateApi.predicateToString(predicate)) }, index))) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const RuleTabTitle = (props) => {

package/src/View/Components/ExternalRenderer.js

@@ -33,9 +33,7 @@ const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', o
             }
             else if (frameworkComponent) {
                 onDestroy?.();
-                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
-                // @ts-ignore
-                componentName);
+                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, componentName);
             }
         };
     }, []);

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -16,7 +16,6 @@ const columnFilterLocation_1 = require("../ColumnFilter/columnFilterLocation");
 const AdaptableColumnFilter_1 = require("../ColumnFilter/AdaptableColumnFilter");
 const TreeDropdown_2 = require("../../../components/Tree/TreeDropdown");
 const baseClassName = 'ab-ListBoxFilterForm';
-// used for displaying the date values in the input
 function toDateDisplayValue(values) {
     values = values.map((v) => {
         if (!Array.isArray(v)) {
@@ -27,20 +26,6 @@ function toDateDisplayValue(values) {
     return (0, TreeDropdown_1.toDisplayValueDefault)(values);
 }
 const dateOnChangeParser = (value) => {
-    /**
-     * the value looks like this:
-     * [
-     *  ["2021","2021-01","2021-01-01"],
-     *  ["2024","2024-02","2024-02-15T12:34:00"],
-     * ]
-     */
-    // so first need to transfor the above to this:
-    /**
-     * [
-     *  [2023, 12, 1, 1640668800000],
-     *  [2023, 12, 3, 1738377600000]
-     * ]
-     */
     return value.map((v) => {
         return v[v.length - 1];
     });
@@ -51,7 +36,6 @@ const ColumnValuesSelect = (props) => {
     const column = props.column;
     let selectedColumnValues = props.value || EMPTY_ARRAY;
     const rawOptionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
-    // Drop empty entries for all column types; Memoise them because Date cols can leak them when using `customInFilterValues` + `orderedValues`
     const optionsFromProps = (0, react_1.useMemo)(() => {
         if (rawOptionsFromProps === EMPTY_ARRAY) {
             return rawOptionsFromProps;
@@ -69,20 +53,6 @@ const ColumnValuesSelect = (props) => {
         return rawOptionsFromProps.filter((option) => !StringExtensions_1.StringExtensions.IsNullOrEmpty(option?.value));
     }, [rawOptionsFromProps]);
     const value = [];
-    // For `customInFilterValues` + `orderedValues` on a date column, the
-    // options arrive with raw `Date` objects as `value`. `GridFilterTreeDropdown`
-    // round-trips path keys via `JSON.stringify`/`JSON.parse`, which converts
-    // `Date` -> ISO string. The stored selection paths therefore become
-    // strings while the option/treePath values are still `Date` references —
-    // and `TreeSelectionState`'s internal DeepMap uses strict reference
-    // equality, so a clicked item never matches its tree path on the next
-    // render (no checkbox, click looks like a no-op).
-    //
-    // Normalise `Date` option values to ISO strings up front so every layer
-    // (treePaths, items, selectionMap, value, onChange output) speaks the
-    // same primitive. Tree-shaped date options (the default-values flow) use
-    // string values like "2024" / "2024-01" / "2024-01-01" already and pass
-    // through unchanged.
     const dateOptions = (0, react_1.useMemo)(() => {
         if (column.dataType !== 'date') {
             return optionsFromProps;
@@ -101,14 +71,6 @@ const ColumnValuesSelect = (props) => {
         return optionsFromProps.map(convert);
     }, [column.dataType, optionsFromProps]);
     if (column.dataType === 'date') {
-        // we might have a use-case where users might want to get rid of a tree level
-        // because it may contain only one child. currently,
-        // the value is an array of strings that have this form (ISOish)
-        // ["2021-01-01", "2021-10-02", "2021-01-03T12:00:00"]
-        // but we want the full path to each value
-        // but we can't compute that by simply splitting the strings by '-' or 'T',
-        // as if we do that, then we won't support removing a tree level
-        // so we have to compute the paths based on the options
         const valueToPath = (0, react_1.useMemo)(() => {
             const valueToPath = new Map();
             const withOption = (option, parentPath = []) => {
@@ -123,9 +85,6 @@ const ColumnValuesSelect = (props) => {
         }, [dateOptions]);
         selectedColumnValues = selectedColumnValues
             .map((v) => {
-            // Saved selections may be raw `Date` objects from older
-            // `orderedValues` snapshots; coerce to the same ISO string we use
-            // for option keys so the lookup still hits.
             const key = v instanceof Date ? v.toISOString() : v;
             return valueToPath.get(key);
         })
@@ -135,7 +94,6 @@ const ColumnValuesSelect = (props) => {
         ? dateOptions
         : optionsFromProps.filter((distinctValue) => {
             let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
-            // special case for date objects, need to check against string values
             if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
                 isActive = selectedColumnValues.some((dateStr) => (0, date_fns_1.isEqual)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
             }
@@ -163,23 +121,14 @@ const ColumnValuesSelect = (props) => {
         : undefined;
     const component = column.dataType === 'date' || column.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN ? ((0, jsx_runtime_1.jsx)(TreeDropdown_2.GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, resizable: true, onValueChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
-            : props.onChange, items: options, 
-        // for dates, the treeDateOptions have ids that are numbers
-        // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
+            : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
-                // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.
                 e.stopPropagation();
                 return;
             }
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {
-                // see #ensure-keyboard-navigation-works-in-column-values-filter
-                // we want to prevent ag grid from stopping the propagation of the event
-                // so that the event can be handled by the select component and thus makes keyboard navigation work
-                //
-                // the solution is to reassign the stopPropagation method to a function that does nothing
             };
         }, children: component }));
 };

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

@@ -32,8 +32,6 @@ const ModuleValueSelector = (props) => {
         return ArrayExtensions_1.default.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
     const moduleFilter = (0, react_1.useCallback)((module, searchText) => {
-        // the module name is camelCased so I want to split it
-        // so we can also use spaces in the search text
         const parts = module.split(/(?=[A-Z])/);
         const withSpaces = parts.join(' ');
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||

package/src/View/Components/Panels/PanelWithImage.js

@@ -9,9 +9,6 @@ const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const twMerge_1 = require("../../../twMerge");
 const Flex_1 = require("../../../components/Flex");
-//We cannot destructure this.props using the react way in typescript which is a real pain as you
-//need to transfer props individually as a consequence
-//let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
         const IconCmp = icons_1.allIcons[(this.props.icon || this.props.glyphicon)];
@@ -20,8 +17,7 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? (0, jsx_runtime_1.jsx)(IconCmp, {}) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2" }), this.props.header ?? '', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
+        let headerRow = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? (0, jsx_runtime_1.jsx)(IconCmp, {}) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2" }), this.props.header ?? '', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank') }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
         return ((0, jsx_runtime_1.jsx)(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: (0, twMerge_1.twMerge)('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
                 className: (0, twMerge_1.twMerge)('twa:p-0', this.props.bodyProps?.className),

package/src/View/Components/Panels/PanelWithRow.js

@@ -6,9 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Flex_1 = require("../../../components/Flex");
-// We cannot destructure this.props using the react way in typescript which is a real pain as you
-// need to transfer props individually as a consequence
-// let { buttonContent, ...other } = this.props
 class PanelWithRow extends React.Component {
     render() {
         const headerItems = this.props.colItems.map((colItem, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-bold twa:text-3 twa:px-1", style: {

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -25,11 +25,6 @@ const AdaptablePopup = (props) => {
     const isWindowModal = settingsPanelOptions.popupType === 'window';
     const modalContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
-    /**
-     * This means that it is not rendered in the context of Settings Panel
-     * - no topbar
-     * - no navigation
-     */
     let isStandalone = false;
     let moduleViewContent = null;
     let activeItem = null;
@@ -38,7 +33,6 @@ const AdaptablePopup = (props) => {
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
-    // ts forces to check for General, there is no menu item General
     const useFirstItem = !props.componentName;
     if (useFirstItem &&
         firstMenuModule !== 'General' &&

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -18,7 +18,6 @@ const AdaptablePopupBody = (props) => {
                 props.onHide();
             }
         },
-        // show share button if TeamSharing is active & user has edit rights
         teamSharingActivated: props.api.teamSharingApi.isTeamSharingAvailable() &&
             props.api.teamSharingApi.hasTeamSharingFullRights(),
         modalContainer: modalContainer,
@@ -27,8 +26,6 @@ const AdaptablePopupBody = (props) => {
         moduleInfo,
     };
     const BodyComponent = AdaptableViewFactory_1.AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
-    // key is to make sure state is reset between views
-    // most of the views use the `AdaptablePopupModuleView` component
     return (0, jsx_runtime_1.jsx)(BodyComponent, { module: props.module, ...moduleProps }, props?.componentName);
 };
 exports.AdaptablePopupBody = AdaptablePopupBody;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -22,10 +22,6 @@ const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"))
 const Tabs_1 = require("../../../../components/Tabs");
 const DropdownButton_1 = require("../../../../components/DropdownButton");
 const AdaptablePopupModuleView = (props) => {
-    /**
-     * This triggers a render for each state change.
-     * NOT sure this is still needed... It is here for historical reasons.
-     */
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
     (0, react_1.useEffect)(() => {
@@ -70,8 +66,6 @@ const AdaptablePopupModuleView = (props) => {
         emptyContent = emptyView;
     }
     const toolTipText = moduleViewProperties.newTooltipText ?? `Create ${moduleInfo.FriendlyName}`;
-    // Some modules do not have new button
-    // e.g. filter
     let newButton = null;
     if (moduleViewProperties?.abObjectTypes?.length) {
         const items = moduleViewProperties?.abObjectTypes.map((abObjectType) => {

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -7,7 +7,6 @@ const Flex_1 = require("../../../../components/Flex");
 const utils_1 = require("../../../../lib/utils");
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__Header twa:flex`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }), (0, jsx_runtime_1.jsx)("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), props.button] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__Header twa:flex`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }), (0, jsx_runtime_1.jsx)("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank') }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), props.button] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };
 exports.PopupPanel = PopupPanel;

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -23,7 +23,6 @@ const useMenuItems = () => {
         const resolveNavigationItem = (moduleName) => {
             const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
             if (customSettingsPanel) {
-                // @ts-ignore custom settings panel menu items are not part of the standard menu name union
                 return {
                     category: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -23,7 +23,6 @@ const AdaptablePopupAlert = (props) => {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
     let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(messageType);
-    // we still need the defauld
     const defaultForm = React.useMemo(() => {
         return api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }, []);
@@ -55,8 +54,6 @@ const AdaptablePopupAlert = (props) => {
                             })
                             : msg] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:m-2", children: adaptableForm ? ((0, jsx_runtime_1.jsx)(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                             props.onClose();
-                            // we want to give the current popup time to close
-                            // and we reopen with a delay in case this button action causes another popup
                             setTimeout(() => {
                                 button.onClick?.(button, context);
                             }, 20);

package/src/View/Components/Popups/AdaptableToaster.js

@@ -7,8 +7,6 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
 const Toastify_1 = require("../../../components/Toastify");
 const showToast = (props) => {
-    // we're doing this hack and not simply using props.api in order not to have a memory
-    // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
         Toastify_1.toast.dismiss();

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -18,14 +18,8 @@ const NoopComponent = () => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
-/**
- * Portals children into a target container element.
- * Monitors the container with a MutationObserver — if the container is removed
- * from the DOM, `onContainerRemoved` is called so callers can clean up React/Redux state.
- */
 const ContainerPortal = ({ container, onContainerRemoved, children }) => {
     React.useEffect(() => {
-        // If the container is already detached, clean up immediately
         if (!document.contains(container)) {
             onContainerRemoved();
             return;
@@ -36,7 +30,6 @@ const ContainerPortal = ({ container, onContainerRemoved, children }) => {
                 observer.disconnect();
             }
         });
-        // Observe the entire document body for subtree removals
         observer.observe(document.body, { childList: true, subtree: true });
         return () => {
             observer.disconnect();
@@ -70,7 +63,6 @@ const WindowPopups = () => {
                 Component = Component ?? NoopComponent;
                 componentNode = ((0, jsx_runtime_1.jsx)(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
             }
-            // Transposed View: portal into custom container if configured
             if (windowItem.FactoryId === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
                 const transposedContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
                 if (transposedContainer) {