@adaptabletools/adaptable 23.0.21 → 23.1.0-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.21",
+  "version": "23.1.0-canary.0",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -68,7 +68,8 @@
     "uuid": "9.0.1"
   },
   "peerDependencies": {
-    "ag-grid-enterprise": ">=35.3.0"
+    "ag-grid-enterprise": ">=36.1.0",
+    "ag-stack": ">=36.1.0"
   },
   "publishTimestamp": 0,
   "type": "module",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -281,6 +281,7 @@ export interface IAdaptable {
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
     updateColumnModelAndRefreshGrid(): void;
+    refreshSortIfColumnsSorted(): void;
     getAgGridColumnForColumnId(columnId: string): Column;
     getMinMaxCachedValueForColumn(column: AdaptableColumn, aggregation: 'min' | 'max' | 'avg' | 'median'): number | undefined;
     destroy(config?: DestroyConfig): void;

package/src/AdaptableOptions/ColumnMenuOptions.d.ts

@@ -125,4 +125,4 @@ export interface UserColumnMenuItem {
 /**
  * Defines AG Grid Column Menu Items
  */
-export type AgGridColumnMenuItemType = 'sortAscending' | 'sortDescending' | 'sortUnSort' | 'columnFilter' | 'columnChooser' | 'pinSubMenu' | 'valueAggSubMenu' | 'autoSizeThis' | 'autoSizeAll' | 'rowGroup' | 'rowUnGroup' | 'resetColumns' | 'expandAll' | 'contractAll' | 'separator';
+export type AgGridColumnMenuItemType = 'sortAscending' | 'sortDescending' | 'sortUnSort' | 'columnFilter' | 'columnChooser' | 'pinSubMenu' | 'valueAggSubMenu' | 'showValuesAsSubMenu' | 'autoSizeThis' | 'autoSizeAll' | 'rowGroup' | 'rowUnGroup' | 'resetColumns' | 'expandAll' | 'contractAll' | 'calculatedColumn' | 'editCalculatedColumn' | 'removeCalculatedColumn' | 'editColumnName' | 'separator';

package/src/AdaptableOptions/ContextMenuOptions.d.ts

@@ -120,7 +120,7 @@ export interface UserContextMenuItem {
 /**
  * Defines AG Grid Context Menu Items
  */
-export type AgGridContextMenuItemType = 'autoSizeAll' | 'expandAll' | 'contractAll' | 'copy' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'resetColumns' | 'export' | 'csvExport' | 'excelExport' | 'chartRange' | 'pivotChart' | 'separator';
+export type AgGridContextMenuItemType = 'autoSizeAll' | 'expandAll' | 'contractAll' | 'copy' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'resetColumns' | 'export' | 'csvExport' | 'excelExport' | 'chartRange' | 'pivotChart' | 'calculatedColumn' | 'editCalculatedColumn' | 'removeCalculatedColumn' | 'editColumnName' | 'showValuesAsSubMenu' | 'separator';
 /**
  * The Context Menu provided by AadapTable by default
  */

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -206,6 +206,40 @@ export interface InFilterValueResult {
      * Search changes reset the list and set `offset` back to 0.
      */
     hasMore?: boolean;
+    /**
+     * Custom text for the collapsed IN Filter input.
+     *
+     * Receives an {@link InFilterLabelContext} and must return a string.
+     *
+     * When omitted, the input shows the selected count (e.g. `(3)`) followed by the
+     * selected labels joined with a comma. When provided, it fully replaces that
+     * text (including the count - render one yourself if you want it).
+     *
+     * For tree-shaped filters (group columns and date columns), each selected leaf
+     * is one entry in `selectedValues`: its `value` is the full leaf path and its
+     * `label` the joined path label. `selectedCount` is the number of selected leaves.
+     */
+    inFilterLabel?: (context: InFilterLabelContext) => string;
+}
+/**
+ * Context passed to {@link InFilterValueResult.inFilterLabel} when customising
+ * the collapsed IN Filter label.
+ */
+export interface InFilterLabelContext extends BaseContext {
+    /**
+     * Currently selected items, in selection order.
+     *
+     * For tree-shaped filters (group columns and date columns), each selected leaf
+     * is one entry: its `value` is the full leaf path and its `label` the joined
+     * path label.
+     */
+    selectedValues: InFilterValue[];
+    /**
+     * Number of selected items.
+     *
+     * For tree-shaped filters, this is the number of selected leaves (not parent nodes).
+     */
+    selectedCount: number;
 }
 /**
  * Information about items in the IN Column Filter

package/src/Api/GridApi.d.ts

@@ -35,9 +35,13 @@ export interface GridApi {
      */
     getFilteredData(): any[];
     /**
-     * Retrieves visible data from the grid (filtered and sorted)
+     * Retrieves visible data from the grid (filtered and sorted from visible columns only)
      */
     getVisibleData(): any[];
+    /**
+     * Retrieves the displayed (formatted but not styled) data from the grid (filtered and sorted and visible columns only)
+     */
+    getDisplayedData(): any[];
     /**
      * Retrieves all the values for a single Column.
      *

package/src/Api/Implementation/GridApiImpl.d.ts

@@ -27,6 +27,7 @@ export declare class GridApiImpl extends ApiBase implements GridApi {
     getGridData(): any[];
     getFilteredData(): any[];
     getVisibleData(): any[];
+    getDisplayedData(): any[];
     getColumnData(columnId: string): any[];
     getFilteredColumnData(columnId: string): any[];
     getVisibleColumnData(columnId: string): any[];

package/src/Api/Implementation/GridApiImpl.js

@@ -36,9 +36,30 @@ export class GridApiImpl extends ApiBase {
     }
     getVisibleData() {
         const data = [];
+        const visibleColumns = this.getColumnApi().getVisibleColumns();
         this.getAdaptableInternalApi().forAllVisibleRowNodesDo((rowNode) => {
             if (!this.isGroupRowNode(rowNode)) {
-                data.push(rowNode.data);
+                const visibleRow = {};
+                visibleColumns.forEach((column) => {
+                    const key = column.field ?? column.columnId;
+                    visibleRow[key] = this.getRawValueFromRowNode(rowNode, column.columnId);
+                });
+                data.push(visibleRow);
+            }
+        });
+        return data;
+    }
+    getDisplayedData() {
+        const data = [];
+        const visibleColumns = this.getColumnApi().getVisibleColumns();
+        this.getAdaptableInternalApi().forAllVisibleRowNodesDo((rowNode) => {
+            if (!this.isGroupRowNode(rowNode)) {
+                const displayedRow = {};
+                visibleColumns.forEach((column) => {
+                    const key = column.field ?? column.columnId;
+                    displayedRow[key] = this.getDisplayValueFromRowNode(rowNode, column.columnId);
+                });
+                data.push(displayedRow);
             }
         });
         return data;

package/src/Redux/Store/AdaptableStore.js

@@ -562,7 +562,11 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case StyledColumnRedux.STYLED_COLUMN_SUSPEND:
                 case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND:
                 case StyledColumnRedux.STYLED_COLUMN_SUSPEND_ALL:
-                case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND_ALL:
+                case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND_ALL: {
+                    const returnAction = next(action);
+                    adaptable.updateColumnModelAndRefreshGrid();
+                    return returnAction;
+                }
                 case CustomSortRedux.CUSTOM_SORT_ADD:
                 case CustomSortRedux.CUSTOM_SORT_EDIT:
                 case CustomSortRedux.CUSTOM_SORT_DELETE:
@@ -572,6 +576,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case CustomSortRedux.CUSTOM_SORT_UNSUSPEND_ALL: {
                     const returnAction = next(action);
                     adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.refreshSortIfColumnsSorted();
                     return returnAction;
                 }
                 case QuickSearchRedux.QUICK_SEARCH_RUN: {

package/src/Utilities/Helpers/DisplayFormatHelper.js

@@ -14,9 +14,21 @@ const getFractionDigitsAfterMultiplier = (input, multiplier, explicitFractionDig
     if (multiplier === 1) {
         return getInputFractionDigitCount(input);
     }
+    if (!Number.isFinite(multiplier) || multiplier === 0) {
+        return getInputFractionDigitCount(input);
+    }
     const multiplierPower = Math.round(Math.log10(Math.abs(multiplier)));
+    if (!Number.isFinite(multiplierPower)) {
+        return getInputFractionDigitCount(input);
+    }
     return Math.max(0, getInputFractionDigitCount(input) - multiplierPower);
 };
+const normalizeMultiplier = (multiplier) => {
+    if (multiplier == null || !Number.isFinite(multiplier) || multiplier === 0) {
+        return undefined;
+    }
+    return multiplier;
+};
 export function NumberFormatter(input, options = {}, rowNode, column, api) {
     let preparedInput;
     if (options.Content) {
@@ -41,11 +53,11 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (isNaN(n)) {
         return preparedInput.toString();
     }
-    let multiplier = options.Multiplier ? options.Multiplier : 1;
+    const effectiveMultiplier = normalizeMultiplier(options.Multiplier);
     let multiplierFractionDigits;
-    if (options.Multiplier !== undefined) {
-        n *= multiplier;
-        multiplierFractionDigits = getFractionDigitsAfterMultiplier(preparedInput, options.Multiplier, options.FractionDigits);
+    if (effectiveMultiplier !== undefined) {
+        n *= effectiveMultiplier;
+        multiplierFractionDigits = getFractionDigitsAfterMultiplier(preparedInput, effectiveMultiplier, options.FractionDigits);
         n = parseFloat(n.toFixed(multiplierFractionDigits));
     }
     if (options.IntegerDigits > 20) {

package/src/Utilities/Helpers/StyledColumns/SparklineStyleHelper.d.ts

@@ -1,4 +1,6 @@
 import type { AgSparklineOptions } from 'ag-charts-types';
+/** AG Charts 14 colours may be a CSS string or a theme colour-ref object. */
+export declare const cssColorToString: (color: unknown) => string | undefined;
 /**
  * AG Charts sparklines do not resolve Adaptable `var(--ab-color-*)` tokens.
  * Resolve palette / theme CSS variables to concrete colours at render time so

package/src/Utilities/Helpers/StyledColumns/SparklineStyleHelper.js

@@ -1,7 +1,10 @@
 import { getVariableColor } from '../StyleHelper';
+export const cssColorToString = (color) => {
+    return typeof color === 'string' ? color : undefined;
+};
 const resolveCssColor = (color) => {
-    if (color == null || color === '') {
-        return color;
+    if (typeof color !== 'string' || color === '') {
+        return typeof color === 'string' ? color : undefined;
     }
     const resolved = getVariableColor(color);
     return resolved || color;
@@ -11,23 +14,23 @@ const resolveHighlightStyle = (style) => {
         return style;
     }
     const resolved = { ...style };
-    if (style.fill != null) {
+    if (typeof style.fill === 'string') {
         resolved.fill = resolveCssColor(style.fill);
     }
-    if (style.stroke != null) {
+    if (typeof style.stroke === 'string') {
         resolved.stroke = resolveCssColor(style.stroke);
     }
     return resolved;
 };
 export function resolveSparklineOptionsForRender(options) {
     const resolved = { ...options };
-    if ('fill' in options && options.fill != null) {
+    if ('fill' in options && typeof options.fill === 'string') {
         resolved.fill = resolveCssColor(options.fill);
     }
-    if (options.stroke != null) {
+    if (typeof options.stroke === 'string') {
         resolved.stroke = resolveCssColor(options.stroke);
     }
-    if (options.background?.fill != null) {
+    if (typeof options.background?.fill === 'string') {
         resolved.background = {
             ...options.background,
             fill: resolveCssColor(options.background.fill),
@@ -35,10 +38,10 @@ export function resolveSparklineOptionsForRender(options) {
     }
     if ('marker' in options && options.marker) {
         const marker = { ...options.marker };
-        if (marker.fill != null) {
+        if (typeof marker.fill === 'string') {
             marker.fill = resolveCssColor(marker.fill);
         }
-        if (marker.stroke != null) {
+        if (typeof marker.stroke === 'string') {
             marker.stroke = resolveCssColor(marker.stroke);
         }
         resolved.marker = marker;
@@ -50,7 +53,7 @@ export function resolveSparklineOptionsForRender(options) {
             highlightedSeries: resolveHighlightStyle(options.highlight.highlightedSeries),
         };
     }
-    if (options.axis && typeof options.axis === 'object' && options.axis.stroke != null) {
+    if (options.axis && typeof options.axis === 'object' && typeof options.axis.stroke === 'string') {
         resolved.axis = {
             ...options.axis,
             stroke: resolveCssColor(options.axis.stroke),

package/src/Utilities/Hooks/useAdaptableOptions.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableOptions } from '../../types';
-export declare const useAdaptableOptions: <T = AdaptableOptions<any, Record<string, any>>>(fn?: (adaptableOptions: AdaptableOptions) => T) => T;
+export declare const useAdaptableOptions: <T = AdaptableOptions>(fn?: (adaptableOptions: AdaptableOptions) => T) => T;

package/src/Utilities/Services/AnnotationsService.js

@@ -61,16 +61,16 @@ export class AnnotationsService {
         if (!target?.classList?.contains?.('ag-cell')) {
             return null;
         }
-        try {
-            const PrimaryKeyValue = target.parentElement.getAttribute('row-id');
-            return {
-                PrimaryKeyValue,
-                ColumnId: target.getAttribute('col-id'),
-            };
-        }
-        catch (e) {
+        const rowElement = target.closest('[row-id]');
+        const PrimaryKeyValue = rowElement?.getAttribute('row-id');
+        const ColumnId = target.getAttribute('col-id');
+        if (PrimaryKeyValue == null || ColumnId == null) {
             return null;
         }
+        return {
+            PrimaryKeyValue,
+            ColumnId,
+        };
     }
     handleMouseEnter(event) {
         const editMode = this.getEditMode();

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ColumnValuesSelectProps } from '../../FilterForm/ListBoxFilterForm';
+import { InFilterLabelContext } from '../../../../types';
 /** Suggested page size passed to `customInFilterValues` as `context.limit`. */
 export declare const IN_FILTER_VALUES_PAGE_SIZE = 1000;
 export interface FloatingFilterValuesProps {
@@ -31,6 +32,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     };
     setQuickFilterValues: React.Dispatch<React.SetStateAction<{
         values: {
@@ -41,6 +43,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     }>>;
     triggerValuesLoad: (options?: {
         usePrevious: boolean;

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -118,6 +118,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!result.skipDefaultSearch,
                 searchValueUsedInFilterValue: prev.searchValueUsedInFilterValue || searchValueUsedInFilterValue,
                 hasMore: !!result.hasMore,
+                inFilterLabel: result.inFilterLabel,
                 dataLoadIsComplete: true,
             }));
         })
@@ -171,6 +172,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
                 hasMore: !!distinctFilterDisplayValues.hasMore,
+                inFilterLabel: distinctFilterDisplayValues.inFilterLabel,
             });
             lastRequestedOffsetRef.current = 0;
             setIsDistinctColumnValuesLoading(false);
