@adaptabletools/adaptable-cjs 23.0.0-canary.6 → 23.0.0-canary.8

package/src/Utilities/Helpers/barChartCellText.js

@@ -0,0 +1,333 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountBarChartCellText = exports.formatBarChartCellTextLayoutSummary = exports.getBarChartCellTextSlotPresence = exports.resolveBarChartCellTextSlots = exports.joinBarChartCellTextLabels = exports.hasBarChartCellTextLabels = exports.buildBarChartCellTextLabels = exports.toggleBarChartCellTextToken = exports.patchBarChartCellTextPlacement = exports.setBarChartCellTextPlacement = exports.mergeBarChartCellTextProperties = exports.getActiveBarChartCellTextTokens = exports.hasBarChartCellTextConfigured = exports.resolveBarChartCellTextLayout = void 0;
+/** Default placement applied to a value whose Horizontal/Vertical were omitted. */
+const DEFAULT_PLACEMENT = {
+    Horizontal: 'Left',
+    Vertical: 'Below',
+};
+const HORIZONTAL_VALUES = ['Left', 'Center', 'Right'];
+const VERTICAL_VALUES = ['Above', 'Below', 'Merged'];
+const isHorizontal = (value) => typeof value === 'string' &&
+    HORIZONTAL_VALUES.includes(value);
+const isVertical = (value) => typeof value === 'string' && VERTICAL_VALUES.includes(value);
+/** Normalise a placement, applying defaults for missing axes. */
+const sanitizePlacement = (placement) => ({
+    Horizontal: isHorizontal(placement?.Horizontal) ? placement.Horizontal : DEFAULT_PLACEMENT.Horizontal,
+    Vertical: isVertical(placement?.Vertical) ? placement.Vertical : DEFAULT_PLACEMENT.Vertical,
+});
+/** Returns a layout with only the values that are actually present, defaults filled in. */
+const sanitizeCellTextLayout = (layout) => {
+    const result = {};
+    if (layout?.CellValue) {
+        result.CellValue = sanitizePlacement(layout.CellValue);
+    }
+    if (layout?.PercentValue) {
+        result.PercentValue = sanitizePlacement(layout.PercentValue);
+    }
+    return result;
+};
+const resolveBarChartCellTextLayout = (props) => sanitizeCellTextLayout(props?.CellTextLayout);
+exports.resolveBarChartCellTextLayout = resolveBarChartCellTextLayout;
+/** True when any value is configured for display. */
+const hasBarChartCellTextConfigured = (props) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(props);
+    return Boolean(layout.CellValue || layout.PercentValue);
+};
+exports.hasBarChartCellTextConfigured = hasBarChartCellTextConfigured;
+/** Set of value tokens that currently have a placement. */
+const getActiveBarChartCellTextTokens = (props) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(props);
+    const tokens = [];
+    if (layout.CellValue) {
+        tokens.push('CellValue');
+    }
+    if (layout.PercentValue) {
+        tokens.push('PercentageValue');
+    }
+    return tokens;
+};
+exports.getActiveBarChartCellTextTokens = getActiveBarChartCellTextTokens;
+const mergeBarChartCellTextProperties = (current, patch) => {
+    const merged = { ...current, ...patch };
+    if (merged.CellTextLayout) {
+        merged.CellTextLayout = sanitizeCellTextLayout(merged.CellTextLayout);
+        if (!merged.CellTextLayout.CellValue && !merged.CellTextLayout.PercentValue) {
+            delete merged.CellTextLayout;
+        }
+    }
+    if (!merged.CellTextLayout) {
+        return undefined;
+    }
+    return merged;
+};
+exports.mergeBarChartCellTextProperties = mergeBarChartCellTextProperties;
+/**
+ * Set or clear a value's placement. Passing `placement: undefined` removes the value.
+ */
+const setBarChartCellTextPlacement = (current, token, placement) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(current);
+    const next = { ...layout };
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    if (placement) {
+        next[key] = sanitizePlacement(placement);
+    }
+    else {
+        delete next[key];
+    }
+    return (0, exports.mergeBarChartCellTextProperties)(current, { CellTextLayout: next });
+};
+exports.setBarChartCellTextPlacement = setBarChartCellTextPlacement;
+/**
+ * Patch a single axis of a value's placement (creating the value with defaults if
+ * needed). Used by the wizard's placement pickers.
+ */
+const patchBarChartCellTextPlacement = (current, token, patch) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(current);
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    const existing = layout[key];
+    const nextPlacement = {
+        ...(existing ?? DEFAULT_PLACEMENT),
+        ...patch,
+    };
+    return (0, exports.setBarChartCellTextPlacement)(current, token, nextPlacement);
+};
+exports.patchBarChartCellTextPlacement = patchBarChartCellTextPlacement;
+/**
+ * Toggle whether a value is displayed. When turning on a previously-hidden
+ * value we use the default placement (Left / Below).
+ */
+const toggleBarChartCellTextToken = (current, token, show) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(current);
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    if (show && !layout[key]) {
+        return {
+            CellTextProperties: (0, exports.setBarChartCellTextPlacement)(current, token, DEFAULT_PLACEMENT),
+        };
+    }
+    if (!show && layout[key]) {
+        return {
+            CellTextProperties: (0, exports.setBarChartCellTextPlacement)(current, token, undefined),
+        };
+    }
+    return { CellTextProperties: current };
+};
+exports.toggleBarChartCellTextToken = toggleBarChartCellTextToken;
+const buildBarChartCellTextLabels = (props, cellValueLabel, percentageLabel) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(props);
+    const labels = {};
+    if (layout.CellValue && cellValueLabel != undefined) {
+        labels.cellValue = cellValueLabel;
+    }
+    if (layout.PercentValue && percentageLabel != undefined) {
+        labels.percentage = percentageLabel;
+    }
+    return labels;
+};
+exports.buildBarChartCellTextLabels = buildBarChartCellTextLabels;
+const hasBarChartCellTextLabels = (labels) => Boolean(labels.cellValue || labels.percentage);
+exports.hasBarChartCellTextLabels = hasBarChartCellTextLabels;
+/** Join active labels with a space, Cell Value first then Percent Value. */
+const joinBarChartCellTextLabels = (labels) => {
+    const parts = [];
+    if (labels.cellValue)
+        parts.push(labels.cellValue);
+    if (labels.percentage)
+        parts.push(labels.percentage);
+    return parts.join(' ');
+};
+exports.joinBarChartCellTextLabels = joinBarChartCellTextLabels;
+/**
+ * Resolve which placements are populated and what text goes in each cell of
+ * the 3 × 3 grid. Empty slots are omitted. Two values landing on the same
+ * (vertical, horizontal) slot are concatenated with a single space, Cell
+ * Value before Percent Value.
+ */
+const resolveBarChartCellTextSlots = (props, labels) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(props);
+    // Iteration order matters when both values share a slot: Cell Value first,
+    // then Percent Value (matches the legacy "joined" behaviour).
+    const candidates = [];
+    if (layout.CellValue && labels.cellValue) {
+        candidates.push({
+            placement: sanitizePlacement(layout.CellValue),
+            text: labels.cellValue,
+        });
+    }
+    if (layout.PercentValue && labels.percentage) {
+        candidates.push({
+            placement: sanitizePlacement(layout.PercentValue),
+            text: labels.percentage,
+        });
+    }
+    const slotMap = new Map();
+    for (const { placement, text } of candidates) {
+        const key = `${placement.Vertical}|${placement.Horizontal}`;
+        const existing = slotMap.get(key);
+        if (existing) {
+            existing.parts.push(text);
+            existing.text = existing.parts.join(' ');
+        }
+        else {
+            slotMap.set(key, {
+                vertical: placement.Vertical,
+                horizontal: placement.Horizontal,
+                parts: [text],
+                text,
+            });
+        }
+    }
+    return Array.from(slotMap.values());
+};
+exports.resolveBarChartCellTextSlots = resolveBarChartCellTextSlots;
+const getBarChartCellTextSlotPresence = (props) => {
+    const layout = (0, exports.resolveBarChartCellTextLayout)(props);
+    const verticals = new Set();
+    if (layout.CellValue)
+        verticals.add(sanitizePlacement(layout.CellValue).Vertical);
+    if (layout.PercentValue)
+        verticals.add(sanitizePlacement(layout.PercentValue).Vertical);
+    return {
+        hasAbove: verticals.has('Above'),
+        hasBelow: verticals.has('Below'),
+        hasMerged: verticals.has('Merged'),
+    };
+};
+exports.getBarChartCellTextSlotPresence = getBarChartCellTextSlotPresence;
+// ---------------------------------------------------------------------------
+// Summary formatting
+// ---------------------------------------------------------------------------
+const HORIZONTAL_LABEL = {
+    Left: 'Left',
+    Center: 'Center',
+    Right: 'Right',
+};
+const VERTICAL_LABEL = {
+    Above: 'Above',
+    Below: 'Below',
+    Merged: 'Merged',
+};
+const formatTokenLabel = (token) => token === 'CellValue' ? 'Cell Value' : 'Percent Value';
+const formatPlacementSummary = (placement) => {
+    const { Horizontal, Vertical } = sanitizePlacement(placement);
+    return `${VERTICAL_LABEL[Vertical]}-${HORIZONTAL_LABEL[Horizontal]}`;
+};
+const formatBarChartCellTextLayoutSummary = (layout) => {
+    const parts = [];
+    if (layout.CellValue) {
+        parts.push(`${formatTokenLabel('CellValue')}: ${formatPlacementSummary(layout.CellValue)}`);
+    }
+    if (layout.PercentValue) {
+        parts.push(`${formatTokenLabel('PercentageValue')}: ${formatPlacementSummary(layout.PercentValue)}`);
+    }
+    return parts.length ? parts.join('; ') : undefined;
+};
+exports.formatBarChartCellTextLayoutSummary = formatBarChartCellTextLayoutSummary;
+// ---------------------------------------------------------------------------
+// DOM mount
+// ---------------------------------------------------------------------------
+const HORIZONTAL_FLEX_JUSTIFY = {
+    Left: 'flex-start',
+    Center: 'center',
+    Right: 'flex-end',
+};
+const HORIZONTAL_TEXT_ALIGN = {
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+};
+const createCellTextRow = (slots, textClassName, compact) => {
+    const row = document.createElement('div');
+    row.className = textClassName;
+    row.style.display = 'flex';
+    row.style.flexDirection = 'row';
+    row.style.alignItems = 'center';
+    row.style.width = '100%';
+    // When `Above` AND `Below` are both populated, two default-size text rows
+    // would squeeze the bar to 0 on a standard ~28-40px cell, so the caller
+    // asks for a compact band (smaller font + tighter line-height).
+    // Otherwise we render at the inherited cell font for legibility.
+    if (compact) {
+        row.style.fontSize = '0.75em';
+        row.style.lineHeight = '1';
+    }
+    else {
+        row.style.lineHeight = '1.2';
+    }
+    row.style.flex = '0 0 auto';
+    row.style.gap = '4px';
+    // Render fixed Left / Center / Right cells so spacing is stable even when
+    // only one or two slots are present.
+    for (const horizontal of HORIZONTAL_VALUES) {
+        const slot = slots.find((s) => s.horizontal === horizontal);
+        const cell = document.createElement('span');
+        cell.style.flex = '1';
+        cell.style.minWidth = '0';
+        cell.style.textAlign = HORIZONTAL_TEXT_ALIGN[horizontal];
+        cell.style.display = 'flex';
+        cell.style.justifyContent = HORIZONTAL_FLEX_JUSTIFY[horizontal];
+        cell.style.alignItems = 'center';
+        if (slot) {
+            cell.textContent = slot.text;
+        }
+        row.append(cell);
+    }
+    // Suppress the dummy row in the rare case where every slot for this band is
+    // empty (e.g. the only label is empty string). `String(...)` because text
+    // may arrive as a number when `params.formatValue` is undefined for a
+    // numeric column — `(11).length` is `undefined`, which would otherwise
+    // wrongly trip the empty-row branch.
+    if (!slots.some((s) => String(s.text ?? '').length)) {
+        row.style.display = 'none';
+    }
+    return row;
+};
+const mountBarChartCellText = (args) => {
+    const { cellTextProperties, labels, wrapperEl, textClassName } = args;
+    if (!(0, exports.hasBarChartCellTextConfigured)(cellTextProperties) || !(0, exports.hasBarChartCellTextLabels)(labels)) {
+        return;
+    }
+    const slots = (0, exports.resolveBarChartCellTextSlots)(cellTextProperties, labels);
+    if (!slots.length) {
+        return;
+    }
+    const mergedOverlayEl = args.mergedOverlayEl ?? wrapperEl;
+    const mergedPointerEventsNone = args.mergedPointerEventsNone ?? mergedOverlayEl === wrapperEl;
+    const slotsByVertical = {
+        Above: slots.filter((s) => s.vertical === 'Above'),
+        Below: slots.filter((s) => s.vertical === 'Below'),
+        Merged: slots.filter((s) => s.vertical === 'Merged'),
+    };
+    // Compact when Cell Value and Percent Value have *different* verticals
+    // (i.e. the two tokens claim two separate bands of vertical space). When
+    // they share a vertical band — or when only one token is configured —
+    // we have room for the full-size font.
+    const layout = (0, exports.resolveBarChartCellTextLayout)(cellTextProperties);
+    const compact = Boolean(layout.CellValue &&
+        layout.PercentValue &&
+        sanitizePlacement(layout.CellValue).Vertical !==
+            sanitizePlacement(layout.PercentValue).Vertical);
+    if (slotsByVertical.Above.length) {
+        const row = createCellTextRow(slotsByVertical.Above, textClassName, compact);
+        wrapperEl.prepend(row);
+    }
+    if (slotsByVertical.Below.length) {
+        const row = createCellTextRow(slotsByVertical.Below, textClassName, compact);
+        wrapperEl.append(row);
+    }
+    if (slotsByVertical.Merged.length) {
+        const row = createCellTextRow(slotsByVertical.Merged, textClassName, compact);
+        row.style.position = 'absolute';
+        row.style.top = '50%';
+        row.style.transform = 'translateY(-50%)';
+        row.style.left = '0';
+        row.style.right = '0';
+        row.style.paddingLeft = '5px';
+        row.style.paddingRight = '5px';
+        if (mergedPointerEventsNone) {
+            row.style.pointerEvents = 'none';
+        }
+        mergedOverlayEl.append(row);
+    }
+};
+exports.mountBarChartCellText = mountBarChartCellText;

