@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ROW_GROUP_BEHAVIOR_DESCRIPTIONS = exports.ROW_GROUP_BEHAVIOR_LABELS = exports.ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS = exports.ROW_GROUP_DISPLAY_TYPE_LABELS = void 0;
+exports.getRowGroupDisplayTypeLabel = getRowGroupDisplayTypeLabel;
+exports.getRowGroupDisplayTypeDescription = getRowGroupDisplayTypeDescription;
+exports.getRowGroupBehaviorLabel = getRowGroupBehaviorLabel;
+exports.getRowGroupBehaviorDescription = getRowGroupBehaviorDescription;
+exports.getTableRowGroupSummaryValues = getTableRowGroupSummaryValues;
+exports.getLayoutTableRowGroupViewItems = getLayoutTableRowGroupViewItems;
+exports.getPivotRowGroupSummaryValues = getPivotRowGroupSummaryValues;
+exports.getLayoutPivotRowGroupViewItems = getLayoutPivotRowGroupViewItems;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rowGroupSummaryTags_1 = require("../../../View/Wizard/rowGroupSummaryTags");
+exports.ROW_GROUP_DISPLAY_TYPE_LABELS = {
+    single: 'Single Column',
+    multi: 'Multiple Columns',
+    groupRows: 'Full Width Group Rows',
+};
+exports.ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS = {
+    single: 'All Row Grouped Columns display in one hierarchical Column',
+    multi: 'Each Row Grouped Column displays in its own, separate, Column',
+    groupRows: 'Row groups display as full-width rows (no group column and no aggregations)',
+};
+exports.ROW_GROUP_BEHAVIOR_LABELS = {
+    'always-collapsed': 'All Collapsed',
+    'always-expanded': 'All Expanded',
+    expanded: 'Mostly Expanded',
+    collapsed: 'Mostly Collapsed',
+};
+exports.ROW_GROUP_BEHAVIOR_DESCRIPTIONS = {
+    'always-collapsed': 'All Grouped Rows are always collapsed',
+    'always-expanded': 'All Grouped Rows are always expanded',
+    expanded: 'All Grouped Rows expanded, other than those collapsed when Layout last displayed',
+    collapsed: 'All Grouped Rows collapsed, other than those expanded when Layout last displayed',
+};
+function getRowGroupDisplayTypeLabel(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return exports.ROW_GROUP_DISPLAY_TYPE_LABELS[displayType];
+}
+function getRowGroupDisplayTypeDescription(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return exports.ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS[displayType];
+}
+function getRowGroupBehaviorLabel(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return exports.ROW_GROUP_BEHAVIOR_LABELS[behavior];
+}
+function getRowGroupBehaviorDescription(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return exports.ROW_GROUP_BEHAVIOR_DESCRIPTIONS[behavior];
+}
+function getTableRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.RowGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.RowGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Display Type: ${getRowGroupDisplayTypeLabel(layout)}`);
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+function getLayoutTableRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(rowGroupSummaryTags_1.TableRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}
+function getPivotRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.PivotGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.PivotGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+function getLayoutPivotRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(rowGroupSummaryTags_1.PivotRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}

package/src/Utilities/Defaults/DefaultSettingsPanel.d.ts

@@ -1,5 +1,3 @@
-import { AdaptableSettingsPanel } from '../../AdaptableState/Common/Types';
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS: (AdaptableSettingsPanel | '-')[];
+import { SettingsPanelNavigation, SettingsPanelNavigationGroup } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS: SettingsPanelNavigationGroup[];
+export declare const buildDefaultSettingsPanelNavigation: (customPanelNames?: string[]) => SettingsPanelNavigation;

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -1,45 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = void 0;
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = [
-    'GridInfo',
-    'ColumnInfo',
-    'Dashboard',
-    'ToolPanel',
-    'StatusBar',
-    'Theme',
-    '-',
-    'Layout',
-    'CalculatedColumn',
-    'CustomSort',
-    'Alert',
-    'SystemStatus',
-    '-',
-    'Export',
-    'DataImport',
-    '-',
-    'FormatColumn',
-    'StyledColumn',
-    'FlashingCell',
-    '-',
-    'QuickSearch',
-    'GridFilter',
-    'ColumnFilter',
-    'DataSet',
-    'NamedQuery',
-    '-',
-    'Note',
-    'Comment',
-    'FreeTextColumn',
-    '-',
-    'PlusMinus',
-    'Shortcut',
-    'DataChangeHistory',
-    '-',
-    'Charting',
-    'TeamSharing',
-    'StateManagement',
+exports.buildDefaultSettingsPanelNavigation = exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS = void 0;
+exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS = [
+    {
+        label: 'Grid & UI',
+        items: ['GridInfo', 'ColumnInfo', 'Dashboard', 'ToolPanel', 'StatusBar', 'Theme'],
+    },
+    {
+        label: 'Layout',
+        items: ['Layout', 'CalculatedColumn', 'CustomSort', 'Charting'],
+    },
+    {
+        label: 'Formatting',
+        items: ['FormatColumn', 'StyledColumn', 'FlashingCell'],
+    },
+    {
+        label: 'Filtering & Search',
+        items: ['QuickSearch', 'GridFilter', 'ColumnFilter', 'DataSet', 'NamedQuery'],
+    },
+    {
+        label: 'Notes & Annotations',
+        items: ['Alert', 'Note', 'Comment', 'FreeTextColumn', 'SystemStatus'],
+    },
+    {
+        label: 'Export & Import',
+        items: ['Export', 'DataImport'],
+    },
+    {
+        label: 'ֵEditing',
+        items: ['PlusMinus', 'Shortcut', 'DataChangeHistory'],
+    },
+    {
+        label: 'Administration',
+        items: ['TeamSharing', 'StateManagement'],
+    },
 ];
+const buildDefaultSettingsPanelNavigation = (customPanelNames = []) => {
+    const groups = exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    }));
+    if (customPanelNames.length) {
+        groups.push({
+            label: 'Custom Panels',
+            items: [...customPanelNames],
+        });
+    }
+    return { groups };
+};
+exports.buildDefaultSettingsPanelNavigation = buildDefaultSettingsPanelNavigation;

package/src/Utilities/Helpers/FormatHelper.js

@@ -84,6 +84,9 @@ function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (options.Empty) {
         return ' ';
     }
+    if (n === 0 && options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        return options.ZeroDisplay;
+    }
     let s;
     let digitsToUse;
     const fractionsSepatator = options.FractionSeparator ?? '.';

package/src/Utilities/Helpers/ScheduleHelper.js

@@ -199,6 +199,8 @@ function getScheduleDescription(schedule) {
         }
         case 'monthly':
             return `Monthly on day ${dayOfMonth} ${time}`;
+        case 'custom':
+            return schedule.CronExpression?.trim() || 'Custom Cron';
         default:
             return `${schedule.CronExpression ?? 'Custom'} ${time}`;
     }

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

@@ -48,3 +48,21 @@ export declare const toStyle: (style?: AdaptableStyle) => {
     borderStyle: string;
 };
 export declare const getVariableColor: (variable: string) => string;
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+export declare const DEFAULT_CELL_SURFACE_COLOR = "#ffffff";
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+export declare const getAutoContrastTextColor: (baseColor: string, alpha: number, surfaceColor?: string) => string;

package/src/Utilities/Helpers/StyleHelper.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVariableColor = exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = exports.sanitizeStyle = exports.normalizeStyleForAgGrid = exports.AgGridCellStyleProperties = exports.omitCellBoxStyle = exports.omitCellFontStyle = exports.pickCellBoxStyle = exports.pickCellFontStyle = exports.hasCellBoxStyle = exports.hasCellFontStyle = exports.CELL_BOX_STYLE_KEYS = exports.CELL_FONT_STYLE_KEYS = void 0;
+exports.getAutoContrastTextColor = exports.DEFAULT_CELL_SURFACE_COLOR = exports.getVariableColor = exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = exports.sanitizeStyle = exports.normalizeStyleForAgGrid = exports.AgGridCellStyleProperties = exports.omitCellBoxStyle = exports.omitCellFontStyle = exports.pickCellBoxStyle = exports.pickCellFontStyle = exports.hasCellBoxStyle = exports.hasCellFontStyle = exports.CELL_BOX_STYLE_KEYS = exports.CELL_FONT_STYLE_KEYS = void 0;
+const tslib_1 = require("tslib");
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const EnumExtensions_1 = require("../Extensions/EnumExtensions");
 /**
  * Keys belonging to the "Font" slice (text rendering + alignment).
@@ -230,3 +232,30 @@ const getVariableColor = (variable) => {
     return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
 };
 exports.getVariableColor = getVariableColor;
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+exports.DEFAULT_CELL_SURFACE_COLOR = '#ffffff';
+/**
+ * Luminance above which a (composited, opaque) background is considered "light"
+ * enough to need dark text.
+ */
+const AUTO_CONTRAST_LUMINANCE_THRESHOLD = 0.45;
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+const getAutoContrastTextColor = (baseColor, alpha, surfaceColor = exports.DEFAULT_CELL_SURFACE_COLOR) => {
+    const composited = tinycolor2_1.default.mix(surfaceColor, baseColor, alpha * 100);
+    return composited.getLuminance() > AUTO_CONTRAST_LUMINANCE_THRESHOLD ? '#111111' : '#ffffff';
+};
+exports.getAutoContrastTextColor = getAutoContrastTextColor;

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -141,10 +141,11 @@ const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     let style = {};
-    const bg = (0, tinycolor2_1.default)((0, StyleHelper_2.getVariableColor)(matchingRange.Color)).setAlpha(alpha);
+    const preparedColor = (0, StyleHelper_2.getVariableColor)(matchingRange.Color);
+    const bg = (0, tinycolor2_1.default)(preparedColor).setAlpha(alpha);
     style.backgroundColor = bg.toRgbString();
     if (gradientStyle.AutoContrastText) {
-        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        style.color = (0, StyleHelper_2.getAutoContrastTextColor)(preparedColor, alpha);
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
     if (gradientStyle.Font) {
@@ -206,10 +207,11 @@ const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNode) => {
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     if (cellBackColor) {
-        const bg = (0, tinycolor2_1.default)((0, StyleHelper_2.getVariableColor)(cellBackColor)).setAlpha(alpha);
+        const preparedColor = (0, StyleHelper_2.getVariableColor)(cellBackColor);
+        const bg = (0, tinycolor2_1.default)(preparedColor).setAlpha(alpha);
         style.backgroundColor = bg.toRgbString();
         if (gradientStyle.AutoContrastText) {
-            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+            style.color = (0, StyleHelper_2.getAutoContrastTextColor)(preparedColor, alpha);
         }
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;

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)

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertButtonsEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonNew_1 = require("../../Components/Buttons/ButtonNew");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -85,7 +86,7 @@ const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "plus", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => {
                             onChange([
                                 ...(AlertButtons || []),
                                 {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertMessageSummary: (alertType?: AlertType) => React.JSX.Element;
+export declare const renderAlertMessageSummary: (alertType: AlertType | undefined, data: AlertDefinition) => React.JSX.Element;
 type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;

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

@@ -13,8 +13,7 @@ const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
-const renderAlertMessageSummary = (alertType) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertMessageSummary = (alertType, data) => {
     if (alertType === getAlertType_1.AlertType.Scheduled) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Message Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageType })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Header: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageHeader || 'Not specified' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Body: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageText || 'Not specified' })] })] }));
     }

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

@@ -3,7 +3,7 @@ import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
 import { BoxProps } from '../../../components/Flex';
-export declare const renderAlertNotificationSummary: () => React.JSX.Element;
+export declare const renderAlertNotificationSummary: (data: AlertDefinition, api: AdaptableApi) => React.JSX.Element;
 interface AlertPreviewProps extends BoxProps {
     className?: string;
     style?: React.CSSProperties;

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

@@ -4,6 +4,7 @@ exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAl
 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 OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
@@ -12,10 +13,8 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
 const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Card_1 = require("../../../components/Card");
-const renderAlertNotificationSummary = () => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertNotificationSummary = (data, api) => {
     if (!data.AlertProperties?.DisplayNotification) {
         return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "No Alert Notification will be displayed" });
     }
@@ -57,7 +56,7 @@ const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) =
         };
         return result;
     }, [alertDefinition, api, mapButtons]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...boxProps, className: (0, clsx_1.default)('ab-AlertPreview', boxProps.className), style: {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...boxProps, className: (0, utils_1.cn)('ab-AlertPreview', boxProps.className), style: {
             border: '1px solid var(--ab-color-input-border)',
             ...boxProps.style,
         }, children: (0, jsx_runtime_1.jsx)(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } }) }));