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

package/src/View/Layout/Wizard/sections/columnLayoutHelpers.js

@@ -0,0 +1,201 @@
+export const COLUMN_PINNING_OPTIONS = [
+    { value: 'left', label: 'Left' },
+    { value: 'None', label: 'None' },
+    { value: 'right', label: 'Right' },
+];
+export const COLUMN_SORT_OPTIONS = [
+    { value: 'Asc', label: 'Asc' },
+    { value: 'Desc', label: 'Desc' },
+    { value: 'None', label: 'None' },
+];
+export function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
+export function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return false;
+    }
+    if (sizing.Flex != null) {
+        return true;
+    }
+    if (sizing.MinWidth != null || sizing.MaxWidth != null) {
+        return true;
+    }
+    if (sizing.Width != null) {
+        if (resolveDefaultWidth) {
+            return sizing.Width !== resolveDefaultWidth(columnId);
+        }
+        return true;
+    }
+    return false;
+}
+export function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+export function formatColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    else if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.join(', ');
+}
+/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
+export function getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return {
+            width: undefined,
+            flex: undefined,
+            minWidth: undefined,
+            maxWidth: undefined,
+        };
+    }
+    const width = sizing.Width != null &&
+        (!resolveDefaultWidth || sizing.Width !== resolveDefaultWidth(columnId))
+        ? sizing.Width
+        : undefined;
+    return {
+        width,
+        flex: sizing.Flex ?? undefined,
+        minWidth: sizing.MinWidth ?? undefined,
+        maxWidth: sizing.MaxWidth ?? undefined,
+    };
+}
+export function formatColumnInspectorPinning(layout, columnId) {
+    const pin = layout.ColumnPinning?.[columnId];
+    if (pin === 'left') {
+        return 'Left';
+    }
+    if (pin === 'right') {
+        return 'Right';
+    }
+    return 'None';
+}
+export function formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return 'Default';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.length ? parts.join(', ') : 'Default';
+}
+export function formatColumnInspectorSorting(layout, columnId) {
+    return getColumnSortSelection(layout, columnId);
+}
+export function getColumnSortSelection(layout, columnId) {
+    const sort = (layout.ColumnSorts ?? []).find((entry) => entry.ColumnId === columnId);
+    return sort?.SortOrder ?? 'None';
+}
+export function applyColumnPinChange(layout, columnId, pinning) {
+    const ColumnPinning = { ...layout.ColumnPinning };
+    if (pinning) {
+        ColumnPinning[columnId] = pinning;
+    }
+    else {
+        delete ColumnPinning[columnId];
+    }
+    return {
+        ...layout,
+        ColumnPinning,
+    };
+}
+export function applyColumnSortChange(layout, columnId, sortOrder) {
+    const existing = layout.ColumnSorts ?? [];
+    if (sortOrder === 'None') {
+        return {
+            ...layout,
+            ColumnSorts: existing.filter((entry) => entry.ColumnId !== columnId),
+        };
+    }
+    const current = existing.find((entry) => entry.ColumnId === columnId);
+    if (current) {
+        return {
+            ...layout,
+            ColumnSorts: existing.map((entry) => entry.ColumnId === columnId ? { ...entry, SortOrder: sortOrder } : entry),
+        };
+    }
+    return {
+        ...layout,
+        ColumnSorts: [...existing, { ColumnId: columnId, SortOrder: sortOrder }],
+    };
+}
+export function applyColumnSizingFieldChange(layout, columnId, field, value, resolveDefaultWidth) {
+    const ColumnSizing = { ...layout.ColumnSizing };
+    const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+    const next = { ...colSizingForCol };
+    switch (field) {
+        case 'width':
+            if (value == null || value === resolveDefaultWidth(columnId)) {
+                delete next.Width;
+            }
+            else {
+                delete next.Flex;
+                next.Width = value;
+            }
+            break;
+        case 'flex':
+            if (value == null) {
+                delete next.Flex;
+            }
+            else {
+                delete next.Width;
+                next.Flex = value;
+            }
+            break;
+        case 'minWidth':
+            if (value == null) {
+                delete next.MinWidth;
+            }
+            else {
+                next.MinWidth = value;
+            }
+            break;
+        case 'maxWidth':
+            if (value == null) {
+                delete next.MaxWidth;
+            }
+            else {
+                next.MaxWidth = value;
+            }
+            break;
+    }
+    if (hasExplicitLayoutSizing(columnId, next, resolveDefaultWidth)) {
+        ColumnSizing[columnId] = next;
+    }
+    else {
+        delete ColumnSizing[columnId];
+    }
+    return {
+        ...layout,
+        ColumnSizing,
+    };
+}

package/src/View/Layout/Wizard/sections/layoutWizardAccordionHelpers.d.ts

