@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/View/Components/StyleComponent.js

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import clsx from 'clsx';
-import { CheckBox } from '../../components/CheckBox';
-import { ColorPicker } from '../../components/ColorPicker';
+import { OptionalColorPicker } from '../../components/ColorPicker';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
@@ -14,9 +12,9 @@ import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import AdaptableInput from './AdaptableInput';
 import { Box, Flex } from '../../components/Flex';
-import { twMerge } from '../../twMerge';
 import { Card } from '../../components/Card';
 import { SingleSelect } from '../../components/NewSelect';
+import { cn } from '../../lib/utils';
 export const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -40,51 +38,36 @@ export const StyleComponent = (props) => {
         newStyle.ClassName = value == 'select' ? '' : value;
         setComponentStyle(newStyle);
     };
-    const onUseBackColorCheckChange = (checked) => {
+    const onBackColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BackColor = '#ffffff';
+        if (color) {
+            newStyle.BackColor = color;
         }
         else {
             delete newStyle.BackColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseForeColorCheckChange = (checked) => {
+    const onForeColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.ForeColor = '#000000';
+        if (color) {
+            newStyle.ForeColor = color;
         }
         else {
             delete newStyle.ForeColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseBorderColorCheckChange = (checked) => {
+    const onBorderColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BorderColor = '#000000';
+        if (color) {
+            newStyle.BorderColor = color;
         }
         else {
             delete newStyle.BorderColor;
         }
         setComponentStyle(newStyle);
     };
-    const onBackColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.BackColor = color;
-        setComponentStyle(newStyle);
-    };
-    const onForeColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.ForeColor = color;
-        setComponentStyle(newStyle);
-    };
-    const onBorderColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.BorderColor = color;
-        setComponentStyle(newStyle);
-    };
     const onFontWeightChange = (checked) => {
         const newStyle = { ...componentStyle };
         if (checked) {
@@ -148,44 +131,28 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    return (_jsxs(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)), children: [ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (_jsxs(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [_jsx(Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), _jsx(Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), _jsx(Tabs.Content, { value: "classname", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "CSS Class Name" }), _jsxs(Card.Body, { gap: 2, className: "twa:p-1", children: [_jsx(HelpBlock, { children: "Select a CSS Class Name" }), _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(SingleSelect, { items: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+    const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                    const number = Number(event.target.value);
+                    if (isNaN(number)) {
+                        onBorderRadiusChange(0);
+                    }
+                    else {
+                        onBorderRadiusChange(number);
+                    }
+                } }), _jsxs(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1 twa:self-stretch", children: [_jsx(Box, { className: "twa:font-medium", children: "Font Properties" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set font properties for the Style" })] }), _jsx("span", { className: "twa:col-start-3 twa:row-start-2", children: "Font Style" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-2", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-3", children: "Text Decoration" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-3", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-4", children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", className: "twa:col-start-4 twa:row-start-4", children: _jsx(SingleSelect, { placeholder: "Default", items: [
+                        {
+                            label: 'Default',
+                            value: '',
+                        },
+                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                            label: enumName,
+                            value: enumName,
+                        })),
+                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-5", children: "Alignment" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-5", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] }) })] }));
+    return (_jsxs(Cmp, { ...cmpProps, className: cn('ab-StyleComponent twa:text-3', props.className), children: [ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (_jsxs(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [_jsx(Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), _jsx(Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), _jsx(Tabs.Content, { value: "classname", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "CSS Class Name" }), _jsxs(Card.Body, { gap: 2, className: "twa:p-1", children: [_jsx(HelpBlock, { children: "Select a CSS Class Name" }), _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(SingleSelect, { items: ArrayExtensions.IsNullOrEmpty(styleClassNames)
                                                     ? []
                                                     : styleClassNames.map((item) => ({
                                                         label: item,
                                                         value: item,
-                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), _jsx(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), _jsx(Tabs.Content, { value: "createstyle", children: _jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                                                const number = Number(event.target.value);
-                                                if (isNaN(number)) {
-                                                    onBorderRadiusChange(0);
-                                                }
-                                                else {
-                                                    onBorderRadiusChange(number);
-                                                }
-                                            } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
-                                                    {
-                                                        label: 'Default',
-                                                        value: '',
-                                                    },
-                                                    ...EnumExtensions.getNames(FontSize).map((enumName) => ({
-                                                        label: enumName,
-                                                        value: enumName,
-                                                    })),
-                                                ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) }) })] })) : (_jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                                    const number = Number(event.target.value);
-                                    if (isNaN(number)) {
-                                        onBorderRadiusChange(0);
-                                    }
-                                    else {
-                                        onBorderRadiusChange(number);
-                                    }
-                                } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
-                                        {
-                                            label: 'Default',
-                                            value: '',
-                                        },
-                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
-                                            label: enumName,
-                                            value: enumName,
-                                        })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
+                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), _jsx(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), _jsx(Tabs.Content, { value: "createstyle", children: _jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) }) })] })) : (_jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
 };

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import kebabCase from '../../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
 import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
