@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -1,6 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
  * should grow from.
@@ -41,58 +42,6 @@ const columnComparisonUsesCentredAxis = (origin) => {
     }
     return o === 'Zero' || o === 'Auto';
 };
-/**
- * Linear (non-comparison) mode: bar grows from an interior point of the scale
- * (so positives / negatives can diverge left and right).
- */
-const linearScaleUsesCentredAxis = (percentBarStyle, cellValue, min, max) => {
-    const origin = percentBarStyle.Origin ?? 'Auto';
-    if (origin === 'Zero') {
-        return true;
-    }
-    if (origin === 'Min') {
-        return false;
-    }
-    if (typeof origin === 'number') {
-        if (max === min) {
-            return false;
-        }
-        const f = toFraction(origin, min, max);
-        return f > 0 && f < 1;
-    }
-    // Auto — same condition as resolveOrigin using 0 as the pivot.
-    return min < 0 || max < 0 || cellValue < 0;
-};
-const resolveCellTextAlignCss = (percentBarStyle, args) => {
-    const mode = percentBarStyle.CellTextAlignment;
-    if (mode == undefined) {
-        return undefined;
-    }
-    if (mode === 'Left') {
-        return 'left';
-    }
-    if (mode === 'Right') {
-        return 'right';
-    }
-    if (mode === 'Center') {
-        return 'center';
-    }
-    // Auto
-    const centred = args.hasColumnComparison
-        ? columnComparisonUsesCentredAxis(percentBarStyle.Origin)
-        : linearScaleUsesCentredAxis(percentBarStyle, args.numericValue, args.min, args.max);
-    if (!centred) {
-        return undefined;
-    }
-    const v = args.hasColumnComparison ? args.percentageValue : args.numericValue;
-    if (v > 0) {
-        return 'right';
-    }
-    if (v < 0) {
-        return 'left';
-    }
-    return 'center';
-};
 export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
@@ -191,11 +140,14 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 }
             }
             // ----- Build the DOM -------------------------------------------------
-            const hasCellText = percentBarStyle.CellText && percentBarStyle.CellText.length > 0;
-            const isTextPositionMerged = percentBarStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = percentBarStyle.CellTextProperties;
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
+            // Wrapper always fills the cell. The bar is the flex-grow child so it
+            // claims whatever space the (compact) text rows leave, with a small
+            // floor to stay visible even on short rows.
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-PercentBar__wrapper';
-            this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             this.eGui.style.display = 'flex';
             this.eGui.style.flexDirection = 'column';
             this.eGui.style.justifyContent = 'center';
@@ -208,7 +160,10 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (percentBarStyle.BackColor) {
                 barEl.style.background = percentBarStyle.BackColor;
             }
-            barEl.style.flex = '1';
+            barEl.style.flex = '1 1 0';
+            // Floor so the bar can't be squeezed out of existence when both
+            // `Above` and `Below` bands are populated on a short row.
+            barEl.style.minHeight = '6px';
             // Render the inside bar whenever a colour has been resolved, even at
             // 0% width. A zero-width div is visually identical to skipping the
             // element but keeps the DOM consistent so tests / tooling can still
