@adaptabletools/adaptable-cjs 21.0.0-canary.0 → 21.0.0-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "21.0.0-canary.0",
+  "version": "21.0.0-canary.1",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/LayoutOptions.d.ts

@@ -1,4 +1,4 @@
-import { Layout } from '../AdaptableState/LayoutState';
+import { Layout, PivotLayout, TableLayout } from '../AdaptableState/LayoutState';
 import { AdaptableObjectTag } from '../AdaptableState/Common/AdaptableObject';
 import { BaseContext, LayoutExtensionModule, LayoutExtensionObject } from '../../types';
 /**
@@ -17,6 +17,10 @@ export interface LayoutOptions {
      * Columns to display in Table that opens when viewing Pivot Cell contents
      */
     pivotPreviewColumns?: string[] | ((context: PivotPreviewColumnsContext) => string[]);
+    /**
+     * Default properties to apply when creating a new Layout (Table or Pivot)
+     */
+    defaultLayoutProperties?: DefaultLayoutProperties | ((context: DefaultLayoutPropertiesContext) => DefaultTableLayoutProperties | DefaultPivotLayoutProperties);
 }
 /**
  * Options for managing Tags in Layouts (used to enhance Layouts)
@@ -93,3 +97,30 @@ export interface PivotPreviewColumnsContext extends BaseContext {
      */
     columnId: string;
 }
+/**
+ * Default properties to apply when creating a new Table Layout
+ */
+export type DefaultTableLayoutProperties = Partial<Omit<TableLayout, 'Name'>>;
+/**
+ * Default properties to apply when creating a new Pivot Layout
+ */
+export type DefaultPivotLayoutProperties = Partial<Omit<PivotLayout, 'Name'>>;
+/**
+ * Default properties to apply when creating a new Layout (Table or Pivot)
+ */
+export interface DefaultLayoutProperties {
+    /**
+     * Default properties to apply when creating a new Table Layout
+     */
+    tableLayout?: DefaultTableLayoutProperties;
+    /**
+     * Default properties to apply when creating a new Pivot Layout
+     */
+    pivotLayout?: DefaultPivotLayoutProperties;
+}
+/**
+ * Context for `LayoutOptions.defaultLayoutProperties` function
+ */
+export interface DefaultLayoutPropertiesContext extends BaseContext {
+    layoutType: 'table' | 'pivot';
+}

package/src/Api/Implementation/LayoutApiImpl.js

@@ -6,8 +6,6 @@ const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/La
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const ApiBase_1 = require("./ApiBase");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
 const Uuid_1 = require("../../AdaptableState/Uuid");
 const PopupRedux_1 = require("../../Redux/ActionsReducers/PopupRedux");
 const LayoutInternalApi_1 = require("../Internal/LayoutInternalApi");
@@ -279,7 +277,7 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
             this.logError("Cannot create layout with the Name: '" + layoutToCreate.Name + "' as it already exists");
             return false;
         }
-        const newLayout = ObjectFactory_1.default.CreateEmptyLayout({ ...layoutToCreate });
+        const newLayout = this.internalApi.buildInitialLayout(layoutToCreate);
         this.addUidToAdaptableObject(newLayout);
         this.dispatchAction(LayoutRedux.LayoutAdd(newLayout));
         return newLayout;
@@ -296,9 +294,11 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
             this.logError("Cannot clone layout with Name: '" + layoutName + "' as other Layout does not exist");
             return false;
         }
-        const newLayout = Helper_1.default.cloneObject(layoutToClone);
-        newLayout.Uuid = (0, Uuid_1.createUuid)();
-        newLayout.Name = layoutName;
+        const newLayout = {
+            ...this.internalApi.cloneLayout(layoutToClone),
+            Name: layoutName,
+            Uuid: (0, Uuid_1.createUuid)(),
+        };
         this.dispatchAction(LayoutRedux.LayoutAdd(newLayout));
         return this.getLayoutById(newLayout.Uuid);
     }

package/src/Api/Internal/LayoutInternalApi.d.ts

@@ -32,4 +32,9 @@ export declare class LayoutInternalApi extends ApiBase {
     setupRowSummaries(): void;
     refreshLayout(): void;
     getChangedColumnSorts(oldSorts: LayoutBase['ColumnSorts'], newSorts: LayoutBase['ColumnSorts']): string[];
+    buildInitialLayout(providedLayout: Partial<Layout> & {
+        Name: string;
+    }, type?: 'table' | 'pivot'): Layout;
+    private getDefaultLayoutProperties;
+    cloneLayout(layoutToClone: Layout): Omit<Layout, 'Name'>;
 }