-import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView } from '../AdaptableButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Icon } from '../../../components/icons';
 import { CheckBox } from '../../../components/CheckBox';
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
 import SimpleButton from '../../../components/SimpleButton';
 import { ButtonConfigure } from '../Buttons/ButtonConfigure';
@@ -78,18 +78,21 @@ const AdaptableToolPanelComponent = (props) => {
         }
         let toolpanelItems = [
             {
-                clickable: false,
-                label: (_jsxs("div", { children: [' ', "\u00A0\u00A0", _jsx("b", { children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
+                closeOnClick: false,
+                tooltip: 'Tool Panels',
+                label: (_jsxs("div", { children: [_jsx("span", { className: "twa:font-bold", children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
         const buildDropdownButtonItem = (toolPanel, label, isVisible) => {
             return {
-                id: toolPanel,
+                dataName: String(toolPanel),
+                closeOnClick: false,
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
+                tooltip: label,
+                label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -112,7 +115,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (_jsx(DropdownButton, { variant: "text", tone: "none", collapseOnItemClick: false, id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels", children: toolPanelsGlyph }, 'dropdown-toolpanels'));
+        return (_jsx(NewDropdownButton, { variant: "text", tone: "none", id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", items: toolpanelItems, tooltip: "Manage Tool Panels", extraWidthChars: 5, children: toolPanelsGlyph }, 'dropdown-toolpanels'));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
-import kebabCase from '../../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();

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

@@ -3,28 +3,18 @@ import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
 import { InternalState } from '../../../AdaptableState/InternalState';
 import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../AdaptableState/ToolPanelState';
-import { AdaptableModuleButtons, AdaptableToolPanels } from '../../../AdaptableState/Common/Types';
+import { AdaptableModuleButtons } from '../../../AdaptableState/Common/Types';
 interface ToolPanelPopupComponentProps extends ModuleViewPopupProps<ToolPanelPopupComponent> {
     ToolPanelState: ToolPanelState;
     InternalState: InternalState;
     onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => ToolPanelRedux.ToolPanelSetModuleButtonsAction;
     onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => ToolPanelRedux.ToolPanelSetToolPanelsAction;
 }
-export declare enum ToolPanelConfigView {
-    Buttons = "Buttons",
-    ToolPanels = "ToolPanels"
-}
-export interface ToolPanelPopupState {
-    ToolPanelConfigView: ToolPanelConfigView;
-}
-declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps, ToolPanelPopupState> {
-    constructor(props: ToolPanelPopupComponentProps);
+export { ToolPanelConfigView } from './ToolPanelPopupSections';
+declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps> {
     render(): React.JSX.Element;
-    onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
-    onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
 export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;
-export {};

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,79 @@
+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();
+    // Start with both cards collapsed so the user sees the popup's full
+    // summary at a glance and explicitly chooses which to edit. `initialTab`
+    // is still accepted on the props for backwards compatibility but no
+    // longer pre-expands a card.
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(null);
+    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;