@@ -229,47 +184,20 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             this.eGui.append(barEl);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-PercentBar__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (percentBarStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
-                }
-                if (percentBarStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${percentageValue.toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                const textAlignCss = resolveCellTextAlignCss(percentBarStyle, {
-                    numericValue,
-                    percentageValue,
-                    min,
-                    max,
-                    hasColumnComparison: !!percentBarStyle.ColumnComparison,
+                // Coerce to string: when no `valueFormatter` is set on the column,
+                // `params.formatValue` returns the raw value (a number for numeric
+                // columns), which then propagates through the helpers as a non-string
+                // and breaks string-only operations (e.g. `.length` checks).
+                const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
+                mountBarStyleCellText({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: barEl,
+                    textClassName: 'ab-PercentBar__text',
+                    cellTextProperties,
+                    labels,
+                    mergedPointerEventsNone: false,
                 });
-                if (textAlignCss) {
-                    textEl.style.textAlign = textAlignCss;
-                }
-                switch (percentBarStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        // Centre vertically without knowing the row height
-                        textEl.style.top = '50%';
-                        textEl.style.transform = 'translateY(-50%)';
-                        textEl.style.left = '0';
-                        textEl.style.right = '0';
-                        textEl.style.paddingLeft = '5px';
-                        textEl.style.paddingRight = '5px';
-                        barEl.append(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.append(textEl);
-                        break;
-                }
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/RangeBarRenderer.js

@@ -1,6 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_TRACK_HEIGHT = 4;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -46,8 +47,7 @@ const normaliseMarker = (override, defaults) => {
     return {
         Shape: shape,
         Color: override?.Color ?? defaults.Color,
-        Size: override?.Size ??
-            (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
+        Size: override?.Size ?? (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
     };
 };
 /**
@@ -96,8 +96,9 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
                 return;
             }
-            const referenceValue = rangeStyle.Reference != undefined
-                ? resolveBoundValue(rangeStyle.Reference, abColumn, params.node, api)
+            const referenceProperties = rangeStyle.Reference;
+            const referenceValue = referenceProperties?.Value != undefined
+                ? resolveBoundValue(referenceProperties.Value, abColumn, params.node, api)
                 : undefined;
             // Markers - resolve user overrides against per-marker defaults.
             const valueMarker = normaliseMarker(rangeStyle.Marker, {
@@ -105,21 +106,24 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 Color: DEFAULT_VALUE_MARKER_COLOR,
                 Size: DEFAULT_VALUE_MARKER_SIZE,
             });
-            const referenceMarker = normaliseMarker(rangeStyle.ReferenceMarker, {
+            const referenceMarker = normaliseMarker(referenceProperties?.Marker, {
                 Shape: 'Line',
                 Color: DEFAULT_REFERENCE_MARKER_COLOR,
                 Size: DEFAULT_LINE_MARKER_THICKNESS,
             });
             // Out-of-range handling
-            const outOfRangeMode = rangeStyle.OutOfRangeMode ?? 'Clamp';
+            const outOfRangeProperties = rangeStyle.OutOfRange;
+            const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
+            const outOfRangeColor = outOfRangeProperties?.Color;
             const isOutOfRange = numericValue < min || numericValue > max;
             const hideValueMarker = isOutOfRange && outOfRangeMode === 'Hide';
             // Layout
             const isVertical = rangeStyle.Orientation === 'Vertical';
-            const trackThickness = rangeStyle.TrackHeight ?? DEFAULT_TRACK_HEIGHT;
+            const trackProperties = rangeStyle.Track;
+            const trackThickness = trackProperties?.Height ?? DEFAULT_TRACK_HEIGHT;
             const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
-            const hasCellText = rangeStyle.CellText && rangeStyle.CellText.length > 0;
-            const isTextMerged = rangeStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = rangeStyle.CellTextProperties;
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 fraction onto the long-axis viewBox (0..100). Vertical
             // orientation inverts so that lower values appear at the bottom of
             // the cell, matching user expectation.
@@ -132,7 +136,7 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             this.eGui.style.alignItems = isVertical ? 'center' : 'stretch';
             this.eGui.style.justifyContent = 'center';
             this.eGui.style.position = 'relative';
-            this.eGui.style.height = hasCellText && !isTextMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             const svg = document.createElementNS(SVG_NS, 'svg');
             svg.setAttribute('class', 'ab-RangeBar__svg');
             svg.setAttribute('preserveAspectRatio', 'none');
@@ -191,11 +195,11 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             const trackCrossOffset = (bandThickness - trackThickness) / 2;
             const track = document.createElementNS(SVG_NS, 'rect');
             setRectAxes(track, 0, 100, trackCrossOffset, trackThickness);
-            track.setAttribute('fill', rangeStyle.TrackColor ?? DEFAULT_TRACK_COLOR);
+            track.setAttribute('fill', trackProperties?.Color ?? DEFAULT_TRACK_COLOR);
             track.setAttribute('class', 'ab-RangeBar__track');
             // Slight transparency by default so the track doesn't drown out the
-            // band colours; honour explicit user TrackColor as-is.
-            if (rangeStyle.TrackColor == undefined) {
+            // band colours; honour explicit user Track.Color as-is.
+            if (trackProperties?.Color == undefined) {
                 // With no bands the cell background is often plain — the same muted
                 // foreground at 0.35 opacity can disappear (only the accent marker reads).
                 // Bands provide contrast underneath, so keep the subtle blend there.
@@ -224,8 +228,8 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     valueFraction = toFraction(numericValue, min, max);
                 }
                 const valueCoord = valueAxisCoord(valueFraction);
-                const effectiveMarker = isOutOfRange && outOfRangeMode === 'Clamp' && rangeStyle.OutOfRangeColor
-                    ? { ...valueMarker, Color: rangeStyle.OutOfRangeColor }
+                const effectiveMarker = isOutOfRange && outOfRangeMode === 'Clamp' && outOfRangeColor
+                    ? { ...valueMarker, Color: outOfRangeColor }
                     : valueMarker;
                 const markerEl = createMarkerElement(effectiveMarker, valueCoord, bandThickness, isVertical);
                 if (markerEl) {
@@ -233,40 +237,38 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     svg.appendChild(markerEl);
                 }
             }
-            this.eGui.appendChild(svg);
+            // Wrap the SVG in a positioned container so a `Merged` text row sits
+            // centred on the *bar*, not on the cell — see BulletChartRenderer for
+            // the same fix and Percent Bar for the matching behaviour via its
+            // `barEl`.
+            const svgContainer = document.createElement('div');
+            svgContainer.style.position = 'relative';
+            svgContainer.style.display = 'flex';
+            svgContainer.style.alignItems = 'center';
+            svgContainer.style.justifyContent = 'center';
+            if (isVertical) {
+                svgContainer.style.flex = '1 1 auto';
+                svgContainer.style.minHeight = '0';
+            }
+            else {
+                svgContainer.style.flex = '0 0 auto';
+            }
+            svgContainer.appendChild(svg);
+            this.eGui.appendChild(svgContainer);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-RangeBar__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (rangeStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(numericValue) ?? String(numericValue));
-                }
-                if (rangeStyle.CellText.includes('PercentageValue')) {
-                    const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
-                    parts.push(`${pct.toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                switch (rangeStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        textEl.style.top = '50%';
-                        textEl.style.transform = 'translateY(-50%)';
-                        textEl.style.left = '0';
-                        textEl.style.right = '0';
-                        textEl.style.paddingLeft = '5px';
-                        textEl.style.paddingRight = '5px';
-                        textEl.style.pointerEvents = 'none';
-                        this.eGui.appendChild(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.appendChild(textEl);
-                        break;
-                }
+                const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
+                // See PercentBarRenderer: `params.formatValue` on a column without a
+                // `valueFormatter` returns the raw value (a number here), so coerce
+                // to string before it flows into the helpers.
+                const formattedCellValue = String(params.formatValue?.(numericValue) ?? numericValue);
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
+                mountBarStyleCellText({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: svgContainer,
+                    textClassName: 'ab-RangeBar__text',
+                    cellTextProperties,
+                    labels,
+                });
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -1,6 +1,6 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_MAX = 5;
 const DEFAULT_SIZE = 14;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -3,7 +3,7 @@ import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableCon
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { flattenAdaptableFormFields, isAdaptableFormFieldDisabled, isAdaptableFormFieldGroup, isAdaptableFormFieldGroupHidden, isAdaptableFormFieldHidden, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
+import { flattenAdaptableFormFields, isAdaptableFormFieldDisabled, isAdaptableFormFieldGroup, isAdaptableFormFieldGroupHidden, isAdaptableFormFieldHidden, resolveSelectPlaceholder, resolveSelectValueAfterClear, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
 import FormLayout, { FormRow } from '../FormLayout';
 import Input from '../Input';
 import { AdaptableButtonView, } from '../../View/Components/AdaptableButton';
@@ -204,10 +204,12 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                 break;
             }
             case 'select': {
-                const items = resolveOptions(field).map((item) => ({
+                const optionItems = resolveOptions(field);
+                const items = optionItems.map((item) => ({
                     value: item.value,
                     label: item.label,
                 }));
+                const selectPlaceholder = resolveSelectPlaceholder(field, optionItems);
                 // The underlying SingleCombobox / MultiCombobox manage their own
                 // popup-based focus; we wrap them in a labelled `role="group"` so
                 // assistive tech announces "<label> group" when focus enters and
@@ -225,10 +227,10 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                     // anything else (e.g. legacy string defaults) to [] so the
                     // underlying combobox never receives a non-array value.
                     const selected = Array.isArray(value) ? value : [];
-                    control = (_jsx(Box, { ...groupProps, children: _jsx(MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: field.placeholder }) }));
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: selectPlaceholder }) }));
                 }
                 else {
-                    control = (_jsx(Box, { ...groupProps, children: _jsx(SingleCombobox, { items: items, onValueChange: (newValue) => setFieldValue(field.name, newValue), value: value, disabled: isDisabled, placeholder: field.placeholder }) }));
+                    control = (_jsx(Box, { ...groupProps, children: _jsx(SingleCombobox, { items: items, onValueChange: (newValue) => setFieldValue(field.name, resolveSelectValueAfterClear(field, newValue)), value: value, disabled: isDisabled, placeholder: selectPlaceholder }) }));
                 }
                 break;
             }
@@ -274,7 +276,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
         if (!field.helpText && !error) {
             return control;
         }
-        return (_jsxs(Box, { children: [control, field.helpText && !error ? (_jsx(Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? (_jsx(Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-error, #c00)' }, children: error })) : null] }));
+        return (_jsxs(Box, { children: [control, field.helpText && !error ? (_jsx(Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? (_jsx(Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-destructive, #c00)' }, children: error })) : null] }));
     };
     // by default we have 2 columns: label & input
     const columns = formDef.config?.columns ?? [1, 2];
@@ -354,10 +356,13 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
         }
         return items
             .filter((field) => !isAdaptableFormFieldHidden(field, data, context))
-            .map((field) => {
+            .map((field, index) => {
             const useFor = field.fieldType !== 'radio' && field.fieldType !== 'textOutput';
             const requiredMarker = field.required ? (_jsx("span", { className: "ab-Form_required-marker", "aria-hidden": "true", children: ' *' })) : null;
-            return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: { columnGap: 'var(--ab-base-space)' }, children: [field.label ? (useFor ? (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] })) : (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] }))) : null, renderField(field)] }, field.name));
+            return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", style: {
+                    columnGap: 'var(--ab-base-space)',
+                    marginLeft: index > 0 ? 'var(--ab-base-space)' : undefined,
+                }, children: [field.label ? (useFor ? (_jsxs("label", { id: fieldLabelId(field), htmlFor: fieldDomId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] })) : (_jsxs(Box, { id: fieldLabelId(field), className: "ab-FormLayout--inline_field-label", title: field.tooltip, children: [field.label, requiredMarker] }))) : null, renderField(field)] }, field.name));
         });
     };
     const renderRowsEntry = (entry, index) => {

package/src/components/Card/index.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { twMerge } from '../../twMerge';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 import { Box } from '../Flex';
 export function Card(props) {
     const { shadow = true, children, className, style, gap = 2 } = props;
-    return (_jsx(Box, { className: clsx('twa:bg-defaultbackground twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+    return (_jsx(Box, { className: cn('twa:bg-background twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
             'twa:shadow-sm': shadow,
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
@@ -16,7 +15,7 @@ export function Card(props) {
 }
 const CardTitle = (props) => {
     const { children, className, gap = 2, border = true } = props;
-    return (_jsx("div", { className: twMerge(clsx('ab-Card__title', {
+    return (_jsx("div", { className: cn('ab-Card__title', {
             'twa:flex twa:flex-row': true,
             'twa:items-center': true,
             'twa:text-4 twa:px-2': true,
@@ -28,11 +27,11 @@ const CardTitle = (props) => {
             'twa:gap-3': gap === 3,
             'twa:gap-4': gap === 4,
             'twa:gap-8': gap === 8,
-        }, className)), children: children }));
+        }, className), children: children }));
 };
 const CardBody = (props) => {
     const { children, gap, className } = props;
-    return (_jsx("div", { className: clsx('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
+    return (_jsx("div", { className: cn('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
             'twa:gap-2': gap === 2,

package/src/components/CheckBox/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { Box, Flex } from '../Flex';
-import clsx from 'clsx';
 import { cn } from '../../lib/utils';
 import { targetPeer } from '../twUtils';
 const Square = (props) => {
@@ -44,10 +43,10 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    let input = (_jsx("input", { className: clsx(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
+    let input = (_jsx("input", { className: cn(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
             'twa:cursor-pointer': !readOnly && !disabled,
         }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, tabIndex: tabIndex, type: "checkbox", name: name, value: value, onChange: onInputChange }));
-    return (_jsxs(Box, { ...props, className: clsx('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, _jsx(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
+    return (_jsxs(Box, { ...props, className: cn('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, _jsx(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
 };
 export const CheckBoxGroup = (props) => {
     const { orientation, ...flexProps } = props;

package/src/components/CodeBlock/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 import { Box } from '../Flex';
-import clsx from 'clsx';
 export const baseClassName = 'ab-CodeBlock';
 export const CodeBlock = (props) => {
-    return (_jsx(Box, { as: "code", ...props, className: clsx('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', baseClassName, props.className) }));
+    return (_jsx(Box, { as: "code", ...props, className: cn('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', baseClassName, props.className) }));
 };

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -5,6 +5,7 @@ import { BoxProps } from '../Flex';
 export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     api: AdaptableApi;
     onChange: (color: string) => void;
+    className?: string;
     value: string;
     includeAlpha?: boolean;
 } & Omit<BoxProps, 'onChange'>;

package/src/components/ColorPicker/ColorPicker.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
+import { cn } from '../../lib/utils';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import tinycolor from 'tinycolor2';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
-import clsx from 'clsx';
 export const ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { api, value, includeAlpha = true, ...restProps } = props;
+    let { value, includeAlpha = true, className, ...restProps } = props;
     // Create a debounced version of onChange
     // we need this because moving the mouse A LOT in the custom color picker can break the React rendering
     const debouncedOnChange = useCallback(debounce((color) => {
@@ -36,17 +36,19 @@ export const ColorPicker = React.forwardRef((props, ref) => {
         return [tinycolor(color).setAlpha(0).toRgbString(), tinycolor(color).setAlpha(1).toRgbString()];
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
-    const alpha = tinycolor(value).getAlpha();
-    return (_jsxs(Flex, { className: clsx('ColorPicker twa:items-center twa:gap-2', {
+    const alpha = tinycolor(getVariableColor(value)).getAlpha();
+    return (_jsxs(Flex, { className: cn('ColorPicker twa:items-center twa:gap-2', {
             'twa:opacity-30': props.disabled,
-        }, props.className), children: [_jsx(Input, { ...restProps, as: undefined, disabled: props.disabled, className: twMerge('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
+        }, className), children: [_jsx(Input, { ...restProps, as: undefined, disabled: props.disabled, className: twMerge('ab-ColorPicker-swatch'), onChange: (event) => {
                     /**
                      * The value is not in the map when the color is not in the palette.
                      */
                     const color = optionsMap[event.target.value] ?? event.target.value;
                     debouncedOnChange(color);
                 }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { children: "Opacity" }), _jsx(Flex, { alignItems: "center", className: "twa:min-h-input", children: _jsx(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                                const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
+                                const color = tinycolor(getVariableColor(value))
+                                    .setAlpha(event.target.value)
+                                    .toRgbString();
                                 debouncedOnChange(color);
                             }, min: 0, max: 1, step: 0.01, type: "range" }) })] }))] }));
 });

