@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -8,6 +8,25 @@ import { isUnsupportedColumnDataTypeForIconStyle } from '../../Utilities/Helpers
 import { errorOnce } from '../AdaptableLogger';
 const DEFAULT_SIZE = 18;
 const DEFAULT_GAP = 4;
+const normaliseIconMappingKey = (key, matchMode) => {
+    if (typeof key === 'string' && matchMode === 'CaseInsensitive') {
+        return key.toLowerCase();
+    }
+    return key;
+};
+const resolveIconStyleMappingParts = (iconStyle) => {
+    const presetMappings = iconStyle.Preset
+        ? getIconStylePresetMappings(iconStyle.Preset)
+        : [];
+    const userMappings = iconStyle.Mappings ?? [];
+    if (presetMappings.length === 0 || userMappings.length === 0) {
+        return { presetMappings, userMappings };
+    }
+    const matchMode = iconStyle.MatchMode ?? 'Exact';
+    const overrideKeys = new Set(userMappings.map((m) => normaliseIconMappingKey(m.Key, matchMode)));
+    const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseIconMappingKey(p.Key, matchMode)));
+    return { presetMappings: filteredPreset, userMappings };
+};
 /**
  * Resolve the **effective** mapping list for an `IconStyle`:
  *
@@ -27,24 +46,33 @@ const DEFAULT_GAP = 4;
 export const resolveEffectiveIconStyleMappings = (iconStyle) => {
     if (!iconStyle)
         return [];
-    const presetMappings = iconStyle.Preset
-        ? getIconStylePresetMappings(iconStyle.Preset)
-        : [];
-    const userMappings = iconStyle.Mappings ?? [];
+    const { presetMappings, userMappings } = resolveIconStyleMappingParts(iconStyle);
     if (presetMappings.length === 0)
         return userMappings;
-    if (userMappings.length === 0)
-        return presetMappings;
-    const matchMode = iconStyle.MatchMode ?? 'Exact';
-    const normaliseKey = (k) => {
-        if (typeof k === 'string' && matchMode === 'CaseInsensitive') {
-            return k.toLowerCase();
+    if (userMappings.length === 0) {
+        return iconStyle.Preset ? getIconStylePresetMappings(iconStyle.Preset) : [];
+    }
+    return [...presetMappings, ...userMappings];
+};
+/**
+ * Mapping list for wizard / settings summaries: custom mappings first so
+ * user-authored entries are always visible, then any remaining preset
+ * entries (after override filtering).
+ */
+export const resolveIconStyleMappingsForSummaryPreview = (iconStyle) => {
+    if (!iconStyle)
+        return [];
+    const { presetMappings, userMappings } = resolveIconStyleMappingParts(iconStyle);
+    if (userMappings.length === 0) {
+        if (presetMappings.length > 0) {
+            return presetMappings;
         }
-        return k;
-    };
-    const overrideKeys = new Set(userMappings.map((m) => normaliseKey(m.Key)));
-    const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseKey(p.Key)));
-    return [...filteredPreset, ...userMappings];
+        return iconStyle.Preset ? getIconStylePresetMappings(iconStyle.Preset) : [];
+    }
+    if (presetMappings.length === 0) {
+        return userMappings;
+    }
+    return [...userMappings, ...presetMappings];
 };
 /**
  * Look up `cellValue` in the mapping list using the configured match mode.

package/src/agGrid/createAgGridIcon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+export declare function createAgGridIcon(name: string): HTMLElement;

package/src/agGrid/createAgGridIcon.js

@@ -0,0 +1,16 @@
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+export function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { flattenAdaptableFormFields, isAdaptableFormFieldDisabled, isAdaptableFormFieldGroup, isAdaptableFormFieldGroupHidden, isAdaptableFormFieldHidden, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
+import { flattenAdaptableFormFields, isAdaptableFormFieldDisabled, isAdaptableFormFieldGroup, isAdaptableFormFieldGroupHidden, isAdaptableFormFieldHidden, resolveSelectPlaceholder, resolveSelectValueAfterClear, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
 import FormLayout, { FormRow } from '../FormLayout';
 import Input from '../Input';
 import { AdaptableButtonView, } from '../../View/Components/AdaptableButton';
@@ -204,10 +204,12 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                 break;
             }
             case 'select': {
-                const items = resolveOptions(field).map((item) => ({
+                const optionItems = resolveOptions(field);
+                const items = optionItems.map((item) => ({
                     value: item.value,
                     label: item.label,
                 }));
+                const selectPlaceholder = resolveSelectPlaceholder(field, optionItems);
                 // The underlying SingleCombobox / MultiCombobox manage their own
                 // popup-based focus; we wrap them in a labelled `role="group"` so
                 // assistive tech announces "<label> group" when focus enters and
@@ -225,10 +227,10 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                     // anything else (e.g. legacy string defaults) to [] so the
                     // underlying combobox never receives a non-array value.
                     const selected = Array.isArray(value) ? value : [];
-                    control = (_jsx(Box, { ...groupProps, children: _jsx(MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: field.placeholder }) }));
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: selectPlaceholder }) }));
                 }
                 else {
-                    control = (_jsx(Box, { ...groupProps, children: _jsx(SingleCombobox, { items: items, onValueChange: (newValue) => setFieldValue(field.name, newValue), value: value, disabled: isDisabled, placeholder: field.placeholder }) }));
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(SingleCombobox, { items: items, onValueChange: (newValue) => setFieldValue(field.name, resolveSelectValueAfterClear(field, newValue)), value: value, disabled: isDisabled, placeholder: selectPlaceholder }) }));
                 }
                 break;
             }
@@ -354,10 +356,13 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
         }
         return items
             .filter((field) => !isAdaptableFormFieldHidden(field, data, context))
-            .map((field) => {
+            .map((field, index) => {
             const useFor = field.fieldType !== 'radio' && field.fieldType !== 'textOutput';
             const requiredMarker = field.required ? (_jsx("span", { className: "ab-Form_required-marker", "aria-hidden": "true", children: ' *' })) : null;
-            return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: { columnGap: 'var(--ab-base-space)' }, children: [field.label ? (useFor ? (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] })) : (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] }))) : null, renderField(field)] }, field.name));
+            return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: {
+                    columnGap: 'var(--ab-base-space)',
+                    marginLeft: index > 0 ? 'var(--ab-base-space)' : undefined,
+                }, children: [field.label ? (useFor ? (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] })) : (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] }))) : null, renderField(field)] }, field.name));
         });
     };
     const renderRowsEntry = (entry, index) => {

package/src/components/Combobox/VirtualizedList.js

@@ -36,16 +36,16 @@ export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderC
                     return null;
                 }
                 const isUncreatedCreatable = item.creatable && !item.created;
-                const textLabel = showItemTooltip ? getItemTextLabel(item) : undefined;
-                const tooltipText = textLabel != null
+                const itemText = getItemTextLabel(item);
+                const tooltipText = showItemTooltip && itemText != null
                     ? isUncreatedCreatable
-                        ? `Create "${textLabel}"`
-                        : textLabel
+                        ? `Create "${itemText}"`
+                        : itemText
                     : undefined;
                 const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
                 const itemLabel = renderItemLabel ? (renderItemLabel(label, item)) : (_jsx("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
                 const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), itemLabel] })) : (itemLabel);
-                const itemElement = (_jsx(ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, style: {
+                const itemElement = (_jsx(ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, "aria-label": itemText ?? undefined, style: {
                         position: 'absolute',
                         left: `var(--ab-base-space)`,
                         right: `var(--ab-base-space)`,

package/src/components/Combobox/comboboxUtils.d.ts

@@ -9,7 +9,9 @@ export type ComboboxItemType = {
     value: any;
     disabled?: boolean;
 };
-export declare function getItemTextLabel<T extends ComboboxItemType>(item: T): string;
+export declare function getItemTextLabel<T extends ComboboxItemType>(item: T & {
+    tooltip?: string;
+}): string;
 export type ComboboxGroupType<T extends ComboboxItemType> = {
     label: React.ReactNode;
     items: T[];
@@ -45,6 +47,7 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
     renderItemLabel?: (defaultLabel: React.ReactNode, item: T) => React.ReactNode;
     multiple?: boolean;
     showClear?: boolean;
+    clearOnEscape?: boolean;
     searchable?: boolean | 'inline' | 'menulist';
     /**
      * Custom filter function, or `null` to disable built-in filtering

package/src/components/Combobox/comboboxUtils.js

@@ -5,6 +5,8 @@ export function getItemTextLabel(item) {
         return item.label;
     if (typeof item.label === 'number')
         return String(item.label);
+    if (typeof item.tooltip === 'string')
+        return String(item.tooltip);
     return String(item.value);
 }
 export function valueToItem(stringValue, lookup) {

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

@@ -35,4 +35,5 @@ export declare const MultiCombobox: <T extends ComboboxItemType>(props: MultiCom
 export type GridFilterComboboxProps<T extends ComboboxItemType> = Omit<MultiComboboxProps<T>, 'showSelectAllCheckbox' | 'searchable' | 'renderInput' | 'renderInputValues'> & {
     showSelectedCount?: boolean;
 };
+export declare const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME: string;
 export declare const GridFilterCombobox: <T extends ComboboxItemType>(props: GridFilterComboboxProps<T>) => React.JSX.Element;

package/src/components/Combobox/index.js

@@ -31,9 +31,13 @@ const AdaptableComboboxList = (props) => {
         const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
         const itemLabel = props.renderItemLabel ? props.renderItemLabel(label, item) : label;
         const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), " ", itemLabel] })) : (itemLabel);
-        const textLabel = props.showItemTooltip ? getItemTextLabel(item) : undefined;
-        const tooltipText = textLabel != null ? (isUncreatedCreatable ? `Create "${textLabel}"` : textLabel) : undefined;
-        const itemElement = (_jsx(ComboboxItem, { value: item, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: itemContent }, item.value));
+        const itemText = getItemTextLabel(item);
+        const tooltipText = props.showItemTooltip && itemText != null
+            ? isUncreatedCreatable
+                ? `Create "${itemText}"`
+                : itemText
+            : undefined;
+        const itemElement = (_jsx(ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: itemContent }, item.value));
         if (tooltipText != null) {
             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
         }
@@ -88,9 +92,15 @@ const AdaptableCombobox_Root = (props) => {
     const internalDefaultValue = props.multiple
         ? valueToItems(props.defaultValue, itemByValue)
         : valueToItem(props.defaultValue, itemByValue);
-    const handleValueChange = (next) => {
+    const handleValueChange = (next, eventDetails) => {
         if (!props.onValueChange)
             return;
+        // base-ui clears the selected value when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
         if (Array.isArray(next)) {
             props.onValueChange(toStringValues(next), next);
         }
@@ -98,6 +108,15 @@ const AdaptableCombobox_Root = (props) => {
             props.onValueChange(toStringValue(next), next);
         }
     };
+    const handleInputValueChange = (next, eventDetails) => {
+        // base-ui blanks the input text (and then the selected value) when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
+        props.onInputValueChange?.(next);
+    };
     let comboboxItems = props.groups ?? props.items;
     if (props.isCreatable && allItems[allItems.length - 1]?.creatable) {
         // let's detect all "creatable" items and add them to the combobox items
@@ -113,7 +132,7 @@ const AdaptableCombobox_Root = (props) => {
         }
         comboboxItems = [...comboboxItems, ...creatableItems];
     }
-    return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
+    return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
 };
 const useGetAllItems = (props) => {
     const allItems = props.groups
@@ -495,6 +514,16 @@ export const MultiCombobox = (props) => {
     const showItemTooltip = props.showItemTooltip ?? !!props.virtualized;
     return searchable === 'menulist' ? (_jsx(MultiCombobox_MenuListSearchable, { renderInput: false, ...props, multiple: true, open: open, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip })) : (_jsx(MultiCombobox_SimpleSearchable, { ...props, open: open, multiple: true, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip }));
 };
+export const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = cn(
+// remove the border/shadow and position it properly
+// to adjust for outline on the input
+'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 
+// more adjustments for very compact ag grid themes
+'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 
+// also for very compact ag grid themes
+// make the floating-filter combobox a size container so the toggle can
+// shrink purely via CSS when the control is small in height (see ColumnFilter/base.css)
+'twa:[.ab-FloatingFilter_&]:[container-type:size]');
 export const GridFilterCombobox = (props) => {
     const { showSelectedCount = false, placeholder = 'Select...', ...comboboxProps } = props;
     const sharedProps = {
@@ -514,16 +543,7 @@ export const GridFilterCombobox = (props) => {
             return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && items.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", items.length, ")"] })), children] }) }));
         },
     };
-    const className = cn(
-    // remove the border/shadow and position it properly
-    // to adjust for outline on the input
-    'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 
-    // more adjustments for very compact ag grid themes
-    'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 
-    // also for very compact ag grid themes
-    // make the floating-filter combobox a size container so the toggle can
-    // shrink purely via CSS when the control is small in height (see ColumnFilter/base.css)
-    'twa:[.ab-FloatingFilter_&]:[container-type:size]', comboboxProps.className);
+    const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);
     const mergedProps = {
         ...sharedProps,
         ...comboboxProps,

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -19,6 +19,6 @@ function UnusedItem({ unusedItem, disabled }) {
     const title = currentItem ? currentItem.Title : unusedItem;
     return (_jsx(DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsx("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+            return (_jsx("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-primary-foreground twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
         } }));
 }

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -151,7 +151,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? (_jsx(VarEditorButton, { className: buttonClassName }, functionName)) : (_jsx(EditorButton, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
                                         })
                                             .filter(Boolean);
-                                        return (_jsxs(Box, { className: clsx('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions.Humanize(groupName) }), fns] }, groupName));
+                                        return (_jsxs(Box, { className: clsx('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: StringExtensions.Humanize(groupName) }), fns] }, groupName));
                                     }) })] }), _jsx(Box, { className: clsx(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground'), children: overFunction ? (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), _jsx(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : (_jsx(Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: _jsxs("ul", { children: [_jsxs("li", { children: ["Hover over a Function to learn more", _jsx("br", {}), _jsx("br", {})] }), _jsx("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: _jsx(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: _jsx(Icon, { name: "equation" }) }) }) }));
 };
 export function BaseEditorInput(props) {

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tag } from '../Tag';
 import { Box } from '../Flex';
-const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-1 twa:inline-block';
+const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-1 twa:inline-block';
 export const ExpressionFunctionDocumentation = (props) => {
     return props.expressionFunction ? (_jsxs(Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal", children: [props.expressionFunction.description && (_jsx(Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description", children: props.expressionFunction.description })), props.expressionFunction.signatures && (_jsxs(Box, { "data-name": "expression-editor-documentation-signatures", children: [_jsx("b", { children: "Signatures" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.signatures.map((signature, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: signature }) }, index))) })] })), props.expressionFunction.examples && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Examples" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.examples.map((example, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: example }) }, index))) })] })), props.expressionFunction.returnType && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Return Type" }), _jsx(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1", children: props.expressionFunction.returnType })] }))] })) : null;
 };

package/src/components/Input/NumberInput.js

@@ -26,7 +26,7 @@ export const NumberInput = React.forwardRef((props, ref) => {
             // only set when a valid numer
             props.onChange(newVal);
         }
-    }, []);
+    }, [props.onChange]);
     React.useEffect(() => {
         setValue(props.value);
     }, [props.value]);

package/src/components/Panel/index.js

@@ -19,7 +19,7 @@ const Body = ({ children, bodyScroll, variant, className, style, }) => {
         bodyScroll = 'auto';
     }
     const bodyCls = clsx(DEFAULT_BODY_CLS, `${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
-        'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
+        'twa:bg-primarylight twa:text-primary-foreground twa:border-0': variant === 'modern',
     }, className);
     return (_jsx(Box, { style: style, className: bodyCls, children: children }));
 };

package/src/components/SimpleButton/index.js

@@ -78,11 +78,11 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         'twa:*:z-1', 
         // all svgs inside should be aligned middle
         'twa:[&_svg]:align-middle', 
-        // 'twa:text-text-on-primary',
+        // 'twa:text-primary-foreground',
         // the text variant has the background applied on the before pseudo element
         // so let's configure the before pseudo element for all buttons here
         'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${baseClassName}--disabled` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
-            'twa:text-text-on-primary': tone == 'neutral',
+            'twa:text-primary-foreground': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
             'twa:text-accent': tone === 'accent',
@@ -95,11 +95,11 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             ? 'twa:bg-background twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
-                'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
+                'twa:text-primary-foreground twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
                 'twa:bg-success twa:text-text-on-success': tone == 'success',
                 'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
                 'twa:bg-transparent': tone == 'none',
-                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
+                'twa:bg-primary twa:text-primary-foreground': tone == 'neutral',
                 'twa:bg-error twa:text-text-on-error': tone == 'error',
                 'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
                 'twa:bg-info twa:text-text-on-info': tone == 'info',

package/src/components/Toggle/Toggle.js

@@ -40,7 +40,7 @@ export const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) =>
         // backgrounds
         {
             'twa:text-inherit twa:bg-transparent': !pressed,
-            'twa:hover:bg-primarylight twa:hover:text-text-on-primary': !pressed,
+            'twa:hover:bg-primarylight twa:hover:text-primary-foreground': !pressed,
             [`${baseClassName}--pressed`]: pressed,
             'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
         }, {

package/src/components/Toggle/ToggleGroup.js

@@ -20,7 +20,7 @@ export const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx(Flex, { ref: ref, tabIndex: 0, className: clsx('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx(Flex, { ref: ref, tabIndex: 0, className: clsx('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-primary-foreground', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
             // make the shadow of child Toggle buttons invisible when the group is not focused
             'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                 const index = context.toggleButtons.findIndex((btn) => contains(btn.node, event.target));

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

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { ChevronRightIcon, ChevronDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, } from 'lucide-react';
 import { TreeExpandState, TreeSelectionState } from '../../InfiniteTable';
-import { MultiCombobox } from '../../Combobox';
+import { GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, MultiCombobox, } from '../../Combobox';
 import { ComboboxChip } from '../../ui/combobox';
 import { toDisplayValueDefault, toDisplayValueFromOptionTree } from '../treeUtils';
 import { cn } from '../../../lib/utils';
@@ -516,10 +516,6 @@ export function GridFilterTreeDropdown(props) {
         }
         return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
     }, [placeholder, showSelectedCount]);
-    const mergedClassName = cn(
-    // Match the restyling GridFilterCombobox uses: remove the field border,
-    // flatten the shadow and absolutely position so the component fits the
-    // grid's floating-filter input box.
-    'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', className);
+    const mergedClassName = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, className);
     return (_jsx(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }

package/src/env.js

@@ -1,5 +1,5 @@
 export 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: 1780656122892 || Date.now(),
-    VERSION: "23.0.0-canary.3" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1781098683970 || Date.now(),
+    VERSION: "23.0.0-canary.5" || '--current-version--',
 };

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSizingMap, LayoutRowSelection, RowGroupDisplayType } from '../../AdaptableState/LayoutState';
+import { ColumnSizingMap, LayoutOpenChart, LayoutRowSelection, RowGroupDisplayType } from '../../AdaptableState/LayoutState';
 import { XOR } from '../../Utilities/Extensions/TypeExtensions';
 /**
  * Defines how a Column is sorted
@@ -53,6 +53,10 @@ export interface BaseLayoutModel {
     Ignore_AdaptableVersion?: string;
     Ignore_Uuid?: string;
     Ignore_Metadata?: any;
+    /**
+     * AG Grid charts to open when this layout is selected (not used by LayoutManager)
+     */
+    Ignore_OpenCharts?: LayoutOpenChart[];
     /**
      * The Layout Name
      */

