@adaptabletools/adaptable-cjs 23.0.0-canary.2 → 23.0.0-canary.3

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -4,11 +4,10 @@ exports.FloatingFilter = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const ColumnFilterMenu_1 = require("./components/ColumnFilterMenu");
+const NewSelect_1 = require("../../../components/NewSelect");
 const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList");
 const utils_1 = require("./utils");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
@@ -44,75 +43,74 @@ const FloatingFilter = (props) => {
     const colDef = adaptable.api.columnApi.getAGGridColDefForColumnId(props.columnId);
     const showExpandFilterButton = colDef?.suppressHeaderFilterButton !== true;
     const handleClear = () => props.onClear?.();
-    const showEvent = 'click';
-    const hideEvent = 'blur';
-    const [overlayVisible, setOverlayVisible] = React.useState(false);
+    const [selectOpen, setSelectOpen] = React.useState(false);
+    const currentOperator = props.predicate?.args[0]?.operator;
+    const operatorOptions = props.predicateDefs.map((predicateDef) => ({
+        label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": predicateDef.label, children: predicateDef.label })] })),
+        tooltip: predicateDef.label,
+        value: predicateDef.operator,
+    }));
+    const renderTriggerValue = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    const filterDropdownButton = ((0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { variant: "text", "data-name": "floating-filter-button", "aria-label": "Column Filter Operator Dropdown", tooltip: "Click to change filter operator", onBlur: () => {
-            if (isInlineEditable) {
-                setOverlayVisible(false);
-            }
-        }, "data-value": props.predicate?.args[0]?.operator, onClick: () => {
-            if (!isInlineEditable) {
+    const filterDropdownSelect = ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: "Column Filter Operator Dropdown", size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
+            // In non-inline mode the select doesn't pick an operator inline; opening it
+            // instead opens the full column filter popup, so keep the dropdown closed.
+            if (nextOpen && !isInlineEditable) {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+                return;
             }
-            else {
-                setOverlayVisible(true);
-            }
-        }, className: "twa:my-0.5 twa:mx-0.5 twa:text-left twa:p-0.5", style: {
-            ...(!isInlineEditable
-                ? {
-                    minWidth: 0,
-                    flex: 1,
-                }
-                : {}),
-        }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label, children: label }))] }));
+            setSelectOpen(nextOpen);
+        }, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
+            props.onPredicateChange({
+                operator: props.predicate.operator,
+                args: [{ operator: operator, args: [] }],
+            });
+        }, className: (0, utils_2.cn)('twa:self-center twa:mx-0.5 twa:my-0.5 twa:text-left twa:p-0.5 twa:border-none', 'twa:shadow-none', !isInlineEditable && 'twa:min-w-0 twa:flex-1') }));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, visible: overlayVisible, onVisibleChange: setOverlayVisible, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
-                // we render this only for single filter
-                return ((0, jsx_runtime_1.jsx)(ColumnFilterMenu_1.ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
-                        setOverlayVisible(false);
-                        props.onPredicateChange({
-                            operator: props.predicate.operator,
-                            args: [predicate],
-                        });
-                    } }));
-            }, children: filterDropdownButton }));
+        filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
     }
     else {
-        filterDropdown = filterDropdownButton;
+        filterDropdown = filterDropdownSelect;
     }
     const showClearButton = isMultiple ||
         !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef);
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
             // AG Grid's header keyboard navigation intercepts Tab and calls preventDefault(),
