@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,29 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { defaultDragProxyMove, DragList } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
 import { Box } from '../Flex';
 import clsx from 'clsx';
 export function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items" },
-        React.createElement(Box, { className: "twa:p-2" },
-            React.createElement("b", null, title),
-            " (",
-            dragItemText,
-            ")"),
-        React.createElement(UnusedItemList, { disabled: disabled, items: items })));
+    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), " (", dragItemText, ")"] }), _jsx(UnusedItemList, { disabled: disabled, items: items })] }));
 }
 const EMPTY_ARRAY = [];
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { } }, (listDomProps) => (React.createElement("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: clsx('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className) }, items.map((unusedItem) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem })))))));
+        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: clsx('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
     const { availableItems } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (React.createElement(DragList.DraggableItem, { id: unusedItem }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        return (React.createElement("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className) }, title));
-    }));
+    return (_jsx(DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return (_jsx("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+        } }));
 }

package/src/components/Drawer/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 export const Drawer = (props) => {
     const [isOpen, setIsOpen] = React.useState(() => {
@@ -50,5 +51,5 @@ export const Drawer = (props) => {
         style.transform = 'translateY(-120%)';
         style.opacity = 0;
     }
-    return (React.createElement("div", { onKeyDown: handleOnKeyDown, style: style, onTransitionEnd: handletransitionEnd }, props.children));
+    return (_jsx("div", { onKeyDown: handleOnKeyDown, style: style, onTransitionEnd: handletransitionEnd, children: props.children }));
 };

package/src/components/Dropdown/Arrows.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '../icons';
 const Arrows = () => {
-    return (React.createElement("div", { style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
             flexFlow: 'column',
             position: 'absolute',
@@ -11,8 +11,6 @@ const Arrows = () => {
             right: 'var(--ab-base-space)',
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
-        } },
-        React.createElement(Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }),
-        React.createElement(Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })));
+        }, children: [_jsx(Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }), _jsx(Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })] }));
 };
 export default Arrows;

package/src/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
 import join from '../utils/join';
 import useProperty from '../utils/useProperty';
@@ -77,29 +77,24 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(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: {
+    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) => {
             e.preventDefault();
             onChange(null, e);
         } }));
-    return (React.createElement(Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: join(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
-        React.createElement("div", { className: `${baseClassName}__text twa:inline-block` },
-            selectedText,
-            React.createElement(Arrows, null)),
-        React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
-                const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
-                onChange(selected, e);
-            }, style: {
-                opacity: 0,
-                width: '100%',
-                height: '100%',
-                top: 0,
-                left: 0,
-                zIndex: 1,
-            }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
-            return (React.createElement("option", { key: o.value, value: o.value }, o.label));
-        })),
-        showClearButton && selectedOption ? renderClearButton() : null));
+    return (_jsxs(Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: join(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur, children: [_jsxs("div", { className: `${baseClassName}__text twa:inline-block`, children: [selectedText, _jsx(Arrows, {})] }), _jsx("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
+                    const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
+                    onChange(selected, e);
+                }, style: {
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus, children: finalOptions.map((o) => {
+                    return (_jsx("option", { value: o.value, children: o.label }, o.value));
+                }) }), showClearButton && selectedOption ? renderClearButton() : null] }));
 };
 export default Dropdown;

package/src/components/DropdownButton/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { cloneElement, useRef } from 'react';
 import join from '../utils/join';
@@ -6,9 +7,8 @@ import useExpanded from './useExpanded';
 import renderItem from './renderItem';
 import OverlayTrigger from '../OverlayTrigger';
 import clsx from 'clsx';
-export const DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
-    React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
-const spacer = React.createElement("div", { className: "twa:flex-1" });
+export const DROPDOWN_ICON = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: _jsx("path", { d: "M7 10l5 5 5-5H7z" }) }));
+const spacer = _jsx("div", { className: "twa:flex-1" });
 const baseClassName = 'ab-DropdownButton';
 const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
