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

package/src/components/Datepicker/index.js

@@ -19,7 +19,6 @@ const calendar_1 = require("../ui/calendar");
 const input_group_1 = require("../ui/input-group");
 const NewSelect_1 = require("../NewSelect");
 const twUtils_1 = require("../twUtils");
-// ── Caption dropdown components (month/year) ──────────────────────────
 const onCaptionKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
@@ -40,15 +39,10 @@ const captionComponents = {
     YearsDropdown: DatepickerYearsDropdown,
     MonthsDropdown: DatepickerMonthsDropdown,
 };
-// ── Main component ────────────────────────────────────────────────────
 const END_MONTH = (0, date_fns_1.endOfYear)((0, date_fns_1.addYears)(new Date(), 10));
 const START_MONTH = (0, date_fns_1.startOfYear)((0, date_fns_1.addYears)(new Date(), -50));
 exports.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;
@@ -67,14 +61,11 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         setMonth(next ?? new Date());
     };
     const inputValue = (0, DisplayFormatHelper_1.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;
         }
@@ -88,8 +79,6 @@ exports.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) {
@@ -101,7 +90,6 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }
         return false;
     }, []);
-    // ── Open / close ──────────────────────────────────────────────────
     const [open, setOpen] = (0, react_1.useState)(false);
     const closedAtRef = React.useRef(0);
     const tabFromOverlayRef = React.useRef(false);
@@ -118,9 +106,6 @@ exports.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);
@@ -136,14 +121,11 @@ exports.Datepicker = React.forwardRef((props, ref) => {
             return;
         }
     }, [setPopoverOpen]);
-    // Close when focus moves to something truly outside the datepicker (e.g. Tab away).
     (0, react_1.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) {
@@ -160,8 +142,6 @@ exports.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.
     (0, react_1.useLayoutEffect)(() => {
         if (!open || disabled || autoFocus) {
             return;
@@ -171,7 +151,6 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         });
         return () => cancelAnimationFrame(id);
     }, [open, disabled, autoFocus]);
-    // ── Footer buttons ────────────────────────────────────────────────
     const clearValue = () => updateValue(undefined);
     const renderButton = (label, onClick) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: onClick, className: "twa:m-[2px]", children: label }));
     const todayDate = new Date();
