@adaptabletools/adaptable 23.1.0-canary.2 → 24.0.0-canary.0

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -1,75 +1,384 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { NewDropdownButton } from '../../components/DropdownButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { IconComponent } from '../../components/Icon';
-import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../../View/Components/AdaptableButton';
+import { ChevronDownIcon } from 'lucide-react';
+import { resolveValueOrFunction } from '../../Utilities/Helpers/ValueOrFunctionHelper';
+import { getFieldBoundToggleValue, isFieldBoundToggle, writeFieldBoundToggleValue, } from '../../Utilities/Helpers/ActionColumnHelper';
+import { IconComponent, isAdaptableSystemIcon } from '../../components/Icon';
+import SimpleButton from '../../components/SimpleButton';
+import { CheckBox } from '../../components/CheckBox';
+import { Switch } from '../../components/Switch';
+import { Toggle } from '../../components/Toggle/Toggle';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../../components/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+import { AdaptableFormComponent } from '../../components/AdaptableFormComponent/AdaptableFormComponent';
+import { getDefaultAdaptableFormData } from '../../AdaptableState/Common/AdaptableForm';
 import { useRerender } from '../../components/utils/useRerender';
-import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
+import { renderWithAdaptableContext } from '../../View/AdaptableContext';
 import { LAYOUT_SELECT } from '../../Redux/ActionsReducers/LayoutRedux';
