@adaptabletools/adaptable 23.1.0-canary.2 → 24.0.0-canary.0

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { AdaptableIcon } from '../../../../AdaptableState/Common/AdaptableIcon';
 export interface PanelWithButtonProps {
     buttonClick?: () => void;
     className?: string;
     bodyClassName?: string;
     button?: React.ReactElement<any>;
     headerText: string;
-    glyphicon?: string;
+    /** Unused in the panel chrome today; kept for call-site compatibility. */
+    glyphicon?: string | AdaptableIcon;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     scrollable?: boolean;

package/src/View/Components/Popups/AdaptablePopup/settingsPanelNavigationTypes.d.ts

@@ -6,6 +6,8 @@ export type SettingsPanelNavigationHeaderEntry = {
 export type SettingsPanelNavigationItemEntry = {
     type: 'item';
     menuItem: AdaptableMenuItem;
+    /** Short subtitle shown under the nav label (module Description or custom panel description). */
+    description?: string;
 };
 export type SettingsPanelNavigationEntry = SettingsPanelNavigationHeaderEntry | SettingsPanelNavigationItemEntry;
 export declare const isSettingsPanelNavigationItem: (entry: SettingsPanelNavigationEntry) => entry is SettingsPanelNavigationItemEntry;

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

@@ -11,6 +11,7 @@ export const useMenuItems = () => {
     const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     return React.useMemo(() => {
         const navigation = resolveSettingsPanelNavigation(adaptable.api, settingsPanelOptions);
+        const moduleService = adaptable.api.internalApi.getModuleService();
         const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
             item.category !== 'CustomSettingsPanel' &&
             item.category !== 'Group' &&
@@ -20,27 +21,41 @@ export const useMenuItems = () => {
             const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
             if (customSettingsPanel) {
                 return {
-                    category: 'CustomSettingsPanel',
-                    label: customSettingsPanel.name,
-                    isVisible: true,
-                    reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name),
+                    type: 'item',
+                    menuItem: {
+                        name: customSettingsPanel.name,
+                        category: 'CustomSettingsPanel',
+                        label: customSettingsPanel.name,
+                        isVisible: true,
+                        reduxAction: PopupRedux.PopupShowScreen(undefined, customSettingsPanel.name),
+                    },
+                    description: customSettingsPanel.description,
                 };
             }
-            return visibleItems.find((item) => item.category === moduleName) ?? null;
+            const menuItem = visibleItems.find((item) => item.category === moduleName) ?? null;
+            if (!menuItem) {
+                return null;
+            }
+            const description = moduleService.getModuleInfoByModule(moduleName)?.Description;
+            return {
+                type: 'item',
+                menuItem,
+                description,
+            };
         };
         const entries = [];
         for (const group of navigation.groups) {
-            const groupMenuItems = group.items
+            const groupEntries = group.items
                 .map((moduleName) => resolveNavigationItem(moduleName))
                 .filter(Boolean);
-            if (!groupMenuItems.length) {
+            if (!groupEntries.length) {
                 continue;
             }
             if (group.label) {
                 entries.push({ type: 'header', label: group.label });
             }
-            for (const menuItem of groupMenuItems) {
-                entries.push({ type: 'item', menuItem });
+            for (const entry of groupEntries) {
+                entries.push(entry);
             }
         }
         return entries;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { PanelWithImage } from '../Panels/PanelWithImage';
-import { UIHelper } from '../../UIHelper';
+import { UIHelper } from '../../../Utilities/Helpers/UIHelper';
 import Dialog from '../../../components/Dialog';
 import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
 import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { UIHelper } from '../../UIHelper';
+import { UIHelper } from '../../../Utilities/Helpers/UIHelper';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import { PanelWithImage } from '../Panels/PanelWithImage';
 import SimpleButton from '../../../components/SimpleButton';
@@ -39,8 +39,8 @@ export const AdaptablePopupConfirmation = (props) => {
     if (!props.showPopup) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx(Dialog, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' }, children: _jsx(PanelWithImage, { header: header, icon: glyph, variant: "primary", children: _jsxs("div", { children: [_jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: props.messsage.split('\n').map(function (item, index) {
-                            return (_jsxs(Box, { className: "twa:m-2", children: [item, _jsx("br", {})] }, index));
+    return (_jsx(Dialog, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' }, children: _jsx(PanelWithImage, { header: header, icon: glyph, variant: "primary", children: _jsxs("div", { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }, children: props.messsage.split('\n').map(function (item, index) {
+                            return (_jsx(Box, { className: "twa:mx-2 twa:my-1", children: item }, index));
                         }) }), _jsx(Box, { className: "twa:pl-2", children: _jsx(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                                 setDisableDeleteConfirmation(!disableDeleteConfirmation);
                             }, children: "Do not show this again" }) }), props.showInputBox && (_jsxs(Box, { className: "twa:p-2", "data-name": "body", children: [_jsx("p", { children: "Please enter a comment to confirm." }), _jsx(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) })] })), _jsxs(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [props.cancelButtonText != null ? (_jsx(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm(), children: props.cancelButtonText })) : (_jsx("div", {})), _jsx(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm(), children: props.confirmButtonText })] })] }) }) }));

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-interface NotesAndCommentsPopupProps {
+interface GridCellPopupProps {
 }
-export declare const GridCellPopup: React.FunctionComponent<NotesAndCommentsPopupProps>;
+/**
+ * In-cell popup for Comments. (Notes are rendered by AG Grid's native Cell Notes.)
+ */
+export declare const GridCellPopup: React.FunctionComponent<GridCellPopupProps>;
 export {};

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

@@ -1,38 +1,21 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
-import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
+import { CommentPopupEditModeSelector, CommentPopupFocusedEntitySelector, CommentPopupPositionSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CommentsEditor } from '../../../Comments/CommentsEditor';
-import { NoteEditor } from '../../../Note/NoteEditor';
 import { CellPopup } from '../../CellPopup';
-import { Flex } from '../../../../components/Flex';
-const ConnectedNoteEditor = ({ enableEditMode }) => {
-    const { api } = useAdaptable();
-    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
-    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
-    const annotationsService = api.internalApi.getAnnotationsService();
-    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
-    const note = useSelector((state) => {
-        return cellAddress ? GetNoteSelector(state.Note, cellAddress) : null;
-    });
-    const handleNoteChange = React.useCallback((value) => {
-        api.noteApi.updateNoteText(value, note);
-    }, [note]);
-    return (_jsx(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup", children: _jsx(NoteEditor, { isReadonly: isReadonly, editMode: editMode, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) }, note?.Uuid) }));
-};
 export const GridCellPopup = (props) => {
     const { api } = useAdaptable();
     const cellPopupRef = React.useRef(null);
-    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
-    const focusedEntity = useSelector((state) => CommentsAndNotesFocusedEntitySelector(state.Internal));
-    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
-    const enableEditMode = (entity) => {
+    const editMode = useSelector((state) => CommentPopupEditModeSelector(state.Internal));
+    const focusedEntity = useSelector((state) => CommentPopupFocusedEntitySelector(state.Internal));
+    const cellAddress = useSelector((state) => CommentPopupPositionSelector(state.Internal));
+    const enableEditMode = () => {
         if (!editMode) {
-            const annotationsService = api.internalApi.getAnnotationsService();
-            annotationsService.showPopup(cellAddress, true);
-            annotationsService.editFocusedEntity(entity);
+            const commentsService = api.internalApi.getCommentsService();
+            commentsService.showPopup(cellAddress, true);
+            commentsService.editFocusedEntity('Comment');
         }
     };
     React.useEffect(() => {
@@ -41,16 +24,5 @@ export const GridCellPopup = (props) => {
     if (!cellAddress) {
         return _jsx(_Fragment, {});
     }
-    const noteEditor = _jsx(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
-    const commentEditor = (_jsx(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
-    return (_jsx(CellPopup, { ref: cellPopupRef, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId, children: (() => {
-            switch (focusedEntity) {
-                case 'Note':
-                    return noteEditor;
-                case 'Comment':
-                    return commentEditor;
-                default:
-                    return (_jsxs(_Fragment, { children: [noteEditor, commentEditor] }));
-            }
-        })() }, `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`));
+    return (_jsx(CellPopup, { ref: cellPopupRef, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId, children: _jsx(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode() }) }, `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`));
 };

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

@@ -20,7 +20,7 @@ export const getSettingsPanelSize = () => {
     const width = window.innerWidth;
     return {
         height: clamp(height * 0.9, 0, 800),
-        width: clamp(width * 0.9, 0, 800),
+        width: clamp(width * 0.9, 0, 880),
     };
 };
 export const getWizardSize = () => {

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,5 +1,4 @@
 import { WindowPopupChildProps } from './WindowPopups';
-export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
 export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const COLUMN_FILTER_WINDOW = "COLUMN_FILTER_WINDOW";

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,13 +1,10 @@
-import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
 import { TransposedPopup } from '../../../Layout/TransposedPopup';
-import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
-export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
+import { ColumnFilterWindow } from '../../../Filter/ColumnFilter/ColumnFilterWindow';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {
-    [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
     [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
     [COLUMN_FILTER_WINDOW]: ColumnFilterWindow,

package/src/View/Components/PreviewResultsPanel.js

@@ -3,43 +3,60 @@ import * as React from 'react';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import CheckIcon from '../../components/icons/check';
-import UIHelper from '../UIHelper';
+import UIHelper from '../../Utilities/Helpers/UIHelper';
 import { Card } from '../../components/Card';
-const columnsMap = {
-    InitialValue: {
-        field: 'InitialValue',
-        defaultFlex: 1,
-        header: 'Current',
-        align: 'center',
-        renderMenuIcon: false,
-    },
-    ComputedValue: {
-        field: 'ComputedValue',
-        defaultFlex: 1,
-        header: 'New',
-        align: 'center',
-        renderMenuIcon: false,
-    },
-    ValidInfo: {
-        field: 'ValidInfo',
-        defaultWidth: 80,
-        header: 'Valid',
-        align: 'center',
-        renderMenuIcon: false,
-    },
-};
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { cn } from '../../lib/utils';
 const ROW_HEIGHT = 35;
 const HEADER_HEIGHT = 30;
 export class PreviewResultsPanel extends React.Component {
     render() {
+        const cellCount = this.props.previewInfo?.previewResults?.length ?? 0;
+        const columnLabel = this.props.selectedColumn
+            ? `${this.props.selectedColumn.friendlyName} (${cellCount} cells selected)`
+            : `${cellCount} cells selected`;
         let previewHeader = this.props.showHeader && this.props.previewInfo != null
-            ? 'Preview Results: ' +
-                (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
+            ? `Preview Results: ${columnLabel}`
             : '';
         let successColor = UIHelper.getColorByMessageType('Success');
+        const primaryKeyColumn = this.props.api.columnApi.getPrimaryKeyColumn();
+        const primaryKeyHeader = primaryKeyColumn
+            ? this.props.api.columnApi.getFriendlyNameForColumnId(primaryKeyColumn.columnId)
+            : StringExtensions.Humanize(this.props.api.optionsApi.getPrimaryKey());
+        const columnsMap = {
+            PrimaryKeyValue: {
+                field: 'PrimaryKeyValue',
+                defaultFlex: 1,
+                header: primaryKeyHeader,
+                align: 'center',
+                renderMenuIcon: false,
+            },
+            InitialValue: {
+                field: 'InitialValue',
+                defaultFlex: 1,
+                header: 'Current',
+                align: 'center',
+                renderMenuIcon: false,
+            },
+            ComputedValue: {
+                field: 'ComputedValue',
+                defaultFlex: 1,
+                header: 'New',
+                align: 'center',
+                renderMenuIcon: false,
+            },
+            ValidInfo: {
+                field: 'ValidInfo',
+                defaultWidth: 80,
+                header: 'Valid',
+                align: 'center',
+                renderMenuIcon: false,
+            },
+        };
         const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {
             return {
                 Id: index,
+                PrimaryKeyValue: previewResult.id,
                 InitialValue: previewResult.initialValue,
                 ComputedValue: previewResult.computedValue,
                 ValidInfo: previewResult.validationRules.length > 0 ? (_jsx(_Fragment, { children: this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })) })) : (_jsxs(_Fragment, { children: [' ', _jsx(CheckIcon, { style: { color: successColor, fill: 'currentColor' } })] })),
@@ -47,17 +64,15 @@ export class PreviewResultsPanel extends React.Component {
         });
         const tableHeight = HEADER_HEIGHT + dataSource.length * ROW_HEIGHT;
         const tableDOMProps = {
-            style: { height: tableHeight, maxWidth: 500 },
+            style: { height: tableHeight },
         };
-        return this.props.showPanel ? (_jsxs(Card, { className: "twa:flex-1 twa:overflow-hidden twa:min-w-70 twa:min-h-50", shadow: false, children: [_jsx(Card.Title, { children: previewHeader }), _jsx(Card.Body, { children: _jsx(DataSource, { data: dataSource, primaryKey: "Id", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }) }) })] })) : null;
+        return this.props.showPanel ? (_jsxs(Card, { className: cn('twa:w-full twa:max-w-[640px] twa:shrink-0 twa:self-start', this.props.className), shadow: false, children: [_jsx(Card.Title, { children: previewHeader }), _jsx(Card.Body, { className: "twa:flex-none", children: _jsx(DataSource, { data: dataSource, primaryKey: "Id", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }) }) })] })) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();
         let returnString = [];
         for (let alertDefinition of alertDefinitions) {
-            let expressionDescription = 'Rule' in alertDefinition && alertDefinition.Rule.BooleanExpression
-                ? ' when ' + alertDefinition.Rule.BooleanExpression
-                : '';
+            let expressionDescription = 'Rule' in alertDefinition && alertDefinition.Rule ? ' when ' + alertDefinition.Rule : '';
             returnString.push(validationService.createValidationDescription(alertDefinition) + expressionDescription);
         }
         return returnString.join('\n');

package/src/View/Components/Selectors/FieldSelector.d.ts

@@ -6,6 +6,7 @@ interface FieldSelectorProps {
     type?: AdaptableColumnDataType;
     disabled?: boolean;
     placeholder?: string;
+    className?: string;
 }
 export declare const FieldSelector: React.FunctionComponent<FieldSelectorProps>;
 export {};

package/src/View/Components/Selectors/FieldSelector.js

@@ -11,7 +11,7 @@ export const FieldSelector = (props) => {
         label: field.label ?? field.name,
         value: field.name,
     }));
-    return (_jsx(_Fragment, { children: _jsx(SingleCombobox, { "data-name": "column-selector", disabled: props.disabled, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onValueChange: (fieldValue) => {
+    return (_jsx(_Fragment, { children: _jsx(SingleCombobox, { "data-name": "column-selector", className: props.className, disabled: props.disabled, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onValueChange: (fieldValue) => {
                 props.onChange(fieldValue);
             }, items: options }) }));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
 import { useAdaptable } from '../../AdaptableContext';
 import { useCallback } from 'react';
+import { snapshotInFilterValue } from '../../../Utilities/Helpers/ColumnFilterHelper';
 import { MultiCombobox, SingleCombobox, } from '../../../components/Combobox';
 export const PermittedValuesSelector = function (props) {
     const adaptable = useAdaptable();
@@ -42,7 +43,10 @@ export const PermittedValuesSelector = function (props) {
             });
             setSearchValueWasUsedWhenFiltering(searchValueUsedInFilterValue);
             setIsLoading(false);
-            setOptions(Array.isArray(distinctColumnValues) ? distinctColumnValues : distinctColumnValues.values);
+            const loadedValues = Array.isArray(distinctColumnValues)
+                ? distinctColumnValues
+                : distinctColumnValues.values;
+            setOptions(loadedValues.filter((item) => !item?.expressionFunction).map(snapshotInFilterValue));
         })();
     }, [props.columnId, props.loadValues, refetchKey]);
     const isCreatable = (props.allowNewValues && !dataType) || ['text', 'number'].includes(dataType);
@@ -100,7 +104,7 @@ export const PermittedValuesSelector = function (props) {
         searchable: props.searchable ?? 'menulist',
         className: props.className,
         disabled: props.disabled,
-        placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'),
+        placeholder: props.placeholder || (props.allowNewValues ? 'Select or add new value' : 'Select value'),
         ['data-name']: 'permitted-values-selector',
         items: options,
         onInputValueChange: onInputChange,

package/src/View/Components/SharedProps/BaseProps.d.ts

@@ -3,6 +3,5 @@ import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 export interface BaseProps<View> extends React.ClassAttributes<View> {
     accessLevel: AccessLevel;
-    modalContainer: HTMLElement;
     api: AdaptableApi;
 }

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -19,6 +19,7 @@ export interface ModuleParams {
     primaryKeyValues?: any[];
     maxWidth?: number;
     source: 'Toolbar' | 'ModuleMenu' | 'ColumnMenu' | 'ContextMenu' | 'ModuleButton' | 'Other' | 'Api';
+    settingsPanelTab?: string;
     config?: {
         [key: string]: any;
     };

package/src/View/Components/SharedProps/ViewPanelProps.d.ts

@@ -3,6 +3,11 @@ import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
 export interface ViewPanelProps {
     viewType: 'Toolbar' | 'ToolPanel';
+    /**
+     * Where a Dashboard Toolbar is hosted.
+     * Only set when `viewType` is `'Toolbar'`.
+     */
+    toolbarPlacement?: 'pinned' | 'tabbed';
     api: AdaptableApi;
     accessLevel: AccessLevel;
     moduleInfo: ModuleInfo;

package/src/View/Components/StyleComponent.js

@@ -13,7 +13,7 @@ import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import AdaptableInput from './AdaptableInput';
 import { Box, Flex } from '../../components/Flex';
 import { Card } from '../../components/Card';
-import { SingleSelect } from '../../components/NewSelect';
+import { SingleSelect } from '../../components/Select';
 import { cn } from '../../lib/utils';
 export const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));

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

@@ -1,14 +1,14 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { ColumnTag, Tag } from '../../../components/Tag';
+import { AccentTag, Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
-import { WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED } from '../../Components/wizardColumnListStyles';
+import { WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED } from '../../Wizard/wizardColumnListStyles';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import Input from '../../../components/Input';
 import { Card } from '../../../components/Card';
 export const renderCustomSortColumn = (data, api) => {
-    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(ColumnTag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
+    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(AccentTag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
 };
 export const isValidCustomSortColumn = (data, allCustomSorts) => {
     if (!data.Name) {

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

@@ -8,6 +8,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch, useSelector } from 'react-redux';
 import * as CustomSortRedux from '../../../Redux/ActionsReducers/CustomSortRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { isLayoutExtensionInfoWizardSectionVisible, LayoutExtensionInfoWizardSection, renderLayoutExtensionInfoSummary, useLayoutExtensionInfoState, } from '../../Wizard/LayoutExtensionInfoWizardSection';
 import { Box } from '../../../components/Flex';
 export const CustomSortWizard = (props) => {
     let data = props.data;
@@ -25,6 +26,7 @@ export const CustomSortWizard = (props) => {
         }
         return newData;
     });
+    const layoutExtensionInfo = useLayoutExtensionInfoState('CustomSort', data);
     const dispatch = useDispatch();
     const handleFinish = () => {
         if (data) {
@@ -33,6 +35,7 @@ export const CustomSortWizard = (props) => {
         else {
             dispatch(CustomSortRedux.CustomSortAdd(customSort));
         }
+        layoutExtensionInfo.applyLayoutExtensionInfo(customSort);
         props.onFinishWizard(customSort);
     };
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
@@ -59,6 +62,13 @@ export const CustomSortWizard = (props) => {
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setCustomSort }) })),
                 renderSummary: renderObjectTagsSummary,
             },
+            {
+                details: 'Select the Layouts where this Custom Sort is available',
+                title: 'Layouts',
+                isVisible: (_, api) => isLayoutExtensionInfoWizardSectionVisible(api),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(LayoutExtensionInfoWizardSection, { layoutNames: layoutExtensionInfo.layoutNames, onChange: layoutExtensionInfo.setLayoutNames }) })),
+                renderSummary: () => renderLayoutExtensionInfoSummary(layoutExtensionInfo.layoutNames),
+            },
             '-',
             {
                 title: 'Summary',

package/src/View/Dashboard/CustomToolbar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../AdaptableContext';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
-import { PanelDashboard } from '../Components/Panels/PanelDashboard';
+import { PanelDashboard } from './PanelDashboard';
 import { AdaptableFormComponent } from '../../components/AdaptableFormComponent/AdaptableFormComponent';
 import { getDefaultAdaptableFormData, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
 export const CustomToolbarCmp = (props) => {

package/src/View/Dashboard/Dashboard.js

@@ -10,8 +10,7 @@ import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { QuickSearchModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
-import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
-import UIHelper from '../UIHelper';
+import UIHelper from '../../Utilities/Helpers/UIHelper';
 import { CustomDashboardButton } from './CustomDashboardButton';
 import { CustomToolbarWrapper } from './CustomToolbar';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
@@ -19,6 +18,7 @@ import { PinnedDashboard } from './PinnedDashboard';
 import { ModuleToolbarWrapper } from './ModuleToolbarWrapper';
 import { QuickSearchInput } from '../QuickSearch/QuickSearchInput';
 import { Box } from '../../components/Flex';
+import { getSettingsPanelOpenIcon } from '../../Utilities/Helpers/SettingsPanelHelper';
 const DashboardComponent = (props) => {
     const dashboardAccessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
@@ -39,7 +39,7 @@ const DashboardComponent = (props) => {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}`, children: _jsx(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel, children: _jsx(DashboardToolbarFactory, { toolbarName: moduleToolbarName }) }) }, moduleToolbarName));
+                        return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}`, children: _jsx(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel, children: _jsx(DashboardToolbarFactory, { toolbarName: moduleToolbarName, toolbarPlacement: "tabbed" }) }) }, moduleToolbarName));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -49,29 +49,29 @@ const DashboardComponent = (props) => {
         });
         return visibleDashboardElements;
     };
-    const renderModuleButtons = () => {
-        let shortcutsArray = props.DashboardState.ModuleButtons;
-        let shortcuts = null;
-        const alwaysShowInDashboard = props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-        const shouldAddSettingsPanel = alwaysShowInDashboard && !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
-        if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
-            shortcutsArray.push('SettingsPanel');
-        }
-        if (shortcutsArray) {
-            shortcuts = shortcutsArray.map((x, index) => {
-                let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
-                if (menuItem) {
-                    return (_jsx(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
-                            ? {
-                                ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
-                                    'Success'),
-                                border: 0,
-                            }
-                            : {} }, menuItem.label));
-                }
-            });
+    const renderHomeControl = () => {
+        if (props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel')) {
+            return null;
         }
-        return shortcuts;
+        const settingsPanelOptions = props.api.optionsApi.getSettingsPanelOptions();
+        const panelTitle = settingsPanelOptions.title;
+        const homeIcon = getSettingsPanelOpenIcon(settingsPanelOptions.icon, props.api.optionsApi.getUserInterfaceOptions().applicationIcon);
+        return (_jsx(AdaptableButtonComponent, { "data-name": "dashboard-module-button-SettingsPanel", "aria-label": panelTitle, variant: "text", tone: "none", className: "ab-Dashboard__home-control ab-Dashboard__application-icon", icon: homeIcon, tooltip: panelTitle, onClick: () => props.api.settingsPanelApi.openSettingsPanel(), accessLevel: ACCESS_LEVEL_FULL }, "dashboard-home-control"));
+    };
+    const renderModuleButtons = () => {
+        const shortcutsArray = (props.DashboardState.ModuleButtons ?? []).filter((module) => module !== 'SettingsPanel');
+        return shortcutsArray.map((x, index) => {
+            let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
+            if (menuItem) {
+                return (_jsx(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
+                        ? {
+                            ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
+                                'Success'),
+                            border: 0,
+                        }
+                        : {} }, menuItem.label));
+            }
+        });
     };
     const renderDashboardButtons = () => {
         let dashboardButtonsArray = props.api.dashboardApi
@@ -90,7 +90,6 @@ const DashboardComponent = (props) => {
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
         props.api.internalApi.getModuleService().isAdapTableModulePresent(QuickSearchModuleId);
-    const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
         return _jsx("div", {});
     }
@@ -108,7 +107,7 @@ const DashboardComponent = (props) => {
             else {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
-        }, left: _jsxs(_Fragment, { children: [_jsx(AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }), dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(), dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()] }), right: _jsxs(_Fragment, { children: [dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(), dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(), shouldRenderQuickSearchHeader && renderQuickSearch()] }), onShowDashboardPopup: props.onShowDashboardPopup, children: props.DashboardState.Tabs &&
+        }, left: _jsxs(_Fragment, { children: [renderHomeControl(), dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(), dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()] }), right: _jsxs(_Fragment, { children: [dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(), dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(), shouldRenderQuickSearchHeader && renderQuickSearch()] }), onShowDashboardPopup: props.onShowDashboardPopup, children: props.DashboardState.Tabs &&
             props.DashboardState.Tabs.map((tab, index) => (_jsx(DashboardTabUI, { title: tab.Name, children: renderTab(tab) }, index))) }));
 };
 function mapStateToProps(state, ownProps) {