@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -1,91 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { PopupPanel } from '../Popups/AdaptablePopup/PopupPanel';
-import Radio from '../../../components/Radio';
-import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import { ModuleValueSelector } from '../ModuleValueSelector';
-import { Tabs } from '../../../components/Tabs';
-import Panel from '../../../components/Panel';
-export var ToolPanelConfigView;
-(function (ToolPanelConfigView) {
-    ToolPanelConfigView["Buttons"] = "Buttons";
-    ToolPanelConfigView["ToolPanels"] = "ToolPanels";
-})(ToolPanelConfigView || (ToolPanelConfigView = {}));
+import { ToolPanelPopupSections, ToolPanelConfigView } from './ToolPanelPopupSections';
+export { ToolPanelConfigView } from './ToolPanelPopupSections';
 class ToolPanelPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        const initialTab = props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
-        this.state = {
-            ToolPanelConfigView: initialTab,
-        };
-    }
     render() {
-        // 1. process module buttons
-        const selectedModuleButtons = [];
-        if (ArrayExtensions.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
-            this.props.ToolPanelState.ModuleButtons.forEach((module) => {
-                let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == module);
-                if (menuItem?.isVisible) {
-                    selectedModuleButtons.push(module);
-                }
-            });
-        }
-        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
-        // 2. process tool panels
-        const availableModules = this.props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
-        // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
-        if (!this.props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
-            availableModules.push('Dashboard');
-        }
-        if (this.props.api.pluginsApi.getipushpullPluginApi() &&
-            !this.props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
-            availableModules.push('IPushPull');
-        }
-        if (this.props.api.pluginsApi.getOpenFinPluginApi() &&
-            !this.props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
-            availableModules.push('OpenFin');
-        }
-        const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
-        const availableCustomToolPanels = this.props.api.toolPanelApi
-            .getCustomToolPanels()
-            .map((customToolPanel) => customToolPanel.name);
-        const availableToolPanels = [
-            ...availableCustomToolPanels,
-            ...availableModuleToolPanels,
-        ];
-        const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
-            // ensure that the visible state has only valid tool panels
-            .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+        const initialTab = this.props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
         const isToolPanelReadOnly = this.props.api.entitlementApi.isModuleReadOnlyEntitlement('ToolPanel');
