@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

package/src/View/Charting/Utilities/useChartingElements.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import SimpleButton from '../../../components/SimpleButton';
+import { isAgChartDefinition } from '../../../AdaptableState/ChartingState';
+import * as ChartingRedux from '../../../Redux/ActionsReducers/ChartingRedux';
+import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
+import { useAdaptable } from '../../AdaptableContext';
+import { DeleteChartButton } from '../DeleteChartButton';
+import { EditChartButton } from '../EditChartButton';
+import { useAgChartState } from './useAgChartState';
+import { useExternalChartState } from './useExternalChartState';
+import { SingleSelect } from '../../../components/Select';
+export const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
+    const adaptable = useAdaptable();
+    const chartDefinitions = useSelector(ChartingRedux.ChartingGetChartModels);
+    const extenralChartDefinitions = useSelector(ChartingRedux.ChartingGetExternalChartDefinitions);
+    const allChartDefinitions = [...chartDefinitions, ...extenralChartDefinitions];
+    const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
+    const chartContainers = chartingOptions?.chartContainers;
+    const [selectedChartId, setSelectedChartId] = React.useState(() => {
+        return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
+    });
+    const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
+    const isAgChart = isAgChartDefinition(selectedChart);
+    const chartAccessLevel = AdaptableHelper.getAccessLevelForObject(selectedChart, accessLevel);
+    const [selectedContainer, setSelectedContainer] = React.useState(null);
+    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = useAgChartState(isAgChart ? selectedChart : undefined);
+    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = useExternalChartState(!isAgChart ? selectedChart : undefined);
+    const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
+    const showChart = isAgChart ? showAgChart : showExternalChart;
+    const hideChart = isAgChart ? hideAgChart : hideExternalChart;
+    const options = allChartDefinitions.map((chartDefinition) => ({
+        label: chartDefinition.Name,
+        value: chartDefinition.Uuid,
+        onClick: () => {
+            setSelectedChartId(chartDefinition.Uuid);
+        },
+    }));
+    const hasCharts = options.length > 0;
+    const isSelectedChart = hasCharts && selectedChart != null;
+    let selectedChartValue = '';
+    if (hasCharts && selectedChart) {
+        selectedChartValue = selectedChart.Name;
+    }
+    else if (hasCharts) {
+        selectedChartValue = 'Select Chart';
+    }
+    else {
+        selectedChartValue = 'No Charts';
+    }
+    React.useEffect(() => {
+        if (!selectedChart && chartDefinitions.length > 0) {
+            setSelectedChartId(chartDefinitions[0].Uuid);
+        }
+    }, [chartDefinitions]);
+    let containerOptions = chartContainers
+        ? chartContainers?.map((contianerDef) => ({
+            label: contianerDef.name,
+            value: contianerDef.name,
+        }))
+        : [];
+    if (isAgChartDefinition(selectedChart)) {
+        containerOptions.unshift({
+            label: chartingOptions.agGridContainerName,
+            value: chartingOptions.agGridContainerName,
+        });
+    }
+    const style = {};
+    let iconSize;
+    if (size === 'small') {
+        style.padding = 2;
+        style.fontSize = 'small';
+        iconSize = 15;
+    }
+    const chartSelector = (_jsx(SingleSelect, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, items: options, placeholder: 'Select Chart', disabled: !hasCharts, onValueChange: (chartUuid) => setSelectedChartId(chartUuid) }));
+    const containerSelector = Boolean(chartContainers?.length) && (_jsx(SingleSelect, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onValueChange: (containerName) => {
+            if (containerName === chartingOptions.agGridContainerName) {
+                setSelectedContainer(null);
+            }
+            else {
+                setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
+            }
+        }, items: containerOptions, placeholder: "Select Container" }));
+    const chartButton = (_jsx(SimpleButton, { style: style, className: "twa:mr-1", onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const deleteButton = (_jsx(DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
+    const editButton = (_jsx(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+    return {
+        chartSelector,
+        containerSelector,
+        chartButton,
+        deleteButton,
+        editButton,
+        selectedChart,
+    };
+};

package/src/View/Charting/Utilities/useExternalChartState.d.ts

@@ -0,0 +1,7 @@
+import { ExternalChartDefinition } from '../../../AdaptableState/ChartingState';
+import { ChartContainer } from '../../../types';
+export declare const useExternalChartState: (chartDefinition?: ExternalChartDefinition) => {
+    showChart: (container?: ChartContainer) => void;
+    hideChart: () => void;
+    isOpen: boolean;
+};

package/src/View/Charting/Utilities/useExternalChartState.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useAdaptable } from '../../AdaptableContext';
+const buttonChangeSubscribers = [];
+export const useExternalChartState = (chartDefinition) => {
+    const adaptable = useAdaptable();
+    const [isOpen, setIsOpen] = React.useState(() => {
+        return (chartDefinition &&
+            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
+    });
+    const liveChartState = adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition);
+    if (liveChartState !== isOpen) {
+        setIsOpen(liveChartState);
+    }
+    const updateIsOpen = React.useCallback(() => {
+        setIsOpen(chartDefinition &&
+            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
+    }, [chartDefinition]);
+    React.useEffect(() => {
+        const subscriber = () => {
+            updateIsOpen();
+        };
+        buttonChangeSubscribers.push(subscriber);
+        return () => {
+            const index = buttonChangeSubscribers.indexOf(subscriber);
+            if (index > -1) {
+                buttonChangeSubscribers.splice(index, 1);
+            }
+        };
+    }, [updateIsOpen]);
+    return {
+        showChart: (container) => {
+            adaptable.api.chartingApi.internalApi.onShowExternalChart(chartDefinition, container);
+            requestAnimationFrame(() => {
+                buttonChangeSubscribers.forEach((subscriber) => subscriber());
+            });
+        },
+        hideChart: () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(chartDefinition);
+            requestAnimationFrame(() => {
+                buttonChangeSubscribers.forEach((subscriber) => subscriber());
+            });
+        },
+        isOpen,
+    };
+};

package/src/View/Charting/Wizard/AgChargingWizard/SettingsSection.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckBox } from '../../../../components/CheckBox';
+import { SingleSelect } from '../../../../components/Select';
+import { validateChartName } from '../../../../Utilities/Helpers/ChartHelper';
+import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
+import Input from '../../../../components/Input';
+import { PreviewChartSection } from './PreviewChartSection';
+export const isSettingsValid = (chartDefinition, api) => {
+    return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
+};
+const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
+export const SettingsSection = (props) => {
+    const { chartDefinition, onChange } = props;
+    const aggFunc = chartDefinition.Model.aggFunc;
+    const showAggFunc = chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function';
+    const aggFuncsOptions = AGG_FUNCS.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the chart" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                                Model: chartDefinition.Model,
+                            }), value: chartDefinition.Name ?? '', placeholder: "Enter chart name" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Unlink Chart" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "When enabled, the chart is not linked to the grid data range" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "unlink-chart", checked: chartDefinition.Model.unlinkChart, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    unlinkChart: checked,
+                                },
+                            }), children: "Unlink from data" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Suppress Chart Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Hide chart range highlights on the grid while the chart is open" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "suppress-chart-ranges", checked: chartDefinition.Model.suppressChartRanges, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    suppressChartRanges: checked,
+                                },
+                            }), children: "Suppress chart ranges" }) })] }), showAggFunc ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Aggregation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Aggregation function used for range charts" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "chart-agg-func", placeholder: "Select", className: "twa:max-w-[300px]", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: (value) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    aggFunc: value,
+                                },
+                            }) }) })] })) : null, _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the chart \u2014 changes here are reflected in the chart model" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition, onChange: onChange }) })] })] }));
+};

