@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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

@@ -12,7 +12,7 @@ const icons_1 = require("../../../components/icons");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../lib/utils");
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = (0, react_1.useMemo)(() => {
         if (selectedMap) {
@@ -37,9 +37,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;
 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 = (0, react_1.useRef)(0);
+    (0, react_1.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] = (0, react_1.useState)(false);
     const setSelectedOnly = (0, react_1.useCallback)((selectedOnly) => {
@@ -74,30 +88,66 @@ function ValueSelector(props) {
             return result;
         });
     }, [filter, options, searchInputValue, selectedMap, selectedOnly, toIdentifier]);
+    const handleOptionRowClick = (0, react_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, clsx_1.default)('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 ((0, jsx_runtime_1.jsxs)(Flex_1.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: (0, utils_1.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: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? ((0, jsx_runtime_1.jsx)(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                            updateSelection((next) => {
-                                next.clear();
-                                if (checked) {
-                                    next.set(identifier, option);
-                                }
-                            });
-                        }, children: label })) : ((0, jsx_runtime_1.jsx)(CheckBox_1.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 })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:flex-1", children: reorderEnabled ? preparedToLabel(option) : null })] }) }));
+            }, itemClassName, optionClassName, `${baseClassName}__option`), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1 twa:min-w-0", children: [reorderable ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-drag-handle": true, onPointerDown: onPointerDown, className: (0, utils_1.cn)('twa:shrink-0', compact ? 'twa:mr-2' : 'twa:mr-3'), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? ((0, jsx_runtime_1.jsx)(Radio_1.default, { className: (0, utils_1.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' ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-1 twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.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) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:mx-1.5 twa:text-3 twa:min-w-0", "data-name": "option-label", children: label })] })) : ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:shrink-0", children: renderOptionTrailing(option) })) : null] }));
     };
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
@@ -135,8 +185,19 @@ function ValueSelector(props) {
             });
         },
     };
-    const optionList = ((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)("div", { children: filteredOptions.map(renderOption) }) }));
-    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), reorderEnabled ? ((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 }) => {
+    const optionList = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:min-h-0 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(renderOption) }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: style, className: (0, utils_1.cn)('twa:flex-1 twa:min-h-0', compact && 'twa:overflow-hidden', baseClassName, compact && `${baseClassName}--compact`, className), flexDirection: "column", children: [!compact && ((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: filterPlaceholder ?? '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,
+                compact,
+                showFilterInput,
+                filter,
+                searchInputValue,
+                setSearchInputValue,
+                filterPlaceholder,
+                hideShowSelectedOnly,
+                compactHeaderClassName,
+                compactFilterClassName,
+            }), reorderEnabled ? ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:min-h-0 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 = [];
@@ -161,8 +222,30 @@ function ValueSelector(props) {
                         }, children: (listDomProps) => (0, jsx_runtime_1.jsx)("div", { ...listDomProps, children: filteredOptions.map(renderOption) }) }) }) })) : (optionList)] }));
 }
 const renderSelectionSection = (props) => {
-    const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
-    const selectionBox = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: [singleSelect ? ((0, jsx_runtime_1.jsx)(Flex_1.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 = (0, utils_1.cn)('twa:mb-1', 'twa:p-1', 'twa:border-b twa:border-primarydark/30', compact
+        ? (0, utils_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: headerRowClassName, children: [singleSelect ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
+                    if (!value.length) {
+                        return (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-70", children: "(none selected)" });
+                    }
+                    const selectedId = value[0];
+                    const selectedOption = options.find((o) => toIdentifier(o) === selectedId);
+                    if (!selectedOption) {
+                        return (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-70", children: "(none selected)" });
+                    }
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-70 twa:mr-1", children: "Selected:" }), (0, jsx_runtime_1.jsx)("span", { className: "twa:font-medium", children: toLabel(selectedOption) })] }));
+                })() })) : ((0, jsx_runtime_1.jsx)(CheckBox_1.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 : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:shrink-0 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })), showFilterInput && filter ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [compactFilterUsesSpacer ? (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0" }) : null, (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue ?? '', OnTextChange: setSearchInputValue ?? (() => undefined), placeholder: filterPlaceholder ?? 'Search...', className: compactFilterClass })] })) : null] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: headerRowClassName, children: [singleSelect ? ((0, jsx_runtime_1.jsx)(Flex_1.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.
@@ -182,7 +265,7 @@ const renderSelectionSection = (props) => {
                         else {
                             props.onClear();
                         }
-                    }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })] }) }));
-    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(`${baseClassName}__header `), children: selectionBox });
+                    }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), hideShowSelectedOnly ? null : (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" }), hideShowSelectedOnly ? null : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox }))] }) }));
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(`${baseClassName}__header`), children: selectionBox });
 };
 exports.renderSelectionSection = renderSelectionSection;

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,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WIZARD_COLUMN_LIST_SEARCH_CLASS = exports.WIZARD_COLUMN_LIST_HEADER_CLASS = exports.WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED = exports.WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT = exports.WIZARD_COLUMN_LIST_OPTION_CLASS = void 0;
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+exports.WIZARD_COLUMN_LIST_OPTION_CLASS = 'twa:!py-1 twa:!px-1.5';
+/** Single-select column lists — ~50% taller than multi-select compact rows. */
+exports.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). */
+exports.WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED = 'twa:!py-2 twa:!px-2';
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+exports.WIZARD_COLUMN_LIST_HEADER_CLASS = 'twa:gap-4';
+/** Narrow search field (matches Visibility list column width, not full card width). */
+exports.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

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

