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

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -21,28 +21,36 @@ export function renderCompactAccentTags(ids, getLabel, options) {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((id) => (_jsx(AccentTag, { className: "twa:shrink-0", children: getLabel(id) }, id))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
 }
 export const CollapsibleWizardCard = (props) => {
-    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, collapsible = true, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
     const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
         onChange: props.onExpandedChange,
     });
-    const showSummary = !expanded && !compact;
+    const canToggle = collapsible;
+    const isExpanded = canToggle && expanded;
+    const isCompact = canToggle && compact;
+    const showSummary = !isExpanded && !isCompact;
     const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
-    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
-    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
-    const toggleExpanded = () => setExpanded(!expanded);
+    const headerInline = isExpanded ? help : isCompact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = isCompact && compactSummaryInteractive;
+    const toggleExpanded = () => {
+        if (!canToggle) {
+            return;
+        }
+        setExpanded(!expanded);
+    };
     const handleTitleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             toggleExpanded();
         }
     };
-    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', isExpanded
             ? getCollapsibleWizardCardExpandedClasses(surface)
-            : getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            : getCollapsibleWizardCardCollapsedClasses(surface), isCompact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
             ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
-            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !isCompact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:rounded-standard', canToggle && 'twa:cursor-pointer twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !isCompact && !isExpanded }, canToggle && targetOwn.focusOutline, canToggle && 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: canToggle ? toggleExpanded : undefined, onKeyDown: canToggle ? handleTitleKeyDown : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isExpanded : undefined, role: canToggle ? 'button' : undefined, children: [_jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:select-none', canToggle && 'twa:cursor-pointer'), children: [canToggle ? (_jsx(IconComponent, { icon: { name: isExpanded ? 'collapse' : 'expand' } })) : null, _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
                                 ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
-                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', isCompact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), isExpanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
 };
 export function useWizardCardAccordion(initialExpandedId, options) {
     const fillExpandedCard = options?.fillExpandedCard ?? false;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -7,7 +7,7 @@ import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
@@ -157,9 +157,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
     private _initAdaptableAgGrid;
     midwayDestroy(): void;
-    migrateLoadedAdaptableState(state: AdaptableState): AdaptableState;
-    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: AdaptableState) => AdaptableState;
-    normalizeAdaptableState(state: AdaptableState, agGridOptions: NormalizeAdaptableStateOptions): AdaptableState;
+    migrateLoadedAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T): T;
+    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: Partial<AdaptablePersistentState>) => Partial<AdaptablePersistentState>;
+    normalizeAdaptableState(state: Partial<AdaptablePersistentState>, agGridOptions: NormalizeAdaptableStateOptions): Partial<AdaptablePersistentState>;
     private normaliseLayoutState;
     private normaliseToolPanelState;
     private getCurrentLayoutModel;

package/src/agGrid/AdaptableAgGrid.js

@@ -15,6 +15,7 @@ import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_C
 import { generateSelectionColumn } from '../Api/Implementation/ColumnApiImpl';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
+import { validateStateOptions } from '../Redux/Store/StateOptionsGuards';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
 import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { CommentsService } from '../Utilities/Services/CommentsService';