package/src/View/ColumnInfo/ColumnInfo.js

@@ -10,7 +10,7 @@ import { ButtonNew } from '../Components/Buttons/ButtonNew';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../components/Flex';
-import { formatColumnInspectorPinning, formatColumnInspectorSizing, formatColumnInspectorSorting, } from '../Layout/Wizard/sections/columnLayoutHelpers';
+import { formatColumnInspectorPinning, formatColumnInspectorSizing, formatColumnInspectorSorting, } from '../Layout/Utilities/columnLayoutHelpers';
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
     className: 'twa:flex-1 twa:min-h-0 twa:w-full',

package/src/View/Comments/CommentsEditor.js

@@ -5,7 +5,7 @@ import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
 import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
-import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRedux';
+import { CommentPopupPositionSelector } from '../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
 import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
@@ -14,7 +14,7 @@ import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstan
 export const CommentsEditor = (props) => {
     const { api } = useAdaptable();
     const showCloseButton = api.optionsApi.getCommentOptions()?.showPopupCloseButton ?? true;
-    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
+    const cellAddress = useSelector((state) => CommentPopupPositionSelector(state.Internal));
     const userId = React.useMemo(() => {
         return api.optionsApi.getUserName();
     }, []);
@@ -82,6 +82,6 @@ export const CommentsEditor = (props) => {
                     }
                 }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }), _jsxs(SimpleButton, { className: "twa:w-full", variant: "raised", onClick: () => {
                     api.settingsPanelApi.openSettingsPanel('Comment');
-                    api.internalApi.getAnnotationsService().hidePopup();
+                    api.internalApi.getCommentsService().hidePopup();
                 }, children: [_jsx(Box, { className: "twa:mr-2", children: _jsx(Icon, { name: "folder" }) }), ' ', "Open all Comments"] })] }));
 };