package/src/Api/Internal/LayoutInternalApi.js

@@ -6,6 +6,9 @@ const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const ApiBase_1 = require("../Implementation/ApiBase");
 const LayoutHelpers_1 = require("../Implementation/LayoutHelpers");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 class LayoutInternalApi extends ApiBase_1.ApiBase {
     getNormalizedLayout(layout) {
         return (0, LayoutHelpers_1.normalizeLayout)(layout);
@@ -210,5 +213,45 @@ class LayoutInternalApi extends ApiBase_1.ApiBase {
         });
         return changedColumnIds;
     }
+    buildInitialLayout(providedLayout, type) {
+        const layoutType = type || ((0, LayoutHelpers_1.isPivotLayout)(providedLayout) ? 'pivot' : 'table');
+        const providedTableLayout = providedLayout;
+        const providedPivotLayout = providedLayout;
+        const initialEmptyLayout = layoutType === 'pivot'
+            ? ObjectFactory_1.default.CreateEmptyPivotLayout({ ...providedPivotLayout })
+            : ObjectFactory_1.default.CreateEmptyTableLayout({ ...providedTableLayout });
+        const defaultLayoutProperties = this.getDefaultLayoutProperties(layoutType);
+        const initialLayout = {
+            ...initialEmptyLayout,
+            ...defaultLayoutProperties,
+        };
+        return initialLayout;
+    }
+    getDefaultLayoutProperties(layoutType) {
+        const defaultLayoutPropertiesOption = this.getLayoutOptions().defaultLayoutProperties;
+        if (typeof defaultLayoutPropertiesOption === 'object') {
+            const initialProps = layoutType === 'table'
+                ? defaultLayoutPropertiesOption.tableLayout
+                : defaultLayoutPropertiesOption.pivotLayout;
+            return initialProps;
+        }
+        if (typeof defaultLayoutPropertiesOption === 'function') {
+            const context = {
+                layoutType,
+                ...this.getAdaptableInternalApi().buildBaseContext(),
+            };
+            return defaultLayoutPropertiesOption(context);
+        }
+        return {};
+    }
+    cloneLayout(layoutToClone) {
+        let clonedLayout = Helper_1.default.cloneObject(layoutToClone);
+        let result = {
+            ...this.buildInitialLayout(clonedLayout),
+        };
+        result = AdaptableHelper_1.default.removeAdaptableObjectPrimitivesInlineDeep(result);
+        delete result.Name;
+        return result;
+    }
 }
 exports.LayoutInternalApi = LayoutInternalApi;

package/src/Utilities/Helpers/AdaptableHelper.d.ts

@@ -14,6 +14,7 @@ export declare const AdaptableHelper: {
     addAdaptableObjectPrimitives: typeof addAdaptableObjectPrimitives;
     removeAdaptableObjectPrimitives: typeof removeAdaptableObjectPrimitives;
     removeAdaptableObjectPrimitivesInline: typeof removeAdaptableObjectPrimitivesInline;
+    removeAdaptableObjectPrimitivesInlineDeep: typeof removeAdaptableObjectPrimitivesInlineDeep;
     isAdaptableObject: typeof isAdaptableObject;
 };
 export default AdaptableHelper;

package/src/Utilities/Helpers/AdaptableHelper.js

@@ -117,6 +117,7 @@ exports.AdaptableHelper = {
     addAdaptableObjectPrimitives,
     removeAdaptableObjectPrimitives,
     removeAdaptableObjectPrimitivesInline,
+    removeAdaptableObjectPrimitivesInlineDeep,
     isAdaptableObject,
 };
 exports.default = exports.AdaptableHelper;

package/src/Utilities/ObjectFactory.d.ts

@@ -23,7 +23,7 @@ import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmaryInfo } from '../AdaptableState/Common/CellSummary';
 import { AdaptableTheme, ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
 import { IRowNode } from 'ag-grid-enterprise';
-import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout } from '../../types';
+import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout, TableLayout } from '../../types';
 import { ToastOptions } from '../components/Toastify';
 import { StyledColumn } from '../AdaptableState/StyledColumnState';
 export declare function CreateEmptyCustomSort(): CustomSort;