-        const isModuleCheckboxDisabled = (module) => {
-            if (module === 'SettingsPanel') {
-                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-            }
-            return false;
-        };
-        return (_jsx(PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup twa:min-h-0 twa:flex-1", value: this.state.ToolPanelConfigView, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }), children: [_jsx(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels, children: _jsx(Radio, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1, children: "Tool Panels" }) }), _jsx(Tabs.Tab, { value: ToolPanelConfigView.Buttons, children: _jsx(Radio, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1, children: "Module Buttons" }) }), _jsx(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' }, children: _jsx(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly }) }), _jsx(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' }, children: _jsx(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) }) })] }) }) }) }));
-    }
-    onShowGridPropertiesChanged(event) {
-        let e = event.target;
-        let ToolPanelConfigView = e.value;
-        this.setState({
-            ToolPanelConfigView: ToolPanelConfigView,
-        });
-    }
-    onToolPanelToolPanelsChanged(selectedValues) {
-        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
-        // try to return the pre-existing definition (to maintain the previous collapsed state)
-        // otherwise select the new toolPanel with the default 'collapsed' state
-        let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {
-            return (currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
-                Name: selectedToolPanel,
-                VisibilityMode: 'collapsed',
-            });
-        });
-        this.props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
+        return (_jsx(PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false, bodyClassName: "twa:gap-3 twa:flex twa:flex-col twa:h-full twa:min-h-0", children: _jsx(ToolPanelPopupSections, { ToolPanelState: this.props.ToolPanelState, InternalState: this.props.InternalState, initialTab: initialTab, isToolPanelReadOnly: isToolPanelReadOnly, onToolPanelSetModuleButtons: this.props.onToolPanelSetModuleButtons, onToolPanelSetToolPanels: this.props.onToolPanelSetToolPanels }) }));
     }
 }
 function mapStateToProps(state) {

package/src/View/Components/ToolPanel/ToolPanelPopupSections.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { InternalState } from '../../../AdaptableState/InternalState';
+import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../AdaptableState/ToolPanelState';
+import { AdaptableModuleButtons } from '../../../AdaptableState/Common/Types';
+export declare enum ToolPanelConfigView {
+    Buttons = "Buttons",
+    ToolPanels = "ToolPanels"
+}
+export interface ToolPanelPopupSectionsProps {
+    ToolPanelState: ToolPanelState;
+    InternalState: InternalState;
+    initialTab?: ToolPanelConfigView;
+    isToolPanelReadOnly: boolean;
+    onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => void;
+    onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => void;
+}
+export declare const ToolPanelPopupSections: React.FunctionComponent<ToolPanelPopupSectionsProps>;

package/src/View/Components/ToolPanel/ToolPanelPopupSections.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { ModuleValueSelector } from '../ModuleValueSelector';
+import { Flex } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+import { useAdaptable } from '../../AdaptableContext';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+export var ToolPanelConfigView;
+(function (ToolPanelConfigView) {
+    ToolPanelConfigView["Buttons"] = "Buttons";
+    ToolPanelConfigView["ToolPanels"] = "ToolPanels";
+})(ToolPanelConfigView || (ToolPanelConfigView = {}));
+export const ToolPanelPopupSections = (props) => {
+    const { api } = useAdaptable();
+    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedId);
+    const selectedModuleButtons = [];
+    if (ArrayExtensions.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
+        props.ToolPanelState.ModuleButtons.forEach((module) => {
+            const menuItem = props.InternalState.SettingsPanelModuleEntries.find((entry) => entry.category === module);
+            if (menuItem?.isVisible) {
+                selectedModuleButtons.push(module);
+            }
+        });
+    }
+    const allModuleButtons = props.InternalState.SettingsPanelModuleEntries.map((entry) => entry.category);
+    const availableModules = props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
+    if (!api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
+        availableModules.push('Dashboard');
+    }
+    if (api.pluginsApi.getipushpullPluginApi() &&
+        !api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
+        availableModules.push('IPushPull');
+    }
+    if (api.pluginsApi.getOpenFinPluginApi() &&
+        !api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
+        availableModules.push('OpenFin');
+    }
+    const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
+    const availableCustomToolPanels = api.toolPanelApi
+        .getCustomToolPanels()
+        .map((customToolPanel) => customToolPanel.name);
+    const availableToolPanels = [
+        ...availableCustomToolPanels,
+        ...availableModuleToolPanels,
+    ];
+    const selectedToolPanels = props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name).filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+    const getToolPanelLabel = React.useCallback((toolPanelId) => {
+        const customToolPanel = api.toolPanelApi.getCustomToolPanelByName(toolPanelId);
+        if (customToolPanel) {
+            return customToolPanel.title ?? customToolPanel.name;
+        }
+        return (api.internalApi.getModuleService().getModuleFriendlyName(toolPanelId) ??
+            toolPanelId);
+    }, [api]);
+    const isModuleCheckboxDisabled = (module) => {
+        if (module === 'SettingsPanel') {
+            return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
+        }
+        return false;
+    };
+    const handleToolPanelsChanged = (selectedValues) => {
+        const currentSelectedToolPanelDefinitions = props.ToolPanelState.ToolPanels;
+        const newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
+            Name: selectedToolPanel,
+            VisibilityMode: 'collapsed',
+        });
+        props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
+    };
+    const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
+    const toolPanelsSummary = selectedToolPanels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: selectedToolPanels.map((toolPanelId) => (_jsx(Tag, { children: getToolPanelLabel(toolPanelId) }, toolPanelId))) })) : (_jsx(Tag, { children: "No tool panels" }));
+    const moduleButtonsSummary = moduleButtonLabels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => (_jsx(Tag, { children: label }, label))) })) : (_jsx(Tag, { children: "No Module Buttons" }));
+    return (_jsxs(Flex, { flexDirection: "column", className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('tool-panels', { fillAvailable: true }), "data-name": "tool-panel-tool-panels", title: "Tool Panels", help: "Select and order the Tool Panels to show in the AdapTable Tool Panel", compactSummary: renderCompactColumnTags(selectedToolPanels.map((toolPanelId) => getToolPanelLabel(toolPanelId)), (label) => label), summary: toolPanelsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: handleToolPanelsChanged, disabled: props.isToolPanelReadOnly }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "tool-panel-module-buttons", title: "Module Buttons", help: "Select and order module buttons shown at the top of the tool panel", compactSummary: renderCompactColumnTags(moduleButtonLabels, (label) => label), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: props.isToolPanelReadOnly, onChange: (selectedValues) => props.onToolPanelSetModuleButtons(selectedValues) }) })] }));
+};

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

