@gjsify/adwaita-web 0.64.13 → 0.64.14

package/src/gtk-popover-menu.spec.ts

@@ -9,11 +9,11 @@
 
 import { describe, expect, it } from '@gjsify/unit';
 import { MENU_LABEL_TEXT_VECTORS, MENU_REFUSAL_VECTORS } from '@gjsify/adwaita-core/conformance';
-import { flattenMenu } from '@gjsify/adwaita-core';
-import type { AdwMenuInput, AdwMenuModel } from '@gjsify/adwaita-core';
+import { buildMenu, flattenMenu } from '@gjsify/adwaita-core';
+import type { AdwMenuModel, AdwMenuTree } from '@gjsify/adwaita-core';
 
 interface PopoverMenuElement extends HTMLElement {
-    menuModel: AdwMenuInput | AdwMenuModel;
+    menuModel: AdwMenuModel | string | null;
     actions: Record<string, { enabled?: boolean; state?: string }> | null;
     visibleSubmenu: string;
     // The three below are `GtkPopover`'s own — the reason this spec can say "inherits the
@@ -76,7 +76,7 @@ export const GtkPopoverMenuTest = async () => {
     await describe('<gtk-popover-menu> the page stack', async () => {
         await it('renders the model and reports the root page as `main`', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             expect(labels(el)).toStrictEqual(['New', 'More']);
             expect(el.visibleSubmenu).toBe('main');
             unmountAll();
@@ -84,7 +84,7 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('opens a submenu by name and swaps the page', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
             // A submenu's page is the back row plus its own items — the submenu's contents
             // are never inlined into the parent.
@@ -95,7 +95,7 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('`main` goes back, and so does closeSubmenus', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
             el.openSubmenu('main');
             expect(labels(el)).toStrictEqual(['New', 'More']);
@@ -109,7 +109,7 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('a name no submenu carries leaves the open page alone', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
             // `gtk_stack_set_visible_child_name` on a child that is not there is a no-op in
             // GTK, so the current page must survive rather than blank the surface.
@@ -121,7 +121,7 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('`visible-submenu` as an ATTRIBUTE navigates, and notifies once per page', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             const seen: string[] = [];
             el.addEventListener('notify::visible-submenu', (event) => {
                 seen.push((event as CustomEvent<{ visibleSubmenu: string }>).detail.visibleSubmenu);
@@ -137,9 +137,9 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('a CHANGED model drops the open page', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
-            el.menuModel = [{ label: 'Only' }];
+            el.menuModel = buildMenu([{ label: 'Only' }]);
             // The submenu the page named is gone; staying on it would leave a back row and
             // no items behind it.
             expect(el.visibleSubmenu).toBe('main');
@@ -149,16 +149,16 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('an UNCHANGED model keeps the open page', () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
-            el.menuModel = JSON.parse(JSON.stringify(NESTED)) as AdwMenuInput;
+            el.menuModel = buildMenu(JSON.parse(JSON.stringify(NESTED)));
             expect(el.visibleSubmenu).toBe('More');
             unmountAll();
         });
 
         await it('closing the popover returns to the root page', async () => {
             const el = mount();
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
             el.open = true;
             el.open = false;
@@ -175,7 +175,7 @@ export const GtkPopoverMenuTest = async () => {
             const el = document.createElement('gtk-popover-menu') as PopoverMenuElement;
             anchor.appendChild(el);
             document.body.appendChild(anchor);
-            el.menuModel = NESTED;
+            el.menuModel = buildMenu(NESTED);
             el.openSubmenu('More');
             el.anchor = anchor;
             el.open = true;
@@ -197,7 +197,7 @@ export const GtkPopoverMenuTest = async () => {
 
         await it('a disabled row activates nothing', () => {
             const el = mount();
-            el.menuModel = [{ label: 'Quit', action: 'app.quit' }];
+            el.menuModel = buildMenu([{ label: 'Quit', action: 'app.quit' }]);
             el.actions = { 'app.quit': { enabled: false } };
             let fired = false;
             el.addEventListener('menu-item-activated', () => {
@@ -212,11 +212,11 @@ export const GtkPopoverMenuTest = async () => {
     await describe('<gtk-popover-menu> the menu attribute', async () => {
         await it('reads the JSON and draws the same rows `flattenMenu` names', () => {
             const el = mount('[{"label":"New"},{"section":[{"label":"Cut"}],"label":"Edit"}]');
-            const model: AdwMenuModel = [
+            const tree: AdwMenuTree = [
                 { kind: 'item', label: 'New' },
                 { kind: 'section', label: 'Edit', items: [{ kind: 'item', label: 'Cut' }] },
             ];
-            expect(labels(el)).toStrictEqual(flattenMenu(model).map((row) => row.node.label));
+            expect(labels(el)).toStrictEqual(flattenMenu(tree).map((row) => row.node.label));
             unmountAll();
         });
 
@@ -243,15 +243,15 @@ export const GtkPopoverMenuTest = async () => {
         });
 
         await it('the PROPERTY path refuses a `custom` item loudly', () => {
-            for (const { model, paths, rule } of MENU_REFUSAL_VECTORS) {
+            for (const { tree, paths, rule } of MENU_REFUSAL_VECTORS) {
                 const el = mount();
                 if (paths.length > 0) {
                     expect(() => {
-                        el.menuModel = model;
+                        el.menuModel = buildMenu(tree);
                     }).toThrow('adwaita-web');
                 } else {
-                    el.menuModel = model;
-                    expect(labels(el)).toStrictEqual(flattenMenu(model).map((row) => row.node.label));
+                    el.menuModel = buildMenu(tree);
+                    expect(labels(el)).toStrictEqual(flattenMenu(tree).map((row) => row.node.label));
                 }
                 expect(rule.length > 0).toBe(true);
                 el.remove();
@@ -263,7 +263,7 @@ export const GtkPopoverMenuTest = async () => {
         for (const { label, text, rule } of MENU_LABEL_TEXT_VECTORS) {
             await it(`item, submenu and back row: ${rule}`, () => {
                 const el = mount();
-                el.menuModel = [{ label }, { label, submenu: [{ label }] }];
+                el.menuModel = buildMenu([{ label }, { label, submenu: [{ label }] }]);
                 expect(labels(el)).toStrictEqual([text, text]);
                 el.openSubmenu(label);
                 expect(labels(el)).toStrictEqual([text, text]);

package/src/index.ts

@@ -114,8 +114,9 @@ export * as Adw from './namespace/adw.js';
 export * as Gtk from './namespace/gtk.js';
 
 // The THIRD namespace, and the one that defines no element: the GObject types an author
-// CONSTRUCTS while building a tree. `Gio.Menu` is what makes `menuModel: menu` the same
-// program here as on GJS — `./namespace/gio.ts` says what does not go in it.
+// CONSTRUCTS while building a tree. `Gio.Menu` is a real `Gio.MenuModel` (ADR 0128), which
+// is what makes `menuModel: menu` the same program here as on GJS — `./namespace/gio.ts`
+// says what does not go in it.
 export * as Gio from './namespace/gio.js';
 
 // Gdk's clipboard (`Display`, `Clipboard`, `ContentProvider`): `./namespace/gdk.ts` says what is absent.
@@ -189,6 +190,12 @@ export type { AdwViewStackPageInfo } from './elements/adw-view-stack.js';
 // The portable menu model (ADR 0042) is `@gjsify/adwaita-core`'s, re-exported so a
 // consumer of THIS package reaches the menu types without a second dependency — one
 // definition, two doors, never two declarations.
+//
+// `buildMenu` is a VALUE and not only a type, because since ADR 0128 a `menuModel`
+// property takes a real `Gio.MenuModel` and an authored array is refused: without the
+// builder an app depending on this package alone could not write a menu in code at all.
+// The `menu-model` ATTRIBUTE still takes the JSON string, so markup needs none of this.
+export { buildMenu, menuTree, watchMenuModel } from '@gjsify/adwaita-core';
 export type {
     AdwMenuActions,
     AdwMenuEntryInput,
@@ -199,6 +206,7 @@ export type {
     AdwMenuPath,
     AdwMenuSection,
     AdwMenuSubmenu,
+    AdwMenuTree,
 } from '@gjsify/adwaita-core';
 export type { GtkDropDownOption } from './elements/gtk-drop-down.js';
 export type { AdwDialogPresentationMode } from './elements/adw-dialog.js';

package/src/keyboard-operable.spec.ts

@@ -19,6 +19,7 @@
 // A real Tab press escaping an untrapped dialog is measured one layer up, by
 // `tests/browser/specs/adwaita-keyboard.spec.ts`.
 import { describe, expect, it } from '@gjsify/unit';
+import { buildMenu } from '@gjsify/adwaita-core';
 
 import type { AdwAlertDialog } from './elements/adw-alert-dialog.js';
 import { AdwToggle, AdwToggleGroup } from './elements/adw-toggle-group.js';
@@ -737,11 +738,11 @@ export const AdwKeyboardOperableTest = async () => {
             };
             document.body.appendChild(el);
             el.actions = { 'app.export': { enabled: false }, 'app.new': {} };
-            el.menuModel = [
+            el.menuModel = buildMenu([
                 { label: 'New', action: 'app.new' },
                 { section: [{ label: 'Export', action: 'app.export' }, { label: 'Print' }] },
                 { label: 'More', submenu: [{ label: 'Rename' }, { label: 'Duplicate' }] },
-            ];
+            ]);
             (el.querySelector('.adw-menu-button-button') as HTMLElement).click();
             return {
                 el,
@@ -828,14 +829,14 @@ export const AdwKeyboardOperableTest = async () => {
             };
             document.body.appendChild(el);
             el.actions = { 'app.off': { enabled: false } };
-            el.menuModel = [
+            el.menuModel = buildMenu([
                 { label: 'Dim', action: 'app.off' },
                 { label: 'Live' },
                 {
                     label: 'More',
                     submenu: [{ label: 'SubDim', action: 'app.off' }, { label: 'SubLive' }],
                 },
-            ];
+            ]);
             (el.querySelector('.adw-menu-button-button') as HTMLElement).click();
             const rows = () => [...el.querySelectorAll<HTMLButtonElement>('.adw-popover-item')];
             const label = () =>
@@ -867,7 +868,7 @@ export const AdwKeyboardOperableTest = async () => {
             };
             document.body.appendChild(el);
             el.actions = { 'app.off': { enabled: false } };
-            el.menuModel = [{ label: 'More', submenu: [{ label: 'Only', action: 'app.off' }] }];
+            el.menuModel = buildMenu([{ label: 'More', submenu: [{ label: 'Only', action: 'app.off' }] }]);
             (el.querySelector('.adw-menu-button-button') as HTMLElement).click();
             const opener = el.querySelector('.adw-popover-item') as HTMLButtonElement;
             opener.focus();

package/src/menu-actions.spec.ts

@@ -7,6 +7,7 @@ import {
     registryMenuActionScene,
     type SharedTreeNode,
 } from '@gjsify/adwaita-core/conformance';
+import { menuTree } from '@gjsify/adwaita-core';
 import { describe, expect, it } from '@gjsify/unit';
 
 import { parentOfElement } from './application.js';
@@ -39,7 +40,11 @@ export const MenuActionsTest = async () => {
                     return;
                 }
                 const button = buildSharedTree(node) as unknown as GtkMenuButton;
-                expect(button.menuModel.map((entry) => entry.kind).join(',')).toBe(result.kinds.join(','));
+                expect(
+                    menuTree(button.menuModel!)
+                        .map((entry) => entry.kind)
+                        .join(','),
+                ).toBe(result.kinds.join(','));
             });
         }
     });

package/src/namespace/gio.ts

@@ -1,4 +1,4 @@
-// The GIO half of `@gjsify/adwaita-web`'s vocabulary — `Gio.Menu`, `Gio.MenuItem`.
+// The GIO half of `@gjsify/adwaita-web`'s vocabulary — `Gio.MenuModel` and its subclasses.
 // `export * as Gio from './namespace/gio.js'` in `src/index.ts` makes it the namespace,
 // the same module shape `./adw.ts` and `./gtk.ts` take and for the same reason (one list
 // carrying the value AND the type meaning — see the header of `./adw.ts`).
@@ -28,7 +28,24 @@ import { createAppInfo } from '@gjsify/adwaita-core';
 
 import { webPlatformHost } from '../platform-host.js';
 
-export { GioMenu as Menu, GioMenuItem as MenuItem } from '@gjsify/adwaita-core';
+// ADR 0128: `Gio.MenuModel` is an abstract CLASS, so the whole menu hierarchy is here and
+// `menu instanceof Gio.MenuModel` answers the same on both runtimes. The two iterators come
+// with it because `iterate_item_attributes` / `iterate_item_links` return them by name.
+export {
+    GioMenu as Menu,
+    GioMenuItem as MenuItem,
+    GioMenuModel as MenuModel,
+    GioMenuAttributeIter as MenuAttributeIter,
+    GioMenuLinkIter as MenuLinkIter,
+    MENU_ATTRIBUTE_ACTION,
+    MENU_ATTRIBUTE_ACTION_NAMESPACE,
+    MENU_ATTRIBUTE_ICON,
+    MENU_ATTRIBUTE_LABEL,
+    MENU_ATTRIBUTE_TARGET,
+    MENU_EXPORTER_MAX_SECTION_SIZE,
+    MENU_LINK_SECTION,
+    MENU_LINK_SUBMENU,
+} from '@gjsify/adwaita-core';
 // ADR 0122 § 2: the interface a `Gtk.StringList` implements and an `Implements: [Gio.ListModel]`
 // names. It is a token, not a class — the whole of the subset's interface support.
 export { ListModel } from '@gjsify/adwaita-core';

package/src/shared-tree-builder.ts

@@ -35,6 +35,7 @@
 // this small, most of which (the `SharedTreeNode` type) is erased at build anyway.
 
 import {
+    buildMenu,
     createBreakpointDriver,
     menuAssignments,
     parseBreakpointCondition,
@@ -512,8 +513,12 @@ function writeLook(el: HTMLElement, node: SharedTreeNode, menus?: SharedTreeNode
     for (const [prop, value] of Object.entries(node.props ?? {})) {
         if (prop !== 'menu-model') writeProp(el, prop, value);
     }
+    // `buildMenu`, because since ADR 0128 `menuModel` is a real `Gio.MenuModel` and a tree
+    // written at it is refused the way GJS refuses one. `menuAssignments` stays a tree walker
+    // — it resolves a `menu-model: id` against the file's `menus` — so the model is built
+    // here, at the one place the resolved tree becomes a widget's property.
     for (const [prop, model] of menuAssignments(node, menus)) {
-        (el as unknown as Record<string, unknown>)[propertyOf(prop)] = model;
+        (el as unknown as Record<string, unknown>)[propertyOf(prop)] = buildMenu(model);
     }
     // `styleClasses` is `GtkWidget:css-classes`, and this renderer's door for it is the
     // `class` attribute — what `.title-1`, `.dimmed` and `.card` select on. Unread, a

package/src/split-button.spec.ts

@@ -17,7 +17,7 @@ import {
     SPLIT_BUTTON_STYLE_CLASS_VECTORS,
     SPLIT_BUTTON_TOOLTIP_VECTORS,
 } from '@gjsify/adwaita-core/conformance';
-import { ADW_MENU_SURFACE_WEB, flattenMenu, menuRefusals } from '@gjsify/adwaita-core';
+import { ADW_MENU_SURFACE_WEB, buildMenu, flattenMenu, menuRefusals, menuTree } from '@gjsify/adwaita-core';
 import type { SplitButtonProperty } from '@gjsify/adwaita-core';
 import type { AdwSplitButton } from './elements/adw-split-button.js';
 import { fallbackMask, maskOf } from './icon-masks.spec.js';
@@ -238,24 +238,24 @@ export const AdwSplitButtonTest = async () => {
     });
 
     await describe('adw-split-button menu', async () => {
-        for (const { input, model, rule } of MENU_NORMALIZE_VECTORS) {
+        for (const { input, tree, rule } of MENU_NORMALIZE_VECTORS) {
             await it(`normalises an authored menu — ${rule}`, () => {
                 const { el, host } = mount({ label: 'Save' });
                 // What THIS surface refuses is core's answer, not a list restated here:
                 // a `custom` item names an application widget the browser cannot host,
                 // and the setter is where that is said out loud.
-                if (menuRefusals(model, ADW_MENU_SURFACE_WEB).length > 0) {
+                if (menuRefusals(tree, ADW_MENU_SURFACE_WEB).length > 0) {
                     expect(() => {
-                        el.menuModel = input;
+                        el.menuModel = buildMenu(input);
                     }).toThrow('adwaita-web');
                     host.remove();
                     return;
                 }
-                el.menuModel = input;
-                expect([...el.menuModel]).toStrictEqual([...model]);
+                el.menuModel = buildMenu(input);
+                expect(menuTree(el.menuModel!)).toStrictEqual([...tree]);
                 // Every node the model draws is a row: a section is inlined, a submenu
                 // is one row of its own.
-                expect(el.querySelectorAll('.adw-split-button-menu-item').length).toBe(flattenMenu(model).length);
+                expect(el.querySelectorAll('.adw-split-button-menu-item').length).toBe(flattenMenu(tree).length);
                 host.remove();
             });
         }
@@ -312,11 +312,28 @@ export const AdwSplitButtonTest = async () => {
             const { el, host } = mount({ 'menu-model': '[{"label":"Print"}]' });
             dropdownHalf(el).click();
             expect(el.active).toBe(true);
-            el.setAttribute('menu-model', '[]');
+            // REMOVING the attribute is how a menu is lost since ADR 0128 — `null` is the
+            // only spelling of "no menu", and the row below is the other half of that.
+            el.removeAttribute('menu-model');
             expect(el.active).toBe(false);
             expect(el.dropdownEnabled).toBe(false);
             host.remove();
         });
+
+        await it('an EMPTY menu is still a menu, so the dropdown stays live', () => {
+            // Measured on `Adw.SplitButton`: an empty non-null `Gio.Menu` at `menu-model`
+            // still builds a `GtkPopoverMenu` and `set_menu_model(null)` is what returns
+            // the popover to null (`MENU_MODEL_DOOR_VECTORS`). `[]` therefore edits the
+            // menu this element OWNS rather than taking it away, so the open popup follows
+            // the edit instead of being closed by it.
+            const { el, host } = mount({ 'menu-model': '[{"label":"Print"}]' });
+            dropdownHalf(el).click();
+            el.setAttribute('menu-model', '[]');
+            expect(el.dropdownEnabled).toBe(true);
+            expect(el.active).toBe(true);
+            expect(el.querySelectorAll('.adw-split-button-menu-item').length).toBe(0);
+            host.remove();
+        });
     });
 
     await describe('adw-split-button signals + state classes', async () => {