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

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../../components/Flex';
+import { Badge } from '../../Components/Badge';
+import { RatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS } from '../../Wizard/WizardTypeSelection';
+const THUMBNAIL_FRAME_CLASS = WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS;
+const THUMBNAIL_SVG_CLASS = 'twa:block twa:h-[22px] twa:w-full';
+const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
+const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 30%, transparent)';
+const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
+const flagEmoji = (countryCodeAlpha2) => {
+    const cc = countryCodeAlpha2.toUpperCase();
+    if (cc.length !== 2) {
+        return cc;
+    }
+    const regionalIndicatorBase = 0x1f1a5;
+    return String.fromCodePoint(regionalIndicatorBase + cc.charCodeAt(0), regionalIndicatorBase + cc.charCodeAt(1));
+};
+const BadgeThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:justify-start`, children: _jsxs("div", { className: "ab-Badge__wrapper ab-Badge__wrapper--truncate", style: { gap: 4 }, children: [_jsx(Badge, { pillStyle: { BackColor: '#e8f5e9', ForeColor: '#2e7d32' }, shape: "Pill", density: "Compact", children: "Buy" }), _jsx(Badge, { pillStyle: { BackColor: '#ffebee', ForeColor: '#c62828' }, shape: "Pill", density: "Compact", children: "Sell" })] }) }));
+const IconThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, style: { gap: 10 }, children: ['US', 'GB', 'FR'].map((code) => (_jsx("span", { className: "ab-IconStyle__glyph", style: {
+            fontSize: 18,
+            lineHeight: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: flagEmoji(code) }, code))) }));
+const RatingThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(RatingPreview, { rating: { Max: 5, AllowHalf: true }, value: 3.5 }) }));
+const GradientThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:gap-1 twa:px-1`, children: [
+        { label: '42', background: '#63be7b' },
+        { label: '68', background: '#ffeb84' },
+        { label: '91', background: '#f8696b' },
+    ].map((cell) => (_jsx(Box, { className: "twa:flex-1 twa:rounded-sm twa:px-1 twa:py-0.5 twa:text-center twa:text-2 twa:leading-tight", style: { background: cell.background, color: '#1a1a1a' }, children: cell.label }, cell.label))) }));
+const PercentBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(Box, { className: "twa:relative twa:h-[6px] twa:w-full twa:rounded-sm", style: { background: DEFAULT_TRACK }, children: _jsx(Box, { className: "twa:absolute twa:top-0 twa:h-full twa:rounded-sm", style: { left: '8%', width: '62%', background: DEFAULT_BAR } }) }) }));
+const BulletThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "2", width: "33", height: "18", fill: "#f8696b", opacity: "0.45" }), _jsx("rect", { x: "33", y: "2", width: "34", height: "18", fill: "#ffeb84", opacity: "0.45" }), _jsx("rect", { x: "67", y: "2", width: "33", height: "18", fill: "#63be7b", opacity: "0.45" }), _jsx("rect", { x: "4", y: "7", width: "52", height: "8", rx: "1", fill: DEFAULT_BAR }), _jsx("line", { x1: "78", y1: "3", x2: "78", y2: "19", stroke: DEFAULT_MARKER, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
+const RangeBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "0", width: "100", height: "22", fill: "transparent" }), _jsx("rect", { x: "2", y: "8", width: "96", height: "6", rx: "1", fill: DEFAULT_TRACK }), _jsx("line", { x1: "38", y1: "4", x2: "38", y2: "18", stroke: DEFAULT_MARKER, strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "72,4 82,11 72,18", fill: DEFAULT_BAR })] }) }));
+const SparklineThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("polyline", { points: "0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6", fill: "none", stroke: DEFAULT_BAR, strokeWidth: "1.75", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "0,22 0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6 100,22", fill: DEFAULT_BAR, opacity: "0.15" })] }) }));
+const THUMBNAIL_BY_TYPE = {
+    badge: BadgeThumbnail,
+    icon: IconThumbnail,
+    rating: RatingThumbnail,
+    gradient: GradientThumbnail,
+    percent: PercentBarThumbnail,
+    bullet: BulletThumbnail,
+    rangeBar: RangeBarThumbnail,
+    sparkline: SparklineThumbnail,
+};
+export const StyledColumnTypeThumbnail = ({ type }) => {
+    const Thumbnail = THUMBNAIL_BY_TYPE[type];
+    return (_jsx(Box, { "aria-hidden": true, className: "twa:w-full", children: _jsx(Thumbnail, {}) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizard.d.ts

@@ -4,4 +4,6 @@ import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
     isNew: boolean;
 }
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+export declare const getStyledColumnEditDefaultSectionName: (styledColumn: StyledColumn) => string;
 export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => React.JSX.Element;

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

@@ -53,10 +53,33 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+export const getStyledColumnEditDefaultSectionName = (styledColumn) => {
+    if (styledColumn.BadgeStyle) {
+        return 'Badges';
+    }
+    if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.BulletChartStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.RangeBarStyle) {
+        return 'Style';
+    }
+    if (styledColumn.IconStyle) {
+        return 'Mappings';
+    }
+    return 'Style';
+};
 export const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
-    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
+    const hasExistingData = Boolean(data);
+    const isEdit = hasExistingData && props.popupParams?.action !== 'New';
+    const defaultCurrentSectionName = props.defaultCurrentSectionName ??
+        popupDefaultCurrentSectionName ??
+        (isEdit ? getStyledColumnEditDefaultSectionName(data) : undefined);
     const allStyledColumns = useSelector((state) => state.StyledColumn?.StyledColumns ?? []);
     const [styledColumn, setStyledColumn] = useState(() => {
         if (data) {
@@ -111,7 +134,7 @@ export const StyledColumnWizard = (props) => {
     }
     else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
         specificSteps.push({
-            details: 'Define the Cell Ranges or a Column Comparison',
+            details: 'Select type of Cell Range and configure contents',
             renderSummary: renderStyledColumnRangesSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangesSection, { onChange: setStyledColumn }) })),
             title: 'Ranges',
@@ -269,9 +292,7 @@ export const StyledColumnWizard = (props) => {
                 isValid: isValidStyledColumnScope,
                 renderSummary: renderStyledColumnScopeSummary,
                 details: 'Select the Column and Rows where Style should render',
-                render: () => {
-                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn }) }));
-                },
+                render: () => (_jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn })),
                 title: 'Scope',
             },
             ...specificSteps,

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

