@adaptabletools/adaptable 23.0.22 → 23.1.0-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.22",
+  "version": "23.1.0-canary.1",
   "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

@@ -48,6 +48,36 @@ export interface AgGridConfig {
     modules: Module[];
 }
 export type AdaptableVariant = 'vanilla' | 'react' | 'angular' | 'vue';
+/**
+ * #narrow_column_model_refresh
+ *
+ * What has to be refreshed in AG Grid after a column-model pass (`updateColumnModelAndRefreshGrid()`),
+ * ie. after `setupColumns()` re-installed the Adaptable colDef callbacks.
+ *
+ * Whatever changed in a colDef VALUE (eg. a new `cellRenderer`, `comparator` or `valueFormatter`) is
+ * already taken care of by AG Grid: `AgColumn.setColDef()` (see #col_def_commit) force-refreshes the
+ * rendered cells and header of the changed column. The scope only has to cover state read by the
+ * #stable_col_def_callbacks at render time, which AG Grid cannot know about.
+ */
+export interface GridRefreshScope {
+    /**
+     * Destroy & recreate the rendered rows (`redrawRows()`).
+     * Only needed when a ROW-level definition may have changed: `getRowStyle` / `getRowClass` (Alert row
+     * highlights), row height, full-width rows. Cancels cell editing; implies `cells`.
+     */
+    rows?: boolean;
+    /**
+     * Re-run the cell-level callbacks (`cellStyle`, `cellClass`, `valueFormatter`, `cellRenderer` params)
+     * on the rendered cells (`refreshCells({ force: true })`). Keeps focus, selection and in-progress edits.
+     */
+    cells?: boolean;
+    /**
+     * Recreate the header cells (`refreshHeader()`).
+     * Only needed when a header-level callback (`headerStyle` / `headerClass` / `headerValueGetter`) reads
+     * state that changed, ie. Format Columns targeting the column header.
+     */
+    header?: boolean;
+}
 /**
  *  The only interface for Adaptable
  *
@@ -280,7 +310,13 @@ export interface IAdaptable {
     expandRowGroupsForValues(columnValues: any[]): void;
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
-    updateColumnModelAndRefreshGrid(): void;
+    /**
+     * Re-derives the Adaptable column state, sets up all columns again and refreshes AG Grid.
+     * @param refreshScope what to refresh after the columns were set up (see #narrow_column_model_refresh);
+     * defaults to a full refresh (rows + header)
+     */
+    updateColumnModelAndRefreshGrid(refreshScope?: GridRefreshScope): 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