@@ -187,68 +166,23 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         '|': (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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: GeneralConstants_1.ACCESS_LEVEL_FULL })) : null;
     const calendarButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsx)(popover_1.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;
-                //   //     }
-                //   //   }
-                //   // }}
-                // />
-                (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: triggerRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { nativeButton: false, render: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: triggerRef, style: {
                         borderRadius: style?.borderRadius,
                         width: style?.width,
                         maxWidth: style?.maxWidth,
@@ -259,34 +193,5 @@ exports.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 }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 8, children: (0, jsx_runtime_1.jsx)("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: (0, utils_1.cn)('twa:relative twa:isolate twa:overflow-visible twa:outline-none twa:rounded-standard', twUtils_1.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: (0, jsx_runtime_1.jsx)(DatepickerSelectPortalContext.Provider, { value: selectPortalRoot, children: (0, jsx_runtime_1.jsx)(calendar_1.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: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap', children: footerButtons }) }) }) }) })] }));
 });

package/src/components/DragAndDropContext/TabList.js

@@ -69,9 +69,7 @@ function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disable
         });
         return sources;
     }, [dragScope, unusedListIds, tabIndex, tabs]);
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: dnd_1.defaultDragProxyMove, 
-        // this is called when reordering inside the same list
-        onDrop: (sortedIndexes) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
             onTabsChange(tabs.map((t, i) => (i === tabIndex ? { ...t, Items: newItems } : t)));
         }, shouldAcceptDrop: ({ dragItem, dragSourceListId }) => {
@@ -81,9 +79,7 @@ function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disable
                 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 = (0, dragScope_1.unscopeDragId)(dragItemId);
             onTabsChange(tabs.map((tab, i) => {
                 if (i !== tabIndex || tab.Items.includes(toolbarId)) {

package/src/components/Drawer/index.js

@@ -10,24 +10,17 @@ 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

@@ -79,7 +79,6 @@ const Dropdown = (props) => {
     if (!selectedOption) {
         selectedText = placeholder;
     }
-    //20  ... 20 16
     const renderClearButton = () => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: (0, twMerge_1.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

@@ -21,7 +21,6 @@ exports.NewDropdownButton = React.forwardRef((props, ref) => {
             ? item.tooltip.length
             : 0), 0);
     return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [tooltip ? (0, jsx_runtime_1.jsx)(NewTooltip_1.NewTooltip, { label: tooltip, children: trigger }) : trigger, (0, jsx_runtime_1.jsx)(dropdown_menu_1.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

@@ -71,7 +71,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;
             }
@@ -115,11 +114,6 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
         setOverFunction(null);
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
-    /**
-     * Hide when:
-     * - mouse leaves
-     * - a function is inserted
-     */
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(Radio_1.default, { onFocus: (event) => {
                                 event.preventDefault();
@@ -133,7 +127,6 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return (0, jsx_runtime_1.jsx)(React.Fragment, {}, groupName);
                                         }
                                         const getEditorButtonData = (functionName) => {
-                                            // handle special cases
                                             if (functionName === 'CASE') {
                                                 return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
                                             }
@@ -180,24 +173,20 @@ 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 = (0, react_1.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,
@@ -211,7 +200,6 @@ function BaseEditorInput(props) {
                 evaluationError = err;
             }
             else {
-                // unexpected error, pass it on to the enclosing handler
                 throw err;
             }
         }
@@ -219,7 +207,6 @@ 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);
@@ -230,7 +217,6 @@ function BaseEditorInput(props) {
         }
     }
     (0, react_1.useEffect)(() => {
-        // update selected function only for focused textareas (where cursor is present)
         if (cursor != undefined) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
@@ -239,8 +225,7 @@ function BaseEditorInput(props) {
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
         .map((editorButtonDef) => ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: editorButtonDef.data, icon: editorButtonDef.icon, children: !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName) }, `${editorButtonDef.functionName}-operator`)));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }), operatorButtons] }), showDocumentationLink && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') }) }))] }), (0, jsx_runtime_1.jsx)(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }), operatorButtons] }), showDocumentationLink && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') }) }))] }), (0, jsx_runtime_1.jsx)(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('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 && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3", children: ["This Expression must resolve to a ", (0, jsx_runtime_1.jsx)("b", { children: "boolean " }), "(i.e. true / false) value"] })), expressionError && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full", children: expressionError })), evaluationError && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap", children: `${evaluationError.expressionFnName} ${evaluationError.message}` })), !props.hideResultPreview && result !== undefined && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback", children: (0, jsx_runtime_1.jsxs)("pre", { className: "twa:whitespace-pre-wrap twa:m-0", children: ["Result (using test data):", ' ', (0, jsx_runtime_1.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

@@ -11,7 +11,6 @@ function EditorButton(props) {
     const { textAreaRef } = (0, EditorContext_1.useExpressionEditor)();
     return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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

@@ -17,15 +17,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
                 ...aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions,
                 ...aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions,
             ]);
-            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => 
-            //  need to allow standard ones
-            aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions.includes(key) ||
-                // and anything else that is not cumul or quantile
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions.includes(key) ||
                 !excludeSet.has(key));
         }
         else {
@@ -50,7 +45,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

@@ -51,7 +51,6 @@ function EditorInputWithWhereClause(props) {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", children: [(0, jsx_runtime_1.jsx)(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:mt-2 twa:pl-3", children: ["Add a ", (0, jsx_runtime_1.jsx)("i", { children: "WHERE" }), " Clause to narrow the scope of the Query"] }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: (0, StringExtensions_1.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 && ((0, jsx_runtime_1.jsx)(BaseEditorInput_1.BaseEditorInput, { type: 'secondary', disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))] }));

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -12,20 +12,10 @@ const ExpressionPreview = (props) => {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.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.
-         */
-        ((0, jsx_runtime_1.jsx)("div", { children: strWithMarkedGroupes.map((part, index) => {
-                const partEl = part.includes('[') ? (0, jsx_runtime_1.jsx)("i", { children: part.replace(/[\[\]]/g, '') }) : part;
-                return (0, jsx_runtime_1.jsx)(React.Fragment, { children: partEl }, index);
-            }) }))
-    );
+    return ((0, jsx_runtime_1.jsx)("div", { children: strWithMarkedGroupes.map((part, index) => {
+            const partEl = part.includes('[') ? (0, jsx_runtime_1.jsx)("i", { children: part.replace(/[\[\]]/g, '') }) : part;
+            return (0, jsx_runtime_1.jsx)(React.Fragment, { children: partEl }, index);
+        }) }));
 };
 exports.ExpressionPreview = ExpressionPreview;