package/src/components/ColorPicker/OptionalColorPicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+export type OptionalColorPickerProps = {
+    api: AdaptableApi;
+    value: string | undefined;
+    onChange: (color: string | undefined) => void;
+    defaultColor?: string;
+    disabled?: boolean;
+    includeAlpha?: boolean;
+    className?: string;
+};
+export declare const OptionalColorPicker: React.FC<OptionalColorPickerProps>;

package/src/components/ColorPicker/OptionalColorPicker.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Box, Flex } from '../Flex';
+import SimpleButton from '../SimpleButton';
+import { twMerge } from '../../twMerge';
+import { ColorPicker } from './ColorPicker';
+const DEFAULT_COLOR = '#000000';
+export const OptionalColorPicker = (props) => {
+    const { api, value, onChange, defaultColor = DEFAULT_COLOR, disabled = false, includeAlpha = true, className, } = props;
+    const pickerRef = useRef(null);
+    const pendingOpenRef = useRef(false);
+    useEffect(() => {
+        if (pendingOpenRef.current && value && pickerRef.current) {
+            pendingOpenRef.current = false;
+            pickerRef.current.click();
+        }
+    }, [value]);
+    const handleActivate = () => {
+        pendingOpenRef.current = true;
+        onChange(defaultColor);
+    };
+    if (!value) {
+        return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsx("button", { type: "button", disabled: disabled, className: "ab-OptionalColorPicker-empty", onClick: handleActivate, "aria-label": "Set colour", title: "Click to set colour" }), _jsx(Box, { className: "twa:text-2 twa:text-muted-foreground", children: "None" })] }));
+    }
+    return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsx(ColorPicker, { ref: pickerRef, api: api, value: value, disabled: disabled, includeAlpha: includeAlpha, onChange: onChange }), _jsx(SimpleButton, { icon: "close", variant: "text", disabled: disabled, tooltip: "Clear colour", onClick: () => onChange(undefined) })] }));
+};