-import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
-function getActionColumnButtonProps(button, index, adaptableApi, context, rerender) {
-    if (button.hidden?.(button, context)) {
+const COMMAND_DEFAULTS = {
+    create: { icon: 'add', tooltip: 'Create Row' },
+    clone: { icon: 'clone', tooltip: 'Clone Row' },
+    edit: { icon: 'edit', tooltip: 'Edit Row' },
+    delete: { icon: 'delete', tooltip: 'Delete Row' },
+};
+function buildControlContext(base, control, value) {
+    return { ...base, control, value };
+}
+function renderControlIcon(adaptableApi, icon) {
+    if (!icon) {
+        return undefined;
+    }
+    let def = icon;
+    if (isAdaptableSystemIcon(def)) {
+        def = adaptableApi.userInterfaceApi.internalApi.prepareAdaptableIconDef(def);
+    }
+    return _jsx(IconComponent, { icon: def });
+}
+function useAsyncRun(rerender) {
+    const [busy, setBusy] = React.useState(false);
+    const mountedRef = React.useRef(true);
+    React.useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const run = React.useCallback((fn) => {
+        let result;
+        try {
+            result = fn();
+        }
+        catch (err) {
+            setTimeout(rerender, 16);
+            throw err;
+        }
+        if (result instanceof Promise) {
+            setBusy(true);
+            result.finally(() => {
+                if (mountedRef.current) {
+                    setBusy(false);
+                }
+                setTimeout(rerender, 16);
+            });
+        }
+        else {
+            setTimeout(rerender, 16);
+        }
+    }, [rerender]);
+    return { busy, run };
+}
+const ActionTriggerButton = (props) => {
+    const { icon, label, busyLabel, tooltip, iconPosition, variant = 'text', tone = 'none', className, disabled, busy, dataName, confirm, adaptableApi, onRun, } = props;
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    const button = (_jsx(SimpleButton, { "data-name": dataName, variant: variant, tone: tone, disabled: disabled, tooltip: tooltip, icon: renderControlIcon(adaptableApi, icon), iconPosition: iconPosition, className: className, onClick: confirm ? () => setConfirmOpen(true) : onRun, children: busy ? busyLabel ?? label : label }));
+    if (!confirm) {
+        return button;
+    }
+    return (_jsxs(Popover, { open: confirmOpen, onOpenChange: setConfirmOpen, children: [_jsx(PopoverTrigger, { render: button }), _jsxs(PopoverContent, { className: "twa:w-auto twa:min-w-56", "data-name": "action-column-confirm", children: [confirm.title ? _jsx("div", { className: "twa:font-medium twa:mb-1", children: confirm.title }) : null, _jsx("div", { className: "twa:text-sm twa:mb-3", children: confirm.message ?? 'Are you sure?' }), _jsxs("div", { className: "twa:flex twa:justify-end twa:gap-2", children: [_jsx(SimpleButton, { variant: "text", tone: "neutral", onClick: () => setConfirmOpen(false), children: confirm.cancelLabel ?? 'Cancel' }), _jsx(SimpleButton, { variant: "raised", tone: confirm.tone === 'danger' ? 'error' : 'accent', onClick: () => {
+                                    setConfirmOpen(false);
+                                    onRun();
+                                }, children: confirm.confirmLabel ?? 'Confirm' })] })] })] }));
+};
+const ButtonControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    const ctx = buildControlContext(context, control);
+    const { busy, run } = useAsyncRun(rerender);
+    const style = resolveValueOrFunction(control.style, ctx);
+    const disabled = busy || Boolean(resolveValueOrFunction(control.disabled, ctx));
+    return (_jsx(ActionTriggerButton, { dataName: `action-button-${control.id ?? resolveValueOrFunction(control.label, ctx) ?? 'button'}`, icon: resolveValueOrFunction(control.icon, ctx), label: resolveValueOrFunction(control.label, ctx), busyLabel: control.busyLabel, tooltip: resolveValueOrFunction(control.tooltip, ctx), iconPosition: control.iconPosition, variant: style?.variant, tone: style?.tone, className: style?.className, disabled: disabled, busy: busy, confirm: control.confirm
+            ? {
+                title: resolveValueOrFunction(control.confirm.title, ctx),
+                message: resolveValueOrFunction(control.confirm.message, ctx),
+                confirmLabel: control.confirm.confirmLabel,
+                cancelLabel: control.confirm.cancelLabel,
+                tone: control.confirm.tone,
+            }
+            : undefined, adaptableApi: adaptableApi, onRun: () => run(() => control.onClick(ctx)) }));
+};
+const CommandControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    const ctx = buildControlContext(context, control);
+    const { busy, run } = useAsyncRun(rerender);
+    const defaults = COMMAND_DEFAULTS[control.command];
+    const style = resolveValueOrFunction(control.style, ctx);
+    const disabled = busy || Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const icon = resolveValueOrFunction(control.icon, ctx) ?? (defaults ? { name: defaults.icon } : undefined);
+    const tooltip = resolveValueOrFunction(control.tooltip, ctx) ?? defaults?.tooltip;
+    return (_jsx(ActionTriggerButton, { dataName: `action-command-${control.command}`, icon: icon, label: resolveValueOrFunction(control.label, ctx), tooltip: tooltip, iconPosition: control.iconPosition, variant: style?.variant, tone: style?.tone, className: style?.className, disabled: disabled, busy: busy, confirm: control.confirm
+            ? {
+                title: resolveValueOrFunction(control.confirm.title, ctx),
+                message: resolveValueOrFunction(control.confirm.message, ctx),
+                confirmLabel: control.confirm.confirmLabel,
+                cancelLabel: control.confirm.cancelLabel,
+                tone: control.confirm.tone,
+            }
+            : undefined, adaptableApi: adaptableApi, onRun: () => run(() => adaptableApi.actionColumnApi.internalApi.runActionCommand(control.command, ctx)) }));
+};
+const ToggleControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    const checked = isFieldBoundToggle(control)
+        ? getFieldBoundToggleValue(context.data, control.field)
+        : Boolean(resolveValueOrFunction(control.value, buildControlContext(context, control)));
+    const ctx = buildControlContext(context, control, checked);
+    const { busy, run } = useAsyncRun(rerender);
+    const disabled = busy || Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const label = resolveValueOrFunction(control.label, ctx);
+    const variant = control.variant ?? 'switch';
+    const dataName = `action-toggle-${control.id ?? label ?? 'toggle'}`;
+    const onToggle = (newChecked) => run(() => {
+        if (isFieldBoundToggle(control)) {
+            writeFieldBoundToggleValue(adaptableApi, control.field, newChecked, context);
+            return;
+        }
+        return control.onChange(newChecked, ctx);
+    });
+    if (variant === 'checkbox') {
+        return (_jsx(CheckBox, { "data-name": dataName, checked: checked, disabled: disabled, onChange: onToggle, children: label }));
+    }
+    if (variant === 'button') {
+        return (_jsx(Toggle, { "data-name": dataName, standalone: true, pressed: checked, onPressedChange: (pressed) => onToggle(pressed), children: label }));
+    }
+    return (_jsxs("span", { className: "twa:inline-flex twa:items-center twa:gap-1.5", children: [_jsx(Switch, { "data-name": dataName, checked: checked, disabled: disabled, onChange: onToggle }), label ? _jsx("span", { children: label }) : null] }));
+};
+const LinkControlView = (props) => {
+    const { control, context, adaptableApi } = props;
+    const ctx = buildControlContext(context, control);
+    if (resolveValueOrFunction(control.hidden, ctx)) {
         return null;
     }
-    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-    const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
-    return {
-        button,
-        buttonLabel,
-        buttonTooltip,
-        identifier,
+    const href = resolveValueOrFunction(control.href, ctx) ?? '#';
+    const label = resolveValueOrFunction(control.label, ctx);
+    const icon = resolveValueOrFunction(control.icon, ctx);
+    const disabled = Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const iconNode = renderControlIcon(adaptableApi, icon);
+    return (_jsxs("a", { "data-name": `action-link-${control.id ?? label ?? 'link'}`, href: disabled ? undefined : href, target: control.target ?? '_self', rel: control.target === '_blank' ? 'noopener noreferrer' : undefined, title: resolveValueOrFunction(control.tooltip, ctx), className: "ab-ActionColumn__link twa:inline-flex twa:items-center twa:gap-1", "aria-disabled": disabled, style: disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined, children: [control.iconPosition === 'end' ? null : iconNode, label, control.iconPosition === 'end' ? iconNode : null] }));
+};
+const SelectControlView = (props) => {
+    const { control, context, rerender } = props;
+    const value = resolveValueOrFunction(control.value, buildControlContext(context, control));
+    const ctx = buildControlContext(context, control, value);
+    const options = resolveValueOrFunction(control.options, ctx) ?? [];
+    const disabled = Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const { run } = useAsyncRun(rerender);
+    return (_jsxs(Select, { value: value ?? '', disabled: disabled, onValueChange: (newValue) => run(() => control.onChange(String(newValue), ctx)), children: [_jsx(SelectTrigger, { size: "sm", "data-name": `action-select-${control.id ?? 'select'}`, children: _jsx(SelectValue, { placeholder: control.placeholder, children: (selected) => options.find((option) => option.value === selected)?.label ?? control.placeholder ?? '' }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
+};
+const renderControlAsMenuItem = (control, context, adaptableApi, rerender, key) => {
+    const ctx = buildControlContext(context, control);
+    if (resolveValueOrFunction(control.hidden, ctx)) {
+        return null;
+    }
+    const disabled = Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const label = resolveValueOrFunction(control.label, ctx);
+    const runAndRefresh = (fn) => {
+        const result = fn();
+        if (result instanceof Promise) {
+            result.finally(() => setTimeout(rerender, 16));
+        }
+        else {
+            setTimeout(rerender, 16);
+        }
     };
-}
-const ActionButtons = (props) => {
-    const { buttons, adaptableApi, context, rerender } = props;
-    return (_jsx(_Fragment, { children: buttons.map((button, index) => {
-            const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
-            if (!buttonProps) {
-                return null;
+    switch (control.type) {
+        case 'menu': {
+            return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx)), label ?? 'More'] }), _jsx(DropdownMenuSubContent, { children: control.controls.map((child, index) => renderControlAsMenuItem(child, context, adaptableApi, rerender, index)) })] }, key));
+        }
+        case 'select': {
+            const options = resolveValueOrFunction(control.options, ctx) ?? [];
+            const currentValue = resolveValueOrFunction(control.value, ctx);
+            return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx)), label ?? 'Select'] }), _jsx(DropdownMenuSubContent, { children: options.map((option) => (_jsx(DropdownMenuItem, { onClick: () => runAndRefresh(() => control.onChange(String(option.value), buildControlContext(context, control, currentValue))), children: option.label }, String(option.value)))) })] }, key));
+        }
+        case 'toggle': {
+            const checked = isFieldBoundToggle(control)
+                ? getFieldBoundToggleValue(context.data, control.field)
+                : Boolean(resolveValueOrFunction(control.value, ctx));
+            return (_jsxs(DropdownMenuItem, { disabled: disabled, onClick: () => runAndRefresh(() => {
+                    const nextChecked = !checked;
+                    if (isFieldBoundToggle(control)) {
+                        writeFieldBoundToggleValue(adaptableApi, control.field, nextChecked, context);
+                        return;
+                    }
+                    return control.onChange(nextChecked, buildControlContext(context, control, checked));
+                }), children: [renderControlIcon(adaptableApi, { name: checked ? 'checked' : 'unchecked' }), label] }, key));
+        }
+        case 'link': {
+            const href = resolveValueOrFunction(control.href, ctx) ?? '#';
+            return (_jsxs(DropdownMenuItem, { disabled: disabled, onClick: () => window.open(href, control.target ?? '_self'), children: [renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx)), label] }, key));
+        }
+        case 'command': {
+            const defaults = COMMAND_DEFAULTS[control.command];
+            return (_jsxs(DropdownMenuItem, { disabled: disabled, onClick: () => runAndRefresh(() => adaptableApi.actionColumnApi.internalApi.runActionCommand(control.command, ctx)), children: [renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx) ??
+                        (defaults ? { name: defaults.icon } : undefined)), label ?? defaults?.tooltip] }, key));
+        }
+        case 'button': {
+            return (_jsxs(DropdownMenuItem, { disabled: disabled, onClick: () => runAndRefresh(() => control.onClick(ctx)), children: [renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx)), label] }, key));
+        }
+        default: {
+            return (_jsx(DropdownMenuItem, { disabled: true, children: label }, key));
+        }
+    }
+};
+const MenuControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    const ctx = buildControlContext(context, control);
+    const label = resolveValueOrFunction(control.label, ctx) ?? 'Actions';
+    const disabled = Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const menu = (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SimpleButton, { variant: "outlined", tone: "neutral", disabled: disabled, "data-name": `action-menu-${control.id ?? label}`, children: [control.variant === 'split' ? null : label, _jsx(ChevronDownIcon, { className: "twa:size-4" })] }) }), _jsx(DropdownMenuContent, { children: control.controls.map((child, index) => renderControlAsMenuItem(child, context, adaptableApi, rerender, index)) })] }));
+    if (control.variant === 'split' && control.primary) {
+        return (_jsxs("span", { className: "ab-ActionColumn__split twa:inline-flex twa:items-center", children: [_jsx(ActionControlView, { control: control.primary, context: context, adaptableApi: adaptableApi, rerender: rerender }), menu] }));
+    }
+    return menu;
+};
+const FormControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    const ctx = buildControlContext(context, control);
+    const [open, setOpen] = React.useState(false);
+    const [formData, setFormData] = React.useState({});
+    React.useEffect(() => {
+        if (open) {
+            const seed = control.getInitialData
+                ? control.getInitialData(ctx)
+                : getDefaultAdaptableFormData(control.form);
+            setFormData(seed ?? {});
+        }
+    }, [open]);
+    const style = resolveValueOrFunction(control.style, ctx);
+    const label = resolveValueOrFunction(control.label, ctx);
+    const disabled = Boolean(resolveValueOrFunction(control.disabled, ctx));
+    const trigger = (_jsx(SimpleButton, { "data-name": `action-form-${control.id ?? label ?? 'form'}`, variant: style?.variant ?? 'text', tone: style?.tone ?? 'none', disabled: disabled, tooltip: resolveValueOrFunction(control.tooltip, ctx), icon: renderControlIcon(adaptableApi, resolveValueOrFunction(control.icon, ctx)), iconPosition: control.iconPosition, className: style?.className, children: label }));
+    const formContext = { ...ctx };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { render: trigger }), _jsx(PopoverContent, { className: "twa:w-auto twa:min-w-72", "data-name": "action-column-form", children: _jsx(AdaptableFormComponent, { formDef: control.form, data: formData, displayTitle: true, api: adaptableApi, context: formContext, onChange: (newData) => setFormData(newData), onButtonClick: (button) => {
+                        button.onClick?.(button, { ...formContext, formData });
+                        setOpen(false);
+                        setTimeout(rerender, 16);
+                    } }) })] }));
+};
+const CustomControlView = (props) => {
+    const { control, context, adaptableApi } = props;
+    const ctx = buildControlContext(context, control);
+    const containerRef = React.useRef(null);
+    const [html, setHtml] = React.useState('');
+    React.useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return;
+        }
+        if (control.renderHTML) {
+            const result = control.renderHTML({
+                phase: 'onMount',
+                element,
+                ...adaptableApi.internalApi.buildBaseContext(),
+            });
+            setHtml(result ?? '');
+        }
+        else if (control.frameworkComponent && adaptableApi.gridApi.getVariant() !== 'react') {
+            adaptableApi.internalApi.createFrameworkComponent(element, control.frameworkComponent, 'actionColumn');
+        }
+        return () => {
+            if (control.renderHTML) {
+                control.renderHTML({
+                    phase: 'onDestroy',
+                    element,
+                    ...adaptableApi.internalApi.buildBaseContext(),
+                });
+            }
+            else if (control.frameworkComponent &&
+                adaptableApi.gridApi.getVariant() !== 'react' &&
+                !adaptableApi.isDestroyed()) {
+                adaptableApi.internalApi.destroyFrameworkComponent(element, control.frameworkComponent, 'actionColumn');
             }
-            const { button: actionButton, identifier } = buttonProps;
-            return (_jsx(AdaptableButtonView, { button: actionButton, context: context, api: adaptableApi, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn, iconSize: { height: 15, width: 15 }, "data-name": `action-button-${identifier}`, className: adaptableApi.internalApi.getStyleForButton(actionButton, context)?.className, onAfterClick: rerender }, actionButton.Uuid));
-        }) }));
+        };
+    }, []);
+    if (control.render && adaptableApi.gridApi.getVariant() === 'react') {
+        return _jsx("div", { className: "ab-ActionColumn__custom", children: control.render(ctx) });
+    }
+    return (_jsx("div", { ref: containerRef, className: "ab-ActionColumn__custom", dangerouslySetInnerHTML: control.renderHTML ? { __html: html } : undefined }));
 };