@@ -51,12 +51,15 @@ export declare function CreateEmptySchedule(): Schedule;
 export declare function CreateEmptyShortcut(): Shortcut;
 export declare function CreateEmptyFormatColumn(): FormatColumn;
 export declare function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings: Partial<SpecialColumnSettings>): FreeTextColumn;
-export declare function CreateEmptyPivotLayout(layout?: Partial<PivotLayout> & {
+export declare function CreateEmptyPivotLayout(pivotLayout?: Partial<PivotLayout> & {
     Name: string;
 }): PivotLayout;
+export declare function CreateEmptyTableLayout(tableLayout?: Partial<TableLayout> & {
+    Name: string;
+}): TableLayout;
 export declare function CreateEmptyLayout(layout?: Partial<Layout> & {
     Name: string;
-}, adaptableColumns?: AdaptableColumn[]): Layout;
+}): Layout;
 export declare function CreateEmptyStyle(): AdaptableStyle;
 export declare function CreateSystemStatusMessageInfo(message: string, type: AdaptableMessageType, furtherInfo?: string): SystemStatusMessageInfo;
 export declare function CreateEmptyCellSummmary(): CellSummmaryInfo;
@@ -100,6 +103,7 @@ export declare const ObjectFactory: {
     CreateEmptyFreeTextColumn: typeof CreateEmptyFreeTextColumn;
     CreateEmptyLayout: typeof CreateEmptyLayout;
     CreateEmptyPivotLayout: typeof CreateEmptyPivotLayout;
+    CreateEmptyTableLayout: typeof CreateEmptyTableLayout;
     CreateColumnFilter: typeof CreateColumnFilter;
     CreateEmptyStyle: typeof CreateEmptyStyle;
     CreateEmptyCellSummmary: typeof CreateEmptyCellSummmary;

package/src/Utilities/ObjectFactory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFactory = exports.CreateToastOptions = exports.CreateEmptyCommentThread = exports.CreateEmptyTheme = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyChartDefinition = exports.CreateDefaultStyledColumnBadge = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyPivotLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateAdaptableComment = exports.CreateEmptyCustomSort = void 0;
+exports.ObjectFactory = exports.CreateToastOptions = exports.CreateEmptyCommentThread = exports.CreateEmptyTheme = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyChartDefinition = exports.CreateDefaultStyledColumnBadge = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyTableLayout = exports.CreateEmptyPivotLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateAdaptableComment = exports.CreateEmptyCustomSort = void 0;
 const Enums_1 = require("../AdaptableState/Common/Enums");
 const Uuid_1 = require("../AdaptableState/Uuid");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
@@ -274,37 +274,45 @@ function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings) {
     };
 }
 exports.CreateEmptyFreeTextColumn = CreateEmptyFreeTextColumn;