@@ -0,0 +1,8 @@
+import { Layout, PivotLayout, TableLayout } from '../../../../types';
+export declare function getLayoutWizardInitialExpandedCardId(layoutWizardMode: 'create' | 'edit' | undefined, firstCardId: string, isSectionConfigured: boolean): string | null;
+export declare function isColumnsSectionConfigured(layout: TableLayout): boolean;
+export declare function isRowGroupingSectionConfigured(layout: Layout): boolean;
+export declare function isPivotRowGroupingSectionConfigured(layout: PivotLayout): boolean;
+export declare function isTableAggregationsSectionConfigured(layout: TableLayout): boolean;
+export declare function isPivotAggregationsSectionConfigured(layout: PivotLayout): boolean;
+export declare function isPivotColumnsSectionConfigured(layout: PivotLayout): boolean;

package/src/View/Layout/Wizard/sections/layoutWizardAccordionHelpers.js

@@ -0,0 +1,63 @@
+export function getLayoutWizardInitialExpandedCardId(layoutWizardMode, firstCardId, isSectionConfigured) {
+    if (layoutWizardMode !== 'create' || isSectionConfigured) {
+        return null;
+    }
+    return firstCardId;
+}
+export function isColumnsSectionConfigured(layout) {
+    if ((layout.TableColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnPinning && Object.keys(layout.ColumnPinning).length > 0) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnSizing && Object.keys(layout.ColumnSizing).length > 0) {
+        return true;
+    }
+    return false;
+}
+export function isRowGroupingSectionConfigured(layout) {
+    return (layout.RowGroupedColumns?.length ?? 0) > 0;
+}
+export function isPivotRowGroupingSectionConfigured(layout) {
+    return (layout.PivotGroupedColumns?.length ?? 0) > 0;
+}
+export function isTableAggregationsSectionConfigured(layout) {
+    if ((layout.TableAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    return false;
+}
+export function isPivotAggregationsSectionConfigured(layout) {
+    if ((layout.PivotAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    if (layout.PivotGrandTotal != null && layout.PivotGrandTotal !== false) {
+        return true;
+    }
+    if (layout.PivotColumnTotal != null && layout.PivotColumnTotal !== false) {
+        return true;
+    }
+    return false;
+}
+export function isPivotColumnsSectionConfigured(layout) {
+    if ((layout.PivotColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.PivotResultColumnsOrder) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    return false;
+}

package/src/View/Layout/Wizard/sections/layoutWizardColumns.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableColumn } from '../../../../AdaptableState/Common/AdaptableColumn';
+import type { IAdaptable } from '../../../../AdaptableInterfaces/IAdaptable';
+import type { Layout } from '../../../../../types';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = "twa:!py-1 twa:!px-1.5";
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = "twa:gap-4";
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = "twa:w-[12rem] twa:shrink-0 twa:min-w-0";
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export declare function getLayoutWizardOrderedColumns(adaptable: IAdaptable, layout: Layout): AdaptableColumn[];

package/src/View/Layout/Wizard/sections/layoutWizardColumns.js

@@ -0,0 +1,52 @@
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
+import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../../Components/wizardColumnListStyles';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = WIZARD_COLUMN_LIST_OPTION_CLASS;
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = WIZARD_COLUMN_LIST_HEADER_CLASS;
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = WIZARD_COLUMN_LIST_SEARCH_CLASS;
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export function getLayoutWizardOrderedColumns(adaptable, layout) {
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
+    const allColumns = adaptable.api.columnApi
+        .getUIAvailableColumns()
+        .filter((col) => !col.isGeneratedRowGroupColumn)
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        .filter((col) => !col.isGeneratedSelectionColumn);
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift(generateAutoRowGroupSingleColumn());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = generateAutoRowGroupColumnForColumn(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift(generateAutoTreeSingleColumn());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift(generateSelectionColumn());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as r from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid red",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=t=>{const e=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of e)if(t.style[r]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=r.useRef(null);return r.useEffect(()=>{const t=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(t)},[]),e(n,{style:i,ref:a,children:[t(o,{style:{marginRight:10}}),t("div",{children:l.children})]})};

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.d.ts

@@ -5,5 +5,5 @@ export interface NamedQueryExpressionWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }
 export declare const isValidNamedQueryExpression: (data: NamedQuery, api: AdaptableApi) => string | true;
-export declare const renderNamedQueryExpressionSummary: (data: NamedQuery) => React.JSX.Element;
+export declare const renderNamedQueryExpressionSummary: (data: NamedQuery, api: AdaptableApi) => React.JSX.Element;
 export declare const NamedQueryExpressionWizardSection: (props: NamedQueryExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -15,8 +15,7 @@ export const isValidNamedQueryExpression = (data, api) => {
     }
     return valid;
 };
-export const renderNamedQueryExpressionSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
+export const renderNamedQueryExpressionSummary = (data, api) => {
     return (_jsxs(Box, { className: "twa:text-2", children: ["Expression: ", _jsx(Tag, { children: api.internalApi.getAdaptableQueryExpressionText(data) })] }));
 };
 export const NamedQueryExpressionWizardSection = (props) => {

package/src/View/Note/NoteEditor.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const { api } = useAdaptable();
     const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
@@ -25,7 +25,7 @@ export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }
     if (note === undefined || note === null) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: clsx('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
+    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: cn('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
                     'twa:pr-[30px]': showPopupCloseButton,
                     'twa:pr-0': !showPopupCloseButton,
                 }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -10,10 +10,9 @@ import { Tabs } from '../../components/Tabs';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
-import HelpBlock from '../../components/HelpBlock';
 import { Card } from '../../components/Card';
 import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchStyleHelper';
-const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(HelpBlock, { className: "twa:text-2", children: helpText }), _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: headerText, api: api, Style: style, UpdateStyle: updateStyle })] }));
+const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -25,7 +24,7 @@ const QuickSearchPopupComponent = (props) => {
             checked;
     };
     const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