@@ -335,7 +337,14 @@ export const FloatingFilterValues = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch } = quickFilterValues;
+    const { skipDefaultSearch, inFilterLabel } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => inFilterLabel
+        ? (items) => inFilterLabel({
+            ...api.internalApi.buildBaseContext(),
+            selectedValues: items,
+            selectedCount: items.length,
+        })
+        : undefined, [api, inFilterLabel]);
     if (props.columnId === AG_GRID_GROUPED_COLUMN) {
         if (Array.isArray(props.value) && !props.value.every((value) => Array.isArray(value))) {
             logOnce(`All the inputs for the IN predicate for the column "${props.columnId}" need to be arrays. Example:
@@ -358,11 +367,17 @@ export const FloatingFilterValues = (props) => {
                 ...props.selectProps,
                 'data-name': 'Select Values',
                 showSelectedCount: true,
+                ...(renderComboboxInputValues
+                    ? { renderInputValues: renderComboboxInputValues }
+                    : {}),
                 filter: skipDefaultSearch ? null : undefined,
                 onInputValueChange: onInputChange,
             }
             : {
                 ...props.selectProps,
+                ...(renderComboboxInputValues
+                    ? { renderInputValues: renderComboboxInputValues }
+                    : {}),
                 filter: skipDefaultSearch ? null : undefined,
                 onInputValueChange: onInputChange,
             }, disabled: props.disabled, onMenuOpen: onMenuOpen, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -117,7 +117,7 @@ export const ColumnValuesSelect = (props) => {
             }
         }
         : undefined;
-    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, resizable: true, onValueChange: column.dataType === 'date'
+    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, renderInputValues: selectProps.renderInputValues, resizable: true, onValueChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
             : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, lookupItems: lookupItems, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
     return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -64,7 +64,14 @@ export const PredicateEditor = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch } = quickFilterValues;
+    const { skipDefaultSearch, inFilterLabel } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => inFilterLabel
+        ? (items) => inFilterLabel({
+            ...adaptable.api.internalApi.buildBaseContext(),
+            selectedValues: items,
+            selectedCount: items.length,
+        })
+        : undefined, [adaptable.api, inFilterLabel]);
     return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({
@@ -75,5 +82,8 @@ export const PredicateEditor = (props) => {
                         } })] }), _jsx(Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HelpBlock, { className: "twa:m-2", children: "AND" }), _jsx(Flex, { className: "twa:flex-1", flexDirection: "column", children: _jsx(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (_jsx(Box, { className: "twa:mt-2", children: _jsx(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
                         onInputValueChange: onInputChange,
                         filter: skipDefaultSearch ? null : undefined,
+                        ...(renderComboboxInputValues
+                            ? { renderInputValues: renderComboboxInputValues }
+                            : {}),
                     }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
 };

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -71,7 +71,7 @@ const appendNumberFormatOptions = (items, options) => {
         });
     }
     appendDisplayFormatItem(items, 'Content', options.Content);
-    if (options.Multiplier != null && options.Multiplier !== 1) {
+    if (options.Multiplier != null && options.Multiplier !== 0 && options.Multiplier !== 1) {
         items.push({ label: 'Multiplier', value: String(options.Multiplier) });
     }
     appendDisplayFormatItem(items, 'Parentheses', options.Parentheses);
@@ -342,7 +342,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
                                                     : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: typeof resolved.Options.Multiplier === 'number'
+                                                    ? resolved.Options.Multiplier
+                                                    : '', onChange: (e) => setFormatOption('Multiplier', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    ? Number(e.currentTarget.value)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
                                                     resolved.Options.ZeroDisplay === '0'
                                                     ? '0'
                                                     : resolved.Options.ZeroDisplay, onChange: (e) => {

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

@@ -10,6 +10,7 @@ import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { cssColorToString } from '../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
@@ -193,9 +194,18 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         delete next.theme;
         onChange(next);
     };
+    const getPaddingOptions = () => {
+        const padding = sparklineOptions.padding;
+        if (padding == null) {
+            return {};
+        }
+        if (typeof padding === 'number') {
+            return { top: padding, right: padding, bottom: padding, left: padding };
+        }
+        return padding;
+    };
     const handlePaddingChange = (key, value) => {
-        const currentPadding = sparklineOptions.padding || {};
-        handleChange('padding', { ...currentPadding, [key]: value });
+        handleChange('padding', { ...getPaddingOptions(), [key]: value });
     };
     const themes = [
         { value: SPARKLINE_CUSTOM_COLOURS_THEME, label: 'Custom colours' },
@@ -212,9 +222,9 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
+    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: cssColorToString(sparklineOptions.fill) ?? '', onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: cssColorToString(sparklineOptions.stroke) ?? '', onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
                                 ? 'Line colour. Marker colours are in the Markers card.'
-                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
+                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                         const value = e.target.value;
                         const dashArray = value
                             ? value
@@ -226,7 +236,7 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                     } }) }), _jsx(FormRow, { label: "Line Dash Offset", children: _jsx(AdaptableInput, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) }) }), _jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                                 ...sparklineOptions.background,
                                 visible,
-                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
+                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: cssColorToString(sparklineOptions.background?.fill) ?? '', onChange: (fill) => handleChange('background', {
                                     ...sparklineOptions.background,
                                     fill,
                                 }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
@@ -263,7 +273,7 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         { value: 'time', label: 'Time' },
     ];
     const isAxisEnabled = sparklineOptions.axis?.visible ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: cssColorToString(sparklineOptions.axis?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
 };
 const SparklineTooltipOptions = ({ options, onChange, }) => {
     const sparklineOptions = options;
@@ -331,7 +341,7 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         { value: 'triangle', label: 'Triangle' },
     ];
     const isMarkerEnabled = sparklineOptions.marker?.enabled ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: cssColorToString(sparklineOptions.marker?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
 };
 const SparklineHighlightOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();
@@ -369,5 +379,5 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
             },
         });
     };
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: cssColorToString(highlightOptions?.highlightedItem?.stroke) ?? '', onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
 };

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

@@ -65,6 +65,6 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
      */
     headerPreview?: React.ReactNode;
 }
-export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
-export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;
+export declare const OnePageAdaptableWizard: <ENTITY extends any>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
+export declare const OnePageWizardSummary: <ENTITY extends any>() => React.JSX.Element;
 export {};

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

@@ -50,5 +50,5 @@ export interface OnePageWizardProps<ENTITY> {
      */
     headerPreview?: React.ReactNode;
 }
-export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
+export declare const OnePageWizard: <ENTITY extends any>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};