package/src/Utilities/Helpers/percentBarPreviewHelper.d.ts

@@ -1,4 +1,5 @@
-import { PercentBarStyle, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { PercentBarStyle } from '../../AdaptableState/StyledColumns/PercentBarStyle';
 export declare const hasPercentBarRangesConfigured: (pb: PercentBarStyle | undefined) => boolean;
 /** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
 export declare const getPercentBarPreviewScale: (pb: PercentBarStyle) => {

package/src/Utilities/Helpers/percentBarPreviewHelper.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const StyleHelper_1 = require("./StyleHelper");
 const clamp_1 = tslib_1.__importDefault(require("../utils/clamp"));
 const StyledColumnGradientHelper_1 = require("./StyledColumnGradientHelper");
+const barChartCellText_1 = require("./barChartCellText");
 const evenlySpacedValues = (min, max, count) => {
     if (count <= 1) {
         return [min];
@@ -132,14 +133,8 @@ const getPercentBarPreviewGeometry = (numericValue, pb, min, max) => {
 };
 exports.getPercentBarPreviewGeometry = getPercentBarPreviewGeometry;
 const formatPercentBarPreviewCellText = (numericValue, percentageValue, pb) => {
-    const parts = [];
-    if (pb.CellText?.includes('CellValue')) {
-        parts.push(Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(1));
-    }
-    if (pb.CellText?.includes('PercentageValue')) {
-        parts.push(`${percentageValue.toFixed(0)}%`);
-    }
-    return parts.join(' ');
+    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(pb.CellTextProperties, Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    return (0, barChartCellText_1.joinBarChartCellTextLabels)(labels);
 };
 exports.formatPercentBarPreviewCellText = formatPercentBarPreviewCellText;
 const getPercentBarPreviewTrackColor = (pb) => {

package/src/Utilities/Helpers/resolveSettingsPanelNavigation.d.ts

@@ -0,0 +1,3 @@
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { SettingsPanelNavigation, SettingsPanelOptions } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const resolveSettingsPanelNavigation: (api: AdaptableApi, settingsPanelOptions: SettingsPanelOptions) => SettingsPanelNavigation;

package/src/Utilities/Helpers/resolveSettingsPanelNavigation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSettingsPanelNavigation = void 0;
+const DefaultSettingsPanel_1 = require("../Defaults/DefaultSettingsPanel");
+const cloneSettingsPanelNavigation = (navigation) => ({
+    groups: navigation.groups.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    })),
+});
+const resolveSettingsPanelNavigation = (api, settingsPanelOptions) => {
+    const defaultNavigation = (0, DefaultSettingsPanel_1.buildDefaultSettingsPanelNavigation)(settingsPanelOptions.customSettingsPanels?.map((panel) => panel.name) ?? []);
+    if (!settingsPanelOptions.navigation) {
+        return defaultNavigation;
+    }
+    const context = api.internalApi.buildBaseContext();
+    return settingsPanelOptions.navigation(context, cloneSettingsPanelNavigation(defaultNavigation));
+};
+exports.resolveSettingsPanelNavigation = resolveSettingsPanelNavigation;

package/src/Utilities/getScopeViewItems.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScopeViewItems = void 0;
 const tslib_1 = require("tslib");
 const StringExtensions_1 = tslib_1.__importDefault(require("./Extensions/StringExtensions"));
+const columnScopeTagHelpers_1 = require("../components/Tag/columnScopeTagHelpers");
 const getScopeViewItems = (scope, api) => {
     let values = [];
     if ('ColumnIds' in scope && Array.isArray(scope.ColumnIds)) {
@@ -24,6 +25,7 @@ const getScopeViewItems = (scope, api) => {
         label: 'Columns',
         name: 'Target',
         values,
+        tagVariant: (0, columnScopeTagHelpers_1.getScopeViewItemsTagVariant)(scope),
     };
 };
 exports.getScopeViewItems = getScopeViewItems;

package/src/Utilities/wizardSelection.d.ts

@@ -0,0 +1,10 @@
+import type { SimpleButtonProps } from '../components/SimpleButton';
+/** Selected wizard option — Tailwind overrides SimpleButton outlined defaults. */
+export declare const WIZARD_SELECTION_ACTIVE_CLASSES: string;
+/** Unselected wizard option — muted so the active choice reads immediately. */
+export declare const WIZARD_SELECTION_INACTIVE_CLASSES: string;
+export type CollapsibleWizardCardSurface = 'popup' | 'panel';
+export declare const getCollapsibleWizardCardCollapsedClasses: (surface?: CollapsibleWizardCardSurface) => string;
+export declare const getCollapsibleWizardCardExpandedClasses: (surface?: CollapsibleWizardCardSurface) => string;
+export declare const wizardSelectionButtonClassName: (selected: boolean, className?: string) => string;
+export declare const wizardSelectionSimpleButtonProps: (selected: boolean, className?: string) => Pick<SimpleButtonProps, "variant" | "tone" | "className">;

package/src/Utilities/wizardSelection.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wizardSelectionSimpleButtonProps = exports.wizardSelectionButtonClassName = exports.getCollapsibleWizardCardExpandedClasses = exports.getCollapsibleWizardCardCollapsedClasses = exports.WIZARD_SELECTION_INACTIVE_CLASSES = exports.WIZARD_SELECTION_ACTIVE_CLASSES = void 0;
+const utils_1 = require("../lib/utils");
+/** Selected wizard option — Tailwind overrides SimpleButton outlined defaults. */
+exports.WIZARD_SELECTION_ACTIVE_CLASSES = (0, utils_1.cn)('ab-WizardSelection--active', 'twa:!border-[var(--ab-cmp-wizard-selection__border)]', 'twa:!bg-[var(--ab-cmp-wizard-selection__background)]', 'twa:!text-accent', 'twa:font-medium');
+/** Unselected wizard option — muted so the active choice reads immediately. */
+exports.WIZARD_SELECTION_INACTIVE_CLASSES = (0, utils_1.cn)('twa:!border-[color-mix(in_srgb,var(--ab-color-primarydark)_40%,transparent)]', 'twa:!text-[color-mix(in_srgb,var(--ab-color-foreground)_55%,transparent)]');
+const getCollapsibleWizardCardCollapsedClasses = (surface = 'popup') => (0, utils_1.cn)(surface === 'panel'
+    ? 'twa:border-[var(--ab-cmp-collapsible-wizard-card__collapsed-border)] twa:bg-card'
+    : 'twa:border-[var(--ab-cmp-collapsible-wizard-card__collapsed-border-popup)]');
+exports.getCollapsibleWizardCardCollapsedClasses = getCollapsibleWizardCardCollapsedClasses;
+const getCollapsibleWizardCardExpandedClasses = (surface = 'popup') => (0, utils_1.cn)('ab-CollapsibleWizardCard--expanded', 'twa:border-[var(--ab-cmp-collapsible-wizard-card__expanded-border)]', surface === 'panel' && 'twa:bg-card', 'twa:p-0');
+exports.getCollapsibleWizardCardExpandedClasses = getCollapsibleWizardCardExpandedClasses;
+const wizardSelectionButtonClassName = (selected, className) => (0, utils_1.cn)('ab-WizardSelection', selected ? exports.WIZARD_SELECTION_ACTIVE_CLASSES : exports.WIZARD_SELECTION_INACTIVE_CLASSES, className);
+exports.wizardSelectionButtonClassName = wizardSelectionButtonClassName;
+const wizardSelectionSimpleButtonProps = (selected, className) => ({
+    variant: 'outlined',
+    tone: 'none',
+    className: (0, exports.wizardSelectionButtonClassName)(selected, className),
+});
+exports.wizardSelectionSimpleButtonProps = wizardSelectionSimpleButtonProps;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
@@ -49,7 +49,7 @@ const OptionInput = (props) => {
             label: StringExtensions_1.default.Humanize(str),
             onClick: () => props.onChange({ ...option, value: str }),
         }));
