@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/data-view/core/group-by/matcher.js

@@ -4,6 +4,19 @@ import { groupByMatchers } from './define.js';
 export const createGroupByMatcher = (list) => {
     return new Matcher_(list, v => v.matchType);
 };
+/**
+ * Resolve a group-by config by the name a stored `groupBy` carries. A property
+ * type can offer several configs — a date reads as relative, by day, by week,
+ * by month or by year — and only the stored name says which one the reader
+ * chose; matching on the type alone would silently snap back to the default.
+ */
+export const findGroupByConfigByName = (dataSource, name) => {
+    const service = getGroupByService(dataSource);
+    return [
+        ...(service?.allExternalGroupByConfig() ?? []),
+        ...groupByMatchers,
+    ].find(config => config.name === name);
+};
 export class GroupByService {
     constructor(dataSource) {
         this.dataSource = dataSource;

package/dist/_pkgs/data-view/core/group-by/renderer/boolean-group.js

@@ -2,21 +2,21 @@ import { CheckBoxCheckSolidIcon, CheckBoxUnIcon } from '@blocksuite/icons/lit';
 import { css, html } from 'lit';
 import { BaseGroup } from './base.js';
 export class BooleanGroupView extends BaseGroup {
-    static { this.styles = css `
-    .data-view-group-title-boolean-view {
-      display: flex;
-      align-items: center;
-    }
-    .data-view-group-title-boolean-view svg {
-      width: 20px;
-      height: 20px;
-    }
+    static { this.styles = css `
+    .data-view-group-title-boolean-view {
+      display: flex;
+      align-items: center;
+    }
+    .data-view-group-title-boolean-view svg {
+      width: 20px;
+      height: 20px;
+    }
   `; }
     render() {
-        return html ` <div class="data-view-group-title-boolean-view">
+        return html ` <div class="data-view-group-title-boolean-view">
       ${this.value
             ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
-            : CheckBoxUnIcon()}
+            : CheckBoxUnIcon()}
     </div>`;
     }
 }

package/dist/_pkgs/data-view/core/group-by/renderer/date-group.d.ts

@@ -0,0 +1,9 @@
+import { ShadowlessElement } from '../../../../std/index.js';
+import type { Group } from '../trait.js';
+declare const DateGroupView_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
+export declare class DateGroupView extends DateGroupView_base {
+    static styles: import("lit").CSSResult;
+    accessor group: Group;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/_pkgs/data-view/core/group-by/renderer/date-group.js

@@ -0,0 +1,97 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../../std/index.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+let DateGroupView = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _group_decorators;
+    let _group_initializers = [];
+    let _group_extraInitializers = [];
+    return class DateGroupView extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _group_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _group_decorators, { kind: "accessor", name: "group", static: false, private: false, access: { has: obj => "group" in obj, get: obj => obj.group, set: (obj, value) => { obj.group = value; } }, metadata: _metadata }, _group_initializers, _group_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    .dv-date-group {
+      border-radius: 8px;
+      padding: 4px 8px;
+      width: max-content;
+      cursor: default;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .dv-date-group:hover {
+      background-color: var(--affine-hover-color);
+    }
+    .counter {
+      flex-shrink: 0;
+      min-width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      background: var(--affine-background-secondary-color);
+      color: var(--affine-text-secondary-color);
+      font-size: var(--data-view-cell-text-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `; }
+        #group_accessor_storage = __runInitializers(this, _group_initializers, void 0);
+        get group() { return this.#group_accessor_storage; }
+        set group(value) { this.#group_accessor_storage = value; }
+        render() {
+            const name = this.group.name$.value;
+            // Use contextual name based on the property when value is null
+            const displayName = name ||
+                (this.group.value === null
+                    ? `No ${this.group.property.name$.value}`
+                    : 'Ungroups');
+            return html `<div class="dv-date-group">
+      <span>${displayName}</span>
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _group_extraInitializers);
+        }
+    };
+})();
+export { DateGroupView };

package/dist/_pkgs/data-view/core/group-by/setting.js

@@ -200,6 +200,73 @@ let GroupSetting = (() => {
     };
 })();
 export { GroupSetting };
