@gtkx/react 0.14.0 → 0.16.0

package/dist/nodes/internal/list-item-renderer.js

@@ -1,84 +1,63 @@
-import { getNativeId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { createFiberRoot } from "../../fiber-root.js";
 import { reconciler } from "../../reconciler.js";
-import { signalStore } from "./signal-store.js";
-export class ListItemRenderer {
-    factory;
-    store;
-    fiberRoots = new Map();
-    tornDown = new Set();
+import { BaseItemRenderer } from "./base-item-renderer.js";
+export class ListItemRenderer extends BaseItemRenderer {
     renderFn = () => null;
-    estimatedItemHeight;
-    constructor() {
-        this.factory = new Gtk.SignalListItemFactory();
-        this.initialize();
-    }
-    getFactory() {
-        return this.factory;
-    }
+    boundItems = new Map();
     setRenderFn(renderFn) {
         this.renderFn = renderFn;
     }
-    setStore(store) {
-        this.store = store;
+    rebindItem(id) {
+        const ptr = this.boundItems.get(id);
+        if (ptr === undefined)
+            return;
+        const fiberRoot = this.fiberRoots.get(ptr);
+        if (!fiberRoot)
+            return;
+        const item = this.getStore().getItem(id);
+        const element = this.renderFn?.(item);
+        reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
     }
-    setEstimatedItemHeight(height) {
-        this.estimatedItemHeight = height;
+    getStoreTypeName() {
+        return "list store";
     }
-    getStore() {
-        if (!this.store) {
-            throw new Error("Expected list store to be set on ListItemRenderer");
-        }
-        return this.store;
+    renderItem(_ptr) {
+        return this.renderFn?.(null);
     }
-    initialize() {
-        signalStore.set(this, this.factory, "setup", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const box = new Gtk.Box(Gtk.Orientation.VERTICAL);
-            if (this.estimatedItemHeight !== undefined) {
-                box.setSizeRequest(-1, this.estimatedItemHeight);
-            }
-            listItem.setChild(box);
-            const fiberRoot = createFiberRoot(box);
-            this.fiberRoots.set(ptr, fiberRoot);
-            const element = this.renderFn?.(null);
-            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
-        });
-        signalStore.set(this, this.factory, "bind", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            if (!fiberRoot)
+    getItemFromListItem(listItem) {
+        const stringObject = listItem.getItem();
+        if (!(stringObject instanceof Gtk.StringObject))
+            return null;
+        return stringObject.getString();
+    }
+    onSetup(listItem, _ptr) {
+        const box = this.createBox();
+        listItem.setChild(box);
+        return box;
+    }
+    onBind(listItem, ptr, fiberRoot) {
+        const id = this.getItemFromListItem(listItem);
+        if (id !== null) {
+            this.boundItems.set(id, ptr);
+        }
+        const item = id !== null ? this.getStore().getItem(id) : null;
+        const element = this.renderFn?.(item);
+        reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
+            if (this.tornDown.has(ptr))
                 return;
-            const stringObject = listItem.getItem();
-            if (!(stringObject instanceof Gtk.StringObject))
+            if (this.estimatedItemHeight !== null)
                 return;
-            const item = this.getStore().getItem(stringObject.getString());
-            const element = this.renderFn?.(item);
-            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
-                if (this.tornDown.has(ptr))
-                    return;
-                const currentFiberRoot = this.fiberRoots.get(ptr);
-                if (!currentFiberRoot)
-                    return;
-                const box = currentFiberRoot.containerInfo;
-                if (box instanceof Gtk.Box) {
-                    box.setSizeRequest(-1, -1);
-                }
-            });
-        });
-        signalStore.set(this, this.factory, "unbind", () => { });
-        signalStore.set(this, this.factory, "teardown", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            if (fiberRoot) {
-                this.tornDown.add(ptr);
-                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
-                queueMicrotask(() => {
-                    this.fiberRoots.delete(ptr);
-                    this.tornDown.delete(ptr);
-                });
-            }
+            const currentFiberRoot = this.fiberRoots.get(ptr);
+            if (!currentFiberRoot)
+                return;
+            this.clearBoxSizeRequest(currentFiberRoot.containerInfo);
         });
     }
+    onUnbind(listItem) {
+        const id = this.getItemFromListItem(listItem);
+        if (id !== null) {
+            this.boundItems.delete(id);
+        }
+    }
+    onTeardown(_listItem, _ptr) { }
 }

package/dist/nodes/internal/list-store.d.ts

@@ -1,16 +1,17 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-export declare class ListStore {
-    private items;
+import { BaseStore } from "./base-store.js";
+export type ItemUpdatedCallback = (id: string) => void;
+export declare class ListStore extends BaseStore<unknown> {
     private model;
     private newSortedIds;
+    private newIdSet;
     private sortedIds;
-    private shouldSync;
+    private onItemUpdated;
+    setOnItemUpdated(callback: ItemUpdatedCallback | null): void;
     addItem(id: string, item: unknown): void;
     removeItem(id: string): void;
     insertItemBefore(id: string, beforeId: string, item: unknown): void;
     updateItem(id: string, item: unknown): void;
-    getItem(id: string): unknown;
     getModel(): Gtk.StringList;
-    private scheduleSync;
-    private sync;
+    protected sync(): void;
 }

package/dist/nodes/internal/list-store.js

@@ -1,32 +1,37 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
-export class ListStore {
-    items = new Map();
+import { BaseStore } from "./base-store.js";
+export class ListStore extends BaseStore {
     model = new Gtk.StringList();
     newSortedIds = [];
+    newIdSet = new Set();
     sortedIds = [];
-    shouldSync = false;
+    onItemUpdated = null;
+    setOnItemUpdated(callback) {
+        this.onItemUpdated = callback;
+    }
     addItem(id, item) {
         this.items.set(id, item);
-        const existingIndex = this.newSortedIds.indexOf(id);
-        if (existingIndex !== -1) {
+        if (this.newIdSet.has(id)) {
+            const existingIndex = this.newSortedIds.indexOf(id);
             this.newSortedIds.splice(existingIndex, 1);
         }
         this.newSortedIds.push(id);
+        this.newIdSet.add(id);
         this.scheduleSync();
     }
     removeItem(id) {
+        if (!this.newIdSet.has(id))
+            return;
         const index = this.newSortedIds.indexOf(id);
-        if (index !== -1) {
-            this.newSortedIds.splice(index, 1);
-            this.items.delete(id);
-            this.scheduleSync();
-        }
+        this.newSortedIds.splice(index, 1);
+        this.newIdSet.delete(id);
+        this.items.delete(id);
+        this.scheduleSync();
     }
     insertItemBefore(id, beforeId, item) {
         this.items.set(id, item);
-        const existingIndex = this.newSortedIds.indexOf(id);
-        if (existingIndex !== -1) {
+        if (this.newIdSet.has(id)) {
+            const existingIndex = this.newSortedIds.indexOf(id);
             this.newSortedIds.splice(existingIndex, 1);
         }
         const beforeIndex = this.newSortedIds.indexOf(beforeId);
@@ -36,31 +41,22 @@ export class ListStore {
         else {
             this.newSortedIds.splice(beforeIndex, 0, id);
         }
+        this.newIdSet.add(id);
         this.scheduleSync();
     }
     updateItem(id, item) {
         if (this.items.has(id)) {
             this.items.set(id, item);
+            this.onItemUpdated?.(id);
         }
         else {
             this.addItem(id, item);
         }
     }
-    getItem(id) {
-        return this.items.get(id);
-    }
     getModel() {
         return this.model;
     }
-    scheduleSync() {
-        if (this.shouldSync) {
-            return;
-        }
-        this.shouldSync = true;
-        scheduleAfterCommit(() => this.sync(), CommitPriority.LOW);
-    }
     sync() {
-        this.shouldSync = false;
         const newOrder = this.newSortedIds;
         const oldLength = this.sortedIds.length;
         this.model.splice(0, oldLength, newOrder.length > 0 ? newOrder : undefined);

package/dist/nodes/internal/predicates.d.ts

@@ -1,4 +1,20 @@
+/**
+ * Runtime type predicates for GTK widget capability detection.
+ *
+ * These predicates check for specific APIs that widgets may or may not expose.
+ * GTK widgets don't have a consistent interface - different widgets support
+ * different child management APIs - so runtime checking is necessary.
+ *
+ * Predicate evaluation order matters in WidgetNode.appendChild/removeChild:
+ * 1. isReorderable (Box, etc.) - reorderChildAfter/insertChildAfter
+ * 2. isInsertable (ListBox, etc.) - insert
+ * 3. isAppendable (most containers) - append
+ * 4. isAddable (some legacy widgets) - add
+ * 5. isContentWidget (ActionBar, etc.) - setContent
+ * 6. isSingleChild (Bin subclasses) - setChild
+ */
 import * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../../node.js";
 type AppendableWidget = Gtk.Widget & {
     append: (child: Gtk.Widget) => void;
 };
@@ -27,12 +43,23 @@ type EditableWidget = Gtk.Widget & {
     setPosition: (position: number) => void;
     getText: () => string;
 };
+export type AdjustableWidget = Gtk.Widget & {
+    setAdjustment: (adjustment: Gtk.Adjustment) => void;
+    getValue: () => number;
+};
 export declare const isAppendable: (obj: unknown) => obj is AppendableWidget;
 export declare const isAddable: (obj: unknown) => obj is AddableWidget;
-export declare const hasSingleContent: (obj: unknown) => obj is ContentWidget;
+export declare const isContentWidget: (obj: unknown) => obj is ContentWidget;
 export declare const isSingleChild: (obj: unknown) => obj is SingleChildWidget;
 export declare const isRemovable: (obj: unknown) => obj is RemovableWidget;
 export declare const isReorderable: (obj: unknown) => obj is ReorderableWidget;
 export declare const isInsertable: (obj: unknown) => obj is InsertableWidget;
 export declare const isEditable: (obj: unknown) => obj is EditableWidget;
+export declare const isBufferedType: (type: string) => boolean;
+export type Attachable = {
+    canBeChildOf(parent: Node): boolean;
+    attachTo(parent: Node): void;
+    detachFrom(parent: Node): void;
+};
+export declare function isAttachable(node: Node): node is Node & Attachable;
 export {};

package/dist/nodes/internal/predicates.js

@@ -1,39 +1,54 @@
+/**
+ * Runtime type predicates for GTK widget capability detection.
+ *
+ * These predicates check for specific APIs that widgets may or may not expose.
+ * GTK widgets don't have a consistent interface - different widgets support
+ * different child management APIs - so runtime checking is necessary.
+ *
+ * Predicate evaluation order matters in WidgetNode.appendChild/removeChild:
+ * 1. isReorderable (Box, etc.) - reorderChildAfter/insertChildAfter
+ * 2. isInsertable (ListBox, etc.) - insert
+ * 3. isAppendable (most containers) - append
+ * 4. isAddable (some legacy widgets) - add
+ * 5. isContentWidget (ActionBar, etc.) - setContent
+ * 6. isSingleChild (Bin subclasses) - setChild
+ */
 import * as Gtk from "@gtkx/ffi/gtk";
-export const isAppendable = (obj) => {
-    return obj instanceof Gtk.Widget && "append" in obj && typeof obj.append === "function";
-};
-export const isAddable = (obj) => {
-    return obj instanceof Gtk.Widget && "add" in obj && typeof obj.add === "function";
-};
-export const hasSingleContent = (obj) => {
-    return obj instanceof Gtk.Widget && "setContent" in obj && typeof obj.setContent === "function";
-};
-export const isSingleChild = (obj) => {
-    return obj instanceof Gtk.Widget && "setChild" in obj && typeof obj.setChild === "function";
-};
-export const isRemovable = (obj) => {
-    return obj instanceof Gtk.Widget && "remove" in obj && typeof obj.remove === "function";
-};
-export const isReorderable = (obj) => {
-    return (obj instanceof Gtk.Widget &&
-        "reorderChildAfter" in obj &&
-        typeof obj.reorderChildAfter === "function" &&
-        "insertChildAfter" in obj &&
-        typeof obj.insertChildAfter === "function");
-};
-export const isInsertable = (obj) => {
-    return (obj instanceof Gtk.Widget &&
-        "insert" in obj &&
-        typeof obj.insert === "function" &&
-        "getFirstChild" in obj &&
-        typeof obj.getFirstChild === "function");
-};
-export const isEditable = (obj) => {
-    return (obj instanceof Gtk.Widget &&
-        "getPosition" in obj &&
-        typeof obj.getPosition === "function" &&
-        "setPosition" in obj &&
-        typeof obj.setPosition === "function" &&
-        "getText" in obj &&
-        typeof obj.getText === "function");
-};
+import { resolveContainerClass } from "../../factory.js";
+export const isAppendable = (obj) => obj instanceof Gtk.Widget && "append" in obj && typeof obj.append === "function";
+export const isAddable = (obj) => obj instanceof Gtk.Widget && "add" in obj && typeof obj.add === "function";
+export const isContentWidget = (obj) => obj instanceof Gtk.Widget && "setContent" in obj && typeof obj.setContent === "function";
+export const isSingleChild = (obj) => obj instanceof Gtk.Widget && "setChild" in obj && typeof obj.setChild === "function";
+export const isRemovable = (obj) => obj instanceof Gtk.Widget && "remove" in obj && typeof obj.remove === "function";
+export const isReorderable = (obj) => obj instanceof Gtk.Widget &&
+    "reorderChildAfter" in obj &&
+    typeof obj.reorderChildAfter === "function" &&
+    "insertChildAfter" in obj &&
+    typeof obj.insertChildAfter === "function";
+export const isInsertable = (obj) => obj instanceof Gtk.Widget &&
+    "insert" in obj &&
+    typeof obj.insert === "function" &&
+    "getFirstChild" in obj &&
+    typeof obj.getFirstChild === "function";
+export const isEditable = (obj) => obj instanceof Gtk.Widget &&
+    "getPosition" in obj &&
+    typeof obj.getPosition === "function" &&
+    "setPosition" in obj &&
+    typeof obj.setPosition === "function" &&
+    "getText" in obj &&
+    typeof obj.getText === "function";
+const isBuffered = (obj) => obj instanceof Gtk.Widget &&
+    "getBuffer" in obj &&
+    typeof obj.getBuffer === "function" &&
+    "setBuffer" in obj &&
+    typeof obj.setBuffer === "function";
+export const isBufferedType = (type) => {
+    const containerClass = resolveContainerClass(type);
+    return containerClass !== null && isBuffered(containerClass.prototype);
+};
+export function isAttachable(node) {
+    const candidate = node;
+    return (typeof candidate.canBeChildOf === "function" &&
+        typeof candidate.attachTo === "function" &&
+        typeof candidate.detachFrom === "function");
+}

package/dist/nodes/internal/selection-model.d.ts

@@ -0,0 +1,30 @@
+import type * as Gio from "@gtkx/ffi/gio";
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { SignalStore } from "./signal-store.js";
+type SelectionModel = Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection;
+export type SelectionModelConfig = {
+    owner: object;
+    signalStore: SignalStore;
+    selectionMode?: Gtk.SelectionMode;
+    selected?: string[];
+    onSelectionChanged?: (ids: string[]) => void;
+};
+export declare class SelectionModelManager {
+    private owner;
+    private signalStore;
+    private selectionModel;
+    private handleSelectionChange;
+    private pendingSelection;
+    private selectionAction;
+    private getSelection;
+    private resolveSelectionIndices;
+    private getItemCount;
+    constructor(config: SelectionModelConfig, model: Gio.ListModel, getSelection: () => string[], resolveSelectionIndices: (ids: string[]) => Gtk.Bitset, getItemCount: () => number);
+    getSelectionModel(): SelectionModel;
+    update(oldProps: SelectionModelConfig | null, newProps: SelectionModelConfig, model: Gio.ListModel): SelectionModel;
+    private initSelectionHandler;
+    private createSelectionModel;
+    private setSelection;
+    private applySelection;
+}
+export {};

package/dist/nodes/internal/selection-model.js

@@ -0,0 +1,91 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { CommitPriority } from "../../scheduler.js";
+import { DeferredAction } from "./deferred-action.js";
+export class SelectionModelManager {
+    owner;
+    signalStore;
+    selectionModel;
+    handleSelectionChange = null;
+    pendingSelection = null;
+    selectionAction;
+    getSelection;
+    resolveSelectionIndices;
+    getItemCount;
+    constructor(config, model, getSelection, resolveSelectionIndices, getItemCount) {
+        this.owner = config.owner;
+        this.signalStore = config.signalStore;
+        this.selectionModel = this.createSelectionModel(config.selectionMode, model);
+        this.selectionModel.setModel(model);
+        this.getSelection = getSelection;
+        this.resolveSelectionIndices = resolveSelectionIndices;
+        this.getItemCount = getItemCount;
+        this.selectionAction = new DeferredAction(() => this.applySelection(), CommitPriority.LOW);
+        this.initSelectionHandler(config.onSelectionChanged);
+        this.setSelection(config.selected);
+    }
+    getSelectionModel() {
+        return this.selectionModel;
+    }
+    update(oldProps, newProps, model) {
+        if (oldProps && oldProps.selectionMode !== newProps.selectionMode) {
+            this.signalStore.set(this.owner, this.selectionModel, "selection-changed", null);
+            this.selectionModel = this.createSelectionModel(newProps.selectionMode, model);
+            this.selectionModel.setModel(model);
+            this.initSelectionHandler(newProps.onSelectionChanged);
+            this.setSelection(newProps.selected);
+            return this.selectionModel;
+        }
+        if (!oldProps || oldProps.onSelectionChanged !== newProps.onSelectionChanged) {
+            this.initSelectionHandler(newProps.onSelectionChanged);
+        }
+        if (!oldProps || oldProps.selected !== newProps.selected) {
+            this.setSelection(newProps.selected);
+        }
+        return this.selectionModel;
+    }
+    initSelectionHandler(onSelectionChanged) {
+        if (!onSelectionChanged) {
+            this.signalStore.set(this.owner, this.selectionModel, "selection-changed", null);
+            return;
+        }
+        this.handleSelectionChange = () => {
+            onSelectionChanged(this.getSelection());
+        };
+        this.signalStore.set(this.owner, this.selectionModel, "selection-changed", this.handleSelectionChange);
+    }
+    createSelectionModel(mode, model) {
+        const selectionMode = mode ?? Gtk.SelectionMode.SINGLE;
+        if (selectionMode === Gtk.SelectionMode.NONE) {
+            return new Gtk.NoSelection(model);
+        }
+        if (selectionMode === Gtk.SelectionMode.MULTIPLE) {
+            return new Gtk.MultiSelection(model);
+        }
+        const selectionModel = new Gtk.SingleSelection(model);
+        selectionModel.setAutoselect(selectionMode === Gtk.SelectionMode.BROWSE);
+        selectionModel.setCanUnselect(selectionMode !== Gtk.SelectionMode.BROWSE);
+        return selectionModel;
+    }
+    setSelection(ids) {
+        this.pendingSelection = ids ?? null;
+        this.selectionAction.schedule();
+    }
+    applySelection() {
+        const ids = this.pendingSelection;
+        const nItems = this.getItemCount();
+        if (nItems === 0 && ids && ids.length > 0) {
+            this.setSelection(ids);
+            return;
+        }
+        this.pendingSelection = null;
+        const selected = ids ? this.resolveSelectionIndices(ids) : new Gtk.Bitset();
+        const mask = Gtk.Bitset.newRange(0, nItems);
+        if (this.selectionModel instanceof Gtk.SingleSelection) {
+            const position = selected.getSize() > 0 ? selected.getNth(0) : Gtk.INVALID_LIST_POSITION;
+            this.selectionModel.setSelected(position);
+        }
+        else {
+            this.selectionModel.setSelection(selected, mask);
+        }
+    }
+}

package/dist/nodes/internal/signal-store.d.ts

@@ -1,16 +1,18 @@
 import * as GObject from "@gtkx/ffi/gobject";
 type SignalOwner = object;
 export type SignalHandler = (...args: any[]) => any;
-declare class SignalStore {
+export declare class SignalStore {
     private ownerHandlers;
-    private blockedHandlers;
+    private blockDepth;
     private getOwnerMap;
+    private wrapHandler;
     private disconnect;
     private connect;
     set(owner: SignalOwner, obj: GObject.GObject, signal: string, handler?: SignalHandler | null): void;
     clear(owner: SignalOwner): void;
     blockAll(): void;
     unblockAll(): void;
+    forceUnblockAll(): void;
 }
-export declare const signalStore: SignalStore;
+export declare function getSignalStore(rootContainer: object): SignalStore;
 export {};

package/dist/nodes/internal/signal-store.js

@@ -14,10 +14,12 @@ const LIFECYCLE_SIGNALS = new Set([
     "bind",
     "unbind",
     "teardown",
+    "load-changed",
+    "notify",
 ]);
-class SignalStore {
+export class SignalStore {
     ownerHandlers = new Map();
-    blockedHandlers = new Set();
+    blockDepth = 0;
     getOwnerMap(owner) {
         let map = this.ownerHandlers.get(owner);
         if (!map) {
@@ -26,6 +28,15 @@ class SignalStore {
         }
         return map;
     }
+    wrapHandler(handler, signal) {
+        return (...args) => {
+            if (this.blockDepth > 0 && !LIFECYCLE_SIGNALS.has(signal)) {
+                return;
+            }
+            const [self, ...rest] = args;
+            return handler(...rest, self);
+        };
+    }
     disconnect(owner, obj, signal) {
         const objectId = getNativeId(obj.handle);
         const key = `${objectId}:${signal}`;
@@ -39,7 +50,8 @@ class SignalStore {
     connect(owner, obj, signal, handler) {
         const objectId = getNativeId(obj.handle);
         const key = `${objectId}:${signal}`;
-        const handlerId = obj.connect(signal, handler);
+        const wrappedHandler = this.wrapHandler(handler, signal);
+        const handlerId = obj.connect(signal, wrappedHandler);
         this.getOwnerMap(owner).set(key, { obj, handlerId });
     }
     set(owner, obj, signal, handler) {
@@ -58,26 +70,23 @@ class SignalStore {
         }
     }
     blockAll() {
-        this.blockedHandlers.clear();
-        for (const ownerMap of this.ownerHandlers.values()) {
-            for (const [key, { obj, handlerId }] of ownerMap.entries()) {
-                if (LIFECYCLE_SIGNALS.has(key.split(":")[1] ?? "")) {
-                    continue;
-                }
-                GObject.signalHandlerBlock(obj, handlerId);
-                this.blockedHandlers.add(handlerId);
-            }
-        }
+        this.blockDepth++;
     }
     unblockAll() {
-        for (const ownerMap of this.ownerHandlers.values()) {
-            for (const { obj, handlerId } of ownerMap.values()) {
-                if (this.blockedHandlers.has(handlerId)) {
-                    GObject.signalHandlerUnblock(obj, handlerId);
-                }
-            }
+        if (this.blockDepth > 0) {
+            this.blockDepth--;
         }
-        this.blockedHandlers.clear();
     }
+    forceUnblockAll() {
+        this.blockDepth = 0;
+    }
+}
+const signalStores = new WeakMap();
+export function getSignalStore(rootContainer) {
+    let store = signalStores.get(rootContainer);
+    if (!store) {
+        store = new SignalStore();
+        signalStores.set(rootContainer, store);
+    }
+    return store;
 }
-export const signalStore = new SignalStore();

package/dist/nodes/internal/simple-list-store.js

@@ -1,4 +1,3 @@
-import { batch } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
 export class SimpleListStore {
     ids = [];
@@ -9,14 +8,12 @@ export class SimpleListStore {
     }
     appendItem(id, label) {
         const existingIndex = this.ids.indexOf(id);
-        batch(() => {
-            if (existingIndex >= 0) {
-                this.model.remove(existingIndex);
-                this.ids.splice(existingIndex, 1);
-            }
-            this.ids.push(id);
-            this.model.append(label);
-        });
+        if (existingIndex >= 0) {
+            this.model.remove(existingIndex);
+            this.ids.splice(existingIndex, 1);
+        }
+        this.ids.push(id);
+        this.model.append(label);
     }
     removeItem(id) {
         const index = this.ids.indexOf(id);