-        input = ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { ...inputProps, columns: ['label'], items: options, children: StringExtensions_1.default.Humanize(value) }));
+        input = ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { className: "twa:min-w-[200px] twa:mr-2", items: options, children: StringExtensions_1.default.Humanize(value) }));
     }
     else {
         switch (option.kind) {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -4,7 +4,7 @@ exports.UIOptionsSidebarForm = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../../components/DropdownButton");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
@@ -77,7 +77,7 @@ const UIOptionsSidebarForm = (props) => {
         };
         props.onChange(newGridOptions);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Tool Panels" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:m-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: [
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Tool Panels" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:m-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { items: [
                                     { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
                                     { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
                                 ], children: sidebarPosition === 'left' ? 'Left' : 'Right' }) }) })] })] }));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -8,8 +8,8 @@ const ModuleManager_1 = require("../../../../components/DragAndDropContext/Modul
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const ButtonNew_1 = require("../../../Components/Buttons/ButtonNew");
+const DropdownButton_1 = require("../../../../components/DropdownButton");
 const FormBox_1 = require("../Components/FormBox");
 const Flex_1 = require("../../../../components/Flex");
 const UIOptionsStatusbarForm = (props) => {
@@ -95,7 +95,7 @@ const UIOptionsStatusbarForm = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Status Bar" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(FormBox_1.NocodeWizardFormBox, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "b", children: "Create Adaptable Statusbar Panel" }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Panel Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Align", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: alignOptions, children: alignOptions.find((option) => option.value === adaptablePanelAlign)?.label }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised", children: "Add" }), !isAdaptablePanelTitleAvailable && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2 twa:text-error", children: "Adaptable panel name must be unique." }))] })] })] }), (0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { permittedActions: {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Status Bar" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(FormBox_1.NocodeWizardFormBox, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "b", children: "Create Adaptable Statusbar Panel" }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Panel Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Align", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { items: alignOptions, children: alignOptions.find((option) => option.value === adaptablePanelAlign)?.label }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "", children: [(0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, children: "Add" }), !isAdaptablePanelTitleAvailable && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2 twa:text-destructive", children: "Adaptable panel name must be unique." }))] })] })] }), (0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { permittedActions: {
                             createTab: false,
                             dragAndDropTab: false,
                             deleteTab: false,

package/src/View/Alert/AlertViewPanel.js

@@ -4,6 +4,7 @@ exports.AlertViewPanelControl = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
@@ -11,7 +12,6 @@ const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
 const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
 const Flex_1 = require("../../components/Flex");
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -35,7 +35,7 @@ class AlertViewPanelComponent extends React.Component {
         const alertsPanel = (0, jsx_runtime_1.jsx)(ActiveAlertsPanel_1.ActiveAlertsPanel, {});
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "stretch", className: (0, clsx_1.default)(`ab-${elementType}__Alert__wrap twa:gap-1`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "stretch", className: (0, utils_1.cn)(`ab-${elementType}__Alert__wrap twa:gap-1`, {
                 'twa:min-w-[140px] twa:w-[140px]': isToolbar,
                 [`twa:flex-1`]: !isToolbar,
             }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `ab-${elementType}__Alert__text twa:flex-1 twa:rounded-standard twa:p-2 text-2 twa:items-center twa:justify-center twa:min-h-input`, style: { color: buttonTextColor, backgroundColor: buttonBackground }, children: collapsedText }, `${buttonTextColor}_${buttonBackground}_${collapsedText}`), this.props.AdaptableAlerts.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: 'twa:gap-1', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border", children: (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear All Alerts', variant: 'outlined', className: `ab-${elementType}__Alert__clear`, onClick: () => this.props.onDeleteAllAlert(this.state.Alerts), tooltip: "Clear All Alerts", showText: this.props.viewType === 'ToolPanel', children: 'Clear Alerts' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })] }))] }));

package/src/View/Alert/Utilities/getAlertButtonStyle.js

@@ -10,10 +10,13 @@ const getAlertButtonStyle = (alerts) => {
     const buttonTextColor = UIHelper_1.default.getButtonTextColourForArrayandMessageType(alerts, messageType);
     let cssClasses = '';
     if (alerts?.length) {
-        const cssMessageType = UIHelper_1.default.getCSSColorByMessageType(messageType);
-        cssClasses = cssMessageType
-            ? `twa:bg-${cssMessageType} twa:text-text-on-${cssMessageType}`
-            : '';
+        cssClasses =
+            {
+                Info: `twa:bg-info twa:text-info-foreground`,
+                Success: `twa:bg-success twa:text-success-foreground`,
+                Warning: `twa:bg-warning twa:text-warning-foreground`,
+                Error: `twa:bg-destructive twa:text-destructive-foreground`,
+            }[messageType] || '';
     }
     return {
         color: buttonTextColor,

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => React.JSX.Element;
 export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => React.JSX.Element;
 type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = exports.renderAlertBehaviourWizardSummary = void 0;
+exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
@@ -43,11 +43,6 @@ const HighlightStyle = (props) => {
                             props.onChange(style);
                         } }) }) }))] }));
 };
-const renderAlertBehaviourWizardSummary = (alertDefinition) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (0, exports.renderAlertBehaviourSummary)(alertDefinition, api);
-};
-exports.renderAlertBehaviourWizardSummary = renderAlertBehaviourWizardSummary;
 const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     const { AlertProperties = {} } = alert;
     const ruleProperties = (0, ScheduledAlertHelper_1.isRuleBasedAlertDefinition)(alert)