@adaptabletools/adaptable-cjs 22.0.10 → 22.1.0-canary.0

package/src/components/DragAndDropContext/TabList.js

@@ -11,62 +11,104 @@ const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
 const Flex_1 = require("../Flex");
-function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "data-name": "dashboard-tabs" },
-        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+    const tabIdsRef = React.useRef(new WeakMap());
+    const nextTabIdRef = React.useRef(0);
+    const getTabStableId = React.useCallback((tab) => {
+        const existingId = tabIdsRef.current.get(tab);
+        if (existingId) {
+            return existingId;
+        }
+        const newId = `dashboard-tab-${String(nextTabIdRef.current++)}`;
+        tabIdsRef.current.set(tab, newId);
+        return newId;
+    }, []);
+    return (React.createElement(dnd_1.DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
+            const newTabs = sortedIndexes.map((i) => tabs[i]);
+            onTabsChange(newTabs);
+        } }, (listDomProps) => (React.createElement("div", { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs" },
+        tabs.map((tab, tabIndex) => {
+            const tabId = getTabStableId(tab);
+            return (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }));
+        }),
         !disabled && onNewTab ? (React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
             React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
                 React.createElement(icons_1.Icon, { name: "plus", size: 32 }),
-                "Click to add tab"))) : null,
-        provided.placeholder))));
+                "Click to add tab"))) : null))));
 }
-function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
+    return (React.createElement(dnd_1.DragList.DraggableItem, { dragListId: "TABS", id: tabId }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
         let showHeader = true;
         if (tab.Name === '' &&
             !context.permittedActions.editTabName &&
             !context.permittedActions.deleteTab) {
             showHeader = false;
         }
-        return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
-                ...(isDragDisabled ? {} : provided.draggableProps.style),
-            } },
+        return (React.createElement("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab" },
             showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-                React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
-                        ? {}
-                        : {
-                            display: 'none',
-                        } },
+                React.createElement("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' } },
                     React.createElement(icons_1.Icon, { name: "drag" })),
                 context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                         onChangeTabName(event.target.value);
                     } })) : (tab.Name),
                 context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
-            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
+            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })));
     }));
 }
-function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
-            backgroundColor: snapshot.isDraggingOver
-                ? 'var(--ab-dashboard-tab-drop-target__background)'
-                : '',
-        } },
-        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
-        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
-        provided.placeholder))));
+function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+    const acceptDropsFrom = React.useMemo(() => {
+        const sources = ['UNUSED'];
+        tabs.forEach((_, i) => {
+            if (i !== tabIndex)
+                sources.push(String(i));
+        });
+        return sources;
+    }, [tabIndex, tabs]);
+    return (React.createElement(dnd_1.DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: dnd_1.defaultDragProxyMove, 
+        // this is called when reordering inside the same list
+        onDrop: (sortedIndexes) => {
+            const newItems = sortedIndexes.map((i) => toolbars[i]);
+            onTabsChange(tabs.map((t, i) => (i === tabIndex ? { ...t, Items: newItems } : t)));
+        }, shouldAcceptDrop: ({ dragItem, dragSourceListId }) => {
+            const dragItemId = dragItem.id;
+            // if the tab contains an item with the same id, don't accept the drop
+            if (dragSourceListId != String(tabIndex) && tabs[tabIndex].Items.includes(dragItemId)) {
+                return false;
+            }
+            return true;
+        }, 
+        // this is called when dropping an item from a different list
+        onAcceptDrop: ({ dragItemId, dragSourceListId, dropIndex }) => {
+            const newTabs = tabs.map((tab, i) => {
+                let items = [...tab.Items];
+                if (dragSourceListId !== 'UNUSED' && i === Number(dragSourceListId)) {
+                    items = items.filter((item) => item !== dragItemId);
+                }
+                if (i === tabIndex) {
+                    items.splice(dropIndex, 0, dragItemId);
+                }
+                return { ...tab, Items: items };
+            });
+            onTabsChange(newTabs);
+        } }, (listDomProps, context) => (React.createElement(Flex_1.Box, { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarList', listDomProps.className, {
+            'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
+            'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
+        }), "data-name": "dashboard-toolbar-drop-target" },
+        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }))),
+        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null))));
 }