@@ -23,8 +23,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
     if (Array.isArray(items)) {
         content = items.map((item, index) => {
             if (item.separator) {
-                return (React.createElement("tr", { className: `${baseClassName}__separator`, key: index },
-                    React.createElement("td", { colSpan: 2 })));
+                return (_jsx("tr", { className: `${baseClassName}__separator`, children: _jsx("td", { colSpan: 2 }) }, index));
             }
             if (typeof listItemStyle === 'function') {
                 listItemStyle = listItemStyle(item, index);
@@ -71,8 +70,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 columns: columns,
             });
         });
-        content = (React.createElement("table", { className: `${baseClassName}__content` },
-            React.createElement("tbody", null, content)));
+        content = (_jsx("table", { className: `${baseClassName}__content`, children: _jsx("tbody", { children: content }) }));
     }
     const dropdownButtonClassName = props.className;
     const className = join(props.className, baseClassName);
@@ -94,7 +92,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
         })
         : DROPDOWN_ICON;
     const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? (React.createElement(SimpleButton, { disabled: domProps.disabled, as: "div", onClick: (event) => {
+    const clearButton = hasClearButton ? (_jsx(SimpleButton, { disabled: domProps.disabled, as: "div", onClick: (event) => {
             event.stopPropagation();
             if (onClear) {
                 onClear();
@@ -104,13 +102,10 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             ...clearButtonProps?.style,
             visibility: showClearButton ? 'visible' : 'hidden',
         } })) : null;
-    icon = (React.createElement(React.Fragment, null,
-        spacer,
-        hasClearButton ? clearButton : null,
-        icon));
+    icon = (_jsxs(_Fragment, { children: [spacer, hasClearButton ? clearButton : null, icon] }));
     const buttonRef = useRef(null);
-    return (React.createElement(OverlayTrigger, { visible: expanded, targetOffset: listOffset, render: () => {
-            return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list`, onMouseDownCapture: (e) => {
+    return (_jsx(OverlayTrigger, { visible: expanded, targetOffset: listOffset, render: () => {
+            return (_jsx("div", { "data-name": `${dropdownButtonClassName || 'dropdown-button-list'}`, style: listStyle, className: `${baseClassName}__list`, onMouseDownCapture: (e) => {
                     /**
                      * This stops popups register clicks inside the dropdown
                      * This is needed for column filter dropdows when redenred
@@ -119,9 +114,8 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     if (props.stopPropagationOnOverlay) {
                         e.stopPropagation();
                     }
-                } }, content));
-        }, ...overlayProps },
-        React.createElement(SimpleButton, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
+                }, children: content }));
+        }, ...overlayProps, children: _jsxs(SimpleButton, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -154,17 +148,15 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     domProps.onBlur(e);
                 }
                 setExpanded(false);
-            } },
-            React.createElement("div", { ref: positionerRef, tabIndex: -1, style: {
-                    position: 'absolute',
-                    height: '100%',
-                    width: '100%',
-                    zIndex: -1,
-                    pointerEvents: 'none',
-                    opacity: 0,
-                    top: 0,
-                    left: 0,
-                } }),
-            children)));
+            }, children: [_jsx("div", { ref: positionerRef, tabIndex: -1, style: {
+                        position: 'absolute',
+                        height: '100%',
+                        width: '100%',
+                        zIndex: -1,
+                        pointerEvents: 'none',
+                        opacity: 0,
+                        top: 0,
+                        left: 0,
+                    } }), children] }) }));
 });
 export default DropdownButton;

package/src/components/DropdownButton/renderItem.js

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import isPlainObject from '../../Utilities/utils/isPlainObject';
 export default ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
     if (!isPlainObject(item)) {
-        return (React.createElement("tr", { onClick: onItemClick, key: key, className: className, ...domProps },
-            React.createElement("td", { colSpan: columns.length, style: style }, item)));
+        return (_jsx("tr", { onClick: onItemClick, className: className, ...domProps, children: _jsx("td", { colSpan: columns.length, style: style, children: item }) }, key));
     }
-    return (React.createElement("tr", { onClick: onItemClick, key: key, className: className, ...domProps }, columns.map((col) => {
-        return (React.createElement("td", { key: col, style: style }, item[col]));
-    })));
+    return (_jsx("tr", { onClick: onItemClick, className: className, ...domProps, children: columns.map((col) => {
+            return (_jsx("td", { style: style, children: item[col] }, col));
+        }) }, key));
 };

package/src/components/EmptyContent/index.js

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../Flex';
 import clsx from 'clsx';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
-        children = React.createElement("p", null, children);
+        children = _jsx("p", { children: children });
     }
-    return (React.createElement(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full` },
-        React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: clsx('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style }, children)));
+    return (_jsx(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: clsx('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }) }));
 };
 export default EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../Flex';
 import clsx from 'clsx';
 export const baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return (React.createElement(Box, { ...props, className: clsx('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, baseClassName) }));
+    return (_jsx(Box, { ...props, className: clsx('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, baseClassName) }));
 };
 export default ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as parser from '../../parser/src';
 import * as React from 'react';
 import ErrorBox from '../ErrorBox';
@@ -49,12 +50,12 @@ const VarEditorButton = ({ className }) => {
     const adaptable = useAdaptable();
     const customQueryVariables = adaptable.api.optionsApi.getExpressionOptions()?.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
-    return (React.createElement(React.Fragment, null, Object.keys(customQueryVariables).map((varOption) => {
-        const varString = `VAR('${varOption}')`;
-        return (React.createElement(EditorButton, { data: varString, key: varOption, className: className }, varString));
-    })));
+    return (_jsx(_Fragment, { children: Object.keys(customQueryVariables).map((varOption) => {
+            const varString = `VAR('${varOption}')`;
+            return (_jsx(EditorButton, { data: varString, className: className, children: varString }, varOption));
+        }) }));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
     const [currentFunctionCategory, setCurrentFunctionCategory] = React.useState('all');
@@ -115,63 +116,43 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return (React.createElement(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup() },
-            React.createElement(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" }, categoryOptions.map((option, index) => {
-                return (React.createElement(Radio, { key: option.value, onFocus: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
-            })),
-            React.createElement(Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row" },
-                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2 twa:rounded-standard" },
-                    React.createElement(Box, null,
-                        React.createElement(AdaptableFormControlTextClear, { className: "twa:w-full", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" })),
-                    React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto`, "data-name": "expression-dropdown-functions-list", flexDirection: "column" }, orderedGroupNames
-                        .filter((groupName) => !!groupedFunctions[groupName])
-                        .map((groupName) => {
-                        const functionsInGroup = Object.keys(groupedFunctions[groupName]);
-                        if (functionsInGroup.length === 0) {
-                            return React.createElement(React.Fragment, { key: groupName });
-                        }
-                        const getEditorButtonData = (functionName) => {
-                            // handle special cases
-                            if (functionName === 'CASE') {
-                                return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
-                            }
-                            if (functionName === 'TRUE' || functionName === 'FALSE') {
-                                return functionName;
-                            }
-                            if (functionName === 'IF') {
-                                return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
-                            }
-                            return `${functionName}()`;
-                        };
-                        const fns = functionsInGroup
-                            .map((functionName) => {
-                            if (searchInputValue &&
-                                !functionName.toLowerCase().includes(searchInputValue.toLowerCase())) {
-                                return null;
-                            }
-                            const buttonClassName = 'twa:mr-1 twa:hover:bg-accent twa:hover:text-accent-foreground';
-                            return (React.createElement(Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName, className: buttonClassName })) : (React.createElement(EditorButton, { data: getEditorButtonData(functionName), key: functionName, className: buttonClassName }, functionName))));
-                        })
-                            .filter(Boolean);
-                        return (React.createElement(Box, { className: clsx('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), key: groupName },
-                            React.createElement(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full" }, StringExtensions.Humanize(groupName)),
-                            fns));
-                    }))),
-                React.createElement(Box, { className: clsx(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground') }, overFunction ? (React.createElement(React.Fragment, null,
-                    React.createElement(Tag, { className: "twa:bg-accent twa:text-accent-foreground" }, overFunction),
-                    React.createElement(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic" },
-                    React.createElement("ul", null,
-                        React.createElement("li", null,
-                            "Hover over a Function to learn more",
-                            React.createElement("br", null),
-                            React.createElement("br", null)),
-                        React.createElement("li", null, "Click a Function to add it to the Expression in the Editor")))))))) },
-        React.createElement(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1" },
-            React.createElement(Flex, { className: "twa:mr-1 twa:text-2" },
-                React.createElement(Icon, { name: "equation" })))));
+    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-defaultbackground 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();
+                                event.stopPropagation();
+                            }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value, children: option.label }, option.value));
+                    }) }), _jsxs(Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:rounded-standard", children: [_jsx(Box, { children: _jsx(AdaptableFormControlTextClear, { className: "twa:w-full", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" }) }), _jsx(Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto`, "data-name": "expression-dropdown-functions-list", flexDirection: "column", children: orderedGroupNames
+                                        .filter((groupName) => !!groupedFunctions[groupName])
+                                        .map((groupName) => {
+                                        const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                                        if (functionsInGroup.length === 0) {
+                                            return _jsx(React.Fragment, {}, groupName);
+                                        }
+                                        const getEditorButtonData = (functionName) => {
+                                            // handle special cases
+                                            if (functionName === 'CASE') {
+                                                return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
+                                            }
+                                            if (functionName === 'TRUE' || functionName === 'FALSE') {
+                                                return functionName;
+                                            }
+                                            if (functionName === 'IF') {
+                                                return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
+                                            }
+                                            return `${functionName}()`;
+                                        };
+                                        const fns = functionsInGroup
+                                            .map((functionName) => {
+                                            if (searchInputValue &&
+                                                !functionName.toLowerCase().includes(searchInputValue.toLowerCase())) {
+                                                return null;
+                                            }
+                                            const buttonClassName = 'twa:mr-1 twa:hover:bg-accent twa:hover:text-accent-foreground';
+                                            return (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? (_jsx(VarEditorButton, { className: buttonClassName }, functionName)) : (_jsx(EditorButton, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
+                                        })
+                                            .filter(Boolean);
+                                        return (_jsxs(Box, { className: clsx('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions.Humanize(groupName) }), fns] }, groupName));
+                                    }) })] }), _jsx(Box, { className: clsx(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground'), children: overFunction ? (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), _jsx(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : (_jsx(Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: _jsxs("ul", { children: [_jsxs("li", { children: ["Hover over a Function to learn more", _jsx("br", {}), _jsx("br", {})] }), _jsx("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: _jsx(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: _jsx(Icon, { name: "equation" }) }) }) }));
 };
 export function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
@@ -188,11 +169,7 @@ export function BaseEditorInput(props) {
             return parserExceptionSummary;
         }
         const parserExceptionDetails = e.message;
-        return (React.createElement("details", null,
-            React.createElement(Flex, { className: "twa:mb-1", as: "summary" },
-                parserExceptionSummary,
-                React.createElement("i", null, " (click for more details)")),
-            React.createElement(Box, { className: "twa:ml-3 twa:italic" }, parserExceptionDetails)));
+        return (_jsxs("details", { children: [_jsxs(Flex, { className: "twa:mb-1", as: "summary", children: [parserExceptionSummary, _jsx("i", { children: " (click for more details)" })] }), _jsx(Box, { className: "twa:ml-3 twa:italic", children: parserExceptionDetails })] }));
     };
     const testRowNode = useMemo(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
@@ -256,28 +233,10 @@ export function BaseEditorInput(props) {
     }, [selectedFunctionName]);
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
-        .map((editorButtonDef) => (React.createElement(EditorButton, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || 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 (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full` },
-            React.createElement(Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap" },
-                React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
-                operatorButtons),
-            showDocumentationLink && (React.createElement(Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(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) => {
-                props.onChange(event.target.value);
-            }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3" },
-            "This Expression must resolve to a ",
-            React.createElement("b", null, "boolean "),
-            "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full" }, expressionError)),
-        evaluationError && (React.createElement(ErrorBox, { className: "twa:mt-2 twa:whitespace-pre-wrap" }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback" },
-            React.createElement("pre", { className: "twa:whitespace-pre-wrap twa:m-0" },
-                "Result (using test data):",
-                ' ',
-                React.createElement("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2" }, JSON.stringify(result)))))));
+    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) => {
+                    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/DataTableEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { baseClassName } from '.';
 import { CheckBox } from '../CheckBox';
@@ -30,27 +31,22 @@ export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type
     const hasFriendlyNames = React.useMemo(() => {
         return fields.some((field) => field.label !== field.value);
     }, []);
-    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full" },
-        React.createElement(Flex, { className: `${baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start" },
-            hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
-                    float: 'right',
-                    margin: 0,
-                    paddingTop: 'var(--ab-base-space)',
-                    paddingBottom: 'var(--ab-base-space)',
-                } }, labels?.showIds ?? 'Show Column IDs')),
-            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
-            .filter((field) => {
-            if (!searchInputValue) {
-                return true;
-            }
-            return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
-        })
-            .map((field) => {
-            const label = showColumnIds ? `[${field.value}]` : field.label;
-            return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
-                    React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
-                    setData(updateColValue(data, field.value, new Date(e.target.value)));
-                }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
-        }))));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full", children: [_jsxs(Flex, { className: `${baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start", children: [hasFriendlyNames && (_jsx(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
+                            float: 'right',
+                            margin: 0,
+                            paddingTop: 'var(--ab-base-space)',
+                            paddingBottom: 'var(--ab-base-space)',
+                        }, children: labels?.showIds ?? 'Show Column IDs' })), _jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })] }), _jsx(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' }, children: fields
+                    .filter((field) => {
+                    if (!searchInputValue) {
+                        return true;
+                    }
+                    return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
+                })
+                    .map((field) => {
+                    const label = showColumnIds ? `[${field.value}]` : field.label;
+                    return (_jsx(FormRow, { label: _jsx(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag", children: _jsx(Flex, { flexDirection: "column", alignItems: "flex-start", children: label }) }), children: field.dataType === 'number' ? (_jsx(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (_jsx(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (_jsx(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
+                                setData(updateColValue(data, field.value, new Date(e.target.value)));
+                            }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (_jsx(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null }, field.label));
+                }) })] }));
 };

package/src/components/ExpressionEditor/EditorButton.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../SimpleButton';
 import { useExpressionEditor } from './EditorContext';
 let dragImage;
@@ -6,7 +6,7 @@ const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQ
 function EditorButton(props) {
     const { data, ...buttonProps } = props;
     const { textAreaRef } = useExpressionEditor();
-    return (React.createElement(SimpleButton, { "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
+    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);

package/src/components/ExpressionEditor/EditorInput.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BaseEditorInput } from './BaseEditorInput';
 import { editorButtonsSearch } from './editorButtonsSearch';
@@ -77,7 +77,7 @@ function EditorInput(props) {
             queryName = "Create a Quantile Expression";
             break;
     }
-    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    return (_jsx(BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { BaseEditorInput } from './BaseEditorInput';
 import { editorButtonsSearch } from './editorButtonsSearch';
@@ -45,19 +45,12 @@ function EditorInputWithWhereClause(props) {
     const { setSelectedFunction } = useExpressionEditor();
     const [showWhereClause, setShowWhereClause] = useState(IsNotNullOrEmptyOrWhiteSpace(whereClauseValue));
     const queryName = `${CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
-        React.createElement(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' } }),
-        React.createElement(Box, { className: "twa:text-2 twa:mt-2 twa:pl-3" },
-            "Add a ",
-            React.createElement("i", null, "WHERE"),
-            " Clause to narrow the scope of the Query"),
-        React.createElement(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" }, "WHERE"),
-        showWhereClause && (React.createElement(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' } }))));
+    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' } }))] }));
 }
 export default EditorInputWithWhereClause;