@@ -739,6 +740,7 @@ export class AdaptableAgGrid {
         }
     }
     normalizeAdaptableOptions(adaptableOptions) {
+        validateStateOptions(adaptableOptions.stateOptions, this.logger);
         if (this.hasAutogeneratedPrimaryKey) {
             this.logger.warn(`Autogenerated primary key is enabled (adaptableOptions.autogeneratedPrimaryKey = true). This should be a last resort as it limits some Adaptable features. See: ${PrimaryKeyDocsLink}`);
             this.adaptableOptions.primaryKey = AUTOGENERATED_PK_COLUMN;

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -88,7 +88,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnHeaderStyle;
     private setupColumnCellEditor;
     private setupColumnCellRenderer;
-    private setupColumnTooltipValueGetter;
+    private setupColumnTooltip;
     /**
      * Resolves a Range Bar bound (number / column id / Col-Min / Col-Max /
      * Col-Avg / Col-Median) into a concrete numeric value for the supplied row.

package/src/agGrid/AgGridColumnAdapter.js

@@ -67,7 +67,7 @@ const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
     'pivotComparator',
     'getFindText',
     'getQuickFilterText',
-    'tooltipValueGetter',
+    'tooltip',
     'cellEditorParams',
     'suppressNoteActions',
 ]);
@@ -333,7 +333,7 @@ export class AgGridColumnAdapter {
         this.setupColumnHeaderStyle(colSetupInfo);
         this.setupColumnHeaderClass(colSetupInfo);
         this.setupColumnValueGetter(colSetupInfo);
-        this.setupColumnTooltipValueGetter(colSetupInfo);
+        this.setupColumnTooltip(colSetupInfo);
         if (!isAutoRowGroupColumn) {
             this.setupColumnFilter(colSetupInfo);
             this.setupColumnFloatingFilter(colSetupInfo);
@@ -676,9 +676,9 @@ export class AgGridColumnAdapter {
             }
         });
     }
-    setupColumnTooltipValueGetter({ col, colId, abColumn }) {
+    setupColumnTooltip({ col, colId, abColumn }) {
         let hasTooptip = false;
-        this.setColDefProperty(col, 'tooltipValueGetter', () => {
+        this.setColDefProperty(col, 'tooltip', () => {
             const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(colId);
             if (!styledColumn || styledColumn.IsSuspended) {
                 return undefined;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type ColorFieldProps as SharedColorFieldProps } from "../../../vendor/components/ColorField";
+export type ColorFieldProps = Omit<SharedColorFieldProps, 'onChange' | 'clearable' | 'data-name'> & {
+    'data-name'?: string;
+} & ({
+    clearable?: true;
+    onChange: (color: string | undefined) => void;
+} | {
+    /** The colour is required, so there is no clear button and `onChange` always gets one. */
+    clearable: false;
+    onChange: (color: string) => void;
+});
+/** The shared colour field with AdapTable's defaults. */
+export declare const ColorField: (props: ColorFieldProps) => React.JSX.Element;

package/src/components/ColorField/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorField as SharedColorField, } from "../../../vendor/components/ColorField";
+export const ColorField = (props) => {
+    const { onChange, 'data-name': dataName = 'color-field', ...rest } = props;
+    return (_jsx(SharedColorField, { ...rest, "data-name": dataName, onChange: onChange }));
+};

package/src/components/aql/QueryBuilder/QueryBuilderInputs.js

@@ -97,7 +97,7 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
         input = (_jsx(Box, { "data-id": "query-input-row-display", "data-name": "qb2-whole-row", "data-slot": "select-trigger", className: subjectPillClassName, children: "Whole Row" }));
     }
     else {
-        input = (_jsx(Box, { "data-id": "query-input-scope-display", "data-slot": "select-trigger", className: subjectPillClassName, children: scopeMeta?.description ?? '$SCOPE' }));
+        input = (_jsx(Box, { "data-id": "query-input-scope-display", "data-slot": "select-trigger", className: subjectPillClassName, children: "Scoped Columns" }));
     }
     const typeOptions = [
         {

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1791809119255 || Date.now(),
-    VERSION: "24.0.0-canary.5" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1792496906928 || Date.now(),
+    VERSION: "24.0.0-canary.7" || '--current-version--',
 };

package/src/layout-manager/src/normalizeLayoutModel.d.ts

@@ -7,4 +7,4 @@ export declare function normalizeTableLayoutModel(layout: TableLayoutModel, opti
 export declare function normalizePivotLayoutModel(layout: PivotLayoutModel): PivotLayoutModel;
 export declare function normalizeLayoutModel(layout: TableLayoutModel | PivotLayoutModel, options?: {
     isTree: boolean;
-}): PivotLayoutModel | TableLayoutModel;
+}): TableLayoutModel | PivotLayoutModel;

package/src/layout-manager/src/simplifyLayoutModel.d.ts

@@ -1,4 +1,4 @@
 import { PivotLayoutModel, TableLayoutModel } from './LayoutManagerModel';
 export declare function simplifyTableLayoutModel(layout: TableLayoutModel): TableLayoutModel;
 export declare function simplifyPivotLayoutModel(layout: PivotLayoutModel): PivotLayoutModel;
