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

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

@@ -6,13 +6,13 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { InputGroup } from '../../../components/InputGroup';
 import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
-import { RangesComponent } from '../../Components/RangesComponent';
+import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../UIHelper';
+import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
-import { SingleSelect } from '../../../components/NewSelect';
+import { SingleSelect } from '../../../components/Select';
 import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';

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

@@ -6,7 +6,7 @@ import { Tag } from '../../../components/Tag';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
-import { SingleSelect } from '../../../components/NewSelect';
+import { SingleSelect } from '../../../components/Select';
 import Input from '../../../components/Input';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
@@ -19,9 +19,8 @@ const ICON_CHOICES = [
     { value: 'Circle', label: 'Circle' },
     { value: 'Thumb', label: 'Thumb' },
 ];
-const formatRatingToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percentage Value'))
-    .join(' + ') ?? '';
+const formatRatingToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percentage Value')).join(' + ') ??
+    '';
 const buildStyledColumnRatingStyleSummaryStrings = (rating, options) => {
     const items = [
         `Max: ${rating.Max ?? DEFAULT_RATING_MAX}`,
@@ -39,7 +38,7 @@ const buildStyledColumnRatingStyleSummaryStrings = (rating, options) => {
     if (rating.Gap != null) {
         items.push(`Icon Gap: ${rating.Gap}px`);
     }
-    items.push(`Allow Half: ${(rating.AllowHalf ?? true) ? 'Yes' : 'No'}`);
+    items.push(`Allow Half: ${rating.AllowHalf ?? true ? 'Yes' : 'No'}`);
     items.push(`Show Value: ${rating.ShowValue ? 'Yes' : 'No'}`);
     if (rating.ToolTipText?.length) {
         items.push(`Tooltip: ${formatRatingToolTipSummary(rating.ToolTipText)}`);
@@ -65,9 +64,7 @@ const resolveCssVar = (varName, fallbackHex) => {
     if (typeof window === 'undefined')
         return fallbackHex;
     try {
-        const v = getComputedStyle(document.documentElement)
-            .getPropertyValue(varName)
-            .trim();
+        const v = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
         return v || fallbackHex;
     }
     catch {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } 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 { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
@@ -8,7 +8,7 @@ import { CheckBox } from '../../../components/CheckBox';
 import { cn } from '../../../lib/utils';
 import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 const ROW_KIND_LABELS = {
     Data: 'Data (leaf) Rows',
     Group: 'Group Rows',
@@ -47,7 +47,7 @@ export const renderStyledColumnScopeSummary = (data, api) => {
 export const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
 const StyledColumnColumnScopeSummary = ({ data, }) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (_jsx(CollapsibleWizardValueSummary, { value: data.ColumnId ? (_jsx(ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(data.ColumnId) })) : (_jsx(Tag, { children: "No column selected" })) }));
+    return (_jsx(CollapsibleWizardValueSummary, { value: data.ColumnId ? (_jsx(AccentTag, { children: api.columnApi.getFriendlyNameForColumnId(data.ColumnId) })) : (_jsx(Tag, { children: "No column selected" })) }));
 };
 const StyledColumnRowsScopeSummary = ({ data, }) => {
     const includedKinds = collectIncludedRowKinds(data);
@@ -196,7 +196,7 @@ export const StyledColumnWizardScopeSection = (props) => {
     const initialExpandedCardId = data.ColumnId ? null : 'column';
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
     const columnCompactSummary = data.ColumnId
-        ? renderCompactColumnTags([data.ColumnId], (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No column' })
+        ? renderCompactAccentTags([data.ColumnId], (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No column' })
         : _jsx(Tag, { children: "No column" });
     const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
     return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(CollapsibleWizardCard, { ...bindCard('column', { fillAvailable: true }), surface: "panel", "data-name": "styled-column-scope-column", title: "Column", help: "Select Column the Style is applied to", collapsedHelp: "Column the Style is applied to", compactSummary: columnCompactSummary, summary: _jsx(StyledColumnColumnScopeSummary, { data: data }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:h-full twa:px-1 twa:pb-1 twa:flex twa:flex-col", children: _jsx(NewColumnSelector, { compactColumnList: true, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "styled-column-scope-rows", title: "Rows", help: "Select which kinds of Rows the Styled Column will render on", collapsedHelp: "Row kinds the Styled Column renders on", compactSummary: rowsCompactSummary, summary: _jsx(StyledColumnRowsScopeSummary, { data: data }), children: _jsx(StyledColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) })] }));

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor.js

@@ -3,7 +3,7 @@ import { resolveBarStyleCellTextLayout } from '../../../../../Utilities/Helpers/
 import { CheckBox } from '../../../../../components/CheckBox';
 import { Box, Flex } from '../../../../../components/Flex';
 import { FormRow } from '../../../../../components/FormLayout';
-import { SingleSelect } from '../../../../../components/NewSelect';
+import { SingleSelect } from '../../../../../components/Select';
 const HORIZONTAL_CHOICES = [
     { value: 'Left', label: 'Left' },
     { value: 'Center', label: 'Center' },

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { useAdaptable } from '../../../../AdaptableContext';
-import { Badge } from '../../../../Components/Badge';
+import { Badge } from '../../../../StyledColumn/Badge';
 import { Box } from '../../../../../components/Flex';
 import { Tag } from '../../../../../components/Tag';
 const OVERFLOW_CLASS = {

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import ErrorBox from '../../../../components/ErrorBox';
 import { Tag } from '../../../../components/Tag';
-import { RangesComponent } from '../../../Components/RangesComponent';
-import { getGraySwatchColor } from '../../../UIHelper';
+import { RangesComponent } from '../../RangesComponent';
+import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../../components/Flex';
 import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';

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

@@ -6,7 +6,7 @@ import { Tag } from '../../../../components/Tag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
 import { OptionalColorPicker } from '../../../../components/ColorPicker';
-import { getGraySwatchColor } from '../../../UIHelper';
+import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';

package/src/View/SystemStatus/SystemStatusPopup.d.ts

@@ -1,20 +1,3 @@
 import * as React from 'react';
-import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { SystemStatusMessageInfo } from '../../types';
-interface SystemStatusPopupProps extends ModuleViewPopupProps<SystemStatusPopupComponent> {
-    SystemStatusMessageInfos: SystemStatusMessageInfo[];
-    SystemStatusMessages: SystemStatusMessageInfo[];
-    onSystemStatusMessageInfoDeleteAll: () => InternalRedux.SystemStatusMessageInfoDeleteAllAction;
-}
-interface SystemStatusPopupState {
-}
-declare class SystemStatusPopupComponent extends React.Component<SystemStatusPopupProps, SystemStatusPopupState> {
-    constructor(props: SystemStatusPopupProps);
-    onSystemStatusMessageInfoDeleteAll(): void;
-    render(): React.JSX.Element;
-}
-export declare let SystemStatusPopup: import("react-redux").ConnectedComponent<typeof SystemStatusPopupComponent, {
-    [x: string]: any;
-}>;
-export {};
+export declare const SystemStatusPopup: (props: ModuleViewPopupProps<null>) => React.JSX.Element;

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -1,44 +1,113 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import SimpleButton from '../../components/SimpleButton';
-import { AdaptableObjectCollection } from '../Components/AdaptableObjectCollection';
-import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
-import { SystemStatusEntityRow } from './SystemStatusEntityRow';
+import { Box, Flex } from '../../components/Flex';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { SortOrder } from '../../AdaptableState/Common/Enums';
-import { Box } from '../../components/Flex';
-const colItems = [
-    { Content: 'Message', Size: 10 },
-    { Content: 'Timestamp', Size: 3 },
-];
-class SystemStatusPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    onSystemStatusMessageInfoDeleteAll() {
-        this.props.onSystemStatusMessageInfoDeleteAll();
-    }
-    render() {
-        let clearAllButton = (_jsx(SimpleButton, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions.IsNullOrEmpty(this.props.SystemStatusMessages), children: "Delete All Messages" }));
-        const messages = ArrayExtensions.sortArrayWithProperty(SortOrder.Desc, this.props.SystemStatusMessages, 'Timestamp').map((smi, index) => {
-            const accessLevel = AdaptableHelper.getAccessLevelForObject(smi, this.props.accessLevel);
-            return (_jsx(SystemStatusEntityRow, { adaptableObject: smi, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }, 'smi' + index));
-        });
-        return (_jsx(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (_jsx(Box, { className: "ab-SystemStatus-Popup-List twa:p-2", children: _jsx(AdaptableObjectCollection, { colItems: colItems, items: messages }) })) }));
+import { getColorByMessageType } from '../../Utilities/Helpers/UIHelper';
+import join from '../../components/utils/join';
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 200,
+    },
+};
+const COLLAPSED_ROW_HEIGHT = 40;
+const EXPANDED_ROW_LINE_HEIGHT = 18;
+const EXPANDED_ROW_BASE_HEIGHT = 56;
+const FURTHER_INFO_CHARS_PER_LINE = 70;
+const columnTypes = {
+    default: {
+        align: 'start',
+        defaultFlex: 1,
+        defaultSortable: false,
+        style: { fontSize: 'var(--ab-font-size-3)' },
+    },
+};
+const headerOptions = {
+    alwaysReserveSpaceForSortIcon: false,
+};
+function getExpandedRowHeight(furtherInfo) {
+    if (!furtherInfo) {
+        return COLLAPSED_ROW_HEIGHT;
     }
+    const lines = furtherInfo
+        .split('\n')
+        .reduce((acc, line) => acc + Math.max(1, Math.ceil(line.length / FURTHER_INFO_CHARS_PER_LINE)), 0);
+    return EXPANDED_ROW_BASE_HEIGHT + lines * EXPANDED_ROW_LINE_HEIGHT;
 }
-function mapStateToProps(state, ownProps) {
-    return {
-        SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
-        SystemStatusMessages: state.Internal.SystemStatusMessages,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onSystemStatusMessageInfoDeleteAll: () => dispatch(InternalRedux.SystemStatusMessageInfoDeleteAll()),
-    };
-}
-export let SystemStatusPopup = connect(mapStateToProps, mapDispatchToProps)(SystemStatusPopupComponent);
+export const SystemStatusPopup = (props) => {
+    const dispatch = useDispatch();
+    const [expandedMessageIds, setExpandedMessageIds] = React.useState(() => new Set());
+    const systemStatusMessages = useSelector((state) => state.Internal.SystemStatusMessages ?? []);
+    const clearAllMessages = React.useCallback(() => {
+        dispatch(InternalRedux.SystemStatusMessageInfoDeleteAll());
+    }, [dispatch]);
+    const toggleExpanded = React.useCallback((uuid, open) => {
+        if (!uuid) {
+            return;
+        }
+        setExpandedMessageIds((prev) => {
+            const next = new Set(prev);
+            if (open) {
+                next.add(uuid);
+            }
+            else {
+                next.delete(uuid);
+            }
+            return next;
+        });
+    }, []);
+    const columnsMap = React.useMemo(() => {
+        const columns = {
+            message: {
+                field: 'statusMessage',
+                header: 'Message',
+                defaultFlex: 10,
+                style: {
+                    whiteSpace: 'normal',
+                    wordBreak: 'break-word',
+                    alignItems: 'flex-start',
+                },
+                render: ({ data }) => {
+                    if (!data) {
+                        return null;
+                    }
+                    const statusType = data.statusType ?? 'Success';
+                    const messageTypeColor = getColorByMessageType(statusType);
+                    const hasFurtherInfo = Boolean(data.statusFurtherInformation);
+                    const isExpanded = Boolean(data.Uuid && expandedMessageIds.has(data.Uuid));
+                    return (_jsxs("details", { open: isExpanded, onToggle: (event) => {
+                            const open = event.currentTarget.open;
+                            if (open !== isExpanded) {
+                                toggleExpanded(data.Uuid, open);
+                            }
+                        }, children: [_jsxs(Flex, { title: hasFurtherInfo ? 'Click to see more' : '', className: join('ab-DashboardToolbar__SystemStatus__text', hasFurtherInfo && 'ab-DashboardToolbar__SystemStatus__text--expandable'), style: { backgroundColor: messageTypeColor }, alignItems: "center", as: "summary", children: [data.statusMessage, hasFurtherInfo ? ' ...' : ''] }), hasFurtherInfo ? (_jsx(Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2", children: data.statusFurtherInformation })) : null] }));
+                },
+            },
+            timestamp: {
+                field: 'timestamp',
+                header: 'Timestamp',
+                defaultFlex: 3,
+                valueGetter: ({ data }) => {
+                    return data?.timestamp ? data.timestamp.toLocaleString() : '';
+                },
+            },
+        };
+        return columns;
+    }, [expandedMessageIds, toggleExpanded]);
+    const sortedMessages = React.useMemo(() => ArrayExtensions.sortArrayWithProperty(SortOrder.Desc, systemStatusMessages, 'timestamp'), [systemStatusMessages]);
+    const clearAllButton = (_jsx(SimpleButton, { onClick: clearAllMessages, tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: props.accessLevel, disabled: ArrayExtensions.IsNullOrEmpty(systemStatusMessages), children: "Delete All Messages" }));
+    return (_jsx(PopupPanel, { button: clearAllButton, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: ArrayExtensions.IsNotNullOrEmpty(sortedMessages) && (_jsx(Box, { className: "ab-SystemStatus-Popup-List twa:p-2 twa:flex-1 twa:min-h-0", children: _jsx(DataSource, { data: sortedMessages, primaryKey: "Uuid", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap, rowHeight: (rowInfo) => {
+                        const data = rowInfo.data;
+                        if (data?.Uuid && expandedMessageIds.has(data.Uuid)) {
+                            return getExpandedRowHeight(data.statusFurtherInformation);
+                        }
+                        return COLLAPSED_ROW_HEIGHT;
+                    } }) }) })) }));
+};

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -1,4 +1,4 @@
-import UIHelper from '../../UIHelper';
+import UIHelper from '../../../Utilities/Helpers/UIHelper';
 export const getStatusItemStyle = (systemStatusMessageInfo) => {
     const background = UIHelper.getColorByMessageType(systemStatusMessageInfo?.statusType ?? 'Success');
     const color = systemStatusMessageInfo

package/src/View/Theme/ThemeSelector.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDispatch, useSelector } from 'react-redux';
-import { SingleSelect } from '../../components/NewSelect';
+import { SingleSelect } from '../../components/Select';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { ThemeModuleId } from '../../Utilities/Constants/ModuleConstants';

package/src/View/ToolPanel/AdaptableToolPanel.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as ToolPanelRedux from '../../Redux/ActionsReducers/ToolPanelRedux';
+import { IToolPanelParams } from 'ag-grid-enterprise';
+import { AdaptableApi } from '../../types';
+import { AdaptableMenuItem } from '../../AdaptableState/Common/Menu';
+import { AdaptableModuleButtons, AdaptableToolPanel } from '../../AdaptableState/Common/Types';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
+import { AdaptableToolPanelDefinition } from '../../AdaptableState/ToolPanelState';
+import type { Action } from 'redux';
+interface AdaptableToolPanelProps {
+    api: AdaptableApi;
+    teamSharingActivated?: boolean;
+    ToolPanels: AdaptableToolPanelDefinition[];
+    ModuleButtons: AdaptableModuleButtons;
+    MainMenuItems: AdaptableMenuItem[];
+    Columns: AdaptableColumn[];
+    onClick: (action: Action) => Action;
+    onShowToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelShowToolPanelAction;
+    onHideToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelHideToolPanelAction;
+    onExpandToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelExpandToolPanelAction;
+    onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
+}
+export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => React.JSX.Element, {
+    api: AdaptableApi;
+    teamSharingActivated?: boolean;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
+    store?: import("redux").Store;
+}>;
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => React.JSX.Element) | {
+    new (): {
+        gui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
+        init(params?: IToolPanelParams): void;
+        getGui(): HTMLElement;
+        refresh(): void;
+        destroy(): void;
+    };
+};
+export {};

package/src/View/ToolPanel/AdaptableToolPanel.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 '../Components/AdaptableButton';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { Icon } from '../../components/icons';
+import { CheckBox } from '../../components/CheckBox';
+import { NewDropdownButton } from '../../components/DropdownButton';
+import { ALL_TOOL_PANELS, } from '../../AdaptableState/Common/Types';
+import SimpleButton from '../../components/SimpleButton';
+import { ButtonConfigure } from '../Components/Buttons/ButtonConfigure';
+import { renderWithAdaptableContext } from '../AdaptableContext';
+import { ToolPanelWrapper } from './ToolPanelWrapper';
+import { ToolPanelConfigView } from './ToolPanelPopup';
+import { ToolPanelModuleId } from '../../Utilities/Constants/ModuleConstants';
+import HelpBlock from '../../components/HelpBlock';
+import { Flex } from '../../components/Flex';
+import { getSettingsPanelOpenIcon } from '../../Utilities/Helpers/SettingsPanelHelper';
+const preventDefault = (e) => e.preventDefault();
+const AdaptableToolPanelComponent = (props) => {
+    const toolPanelsGlyph = _jsx(Icon, { name: 'align-justify' });
+    const moduleService = props.api.internalApi.getModuleService();
+    const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
+    const toolPanelOptions = adaptableOptions.toolPanelOptions;
+    const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
+    if (props.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel')) {
+        return _jsx(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3", children: "Not enough rights" });
+    }
+    const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
+    const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
+    if (!props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
+        availableModules.push('Dashboard');
+    }
+    if (props.api.pluginsApi.getipushpullPluginApi() &&
+        !props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
+        availableModules.push('IPushPull');
+    }
+    if (props.api.pluginsApi.getOpenFinPluginApi() &&
+        !props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
+        availableModules.push('OpenFin');
+    }
+    const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
+    const onStateChange = (toolPanel, visibilityMode) => {
+        if (visibilityMode === 'expanded') {
+            props.onExpandToolPanel(toolPanel);
+        }
+        else {
+            props.onCollapseToolPanel(toolPanel);
+        }
+    };
+    const isToolPanelModuleConfigurable = props.api.internalApi
+        .getModuleService()
+        .getModuleById(ToolPanelModuleId)
+        .isModuleEditable();
+    const visibleToolPanels = [];
+    const visibleToolPanelControls = (props.ToolPanels ?? []).map((toolPanelDefinition) => {
+        const visibilityMode = toolPanelDefinition.VisibilityMode ?? 'collapsed';
+        const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
+        if (customToolPanel) {
+            visibleToolPanels.push(customToolPanel.name);
+            return (_jsx(ToolPanelWrapper, { customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }, customToolPanel.name));
+        }
+        if (availableModuleToolPanels.some((module) => module === toolPanelDefinition.Name)) {
+            const moduleToolPanel = toolPanelDefinition.Name;
+            visibleToolPanels.push(moduleToolPanel);
+            return (_jsx(ToolPanelWrapper, { adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }, moduleToolPanel));
+        }
+    });
+    const renderToolPanelDropdowns = () => {
+        if (!toolPanelOptions.showToolPanelsDropdown) {
+            return;
+        }
+        let toolpanelItems = [
+            {
+                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 {
+                dataName: String(toolPanel),
+                closeOnClick: false,
+                onClick: () => {
+                    onSetToolPanelVisibility(toolPanel, !isVisible);
+                },
+                tooltip: label,
+                label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
+            };
+        };
+        props.api.toolPanelApi.getCustomToolPanels().forEach((customToolPanel) => {
+            const customToolPanelName = customToolPanel.name;
+            toolpanelItems.push(buildDropdownButtonItem(customToolPanelName, customToolPanelName, isItemVisible(customToolPanelName)));
+        });
+        availableModuleToolPanels.forEach((toolPanel) => {
+            let moduleName = moduleService.getModuleInfoByModule(toolPanel).FriendlyName;
+            toolpanelItems.push(buildDropdownButtonItem(toolPanel, moduleName, isItemVisible(toolPanel)));
+        });
+        toolpanelItems.sort((first, second) => {
+            if (first.label < second.label) {
+                return -1;
+            }
+            if (first.label > second.label) {
+                return 1;
+            }
+            return 0;
+        });
+        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 = [];
+        let moduleButtons = props.ModuleButtons;
+        const shouldAddSettingsPanel = settingsPanelOptions.alwaysShowInToolPanel &&
+            !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
+            moduleButtons = ['SettingsPanel', ...moduleButtons];
+        }
+        const settingsPanelOpenIcon = getSettingsPanelOpenIcon(settingsPanelOptions.icon, props.api.optionsApi.getUserInterfaceOptions().applicationIcon);
+        if (moduleButtons?.length) {
+            toolPanelButtons.push(moduleButtons.map((x) => {
+                let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
+                if (menuItem) {
+                    const isSettingsPanel = menuItem.category === 'SettingsPanel';
+                    return (_jsx(SimpleButton, { "data-name": menuItem.category, icon: isSettingsPanel ? settingsPanelOpenIcon : menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: isSettingsPanel ? settingsPanelOptions.title : menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL }, menuItem.label));
+                }
+            }));
+        }
+        return toolPanelButtons;
+    };
+    const renderCustomToolPanelButtons = () => {
+        return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
+            const toolPanelContext = {
+                ...props.api.internalApi.buildBaseContext(),
+                toolPanelState: props.api.toolPanelApi.getToolPanelState(),
+            };
+            const buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
+            return (_jsx(AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)}` }, buttonLabel || button.Uuid));
+        });
+    };
+    const onSetToolPanelVisibility = (name, checked) => {
+        if (checked) {
+            props.onShowToolPanel(name);
+        }
+        else {
+            props.onHideToolPanel(name);
+        }
+    };
+    const renderToolPanelConfigureButton = (initialTab) => {
+        const moduleParams = initialTab
+            ? { source: 'Other', config: { initialTab } }
+            : undefined;
+        return (_jsx(ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
+                props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
+            } }));
+    };
+    const toolPanelButtons = renderToolPanelButtons();
+    return (_jsxs(Flex, { className: "ab-ToolPanel twa:p-2 twa:w-full", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", children: [_jsxs(Flex, { className: "ab-ToolPanel__header twa:p-1 twa:w-full twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: [isToolPanelModuleConfigurable && renderToolPanelDropdowns(), toolPanelButtons, isToolPanelModuleConfigurable && renderToolPanelConfigureButton()] }), Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (_jsx(Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: renderCustomToolPanelButtons() })), visibleToolPanelControls] }));
+};
+function mapStateToProps(state) {
+    return {
+        ToolPanels: state.ToolPanel.ToolPanels,
+        ModuleButtons: state.ToolPanel.ModuleButtons,
+        MainMenuItems: state.Internal.SettingsPanelModuleEntries,
+        Columns: state.Internal.Columns,
+    };
+}
+function mapDispatchToProps(dispatch) {
+    return {
+        onClick: (action) => dispatch(action),
+        onSetToolPanelVisibility: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
+        onShowToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelShowToolPanel(toolPanel)),
+        onHideToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelHideToolPanel(toolPanel)),
+        onExpandToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelExpandToolPanel(toolPanel)),
+        onCollapseToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelCollapseToolPanel(toolPanel)),
+    };
+}
+export const ConnectedAdaptableToolPanel = connect(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+const toolPanelContainerStyle = {
+    width: '100%',
+    overflow: 'auto',
+};
+export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+    function getContainerId() {
+        return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return () => {
+            const content = renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return (_jsx("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle, children: content }));
+        };
+    }
+    return class AdaptableToolPanelAgGridComponent {
+        gui;
+        unmountReactRoot;
+        init(params) {
+            const api = adaptable.api;
+            this.gui = document.createElement('div');
+            this.gui.id = getContainerId();
+            this.gui.className = 'ag-adaptable-panel';
+            Object.keys(toolPanelContainerStyle).forEach((key) => {
+                this.gui.style[key] = toolPanelContainerStyle[key];
+            });
+            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+        }
+        getGui() {
+            if (!this.gui) {
+                this.init();
+            }
+            return this.gui;
+        }
+        refresh() {
+        }
+        destroy() {
+            this.unmountReactRoot?.();
+        }
+    };
+};

package/src/View/ToolPanel/CustomToolPanelContent.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CustomToolPanel } from '../../AdaptableOptions/ToolPanelOptions';
+export interface CustomToolPanelContentProps {
+    customToolPanel: CustomToolPanel;
+}
+export declare const CustomToolPanelContent: (props: CustomToolPanelContentProps) => React.JSX.Element;