-function CreateEmptyPivotLayout(layout) {
+function CreateEmptyPivotLayout(pivotLayout) {
     const result = {
-        Name: layout.Name,
-        ColumnSorts: layout.ColumnSorts || [],
-        ColumnFilters: layout.ColumnFilters || [],
+        ...pivotLayout,
         Uuid: (0, Uuid_1.createUuid)(),
-        PivotColumns: layout.PivotColumns || [],
-        PivotAggregationColumns: layout.PivotAggregationColumns || [],
-        PivotGroupedColumns: layout.PivotGroupedColumns || [],
-        ColumnSizing: layout.ColumnSizing || {},
+        ColumnSizing: pivotLayout.ColumnSizing || {},
+        ColumnHeaders: pivotLayout.ColumnHeaders || {},
+        ColumnPinning: pivotLayout.ColumnPinning || {},
+        ColumnSorts: pivotLayout.ColumnSorts || [],
+        ColumnFilters: pivotLayout.ColumnFilters || [],
+        PivotColumns: pivotLayout.PivotColumns || [],
+        PivotAggregationColumns: pivotLayout.PivotAggregationColumns || [],
+        PivotGroupedColumns: pivotLayout.PivotGroupedColumns || [],
     };
     return result;
 }
 exports.CreateEmptyPivotLayout = CreateEmptyPivotLayout;
-function CreateEmptyLayout(layout, adaptableColumns) {
-    if ((0, LayoutHelpers_1.isPivotLayout)(layout)) {
-        return CreateEmptyPivotLayout(layout);
-    }
-    const tableLayout = layout;
+function CreateEmptyTableLayout(tableLayout) {
     const result = {
         ...tableLayout,
         Uuid: (0, Uuid_1.createUuid)(),
-        TableColumns: tableLayout.TableColumns || [],
+        ColumnSizing: tableLayout.ColumnSizing || {},
+        ColumnHeaders: tableLayout.ColumnHeaders || {},
+        ColumnPinning: tableLayout.ColumnPinning || {},
         ColumnSorts: tableLayout.ColumnSorts || [],
         ColumnFilters: tableLayout.ColumnFilters || [],
-        ColumnSizing: tableLayout.ColumnSizing || {},
-        RowGroupedColumns: tableLayout.RowGroupedColumns ||
-            (adaptableColumns ? adaptableColumns.filter((c) => c.isGrouped).map((c) => c.columnId) : []),
+        TableColumns: tableLayout.TableColumns || [],
+        RowGroupedColumns: tableLayout.RowGroupedColumns || [],
     };
     return result;
 }
+exports.CreateEmptyTableLayout = CreateEmptyTableLayout;
+function CreateEmptyLayout(layout) {
+    if ((0, LayoutHelpers_1.isPivotLayout)(layout)) {
+        return CreateEmptyPivotLayout(layout);
+    }
+    else {
+        return CreateEmptyTableLayout(layout);
+    }
+}
 exports.CreateEmptyLayout = CreateEmptyLayout;
 function CreateEmptyStyle() {
     return {
@@ -485,6 +493,7 @@ exports.ObjectFactory = {
     CreateEmptyFreeTextColumn,
     CreateEmptyLayout,
     CreateEmptyPivotLayout,
+    CreateEmptyTableLayout,
     CreateColumnFilter,
     CreateEmptyStyle,
     CreateEmptyCellSummmary,

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const SettingsSection_1 = require("./sections/SettingsSection");
 const rebass_1 = require("rebass");
@@ -33,17 +32,17 @@ const LayoutWizard = (props) => {
         if (initialLayout) {
             preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
             if (props?.popupParams?.action === 'Clone') {
-                preparedLayout.Name = '';
-                delete preparedLayout.Uuid;
+                preparedLayout = {
+                    ...adaptable.api.layoutApi.internalApi.cloneLayout(preparedLayout),
+                    Name: '',
+                };
             }
         }
         else {
             const shouldCreatePivot = props.popupParams?.config?.layoutType === 'pivot' ||
                 props.abObjectType?.name?.toLowerCase().includes('pivot') ||
                 false;
-            preparedLayout = shouldCreatePivot
-                ? ObjectFactory_1.default.CreateEmptyPivotLayout({ Name: '' })
-                : ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+            preparedLayout = adaptable.api.layoutApi.internalApi.buildInitialLayout({ Name: '' }, shouldCreatePivot ? 'pivot' : 'table');
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
@@ -66,7 +65,6 @@ const LayoutWizard = (props) => {
                 break;
             case 'Clone':
                 const clonedLayout = { ...layout };
-                delete clonedLayout.Uuid;
                 dispatch(LayoutRedux.LayoutAdd(clonedLayout));
                 dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
                 break;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1756391432518 || Date.now(),
-    VERSION: "21.0.0-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1756456094068 || Date.now(),
+    VERSION: "21.0.0-canary.1" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -2408,22 +2408,6 @@ export declare const ADAPTABLE_METAMODEL: {
             ref?: undefined;
         })[];
     };
-    CustomEditColumnValueInfo: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: ({
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt?: undefined;
-        })[];
-    };
     CustomEditColumnValuesContext: {
         name: string;
         kind: string;
@@ -3024,6 +3008,28 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    DefaultLayoutProperties: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        }[];
+    };
+    DefaultLayoutPropertiesContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
+    DefaultPivotLayoutProperties: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     DefaultPredicateFilterContext: {
         name: string;
         kind: string;
@@ -3040,6 +3046,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    DefaultTableLayoutProperties: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     DetailInitContext: {
         name: string;
         kind: string;
@@ -4037,27 +4048,28 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         desc: string;
-        props: {
+        props: ({
             name: string;
             kind: string;
             desc: string;
-        }[];
+            isOpt?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        })[];
     };
     InFilterValueInfo: {
         name: string;
         kind: string;
         desc: string;
-        props: ({
+        props: {
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt?: undefined;
-        })[];
+        }[];
     };
     InitialState: {
         name: string;
@@ -4244,13 +4256,13 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             desc: string;
             isOpt: boolean;
-            ref: string;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
-            ref?: undefined;
+            ref: string;
         })[];
     };
     LayoutState: {