-function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
+function ToolbarItem({ toolbar, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
-    let currentItem = availableItems.find((t) => t.Id === toolbar);
+    const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex_1.Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-            ...provided.draggableProps.style,
-            backgroundColor: snapshot.isDragging
-                ? 'var(--ab-dashboard-toolbar-drag__background)'
-                : 'var(--ab-color-primarylight)',
-        } },
-        React.createElement("div", { className: "twa:flex-1" }, title),
-        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
+    return (React.createElement(dnd_1.DragList.DraggableItem, { id: toolbar }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center" },
+            React.createElement("div", { className: "twa:flex-1" }, title),
+            React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })));
+    }));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -16,29 +16,18 @@ function UnusedPanel({ items, disabled, title, dragItemText, }) {
             ")"),
         React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
+const EMPTY_ARRAY = [];
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, className: 'twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1' },
-        items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
-        provided.placeholder))));
+    return (React.createElement(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+            proxyElement.classList.add('twa:shadow-md');
+        }, onDrop: () => { } }, (listDomProps) => (React.createElement("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, clsx_1.default)('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 })))))));
 }
-function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
+function UnusedItem({ unusedItem, disabled }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
-    let currentItem = availableItems.find((t) => t.Id === unusedItem);
+    const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
-        const eventHandlers = disabled
-            ? {}
-            : {
-                ...provided.draggableProps,
-                ...provided.dragHandleProps,
-            };
-        const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2'), style: {
-                ...dragStyle,
-                border: '1px solid var(--ab-color-primary)',
-                backgroundColor: snapshot.isDragging
-                    ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primary)',
-            } }, title));
+    return (React.createElement(dnd_1.DragList.DraggableItem, { id: unusedItem }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className) }, title));
     }));
 }

package/src/components/ExpressionEditor/BaseEditorInput.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ExpressionFunction, ExpressionFunctionMap } from '../../parser/src/types';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { CSSProperties } from 'react';
+import { ColumnScope } from '../../types';
 interface BaseEditorInputProps {
     type: 'main' | 'secondary';
     value: string;
@@ -16,6 +17,7 @@ interface BaseEditorInputProps {
     hideResultPreview?: boolean;
     api: AdaptableApi;
     style?: CSSProperties;
+    columnScope?: ColumnScope;
 }
 export interface OperatorEditorButton {
     functionName: string;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -206,6 +206,9 @@ function BaseEditorInput(props) {
         // 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 || '');
@@ -222,6 +225,7 @@ function BaseEditorInput(props) {
                 functions: expressionFunctions,
                 evaluateCustomQueryVariable: props.api.internalApi.getQueryLanguageService().evaluateCustomQueryVariable,
                 dataChangedEvent,
+                columnScope: scopeColumnId,
                 ...props.api.internalApi.buildBaseContext(),
             });
         }

package/src/components/ExpressionEditor/EditorInput.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableModule } from '../../AdaptableState/Common/Types';
+import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 interface EditorInputProps {
     type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
     module: AdaptableModule;
     value: string;
     onChange: (value: string) => void;
+    api: AdaptableApi;
     testData: any;
     isFullExpression?: boolean;
-    api: AdaptableApi;
+    columnScope?: ColumnScope;
 }
 declare function EditorInput(props: EditorInputProps): React.JSX.Element;
 export default EditorInput;

package/src/components/ExpressionEditor/EditorInput.js

@@ -41,15 +41,26 @@ function EditorInput(props) {
         }, {});
     };
     const expressionFunctions = (0, react_1.useMemo)(() => {
-        return props.type === 'aggregatedScalar' ||
+        if (props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
-            props.type === 'quantileAggregatedScalar'
-            ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
-            : {
-                ...moduleExpressionFunctions.booleanFunctions,
-                ...moduleExpressionFunctions.scalarFunctions,
-            };
-    }, [props.type]);
+            props.type === 'quantileAggregatedScalar') {
+            return getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type);
+        }
+        let booleanAndScalarFunctions = {
+            ...moduleExpressionFunctions.booleanFunctions,
+            ...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) => {
+                obj[key] = booleanAndScalarFunctions[key];
+                return obj;
+            }, {});
+        }
+        return booleanAndScalarFunctions;
+    }, [props.type, props.columnScope]);
     const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
     let queryName;
     switch (props.type) {
@@ -77,6 +88,6 @@ function EditorInput(props) {
                     ? editorButtonsQuantileAggregatedScalar_1.editorButtonsQuantileAggregatedScalar
                     : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
-            props.type === 'quantileAggregatedScalar', api: props.api }));
+            props.type === 'quantileAggregatedScalar', api: props.api, columnScope: props.columnScope }));
 }
 exports.default = EditorInput;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName } from '../../../types';
