@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

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

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummary = exports.getStyledColumnWizardTitle = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Tag_1 = require("../../../components/Tag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
+const StyledColumnTypeThumbnail_1 = require("./StyledColumnTypeThumbnail");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
 const TYPE_LABELS = {
     Gradient: 'Gradient Column',
     PercentBar: 'Percent Bar',
@@ -21,6 +20,88 @@ const TYPE_LABELS = {
     RangeBar: 'Range Bar',
     Icon: 'Icon',
 };
+const STYLED_COLUMN_TYPE_GROUPS = [
+    {
+        title: 'Labels & icons',
+        types: ['badge', 'icon', 'rating'],
+    },
+    {
+        title: 'Bars & ranges',
+        types: ['percent', 'bullet', 'rangeBar'],
+    },
+    {
+        title: 'Colour',
+        types: ['gradient'],
+    },
+    {
+        title: 'Charts',
+        types: ['sparkline'],
+    },
+];
+const STYLED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'badge',
+        label: 'Badge',
+        columnTypes: ['Any Column'],
+        description: 'Render cell values as badges',
+        isSelected: (data) => Boolean(data.BadgeStyle),
+    },
+    {
+        type: 'icon',
+        label: 'Icon',
+        columnTypes: ['Any Column'],
+        description: 'Map values to icons',
+        isSelected: (data) => Boolean(data.IconStyle),
+    },
+    {
+        type: 'rating',
+        label: 'Rating',
+        columnTypes: ['Numeric Column'],
+        description: 'Provide visual rating indicators',
+        isSelected: (data) => Boolean(data.RatingStyle),
+    },
+    {
+        type: 'gradient',
+        label: 'Gradient',
+        columnTypes: ['Numeric Column'],
+        description: 'Colour cells by value ranges',
+        isSelected: (data) => Boolean(data.GradientStyle),
+    },
+    {
+        type: 'percent',
+        label: 'Percent Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Draw a bar sized to the value',
+        isSelected: (data) => Boolean(data.PercentBarStyle),
+    },
+    {
+        type: 'bullet',
+        label: 'Bullet Chart',
+        columnTypes: ['Numeric Column'],
+        description: 'Bar with target and bands',
+        isSelected: (data) => Boolean(data.BulletChartStyle),
+    },
+    {
+        type: 'rangeBar',
+        label: 'Range Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Show value on a min–max track',
+        isSelected: (data) => Boolean(data.RangeBarStyle),
+    },
+    {
+        type: 'sparkline',
+        label: 'Sparkline',
+        columnTypes: ['Numeric Array Column'],
+        description: 'Display a mini chart in the cell',
+        isSelected: (data) => Boolean(data.SparklineStyle),
+    },
+];
+const STYLED_COLUMN_TYPE_COUNT = STYLED_COLUMN_TYPE_OPTIONS.length;
+const STYLED_COLUMN_TYPE_OPTION_BY_KEY = STYLED_COLUMN_TYPE_OPTIONS.reduce((map, option) => {
+    map.set(option.type, option);
+    return map;
+}, new Map());
+const STYLED_COLUMN_TYPE_KEYS = STYLED_COLUMN_TYPE_GROUPS.flatMap((group) => group.types);
 /**
  * Wizard-header title for each Styled Column type. Reads as a complete
  * subject so it works as a top-level title in the wizard frame
@@ -85,6 +166,7 @@ exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummar
 const StyledColumnWizardTypeSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const sparklinesAvailable = adaptable.api.styledColumnApi.canDisplaySparklines();
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -129,8 +211,6 @@ const StyledColumnWizardTypeSection = (props) => {
                 newStyledColumn.RatingStyle = {};
                 break;
             case 'rangeBar':
-                // Range Bar requires Min and Max — seed sensible defaults so the
-                // wizard's Style step opens with a valid configuration.
                 newStyledColumn.RangeBarStyle = {
                     Min: 'Col-Min',
                     Max: 'Col-Max',
@@ -145,6 +225,13 @@ const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-4", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[420px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Bullet Chart", description: "Show a bar with target marker and qualitative bands per cell (Numeric Columns)", checked: Boolean(data.BulletChartStyle), onClick: () => handleTypeChange('bullet') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Range Bar", description: "Show where values sit between Min & Max (per-row or column) (Numeric Columns)", checked: Boolean(data.RangeBarStyle), onClick: () => handleTypeChange('rangeBar') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render Column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), disabled: !adaptable.api.styledColumnApi.canDisplaySparklines(), disabledTooltip: "Requires the AG Grid Sparklines module to be registered.", onClick: () => handleTypeChange('sparkline') })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardNameFieldSection, { value: data?.Name ?? '', onChange: onNameChange, inputDataName: "styled-column-name" }), (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "styled-column-type-heading", title: "Style Type", dataName: "styled-column-type-grid", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(STYLED_COLUMN_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click a card to choose one of ", STYLED_COLUMN_TYPE_COUNT, " style types for how values in the Column should be rendered"] }), children: STYLED_COLUMN_TYPE_KEYS.map((typeKey) => {
+                    const option = STYLED_COLUMN_TYPE_OPTION_BY_KEY.get(typeKey);
+                    const isSparkline = typeKey === 'sparkline';
+                    const disabled = isSparkline && !sparklinesAvailable;
+                    return ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: option.label, description: option.description, selected: option.isSelected(data), disabled: disabled, disabledTooltip: disabled
+                            ? 'Requires the AG Grid Sparklines module to be registered.'
+                            : undefined, dataName: `styled-column-type-${option.type}`, minHeightClassName: "twa:min-h-[168px]", onSelect: () => handleTypeChange(option.type), footer: (0, jsx_runtime_1.jsx)(StyledColumnTypeThumbnail_1.StyledColumnTypeThumbnail, { type: option.type }), children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:flex-wrap twa:gap-1", children: option.columnTypes.map((columnType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: columnType }, columnType))) }) }, option.type));
+                }) })] }));
 };
 exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

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

@@ -7,7 +7,7 @@ const getStatusItemStyle = (systemStatusMessageInfo) => {
     const background = UIHelper_1.default.getColorByMessageType(systemStatusMessageInfo?.statusType ?? 'Success');
     const color = systemStatusMessageInfo
         ? UIHelper_1.default.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
-        : 'var(--ab-color-text-on-primary)';
+        : 'var(--ab-color-primary-foreground)';
     return {
         background,
         color,

package/src/View/Theme/ThemePopup.d.ts

@@ -1,19 +1,7 @@
 import * as React from 'react';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { AdaptableTheme } from '../../AdaptableState/ThemeState';
-interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
-    CurrentTheme: string;
-    UserThemes: AdaptableTheme[];
-    SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
-    hideShowInWindow?: boolean;
-}
-declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
+declare class ThemePopupComponent extends React.Component<ModuleViewPopupProps<ThemePopupComponent>, {}> {
     render(): React.JSX.Element;
-    onChangeTheme(value: string): void;
-    handleCreateNewTheme: (variant: "dark" | "light") => void;
 }
-export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, {
-    [x: string]: any;
-}>;
+export declare let ThemePopup: typeof ThemePopupComponent;
 export {};

package/src/View/Theme/ThemePopup.js

@@ -4,48 +4,13 @@ exports.ThemePopup = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ThemeSelector_1 = require("./ThemeSelector");
 const Flex_1 = require("../../components/Flex");
 class ThemePopupComponent extends React.Component {
     render() {
-        const isCustomTheme = this.props.api.themeApi
-            .getUserThemes()
-            .some((theme) => theme.Name === this.props.CurrentTheme);
-        const disabled = this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
         return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Current Theme:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[150px]", children: (0, jsx_runtime_1.jsx)(ThemeSelector_1.ThemeSelector, {}) }) }) }) }));
     }
-    onChangeTheme(value) {
-        this.props.SelectTheme(value);
-    }
-    handleCreateNewTheme = (variant) => {
-        let nthItem = this.props.UserThemes.length + 1;
-        let name = 'Custom-Theme-' + nthItem;
-        // make sure it is unique
-        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-            nthItem++;
-            name = 'Custom-Theme-' + nthItem;
-        }
-        const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
-        newTheme.Variant = variant;
-        this.props.api.themeApi.addUserTheme(newTheme);
-        this.props.api.themeApi.loadTheme(newTheme.Name);
-    };
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
-    };
 }
-exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
+exports.ThemePopup = ThemePopupComponent;

package/src/View/UIHelper.d.ts

@@ -26,7 +26,6 @@ export declare function getMessageTypeByStatusColour(statusColour: StatusColour)
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
-export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -67,7 +66,6 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
-    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -16,7 +16,6 @@ exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
 exports.getButtonToneByMessageType = getButtonToneByMessageType;
 exports.getGlyphByMessageType = getGlyphByMessageType;
 exports.getColorByMessageType = getColorByMessageType;
-exports.getCSSColorByMessageType = getCSSColorByMessageType;
 exports.getStyleForStatusColour = getStyleForStatusColour;
 exports.getStyleForMessageType = getStyleForMessageType;
 exports.getGlyphForStatusColour = getGlyphForStatusColour;
@@ -37,7 +36,7 @@ const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../AdaptableState/Common/Enums");
 const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
-const ScheduleHelper_1 = require("../Utilities/Helpers/ScheduleHelper");
+const ScheduleHelper_1 = require("../Utilities/Helpers/Scheduling/ScheduleHelper");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
 /** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */
@@ -54,7 +53,7 @@ function getSwatchColorPaletteEntries() {
 /** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
 function getThemeSemanticColorPaletteEntries() {
     return [
-        'var(--ab-color-error)',
+        'var(--ab-color-destructive)',
         'var(--ab-color-warn)',
         'var(--ab-color-success)',
         'var(--ab-color-info)',
@@ -170,7 +169,7 @@ function getGlyphByMessageType(messageType) {
 function getColorByMessageType(messageType) {
     switch (messageType) {
         case 'Error':
-            return 'var(--ab-color-error)';
+            return 'var(--ab-color-destructive)';
         case 'Warning':
             return 'var(--ab-color-warn)';
         case 'Success':
@@ -179,20 +178,6 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-function getCSSColorByMessageType(messageType) {
-    switch (messageType) {
-        case 'Error':
-            return 'error';
-        case 'Warning':
-            return 'warn';
-        case 'Success':
-            return 'success';
-        case 'Info':
-            return 'info';
-        default:
-            return '';
-    }
-}
 function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -213,7 +198,7 @@ function getStyleForStatusColour(statusColour) {
             break;
         case Enums_1.StatusColour.Error:
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -242,7 +227,7 @@ function getStyleForMessageType(messageType) {
             break;
         case 'Error':
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -350,20 +335,20 @@ function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
 }
 function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
     if (ArrayExtensions_1.default.IsNullOrEmpty(adaptableAlerts)) {
-        return 'text-on-primary';
+        return 'primary-foreground';
     }
     return this.getButtonTextColourForMessageType(messageType);
 }
 function getButtonTextColourForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
-            return 'var( --ab-color-text-on-info)';
+            return 'var( --ab-color-info-foreground)';
         case 'Success':
-            return 'var( --ab-color-text-on-success)';
+            return 'var( --ab-color-success-foreground)';
         case 'Warning':
-            return 'var( --ab-color-text-on-warn)';
+            return 'var( --ab-color-warn-foreground)';
         case 'Error':
-            return 'var( --ab-color-text-on-error)';
+            return 'var( --ab-color-destructive-foreground)';
     }
 }
 function getNumericCSSVariableValue(stringValue, defaultValue) {
@@ -417,7 +402,6 @@ exports.UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
-    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/View/Wizard/CollapsibleWizardCard.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { type CollapsibleWizardCardSurface } from '../../Utilities/wizardSelection';
+export interface CollapsibleWizardCardProps {
+    title: React.ReactNode;
+    /** Help text in the header when expanded. */
+    help?: React.ReactNode;
+    /**
+     * Help text in the header when collapsed. Uses `help` when omitted.
+     * Pass `false` to hide collapsed header help.
+     */
+    collapsedHelp?: React.ReactNode | false;
+    /** Shown in the card body while collapsed — typically tags or a short value summary. */
+    summary: React.ReactNode;
+    /** One-line value shown in the header when another card in the accordion is expanded. */
+    compactSummary?: React.ReactNode;
+    /** When true, `compactSummary` remains interactive (e.g. toggle buttons). */
+    compactSummaryInteractive?: boolean;
+    /** Full-opacity visual in the header row (all states) — e.g. a live badge preview. */
+    headerVisual?: React.ReactNode;
+    /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
+    headerActions?: React.ReactNode;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    /** When true, only the header row is shown (another card in the accordion is expanded). */
+    compact?: boolean;
+    /** When true, the expanded card grows to fill remaining section height (for scrollable lists). */
+    fillAvailable?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    bodyClassName?: string;
+    /** `panel` = Layout wizard (same bg as parent); `popup` = module popups (Dashboard). */
+    surface?: CollapsibleWizardCardSurface;
+    'data-name'?: string;
+}
+export type WizardCardAccordionBinding = {
+    expanded: boolean;
+    compact: boolean;
+    fillAvailable: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+};
+export type WizardCardAccordionBindCardOptions = {
+    /** When expanded, grow to fill remaining section height. Default: false. */
+    fillAvailable?: boolean;
+};
+export type WizardCardAccordionOptions = {
+    /** Section default for `fillAvailable` when not set per card. Default: false. */
+    fillExpandedCard?: boolean;
+};
+export type WizardCardAccordionBindCard = (id: string, options?: WizardCardAccordionBindCardOptions) => WizardCardAccordionBinding;
+export declare function getWizardAccordionSectionClassName(hasExpandedCard: boolean, fillExpandedCard?: boolean): string;
+export declare function renderCompactColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+    maxVisible?: number;
+    emptyLabel?: string;
+}): React.ReactNode;
+export declare const CollapsibleWizardCard: React.FC<CollapsibleWizardCardProps>;
+export declare function useWizardCardAccordion(initialExpandedId: string | null, options?: WizardCardAccordionOptions): {
+    expandedId: string;
+    hasExpandedCard: boolean;
+    expandedFillsSpace: boolean;
+    bindCard: WizardCardAccordionBindCard;
+    fillExpandedCard: boolean;
+    setExpandedId: React.Dispatch<React.SetStateAction<string>>;
+};
+/** Collapsed card body: selected value tag(s) only — no description text. */
+export declare const CollapsibleWizardValueSummary: React.FC<{
+    value: React.ReactNode;
+}>;

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleWizardValueSummary = exports.CollapsibleWizardCard = void 0;
+exports.getWizardAccordionSectionClassName = getWizardAccordionSectionClassName;
+exports.renderCompactColumnTags = renderCompactColumnTags;
+exports.useWizardCardAccordion = useWizardCardAccordion;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Card_1 = require("../../components/Card");
+const utils_1 = require("../../lib/utils");
+const wizardSelection_1 = require("../../Utilities/wizardSelection");
+const Flex_1 = require("../../components/Flex");
+const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
+const Tag_1 = require("../../components/Tag");
+const Icon_1 = require("../../components/Icon");
+const twUtils_1 = require("../../components/twUtils");
+function getWizardAccordionSectionClassName(hasExpandedCard, fillExpandedCard = true) {
+    return (0, utils_1.cn)('twa:h-full twa:min-h-0 twa:flex twa:flex-col twa:gap-2', hasExpandedCard && fillExpandedCard ? 'twa:overflow-hidden' : 'twa:overflow-y-auto');
+}
+function renderCompactColumnTags(columnIds, getFriendlyName, options) {
+    const { maxVisible = 5, emptyLabel = 'None' } = options ?? {};
+    if (!columnIds.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: emptyLabel });
+    }
+    const visibleIds = columnIds.slice(0, maxVisible);
+    const remainder = columnIds.length - visibleIds.length;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:shrink-0", children: getFriendlyName(columnId) }, columnId))), remainder > 0 ? ((0, jsx_runtime_1.jsxs)("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
+}
+const CollapsibleWizardCard = (props) => {
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const [expanded, setExpanded] = (0, useProperty_1.default)(props, 'expanded', defaultExpanded, {
+        onChange: props.onExpandedChange,
+    });
+    const showSummary = !expanded && !compact;
+    const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
+    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
+    const toggleExpanded = () => setExpanded(!expanded);
+    const handleTitleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleExpanded();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: (0, utils_1.cn)('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+            ? (0, wizardSelection_1.getCollapsibleWizardCardExpandedClasses)(surface)
+            : (0, wizardSelection_1.getCollapsibleWizardCardCollapsedClasses)(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
+            : 'twa:shrink-0', className), children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:p-0", border: !compact, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, 
+                    // `targetOwn.focusOutline` uses a Tailwind `ring` (an *outward* box-shadow).
+                    // In compact/collapsed mode the card sets `p-0!`, so this header sits flush
+                    // against the card edge; combined with the card's `overflow-hidden` the
+                    // outward ring is painted outside the border-box and clipped away. Draw it
+                    // inset so it stays inside the element and is always visible.
+                    twUtils_1.targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [(0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: title })] }), headerVisual ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+                                ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
+                                : (0, utils_1.cn)('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:shrink-0", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? ((0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: (0, utils_1.cn)('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? ((0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+};
+exports.CollapsibleWizardCard = CollapsibleWizardCard;
+function useWizardCardAccordion(initialExpandedId, options) {
+    const fillExpandedCard = options?.fillExpandedCard ?? false;
+    const cardFillByIdRef = React.useRef({});
+    const [expandedId, setExpandedId] = React.useState(initialExpandedId);
+    const hasExpandedCard = expandedId !== null;
+    const bindCard = React.useCallback((id, cardOptions) => {
+        const shouldFillWhenExpanded = cardOptions?.fillAvailable ?? fillExpandedCard;
+        cardFillByIdRef.current[id] = shouldFillWhenExpanded;
+        return {
+            expanded: expandedId === id,
+            compact: hasExpandedCard && expandedId !== id,
+            fillAvailable: expandedId === id && shouldFillWhenExpanded,
+            onExpandedChange: (expanded) => {
+                setExpandedId(expanded ? id : null);
+            },
+        };
+    }, [expandedId, hasExpandedCard, fillExpandedCard]);
+    const expandedFillsSpace = expandedId != null && cardFillByIdRef.current[expandedId] === true;
+    return {
+        expandedId,
+        hasExpandedCard,
+        expandedFillsSpace,
+        bindCard,
+        fillExpandedCard,
+        setExpandedId,
+    };
+}
+/** Collapsed card body: selected value tag(s) only — no description text. */
+const CollapsibleWizardValueSummary = ({ value }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value });
+exports.CollapsibleWizardValueSummary = CollapsibleWizardValueSummary;

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -57,6 +57,13 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
      * `FriendlyName`.
      */
     moduleName?: string;
+    /**
+     * Persistent preview rendered as a full-width band beneath the wizard
+     * header — visible on every step. Used by wizards (e.g. Styled Column)
+     * that want users to see a live preview of the object they're building
+     * as they progress.
+     */
+    headerPreview?: React.ReactNode;
 }
 export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
 export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -8,12 +8,12 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
 const NamedQueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/NamedQueryRedux"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const Tabs_1 = require("../../components/Tabs");