@@ -9,7 +9,6 @@ import { RangesComponent } from '../../Components/RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
 import { getGraySwatchColor } from '../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import DropdownButton from '../../../components/DropdownButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -18,6 +17,7 @@ import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/
 import { SingleSelect } from '../../../components/NewSelect';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 // ---------------------------------------------------------------------------
 // Summary helpers
@@ -135,7 +135,7 @@ export const renderStyledColumnBulletRangesSummary = (data) => {
         return _jsx(Tag, { children: "No bands defined" });
     }
     const tagItems = getStyledColumnBulletRangesViewValues(data);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
@@ -151,7 +151,7 @@ export const renderStyledColumnBulletStyleSummary = (data) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Style Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
@@ -373,20 +373,11 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display text in the cell (and if so, then position and font))" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(DropdownButton, { disabled: cellTextDisabled, columns: ['label'], items: [
-                                                {
-                                                    label: 'Above Bar',
-                                                    onClick: () => handleCellTextPositionChange('Above'),
-                                                },
-                                                {
-                                                    label: 'Below Bar',
-                                                    onClick: () => handleCellTextPositionChange('Below'),
-                                                },
-                                                {
-                                                    label: 'Merged',
-                                                    onClick: () => handleCellTextPositionChange('Merged'),
-                                                },
-                                            ], children: bullet.CellTextPosition ?? 'Below' }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display text in the cell (and if so, then position and font))" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: cellTextDisabled, value: bullet.CellTextPosition ?? 'Below', onValueChange: (v) => handleCellTextPositionChange(v), items: [
+                                                    { value: 'Above', label: 'Above Bar' },
+                                                    { value: 'Below', label: 'Below Bar' },
+                                                    { value: 'Merged', label: 'Merged' },
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -10,6 +10,7 @@ import { NumberInput } from '../../../components/Input/NumberInput';
 import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumnGradientHelper';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