+import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName, ColumnScope } from '../../../types';
 interface QueryBuilderProps {
     query: string;
     getColumns: (type?: AdaptableColumnDataType) => {
@@ -14,6 +14,7 @@ interface QueryBuilderProps {
     }[];
     onChange: (query: string) => void;
     module: AdaptableModule;
+    columnScope?: ColumnScope;
 }
 export declare function useQueryBuilderContext(): {
     getColumns: QueryBuilderProps["getColumns"];

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

@@ -91,7 +91,6 @@ const QueryBuilder = (props) => {
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
         errorOrEditor = (React.createElement(QueryPredicateBuilder_1.QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
-                // add to its children
                 const newPredicate = {
                     operator: type === 'filter' ? undefined : 'AND',
                     args: [],
@@ -104,15 +103,7 @@ const QueryBuilder = (props) => {
                 handleQlPredicateChange(predicate);
             } }));
     }
-    return (React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
-            if (!result.destination) {
-                return;
-            }
-            const toPath = `${result.destination.droppableId}/${result.destination.index}`;
-            const fromPath = result.draggableId;
-            const predicate = (0, utils_1.reorder)(qlPredicate, fromPath, toPath);
-            handleQlPredicateChange(predicate);
-        } },
+    return (React.createElement(dnd_1.DragDropProvider, null,
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(Flex_1.Box, { className: QUERY_BUILDER_CLASSNAME },
                 React.createElement(HelpBlock_1.default, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3" }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),

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

@@ -15,6 +15,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
 const QueryBuilderInputs_1 = require("./QueryBuilderInputs");
 const utils_1 = require("./utils");
 const Flex_1 = require("../../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
 const Handle = (props) => (react_1.default.createElement(Flex_1.Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props },
@@ -39,8 +40,12 @@ const LogicalFunctionEditor = (props) => {
     ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
     ${props.isRoot ? `${BASE_CLASS_NAME}--root` : `${BASE_CLASS_NAME}--child`}
   `;
-    const getCombinatorEl = (handleProps, className) => (react_1.default.createElement(dnd_1.Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
-        return (react_1.default.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, className: className },
+    const handleDrop = (sortedIndexes) => {
+        const newArgs = sortedIndexes.map((i) => props.predicate.args[i]);
+        props.onChange({ ...props.predicate, args: newArgs });
+    };
+    const getCombinatorEl = (handleProps) => (react_1.default.createElement(dnd_1.DragList, { dragListId: props.id, orientation: "vertical", onDrop: handleDrop, onDragProxyMove: dnd_1.defaultDragProxyMove }, (listDomProps) => {
+        return (react_1.default.createElement("div", { ...listDomProps, className: (0, clsx_1.default)(listDomProps.className) },
             react_1.default.createElement(Flex_1.Flex, null,
                 props.isRoot ? null : react_1.default.createElement(Handle, { ...handleProps }),
                 react_1.default.createElement(Flex_1.Flex, { className: "twa:flex-1", alignItems: "center", height: ITEM_HEIGHT },
@@ -98,21 +103,18 @@ const LogicalFunctionEditor = (props) => {
                             });
                         } }));
                 }),
-                provided.placeholder,
                 react_1.default.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
                     react_1.default.createElement(QueryPredicateButtons, { ...props, hideDelete: true })))));
     }));
     if (props.isRoot) {
-        return getCombinatorEl({ className: className });
-    }
-    else {
-        return (react_1.default.createElement(dnd_1.Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
-            return (react_1.default.createElement("div", { ...provided.draggableProps, ref: provided.innerRef, className: className }, getCombinatorEl(provided.dragHandleProps)));
-        }));
+        return getCombinatorEl({ className });
     }
+    return (react_1.default.createElement(dnd_1.DragList.DraggableItem, { id: props.id }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (react_1.default.createElement("div", { ...restDomProps, className: (0, clsx_1.default)(className, restDomProps.className) }, getCombinatorEl({ onPointerDown })));
+    }));
 };
 const PrimitiveFunctionEditor = (props) => {
-    // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [columnOrFieldExpression, ...restOfArgs] = props.predicate.args;
     const columnOrField = columnOrFieldExpression;
@@ -120,15 +122,12 @@ const PrimitiveFunctionEditor = (props) => {
     let columnOrFieldDataType = null;
     let columnInputDataType = null;
     let functionInputInputDataTypes = null;
-    // Thsese are the type of inputs ommiting the column
-    // [[column-data-type], number, number]
     let restOfFunctionInputDataTypes = [];
     if (columnOrField) {
         if (!(0, predicate_1.isArgumentColumnOrField)(columnOrField)) {
             return react_1.default.createElement(ErrorBox_1.default, null, "Expression must start with a column or a filed!");
         }
         if (columnOrField.includes('FIELD')) {
-            // we let the full expression so we can difirienciate between column and field
             columnOrFieldId = columnOrField;
             const fieldValue = (0, utils_1.mapExpressionToFieldValue)(columnOrField);
             columnOrFieldDataType = adaptable.api.expressionApi.internalApi.getFieldType(fieldValue);
@@ -145,9 +144,10 @@ const PrimitiveFunctionEditor = (props) => {
             : [];
     }
     const level = props.id.split('/').length - 1;
-    return (react_1.default.createElement(dnd_1.Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (react_1.default.createElement(Flex_1.Flex, { className: `twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''} `, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
-            react_1.default.createElement(Handle, { ...provided.dragHandleProps }),
+    return (react_1.default.createElement(dnd_1.DragList.DraggableItem, { id: props.id }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (react_1.default.createElement(Flex_1.Flex, { ...restDomProps, className: (0, clsx_1.default)(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT } },
+            react_1.default.createElement(Handle, { onPointerDown: onPointerDown }),
             react_1.default.createElement(Flex_1.Flex, { alignItems: "center", style: { height: ITEM_HEIGHT } },
                 react_1.default.createElement(Flex_1.Box, { className: "twa:mr-2" },
                     react_1.default.createElement(QueryBuilderInputs_1.PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
@@ -165,7 +165,6 @@ const PrimitiveFunctionEditor = (props) => {
                         props.onChange({
                             ...props.predicate,
                             operator,
-                            // discard arguments
                             args,
                         });
                     }, value: props.predicate.operator })),
@@ -186,7 +185,6 @@ const PrimitiveFunctionEditor = (props) => {
                     }
                     return (react_1.default.createElement(QueryBuilderInputs_1.PrimitiveValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
                             const args = [...props.predicate.args];
-                            // +1 because col is the first argument
                             args[index + 1] = value;
                             props.onChange({
                                 ...props.predicate,

package/src/components/ExpressionEditor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableApi, AdaptableColumn, AdaptableField, AdaptableModule, NamedQuery } from '../../types';
+import { AdaptableApi, AdaptableColumn, AdaptableField, AdaptableModule, ColumnScope, NamedQuery } from '../../types';
 export type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
 interface ExpressionEditorProps {
     value: string;
@@ -19,6 +19,7 @@ interface ExpressionEditorProps {
     api: AdaptableApi;
     showQueryBuilder?: boolean;
     showExpressionEditor?: boolean;
+    columnScope?: ColumnScope;
 }
 export declare const baseClassName = "ab-ExpressionEditor";
 export declare function ExpressionEditor(props: ExpressionEditorProps): React.JSX.Element;

package/src/components/ExpressionEditor/index.js

@@ -40,7 +40,7 @@ function ExpressionEditor(props) {
     // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
     (React.createElement(
         EditorInput_1.default,
-        { type: type, module: module, value: props.value, onChange: (value) => {
+        { 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 }

package/src/components/Tree/TreeDropdown/index.js

@@ -65,35 +65,46 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
                 } }));
         },
         renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
-            const { treeApi } = dataSourceApi;
-            const allFirstLevelCollapsed = dataSourceApi
-                .getOriginalDataArray()
-                .every((item) => !treeApi.isNodeExpanded([item.id]));
-            return (React.createElement(Flex_1.Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
-                    // so we can keep the focus on the Grid
-                    e.preventDefault();
-                } },
-                React.createElement(CheckBox_1.CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, className: "twa:mr-2", onChange: () => {
-                        if (allRowsSelected) {
-                            dataSourceApi.treeApi.deselectAll();
-                        }
-                        else {
-                            dataSourceApi.treeApi.selectAll();
-                        }
-                        api.focus();
-                    } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
-                React.createElement(Flex_1.Flex, { className: "twa:flex-1" }),
-                includeExpandCollapseButton ? (React.createElement(SimpleButton_1.default, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
-                        if (allFirstLevelCollapsed) {
-                            dataSourceApi.treeApi.expandAll();
-                        }
-                        else {
-                            dataSourceApi.treeApi.collapseAll();
-                        }
-                    }, iconPosition: "end" })) : null));
+            return (React.createElement(CustomHeader, { dataSourceApi: dataSourceApi, api: api, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, includeExpandCollapseButton: includeExpandCollapseButton }));
         },
     };
 };
+function useAllFirstLevelCollapsed(treeApi) {
+    const { originalDataArray } = (0, InfiniteTable_1.useDataSourceState)((state) => {
+        return {
+            originalDataArray: state.originalDataArray,
+            treeExpandState: state.treeExpandState,
+        };
+    });
+    return originalDataArray.every((item) => !treeApi.isNodeExpanded([item.id]));
+}
+function CustomHeader({ dataSourceApi, api, allRowsSelected, someRowsSelected, includeExpandCollapseButton, }) {
+    const { treeApi } = dataSourceApi;
+    const allFirstLevelCollapsed = useAllFirstLevelCollapsed(treeApi);
+    const checked = someRowsSelected && !allRowsSelected ? null : allRowsSelected;
+    return (React.createElement(Flex_1.Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
+            // so we can keep the focus on the Grid
+            e.preventDefault();
+        } },
+        React.createElement(CheckBox_1.CheckBox, { checked: checked, className: "twa:mr-2", onChange: () => {
+                if (allRowsSelected) {
+                    dataSourceApi.treeApi.deselectAll();
+                }
+                else {
+                    dataSourceApi.treeApi.selectAll();
+                }
+                api.focus();
+            } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
+        React.createElement(Flex_1.Flex, { className: "twa:flex-1" }),
+        includeExpandCollapseButton ? (React.createElement(SimpleButton_1.default, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
+                if (allFirstLevelCollapsed) {
+                    dataSourceApi.treeApi.expandAll();
+                }
+                else {
+                    dataSourceApi.treeApi.collapseAll();
+                }
+            }, iconPosition: "end" })) : null));
+}
 const sizeFull = {
     width: '100%',
     height: '100%',

package/src/components/dnd/index.d.ts

@@ -1,13 +1,3 @@
-import * as React from 'react';
-import { DropResult, Draggable, DroppableProps, DragDropContextProps } from '@adaptabletools/react-beautiful-dnd';
-/**
- * We're doing all this because the placeholder is not correctly displayed in react-beautiful-dnd
- * with React 19.
- * So we make sure it properly occupies the space of the dragged item, so the
- * container won't flicker when we're dragging an item (as the drag item receives
- * position: fixed while dragging, so content does not have the initial height anymore, therefore,
- * the placeholder is included, with the computed height of the dragging element)
- */
-declare const Droppable: (props: DroppableProps) => React.JSX.Element;
-declare const DragDropContext: (props: DragDropContextProps) => React.JSX.Element;
-export { type DropResult, Draggable, Droppable, DragDropContext };
+import { DragProxyMoveParams } from '@infinite-table/infinite-react';
+export { DragDropProvider, DragList, useDragDropProvider, useDragListContext, DRAG_ITEM_ATTRIBUTE, type DragListProps, type DragDropSourceAndTarget, } from '@infinite-table/infinite-react';
+export declare function defaultDragProxyMove({ proxyElement, dx, dy }: DragProxyMoveParams): void;

package/src/components/dnd/index.js

@@ -1,61 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragDropContext = exports.Droppable = exports.Draggable = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_beautiful_dnd_1 = require("@adaptabletools/react-beautiful-dnd");
-Object.defineProperty(exports, "Draggable", { enumerable: true, get: function () { return react_beautiful_dnd_1.Draggable; } });
-const react_1 = require("react");
-/**
- * We're doing all this because the placeholder is not correctly displayed in react-beautiful-dnd
- * with React 19.
- * So we make sure it properly occupies the space of the dragged item, so the
- * container won't flicker when we're dragging an item (as the drag item receives
- * position: fixed while dragging, so content does not have the initial height anymore, therefore,
- * the placeholder is included, with the computed height of the dragging element)
- */
-const Droppable = (props) => {
-    const children = props.children;
-    const { placeholderStyle } = React.useContext(AdaptableDDContext);
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { ...props }, (provided, snapshot) => {
-        provided.placeholder = (React.createElement("div", { key: "placeholder", style: placeholderStyle || {
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                height: 0,
-            } }));
-        return children(provided, snapshot);
-    }));
-};
-exports.Droppable = Droppable;
-const queryAttr = 'data-rbd-draggable-id';
-const AdaptableDDContext = React.createContext({
-    placeholderStyle: null,
-});
-const DragDropContext = (props) => {
-    const getDraggedDom = (draggableId) => {
-        const domQuery = `[${queryAttr}='${draggableId}']`;
-        const draggedDOM = document.querySelector(domQuery);
-        return draggedDOM;
-    };
-    const [placeholderStyle, setPlaceholderStyle] = (0, react_1.useState)(null);
-    const handleDragStart = (initial, provided) => {
-        props.onDragStart?.(initial, provided);
-        const draggedDOM = getDraggedDom(initial.draggableId);
-        if (!draggedDOM) {
-            return;
-        }
-        const { clientHeight, clientWidth } = draggedDOM;
-        const computedStyle = window.getComputedStyle(draggedDOM);
-        setPlaceholderStyle({
-            height: clientHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom),
-            width: clientWidth,
-        });
-    };
-    const handleDragEnd = (result, provided) => {
-        props.onDragEnd?.(result, provided);
-        setPlaceholderStyle(null);
-    };
-    return (React.createElement(AdaptableDDContext.Provider, { value: { placeholderStyle } },
-        React.createElement(react_beautiful_dnd_1.DragDropContext, { ...props, onDragStart: handleDragStart, onDragEnd: handleDragEnd })));
-};
-exports.DragDropContext = DragDropContext;
+exports.DRAG_ITEM_ATTRIBUTE = exports.useDragListContext = exports.useDragDropProvider = exports.DragList = exports.DragDropProvider = void 0;
+exports.defaultDragProxyMove = defaultDragProxyMove;
+var infinite_react_1 = require("@infinite-table/infinite-react");
+Object.defineProperty(exports, "DragDropProvider", { enumerable: true, get: function () { return infinite_react_1.DragDropProvider; } });
+Object.defineProperty(exports, "DragList", { enumerable: true, get: function () { return infinite_react_1.DragList; } });
+Object.defineProperty(exports, "useDragDropProvider", { enumerable: true, get: function () { return infinite_react_1.useDragDropProvider; } });
+Object.defineProperty(exports, "useDragListContext", { enumerable: true, get: function () { return infinite_react_1.useDragListContext; } });
+Object.defineProperty(exports, "DRAG_ITEM_ATTRIBUTE", { enumerable: true, get: function () { return infinite_react_1.DRAG_ITEM_ATTRIBUTE; } });
+function defaultDragProxyMove({ proxyElement, dx, dy }) {
+    proxyElement.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`;
+}

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1775746156657 || Date.now(),
-    VERSION: "22.0.10" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1776278148216 || Date.now(),
+    VERSION: "22.1.0-canary.0" || '--current-version--',
 };