+const Card_1 = require("../../components/Card");
+const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
-const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const Flex_1 = require("../../components/Flex");
 const twMerge_1 = require("../../twMerge");
 const SummaryTag = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props }));
@@ -38,7 +38,7 @@ const OnePageAdaptableWizard = (props) => {
     const saveNamedQuery = React.useCallback((namedQuery) => dispatch(NamedQueryRedux.NamedQueryAdd(namedQuery)), []);
     const [namedQuery, setNamedQuery] = (0, react_1.useState)(false);
     const name = props.moduleInfo.FriendlyName
-        ? `${(0, kebabCase_1.default)(props.moduleInfo.FriendlyName)}-wizard`
+        ? `${(0, StringExtensions_1.kebabCase)(props.moduleInfo.FriendlyName)}-wizard`
         : '';
     const extraContext = {
         data: props.data,
@@ -83,20 +83,9 @@ const OnePageAdaptableWizard = (props) => {
 };
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
-    const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
-    const { setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
-    const [namedQuery] = (0, react_1.useState)(false);
-    const renderEdit = (index) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:px-1 twa:inline-block twa:text-2 twa:underline", variant: "text", onClick: () => {
-            setCurrentSection(index);
-        }, children: "edit" }));
-    const extraContext = {
-        data,
-        api,
-        namedQuery,
-        moduleInfo: moduleInfo,
-        sections,
-    };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-2", children: sections
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const { sections: visibleSections, setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-3", children: visibleSections
             .map((section, index) => {
             if (section === '-') {
                 return null;
@@ -104,10 +93,7 @@ const OnePageWizardSummary = () => {
             if (!section.renderSummary) {
                 return null;
             }
-            if (section.isVisible && !section.isVisible(data, api, extraContext)) {
-                return null;
-            }
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { keyboardNavigation: false, children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { children: [section.title, " ", renderEdit(index)] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: section.renderSummary(data, api) })] }, index) }));
+            return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium twa:flex-1", children: section.title }), (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => setCurrentSection(index) })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: section.renderSummary?.(data, api) })] }, `${section.title}-${index}`));
         })
             .filter(Boolean) }));
 };

package/src/View/Wizard/OnePageWizards.d.ts

@@ -41,6 +41,14 @@ export interface OnePageWizardProps<ENTITY> {
     closeTooltip?: string;
     finishText?: React.ReactNode;
     moduleName?: string;
+    /**
+     * Optional persistent preview rendered as a full-width band beneath the
+     * header. Used by wizards (e.g. Styled Column) that want users to see a
+     * live preview of the object they're building on every step — the same
+     * card the existing Style / Summary steps render, hoisted so it is
+     * always visible.
+     */
+    headerPreview?: React.ReactNode;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};