@adaptabletools/adaptable-cjs 23.0.0-canary.9 → 23.0.0

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnIconPreviewCard = exports.StyledColumnIconPreview = exports.DEFAULT_ICON_STYLE_GAP = exports.DEFAULT_ICON_STYLE_SIZE = void 0;
+exports.StyledColumnIconPreview = exports.DEFAULT_ICON_STYLE_GAP = exports.DEFAULT_ICON_STYLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Icon_1 = require("../../../../../components/Icon");
 const IconRenderer_1 = require("../../../../../agGrid/cellRenderers/IconRenderer");
 const AdaptableIconComponent_1 = require("../../../../Components/AdaptableIconComponent");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 exports.DEFAULT_ICON_STYLE_SIZE = 18;
@@ -92,5 +91,3 @@ const StyledColumnIconPreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
 };
 exports.StyledColumnIconPreview = StyledColumnIconPreview;
-const StyledColumnIconPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnIconPreview, { data: data }) })] }));
-exports.StyledColumnIconPreviewCard = StyledColumnIconPreviewCard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview.d.ts

@@ -3,6 +3,3 @@ import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
 export declare const StyledColumnPercentBarPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnPercentBarPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnPercentBarPreviewCard = exports.StyledColumnPercentBarPreview = void 0;
+exports.StyledColumnPercentBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const PercentBarStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper");
 const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
 const PREVIEW_CELL_CLASS = 'ab-PercentBarPreviewCell twa:w-[72px] twa:min-h-[32px] twa:px-1 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
@@ -62,5 +61,3 @@ const StyledColumnPercentBarPreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
 };
 exports.StyledColumnPercentBarPreview = StyledColumnPercentBarPreview;
-const StyledColumnPercentBarPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnPercentBarPreview, { data: data }) })] }));
-exports.StyledColumnPercentBarPreviewCard = StyledColumnPercentBarPreviewCard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview.d.ts

@@ -3,6 +3,3 @@ import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
 export declare const StyledColumnRangeBarPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnRangeBarPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnRangeBarPreviewCard = exports.StyledColumnRangeBarPreview = void 0;
+exports.StyledColumnRangeBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
 const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
@@ -48,5 +47,3 @@ const StyledColumnRangeBarPreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, children: (0, jsx_runtime_1.jsx)(RangeBarPreviewContent, { range: range }) }));
 };
 exports.StyledColumnRangeBarPreview = StyledColumnRangeBarPreview;
-const StyledColumnRangeBarPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnRangeBarPreview, { data: data }) })] }));
-exports.StyledColumnRangeBarPreviewCard = StyledColumnRangeBarPreviewCard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview.d.ts

@@ -14,6 +14,3 @@ export declare const RatingPreview: React.FC<{
 export declare const StyledColumnRatingPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnRatingPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnRatingPreviewCard = exports.StyledColumnRatingPreview = exports.RatingPreview = exports.DEFAULT_RATING_ICON = exports.DEFAULT_RATING_GAP = exports.DEFAULT_RATING_SIZE = exports.DEFAULT_RATING_MAX = void 0;
+exports.StyledColumnRatingPreview = exports.RatingPreview = exports.DEFAULT_RATING_ICON = exports.DEFAULT_RATING_GAP = exports.DEFAULT_RATING_SIZE = exports.DEFAULT_RATING_MAX = void 0;
 exports.getRatingCellChromeCss = getRatingCellChromeCss;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 exports.DEFAULT_RATING_MAX = 5;
@@ -40,6 +39,8 @@ const RatingPreview = ({ rating, value, }) => {
     const allowHalf = rating.AllowHalf ?? true;
     const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
     const effective = allowHalf ? previewValue : Math.round(previewValue);
+    // Display rounded to 1 dp so e.g. 3 * 0.7 doesn't surface as 2.0999999999999996.
+    const displayValue = Math.round(previewValue * 10) / 10;
     const d = ICON_PATHS[icon];
     return ((0, jsx_runtime_1.jsxs)("span", { style: {
             display: 'inline-flex',
@@ -50,7 +51,7 @@ const RatingPreview = ({ rating, value, }) => {
                 const fill = clamp(effective - i, 0, 1);
                 const clipId = `ab-rating-preview-clip-${instanceId}-${i}`;
                 return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: d, fill: emptyColor }), fill > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), (0, jsx_runtime_1.jsx)("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
-            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
+            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: displayValue }))] }));
 };
 exports.RatingPreview = RatingPreview;
 const StyledColumnRatingPreview = ({ data }) => {
@@ -62,5 +63,3 @@ const StyledColumnRatingPreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(exports.RatingPreview, { rating: rating }) }));
 };
 exports.StyledColumnRatingPreview = StyledColumnRatingPreview;
-const StyledColumnRatingPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnRatingPreview, { data: data }) })] }));
-exports.StyledColumnRatingPreviewCard = StyledColumnRatingPreviewCard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview.d.ts

