@adaptabletools/adaptable 23.0.0-canary.2 → 23.0.0-canary.4

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -55,9 +55,7 @@ export const FormatColumnScopeWizardSection = (props) => {
                 newData.Rule.BooleanExpression = '';
             }
             else {
-                const validPredicateIds = new Set(api.formatColumnApi.internalApi
-                    .getFormatColumnDefsForScope(Scope)
-                    .map((def) => def.id));
+                const validPredicateIds = new Set(api.formatColumnApi.internalApi.getFormatColumnDefsForScope(Scope).map((def) => def.id));
                 newData.Rule = {
                     Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
                         // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
@@ -82,11 +80,8 @@ export const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewScopeComponent, { descriptions: {
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { descriptions: {
                                 rowScope: 'Format all columns in the row',
                                 columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
-                            FORMAT_COLUMN_ROW_KINDS.slice(0, 2),
-                            FORMAT_COLUMN_ROW_KINDS.slice(2),
-                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:px-2 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [FORMAT_COLUMN_ROW_KINDS.slice(0, 2), FORMAT_COLUMN_ROW_KINDS.slice(2)].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
 };

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -22,7 +22,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,

package/src/View/Layout/LayoutViewPanel.js

@@ -33,29 +33,31 @@ const LayoutViewPanelComponent = (props) => {
     const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
+    const toLayoutSelectItems = (layouts) => layouts.map((layout) => ({
+        label: layout.Name,
+        value: layout.Name,
+    }));
     const tableLayoutsArray = Layouts.filter((layout) => !isPivotLayout(layout));
     const pivotLayoutsArray = Layouts.filter((layout) => isPivotLayout(layout));
-    const layoutGroups = [
-        tableLayoutsArray.length > 0
-            ? {
-                label: 'Table Layouts',
-                items: tableLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-        pivotLayoutsArray.length > 0
-            ? {
-                label: 'Pivot Layouts',
-                items: pivotLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-    ].filter(Boolean);
-    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: _jsx(SingleSelect, { groups: layoutGroups, showItemTooltip: true, disabled: isErrorLayout, className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`, ariaLabel: 'Select Layout', value: layoutEntity ? layoutEntity.Name : null, onValueChange: (layout) => onSelectLayout(layout) }) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    const showLayoutTypeHeadings = tableLayoutsArray.length > 0 && pivotLayoutsArray.length > 0;
+    const layoutSelectCommonProps = {
+        showItemTooltip: true,
+        disabled: isErrorLayout,
+        className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`,
+        ariaLabel: 'Select Layout',
+        value: layoutEntity ? layoutEntity.Name : null,
+        onValueChange: (layout) => onSelectLayout(layout),
+    };
+    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: showLayoutTypeHeadings ? (_jsx(SingleSelect, { ...layoutSelectCommonProps, groups: [
+                        {
+                            label: 'Table Layouts',
+                            items: toLayoutSelectItems(tableLayoutsArray),
+                        },
+                        {
+                            label: 'Pivot Layouts',
+                            items: toLayoutSelectItems(pivotLayoutsArray),
+                        },
+                    ] })) : (_jsx(SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
                     ? GeneralConstants.READ_ONLY_STYLE
                     : '', `ab-${elementType}__Layout__wrap`), children: [_jsx(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), _jsx(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), _jsx(NewDropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
                             {

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -423,7 +423,7 @@ export const ColumnsSection = (props) => {
                                     const visible = isColumnVisible({ columnId: selectedColumnId, layout });
                                     handleColumnVisibilityChange(selectedColumnId, !visible);
                                 }
-                            }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                            }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
                                                 ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
                                                     ? true
                                                     : visibleIdsCurrentlyDisplayed.length
@@ -460,7 +460,7 @@ const ColumnPropertiesEditor = (props) => {
     const adaptable = useAdaptable();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
     if (!props.column) {
-        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
+        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
     }
     const { column } = props;
     const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
@@ -472,7 +472,7 @@ const ColumnPropertiesEditor = (props) => {
     const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    return (_jsxs(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
+    return (_jsxs(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-background twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
                                             props.onColumnNameChange(props.column.columnId, event.target.value);
                                         }, value: customHeader })] }), _jsxs(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsx(Box, { children: "Width:" }), " ", _jsx(Box, { children: "Flex:" }), _jsx(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                                             let value = parseFloat(event.target.value);

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -12,7 +12,7 @@ import { CheckBox } from '../../../../components/CheckBox';
 export const PivotColumnsSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (_jsx(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) }));
+    return (_jsx(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-background", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) }));
 };
 export const PivotColumnsSection = (props) => {
     const adaptable = useAdaptable();

package/src/View/Layout/Wizard/sections/RowSelectionSection.js

@@ -69,5 +69,5 @@ export const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Selection Mode" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [_jsx(Radio, { value: false, children: "Disabled" }), _jsx(Radio, { value: "singleRow", children: "Single Row" }), _jsx(Radio, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Selection Column Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Select All (in Header) Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Selection Mode" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [_jsx(Radio, { value: false, children: "Disabled" }), _jsx(Radio, { value: "singleRow", children: "Single Row" }), _jsx(Radio, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Selection Column Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Select All (in Header) Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };

package/src/View/Layout/Wizard/sections/SettingsSection.js

@@ -20,5 +20,5 @@ export const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
 };

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-defaultbackground)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};
+import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};

package/src/View/StyledColumn/Wizard/StyledColumnWizardScopeSection.js

@@ -227,7 +227,7 @@ export const StyledColumnWizardScopeSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
                             STYLED_COLUMN_ROW_KINDS.slice(0, 2),
                             STYLED_COLUMN_ROW_KINDS.slice(2),
                         ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {

package/src/View/Wizard/OnePageWizards.js

@@ -78,7 +78,7 @@ export const OnePageWizard = (props) => {
         if (section === '-') {
             return _jsx(React.Fragment, {}, index);
         }
-        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground", children: section.render(props.data, index) }) }, index));
+        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-background", children: section.render(props.data, index) }) }, index));
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);

package/src/View/renderWithAdaptableContext.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
 import AdaptableContext from './AdaptableContext';
-import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
-import { TooltipProvider } from '../components/ui/tooltip';
+import { TooltipProvider } from "../components/ui/tooltip";
 export const renderWithAdaptableContext = (children, adaptable) => {
-    return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(WithAdaptableComputedCSSVars, { children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }) }));
+    return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -97,7 +97,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private LicenseService;
     private ChartingService;
     private rowListeners;
-    private throttleFilterOnDataChange;
     private debouncedSetSelectedRows;
     private debouncedSetSelectedCells;
     private agGridListenerKeydown;

package/src/agGrid/AdaptableAgGrid.js

@@ -1,4 +1,3 @@
-import throttle from '../Utilities/utils/throttle';
 import debounce from '../Utilities/utils/debounce';
 import { createGrid, LocalEventService, } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
@@ -21,6 +20,7 @@ import { ThemeService } from '../Utilities/Services/ThemeService';
 import { ValidationService } from '../Utilities/Services/ValidationService';
 import { ModuleService } from '../Utilities/Services/ModuleService';
 import { CalculatedColumnExpressionService } from '../Utilities/Services/CalculatedColumnExpressionService';
+import { expandCellDataChangedInfosWithCalculatedColumns } from '../Utilities/Services/CalculatedColumnSyntheticChange';
 import { QueryLanguageService } from '../Utilities/Services/QueryLanguageService';
 import { AlertService } from '../Utilities/Services/AlertService';
 import { TeamSharingService } from '../Utilities/Services/TeamSharingService';
@@ -83,7 +83,6 @@ import { computeParameterizedAggregation, getParameterizedAggregationDefinitions
 import { getParameterizedAggForColumn } from '../Aggregation/parameterizedAggregationHelpers';
 import { getParameterizedAggregationHeaderParenthesisValue } from '../Aggregation/parameterizedAggregationHeader';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { FilterOnDataChangeOptions } from '../AdaptableState/Common/Enums';
 import { ADAPTABLE_PUBLISH_TIMESTAMP } from '../EnvVars';
 import { AdaptableUpgradeHelper } from '../migration/AdaptableUpgradeHelper';
 import { ensureLoadingScreenPortalElement } from '../components/Modal';
@@ -204,7 +203,6 @@ export class AdaptableAgGrid {
     LicenseService;
     ChartingService;
     rowListeners;
-    throttleFilterOnDataChange;
     debouncedSetSelectedRows;
     debouncedSetSelectedCells;
     agGridListenerKeydown;
@@ -1699,12 +1697,6 @@ export class AdaptableAgGrid {
             }), true);
             gridContainerElement.addEventListener('mouseleave', (this.agGridListenerMouseLeave = (event) => this._emit('MouseLeave', event)));
         }
-        this.throttleFilterOnDataChange = throttle(
-        // the extra function is to make sure we have a reference to ag-grid-api
-        () => this.agGridAdapter.getAgGridApi()?.onFilterChanged(), this.adaptableOptions.filterOptions.filterActionOnDataChange.throttleDelay, {
-            trailing: true,
-            leading: false,
-        });
         /**
          * Use Case: User has started inline editing but its disabled in Row Form Options
          * Action: Stop editing
@@ -3813,7 +3805,6 @@ export class AdaptableAgGrid {
             this.listenerCellSelectionChanged = null;
             this.listenerGlobalSetRowSelection = null;
             this.listenerSortChanged = null;
-            this.throttleFilterOnDataChange = null;
             const liveGridOptions = this.agGridAdapter.DANGER_getLiveGridOptions();
             if (liveGridOptions) {
                 this.agGridOptionsService.revertGridOptionsPropertiesToUserValue(liveGridOptions, [
@@ -4133,6 +4124,7 @@ export class AdaptableAgGrid {
      * There are a few things we need to do AFTER we edit a cell and it makes sense to put them in one place
      */
     performPostEditChecks(rowNode, cellDataChangedInfos) {
+        cellDataChangedInfos = expandCellDataChangedInfosWithCalculatedColumns(this.api, cellDataChangedInfos);
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             // if a Cell Data Change is undone, log to the Console
             if (cellDataChangedInfo.trigger === 'undo') {
@@ -4290,14 +4282,7 @@ export class AdaptableAgGrid {
         }
     }
     filterOnDataChange() {
-        if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            FilterOnDataChangeOptions.Always) {
-            this.agGridAdapter.getAgGridApi()?.onFilterChanged();
-        }
-        else if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            FilterOnDataChangeOptions.Throttle) {
-            this.throttleFilterOnDataChange();
-        }
+        this.agGridAdapter.getAgGridApi()?.onFilterChanged();
     }
     refreshLayout() {
         const columnDefs = this.agGridAdapter.getColumnDefinitionsInclSpecialColumns();

package/src/agGrid/AgGridColumnAdapter.js

@@ -951,10 +951,7 @@ export class AgGridColumnAdapter {
                 // 1. evaluate EditOptions.isCellEditable if provided
                 if (this.adaptableApi.gridApi.internalApi.hasCellEditableAccordingToEditOptions()) {
                     const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, params.column.getColId());
-                    const editOptionsEditability = this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
-                    if (editOptionsEditability) {
-                        return editOptionsEditability;
-                    }
+                    return this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
                 }
                 // 2. otherwise, fallback to colDef.editable
                 return getOriginalColDefEditable();

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/Card/index.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Box } from '../Flex';
 export function Card(props) {
     const { shadow = true, children, className, style, gap = 2 } = props;
-    return (_jsx(Box, { className: clsx('twa:bg-defaultbackground twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+    return (_jsx(Box, { className: clsx('twa:bg-background twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
             'twa:shadow-sm': shadow,
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,

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
@@ -385,7 +404,7 @@ const MultiCombobox_SimpleSearchable = (props) => {
                         const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
                         return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsxs(_Fragment, { children: [_jsx(ComboboxChipsInput, { placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: props.searchable === false, onFocus: props.onFocus, onBlur: props.onBlur, className: props.searchable === false && selectedItems.length > 0
                                                 ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!' // so we fill the parent container and on click we can open the combobox as usual
-                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "input-group-button", className: clsx(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
+                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: clsx(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
                                                             : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
                     } }) }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
@@ -474,11 +493,11 @@ const MultiCombobox_MenuListSearchable = (props) => {
                     props.onBlur?.();
                 }
             }, className: clsx('twa:relative', props.className, _props?.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
-                    return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsx(_Fragment, { children: _jsx(ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : (_jsx("div", { className: "twa:flex-1" })), _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "input-group-button", 
+                    return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsx(_Fragment, { children: _jsx(ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : (_jsx("div", { className: "twa:flex-1" })), _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
                                                 // we already have the role="combobox" on the parent
                                                 // so we want to avoid the same role twice in the component,
                                                 // hence we use the role="widget" here.
-                                                role: "widget" }), "data-slot": "input-group-button", className: clsx(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] }));
+                                                role: "widget" }), "data-slot": "combobox-toggle", className: clsx(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] }));
                 } }) }));
     };
     return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? (_jsx(ComboboxTrigger, { nativeButton: false, render: renderChips })) : (renderChips(undefined)), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [_jsx(ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
@@ -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,10 +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!', comboboxProps.className);
+    const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);
     const mergedProps = {
         ...sharedProps,
         ...comboboxProps,