package/src/components/ExpressionEditor/NamedQueryContext.js

@@ -5,7 +5,6 @@ const react_1 = require("react");
 exports.NamedQueryContext = (0, react_1.createContext)({
     namedQuery: false,
     setNamedQuery: () => { },
-    //  hasValidNamedQueryName: () => false,
 });
 const useNamedQueryContext = () => {
     return (0, react_1.useContext)(exports.NamedQueryContext);

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

@@ -22,10 +22,7 @@ const NewSelect_1 = require("../../NewSelect");
 const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [type, setType] = react_1.default.useState(() => {
-        return (
-            // default to column
-            (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field')
-        );
+        return (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field');
     });
     const hasFields = react_1.default.useMemo(() => {
         return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
@@ -78,7 +75,6 @@ const PrimitiveValueInput = (props) => {
     });
     const handleTypeChange = (newType) => {
         if (type !== newType) {
-            // need to reset value
             props.onChange(undefined);
             setType(newType);
         }
@@ -105,7 +101,6 @@ 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 ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { ...common, type: "date", value: dateStr ?? '', onChange: (event) => {
                         const stringified = `DATE("${event.target.value}")`;

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

@@ -57,7 +57,6 @@ const LogicalFunctionEditor = (props) => {
                                         if (typeof arg === 'object' &&
                                             'operator' in arg &&
                                             (0, predicate_1.isQlLogicalOperator)(arg.operator)) {
-                                            // add as a child
                                             const newArg = {
                                                 ...arg,
                                                 args: [...arg.args, newPredicate],
@@ -70,7 +69,6 @@ const LogicalFunctionEditor = (props) => {
                                             });
                                         }
                                         else {
-                                            // add as a sibling
                                             const prevArgs = [...props.predicate.args];
                                             prevArgs.splice(index + 1, 0, newPredicate);
                                             props.onChange({
@@ -175,16 +173,6 @@ const PrimitiveFunctionEditor = (props) => {
                                 }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_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]
- */
 const QueryPredicateBuilder = (props) => {
     if ((0, predicate_1.isQlLogicalOperator)(props.predicate.operator)) {
         return (0, jsx_runtime_1.jsx)(LogicalFunctionEditor, { ...props });

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

@@ -8,11 +8,8 @@ const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensio
 const booleanExpressions_1 = require("./booleanExpressions");
 const reorder = (predicate, from, to) => {
     const predicateCopy = (0, ObjectExtensions_1.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) {
@@ -20,7 +17,6 @@ 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

@@ -36,22 +36,15 @@ function ExpressionEditor(props) {
     const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? ((0, jsx_runtime_1.jsx)(EditorInputWithWhereClause_1.default, { 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'
-    ((0, jsx_runtime_1.jsx)(
-        EditorInput_1.default,
-        { 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 })) : ((0, jsx_runtime_1.jsx)(EditorInput_1.default, { 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 &&
@@ -79,9 +72,7 @@ function ExpressionEditor(props) {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
-            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && ((0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
-                            /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && ((0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.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

@@ -25,8 +25,6 @@ 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

@@ -6,28 +6,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const index_1 = tslib_1.__importStar(require("./index"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-/**
- * This component allows - and empty values as intermediery values
- * it calls change only with valid numeric values
- */
 exports.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]);
@@ -36,7 +27,6 @@ exports.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

@@ -42,7 +42,6 @@ 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) => {