+/**
+ * The grains a date property can be read at, in the order the picker offers
+ * them. Keys match the group-by config names registered in `define.ts`.
+ */
+const dateGroupModes = [
+    { name: 'date-relative', label: 'Relative' },
+    { name: 'date-day', label: 'Day' },
+    { name: 'date-week-mon', label: 'Week (starts Monday)' },
+    { name: 'date-week-sun', label: 'Week (starts Sunday)' },
+    { name: 'date-month', label: 'Month' },
+    { name: 'date-year', label: 'Year' },
+];
+const dateGroupModeLabel = (name) => dateGroupModes.find(mode => mode.name === name)?.label ?? '';
+const dateGroupSettingItems = (group, reopen) => [
+    menu.subMenu({
+        name: 'Group dates by',
+        postfix: html `
+      <div
+        style="font-size: 12px;line-height: 20px;color: var(--affine-text-secondary-color);margin-right: 4px;margin-left: 8px;"
+      >
+        ${dateGroupModeLabel(group.groupInfo$.value?.config.name)}
+      </div>
+    `,
+        options: {
+            title: { text: 'Group dates by' },
+            items: dateGroupModes.map(mode => menu.action({
+                name: mode.label,
+                isSelected: group.groupInfo$.value?.config.name === mode.name,
+                select: () => {
+                    group.changeGroupMode(mode.name);
+                    reopen();
+                },
+            })),
+        },
+    }),
+    menu.subMenu({
+        name: 'Order',
+        postfix: html `
+      <div
+        style="font-size: 12px;line-height: 20px;color: var(--affine-text-secondary-color);margin-right: 4px;margin-left: 8px;"
+      >
+        ${group.sortAsc$.value ? 'Oldest first' : 'Newest first'}
+      </div>
+    `,
+        options: {
+            title: { text: 'Order' },
+            items: [
+                menu.action({
+                    name: 'Oldest first',
+                    isSelected: group.sortAsc$.value,
+                    select: () => {
+                        group.setDateSortOrder(true);
+                        reopen();
+                    },
+                }),
+                menu.action({
+                    name: 'Newest first',
+                    isSelected: !group.sortAsc$.value,
+                    select: () => {
+                        group.setDateSortOrder(false);
+                        reopen();
+                    },
+                }),
+            ],
+        },
+    }),
+];
 export const selectGroupByProperty = (group, ops) => {
     const view = group.view;
     return {
@@ -301,13 +368,25 @@ export const popGroupSetting = (target, group, onBack) => {
                     ],
                 }),
                 menu.group({
-                    items: [
-                        menu => html ` <data-view-group-setting
-                @mouseenter="${() => menu.closeSubMenu()}"
-                .groupTrait="${group}"
-                .columnId="${groupProperty.id}"
-              ></data-view-group-setting>`,
-                    ],
+                    items: group.isDateGroup$.value
+                        ? dateGroupSettingItems(group, () => {
+                            menuHandler.close();
+                            popGroupSetting(target, group, onBack);
+                        })
+                        : [],
+                }),
+                menu.group({
+                    // A date grouping has no manual group order: its groups are derived
+                    // from the dates themselves and read chronologically.
+                    items: group.isDateGroup$.value
+                        ? []
+                        : [
+                            menu => html ` <data-view-group-setting
+                    @mouseenter="${() => menu.closeSubMenu()}"
+                    .groupTrait="${group}"
+                    .columnId="${groupProperty.id}"
+                  ></data-view-group-setting>`,
+                        ],
                 }),
                 menu.group({
                     items: [

package/dist/_pkgs/data-view/core/group-by/trait.d.ts

@@ -24,10 +24,30 @@ export declare class Group<RawValue = unknown, JsonValue = unknown, Data extends
     get tType(): TypeInstance;
     get view(): import("../../../affine-shared/types/uni-component.js").UniComponent<import("./types.js").GroupRenderProps<unknown, {}>>;
 }
+export declare const isDateGroupInfo: (groupInfo: GroupInfo | undefined) => boolean;
+/**
+ * Order the group keys. Date groups read chronologically — their keys are
+ * timestamps, or the relative buckets from last30 to next30 — so the manual
+ * drag order does not apply to them and `sortGroup` is bypassed.
+ */
+export declare const orderGroupKeys: (keys: string[], groupInfo: GroupInfo | undefined, sortGroup: (keys: string[]) => string[], sortAsc: boolean) => string[];
+/**
+ * Move `groupKey` to `position` inside `keys`, or leave the order untouched
+ * when the move cannot be honoured: an unknown group, an unknown anchor, or a
+ * group dropped onto itself. Reordering blindly would splice at index -1 and
+ * quietly destroy the manual order of an unrelated group.
+ */
+export declare const reorderGroupKeys: (keys: string[], groupKey: string, position: InsertToPosition) => string[];
 export declare class GroupTrait {
     private readonly groupBy$;
     view: SingleView;
     private readonly ops;
+    /**
+     * Reading direction of a date grouping. Kept in a signal so the UI can flip
+     * it, and mirrored from the stored `groupBy.sort` so a reload reads the same
+     * way round.
+     */
+    sortAsc$: import("@preact/signals-core").Signal<boolean>;
     groupInfo$: ReadonlySignal<GroupInfo<unknown, unknown, Record<string, unknown>> | undefined>;
     staticInfo$: ReadonlySignal<{
         staticMap: {
@@ -50,6 +70,20 @@ export declare class GroupTrait {
         changeGroupSort: (keys: string[]) => void;
         changeRowSort: (groupKeys: string[], groupKey: string, keys: string[]) => void;
     });
+    /**
+     * Whether the current grouping reads a date property, and so offers grains
+     * and a reading direction rather than a manual group order.
+     */
+    isDateGroup$: ReadonlySignal<boolean>;
+    /**
+     * Re-read the same property at another grain — relative, day, week, month,
+     * year — keeping the reading direction.
+     */
+    changeGroupMode(modeName: string): void;
+    /**
+     * Flip a date grouping between oldest-first and newest-first.
+     */
+    setDateSortOrder(asc: boolean): void;
     addToGroup(rowId: string, key: string): void;
     changeCardSort(groupKey: string, cardIds: string[]): void;
     changeGroup(columnId: string | undefined): void;

package/dist/_pkgs/data-view/core/group-by/trait.js

@@ -1,9 +1,10 @@
 import { insertPositionToIndex, } from '../../../affine-shared/utils/index.js';
-import { computed } from '@preact/signals-core';
+import { computed, effect, signal, } from '@preact/signals-core';
 import { createTraitKey } from '../traits/key.js';
 import { computedLock } from '../utils/lock.js';
+import { compareDateKeys } from './compare-date-keys.js';
 import { defaultGroupBy } from './default.js';
-import { getGroupByService } from './matcher.js';
+import { findGroupByConfigByName, getGroupByService } from './matcher.js';
 export class Group {
     constructor(key, value, groupInfo, manager) {
         this.key = key;
@@ -32,6 +33,46 @@ export class Group {
         return this.config.view;
     }
 }
+export const isDateGroupInfo = (groupInfo) => groupInfo?.config.matchType.name === 'Date';
+/**
+ * Order the group keys. Date groups read chronologically — their keys are
+ * timestamps, or the relative buckets from last30 to next30 — so the manual
+ * drag order does not apply to them and `sortGroup` is bypassed.
+ */
+export const orderGroupKeys = (keys, groupInfo, sortGroup, sortAsc) => {
+    if (isDateGroupInfo(groupInfo)) {
+        return [...keys].sort(compareDateKeys(groupInfo?.config.name, sortAsc));
+    }
+    return sortGroup(keys);
+};
+/**
+ * Move `groupKey` to `position` inside `keys`, or leave the order untouched
+ * when the move cannot be honoured: an unknown group, an unknown anchor, or a
+ * group dropped onto itself. Reordering blindly would splice at index -1 and
+ * quietly destroy the manual order of an unrelated group.
+ */
+export const reorderGroupKeys = (keys, groupKey, position) => {
+    const currentIndex = keys.findIndex(key => key === groupKey);
+    if (currentIndex < 0) {
+        return keys;
+    }
+    if (typeof position === 'object') {
+        if (position.id === groupKey) {
+            return keys;
+        }
+        if (!keys.includes(position.id)) {
+            return keys;
+        }
+    }
+    const reordered = [...keys];
+    reordered.splice(currentIndex, 1);
+    const index = insertPositionToIndex(position, reordered, key => key);
+    if (index < 0) {
+        return keys;
+    }
+    reordered.splice(index, 0, groupKey);
+    return reordered;
+};
 export class GroupTrait {
     get addGroup() {
         return this.property$.value?.meta$.value?.config.addGroup;
@@ -40,6 +81,12 @@ export class GroupTrait {
         this.groupBy$ = groupBy$;
         this.view = view;
         this.ops = ops;
+        /**
+         * Reading direction of a date grouping. Kept in a signal so the UI can flip
+         * it, and mirrored from the stored `groupBy.sort` so a reload reads the same
+         * way round.
+         */
+        this.sortAsc$ = signal(true);
         this.groupInfo$ = computed(() => {
             const groupBy = this.groupBy$.value;
             if (!groupBy) {
@@ -54,7 +101,12 @@ export class GroupTrait {
                 return;
             }
             const groupByService = getGroupByService(this.view.manager.dataSource);
-            const result = groupByService?.matcher.match(tType);
+            // The stored name wins: a date property offers several grains and only the
+            // name says which one was chosen. Matching on the type alone would snap a
+            // "by month" grouping back to the default grain on every reload.
+            const result = (groupBy.name != null
+                ? findGroupByConfigByName(this.view.manager.dataSource, groupBy.name)
+                : undefined) ?? groupByService?.matcher.match(tType);
             if (!result) {
                 return;
             }
@@ -105,7 +157,7 @@ export class GroupTrait {
             if (!groupMap) {
                 return;
             }
-            const sortedGroup = this.ops.sortGroup(Object.keys(groupMap));
+            const sortedGroup = orderGroupKeys(Object.keys(groupMap), this.groupInfo$.value, this.ops.sortGroup, this.sortAsc$.value);
             sortedGroup.forEach(key => {
                 if (!groupMap[key])
                     return;
@@ -129,6 +181,44 @@ export class GroupTrait {
             }
             return groupInfo.property;
         });
+        /**
+         * Whether the current grouping reads a date property, and so offers grains
+         * and a reading direction rather than a manual group order.
+         */
+        this.isDateGroup$ = computed(() => isDateGroupInfo(this.groupInfo$.value));
+        // Mirror the stored reading direction into the signal the UI drives.
+        effect(() => {
+            const desc = this.groupBy$.value?.sort?.desc;
+            if (desc != null && this.sortAsc$.value === desc) {
+                this.sortAsc$.value = !desc;
+            }
+        });
+    }
+    /**
+     * Re-read the same property at another grain — relative, day, week, month,
+     * year — keeping the reading direction.
+     */
+    changeGroupMode(modeName) {
+        const propertyId = this.property$.value?.id;
+        if (!propertyId) {
+            return;
+        }
+        this.ops.groupBySet({
+            type: 'groupBy',
+            columnId: propertyId,
+            name: modeName,
+            sort: { desc: !this.sortAsc$.value },
+        });
+    }
+    /**
+     * Flip a date grouping between oldest-first and newest-first.
+     */
+    setDateSortOrder(asc) {
+        this.sortAsc$.value = asc;
+        const groupBy = this.groupBy$.value;
+        if (groupBy) {
+            this.ops.groupBySet({ ...groupBy, sort: { desc: !asc } });
+        }
     }
     addToGroup(rowId, key) {
         this.view.lockRows(false);
@@ -164,7 +254,11 @@ export class GroupTrait {
         const column = this.view.propertyGetOrCreate(columnId);
         const propertyMeta = this.view.manager.dataSource.propertyMetaGet(column.type$.value);
         if (propertyMeta) {
-            this.ops.groupBySet(defaultGroupBy(this.view.manager.dataSource, propertyMeta, column.id, column.data$.value));
+            const groupBy = defaultGroupBy(this.view.manager.dataSource, propertyMeta, column.id, column.data$.value);
+            if (groupBy) {
+                groupBy.sort = { desc: !this.sortAsc$.value };
+            }
+            this.ops.groupBySet(groupBy);
         }
     }
     changeGroupSort(keys) {
@@ -214,11 +308,13 @@ export class GroupTrait {
         if (!groups) {
             return;
         }
-        const keys = groups.map(v => v.key);
-        keys.splice(keys.findIndex(key => key === groupKey), 1);
-        const index = insertPositionToIndex(position, keys, key => key);
-        keys.splice(index, 0, groupKey);
-        this.changeGroupSort(keys);
+        const currentKeys = groups.map(v => v.key);
+        const reorderedKeys = reorderGroupKeys(currentKeys, groupKey, position);
+        if (currentKeys.length === reorderedKeys.length &&
+            currentKeys.every((key, index) => key === reorderedKeys[index])) {
+            return;
+        }
+        this.changeGroupSort(reorderedKeys);
     }
     removeFromGroup(rowId, key) {
         this.view.lockRows(false);

package/dist/_pkgs/data-view/core/utils/menu-title.js

@@ -1,22 +1,22 @@
 import { ArrowLeftBigIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 export const menuTitle = (name, onBack) => {
-    return html `
-    <div
-      style="display:flex;align-items:center;gap: 4px;padding: 3px 3px 3px 2px"
-    >
-      <div
-        @click=${onBack}
-        class="dv-icon-20 dv-hover dv-pd-2 dv-round-4"
-        style="display:flex;"
-      >
-        ${ArrowLeftBigIcon()}
-      </div>
-      <div
-        style="font-weight:500;font-size: 14px;line-height: 22px;color: var(--affine-text-primary-color)"
-      >
-        ${name}
-      </div>
-    </div>
+    return html `
+    <div
+      style="display:flex;align-items:center;gap: 4px;padding: 3px 3px 3px 2px"
+    >
+      <div
+        @click=${onBack}
+        class="dv-icon-20 dv-hover dv-pd-2 dv-round-4"
+        style="display:flex;"
+      >
+        ${ArrowLeftBigIcon()}
+      </div>
+      <div
+        style="font-weight:500;font-size: 14px;line-height: 22px;color: var(--affine-text-primary-color)"
+      >
+        ${name}
+      </div>
+    </div>
   `;
 };

package/dist/_pkgs/data-view/property-presets/multi-select/cell-renderer.js

@@ -1,7 +1,7 @@
 import { popupTargetFromElement } from '../../../affine-components/context-menu/index.js';
 import { computed } from '@preact/signals-core';
 import { html } from 'lit/static-html.js';
-import { popTagSelect } from '../../core/component/tags/multi-tag-select.js';
+import { consumeTagDraftFromTableCellHost, popTagSelect, } from '../../core/component/tags/multi-tag-select.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
@@ -12,6 +12,7 @@ export class MultiSelectCell extends BaseCellRenderer {
     constructor() {
         super(...arguments);
         this.popTagSelect = () => {
+            const initialDraftText = consumeTagDraftFromTableCellHost(this);
             this.closePopup = popTagSelect(popupTargetFromElement(this), {
                 name: this.cell.property.name$.value,
                 options: this.options$,
@@ -22,6 +23,7 @@ export class MultiSelectCell extends BaseCellRenderer {
                 },
                 onComplete: this._editComplete,
                 minWidth: 400,
+                initialDraftText,
             });
         };
         this._editComplete = () => {

package/dist/_pkgs/data-view/property-presets/number/define.js

@@ -2,6 +2,7 @@ import zod from 'zod';
 import { t } from '../../core/logical/type-presets.js';
 import { propertyType } from '../../core/property/property-config.js';
 import { NumberPropertySchema } from './types.js';
+import { parseNumber } from './utils/formatter.js';
 export const numberPropertyType = propertyType('number');
 export const numberPropertyModelConfig = numberPropertyType.modelConfig({
     name: 'Number',
@@ -19,7 +20,7 @@ export const numberPropertyModelConfig = numberPropertyType.modelConfig({
         default: () => null,
         toString: ({ value }) => value?.toString() ?? '',
         fromString: ({ value }) => {
-            const num = value ? Number(value) : NaN;
+            const num = value ? parseNumber(value) : NaN;
             return { value: isNaN(num) ? null : num };
         },
         toJson: ({ value }) => value ?? null,

package/dist/_pkgs/data-view/property-presets/select/cell-renderer.js

@@ -1,7 +1,7 @@
 import { popupTargetFromElement } from '../../../affine-components/context-menu/index.js';
 import { computed } from '@preact/signals-core';
 import { html } from 'lit/static-html.js';
-import { popTagSelect } from '../../core/component/tags/multi-tag-select.js';
+import { consumeTagDraftFromTableCellHost, popTagSelect, } from '../../core/component/tags/multi-tag-select.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
@@ -11,6 +11,7 @@ export class SelectCell extends BaseCellRenderer {
     constructor() {
         super(...arguments);
         this.popTagSelect = () => {
+            const initialDraftText = consumeTagDraftFromTableCellHost(this);
             this.closePopup = popTagSelect(popupTargetFromElement(this), {
                 name: this.cell.property.name$.value,
                 mode: 'single',
@@ -22,6 +23,7 @@ export class SelectCell extends BaseCellRenderer {
                 },
                 onComplete: this._editComplete,
                 minWidth: 400,
+                initialDraftText,
             });
         };
         this._editComplete = () => {