@@ -45,9 +45,9 @@ const CustomSortWizard = (props) => {
                 renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
                 details: 'Enter Name and select a Column to Sort',
                 render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts }) }));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full twa:min-h-0 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(CustomSortColumnWizardSection_1.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;

package/src/View/Dashboard/DashboardPopup.js

@@ -1,84 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardPopup = exports.DashboardConfigView = void 0;
+exports.DashboardPopup = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
-const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
-const Flex_1 = require("../../components/Flex");
-const ToggleButton_1 = require("../../components/ToggleButton");
-const Tabs_1 = require("../../components/Tabs");
-const Card_1 = require("../../components/Card");
-var DashboardConfigView;
-(function (DashboardConfigView) {
-    DashboardConfigView["Toolbars"] = "Toolbars";
-    DashboardConfigView["Buttons"] = "Buttons";
-    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
-})(DashboardConfigView || (exports.DashboardConfigView = DashboardConfigView = {}));
+const DashboardPopupSections_1 = require("./DashboardPopupSections");
 class DashboardPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            DashboardConfigView: DashboardConfigView.Toolbars,
-        };
-    }
     render() {
-        const systemToolbars = this.props.api.dashboardApi.internalApi
-            .getModuleToolbars()
-            .map((toolbar) => ({
-            Id: toolbar.id,
-            Title: toolbar.friendlyName,
-        }));
-        const customToolbars = this.props.api.dashboardApi.getCustomToolbars().map((ct) => ({
-            Id: ct.name,
-            Title: ct.title ? ct.title : ct.name,
-        }));
-        const tabs = this.props.DashboardState.Tabs.map((tab) => {
-            const Toolbars = tab.Toolbars.filter((vt) => {
-                let customToolbar = this.props.api.dashboardApi
-                    .getCustomToolbars()
-                    .find((ct) => ct.name === vt);
-                return customToolbar
-                    ? true
-                    : this.props.api.internalApi
-                        .getModuleService()
-                        .isAdapTableModulePresent(vt);
-            });
-            return { ...tab, Toolbars };
-        });
-        let selectedModuleButtons = [];
-        this.props.DashboardState.ModuleButtons.forEach((x) => {
-            let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == x);
-            if (menuItem?.isVisible) {
-                selectedModuleButtons.push(x);
-            }
-        });
-        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
-        const baseClassName = 'ab-Dashboard-Popup';
         const dashboardAccessLevel = this.props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
         const areDashboardSettingsVisible = dashboardAccessLevel == GeneralConstants_1.ACCESS_LEVEL_FULL || dashboardAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
         const isDashboardDisabled = dashboardAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-        const isModuleCheckboxDisabled = (module) => {
-            if (module === 'SettingsPanel') {
-                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-            }
-            return false;
-        };
-        const contentCls = '';
-        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [areDashboardSettingsVisible && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { gap: 8, children: "Display Settings" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { gap: 2, className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3", children: [(0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility", children: this.props.IsHidden ? 'Hidden' : 'Visible' }), this.props.DashboardState.Tabs?.length > 0 ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state", children: this.props.IsCollapsed ? 'Collapsed' : 'Expanded' })) : null, this.props.api.optionsApi.getDashboardOptions().canFloat ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating", children: this.props.IsFloating ? 'Floating' : 'Pinned' })) : null] }) })] }) })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Contents" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "pinned-toolbars", children: "Pinned Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars", children: "Tabs & Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "buttons", children: "Buttons" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(PinnedToolbarsSelector_1.PinnedToolbarsSelector, {}) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls, children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }) })] }) })] })] }) }));
-    }
-    onDashboardConfigViewChanged(event) {
-        let e = event.target;
-        let dashboardConfigView = e.value;
-        this.setState({
-            DashboardConfigView: dashboardConfigView,
-        });
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(DashboardPopupSections_1.DashboardPopupSections, { DashboardState: this.props.DashboardState, InternalState: this.props.InternalState, IsCollapsed: this.props.IsCollapsed, IsHidden: this.props.IsHidden, IsFloating: this.props.IsFloating, isDashboardDisabled: isDashboardDisabled, areDashboardSettingsVisible: areDashboardSettingsVisible, canFloat: this.props.api.optionsApi.getDashboardOptions().canFloat ?? false, onDashboardSetModuleButtons: this.props.onDashboardSetModuleButtons, onDashboardSetTabs: this.props.onDashboardSetTabs, onSetDashboardCollapsed: this.props.onSetDashboardCollapsed, onSetDashboardHidden: this.props.onSetDashboardHidden, onSetDashboardFloating: this.props.onSetDashboardFloating }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { InternalState } from '../../AdaptableState/InternalState';
+import { DashboardState, DashboardTab } from '../../AdaptableState/DashboardState';
+import { AdaptableModuleButtons } from '../../AdaptableState/Common/Types';
+export interface DashboardPopupSectionsProps {
+    DashboardState: DashboardState;
+    InternalState: InternalState;
+    IsCollapsed: boolean;
+    IsHidden: boolean;
+    IsFloating: boolean;
+    isDashboardDisabled: boolean;
+    areDashboardSettingsVisible: boolean;
+    canFloat: boolean;
+    onDashboardSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => void;
+    onDashboardSetTabs: (tabs: DashboardTab[]) => void;
+    onSetDashboardCollapsed: (isCollapsed: boolean) => void;
+    onSetDashboardHidden: (isHidden: boolean) => void;
+    onSetDashboardFloating: (isFloating: boolean) => void;
+}
+export declare const DashboardPopupSections: React.FunctionComponent<DashboardPopupSectionsProps>;

package/src/View/Dashboard/DashboardPopupSections.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardPopupSections = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
+const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
+const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
+const Flex_1 = require("../../components/Flex");
+const Tag_1 = require("../../components/Tag");
+const ToggleButton_1 = require("../../components/ToggleButton");
+const AdaptableContext_1 = require("../AdaptableContext");
+const CollapsibleWizardCard_1 = require("../Wizard/CollapsibleWizardCard");
+const DashboardSettingsToggles = ({ isHidden, isCollapsed, isFloating, hasTabs, canFloat, className, onSetHidden, onSetCollapsed, onSetFloating, }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: className ?? 'twa:gap-3 twa:p-1', children: [(0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (visible) => onSetHidden(!visible), checked: !isHidden, "data-name": "dashboard-visibility", children: isHidden ? 'Hidden' : 'Visible' }), hasTabs ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { disabled: isFloating, className: "twa:w-24", onChange: (expanded) => onSetCollapsed(!expanded), checked: !isCollapsed, "data-name": "expand-state", children: isCollapsed ? 'Collapsed' : 'Expanded' })) : null, canFloat ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => onSetFloating(!pinned), checked: !isFloating, "data-name": "floating", children: isFloating ? 'Floating' : 'Pinned' })) : null] }));
+const DashboardPopupSections = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { bindCard } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
+    const systemToolbars = api.dashboardApi.internalApi.getModuleToolbars().map((toolbar) => ({
+        Id: toolbar.id,
+        Title: toolbar.friendlyName,
+    }));
+    const customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
+        Id: ct.name,
+        Title: ct.title ? ct.title : ct.name,
+    }));
+    const allToolbars = [...systemToolbars, ...customToolbars];
+    const toolbarTitleById = React.useMemo(() => allToolbars.reduce((map, toolbar) => {
+        map.set(toolbar.Id, toolbar.Title);
+        return map;
+    }, new Map()), [allToolbars]);
+    const tabs = props.DashboardState.Tabs.map((tab) => {
+        const Toolbars = tab.Toolbars.filter((vt) => {
+            const customToolbar = api.dashboardApi
+                .getCustomToolbars()
+                .find((ct) => ct.name === vt);
+            return customToolbar
+                ? true
+                : api.internalApi.getModuleService().isAdapTableModulePresent(vt);
+        });
+        return { ...tab, Toolbars };
+    });
+    const selectedModuleButtons = [];
+    props.DashboardState.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 isModuleCheckboxDisabled = (module) => {
+        if (module === 'SettingsPanel') {
+            return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
+        }
+        return false;
+    };
+    const pinnedToolbarIds = props.DashboardState.PinnedToolbars ?? [];
+    const pinnedToolbarTitles = pinnedToolbarIds.map((id) => toolbarTitleById.get(id) ?? id);
+    const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
+    const tabsCompactLabels = tabs.flatMap((tab) => {
+        const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
+        return [`Tab: ${tab.Name}`, ...toolbarTitles];
+    });
+    const settingsToggles = ((0, jsx_runtime_1.jsx)(DashboardSettingsToggles, { isHidden: props.IsHidden, isCollapsed: props.IsCollapsed, isFloating: props.IsFloating, hasTabs: tabs.length > 0, canFloat: props.canFloat, onSetHidden: props.onSetDashboardHidden, onSetCollapsed: props.onSetDashboardCollapsed, onSetFloating: props.onSetDashboardFloating }));
+    const pinnedSummary = pinnedToolbarTitles.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: pinnedToolbarTitles.map((title, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: title }, `${title}-${index}`))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pinned Toolbars" }));
+    const tabsSummary = tabs.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: tabs.map((tab) => {
+            const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
+        }) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Tabs Configured" }));
+    const moduleButtonsSummary = moduleButtonLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: label }, label))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Module Buttons" }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('settings'), "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", compactSummary: settingsToggles, compactSummaryInteractive: true, summary: settingsToggles, className: "twa:overflow-hidden", children: settingsToggles })), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(PinnedToolbarsSelector_1.PinnedToolbarsSelector, {}) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(DashboardManager_1.default, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), 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: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
+};
+exports.DashboardPopupSections = DashboardPopupSections;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -36,13 +36,13 @@ const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { className: "twa:flex-1", permittedActions: {
+    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { dragScope: "dashboard-pinned", layout: "strip", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch((0, DashboardRedux_1.DashboardSetPinnedToolbars)(tabs[0].Items));
-        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, filterOutSelectedItems: true, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbars", dragItemText: "Drag into the Panel below" }));
+        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, filterOutSelectedItems: true }));
 };
 exports.PinnedToolbarsSelector = PinnedToolbarsSelector;

package/src/View/DataChangeHistory/DataChangeHistoryPopup.d.ts

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
 import { DataChangeHistoryDisableAction, DataChangeHistoryEnableAction, DataChangeHistoryResumeAction, DataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/InternalRedux';
 import { DataChangeHistoryMode } from '../../AdaptableState/InternalState';
-import { AdaptableApi } from '../../Api/AdaptableApi';
 interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHistoryPopupComponent> {
     changeHistoryLog: Record<string, CellDataChangedInfo>;
     changeHistoryMode: DataChangeHistoryMode;
@@ -14,11 +13,7 @@ interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHis
     onChangeHistorySuspend: () => DataChangeHistorySuspendAction;
     onChangeHistoryResume: () => DataChangeHistoryResumeAction;
 }
-interface DataChangeHistoryPopupState {
-    dataChangeHistoryAdaptableApi: AdaptableApi | undefined;
-}
-declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps, DataChangeHistoryPopupState> {
-    constructor(props: DataChangeHistoryPopupProps);
+declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps> {
     render(): React.JSX.Element;
 }
 export declare let DataChangeHistoryPopup: import("react-redux").ConnectedComponent<typeof DataChangeHistoryPopupComponent, {