@@ -51,7 +52,7 @@ export const renderStyledColumnGradientStyleSummary = (data) => {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
     const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 export const StyledColumnWizardGradientSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -5,17 +5,22 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { CheckBox } from '../../../components/CheckBox';
 import SimpleButton from '../../../components/SimpleButton';
+import { ButtonNew } from '../../Components/Buttons/ButtonNew';
 import { SingleSelect } from '../../../components/NewSelect';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import Input from '../../../components/Input';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
+import { IconSelectorPanel } from '../../../components/IconSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
+import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
 import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { wizardSelectionSimpleButtonProps } from '../../../Utilities/wizardSelection';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -125,7 +130,7 @@ export const renderStyledColumnIconMappingsSummary = (data) => {
     }
     const tagItems = getStyledColumnIconMappingsViewValues(data);
     const previewMappings = resolveIconStyleMappingsForSummaryPreview(ic);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), renderMappingsPreview(previewMappings)] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), renderMappingsPreview(previewMappings)] }));
 };
 export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
 /** Style step summary (size, text, tooltip, font / cell). */
@@ -141,7 +146,7 @@ export const renderStyledColumnIconStyleSummary = (data) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Style Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -172,11 +177,7 @@ export const StyledColumnWizardIconSection = (props) => {
     const iconStyle = data.IconStyle ?? {};
     const mappings = iconStyle.Mappings ?? [];
     const disabled = !data.ColumnId;
-    // Which row currently has its inline icon editor expanded. We expand
-    // a single row at a time to keep the table tidy and to avoid having
-    // multiple editors fighting for screen space.
-    const [editingRow, setEditingRow] = React.useState(null);
-    const [fallbackIconEditing, setFallbackIconEditing] = React.useState(false);
+    const [autoOpenPickerIndex, setAutoOpenPickerIndex] = React.useState(null);
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -236,9 +237,7 @@ export const StyledColumnWizardIconSection = (props) => {
     };
     const removeMapping = (index) => {
         setMappings(mappings.filter((_, i) => i !== index));
-        // Close any open editor — indexes shift after a delete and we don't
-        // want the wrong row to suddenly appear expanded.
-        setEditingRow(null);
+        setAutoOpenPickerIndex(null);
     };
     const addMapping = () => {
         const next = [
@@ -249,8 +248,7 @@ export const StyledColumnWizardIconSection = (props) => {
             },
         ];
         setMappings(next);
-        // Auto-expand the newly added row so the user can edit straight away.
-        setEditingRow(next.length - 1);
+        setAutoOpenPickerIndex(next.length - 1);
     };
     // -----------------------------------------------------------------------
     // CellText helpers
@@ -276,24 +274,24 @@ export const StyledColumnWizardIconSection = (props) => {
         const presetMappingsPreview = iconStyle.Preset
             ? getIconStylePresetMappings(iconStyle.Preset)
             : [];
-        return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', _jsx("strong", { children: "Custom mappings" }), " below"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Select Preset:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => (_jsx(SimpleButton, { variant: iconStyle.Preset === p ? 'raised' : 'outlined', tone: iconStyle.Preset === p ? 'accent' : 'none', onClick: () => applyPreset(p), children: ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && (_jsx(SimpleButton, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && (_jsx(FormRow, { label: "Active:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [_jsxs(Box, { className: "twa:text-xs twa:opacity-70", children: [ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Mappings" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
+        return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', _jsx("strong", { children: "Custom mappings" }), " below"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Select Preset:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => (_jsx(SimpleButton, { ...wizardSelectionSimpleButtonProps(iconStyle.Preset === p), onClick: () => applyPreset(p), children: ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && (_jsx(SimpleButton, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && (_jsx(FormRow, { label: "Active:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [_jsxs(Box, { className: "twa:text-xs twa:opacity-70", children: [ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Mappings" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
                                         ? 'Add any mappings that are not present in the selected preset'
                                         : 'Add custom mappings entries (icon, key and description)' })] }), _jsxs(Card.Body, { children: [mappings.length === 0 ? (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px] twa:mb-2", children: iconStyle.Preset
                                         ? 'No custom mappings — the preset above is being used as-is'
-                                        : 'No mappings applied - select a preset above or click "Add Mapping" to define your own' })) : (_jsxs(Box, { className: "twa:max-w-[720px]", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), _jsx(Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => {
-                                            const isEditing = editingRow === i;
-                                            return (_jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", className: 'twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]' +
-                                                            (isEditing ? ' twa:bg-[var(--ab-color-primarylight)]' : ''), children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { type: "button", variant: "raised", tone: isEditing ? 'accent' : 'none', className: "twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center", tooltip: isEditing ? 'Close icon editor' : 'Click to edit icon', onClick: () => setEditingRow(isEditing ? null : i), children: previewIcon(m.Icon) }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
-                                                                        Description: e.target.value || undefined,
-                                                                    }), placeholder: "Tooltip label (optional)" }) }), _jsx(Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }), isEditing && (_jsxs(Box, { className: "twa:ml-[52px] twa:mr-2 twa:mb-2 twa:p-3 twa:rounded twa:bg-[var(--ab-color-surface)] twa:border twa:border-border", children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-between twa:mb-2", children: [_jsx(Box, { className: "twa:font-semibold twa:text-xs", children: "Edit icon" }), _jsx(SimpleButton, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setEditingRow(null), children: "Done" })] }), _jsx(IconSpecEditorFields, { value: m.Icon, onChange: (next) => updateMapping(i, { Icon: next }) })] }))] }, i));
-                                        })] })), _jsx(Box, { className: "twa:mt-2", children: _jsx(SimpleButton, { variant: "raised", icon: "plus", onClick: addMapping, children: "Add Mapping" }) })] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How keys are compared to cell values, and what to render when no mapping matches" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Match Mode:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.MatchMode ?? 'Exact', onValueChange: (v) => update({ MatchMode: v }), items: [
-                                                    { value: 'Exact', label: 'Exact (===)' },
+                                        : 'No mappings applied - select a preset above or click "Add Mapping" to define your own' })) : (_jsxs(Box, { className: "twa:max-w-[720px]", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), _jsx(Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: _jsx(IconPickerButton, { value: m.Icon, defaultOpen: autoOpenPickerIndex === i, onOpenChange: (open) => {
+                                                            if (!open && autoOpenPickerIndex === i) {
+                                                                setAutoOpenPickerIndex(null);
+                                                            }
+                                                        }, onChange: (next) => updateMapping(i, { Icon: next }) }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
+                                                            Description: e.target.value || undefined,
+                                                        }), placeholder: "Tooltip label (optional)" }) }), _jsx(Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }, i)))] })), _jsx(Box, { className: "twa:mt-2", children: _jsx(ButtonNew, { onClick: addMapping, children: "Add Mapping" }) })] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How keys are compared to cell values, and what to render when no mapping matches" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Match Mode:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.MatchMode ?? 'Exact', onValueChange: (v) => update({ MatchMode: v }), items: [
+                                                    { value: 'Exact', label: 'Exact Match Required' },
                                                     { value: 'CaseInsensitive', label: 'Case-insensitive (strings)' },
                                                 ] }) }) }), _jsx(FormRow, { label: "Fallback:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.Fallback ?? 'Hide', onValueChange: (v) => update({ Fallback: v }), items: [
                                                     { value: 'Hide', label: 'Show No Value' },
                                                     { value: 'ShowText', label: 'Show Raw Value' },
                                                     { value: 'Icon', label: 'Show Fallback Icon' },
-                                                ] }) }) }), iconStyle.Fallback === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(SimpleButton, { type: "button", variant: "raised", tone: fallbackIconEditing ? 'accent' : 'none', className: "twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center", tooltip: fallbackIconEditing ? 'Close icon editor' : 'Click to edit icon', onClick: () => setFallbackIconEditing(!fallbackIconEditing), children: previewIcon(iconStyle.FallbackIcon) }), fallbackIconEditing && (_jsx(SimpleButton, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setFallbackIconEditing(false), children: "Done" }))] }), fallbackIconEditing && (_jsx(Box, { className: "twa:p-3 twa:rounded twa:bg-[var(--ab-color-surface)] twa:border twa:border-border twa:max-w-[320px]", children: _jsx(IconSpecEditorFields, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) }))] }) })] })] }));
+                                                ] }) }) }), iconStyle.Fallback === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsx(IconPickerButton, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) })] })] }));
     }
     // ----- Style variant (wizard step title: "Style") ------------------------
     const cellText = iconStyle.CellText ?? [];