-export declare function simplifyLayoutModel(layout: TableLayoutModel | PivotLayoutModel): PivotLayoutModel | TableLayoutModel;
+export declare function simplifyLayoutModel(layout: TableLayoutModel | PivotLayoutModel): TableLayoutModel | PivotLayoutModel;

package/src/migration/AdaptableUpgradeHelper.d.ts

@@ -1,5 +1,5 @@
 import { VersionUpgrade } from './VersionUpgrade';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { LayoutTagOptions } from '../AdaptableOptions/LayoutOptions';
 /**
  * Config object used by State Auto-migration Wizard
@@ -38,7 +38,12 @@ export declare class AdaptableUpgradeHelper {
     protected versionUpgrades: Map<number, VersionUpgrade>;
     protected logger: MigrationLogger;
     private constructor();
-    static migrateAdaptableState(state: AdaptableState, config: UpgradeConfig): AdaptableState;
+    /**
+     * Migrates the given Adaptable State from `config.fromVersion` to `config.toVersion`.
+     *
+     * Accepts both a full `AdaptableState` and a (partial) `AdaptablePersistentState` - e.g. as received in `StateOptions.applyState()` - and returns the same shape.
+     */
+    static migrateAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T, config: UpgradeConfig): T;
     /**
      * Published major version. When `VERSION` is not a parseable semver (local
      * builds and tests) this is 24, matching the previous helper fallback.

package/src/migration/VersionUpgrade17.js

@@ -91,7 +91,7 @@ export class VersionUpgrade17 extends VersionUpgrade {
         if (dashboardState?.VisibleButtons) {
             this.logger.warn(`Migrating deprecated DashboardState.VisibleButtons: [${dashboardState.VisibleButtons}].`);
             state.Dashboard.ModuleButtons = [
-                ...state.Dashboard.ModuleButtons,
+                ...(state.Dashboard.ModuleButtons ?? []),
                 ...dashboardState.VisibleButtons,
             ];
             delete state.Dashboard.VisibleButtons;
@@ -175,22 +175,24 @@ export class VersionUpgrade17 extends VersionUpgrade {
             return state;
         }
         const expression = oldQueryState.CurrentQuery;
-        const currentLayout = state.Layout.Layouts?.find((l) => l.Name === state.Layout.CurrentLayout);
+        const currentLayout = state.Layout?.Layouts?.find((l) => l.Name === state.Layout?.CurrentLayout);
         const currentGridFilter = currentLayout?.GridFilter;
         const currentGridFilterExpression = currentGridFilter && !currentGridFilter.IsSuspended ? currentGridFilter.Expression || '' : '';
-        if (expression && StringExtensions.IsNullOrEmpty(currentGridFilterExpression)) {
+        if (expression &&
+            currentLayout &&
+            StringExtensions.IsNullOrEmpty(currentGridFilterExpression)) {
             currentLayout.GridFilter = {
                 ...currentGridFilter,
                 Expression: expression,
             };
         }
-        state.Dashboard.Tabs?.forEach((tab) => {
+        state.Dashboard?.Tabs?.forEach((tab) => {
             if (tab.Toolbars.includes('Query')) {
                 tab.Toolbars = tab.Toolbars.map((t) => (t == 'Query' ? 'GridFilter' : t));
             }
         });
         let updatePinnedToolbars = false;
-        if (state.Dashboard.PinnedToolbars) {
+        if (state.Dashboard?.PinnedToolbars) {
             state.Dashboard.PinnedToolbars = state.Dashboard.PinnedToolbars.map((pinnedToolbar) => {
                 if (pinnedToolbar == 'Query') {
                     return 'GridFilter';
@@ -204,11 +206,12 @@ export class VersionUpgrade17 extends VersionUpgrade {
         const oldQueryState = state.Query;
         const oldNamedQueries = oldQueryState?.NamedQueries;
         if (ArrayExtensions.IsNotNullOrEmpty(oldNamedQueries)) {
-            const currentNamedQueries = state.NamedQuery.NamedQueries;
+            state.NamedQuery ??= {};
+            const currentNamedQueries = (state.NamedQuery.NamedQueries ??= []);
             oldNamedQueries.forEach((oldNamedQuery) => {
                 const currentQuery = currentNamedQueries.find((q) => q.Name === oldNamedQuery.Name);
                 if (!currentQuery) {
-                    state.NamedQuery?.NamedQueries?.push(oldNamedQuery);
+                    currentNamedQueries.push(oldNamedQuery);
                 }
             });
         }
@@ -236,6 +239,7 @@ export class VersionUpgrade17 extends VersionUpgrade {
             };
         })
             .filter(Boolean);
+        state.StyledColumn ??= {};
         state.StyledColumn.StyledColumns ??= [];
         styledColumns.forEach((styledColumn) => {
             state.StyledColumn.StyledColumns.push(styledColumn);
@@ -263,8 +267,9 @@ export class VersionUpgrade17 extends VersionUpgrade {
             }
         });
         const alertState = state.Alert;
-        if (ArrayExtensions.IsEmpty(state.FlashingCell?.FlashingCellDefinitions) &&
+        if (ArrayExtensions.IsNullOrEmpty(state.FlashingCell?.FlashingCellDefinitions) &&
             ArrayExtensions.IsNotNullOrEmpty(alertState?.FlashingAlertDefinitions)) {
+            state.FlashingCell ??= {};
             state.FlashingCell.FlashingCellDefinitions = alertState.FlashingAlertDefinitions;
             delete state.Alert.FlashingAlertDefinitions;
         }

package/src/migration/VersionUpgrade24.d.ts

@@ -33,6 +33,8 @@ import type { MigrationLogger } from './AdaptableUpgradeHelper';
  *    `Type: 'Change'` when missing
  * 16. {@link migrateLayoutTagsToRegistry} — Layout extensions held in object Tags
  *    (`layoutTagOptions.autoCheckTagsForLayouts`) → `Layout.LayoutExtensions`
+ * 17. {@link VersionUpgrade24.migrateSwatchColorVars} — `--ab-color-swatch-N`
+ *    colours → `--ab-color-palette-{N+12}`
  */
 export declare class VersionUpgrade24 extends VersionUpgrade {
     private options;
@@ -40,6 +42,13 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
         layoutTagOptions?: LayoutTagOptions;
     });
     migrateState(state: AdaptableState): AdaptableState;