package/src/components/ColorPicker/index.d.ts

@@ -1 +1,2 @@
 export * from './ColorPicker';
+export * from './OptionalColorPicker';

package/src/components/ColorPicker/index.js

@@ -1 +1,2 @@
 export * from './ColorPicker';
+export * from './OptionalColorPicker';

package/src/components/Combobox/VirtualizedList.js

@@ -36,16 +36,16 @@ export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderC
                     return null;
                 }
                 const isUncreatedCreatable = item.creatable && !item.created;
-                const textLabel = showItemTooltip ? getItemTextLabel(item) : undefined;
-                const tooltipText = textLabel != null
+                const itemText = getItemTextLabel(item);
+                const tooltipText = showItemTooltip && itemText != null
                     ? isUncreatedCreatable
-                        ? `Create "${textLabel}"`
-                        : textLabel
+                        ? `Create "${itemText}"`
+                        : itemText
                     : undefined;
                 const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
                 const itemLabel = renderItemLabel ? (renderItemLabel(label, item)) : (_jsx("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
                 const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), itemLabel] })) : (itemLabel);
-                const itemElement = (_jsx(ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, style: {
+                const itemElement = (_jsx(ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, "aria-label": itemText ?? undefined, style: {
                         position: 'absolute',
                         left: `var(--ab-base-space)`,
                         right: `var(--ab-base-space)`,