@@ -10,6 +10,20 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
      * To show the filter input, filter needs also to be defined.
      */
     showFilterInput?: boolean;
+    filterPlaceholder?: string;
+    /** Tighter rows and inline search with Select All (layout wizard). */
+    compact?: boolean;
+    /** Matches Visibility list: checkbox then label (default: label inside checkbox). */
+    optionLayout?: 'label-in-checkbox' | 'label-beside-checkbox';
+    /** Hides "Show Selected Only" in the header (e.g. Visibility-style Select All + search row). */
+    hideShowSelectedOnly?: boolean;
+    /** Extra classes on the compact header row (e.g. wider gap between controls). */
+    compactHeaderClassName?: string;
+    /**
+     * Search field classes in compact mode. When set without `flex-1`, a spacer keeps
+     * the search narrow (layout wizard column lists).
+     */
+    compactFilterClassName?: string;
     singleSelect?: boolean;
     toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
     toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
@@ -17,10 +31,16 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
      * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
      */
     toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
+    /** Rendered at the end of the row, outside the checkbox label (e.g. sort direction toggle). */
+    renderOptionTrailing?: (option: OPTION_TYPE) => ReactNode;
+    /** Clicking the row toggles inclusion; checkbox clicks do not double-toggle. */
+    toggleSelectionOnRowClick?: boolean;
     showSelectedOnlyLabel?: ReactNode;
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
     isOptionDisabled?: (option: OPTION_TYPE) => boolean;
     disabled?: boolean;
+    optionClassName?: string;
+    className?: string;
     style?: React.CSSProperties;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
