@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

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

@@ -1,12 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import Input from '../../../components/Input';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from '../../../components/Tag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useAdaptable } from '../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Flex, Box } from '../../../components/Flex';
+import { StyledColumnTypeThumbnail } from './StyledColumnTypeThumbnail';
+import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
 const TYPE_LABELS = {
     Gradient: 'Gradient Column',
     PercentBar: 'Percent Bar',
@@ -17,6 +16,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
@@ -79,6 +160,7 @@ export const renderStyledColumnTypeSummary = renderStyledColumnSettingsSummary;
 export const StyledColumnWizardTypeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
+    const sparklinesAvailable = adaptable.api.styledColumnApi.canDisplaySparklines();
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -123,8 +205,6 @@ export 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',
@@ -139,5 +219,12 @@ export const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), _jsx(Flex, { flexDirection: "row", className: "twa:mb-4", children: _jsx(FormLayout, { className: "twa:max-w-[420px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), _jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), _jsx(TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), _jsx(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), _jsx(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') }), _jsx(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') }), _jsx(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') }), _jsx(TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), _jsx(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 (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [_jsx(WizardNameFieldSection, { value: data?.Name ?? '', onChange: onNameChange, inputDataName: "styled-column-name" }), _jsx(WizardTypeSelectionSection, { headingId: "styled-column-type-heading", title: "Style Type", dataName: "styled-column-type-grid", columns: getWizardTypeSelectionGridColumns(STYLED_COLUMN_TYPE_COUNT), intro: _jsxs(_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 (_jsx(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: _jsx(StyledColumnTypeThumbnail, { type: option.type }), children: _jsx(Flex, { flexDirection: "row", className: "twa:flex-wrap twa:gap-1", children: option.columnTypes.map((columnType) => (_jsx(Tag, { children: columnType }, columnType))) }) }, option.type));
+                }) })] }));
 };

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

@@ -18,7 +18,7 @@ export function getSwatchColorPaletteEntries() {
 /** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
 export function getThemeSemanticColorPaletteEntries() {
     return [
-        'var(--ab-color-error)',
+        'var(--ab-color-destructive)',
         'var(--ab-color-warn)',
         'var(--ab-color-success)',
         'var(--ab-color-info)',
@@ -134,7 +134,7 @@ export function getGlyphByMessageType(messageType) {
 export 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':
@@ -143,20 +143,6 @@ export function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-export function getCSSColorByMessageType(messageType) {
-    switch (messageType) {
-        case 'Error':
-            return 'error';
-        case 'Warning':
-            return 'warn';
-        case 'Success':
-            return 'success';
-        case 'Info':
-            return 'info';
-        default:
-            return '';
-    }
-}
 export function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -177,7 +163,7 @@ export function getStyleForStatusColour(statusColour) {
             break;
         case StatusColour.Error:
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -206,7 +192,7 @@ export function getStyleForMessageType(messageType) {
             break;
         case 'Error':
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -321,13 +307,13 @@ export function getButtonTextColourForArrayandMessageType(adaptableAlerts, messa
 export 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) {
@@ -381,7 +367,6 @@ export const 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,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Card } from '../../components/Card';
+import { cn } from '../../lib/utils';
+import { getCollapsibleWizardCardCollapsedClasses, getCollapsibleWizardCardExpandedClasses, } from '../../Utilities/wizardSelection';
+import { Box, Flex } from '../../components/Flex';
+import useProperty from '../../components/utils/useProperty';
+import { ColumnTag, Tag } from '../../components/Tag';
+import { IconComponent } from '../../components/Icon';
+import { targetOwn } from '../../components/twUtils';
+export function getWizardAccordionSectionClassName(hasExpandedCard, fillExpandedCard = true) {
+    return 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');
+}
+export function renderCompactColumnTags(columnIds, getFriendlyName, options) {
+    const { maxVisible = 5, emptyLabel = 'None' } = options ?? {};
+    if (!columnIds.length) {
+        return _jsx(Tag, { children: emptyLabel });
+    }
+    const visibleIds = columnIds.slice(0, maxVisible);
+    const remainder = columnIds.length - visibleIds.length;
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((columnId) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: getFriendlyName(columnId) }, columnId))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
+}
+export 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] = useProperty(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 (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+            ? getCollapsibleWizardCardExpandedClasses(surface)
+            : 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: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: 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.
+                    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] }));
+};
+export 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. */
+export const CollapsibleWizardValueSummary = ({ value }) => _jsx(_Fragment, { children: value });

package/src/View/Wizard/OnePageWizards.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState, useRef } from 'react';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 import Dialog from '../../components/Dialog';
 import SimpleButton from '../../components/SimpleButton';
 import useProperty from '../../components/utils/useProperty';