@@ -5,6 +5,3 @@ export declare function getSparklineCellChromeCss(cell: CellBoxStyle | undefined
 export declare const StyledColumnSparklinePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnSparklinePreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnSparklinePreviewCard = exports.StyledColumnSparklinePreview = void 0;
+exports.StyledColumnSparklinePreview = void 0;
 exports.getSparklineCellChromeCss = getSparklineCellChromeCss;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -10,7 +10,6 @@ const AdaptableHelper_1 = require("../../../../../Utilities/Helpers/AdaptableHel
 const SparklineStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const FALLBACK_NUMBER_ARRAY = [12, 18, 9, 22, 15, 28, 19, 24, 17, 21];
@@ -129,5 +128,3 @@ const StyledColumnSparklinePreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(SparklinePreviewCanvas, { sparklineStyle: sparklineStyle, columnId: data.ColumnId }) }));
 };
 exports.StyledColumnSparklinePreview = StyledColumnSparklinePreview;
-const StyledColumnSparklinePreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Sample sparkline using first non-empty cell in Column (or demo data when unavailable)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnSparklinePreview, { data: data }) })] }));
-exports.StyledColumnSparklinePreviewCard = StyledColumnSparklinePreviewCard;

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

@@ -17,7 +17,6 @@ const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const StyledColumnSliceStyleEditors_1 = require("../StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../../components/Card");
 const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
-const StyledColumnPercentBarPreview_1 = require("./Components/StyledColumnPercentBarPreview");
 // Re-export the Ranges section + summary for legacy import paths.
 var StyledColumnWizardRangesSection_1 = require("./StyledColumnWizardRangesSection");
 Object.defineProperty(exports, "renderStyledColumnRangesSummary", { enumerable: true, get: function () { return StyledColumnWizardRangesSection_1.renderStyledColumnRangesSummary; } });
@@ -167,6 +166,6 @@ const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] })] }));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -55,7 +55,7 @@ const CollapsibleWizardCard = (props) => {
                     // 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] }));
+                                : (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 twa:gap-2 twa:flex", 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) {

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/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 {};

package/src/View/Wizard/OnePageWizards.js

@@ -86,7 +86,7 @@ const OnePageWizard = (props) => {
         if (section === '-') {
             return (0, jsx_runtime_1.jsx)(React.Fragment, {}, index);
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-background", children: section.render(props.data, index) }) }, index));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:flex-1 twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-background", children: section.render(props.data, index) }) }, index));
     };
     const handleNavigation = (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
     const selectedNodeRef = (0, react_1.useRef)(null);
@@ -174,6 +174,6 @@ const OnePageWizard = (props) => {
                                                 }, children: [(0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: (0, utils_1.cn)('twa:mr-2 twa:inline-block', {
                                                             'twa:text-accent-foreground': active,
                                                         }), children: navIndex }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: section.title }), (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "error", className: (0, utils_1.cn)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
-                                        }), selectedFeedback, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsxs)(KeyHint_1.KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [(0, isMacLike_1.isMacLike)() ? 'Cmd' : 'Ctrl', " + #", (0, jsx_runtime_1.jsx)("br", {}), "or arrow keys", (0, jsx_runtime_1.jsx)("br", {}), "to navigate"] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), (0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:ml-2", children: "Esc" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
+                                        }), selectedFeedback, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsxs)(KeyHint_1.KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [(0, isMacLike_1.isMacLike)() ? 'Cmd' : 'Ctrl', " + #", (0, jsx_runtime_1.jsx)("br", {}), "or arrow keys", (0, jsx_runtime_1.jsx)("br", {}), "to navigate"] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:overflow-hidden twa:min-w-0 twa:flex-1 twa:gap-2 twa:mr-2", children: [props.headerPreview ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__header-preview", children: props.headerPreview }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__header-preview-separator twa:w-full twa:border-0 twa:border-t twa:my-0 twa:border-t-input-border" })] })) : null, renderSection(currentSection)] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), (0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:ml-2", children: "Esc" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
 };
 exports.OnePageWizard = OnePageWizard;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -75,9 +75,12 @@ const ModuleManager = (props) => {
                         'ab-ModuleSelector__UnusedGroups--row': groupsLayout === 'row',
                     }), children: unusedItemGroups.map((group, index) => {
                         const listId = group.listId ?? `UNUSED-${index}`;
+                        const isRow = groupsLayout === 'row';
+                        const hasCustomFlex = typeof group.flex === 'number';
                         return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { className: (0, utils_1.cn)('twa:m-0 ab-ModuleSelector__UnusedGroup', {
-                                'twa:flex-1 twa:min-w-0': groupsLayout === 'row',
-                            }), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { border: false, className: "twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0", children: (0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
+                                'twa:min-w-0': isRow,
+                                'twa:flex-1': isRow && !hasCustomFlex,
+                            }), style: isRow && hasCustomFlex ? { flex: group.flex } : undefined, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { border: false, className: "twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0", children: (0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
                     }) })] }));
     };
     const renderAvailableItemPanels = (options) => {

package/src/components/DragAndDropContext/types.d.ts

@@ -12,4 +12,11 @@ export interface UnusedItemGroup {
     title: string;
     help?: string;
     items: string[];
+    /**
+     * Optional flex weight when groups are laid out in a row. If any group
+     * sets this, the weights are used as `flex-grow` values (so e.g. 40 / 60
+     * gives a 40% / 60% split). When omitted on every group the layout falls
+     * back to equal-width columns.
+     */
+    flex?: number;
 }

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1782138914072 || Date.now(),
-    VERSION: "23.0.0-canary.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782227653432 || Date.now(),
+    VERSION: "23.0.0" || '--current-version--',
 };