@@ -316,7 +314,30 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Below', label: 'Below' },
                                                 ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), _jsx(StyledColumnIconPreviewCard, { data: data })] }));
 };
+// ---------------------------------------------------------------------------
+// Icon picker — click-to-open popover (closes on outside click or system pick)
+// ---------------------------------------------------------------------------
+const ICON_KIND_OPTIONS = [
+    { value: 'Emoji', label: 'Emoji' },
+    { value: 'System', label: 'Built-in' },
+    { value: 'Url', label: 'Image URL' },
+];
+const IconPickerButton = (props) => {
+    const [open, setOpen] = React.useState(props.defaultOpen ?? false);
+    React.useEffect(() => {
+        if (props.defaultOpen) {
+            setOpen(true);
+        }
+    }, [props.defaultOpen]);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        props.onOpenChange?.(next);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { nativeButton: true, render: _jsx(SimpleButton, { type: "button", tooltip: "Choose icon", ...wizardSelectionSimpleButtonProps(open, 'twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center'), children: previewIcon(props.value) }) }), _jsx(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, className: "twa:!w-[300px] twa:max-w-[300px] twa:p-3 twa:gap-0", children: _jsx(IconSpecEditorFields, { value: props.value, onChange: props.onChange, onSystemIconSelected: () => handleOpenChange(false) }) })] }));
+};
 const IconSpecEditorFields = (props) => {
+    const adaptable = useAdaptable();
+    const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
     const kind = detectIconKind(props.value);
     const [pendingKind, setPendingKind] = React.useState(null);
     const prevValueRef = React.useRef(props.value);
@@ -344,13 +365,10 @@ const IconSpecEditorFields = (props) => {
         ? props.value.name
         : undefined;
     const urlSrc = isObject && 'src' in props.value ? props.value.src : '';
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:min-w-[220px]", children: [_jsx(SingleSelect, { className: "twa:w-full", value: effectiveKind, onValueChange: (v) => onKindChange(v), items: [
-                    { value: 'Emoji', label: 'Emoji / text' },
-                    { value: 'System', label: 'System' },
-                    { value: 'Url', label: 'Image URL' },
-                ] }), effectiveKind === 'Emoji' && (_jsx(Input, { className: "twa:w-full", value: typeof props.value === 'string' ? props.value : '', onChange: (e) => props.onChange(e.target.value), placeholder: "\uD83C\uDDFA\uD83C\uDDF8  $  \u2B06" })), effectiveKind === 'System' && (_jsx(AdaptableIconSelector, { clearable: false, value: systemName, onChange: (iconName) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:w-full", children: [_jsx(Box, { className: "twa:grid twa:grid-cols-3 twa:gap-1 twa:w-full", role: "tablist", "aria-label": "Icon type", children: ICON_KIND_OPTIONS.map((option) => (_jsx(SimpleButton, { type: "button", role: "tab", "aria-selected": effectiveKind === option.value, ...wizardSelectionSimpleButtonProps(effectiveKind === option.value, 'twa:w-full twa:min-h-[32px] twa:h-8 twa:px-1 twa:text-xs twa:leading-tight'), onClick: () => onKindChange(option.value), children: option.label }, option.value))) }), effectiveKind === 'Emoji' && (_jsx(Input, { className: "twa:w-full", value: typeof props.value === 'string' ? props.value : '', onChange: (e) => props.onChange(e.target.value), placeholder: "\uD83C\uDDFA\uD83C\uDDF8  $  \u2B06" })), effectiveKind === 'System' && (_jsx(IconSelectorPanel, { className: "twa:p-0", showTitle: false, customIcons: customIcons, value: systemName, onChange: (iconName) => {
                     if (iconName) {
                         props.onChange({ name: iconName });
+                        props.onSystemIconSelected?.();
                     }
                 } })), effectiveKind === 'Url' && (_jsx(Input, { className: "twa:w-full", value: urlSrc, onChange: (e) => props.onChange({ src: e.target.value }), placeholder: "https://\u2026" }))] }));
 };