-    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [_jsxs(Card, { children: [_jsx(Card.Title, { children: "Search Text" }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Behaviour" }), _jsxs(Card.Body, { className: "twa:p-1", gap: 2, children: [_jsxs(HelpBlock, { className: "twa:text-2 twa:w-fit", children: ["Filter Grid when searching to only show rows with matching cells; ", _jsx("b", { children: "use with care" }), " as can cause performance issues"] }), _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" })] })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Matching Styles" }), _jsx(Card.Body, { className: "twa:p-0", children: isServerSideRowModel ? (_jsx(Box, { className: "twa:p-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })] })) })] })] }) }));
+    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Search Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), _jsx(Card.Body, { className: "twa:p-1", gap: 2, children: _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching Styles" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), _jsx(Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? (_jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
 };
 function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -155,5 +155,5 @@ export const ScheduleBuilderWizard = (props) => {
         commit({ customCron: value, preset: 'custom' });
     };
     const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
-    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), _jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
+    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (isOneOff || preset !== 'custom') && (_jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) }))] }) })] }) }));
 };

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -75,5 +75,5 @@ export const ShortcutSettingsWizard = (props) => {
             result,
         };
     }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
-    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-error", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
+    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };

package/src/View/SmartEdit/SmartEditPopup.js

@@ -11,7 +11,7 @@ import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import Input from '../../components/Input';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
 import { Flex } from '../../components/Flex';
 const preventDefault = (e) => e.preventDefault();
@@ -54,7 +54,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(DropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
                                 ? this.props.SmartEditOperation.name
                                 : this.props.SmartEditOperation }), _jsx(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }), _jsx(SimpleButton, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                                 (this.props.PreviewInfo &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -13,8 +13,8 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
 import { SingleSelect } from '../../components/NewSelect';
+import { cn } from '../../lib/utils';
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -68,7 +68,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (_jsxs(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { flexDirection: "row", className: cn(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
                 'twa:flex-nowrap': this.props.viewType === 'Toolbar',
                 'twa:flex-wrap': this.props.viewType !== 'Toolbar',
             }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/StateManagement/StateManagementPopup.js

@@ -7,5 +7,5 @@ import { ExportDropdown } from './components/ExportDropdown';
 import Panel from '../../components/Panel';
 export const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { style: { color: 'var(--ab-color-warn)' }, children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
+    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { className: "twa:text-warn twa:mb-2", children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
 };

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../../types';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
-export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+import { type NewDropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<NewDropdownButtonProps, 'items'> {
     api: AdaptableApi;
     type: 'adaptableState' | 'initialState';
 }

package/src/View/StateManagement/components/ExportDropdown.js

@@ -1,35 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import { handleExportState } from '../handleExportState';
 export const ExportDropdown = (props) => {
+    const { api, type, ...rest } = props;
     const handleChange = (destination) => {
-        switch (props.type) {
-            case 'adaptableState':
-                const adaptableState = props.api.stateApi.getPersistentState();
-                handleExportState(destination, 'adaptableState', adaptableState, props.api);
+        switch (type) {
+            case 'adaptableState': {
+                const adaptableState = api.stateApi.getPersistentState();
+                handleExportState(destination, 'adaptableState', adaptableState, api);
                 break;
-            case 'initialState':
-                const initialState = props.api.stateApi.getInitialState();
-                handleExportState(destination, 'initialState', initialState, props.api);
+            }
+            case 'initialState': {
+                const initialState = api.stateApi.getInitialState();
+                handleExportState(destination, 'initialState', initialState, api);
                 break;
+            }
         }
     };
     const destinationOptions = [
         {
-            value: 'Clipboard',
             label: 'Clipboard',
             onClick: () => handleChange('Clipboard'),
         },
         {
-            value: 'Console',
             label: 'Console',
             onClick: () => handleChange('Console'),
         },
         {
-            value: 'JSON',
             label: 'JSON',
             onClick: () => handleChange('JSON'),
         },
     ];
-    return (_jsx(DropdownButton, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return (_jsx(NewDropdownButton, { variant: "outlined", className: "ab-StateManagement__Export-Dropdown", ...rest, items: destinationOptions }));
 };

package/src/View/StatusBar/StatusBarPanel.js

@@ -4,7 +4,7 @@ import SimpleButton from '../../components/SimpleButton';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { Flex, Box } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -36,5 +36,5 @@ export const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: clsx(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
+    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: cn(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
 };