@astryxdesign/core 0.7.3-canary.b74cf21 → 0.7.3-canary.ca48bb7

package/src/DropdownMenu/DropdownMenuContext.tsx

@@ -45,7 +45,10 @@ export interface DropdownMenuDrillIn {
   viewStack: ReadonlyArray<string>;
   /** The element a shown view renders its rows into (a portal target). */
   host: HTMLElement | null;
-  /** Show a sub-menu's view in place of the current rows. */
+  /**
+   * Show a sub-menu's view in place of the current rows. A view with a header
+   * or footer renders into the root's surface host instead of `host`.
+   */
   push: (viewId: string) => void;
   /** Return to the rows the shown view replaced. */
   pop: () => void;
@@ -65,6 +68,41 @@ export interface DropdownMenuContextValue {
   menuLabel?: string;
 }
 
+/**
+ * The root's surface host. The root owns the element through a ref; this
+ * object is new whenever a new element attaches, so a sub-menu re-renders
+ * into it.
+ */
+export interface DropdownMenuSurfaceHost {
+  /** The host element, or `null` before it attaches. */
+  getElement: () => HTMLElement | null;
+}
+
+/** What a sub-menu with a header or footer needs from the root. Internal. */
+export interface DropdownMenuSurfaceValue {
+  /**
+   * An element inside the root's popover but outside every `role="menu"`
+   * element, where such a sub-menu renders its surface (its flyout layer, or
+   * its drilled-in view, while which the root's menu and regions step aside).
+   */
+  host: DropdownMenuSurfaceHost;
+  /**
+   * The root menu's `id`, which a sub-menu's menu in the host names so the
+   * press model counts it, and only it, as nested in the root.
+   */
+  ownerId: string;
+  /** The root's resolved `menuMaxHeight`, which a drilled-in view caps at. */
+  menuMaxHeight?: string;
+}
+
+/**
+ * The root's surface; `null` under a root with none (ContextMenu). Internal,
+ * off the public menu context, and layer-scoped, so each flyout re-provides it.
+ */
+export const DropdownMenuSurfaceContext =
+  createLayerScopedContext<DropdownMenuSurfaceValue | null>(null);
+DropdownMenuSurfaceContext.displayName = 'DropdownMenuSurfaceContext';
+
 /**
  * Whether the root menu of this layer tree is open; internal companion to
  * `DropdownMenuContext`, on its own unexported context so the public

package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs

@@ -67,6 +67,18 @@ export const docs = {
         "How the sub-menu shows its rows. 'flyout' opens them beside the row; 'drill-in' replaces the menu's rows with them and a Back row, in the same box; 'adaptive' drills in when a finger opened the menu (a coarse pointer, decided when the menu opened) and flies out otherwise.",
       default: "'adaptive'",
     },
+    {
+      name: 'header',
+      type: 'ReactNode',
+      description:
+        'Content above the sub-menu\'s rows and outside its menu, a field that filters them, say. It keeps its own keys and presses. With a header or footer the sub-menu\'s surface (the flyout, or the drilled-in view on a phone) is a modal dialog named by the row, beside the menu rather than inside it: the row says aria-haspopup="dialog", Tab and Shift+Tab move through the header, the rows and the footer and wrap, Escape returns to the row, and a pointer leaving the flyout closes it only once focus leaves too. A ContextMenu does not show it.',
+    },
+    {
+      name: 'footer',
+      type: 'ReactNode',
+      description:
+        "Content below the sub-menu's rows and outside its menu, a door to where the options are managed, say. Same rules as header.",
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -77,7 +89,7 @@ export const docs = {
       name: 'ref',
       type: 'React.Ref<HTMLElement>',
       description:
-        'Ref forwarded to the trigger row, the element carrying role="menuitem" and aria-haspopup="menu".',
+        'Ref forwarded to the trigger row, the element carrying role="menuitem" and aria-haspopup="menu" ("dialog" with a header or footer).',
     },
   ],
 };
@@ -100,6 +112,9 @@ export const docsDense = {
     onOpenChange: 'called when flyout opens/closes',
     presentation:
       "'flyout' beside the row | 'drill-in' replaces the rows + Back row | 'adaptive' (default) drills in on a coarse pointer",
+    header:
+      'content above the rows, outside the menu; surface becomes a modal dialog named by the row (Tab wraps, Escape returns to the row)',
+    footer: 'content below the rows, outside the menu; same rules as header',
     xstyle: 'StyleX styles for the trigger row',
     ref: 'ref to the trigger row (role="menuitem")',
   },