+    /**
+     * Step 17. The 20 swatch colours were merged into the palette after its 12
+     * light / dark pairs, so `var(--ab-color-swatch-N)` in any saved style
+     * (Format Columns, Styled Columns, Alerts, Flashing Cells, shared entities…)
+     * becomes `var(--ab-color-palette-{N+12})` with the same colour.
+     */
+    private migrateSwatchColorVars;
     /**
      * Migrates Notes from a single `Timestamp` to explicit `CreatedAt` / `UpdatedAt`.
      *

package/src/migration/VersionUpgrade24.js

@@ -34,8 +34,35 @@ export class VersionUpgrade24 extends VersionUpgrade {
         this.retypeObservableCalculatedColumns(state);
         this.stampFlashingCellTypes(state);
         migrateLayoutTagsToRegistry(state, this.logger, this.options.layoutTagOptions);
+        this.migrateSwatchColorVars(state);
         return state;
     }
+    migrateSwatchColorVars(state) {
+        const swatchVar = /--ab-color-swatch-(\d+)\b/g;
+        let rewritten = 0;
+        const visit = (node) => {
+            if (!node || typeof node !== 'object') {
+                return;
+            }
+            const container = node;
+            for (const key of Object.keys(container)) {
+                const value = container[key];
+                if (typeof value !== 'string') {
+                    visit(value);
+                    continue;
+                }
+                const next = value.replace(swatchVar, (_, n) => `--ab-color-palette-${Number(n) + 12}`);
+                if (next !== value) {
+                    container[key] = next;
+                    rewritten++;
+                }
+            }
+        };
+        visit(state);
+        if (rewritten > 0) {
+            this.logger.info(`Rewrote ${rewritten} colour value(s) from --ab-color-swatch-N to --ab-color-palette-{N+12} (v24).`);
+        }
+    }
     migrateNoteTimestamps(state) {
         const notes = state.Note?.Notes;
         if (!notes?.length) {