-const ActionColumnDropdown = (props) => {
-    const { buttons, adaptableApi, context, settings, rerender } = props;
-    const dropdownLabel = settings.dropdownLabel ?? 'Actions';
-    const items = buttons
-        .map((button, index) => {
-        const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
-        if (!buttonProps) {
+export const ActionControlView = (props) => {
+    const { control, context, adaptableApi, rerender } = props;
+    if (control.type !== 'link' && control.type !== 'custom') {
+        const hidden = resolveValueOrFunction(control.hidden, buildControlContext(context, control));
+        if (hidden) {
             return null;
         }
-        const { button: actionButton, buttonLabel, buttonTooltip } = buttonProps;
-        const disabled = Boolean(actionButton.disabled?.(actionButton, context));
-        const menuIcon = adaptableApi.internalApi.getIconForButton(actionButton, context, {
-            height: 15,
-            width: 15,
-        });
-        return {
-            label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? _jsx(IconComponent, { icon: menuIcon }) : undefined,
-            disabled,
-            onClick: () => {
-                actionButton.onClick?.(actionButton, context);
-                setTimeout(() => rerender(), 16);
-            },
-        };
-    })
-        .filter((item) => item != null);
-    if (!items.length) {
-        return null;
     }
-    return (_jsx(NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
+    switch (control.type) {
+        case 'button':
+            return (_jsx(ButtonControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'command':
+            return (_jsx(CommandControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'toggle':
+            return (_jsx(ToggleControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'link':
+            return _jsx(LinkControlView, { control: control, context: context, adaptableApi: adaptableApi });
+        case 'select':
+            return (_jsx(SelectControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'menu':
+            return (_jsx(MenuControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'form':
+            return (_jsx(FormControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }));
+        case 'custom':
+            return _jsx(CustomControlView, { control: control, context: context, adaptableApi: adaptableApi });
+        default:
+            return null;
+    }
+};
+const OVERFLOW_TRIGGER_WIDTH = 40;
+const CONTROL_GAP = 4;
+const OverflowRow = (props) => {
+    const { controls, context, adaptableApi, rerender } = props;
+    const containerRef = React.useRef(null);
+    const widthsRef = React.useRef([]);
+    const [visibleCount, setVisibleCount] = React.useState(controls.length);
+    React.useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return;
+        }
+        const measure = () => {
+            const nodes = Array.from(element.querySelectorAll(':scope > [data-ac-item]'));
+            nodes.forEach((node) => {
+                const index = Number(node.dataset.acItem);
+                if (Number.isFinite(index) && node.offsetWidth) {
+                    widthsRef.current[index] = node.offsetWidth;
+                }
+            });
+            const available = element.clientWidth;
+            const fits = (reserve) => {
+                let used = 0;
+                let count = 0;
+                for (let i = 0; i < controls.length; i++) {
+                    const width = widthsRef.current[i] ?? 60;
+                    if (used + width <= available - reserve) {
+                        used += width + CONTROL_GAP;
+                        count++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                return count;
+            };
+            let count = fits(0);
+            if (count < controls.length) {
+                count = fits(OVERFLOW_TRIGGER_WIDTH);
+            }
+            setVisibleCount(count);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [controls.length]);
+    const overflowControls = controls.slice(visibleCount);
+    return (_jsxs("div", { ref: containerRef, className: "ab-ActionColumn__row twa:flex twa:items-center twa:gap-1 twa:overflow-hidden", children: [controls.slice(0, visibleCount).map((control, index) => (_jsx("span", { "data-ac-item": index, children: _jsx(ActionControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }) }, control.id ?? index))), overflowControls.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(SimpleButton, { variant: "text", tone: "none", "data-name": "action-column-overflow", children: _jsx(ChevronDownIcon, { className: "twa:size-4" }) }) }), _jsx(DropdownMenuContent, { children: overflowControls.map((control, index) => renderControlAsMenuItem(control, context, adaptableApi, rerender, index)) })] })) : null] }));
 };
 const ActionColumnCellContent = (props) => {
-    const { buttons, actionColumn, adaptableApi, context, rerender } = props;
-    const settings = actionColumn.actionColumnSettings ?? {};
-    if (settings.displayMode === 'dropdown') {
-        return (_jsx(ActionColumnDropdown, { buttons: buttons, adaptableApi: adaptableApi, context: context, settings: settings, rerender: rerender }));
+    const { controls, actionColumn, adaptableApi, context, rerender } = props;
+    const settings = actionColumn.settings ?? {};
+    if (settings.overflow === 'menu') {
+        return (_jsx(OverflowRow, { controls: controls, context: context, adaptableApi: adaptableApi, rerender: rerender }));
     }
-    return (_jsx(ActionButtons, { buttons: buttons, adaptableApi: adaptableApi, context: context, rerender: rerender }));
+    return (_jsx("div", { className: "ab-ActionColumn__row twa:flex twa:items-center twa:gap-1", children: controls.map((control, index) => (_jsx(ActionControlView, { control: control, context: context, adaptableApi: adaptableApi, rerender: rerender }, control.id ?? index))) }));
 };
 function shouldRenderActionColumnForRow(actionColumn, adaptableApi, node) {
     const isGroupedRow = adaptableApi.gridApi.isGroupRowNode(node);
@@ -93,8 +402,8 @@ export const ReactActionColumnRenderer = (props) => {
         console.warn('Adaptable not found in context of ActionColumnRenderer');
         return null;
     }
-    const { actionButtons, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(props.colDef);
-    if (!actionColumn || !actionButtons.length) {
+    const { controls, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndControls(props.colDef);
+    if (!actionColumn || !controls.length) {
         return null;
     }
     if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, props.node)) {
@@ -113,21 +422,21 @@ export const ReactActionColumnRenderer = (props) => {
         };
     }, []);
     const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node, props.api);
-    const buttonContext = {
+    const controlContext = {
         actionColumn,
         primaryKeyValue: pkValue,
         rowNode: props.node,
         ...adaptable.api.internalApi.buildBaseContext(),
         data: props.data,
     };
-    return (_jsx("div", { className: "ab-ActionColumn", children: _jsx(ActionColumnCellContent, { buttons: actionButtons, actionColumn: actionColumn, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender }) }));
+    return (_jsx("div", { className: "ab-ActionColumn", children: _jsx(ActionColumnCellContent, { controls: controls, actionColumn: actionColumn, adaptableApi: adaptable.api, context: controlContext, rerender: rerender }) }));
 };
 export class ActionColumnRenderer {
     eGui;
     eventListener;
     unmountReactRoot;
     layoutSwitchUnsubscribe;
-    actionButtons;
+    controls;
     actionColumn;
     init(params) {
         const adaptable = params.context.__adaptable;
@@ -135,11 +444,11 @@ export class ActionColumnRenderer {
             console.warn('Adaptable not found in context of ActionColumnRenderer');
             return null;
         }
-        const { actionButtons, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
-        if (!actionColumn || !actionButtons.length) {
+        const { controls, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndControls(params.colDef);
+        if (!actionColumn || !controls.length) {
             return;
         }
-        this.actionButtons = actionButtons;
+        this.controls = controls;
         this.actionColumn = actionColumn;
         this.eGui = document.createElement('div');
         this.eGui.className = 'ab-ActionColumn';
@@ -148,7 +457,7 @@ export class ActionColumnRenderer {
             return;
         }
         const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node, params.api);
-        const buttonContext = {
+        const controlContext = {
             actionColumn,
             primaryKeyValue: pkValue,
             rowNode: params.node,
@@ -157,20 +466,14 @@ export class ActionColumnRenderer {
         };
         const eGui = this.eGui;
         const doRender = () => {
-            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(ActionColumnCellContent({
-                buttons: this.actionButtons,
-                actionColumn: this.actionColumn,
-                context: buttonContext,
-                rerender: doRender,
-                adaptableApi: adaptable.api,
-            }), adaptable), eGui);
+            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(_jsx(ActionColumnCellContent, { controls: this.controls, actionColumn: this.actionColumn, context: controlContext, rerender: doRender, adaptableApi: adaptable.api }), adaptable), eGui);
         };
         this.render = doRender;
         this.layoutSwitchUnsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
             if (eventInfo.actionName === LAYOUT_SELECT) {
                 if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
-                    const { actionButtons: freshActionButtons, actionColumn: freshActionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
-                    this.actionButtons = freshActionButtons;
+                    const { controls: freshControls, actionColumn: freshActionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndControls(params.colDef);
+                    this.controls = freshControls;
                     this.actionColumn = freshActionColumn;
                     doRender();
                 }

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,5 +1,5 @@
-import { Badge } from '../../View/Components/Badge';
-import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
+import { Badge } from '../../View/StyledColumn/Badge';
+import { renderWithAdaptableContext } from '../../View/AdaptableContext';
 import * as React from 'react';
 import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const OVERFLOW_CLASS = {
@@ -65,16 +65,12 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 return;
             }
             for (const value of params.value) {
-                const predicateDefHandlerContext = {
+                const badgeContext = {
                     value: value,
-                    rawValue: value,
-                    oldValue: null,
-                    displayValue: params.formatValue,
                     node: params.node,
                     column: abColumn,
-                    ...adaptableApi.internalApi.buildBaseContext(),
                 };
-                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
+                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, badgeContext);
                 const formattedValue = badge?.IconProperties?.IconOnly
                     ? ''
                     : params.formatValue?.(value) ?? value ?? '';
@@ -91,16 +87,12 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
         }
         renderSingularValues(params, adaptableApi) {
             let formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
-            const predicateDefHandlerContext = {
+            const badgeContext = {
                 value: params.value,
-                rawValue: params.value,
-                oldValue: null,
-                displayValue: params.formatValue,
                 node: params.node,
                 column: abColumn,
-                ...adaptableApi.internalApi.buildBaseContext(),
             };
-            const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, badgeContext);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
             if (isNullValue || !badge) {
                 this.eGui.innerHTML = formattedValue;

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IconComponent, isAdaptableSystemIcon, isAdaptableCustomIcon, isAdaptableElementIcon, } from '../../components/Icon';
-import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
+import { renderWithAdaptableContext } from '../../View/AdaptableContext';
 import Helper from '../../Utilities/Helpers/Helper';
 import { getIconStylePresetMappings, isUnsupportedColumnDataTypeForIconStyle, } from '../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';

package/src/agGrid/cellRenderers/TwoLineTooltip.d.ts

@@ -0,0 +1,14 @@
+import type { ITooltipComp, ITooltipParams } from 'ag-grid-enterprise';
+/**
+ * AG Grid cell tooltip that renders a string with `\n` as two (or more) lines.
+ *
+ * AG Grid's default tooltip uses `white-space: normal`, which collapses newlines
+ * to spaces — this component inserts `<br>` instead.
+ *
+ * Not related to `components/Tooltip` (React UI hover tip for chrome).
+ */
+export declare class TwoLineTooltip implements ITooltipComp {
+    private eGui;
+    init(params: ITooltipParams): void;
+    getGui(): HTMLElement;
+}

package/src/agGrid/cellRenderers/TwoLineTooltip.js

@@ -0,0 +1,18 @@
+export class TwoLineTooltip {
+    eGui;
+    init(params) {
+        this.eGui = document.createElement('div');
+        this.eGui.classList.add('ag-tooltip', 'ab-TwoLineTooltip');
+        const text = params.value == null ? '' : String(params.value);
+        const lines = text.split('\n');
+        lines.forEach((line, index) => {
+            if (index > 0) {
+                this.eGui.appendChild(document.createElement('br'));
+            }
+            this.eGui.appendChild(document.createTextNode(line));
+        });
+    }
+    getGui() {
+        return this.eGui;
+    }
+}

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
+import { renderWithAdaptableContext } from '../../../View/AdaptableContext';
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
+import { renderWithAdaptableContext } from '../../../View/AdaptableContext';
 import { InternalAdaptableNumberEditor, } from './InternalAdaptableNumberEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
+import { renderWithAdaptableContext } from '../../../View/AdaptableContext';
 import { InternalAdaptablePercentageEditor, } from './InternalAdaptablePercentageEditor';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { getStartValue } from '../AdaptableNumberEditor';