@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.0

package/src/components/Datepicker/index.js

@@ -15,7 +15,6 @@ import { Calendar } from '../ui/calendar';
 import { InputGroup, InputGroupAddon } from '../ui/input-group';
 import { SingleSelect } from '../NewSelect';
 import { targetOwn } from '../twUtils';
-// ── Caption dropdown components (month/year) ──────────────────────────
 const onCaptionKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
@@ -36,15 +35,10 @@ const captionComponents = {
     YearsDropdown: DatepickerYearsDropdown,
     MonthsDropdown: DatepickerMonthsDropdown,
 };
-// ── Main component ────────────────────────────────────────────────────
 const END_MONTH = endOfYear(addYears(new Date(), 10));
 const START_MONTH = startOfYear(addYears(new Date(), -50));
 export const Datepicker = React.forwardRef((props, ref) => {
-    const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, 
-    // openOnFocus,
-    onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange,
-    // ...boxProps
-     } = props;
+    const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange, } = props;
     void _value;
     void _defaultValue;
     void _onChange;
@@ -63,14 +57,11 @@ export const Datepicker = React.forwardRef((props, ref) => {
         setMonth(next ?? new Date());
     };
     const inputValue = DateFormatter(value, { Pattern: dateProps.format }) ?? '';
-    // ── DOM refs for focus ownership ────────────────────────────────
     const triggerRef = React.useRef(null);
     const popupRef = React.useRef(null);
     const isInsideDatepicker = React.useCallback((node) => {
         if (!node)
             return false;
-        // Focus often lands on `body` briefly when a focused control unmounts (month nav).
-        // Treat as "still in session" so we don't close before focus settles.
         if (node === document.body || node === document.documentElement) {
             return true;
         }
@@ -84,8 +75,6 @@ export const Datepicker = React.forwardRef((props, ref) => {
         if (root === node || root.contains(node)) {
             return true;
         }
-        // `popupRef` is on an inner div; Base UI may focus `PopoverPrimitive.Popup` / Positioner
-        // (ancestors of `root`). Those must still count as inside the datepicker.
         if (node instanceof Element && root instanceof Element) {
             let p = root.parentElement;
             while (p) {
@@ -97,7 +86,6 @@ export const Datepicker = React.forwardRef((props, ref) => {
         }
         return false;
     }, []);
-    // ── Open / close ──────────────────────────────────────────────────
     const [open, setOpen] = useState(false);
     const closedAtRef = React.useRef(0);
     const tabFromOverlayRef = React.useRef(false);
@@ -114,9 +102,6 @@ export const Datepicker = React.forwardRef((props, ref) => {
             onHide?.();
         }
     }, [datepickerContext, onHide]);
-    // Only honour explicit, unambiguous close reasons.
-    // focus-out / trigger-press are ignored — the document-level
-    // focusin listener below handles blur-to-close reliably.
     const handleOpenChange = React.useCallback((next, eventDetails) => {
         if (next) {
             setPopoverOpen(true);
@@ -132,14 +117,11 @@ export const Datepicker = React.forwardRef((props, ref) => {
             return;
         }
     }, [setPopoverOpen]);
-    // Close when focus moves to something truly outside the datepicker (e.g. Tab away).
     useEffect(() => {
         if (!open)
             return;
         const onFocusIn = (e) => {
             const target = e.target;
-            // When Tab was pressed inside the overlay and focus landed outside the
-            // popup (even on the trigger), close so the user can Tab away freely.
             if (tabFromOverlayRef.current) {
                 const popup = popupRef.current;
                 if (popup && target && !popup.contains(target) && popup !== target) {
@@ -156,8 +138,6 @@ export const Datepicker = React.forwardRef((props, ref) => {
         document.addEventListener('focusin', onFocusIn);
         return () => document.removeEventListener('focusin', onFocusIn);
     }, [open, isInsideDatepicker, setPopoverOpen]);
-    // Move focus into the overlay when it opens (portal + positioner need a frame to settle).
-    // Skip when autoFocus is set — the Calendar will focus a day cell itself.
     useLayoutEffect(() => {
         if (!open || disabled || autoFocus) {
             return;
@@ -167,7 +147,6 @@ export const Datepicker = React.forwardRef((props, ref) => {
         });
         return () => cancelAnimationFrame(id);
     }, [open, disabled, autoFocus]);
-    // ── Footer buttons ────────────────────────────────────────────────
     const clearValue = () => updateValue(undefined);
     const renderButton = (label, onClick) => (_jsx(SimpleButton, { onClick: onClick, className: "twa:m-[2px]", children: label }));
     const todayDate = new Date();
@@ -183,68 +162,23 @@ export const Datepicker = React.forwardRef((props, ref) => {
         '|': _jsx("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    // ── Inline buttons (clear / calendar icon) ────────────────────────
     const clearButton = showClearButton !== false ? (_jsx(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, className: "twa:p-0", icon: "close", onMouseDown: (e) => {
             e.preventDefault();
-            // e.stopPropagation();
             clearValue();
             console.log('onMouseDown', e);
         }, onClick: (e) => {
             console.log('onClick', e);
             e.stopPropagation();
-            // also clear on click, as the user may have "clicked" using enter
             clearValue();
-            // and focus the input
             triggerRef.current?.firstChild?.focus();
         }, accessLevel: ACCESS_LEVEL_FULL })) : null;
     const calendarButton = (_jsx(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" }));
-    // ── Select-portal container (so month/year lists stay inside the popover) ──
     const [selectPortalRoot, setSelectPortalRoot] = React.useState(null);
-    // Stable callback ref — avoids cleanup/re-call cycle that briefly nullifies popupRef.
     const popupRefCallback = React.useCallback((el) => {
         popupRef.current = el;
         setSelectPortalRoot(el);
     }, []);
-    // ── Render ────────────────────────────────────────────────────────
-    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { nativeButton: false, render: 
-                // <Flex
-                //   {...boxProps}
-                //   ref={triggerRef as React.Ref<HTMLDivElement>}
-                //   flexDirection="row"
-                //   alignItems="center"
-                //   style={{
-                //     borderRadius: style?.borderRadius,
-                //     width: style?.width,
-                //     maxWidth: style?.maxWidth,
-                //     border: style?.border,
-                //   }}
-                //   className={cn(
-                //     'ab-Datepicker twa:focus-visible:outline-none twa:rounded-standard',
-                //     // targetOwn.focusWithinOutline,
-                //     // targetChildren.focusWithinOutline,
-                //     className
-                //   )}
-                //   // onMouseDown={() => {
-                //   //   closedByTabOutRef.current = false;
-                //   // }}
-                //   // onFocusCapture={() => {
-                //   //   if (closedByTabOutRef.current) {
-                //   //     return;
-                //   //   }
-                //   //   if (!open && Date.now() - closedAtRef.current > 200) {
-                //   //     setPopoverOpen(true);
-                //   //   }
-                //   // }}
-                //   // onBlurCapture={(e: React.FocusEvent) => {
-                //   //   if (closedByTabOutRef.current) {
-                //   //     const related = e.relatedTarget as Node | null;
-                //   //     if (!triggerRef.current?.contains(related)) {
-                //   //       closedByTabOutRef.current = false;
-                //   //     }
-                //   //   }
-                //   // }}
-                // />
-                _jsxs(InputGroup, { ref: triggerRef, style: {
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { nativeButton: false, render: _jsxs(InputGroup, { ref: triggerRef, style: {
                         borderRadius: style?.borderRadius,
                         width: style?.width,
                         maxWidth: style?.maxWidth,
@@ -255,34 +189,5 @@ export const Datepicker = React.forwardRef((props, ref) => {
                                     updateValue(date);
                                 }
                             }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), _jsxs(InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), _jsx(PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 8, children: _jsx("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: cn('twa:relative twa:isolate twa:overflow-visible twa:outline-none twa:rounded-standard', targetOwn.focusWithinOutline), onKeyDown: () => {
-                        // console.log('onKeyDown', e.key);
-                        // return;
-                        // if (e.key === 'Tab') {
-                        //   tabFromOverlayRef.current = true;
-                        //   requestAnimationFrame(() => {
-                        //     tabFromOverlayRef.current = false;
-                        //   });
-                        // }
-                        // if (
-                        //   (e.key === 'Enter' || e.key === ' ') &&
-                        //   e.target instanceof HTMLElement &&
-                        //   e.target.tagName === 'BUTTON' &&
-                        //   e.target.closest('nav')
-                        // ) {
-                        //   const nav = e.target.closest('nav')!;
-                        //   const buttons = nav.querySelectorAll('button');
-                        //   const btnIndex = Array.from(buttons).indexOf(e.target as HTMLButtonElement);
-                        //   if (btnIndex >= 0) {
-                        //     requestAnimationFrame(() => {
-                        //       requestAnimationFrame(() => {
-                        //         const popup = popupRef.current;
-                        //         if (!popup) return;
-                        //         const newNav = popup.querySelector('nav');
-                        //         const newBtn = newNav?.querySelectorAll('button')[btnIndex];
-                        //         (newBtn as HTMLElement | undefined)?.focus({ preventScroll: true });
-                        //       });
-                        //     });
-                        //   }
-                        // }
                     }, children: _jsx(DatepickerSelectPortalContext.Provider, { value: selectPortalRoot, children: _jsx(Calendar, { fixedWeeks: true, autoFocus: !!autoFocus, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: month && !isNaN(month.getTime()) ? month : new Date(), selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, locale: dateProps.locale, components: captionComponents, footer: _jsx(Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap', children: footerButtons }) }) }) }) })] }));
 });

package/src/components/DragAndDropContext/TabList.js

@@ -62,9 +62,7 @@ export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove,
         });
         return sources;
     }, [dragScope, unusedListIds, tabIndex, tabs]);
-    return (_jsx(DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: defaultDragProxyMove, 
-        // this is called when reordering inside the same list
-        onDrop: (sortedIndexes) => {
+    return (_jsx(DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
             onTabsChange(tabs.map((t, i) => (i === tabIndex ? { ...t, Items: newItems } : t)));
         }, shouldAcceptDrop: ({ dragItem, dragSourceListId }) => {
@@ -74,9 +72,7 @@ export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove,
                 return true;
             }
             return !toolbars.includes(toolbarId);
-        }, 
-        // this is called when dropping an item from a different list
-        onAcceptDrop: ({ dragItemId, dropIndex }) => {
+        }, onAcceptDrop: ({ dragItemId, dropIndex }) => {
             const toolbarId = unscopeDragId(dragItemId);
             onTabsChange(tabs.map((tab, i) => {
                 if (i !== tabIndex || tab.Items.includes(toolbarId)) {

package/src/components/Drawer/index.js

@@ -6,24 +6,17 @@ export const Drawer = (props) => {
     });
     const [show, setShow] = React.useState(props.open);
     React.useEffect(() => {
-        // CLOSED -> OPEN
-        // SHOW Element, with closed class
-        // CHANGE class to opened
         if (!isOpen && props.open) {
             setShow(true);
             requestAnimationFrame(() => {
                 setIsOpen(true);
             });
         }
-        // OPEN -> CLOSED
-        // CHANGE class to closed
-        // HIDE Element, when animation is finsihed
         if (isOpen && !props.open) {
             setIsOpen(false);
         }
     }, [props.open]);
     const handleOnKeyDown = React.useCallback((event) => {
-        // escape
         if (event.key === 'Escape') {
             props.onOpenChange?.(false);
         }

package/src/components/Dropdown/index.js

@@ -76,7 +76,6 @@ const Dropdown = (props) => {
     if (!selectedOption) {
         selectedText = placeholder;
     }
-    //20  ... 20 16
     const renderClearButton = () => (_jsx(SimpleButton, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: twMerge('twa:p-0 twa:mr-1 twa:z-10 twa:color-inherit', clearButtonProps?.className), style: {
             ...(clearButtonProps ? clearButtonProps.style : null),
         }, onClick: (e) => {

package/src/components/DropdownButton/index.js

@@ -17,7 +17,6 @@ export const NewDropdownButton = React.forwardRef((props, ref) => {
             ? item.tooltip.length
             : 0), 0);
     return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
-                    // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,
                     width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
                 }, children: items.map((item, index) => {
                     if (item.separator) {

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -67,7 +67,6 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
     const groupedFunctions = React.useMemo(() => {
         return Object.keys(expressionFunctions).reduce((acc, key) => {
             const functionDef = expressionFunctions[key];
-            // filter
             if (currentFunctionCategory !== 'all' && functionDef.category !== currentFunctionCategory) {
                 return acc;
             }
@@ -111,11 +110,6 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
         setOverFunction(null);
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
-    /**
-     * Hide when:
-     * - mouse leaves
-     * - a function is inserted
-     */
     return (_jsx(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (_jsxs(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [_jsx(Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
                         return (_jsx(Radio, { onFocus: (event) => {
                                 event.preventDefault();
@@ -129,7 +123,6 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return _jsx(React.Fragment, {}, groupName);
                                         }
                                         const getEditorButtonData = (functionName) => {
-                                            // handle special cases
                                             if (functionName === 'CASE') {
                                                 return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
                                             }
@@ -176,24 +169,20 @@ export function BaseEditorInput(props) {
         if (!firstRowNode || !firstRowNode.data) {
             return {};
         }
-        // clone the class instance to still keep the prototype methods
         return Object.assign(Object.create(Object.getPrototypeOf(firstRowNode)), firstRowNode);
     }, []);
     const scopeColumnId = useMemo(() => {
         return props.api.columnScopeApi.getAnyColumnIdForScope(props.columnScope);
     }, [props.columnScope]);
     try {
-        // explicitly parsing & evaluating the expression because we need full control of the resulted AST
         const expr = parser.parse(props.value || '');
         try {
             testRowNode.data = testData;
-            // Mock datachangedevent for change-based functions e.g. PERCENT_CHANGE
             const dataChangedEvent = {
                 newValue: 100,
                 oldValue: 150,
             };
             result = expr.evaluate({
-                // we need a fully-fledged rowNode as Adaptable accesses internal methods of it
                 node: testRowNode,
                 functions: expressionFunctions,
                 evaluateCustomQueryVariable: props.api.internalApi.getQueryLanguageService().evaluateCustomQueryVariable,
@@ -207,7 +196,6 @@ export function BaseEditorInput(props) {
                 evaluationError = err;
             }
             else {
-                // unexpected error, pass it on to the enclosing handler
                 throw err;
             }
         }
@@ -215,7 +203,6 @@ export function BaseEditorInput(props) {
         selectedFunctionName = path[0] ? path[0].type : null;
     }
     catch (e) {
-        // parse errors should have a hash, otherwise it's an unexpected runtime error
         const isParserException = !!e.hash;
         if (isParserException) {
             expressionError = buildParserExceptionMessage(e);
@@ -226,7 +213,6 @@ export function BaseEditorInput(props) {
         }
     }
     useEffect(() => {
-        // update selected function only for focused textareas (where cursor is present)
         if (cursor != undefined) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
@@ -235,8 +221,7 @@ export function BaseEditorInput(props) {
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
         .map((editorButtonDef) => (_jsx(EditorButton, { data: editorButtonDef.data, icon: editorButtonDef.icon, children: !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName) }, `${editorButtonDef.functionName}-operator`)));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full`, children: [_jsxs(Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap", children: [_jsx(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }), operatorButtons] }), showDocumentationLink && (_jsx(Flex, { alignItems: "flex-start", children: _jsx(ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(ExpressionEditorDocsLink, '_blank') }) }))] }), _jsx(Textarea, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: join('ab-ExpressionEditor__textarea', // left for backwards compatibility
-                `${baseClassName}__textarea`, 'twa:w-full twa:min-h-[100px] twa:p-2 twa:text-4 twa:resize-y twa:font-mono'), autoFocus: true, spellCheck: "false", onChange: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full`, children: [_jsxs(Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap", children: [_jsx(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }), operatorButtons] }), showDocumentationLink && (_jsx(Flex, { alignItems: "flex-start", children: _jsx(ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(ExpressionEditorDocsLink, '_blank') }) }))] }), _jsx(Textarea, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: join('ab-ExpressionEditor__textarea', `${baseClassName}__textarea`, 'twa:w-full twa:min-h-[100px] twa:p-2 twa:text-4 twa:resize-y twa:font-mono'), autoFocus: true, spellCheck: "false", onChange: (event) => {
                     props.onChange(event.target.value);
                 }, style: style }), props.isFullExpression !== true && (_jsxs(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3", children: ["This Expression must resolve to a ", _jsx("b", { children: "boolean " }), "(i.e. true / false) value"] })), expressionError && (_jsx(ErrorBox, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full", children: expressionError })), evaluationError && (_jsx(ErrorBox, { className: "twa:mt-2 twa:whitespace-pre-wrap", children: `${evaluationError.expressionFnName} ${evaluationError.message}` })), !props.hideResultPreview && result !== undefined && (_jsx(Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback", children: _jsxs("pre", { className: "twa:whitespace-pre-wrap twa:m-0", children: ["Result (using test data):", ' ', _jsx("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2", children: JSON.stringify(result) })] }) }))] }));
 }

package/src/components/ExpressionEditor/EditorButton.js

@@ -8,7 +8,6 @@ function EditorButton(props) {
     const { textAreaRef } = useExpressionEditor();
     return (_jsx(SimpleButton, { "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
             if (!dragImage) {
-                // we want to lazy init the image since otherwise it fails in SSR environments if it is declared outside the cmp - ReferenceError: Image is not defined
                 dragImage = new Image(0, 0);
                 dragImage.src = DRAG_IMAGE_SRC;
             }

package/src/components/ExpressionEditor/EditorInput.js

@@ -15,15 +15,10 @@ function EditorInput(props) {
         let filteredCollection = [];
         if (type === 'aggregatedScalar') {
             const excludeSet = new Set([
-                // we cannot have a hardcodede set of functions,
-                // we need to allow custom expressions
                 ...cumulativeAggregatedExpressionFunctions,
                 ...quantileAggregatedExpressionFunctions,
             ]);
-            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => 
-            //  need to allow standard ones
-            cumulativeAggregatedExpressionFunctions.includes(key) ||
-                // and anything else that is not cumul or quantile
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => cumulativeAggregatedExpressionFunctions.includes(key) ||
                 !excludeSet.has(key));
         }
         else {
@@ -48,7 +43,6 @@ function EditorInput(props) {
             ...moduleExpressionFunctions.scalarFunctions,
         };
         if (!props.columnScope) {
-            // filter out $SCOPE function if no columnScope is provided
             booleanAndScalarFunctions = Object.keys(booleanAndScalarFunctions)
                 .filter((key) => key !== '$SCOPE')
                 .reduce((obj, key) => {

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -48,7 +48,6 @@ function EditorInputWithWhereClause(props) {
     return (_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", children: [_jsx(BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable : editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }), _jsxs(Box, { className: "twa:text-2 twa:mt-2 twa:pl-3", children: ["Add a ", _jsx("i", { children: "WHERE" }), " Clause to narrow the scope of the Query"] }), _jsx(CheckBox, { disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, onChange: (checked) => {
                     setShowWhereClause(checked);
                     if (!checked) {
-                        // reset whereClause value if textarea is hidden
                         updateWhereClauseValue(null);
                     }
                 }, className: "twa:pl-3 twa:items-center", children: "WHERE" }), showWhereClause && (_jsx(BaseEditorInput, { type: 'secondary', disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))] }));

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -8,19 +8,9 @@ export const ExpressionPreview = (props) => {
         return _jsx(_Fragment, { children: adaptableApi.expressionApi.getAdaptableQueryExpression(props.query) });
     }
     const expressionWithFriendlyNames = adaptableApi.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
-    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
-    // not the prettiest
     const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
-    return (
-        /**
-         * The etra wrapper is neede because the tag has display inline-flex and makes the content inside <i> to be displayed on
-         * multiple lines when the expression is too long.
-         *
-         * The div allows the text to flow normally.
-         */
-        (_jsx("div", { children: strWithMarkedGroupes.map((part, index) => {
-                const partEl = part.includes('[') ? _jsx("i", { children: part.replace(/[\[\]]/g, '') }) : part;
-                return _jsx(React.Fragment, { children: partEl }, index);
-            }) }))
-    );
+    return (_jsx("div", { children: strWithMarkedGroupes.map((part, index) => {
+            const partEl = part.includes('[') ? _jsx("i", { children: part.replace(/[\[\]]/g, '') }) : part;
+            return _jsx(React.Fragment, { children: partEl }, index);
+        }) }));
 };

package/src/components/ExpressionEditor/NamedQueryContext.js

@@ -2,7 +2,6 @@ import { createContext, useContext } from 'react';
 export const NamedQueryContext = createContext({
     namedQuery: false,
     setNamedQuery: () => { },
-    //  hasValidNamedQueryName: () => false,
 });
 export const useNamedQueryContext = () => {
     return useContext(NamedQueryContext);

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -18,10 +18,7 @@ import { SingleSelect } from '../../NewSelect';
 export const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = useAdaptable();
     const [type, setType] = React.useState(() => {
-        return (
-            // default to column
-            (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field')
-        );
+        return (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field');
     });
     const hasFields = React.useMemo(() => {
         return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
@@ -73,7 +70,6 @@ export const PrimitiveValueInput = (props) => {
     });
     const handleTypeChange = (newType) => {
         if (type !== newType) {
-            // need to reset value
             props.onChange(undefined);
             setType(newType);
         }
@@ -100,7 +96,6 @@ export const PrimitiveValueInput = (props) => {
                         props.onChange(event.target.value);
                     } }));
             case 'date':
-                // date format = 'DATE(2020-01-01)'
                 const dateStr = typeof props.value === 'string' ? props.value.replace('DATE(', '').replace(')', '') : '';
                 return (_jsx(AdaptableInput, { ...common, type: "date", value: dateStr ?? '', onChange: (event) => {
                         const stringified = `DATE("${event.target.value}")`;

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -53,7 +53,6 @@ const LogicalFunctionEditor = (props) => {
                                         if (typeof arg === 'object' &&
                                             'operator' in arg &&
                                             isQlLogicalOperator(arg.operator)) {
-                                            // add as a child
                                             const newArg = {
                                                 ...arg,
                                                 args: [...arg.args, newPredicate],
@@ -66,7 +65,6 @@ const LogicalFunctionEditor = (props) => {
                                             });
                                         }
                                         else {
-                                            // add as a sibling
                                             const prevArgs = [...props.predicate.args];
                                             prevArgs.splice(index + 1, 0, newPredicate);
                                             props.onChange({
@@ -171,16 +169,6 @@ const PrimitiveFunctionEditor = (props) => {
                                 }) })] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(QueryPredicateButtons, { ...props })] }));
         } }));
 };
-/**
- * Two types:
- * - combinatory operator
- * - can contain both expressons and combinators
- * [handle] [combinator-dropdown]
- *   [children]
- *
- * - boolean function: ars do not contain other combinators
- * [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
- */
 export const QueryPredicateBuilder = (props) => {
     if (isQlLogicalOperator(props.predicate.operator)) {
         return _jsx(LogicalFunctionEditor, { ...props });

package/src/components/ExpressionEditor/QueryBuilder/utils.js

@@ -5,11 +5,8 @@ import { deepClone } from '../../../Utilities/Extensions/ObjectExtensions';
 import { booleanExpressionsAvailableInQueryBuilder } from './booleanExpressions';
 export const reorder = (predicate, from, to) => {
     const predicateCopy = deepClone(predicate);
-    // we start from the root so no need to traverse first level
     const [_, ...fromPath] = from.split('/');
     const [__, ...toPath] = to.split('/');
-    // remove from old position and get the item
-    // path = '0/1/2'
     let itemToMove = predicateCopy;
     let prev = null;
     for (const index of fromPath) {
@@ -17,7 +14,6 @@ export const reorder = (predicate, from, to) => {
         itemToMove = itemToMove.args[parseInt(index)];
     }
     prev.args.splice(parseInt(fromPath[fromPath.length - 1]), 1);
-    // find the parent into wich we want to insert the item
     let cursor = predicateCopy;
     let parent = null;
     for (const index of toPath) {

package/src/components/ExpressionEditor/index.js

@@ -31,22 +31,15 @@ export function ExpressionEditor(props) {
     const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (_jsx(EditorInputWithWhereClause, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
-        }, testData: props.initialData, api: props.api })) : (
-    // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
-    (_jsx(
-        EditorInput,
-        { type: type, module: module, columnScope: props.columnScope, value: props.value, onChange: (value) => {
-                setExpressionText(value);
-                props.onChange(value);
-            }, testData: props.initialData, isFullExpression: props.isFullExpression, api: props.api }
-    )));
+        }, testData: props.initialData, api: props.api })) : (_jsx(EditorInput, { type: type, module: module, columnScope: props.columnScope, value: props.value, onChange: (value) => {
+            setExpressionText(value);
+            props.onChange(value);
+        }, testData: props.initialData, isFullExpression: props.isFullExpression, api: props.api }));
     const adaptableFields = props.api.expressionApi.internalApi.getAvailableFields();
-    // currently only boolean and scalar expressions support nested calculated columns (calc cols which reference other calc cols)
     const queryableColumns = type === 'scalar' || type === 'boolean' || type === 'aggregatedScalar'
         ? props.columns
         : props.columns.filter((c) => !c.isCalculatedColumn);
     const showDocumentationLinks = props.api.internalApi.isDocumentationLinksDisplayed();
-    // @Bogdan i did this to be sure but i think we can get rid of this as the button does the same (and better IMO)
     const showNamedQueryStuff = false;
     const queryDocumentationLink = queryDocumentationLinks[type];
     const saveAsNamedQueryElement = allowSaveNamedQuery &&
@@ -74,9 +67,7 @@ export function ExpressionEditor(props) {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
-            }, children: _jsxs(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [_jsxs(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (_jsx(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
-                            /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+            }, children: _jsxs(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [_jsxs(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (_jsx(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                                 label: column.friendlyName,
                                                 value: column.columnId,
                                                 dataType: column.dataType,

package/src/components/Icon/index.js

@@ -21,8 +21,6 @@ export const IconComponent = (props) => {
             }
             else {
                 htmlElement = icon.element;
-                // THe element neets to be cloned.
-                // when it is used in more than one plce the element is removed from the DOM
                 htmlElement = htmlElement.cloneNode(true);
             }
             divRef.current.insertAdjacentElement('afterend', htmlElement);

package/src/components/Input/NumberInput.js

@@ -2,28 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Input, { baseClassName } from './index';
 import join from '../utils/join';
-/**
- * This component allows - and empty values as intermediery values
- * it calls change only with valid numeric values
- */
 export const NumberInput = React.forwardRef((props, ref) => {
     const [value, setValue] = React.useState(() => {
-        // awlays controlled
         return props.value ?? '';
     });
     const handleChange = React.useCallback((event) => {
         const { value } = event.target;
         let newVal = Number(value);
         if (value === '-' || value === '') {
-            // we are saving invalid values so we allow values as empty string and '-'
-            // there is a validation that prevents the
             newVal = value;
-            // the value may be empty or negative
             setValue(value);
         }
         else if (!isNaN(newVal)) {
             setValue(value);
-            // only set when a valid numer
             props.onChange(newVal);
         }
     }, [props.onChange]);
@@ -32,7 +23,6 @@ export const NumberInput = React.forwardRef((props, ref) => {
     }, [props.value]);
     const handleBlur = React.useCallback((event) => {
         props?.onBlur?.(event);
-        // show the prop value
         if (value !== props.value) {
             setValue(props.value);
         }

package/src/components/Modal/Backdrop.js

@@ -38,7 +38,6 @@ export const updatePositionInStack = (id, data) => {
             ...data,
         };
     });
-    // sort pairs in ascending order
     pairs.sort((p1, p2) => p1.timestamp - p2.timestamp);
     const last = pairs.pop();
     pairs.forEach((data) => {

package/src/components/OverlayTrigger/Overlay.js

@@ -45,7 +45,6 @@ const Overlay = React.forwardRef((props, ref) => {
         if (prevOpacity && !opacity) {
             timeoutId = setTimeout(() => {
                 if (renderTimeRef.current != renderTime) {
-                    //we had other renders, so dont do anything - bail out
                     return;
                 }
                 if (!visible) {