package/src/View/Comments/CommentsPopup.js

@@ -61,7 +61,7 @@ const CellComments = (props) => {
     }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (_jsx(Panel, { className: "twa:mb-2", header: _jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Box, { className: "twa:mr-2", children: [_jsx("b", { children: "Cell Value:" }), " ", cellValue] }), _jsxs(Box, { className: "twa:mr-2", children: [_jsxs("b", { children: [primaryKeyHeader, ":"] }), " ", props.commentThread.PrimaryKeyValue] }), _jsxs(Box, { children: [_jsx("b", { children: "Column:" }), " ", columnFriendlyName] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
-                        adaptable.api.internalApi.getAnnotationsService().showPopup({
+                        adaptable.api.internalApi.getCommentsService().showPopup({
                             ColumnId: props.commentThread.ColumnId,
                             PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
                         }, true);

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

@@ -5,7 +5,9 @@ import { useAdaptable } from '../../AdaptableContext';
 import useProperty from '../../../components/utils/useProperty';
 import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
-    const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const adaptable = useAdaptable();
+    const dateInputOptions = adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const calendarApi = adaptable.api.calendarApi;
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, showTriggerButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: (dateString) => props.onChange?.({
@@ -29,6 +31,8 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
         datepickerButtons: dateInputOptions.datepickerButtons,
         showClearButton,
         showTriggerButton: showTriggerButton ?? true,
+        getNextWorkingDay: (from) => calendarApi.getNextWorkingDay(from),
+        getPreviousWorkingDay: (from) => calendarApi.getPreviousWorkingDay(from),
         ...inputProps,
     };
     return _jsx(Datepicker, { ref: ref, ...datepickerProps });

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.d.ts

@@ -9,5 +9,11 @@ export declare const AdaptableObjectCompactListItem: React.FunctionComponent<Ada
 export interface AdaptableObjectCompactListProps {
     abObjects: AdaptableObject[];
     module: IModule;
+    /**
+     * Whether to show the header "Suspend All" / "Resume All" button. Defaults to `true`.
+     * Set to `false` where suspending belongs elsewhere (e.g. the live Alerts tab, where
+     * suspending is done on the Alert Definition rather than the fired alert).
+     */
+    showSuspendAllButton?: boolean;
 }
 export declare const AdaptableObjectCompactList: React.FunctionComponent<AdaptableObjectCompactListProps>;

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -42,7 +42,7 @@ export const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: objectListActionButtonClassName('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: objectListActionButtonClassName('delete') })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant, tagClassName: objectView.item.tagClassName }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: objectListActionButtonClassName('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: objectListActionButtonClassName('delete') })) })] }));
 };
 export const AdaptableObjectCompactList = (props) => {
     const adaptable = useAdaptable();
@@ -65,7 +65,7 @@ export const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), props.showSuspendAllButton !== false && suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
                     return (_jsx(AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
                 }) })] }));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.d.ts

