@adaptabletools/adaptable 23.0.0-canary.9 → 23.0.0

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

@@ -1,9 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { isAdaptableCustomIcon, isAdaptableElementIcon, isAdaptableSystemIcon, } from '../../../../../components/Icon';
 import { resolveEffectiveIconStyleMappings } from '../../../../../agGrid/cellRenderers/IconRenderer';
 import { AdaptableIconComponent } from '../../../../Components/AdaptableIconComponent';
 import { Box } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
 export const DEFAULT_ICON_STYLE_SIZE = 18;
@@ -88,4 +87,3 @@ export const StyledColumnIconPreview = ({ data }) => {
     const previewCellChrome = getIconCellChromeCss(iconStyle.Cell);
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
 };
-export const StyledColumnIconPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnIconPreview, { data: data }) })] }));

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

@@ -3,7 +3,6 @@ import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/Sty
 import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper';
 import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { BarStyleCellTextPreview, shouldShowBarStyleCellTextOutsideBar, } from './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)]';
@@ -58,4 +57,3 @@ export const StyledColumnPercentBarPreview = ({ data }) => {
     const sampleValues = getPercentBarPreviewSampleValues(pb);
     return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
 };
-export const StyledColumnPercentBarPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnPercentBarPreview, { data: data }) })] }));

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,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnRangeBarListPreview } from './StyledColumnChartListPreviews';
 import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
@@ -44,4 +43,3 @@ export const StyledColumnRangeBarPreview = ({ data }) => {
     }
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(RangeBarPreviewContent, { range: range }) }));
 };
-export const StyledColumnRangeBarPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnRangeBarPreview, { data: data }) })] }));

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,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
 export const DEFAULT_RATING_MAX = 5;
@@ -35,6 +34,8 @@ export 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 (_jsxs("span", { style: {
             display: 'inline-flex',
@@ -45,7 +46,7 @@ export const RatingPreview = ({ rating, value, }) => {
                 const fill = clamp(effective - i, 0, 1);
                 const clipId = `ab-rating-preview-clip-${instanceId}-${i}`;
                 return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
-            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
+            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: displayValue }))] }));
 };
 export const StyledColumnRatingPreview = ({ data }) => {
     const rating = data.RatingStyle;
@@ -55,4 +56,3 @@ export const StyledColumnRatingPreview = ({ data }) => {
     const previewCellChrome = getRatingCellChromeCss(rating.Cell);
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }));
 };
-export const StyledColumnRatingPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnRatingPreview, { data: data }) })] }));

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,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
 import { AdaptableHelper } from '../../../../../Utilities/Helpers/AdaptableHelper';
 import { resolveSparklineOptionsForRender } from '../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
 import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
 import { Box } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
 const FALLBACK_NUMBER_ARRAY = [12, 18, 9, 22, 15, 28, 19, 24, 17, 21];
@@ -123,4 +122,3 @@ export const StyledColumnSparklinePreview = ({ data }) => {
     const previewCellChrome = getSparklineCellChromeCss(sparklineStyle.Cell);
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(SparklinePreviewCanvas, { sparklineStyle: sparklineStyle, columnId: data.ColumnId }) }));
 };
-export const StyledColumnSparklinePreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(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)" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnSparklinePreview, { data: data }) })] }));

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

@@ -13,7 +13,6 @@ import Radio, { RadioGroup } from '../../../../components/Radio';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
 import { Card } from '../../../../components/Card';
 import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
-import { StyledColumnPercentBarPreviewCard } from './Components/StyledColumnPercentBarPreview';
 // Re-export the Ranges section + summary for legacy import paths.
 export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
 // ---------------------------------------------------------------------------
@@ -158,5 +157,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] }), _jsx(StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -48,7 +48,7 @@ export const CollapsibleWizardCard = (props) => {
                     // inset so it stays inside the element and is always visible.
                     targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(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 ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
                                 ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
-                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
 };
 export function useWizardCardAccordion(initialExpandedId, options) {
     const fillExpandedCard = options?.fillExpandedCard ?? false;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState, useRef } from 'react';
 import { cn } from '../../lib/utils';
@@ -78,7 +78,7 @@ export const OnePageWizard = (props) => {
         if (section === '-') {
             return _jsx(React.Fragment, {}, index);
         }
-        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(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 (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:flex-1 twa:overflow-hidden", children: _jsx(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 = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);
@@ -166,5 +166,5 @@ export const OnePageWizard = (props) => {
                                                 }, children: [_jsx(KeyHint, { className: cn('twa:mr-2 twa:inline-block', {
                                                             'twa:text-accent-foreground': active,
                                                         }), children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: cn('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
-                                        }), selectedFeedback, _jsx(Box, { className: "twa:flex-1" }), _jsxs(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [isMacLike() ? 'Cmd' : 'Ctrl', " + #", _jsx("br", {}), "or arrow keys", _jsx("br", {}), "to navigate"] })] }), _jsx(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [_jsx(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), _jsx(KeyHint, { className: "twa:ml-2", children: "Esc" }), _jsx(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), _jsx(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
+                                        }), selectedFeedback, _jsx(Box, { className: "twa:flex-1" }), _jsxs(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [isMacLike() ? 'Cmd' : 'Ctrl', " + #", _jsx("br", {}), "or arrow keys", _jsx("br", {}), "to navigate"] })] }), _jsxs(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 ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-OnePageWizard__header-preview", children: props.headerPreview }), _jsx(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)] })] }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [_jsx(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), _jsx(KeyHint, { className: "twa:ml-2", children: "Esc" }), _jsx(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), _jsx(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
 };

package/src/components/DragAndDropContext/ModuleManager.js

@@ -71,9 +71,12 @@ export 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 (_jsxs(Card, { className: cn('twa:m-0 ab-ModuleSelector__UnusedGroup', {
-                                'twa:flex-1 twa:min-w-0': groupsLayout === 'row',
-                            }), children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(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: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(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

@@ -1,5 +1,5 @@
 export 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: 1782138884372 || Date.now(),
-    VERSION: "23.0.0-canary.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782227625016 || Date.now(),
+    VERSION: "23.0.0" || '--current-version--',
 };