@@ -37,4 +57,13 @@ export declare const renderSelectionSection: (props: {
     onSelectAll: () => void;
     onClear: () => void;
     onClearOption: (id: any) => void;
+    compact?: boolean;
+    showFilterInput?: boolean;
+    filter?: null | ((o: any, searchValue: string) => boolean);
+    searchInputValue?: string;
+    setSearchInputValue?: (value: string) => void;
+    filterPlaceholder?: string;
+    hideShowSelectedOnly?: boolean;
+    compactHeaderClassName?: string;
+    compactFilterClassName?: string;
 }) => React.JSX.Element;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { CheckBox } from '../../../components/CheckBox';
 import { Icon } from '../../../components/icons';
 import Radio from '../../../components/Radio';
 import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../../lib/utils';
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = useMemo(() => {
         if (selectedMap) {
@@ -32,9 +32,23 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 const baseClassName = 'ab-ValueSelector';
+/** Clicks on these targets must not toggle row selection (`toggleSelectionOnRowClick`). */
+const ROW_CLICK_IGNORE_SELECTOR = 'button, input, select, textarea, a, [data-drag-handle], [data-slot=select-trigger], [data-slot=select-content], [data-slot=select-item], .ab-Select';
+const ROW_TOGGLE_SUPPRESS_MS = 150;
 export function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, showSelectedOnlyLabel, showFilterInput, onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
+    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, renderOptionTrailing, toggleSelectionOnRowClick, showSelectedOnlyLabel, showFilterInput, filterPlaceholder, compact, optionLayout = 'label-in-checkbox', hideShowSelectedOnly, compactHeaderClassName, compactFilterClassName, onShowSelectedOnlyChange, isOptionDisabled, disabled, optionClassName, className, style, } = props;
     const [searchInputValue, setSearchInputValue] = React.useState('');
+    const suppressRowToggleUntilRef = useRef(0);
+    useEffect(() => {
+        const markSelectInteraction = (event) => {
+            const target = event.target;
+            if (target.closest(ROW_CLICK_IGNORE_SELECTOR)) {
+                suppressRowToggleUntilRef.current = Date.now() + ROW_TOGGLE_SUPPRESS_MS;
+            }
+        };
+        document.addEventListener('pointerdown', markSelectInteraction, true);
+        return () => document.removeEventListener('pointerdown', markSelectInteraction, true);
+    }, []);
     const preparedToLabel = toListLabel ?? toLabel;
     const [selectedOnly, doSetSelectedOnly] = useState(false);
     const setSelectedOnly = useCallback((selectedOnly) => {
@@ -69,30 +83,66 @@ export function ValueSelector(props) {
             return result;
         });
     }, [filter, options, searchInputValue, selectedMap, selectedOnly, toIdentifier]);
+    const handleOptionRowClick = useCallback((option, identifier, optionDisabled, event) => {
+        if (Date.now() < suppressRowToggleUntilRef.current) {
+            return;
+        }
+        const target = event.target;
+        if (target.closest(ROW_CLICK_IGNORE_SELECTOR)) {
+            return;
+        }
+        if (optionDisabled) {
+            return;
+        }
+        updateSelection((next) => {
+            if (next.has(identifier)) {
+                next.delete(identifier);
+            }
+            else {
+                next.set(identifier, option);
+            }
+        });
+    }, [updateSelection]);
     const renderOptionRow = (option, index, reorderable, itemDomProps) => {
         const identifier = toIdentifier(option);
-        const label = !reorderEnabled ? preparedToLabel(option) : null;
-        const { onPointerDown, className: itemClassName, ...restDomProps } = itemDomProps ?? {};
-        return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-2', {
-                'twa:mt-1': index,
+        const label = preparedToLabel(option);
+        const { onPointerDown, onClick: itemOnClick, className: itemClassName, ...restDomProps } = itemDomProps ?? {};
+        const optionDisabled = disabled || (isOptionDisabled ? isOptionDisabled(option) : false);
+        return (_jsxs(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, onClick: toggleSelectionOnRowClick
+                ? (event) => {
+                    itemOnClick?.(event);
+                    handleOptionRowClick(option, identifier, optionDisabled, event);
+                }
+                : itemOnClick, className: cn(toggleSelectionOnRowClick && 'twa:cursor-pointer', reorderable ? 'ab-DraggableListItem' : 'twa:bg-primary twa:text-primary-foreground', 'twa:rounded-standard', compact ? (singleSelect ? 'twa:py-1.5 twa:px-1.5' : 'twa:py-1 twa:px-1.5') : 'twa:p-2', {
+                'twa:mt-0.5': compact && index,
+                'twa:mt-1': !compact && index,
                 'twa:mt-0': !index,
-            }, itemClassName, `${baseClassName}__option`), children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                            updateSelection((next) => {
-                                next.clear();
-                                if (checked) {
-                                    next.set(identifier, option);
-                                }
-                            });
-                        }, children: label })) : (_jsx(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
-                            updateSelection((next) => {
-                                if (checked) {
-                                    next.set(identifier, option);
-                                }
-                                else {
-                                    next.delete(identifier);
-                                }
-                            });
-                        }, checked: selectedMap.has(identifier), children: label })), _jsx(Box, { className: "twa:ml-2 twa:flex-1", children: reorderEnabled ? preparedToLabel(option) : null })] }) }));
+            }, itemClassName, optionClassName, `${baseClassName}__option`), children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1 twa:min-w-0", children: [reorderable ? (_jsx(Box, { "data-drag-handle": true, onPointerDown: onPointerDown, className: cn('twa:shrink-0', compact ? 'twa:mr-2' : 'twa:mr-3'), children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { className: cn('twa:flex-1 twa:min-w-0', compact && !singleSelect && 'twa:my-0!'), checked: selectedMap.has(identifier), "data-name": identifier, disabled: optionDisabled, onClick: toggleSelectionOnRowClick ? (event) => event.stopPropagation() : undefined, onChange: (checked) => {
+                                updateSelection((next) => {
+                                    next.clear();
+                                    if (checked) {
+                                        next.set(identifier, option);
+                                    }
+                                });
+                            }, children: label })) : optionLayout === 'label-beside-checkbox' ? (_jsxs(Flex, { alignItems: "center", className: "twa:flex-1 twa:min-w-0", children: [_jsx(CheckBox, { className: "twa:shrink-0", "data-name": identifier, disabled: optionDisabled, onClick: toggleSelectionOnRowClick ? (event) => event.stopPropagation() : undefined, onChange: (checked) => {
+                                        updateSelection((next) => {
+                                            if (checked) {
+                                                next.set(identifier, option);
+                                            }
+                                            else {
+                                                next.delete(identifier);
+                                            }
+                                        });
+                                    }, checked: selectedMap.has(identifier) }), _jsx(Flex, { alignItems: "center", className: "twa:mx-1.5 twa:text-3 twa:min-w-0", "data-name": "option-label", children: label })] })) : (_jsx(CheckBox, { className: cn('twa:flex-1 twa:min-w-0', compact && 'twa:my-0!'), "data-name": identifier, disabled: optionDisabled, onClick: toggleSelectionOnRowClick ? (event) => event.stopPropagation() : undefined, onChange: (checked) => {
+                                updateSelection((next) => {
+                                    if (checked) {
+                                        next.set(identifier, option);
+                                    }
+                                    else {
+                                        next.delete(identifier);
+                                    }
+                                });
+                            }, checked: selectedMap.has(identifier), children: label }))] }), renderOptionTrailing ? (_jsx(Box, { className: "twa:shrink-0", children: renderOptionTrailing(option) })) : null] }));
     };
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
@@ -130,8 +180,19 @@ export function ValueSelector(props) {
             });
         },
     };