@@ -10,6 +10,7 @@ export declare const AdaptableObjectListItemView: React.FunctionComponent<{
     className?: string;
     deleteAction?: Action;
     deleteConfirmationMsg?: string;
+    canDeleteObject?: () => boolean;
     onDelete?: () => void;
     deleteDisabled?: boolean;
     deleteTooltip?: string;

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -27,6 +27,7 @@ export const AdaptableObjectListItemView = (props) => {
         ConfirmationTitle: `Delete ${props.entityType}`,
         ConfirmAction: props.deleteAction,
         accessLevel: props.accessLevel,
+        canDelete: props.canDeleteObject,
     };
     if (props.disableDeleteConfirmation) {
         deleteActionProps.ConfirmAction = null;
@@ -46,7 +47,7 @@ export const AdaptableObjectListItemView = (props) => {
                                             data: props.abObject,
                                             module: props.module,
                                         })
-                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values, variant: tag.tagVariant })) : null, typeof tag.viewAfter === 'function'
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values, variant: tag.tagVariant, tagClassName: tag.tagClassName })) : null, typeof tag.viewAfter === 'function'
                                         ? React.createElement(tag.viewAfter, {
                                             data: props.abObject,
                                             module: props.module,
@@ -63,6 +64,9 @@ export const AdaptableObjectListItem = (props) => {
     const EditWizard = viewOptions.getEditWizard?.(props.data.abObject);
     const deleteAction = viewOptions?.getDeleteAction?.(props.data.abObject);
     const deleteConfirmationMsg = viewOptions?.getDeleteConfirmationMsg?.(props.data.abObject);
+    const canDeleteObject = viewOptions?.canDeleteObject
+        ? () => viewOptions.canDeleteObject(props.data.abObject)
+        : undefined;
     const isObjectShareable = props.module.isModuleObjectsShareable();
     const teamSharingActivated = isObjectShareable &&
         adaptable.api.teamSharingApi.isTeamSharingAvailable() &&
@@ -100,7 +104,7 @@ export const AdaptableObjectListItem = (props) => {
     const disableDeleteConfirmationState = useSelector((adaptableState) => InternalRedux.DisableDeleteConfirmationSelector(adaptableState.Internal));
     const disableDeleteConfirmation = disableDeleteConfirmationState ||
         adaptableOpttions?.userInterfaceOptions?.disableDeleteConfirmation;
-    return (_jsxs(_Fragment, { children: [_jsx(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteConfirmationMsg: deleteConfirmationMsg, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }), isEditWizardVisible && EditWizard && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteConfirmationMsg: deleteConfirmationMsg, canDeleteObject: canDeleteObject, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }), isEditWizardVisible && EditWizard && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
 };
 export const AdaptableObjectList = (props) => {
     return (_jsx("ul", { className: cn(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className), children: props?.items?.map((item, index) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));

package/src/View/Components/Buttons/ButtonDelete.d.ts

@@ -9,5 +9,9 @@ export interface DeleteButtonProps extends SimpleButtonProps {
     ConfirmationMsg: string;
     ConfirmationTitle: string;
     onClickAction?: () => void;
+    /**
+     * Optional gate before confirmation / delete. Return false to abort.
+     */
+    canDelete?: () => boolean;
 }
 export declare const ButtonDelete: React.FC<DeleteButtonProps>;

package/src/View/Components/Buttons/ButtonDelete.js

@@ -3,13 +3,16 @@ import { useDispatch } from 'react-redux';
 import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonDelete = (props) => {
-    const { ConfirmAction, ConfirmationMsg, ConfirmationTitle, onClickAction, onConfirmWarning, ...restProps } = props;
+    const { ConfirmAction, ConfirmationMsg, ConfirmationTitle, onClickAction, onConfirmWarning, canDelete, ...restProps } = props;
     const dispatch = useDispatch();
     const dispatchConfirmation = (confirmation) => {
         dispatch(PopupRedux.PopupShowConfirmation(confirmation));
         onConfirmWarning?.(confirmation);
     };
     const onClick = () => {
+        if (canDelete && !canDelete()) {
+            return;
+        }
         if (ConfirmAction) {
             let confirmation = {
                 CancelButtonText: 'Cancel',

package/src/View/Components/CellPopup/index.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
+import { OverlayShowParams } from '../../../components/InfiniteTable';
 export interface CellPopupProps {
     isOpen: boolean;
     columnId: string;
     primaryKeyValue: number | string;
     className?: string;
+    /**
+     * Where to anchor the popup.
+     * - `cell` (default): beside/around the clicked cell
+     * - `row`: above/below the full row (avoids covering cells in that row)
+     */
+    anchor?: 'cell' | 'row';
+    /**
+     * Overlay alignment preferences (overlay point → target point).
+     * Defaults depend on `anchor`.
+     */
+    alignPosition?: OverlayShowParams['alignPosition'];
 }
 export type CellPopupHandle = {
     refreshContent: () => void;

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useOverlay } from '../../../components/InfiniteTable';
 import { getRect } from '../../../components/OverlayTrigger/utils';
 import { useAdaptable } from '../../AdaptableContext';
-import { isBrowserDocumentAvailable } from '../../UIHelper';
+import { isBrowserDocumentAvailable } from '../../../Utilities/Helpers/UIHelper';
 let portalElement;
 const ensurePortalElement = (className) => {
     if (!isBrowserDocumentAvailable()) {
@@ -22,6 +22,23 @@ const ensurePortalElement = (className) => {
     }
     document.body.appendChild(portalElement);
 };
+const DEFAULT_CELL_ALIGN_POSITION = [
+    ['TopLeft', 'TopRight'],
+    ['TopRight', 'TopLeft'],
+    ['TopCenter', 'BottomCenter'],
+    ['BottomCenter', 'TopCenter'],
+];
+const DEFAULT_ROW_ALIGN_POSITION = [
+    ['TopCenter', 'BottomCenter'],
+    ['BottomCenter', 'TopCenter'],
+];
+function resolveRowAnchorElement(primaryKeyValue) {
+    const centerRow = document.querySelector(`.ag-center-cols-container [row-id="${primaryKeyValue}"]`);
+    if (centerRow) {
+        return centerRow;
+    }
+    return document.querySelector(`[row-id="${primaryKeyValue}"]`);
+}
 export const CellPopup = React.forwardRef((props, ref) => {
     ensurePortalElement(props.className);
     const adaptable = useAdaptable();
@@ -31,19 +48,18 @@ export const CellPopup = React.forwardRef((props, ref) => {
     const OVERLAY_ID = 'cell-overlay';
     const showCellPopupContent = () => {
         const cellSelector = `[row-id="${props.primaryKeyValue}"] [col-id="${props.columnId}"]`;
-        const alignTo = document.querySelector(cellSelector);
+        const alignTo = props.anchor === 'row'
+            ? resolveRowAnchorElement(props.primaryKeyValue) ??
+                document.querySelector(cellSelector)
+            : document.querySelector(cellSelector);
         if (!alignTo) {
             adaptable.logger.consoleError(`Cell not found for selector "${cellSelector}". Unable to display popup.`);
             return;
         }
         const showOverlayOptions = {
             id: OVERLAY_ID,
-            alignPosition: [
-                ['TopLeft', 'TopRight'],
-                ['TopRight', 'TopLeft'],
-                ['TopCenter', 'BottomCenter'],
-                ['BottomCenter', 'TopCenter'],
-            ],
+            alignPosition: props.alignPosition ??
+                (props.anchor === 'row' ? DEFAULT_ROW_ALIGN_POSITION : DEFAULT_CELL_ALIGN_POSITION),
             constrainTo: adaptable.getAgGridContainerElement() ?? true,
             alignTo: getRect(alignTo),
         };

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { ValueSelector } from '../ValueSelector';
 import { ColumnGroupTag } from '../ColumnGroupTag';
 import { cn } from '../../../lib/utils';
-import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../wizardColumnListStyles';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Wizard/wizardColumnListStyles';
 export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect, compactColumnList, compact, showFilterInput, filterPlaceholder, compactHeaderClassName, compactFilterClassName, hideShowSelectedOnly, optionClassName, className, } = props;
     const useCompactColumnList = compactColumnList ?? false;

package/src/View/Components/EntityRulesEditor/Utilities.d.ts

@@ -1,6 +1,11 @@
 import { AdaptableApi } from '../../../types';
+import type { ExpressionKind } from '../../../AdaptableState/Common/AdaptableQuery';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
 import { RuleType } from './index';
+/**
+ * Validates a rule string with the validator matching its kind. `expectedKind`
+ * (from a persisted `Type`) is the fallback for text with no kind of its own.
+ */
 export declare const isAdaptableRuleValid: (abObject: {
     Rule?: RuleType;
-}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>) => string | true;
+}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>, expectedKind?: ExpressionKind) => true | string;

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

@@ -1,29 +1,23 @@
-export const isAdaptableRuleValid = (abObject, api, context) => {
-    if (abObject?.Rule?.Predicates?.length) {
-        if (!api.predicateApi.isEveryPredicateValid(abObject?.Rule?.Predicates)) {
-            return `The predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid.`;
-        }
+export const isAdaptableRuleValid = (abObject, api, context, expectedKind) => {
+    const rule = abObject?.Rule;
+    if (!rule?.trim()) {
+        return true;
     }
-    if (abObject?.Rule?.BooleanExpression) {
-        if (!api.expressionApi.isValidBooleanExpression(abObject?.Rule?.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Boolean expression is not valid.';
-        }
+    const module = context.moduleInfo.ModuleName;
+    const kind = api.internalApi
+        .getQueryLanguageService()
+        .getExpressionKind(rule, module, expectedKind);
+    switch (kind) {
+        case 'aggregated':
+            if (!api.expressionApi.isValidAggregatedExpression(rule, module)) {
+                return 'The Aggregated expression is not valid.';
+            }
+            return true;
+        case 'scalar':
+        default:
+            if (!api.expressionApi.isValidScalarExpression(rule, module)) {
+                return 'The Expression is not valid.';
+            }
+            return true;
     }
-    if (abObject?.Rule?.ObservableExpression) {
-        if (!api.expressionApi.isValidObservableExpression(abObject?.Rule?.ObservableExpression, context.moduleInfo.ModuleName)) {
-            return 'The Observable expression is not valid.';
-        }
-    }
-    if (abObject?.Rule?.AggregatedBooleanExpression) {
-        if (!api.expressionApi.isValidAggregatedBooleanExpression(abObject?.Rule?.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Aggregated Boolean expression is not valid.';
-        }
-    }
-    if (abObject?.Rule?.Predicates?.length) {
-        const isAPredicateWithInvalidColumnId = abObject?.Rule?.Predicates?.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
-        if (isAPredicateWithInvalidColumnId) {
-            return 'Predicates with a custom scope require a valid column.';
-        }
-    }
-    return true;
 };

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -1,43 +1,68 @@
 import * as React from 'react';
-import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, ColumnScope } from '../../../types';
-import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
-import { AdaptableQuery } from '../../../AdaptableState/Common/AdaptableQuery';
+import type { AdaptableModule, ColumnScope } from '../../../types';
+import { type ExpressionEditorSecondaryAction, type ExpressionExamplesKind, type ExtraFunctionMenu, type OperatorEditorButton } from '../../../components/aql/ExpressionEditor';
+import { type ExpressionKind } from '../../../AdaptableState/Common/AdaptableQuery';
 import { FlexProps } from '../../../components/Flex';
-export type RuleType = XOR<{
-    Predicates: AdaptableColumnPredicate[];
-}, AdaptableQuery>;
+/**
+ * A rule authored as an AdaptableQL expression string; the kind (scalar /
+ * aggregated) is inferred from the text.
+ */
+export type RuleType = string;
 export type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
     showNoRule?: boolean;
-    showPredicate?: boolean;
-    showObservable?: boolean;
     showAggregation?: boolean;
     showBoolean?: boolean;
+    /**
+     * Kind the host expects the rule to have (e.g. from a persisted `Type`).
+     * Seeds the active tab when the rule text is empty.
+     */
+    expectedKind?: ExpressionKind;
     onChange: (data: T) => void;
-    defaultPredicateId: string;
-    predicateDefs: AdaptablePredicateDef[];
-    getPredicateDefsForColId?: (colId: string) => AdaptablePredicateDef[];
-    enablePredicateColumnId?: boolean;
     children?: React.ReactNode;
-    descriptions: {
-        selectPredicate: React.ReactNode;
-        useBooleanQuery: React.ReactNode;
-        useObservableQuery: React.ReactNode;
-        useAggregationQuery: React.ReactNode;
-    };
     flexProps?: FlexProps & {
         className?: string;
         style?: React.CSSProperties;
     };
     showQueryBuilder?: boolean;
+    /**
+     * Extra function/operator chips for the boolean Expression Editor.
+     */
+    extraEditorButtons?: OperatorEditorButton[];
+    /**
+     * Leading Function-strip menus for the boolean Expression Editor
+     * (e.g. Change for Flashing Cell).
+     */
+    extraFunctionMenus?: ExtraFunctionMenu[];
+    /**
+     * Host action shown next to Save As Query in the boolean Expression Editor
+     * chrome when Query Builder is enabled (e.g. Delete Condition).
+     */
+    secondaryAction?: ExpressionEditorSecondaryAction;
+    /**
+     * When true, skip the in-editor type-info card on nested Expression Editors
+     * (host provides use-case chrome).
+     */
+    suppressTypeInfoCard?: boolean;
+    /**
+     * Hide Observable chrome on the boolean Expression Editor (Standard Condition).
+     */
+    suppressObservable?: boolean;
+    /**
+     * Collapsible examples under the boolean / aggregated editors.
+     */
+    examplesKind?: ExpressionExamplesKind;
+    /**
+     * Forwards Expression Editor vs Query Builder tab changes from the boolean editor.
+     */
+    onActiveEditorChange?: (editor: 'QueryBuilder' | 'ExpressionEditor') => void;
 };
 export declare const EntityRulesSummary: <T extends {
     Rule?: RuleType;
     Scope: ColumnScope;
 }>(props: {
     data: T;
-    renderPredicate: (content: string) => React.ReactNode;
     renderQueryExpression: (content: string) => React.ReactNode;
 }) => React.JSX.Element;
 export declare const EntityRulesEditor: <T extends {