package/src/layout-manager/src/index.js

@@ -10,7 +10,6 @@ import { destructurePivotColumnId } from './destructurePivotColumnId';
 import { isPivotAggTotalColumn } from './isPivotAggTotalColumn';
 import { isPivotGrandTotal } from './isPivotGrandTotal';
 import { isPivotColumnTotal } from './isPivotColumnTotal';
-import { isParameterizedAggFuncName } from '../../Aggregation/ParameterizedAggregationRegistry';
 import { getMarker } from '../../devTools';
 export const PIVOT_ANY_TOTAL_COL_TYPE = 'pivotAnyTotal';
 export const PIVOT_GRAND_TOTAL_COL_TYPE = 'pivotGrandTotal';
@@ -523,24 +522,18 @@ export class LayoutManager extends LMEmitter {
             });
         }
         if (gridState.aggregation) {
-            TableAggregationColumns = gridState.aggregation.aggregationModel
-                .map((agg) => {
+            TableAggregationColumns = gridState.aggregation.aggregationModel.map((agg) => {
                 const prevAggForColumn = prevAggColumnsMap?.[agg.colId];
                 if (prevAggForColumn && prevAggForColumn.AggFunc.aggFunc === agg.aggFunc) {
                     return prevAggForColumn;
                 }
-                // Parameterized aggs require layout metadata (e.g. weight column); ignore incomplete picks.
-                if (isParameterizedAggFuncName(agg.aggFunc)) {
-                    return prevAggForColumn ?? null;
-                }
                 return {
                     ColumnId: agg.colId,
                     AggFunc: {
                         aggFunc: agg.aggFunc,
                     },
                 };
-            })
-                .filter(Boolean);
+            });
         }
         // if there's a current layout set
         // we want to only return the AG Grid columns that are also in the current layout