@@ -209,8 +209,7 @@ export interface InFilterValueResult {
     /**
      * Custom text for the collapsed IN Filter input.
      *
-     * Receives the currently selected items (and their count) and must return a
-     * string.
+     * 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
@@ -220,10 +219,27 @@ export interface InFilterValueResult {
      * 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.
      */
-    renderInputValues?: (params: {
-        selectedValues: InFilterValue[];
-        selectedCount: number;
-    }) => string;
+    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/Internal/FormatColumnInternalApi.d.ts

@@ -7,6 +7,13 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * Column-model update alone can leave visible cells stale until scroll.
      */
     refreshFormatColumnPresentation(formatColumns: FormatColumn | FormatColumn[] | undefined): void;
+    /**
+     * see #narrow_column_model_refresh
+     * Whether ANY Format Column in state (suspended or not, in any layout) targets the column header -
+     * ie. whether the `headerStyle` / `headerClass` / header name callbacks read Format Column state at all.
+     * When none does, a Format Column change cannot alter the rendered header, so it does not have to be refreshed.
+     */
+    hasFormatColumnsTargetingHeader(): boolean;
     /**
      * Retrieves all Format Columns in Adaptable State with the `Style` property set
      * @returns format columns
@@ -83,8 +90,11 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
      *
      * @param formatColumn
-     * @param column
-     * @param params
+     * @param column - the column the Format Column is scoped to
+     * @param rowNode
+     * @param cellValue
+     * @param pivotResultColumn - set when the cell belongs to a pivot result column, so that a Rule Expression
+     * written against the base column reads the pivot result cell value (see #derived_pivot_cell_style)
      */
     formatColumnShouldRenderInCell(formatColumn: FormatColumn, column: AdaptableColumn, rowNode: IRowNode, cellValue: any, pivotResultColumn?: Column): boolean;
     /**

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -49,6 +49,10 @@ export class FormatColumnInternalApi extends ApiBase {
             this.getGridApi().refreshColumns([...columnIds]);
         }
     }
+    hasFormatColumnsTargetingHeader() {
+        const headerTarget = 'columnHeader';
+        return (this.getFormatColumnApi().getFormatColumnState()?.FormatColumns ?? []).some((formatColumn) => formatColumn?.Target === headerTarget);
+    }
     getAllFormatColumnWithStyle(config) {
         return this.getFormatColumnApi()
             .getFormatColumns(config)

package/src/Redux/Store/AdaptableStore.js

@@ -464,7 +464,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                             }
                         });
                     }
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ rows: true });
                     let module = (adaptable.adaptableModules.get(ModuleConstants.AlertModuleId));
                     if (module) {
                         module.checkListenToCellDataChanged();
@@ -480,7 +480,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case FlashingCellRedux.FLASHING_CELL_DEFINITION_UNSUSPEND_ALL:
                 case FlashingCellRedux.FLASHING_CELL_DEFINITION_SUSPEND_ALL: {
                     const returnAction = next(action);
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ cells: true });
                     let module = (adaptable.adaptableModules.get(ModuleConstants.FlashingCellModuleId));
                     if (module) {
                         module.checkListenToCellDataChanged();
@@ -542,7 +542,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     if (StringExtensions.IsNotNullOrEmpty(adaptable.api.quickSearchApi.getQuickSearchValue())) {
                         adaptable.refreshAgGridFind();
                     }
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ cells: true });
                     return returnAction;
                 }
                 case FormatColumnRedux.FORMAT_COLUMN_ADD_BATCH:
@@ -555,14 +555,27 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case FormatColumnRedux.FORMAT_COLUMN_SUSPEND:
                 case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND:
                 case FormatColumnRedux.FORMAT_COLUMN_SUSPEND_ALL:
-                case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND_ALL:
+                case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND_ALL: {
+                    const hadHeaderFormatColumns = adaptable.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader();
+                    const returnAction = next(action);
+                    const hasHeaderFormatColumns = adaptable.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader();
+                    adaptable.updateColumnModelAndRefreshGrid({
+                        cells: true,
+                        header: hadHeaderFormatColumns || hasHeaderFormatColumns,
+                    });
+                    return returnAction;
+                }
                 case StyledColumnRedux.STYLED_COLUMN_ADD:
                 case StyledColumnRedux.STYLED_COLUMN_EDIT:
                 case StyledColumnRedux.STYLED_COLUMN_DELETE:
                 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({ cells: true });
+                    return returnAction;
+                }
                 case CustomSortRedux.CUSTOM_SORT_ADD:
                 case CustomSortRedux.CUSTOM_SORT_EDIT:
                 case CustomSortRedux.CUSTOM_SORT_DELETE:
@@ -571,7 +584,8 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case CustomSortRedux.CUSTOM_SORT_SUSPEND_ALL:
                 case CustomSortRedux.CUSTOM_SORT_UNSUSPEND_ALL: {
                     const returnAction = next(action);
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({});
+                    adaptable.refreshSortIfColumnsSorted();
                     return returnAction;
                 }
                 case QuickSearchRedux.QUICK_SEARCH_RUN: {

package/src/Strategy/LayoutModule.js

@@ -361,7 +361,10 @@ export class LayoutModule extends AdaptableModuleBase {
             .getModuleService()
             .getModuleById('Shortcut')
             .checkListenToKeyDown();
-        this.api.internalApi.getAdaptableInstance().updateColumnModelAndRefreshGrid();
+        this.api.internalApi.getAdaptableInstance().updateColumnModelAndRefreshGrid({
+            cells: true,
+            header: this.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader(),
+        });
     }
     getReferencedNamedQueryNames(layout) {
         if (!layout.GridFilter?.Expression) {

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,6 +1,6 @@
 import * as React from 'react';
 import { ColumnValuesSelectProps } from '../../FilterForm/ListBoxFilterForm';
-import { InFilterValue } from '../../../../types';
+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 {
@@ -32,10 +32,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
-        renderInputValues?: (params: {
-            selectedValues: InFilterValue[];
-            selectedCount: number;
-        }) => string;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     };
     setQuickFilterValues: React.Dispatch<React.SetStateAction<{
         values: {
@@ -46,10 +43,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
-        renderInputValues?: (params: {
-            selectedValues: InFilterValue[];
-            selectedCount: number;
-        }) => string;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     }>>;
     triggerValuesLoad: (options?: {
         usePrevious: boolean;

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

@@ -118,7 +118,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!result.skipDefaultSearch,
                 searchValueUsedInFilterValue: prev.searchValueUsedInFilterValue || searchValueUsedInFilterValue,
                 hasMore: !!result.hasMore,
-                renderInputValues: result.renderInputValues,
+                inFilterLabel: result.inFilterLabel,
                 dataLoadIsComplete: true,
             }));
         })
@@ -172,7 +172,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
                 hasMore: !!distinctFilterDisplayValues.hasMore,
-                renderInputValues: distinctFilterDisplayValues.renderInputValues,
+                inFilterLabel: distinctFilterDisplayValues.inFilterLabel,
             });
             lastRequestedOffsetRef.current = 0;
             setIsDistinctColumnValuesLoading(false);
@@ -337,10 +337,14 @@ export const FloatingFilterValues = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
-    const renderComboboxInputValues = React.useMemo(() => renderInputValues
-        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
-        : undefined, [renderInputValues]);
+    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:

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

@@ -64,10 +64,14 @@ export const PredicateEditor = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
-    const renderComboboxInputValues = React.useMemo(() => renderInputValues
-        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
-        : undefined, [renderInputValues]);
+    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({

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 {};