-            // which prevents focus from moving between elements inside the floating filter.
-            // We handle Tab manually in the capture phase (before AG Grid's handlers).
-            if (e.key === 'Tab') {
-                const target = e.target;
-                const wrapper = e.currentTarget;
-                if (!e.shiftKey) {
-                    // Tab forward: from filter button → select input
-                    if (target.getAttribute('data-name') === 'floating-filter-button') {
-                        const selectInput = wrapper.querySelector('[data-name="Select Values"] input');
-                        if (selectInput) {
-                            e.preventDefault();
-                            e.nativeEvent.stopImmediatePropagation();
-                            selectInput.focus();
-                            // When the DummyInput gets focus the combobox sets isFocused=true,
-                            // triggering a React re-render. During this re-render, unstable component
-                            // references can cause the DummyInput to be removed from the DOM and
-                            // recreated, losing focus. We restore focus after the re-render.
-                            requestAnimationFrame(() => {
-                                if (document.activeElement === document.body || document.activeElement === null) {
-                                    const newInput = wrapper.querySelector('[data-name="Select Values"] input');
-                                    newInput?.focus();
-                                }
-                            });
-                        }
-                    }
-                }
+            // which prevents focus from moving between the controls inside the floating filter
+            // (operator select, filter input(s), expand/clear buttons). We handle Tab ourselves
+            // in the capture phase (before AG Grid's handlers) and move focus to the next/previous
+            // focusable control. At the boundaries we let the event through so AG Grid can move
+            // to the adjacent header cell.
+            if (e.key !== 'Tab') {
+                return;
+            }
+            const wrapper = e.currentTarget;
+            const focusable = (0, utils_2.getFocusableElements)(wrapper);
+            if (focusable.length === 0) {
+                return;
             }
+            const active = document.activeElement;
+            const currentIndex = active ? focusable.indexOf(active) : -1;
+            if (currentIndex === -1) {
+                return;
+            }
+            const nextIndex = currentIndex + (e.shiftKey ? -1 : 1);
+            if (nextIndex < 0 || nextIndex >= focusable.length) {
+                // boundary reached: let AG Grid navigate between header cells
+                return;
+            }
+            e.preventDefault();
+            e.nativeEvent.stopImmediatePropagation();
+            focusable[nextIndex]?.focus();
+            // Focusing the values combobox's input makes it set isFocused=true, which
+            // re-renders and can momentarily recreate the input, dropping focus to <body>.
+            // Re-resolve the target after the re-render and restore focus to it.
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body || document.activeElement === null) {
+                    const refreshed = (0, utils_2.getFocusableElements)(wrapper);
+                    refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
+                }
+            });
         }, children: [filterDropdown, isInlineEditable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
                     // It works only with a predicate
                     predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -166,7 +166,7 @@ const ColumnValuesSelect = (props) => {
             : props.onChange, items: options, 
         // for dates, the treeDateOptions have ids that are numbers
         // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
+        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
                 // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -13,6 +13,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
+    const clearDisabled = StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString());
     return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
@@ -35,5 +36,5 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                             input.focus();
                         }
                     });
-                }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
+                }, disabled: clearDisabled })] }));
 });

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -71,7 +71,7 @@ const AdaptablePopup = (props) => {
                     props.onHide();
                 }
             },
-        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-background twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
                         ? GeneralConstants.READ_ONLY_STYLE
                         : ''), children: [!isStandalone && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', 'twa:rounded-br-standard', !isStandalone && 'twa:*:p-3'), children: moduleViewContent })] })] }) }));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
 const icons_1 = require("../../../../components/icons");
 const AdaptableObjectList_1 = require("../../AdaptableObjectList");
@@ -21,6 +20,7 @@ const useRerender_1 = require("../../../../components/utils/useRerender");
 const Flex_1 = require("../../../../components/Flex");
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const Tabs_1 = require("../../../../components/Tabs");
+const NewDropdownButton_1 = require("../../../../components/NewDropdownButton");
 const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -84,7 +84,7 @@ const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? abObjectType.name,
             };
         });
-        newButton = ((0, jsx_runtime_1.jsxs)(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
+        newButton = ((0, jsx_runtime_1.jsxs)(NewDropdownButton_1.NewDropdownButton, { showDivider: false, tone: "accent", variant: "raised", items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {

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

@@ -106,7 +106,7 @@ function ValueSelector(props) {
             notifyChange();
         },
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), (0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), (0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];

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

@@ -60,9 +60,7 @@ 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
@@ -87,12 +85,9 @@ const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                                 rowScope: 'Format all columns in the row',
                                 columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -26,7 +26,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = ((0, jsx_runtime_1.jsx)(ButtonExpand_1.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 = (0, clsx_1.default)(baseClasses, {
             [placeholderClasses]: !expression,

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

@@ -428,7 +428,7 @@ const ColumnsSection = (props) => {
                                     const visible = isColumnVisible({ columnId: selectedColumnId, layout });
                                     handleColumnVisibilityChange(selectedColumnId, !visible);
                                 }
-                            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
+                            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
                                                 ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
                                                     ? true
                                                     : visibleIdsCurrentlyDisplayed.length
@@ -466,7 +466,7 @@ const ColumnPropertiesEditor = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
     if (!props.column) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: (0, jsx_runtime_1.jsx)(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: (0, jsx_runtime_1.jsx)(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), (0, jsx_runtime_1.jsx)(Flex_1.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;
@@ -478,7 +478,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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(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: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:pt-4", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(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: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:pt-4", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", (0, jsx_runtime_1.jsx)(Input_1.default, { "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 })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Width:" }), " ", (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Flex:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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

@@ -16,7 +16,7 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const PivotColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Columns Defined" })) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-background", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Columns Defined" })) }));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {

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

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

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

@@ -25,6 +25,6 @@ const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-table", disabled: true, checked: !(0, isPivotLayout_1.isPivotLayout)(layout), children: "Table" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-pivot", disabled: true, checked: (0, isPivotLayout_1.isPivotLayout)(layout), children: "Pivot" })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-table", disabled: true, checked: !(0, isPivotLayout_1.isPivotLayout)(layout), children: "Table" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-pivot", disabled: true, checked: (0, isPivotLayout_1.isPivotLayout)(layout), children: "Pivot" })] }) })] })] }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),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=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),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=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;

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

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