@@ -82,7 +82,7 @@ export const OnePageWizard = (props) => {
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);
-    const selectedFeedback = (_jsx("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: clsx('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', targetOwn.focusOutline) }));
+    const selectedFeedback = (_jsx("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: cn('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', targetOwn.focusOutline) }));
     const sizeOwnerRef = useRef(null);
     const [width, setWidth] = useState(0);
     useResizeObserver(sizeOwnerRef, ({ width }) => {
@@ -136,7 +136,7 @@ export const OnePageWizard = (props) => {
                             }
                         }
                     }
-                }, children: _jsxs(Box, { className: clsx('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && (_jsxs(Box, { className: clsx('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [_jsx(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), _jsx(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), _jsx(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), _jsxs(Box, { className: clsx(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [_jsxs(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
+                }, children: _jsxs(Box, { className: cn('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && (_jsxs(Box, { className: cn('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [_jsx(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), _jsx(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), _jsx(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), _jsxs(Box, { className: cn(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [_jsxs(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
                                             if (section === '-') {
                                                 return (_jsx(Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-input-border" }, `${index}-`));
                                             }
@@ -144,7 +144,7 @@ export const OnePageWizard = (props) => {
                                             navIndexMap.set(navIndex, index);
                                             const active = index === currentSection;
                                             const disabled = false; //!active && !currentSectionValid;
-                                            return (_jsxs(Flex, { className: clsx('ab-OnePageWizard__section-title twa:p-2', {
+                                            return (_jsxs(Flex, { className: cn('ab-OnePageWizard__section-title twa:p-2', {
                                                     'twa:cursor-auto': disabled,
                                                     'twa:cursor-pointer': !disabled,
                                                     'twa:z-10': true,
@@ -163,6 +163,6 @@ export const OnePageWizard = (props) => {
                                                         return;
                                                     }
                                                     setCurrentSection(index);
-                                                }, children: [_jsx(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground", children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: clsx('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-error 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' })] })] }) }) }) }));
+                                                }, children: [_jsx(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-accent-foreground", 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' })] })] }) }) }) }));
 };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AdaptableIcon } from '../../types';
+export type SummaryLabelValueItem = {
+    label: string;
+    value: string;
+    /** When set on an Icon summary row, renders the icon glyph instead of the name. */
+    icon?: AdaptableIcon;
+};
+export declare const isSummaryColorLabel: (label: string) => boolean;
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+export declare const isSummaryInTagLabel: (label: string) => boolean;
+export declare const ColorSummarySquare: React.FC<{
+    color: string;
+    className?: string;
+}>;
+export declare const renderSummaryLabelValueTagContent: (label: string, value: string, icon?: AdaptableIcon) => React.ReactNode;
+export declare const parseSummaryLabelValueString: (item: string) => {
+    label: string;
+    value: string;
+} | null;
+export declare const renderSummaryStringTagContent: (item: string) => React.ReactNode;
+export declare const renderSummaryStringTags: (items: string[]) => React.JSX.Element;
+export declare const summaryStringsToTagContents: (items: string[]) => React.ReactNode[];
+export declare const renderSummaryLabelValueTags: (items: SummaryLabelValueItem[]) => React.JSX.Element;

package/src/View/Wizard/SummaryColorTag.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../components/Flex';
+import { Tag } from '../../components/Tag';
+import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
+import { allIcons, Icon } from '../../components/icons';
+import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
+const COLOR_SQUARE_CLASS = 'twa:h-3 twa:w-3 twa:rounded-sm twa:shrink-0 twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_20%,transparent)]';
+export const isSummaryColorLabel = (label) => /\bColou?r$/i.test(label.trim());
+const isIconSummaryLabel = (label) => label.trim() === 'Icon';
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+export const isSummaryInTagLabel = (label) => {
+    const trimmed = label.trim();
+    return (isSummaryColorLabel(trimmed) ||
+        isIconSummaryLabel(trimmed) ||
+        trimmed === 'Font Weight' ||
+        trimmed === 'Font Style');
+};
+export const ColorSummarySquare = ({ color, className, }) => (_jsx(Box, { className: className ?? COLOR_SQUARE_CLASS, style: { background: getVariableColor(color) }, "aria-hidden": true }));
+const SummaryIconVisual = ({ icon, value }) => {
+    if (icon) {
+        return (_jsx(AdaptableIconComponent, { icon: { ...icon, size: icon.size ?? 14 } }));
+    }
+    if (value && value in allIcons) {
+        return (_jsx(Icon, { "aria-hidden": true, name: value, size: 14, className: "twa:shrink-0" }));
+    }
+    return null;
+};
+const isSummaryIconVisualAvailable = (icon, value) => Boolean(icon || (value && value in allIcons));
+const isFontWeightLabel = (label) => label.trim() === 'Font Weight';
+const isFontStyleLabel = (label) => label.trim() === 'Font Style';
+export const renderSummaryLabelValueTagContent = (label, value, icon) => {
+    if (isSummaryColorLabel(label)) {
+        return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, _jsx(ColorSummarySquare, { color: value })] }));
+    }
+    if (isIconSummaryLabel(label)) {
+        if (isSummaryIconVisualAvailable(icon, value)) {
+            return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, _jsx(SummaryIconVisual, { icon: icon, value: value })] }));
+        }
+    }
+    if (isFontWeightLabel(label) && value === 'Bold') {
+        return _jsx(Box, { className: "twa:font-bold", children: `${label}: ${value}` });
+    }
+    if (isFontStyleLabel(label) && value === 'Italic') {
+        return _jsx(Box, { className: "twa:italic", children: `${label}: ${value}` });
+    }
+    return `${label}: ${value}`;
+};
+export const parseSummaryLabelValueString = (item) => {
+    const colonIndex = item.indexOf(': ');
+    if (colonIndex <= 0) {
+        return null;
+    }
+    return {
+        label: item.slice(0, colonIndex),
+        value: item.slice(colonIndex + 2),
+    };
+};
+export const renderSummaryStringTagContent = (item) => {
+    const parsed = parseSummaryLabelValueString(item);
+    if (!parsed) {
+        return item;
+    }
+    return renderSummaryLabelValueTagContent(parsed.label, parsed.value);
+};
+export const renderSummaryStringTags = (items) => (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: renderSummaryStringTagContent(item) }, item))) }));
+export const summaryStringsToTagContents = (items) => items.map((item) => renderSummaryStringTagContent(item));
+export const renderSummaryLabelValueTags = (items) => (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value, icon }) => (_jsx(Tag, { children: renderSummaryLabelValueTagContent(label, value, icon) }, `${label}-${value}`))) }));

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export declare const WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = "twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1";
+export declare const getWizardTypeSelectionGridColumns: (choiceCount: number) => 2 | 3;
+export type WizardTypeSelectionCardProps = {
+    label: string;
+    description?: string;
+    selected: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string;
+    dataName: string;
+    minHeightClassName?: string;
+    onSelect: () => void;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare const WizardTypeSelectionCard: React.FunctionComponent<WizardTypeSelectionCardProps>;
+export type WizardTypeSelectionSectionProps = {
+    headingId: string;
+    title: string;
+    intro: React.ReactNode;
+    columns: 2 | 3;
+    dataName?: string;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const WizardTypeSelectionSection: React.FunctionComponent<WizardTypeSelectionSectionProps>;
+export type WizardNameFieldSectionProps = {
+    value: string;
+    onChange: (event: React.SyntheticEvent) => void;
+    inputDataName?: string;
+    placeholder?: string;
+};
+export declare const WizardNameFieldSection: React.FunctionComponent<WizardNameFieldSectionProps>;
+export declare const WizardTypeSelectionPreviewFrame: React.FunctionComponent<React.PropsWithChildren>;

package/src/View/Wizard/WizardTypeSelection.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Input from '../../components/Input';
+import { Box } from '../../components/Flex';
+import { Card } from '../../components/Card';
+import { cn } from '../../lib/utils';
+export const WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = 'twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1';
+export const getWizardTypeSelectionGridColumns = (choiceCount) => choiceCount === 4 ? 2 : 3;
+export const WizardTypeSelectionCard = ({ label, description, selected, disabled, disabledTooltip, dataName, minHeightClassName = 'twa:min-h-[108px]', onSelect, children, footer, }) => {
+    const handleActivate = () => {
+        if (!disabled) {
+            onSelect();
+        }
+    };
+    return (_jsxs(Box, { role: "radio", tabIndex: disabled ? -1 : 0, "aria-checked": selected, "aria-disabled": disabled, "data-name": dataName, className: cn('ab-WizardTypeSelectionCard group twa:relative twa:h-full twa:rounded-standard twa:border twa:border-primarydark/32 twa:bg-card twa:text-card-foreground twa:outline-none twa:transition-colors twa:focus-visible:ring-2 twa:focus-visible:ring-accent', minHeightClassName, disabled
+            ? 'twa:cursor-not-allowed twa:opacity-60'
+            : 'twa:cursor-pointer hover:twa:border-accent/55 hover:twa:bg-accent/5', selected &&
+            'twa:after:pointer-events-none twa:after:absolute twa:after:inset-0 twa:after:rounded-standard twa:after:border-2 twa:after:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:after:bg-[var(--ab-cmp-wizard-type-selection-card__selected-overlay)]'), onClick: handleActivate, onKeyDown: (event) => {
+            if (disabled) {
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelect();
+            }
+        }, children: [_jsx(Box, { "aria-hidden": true, className: cn('twa:pointer-events-none twa:absolute twa:top-2.5 twa:right-2.5 twa:z-10 twa:size-4 twa:rounded-full twa:border-2 twa:transition-colors', selected
+                    ? 'twa:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-border)]'
+                    : 'twa:border-primarydark/35 twa:bg-base group-hover:twa:border-accent/55'), children: selected ? (_jsx(Box, { className: "twa:absolute twa:inset-0 twa:m-auto twa:size-1.5 twa:rounded-full twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-indicator-inner)]" })) : null }), _jsxs(Card, { shadow: false, style: { backgroundColor: 'transparent' }, className: "twa:flex twa:h-full twa:flex-col twa:justify-between twa:p-3 twa:pr-7", gap: 0, children: [_jsx(Box, { className: "twa:font-medium", children: label }), children, description || disabledTooltip ? (_jsxs(Box, { children: [description ? (_jsx(Box, { className: "twa:text-xs twa:leading-snug twa:opacity-70", children: description })) : null, disabled && disabledTooltip ? (_jsx(Box, { className: "twa:mt-1 twa:text-1 twa:leading-snug twa:italic twa:opacity-80", children: disabledTooltip })) : null] })) : null, footer] })] }));
+};
+export const WizardTypeSelectionSection = ({ headingId, title, intro, columns, dataName, className, children }) => (_jsxs(Card, { shadow: false, gap: 1, className: cn('twa:flex-1 twa:min-h-0', className), children: [_jsxs(Card.Title, { gap: 1, border: false, className: "twa:flex-col twa:items-start twa:px-1 twa:pb-1", children: [_jsx(Box, { id: headingId, className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:mt-1.5 twa:text-xs twa:font-normal twa:opacity-70", children: intro })] }), _jsx(Card.Body, { className: "twa:min-h-0 twa:overflow-y-auto twa:p-1 twa:pt-0", children: _jsx(Box, { "data-name": dataName, className: cn('twa:grid twa:gap-2', columns === 2 ? 'twa:grid-cols-2' : 'twa:grid-cols-3'), role: "radiogroup", "aria-labelledby": headingId, children: children }) })] }));
+export const WizardNameFieldSection = ({ value, onChange, inputDataName = 'wizard-name', placeholder = 'Enter Name', }) => (_jsxs(Card, { shadow: false, gap: 1, className: "twa:bg-card twa:text-card-foreground", children: [_jsx(Card.Title, { gap: 1, border: false, className: "twa:px-1 twa:pb-1", children: _jsx(Box, { className: "twa:font-medium", children: "Name" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:w-full twa:max-w-[420px]", "data-name": inputDataName, onChange: onChange, placeholder: placeholder, value: value }) })] }));
+export const WizardTypeSelectionPreviewFrame = ({ children, }) => (_jsx(Box, { "aria-hidden": true, className: WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS, children: children }));

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../types';
+export declare const TableRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const TableRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;