-    const optionList = (_jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx("div", { children: filteredOptions.map(renderOption) }) }));
-    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), reorderEnabled ? (_jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    const optionList = (_jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:min-h-0 twa:overflow-auto`, flexDirection: "column", children: _jsx("div", { children: filteredOptions.map(renderOption) }) }));
+    return (_jsxs(Flex, { style: style, className: cn('twa:flex-1 twa:min-h-0', compact && 'twa:overflow-hidden', baseClassName, compact && `${baseClassName}--compact`, className), flexDirection: "column", children: [!compact && (_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: filterPlaceholder ?? 'Type to search', inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) })), renderSelectionSection({
+                ...selectionSectionProps,
+                compact,
+                showFilterInput,
+                filter,
+                searchInputValue,
+                setSearchInputValue,
+                filterPlaceholder,
+                hideShowSelectedOnly,
+                compactHeaderClassName,
+                compactFilterClassName,
+            }), reorderEnabled ? (_jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:min-h-0 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];
@@ -156,8 +217,30 @@ export function ValueSelector(props) {
                         }, children: (listDomProps) => _jsx("div", { ...listDomProps, children: filteredOptions.map(renderOption) }) }) }) })) : (optionList)] }));
 }
 export const renderSelectionSection = (props) => {
-    const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
-    const selectionBox = (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: _jsxs(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: [singleSelect ? (_jsx(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
+    const { value, options, singleSelect, toLabel, toIdentifier, compact, showFilterInput, filter, searchInputValue, setSearchInputValue, filterPlaceholder, hideShowSelectedOnly, compactHeaderClassName, compactFilterClassName, } = props;
+    const compactFilterClass = compactFilterClassName ?? 'twa:flex-1 twa:min-w-0';
+    const compactFilterUsesSpacer = compactFilterClassName != null && !/\bflex-1\b/.test(compactFilterClassName);
+    const headerRowClassName = cn('twa:mb-1', 'twa:p-1', 'twa:border-b twa:border-primarydark/30', compact
+        ? cn('twa:w-full twa:min-w-0 twa:gap-2 twa:font-bold twa:shrink-0', compactHeaderClassName)
+        : 'twa:flex twa:flex-row ');
+    const selectionBox = compact ? (_jsxs(Flex, { alignItems: "center", className: headerRowClassName, children: [singleSelect ? (_jsx(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
+                    if (!value.length) {
+                        return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                    }
+                    const selectedId = value[0];
+                    const selectedOption = options.find((o) => toIdentifier(o) === selectedId);
+                    if (!selectedOption) {
+                        return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                    }
+                    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "twa:opacity-70 twa:mr-1", children: "Selected:" }), _jsx("span", { className: "twa:font-medium", children: toLabel(selectedOption) })] }));
+                })() })) : (_jsx(CheckBox, { className: "twa:shrink-0", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+                    if (checked) {
+                        props.onSelectAll();
+                    }
+                    else {
+                        props.onClear();
+                    }
+                }, children: "Select All" })), hideShowSelectedOnly ? null : (_jsx(Box, { className: "twa:shrink-0 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })), showFilterInput && filter ? (_jsxs(_Fragment, { children: [compactFilterUsesSpacer ? _jsx(Box, { className: "twa:flex-1 twa:min-w-0" }) : null, _jsx(AdaptableFormControlTextClear, { value: searchInputValue ?? '', OnTextChange: setSearchInputValue ?? (() => undefined), placeholder: filterPlaceholder ?? 'Search...', className: compactFilterClass })] })) : null] })) : (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: _jsxs(Box, { className: headerRowClassName, children: [singleSelect ? (_jsx(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
                         // For single-select we show the *name* of the selected option
                         // rather than a (1 of N) counter — useful when the list is
                         // long enough to scroll past the chosen row.
@@ -177,6 +260,6 @@ export const renderSelectionSection = (props) => {
                         else {
                             props.onClear();
                         }
-                    }, children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", _jsxs(Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), _jsx("div", { className: "twa:flex-1" }), _jsx(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })] }) }));
-    return _jsx(Box, { className: clsx(`${baseClassName}__header `), children: selectionBox });
+                    }, children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", _jsxs(Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), hideShowSelectedOnly ? null : _jsx("div", { className: "twa:flex-1" }), hideShowSelectedOnly ? null : (_jsx(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox }))] }) }));
+    return _jsx(Box, { className: cn(`${baseClassName}__header`), children: selectionBox });
 };

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

@@ -0,0 +1,10 @@
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export declare const WIZARD_COLUMN_LIST_OPTION_CLASS = "twa:!py-1 twa:!px-1.5";
+/** Single-select column lists — ~50% taller than multi-select compact rows. */
+export declare const WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT = "twa:!py-1.5 twa:!px-1.5";
+/** Taller rows when ultra-compact one-line cards are not required (e.g. Custom Sort wizard). */
+export declare const WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED = "twa:!py-2 twa:!px-2";
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export declare const WIZARD_COLUMN_LIST_HEADER_CLASS = "twa:gap-4";
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export declare const WIZARD_COLUMN_LIST_SEARCH_CLASS = "twa:w-[12rem] twa:shrink-0 twa:min-w-0";

package/src/View/Components/wizardColumnListStyles.js

@@ -0,0 +1,10 @@
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export const WIZARD_COLUMN_LIST_OPTION_CLASS = 'twa:!py-1 twa:!px-1.5';
+/** Single-select column lists — ~50% taller than multi-select compact rows. */
+export const WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT = 'twa:!py-1.5 twa:!px-1.5';
+/** Taller rows when ultra-compact one-line cards are not required (e.g. Custom Sort wizard). */
+export const WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED = 'twa:!py-2 twa:!px-2';
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export const WIZARD_COLUMN_LIST_HEADER_CLASS = 'twa:gap-4';
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export const WIZARD_COLUMN_LIST_SEARCH_CLASS = 'twa:w-[12rem] twa:shrink-0 twa:min-w-0';

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { CustomSort } from '../../../AdaptableState/CustomSortState';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 export type CustomSortColumnWizardSectionProps = {
     onChange: (data: CustomSort) => void;
     isNew: boolean;
     allCustomSorts: CustomSort[];
 };
-export declare const renderCustomSortColumn: (data: CustomSort) => React.JSX.Element;
+export declare const renderCustomSortColumn: (data: CustomSort, api: AdaptableApi) => React.JSX.Element;
 export declare const isValidCustomSortColumn: (data: CustomSort, allCustomSorts: CustomSort[]) => true | string;
 export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => React.JSX.Element;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,15 +1,14 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Tag } from '../../../components/Tag';
+import { ColumnTag, Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
+import { WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED } from '../../Components/wizardColumnListStyles';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import Input from '../../../components/Input';
-import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 import { Card } from '../../../components/Card';
-export const renderCustomSortColumn = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(Tag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
+export const renderCustomSortColumn = (data, api) => {
+    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(ColumnTag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
 };
 export const isValidCustomSortColumn = (data, allCustomSorts) => {
     if (!data.Name) {
@@ -45,14 +44,13 @@ export const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    const [columnsSearchText, setColumnsSearchText] = React.useState('');
     const onNameChange = (event) => {
         props.onChange({
             ...data,
             Name: event.target.value,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Custom Sort" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }) }), _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: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the column to apply the Custom Sort to" })] }), _jsx(Flex, { flexDirection: "row", alignItems: "center", className: "twa:px-2 twa:pb-2 twa:gap-2", children: _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", className: "twa:flex-1" }) }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:px-2 twa:pb-2", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Custom Sort" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }) }), _jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden", 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 twa:shrink-0", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the column to apply the Custom Sort to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-2 twa:pb-2 twa:flex twa:flex-col", children: _jsx(NewColumnSelector, { compactColumnList: true, className: "twa:h-full", optionClassName: WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                                 props.onChange({
                                     ...data,
                                     SortedValues: [],

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -41,9 +41,9 @@ export const CustomSortWizard = (props) => {
                 renderSummary: renderCustomSortColumn,
                 details: 'Enter Name and select a Column to Sort',
                 render: () => {
-                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts }) }));
+                    return (_jsx(Box, { className: "twa:p-2 twa:h-full twa:min-h-0 twa:flex twa:flex-col", children: _jsx(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts }) }));
                 },
-                title: 'Name & Column',
+                title: 'Settings',
             },
             {
                 title: 'Sort Order',

package/src/View/Dashboard/DashboardPopup.d.ts

@@ -15,18 +15,8 @@ interface DashboardPopupComponentProps extends ModuleViewPopupProps<DashboardPop
     onSetDashboardFloating: (isFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
     onSetDashboardHidden: (isHidden: boolean) => DashboardRedux.DashboardSetIsHiddenAction;
 }
-export declare enum DashboardConfigView {
-    Toolbars = "Toolbars",
-    Buttons = "Buttons",
-    PinnedToolbars = "PinnedToolbars"
-}
-export interface DashboardPopupState {
-    DashboardConfigView: DashboardConfigView;
-}
-declare class DashboardPopupComponent extends React.Component<DashboardPopupComponentProps, DashboardPopupState> {
-    constructor(props: DashboardPopupComponentProps);
+declare class DashboardPopupComponent extends React.Component<DashboardPopupComponentProps> {
     render(): React.JSX.Element;
-    onDashboardConfigViewChanged(event: React.FormEvent<any>): void;
 }
 export declare let DashboardPopup: import("react-redux").ConnectedComponent<typeof DashboardPopupComponent, {
     [x: string]: any;