package/src/View/Wizard/OnePageWizards.js

@@ -86,7 +86,7 @@ const OnePageWizard = (props) => {
         if (section === '-') {
             return (0, jsx_runtime_1.jsx)(React.Fragment, {}, index);
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: (0, jsx_runtime_1.jsx)(Flex_1.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 = (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
     const selectedNodeRef = (0, react_1.useRef)(null);

package/src/components/Card/index.js

@@ -8,7 +8,7 @@ const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../Flex");
 function Card(props) {
     const { shadow = true, children, className, style, gap = 2 } = props;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:bg-defaultbackground twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('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/index.js

@@ -390,7 +390,7 @@ const MultiCombobox_SimpleSearchable = (props) => {
                         const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(combobox_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })) : null, (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "input-group-button", className: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
+                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })) : null, (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
                                                             : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
                     } }) }), (0, jsx_runtime_1.jsx)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: (0, jsx_runtime_1.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 }) })] }));
@@ -479,11 +479,11 @@ const MultiCombobox_MenuListSearchable = (props) => {
                     props.onBlur?.();
                 }
             }, className: (0, clsx_1.default)('twa:relative', props.className, _props?.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
-                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "input-group-button", 
+                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.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: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
+                                                role: "widget" }), "data-slot": "combobox-toggle", className: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
                 } }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { nativeButton: false, render: renderChips })) : (renderChips(undefined)), (0, jsx_runtime_1.jsxs)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [(0, jsx_runtime_1.jsx)(combobox_1.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'
@@ -523,7 +523,13 @@ const GridFilterCombobox = (props) => {
     const className = (0, utils_1.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);
+    '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 mergedProps = {
         ...sharedProps,
         ...comboboxProps,

package/src/components/Datepicker/index.js

@@ -253,12 +253,12 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                         width: style?.width,
                         maxWidth: style?.maxWidth,
                         border: style?.border,
-                    }, tabIndex: -1, className: (0, utils_1.cn)('ab-Datepicker twa:flex twa:flex-row', 'twa:bg-(--ab-cmp-input__background)', twUtils_1.targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [(0, jsx_runtime_1.jsx)(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
+                    }, tabIndex: -1, className: (0, utils_1.cn)('ab-Datepicker twa:flex twa:flex-row twa:shadow-none', 'twa:bg-input-background', twUtils_1.targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [(0, jsx_runtime_1.jsx)(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
                                 const date = new Date(v);
                                 if ((0, date_fns_1.isValid)(date)) {
                                     updateValue(date);
                                 }
-                            }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 6, children: (0, jsx_runtime_1.jsx)("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: "twa:relative twa:isolate twa:overflow-visible twa:outline-none", onKeyDown: () => {
+                            }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 8, children: (0, jsx_runtime_1.jsx)("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: (0, utils_1.cn)('twa:relative twa:isolate twa:overflow-visible twa:outline-none twa:rounded-standard', twUtils_1.targetOwn.focusWithinOutline), onKeyDown: () => {
                         // console.log('onKeyDown', e.key);
                         // return;
                         // if (e.key === 'Tab') {

package/src/components/Dialog/index.js

@@ -110,7 +110,7 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-defaultbackground', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
+        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-background', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
     const content = fixed ? ((0, jsx_runtime_1.jsx)("div", { onClick: setPreventDismissFlag, className: (0, clsx_1.default)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
     if (windowModal) {
         return (0, jsx_runtime_1.jsx)(WindowModal_1.WindowModal, { ...windowModalProps, children: content });

package/src/components/DragAndDropContext/TabList.js

@@ -44,7 +44,7 @@ function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveT
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: "ab-ModuleSelector__TabItem__header", children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: "ab-ModuleSelector__TabItem__header", children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                                     onChangeTabName(event.target.value);
                                 } })) : (tab.Name), context.permittedActions.deleteTab && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
         } }));

package/src/components/Dropdown/Arrows.js

@@ -7,7 +7,6 @@ const Arrows = () => {
             display: 'flex',
             flexFlow: 'column',
             position: 'absolute',
-            // background: 'var(--ab-color-defaultbackground)',
             fill: 'var(--ab-cmp-dropdown__fill)',
             top: '50%',
             right: 'var(--ab-base-space)',

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -120,7 +120,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
                         return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onFocus: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();

package/src/components/ExpressionEditor/index.js

@@ -81,7 +81,7 @@ function ExpressionEditor(props) {
                 }
             }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && ((0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
                             /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                                 label: column.friendlyName,
                                                 value: column.columnId,
                                                 dataType: column.dataType,

package/src/components/Input/index.js

@@ -18,7 +18,7 @@ const Input = React.forwardRef((props, ref) => {
         type = 'text';
     }
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, 'twa:min-h-input', 'twa:rounded-input', twUtils_1.targetOwn.focusOutline, type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '', {
-            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-input-background': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
         }, className) }));
 });