@jupyter-ai/persona-manager 0.1.1 → 0.1.2

package/lib/persona-controls.d.ts

@@ -56,7 +56,7 @@ export declare function applyControlChange(settings: PersonaSettings, control: C
  * row is "Default" (selection = null); the rest are the persona's advertised
  * options (selection = that option's id). Exported for tests.
  */
-export declare function ControlItem(props: {
+export declare function ControlMenu(props: {
     control: Control;
     onSelect: (value: string | null) => void;
 }): JSX.Element;
@@ -65,7 +65,7 @@ export declare function ControlItem(props: {
  * menu (no nested dropdowns). Each control renders as a group label followed by
  * its Default row and choices. Exported for tests.
  */
-export declare function OverflowMenu(props: {
+export declare function OverflowControlsMenu(props: {
     controls: Control[];
     anchor: HTMLElement | null;
     onClose: () => void;

package/lib/persona-controls.js

@@ -219,20 +219,23 @@ function defaultChoiceLabel(control) {
  * The uppercase group label used in control menus: it titles a control's own
  * dropdown and labels each control's section in the overflow menu. Rendered
  * with MUI's `ListSubheader`, which has no tabindex, so arrow-key focus skips
- * it and the menu stays keyboard-navigable.
+ * it and the menu stays keyboard-navigable. Sticky: when the menu scrolls, the
+ * label pins to the top, so the group the visible rows belong to stays
+ * readable; in the overflow menu the next section's label paints over it on
+ * arrival.
  */
-function ControlSubheader(props) {
-    return (React.createElement(ListSubheader, { id: props.id, disableSticky: true, className: `${MENU_CLASS}-subheader` }, props.label));
+function ControlMenuSubheader(props) {
+    return (React.createElement(ListSubheader, { id: props.id, className: `${MENU_CLASS}-subheader` }, props.label));
 }
 // MUI's MenuList skips initial focus for children whose type carries this
 // static; ListSubheader's own copy is hidden behind the wrapper.
-ControlSubheader.muiSkipListHighlight = true;
+ControlMenuSubheader.muiSkipListHighlight = true;
 /**
  * A dropdown for a control, titled with the control's label. The first choice
  * row is "Default" (selection = null); the rest are the persona's advertised
  * options (selection = that option's id). Exported for tests.
  */
-export function ControlItem(props) {
+export function ControlMenu(props) {
     const { control, onSelect } = props;
     const [anchor, setAnchor] = useState(null);
     // The heading names the menu for assistive tech: the subheader itself is a
@@ -243,7 +246,7 @@ export function ControlItem(props) {
         React.createElement(Button, { className: `${SELECTOR_CLASS} ${SELECTOR_CLASS}-control-btn`, size: "small", variant: "text", disableRipple: true, endIcon: React.createElement(ArrowDropDownIcon, { className: `${SELECTOR_CLASS}-arrow` }), onClick: event => setAnchor(event.currentTarget), title: control.label },
             React.createElement("span", { className: `${SELECTOR_CLASS}-control-value` }, currentControlLabel(control))),
         React.createElement(Menu, { anchorEl: anchor, open: !!anchor, onClose: () => setAnchor(null), MenuListProps: { 'aria-labelledby': headingId }, ...menuAnchorProps },
-            React.createElement(ControlSubheader, { id: headingId, label: control.label }),
+            React.createElement(ControlMenuSubheader, { id: headingId, label: control.label }),
             React.createElement(ChoiceMenuItem, { primary: defaultChoiceLabel(control), description: null, selected: control.selection === null, onSelect: () => {
                     setAnchor(null);
                     onSelect(null);
@@ -258,10 +261,10 @@ export function ControlItem(props) {
  * menu (no nested dropdowns). Each control renders as a group label followed by
  * its Default row and choices. Exported for tests.
  */
-export function OverflowMenu(props) {
+export function OverflowControlsMenu(props) {
     const { controls, anchor, onClose, onChange } = props;
     return (React.createElement(Menu, { anchorEl: anchor, open: !!anchor, onClose: onClose, MenuListProps: { 'aria-label': 'More controls' }, ...menuAnchorProps }, controls.flatMap(control => [
-        React.createElement(ControlSubheader, { key: `${control.id}-label`, label: control.label }),
+        React.createElement(ControlMenuSubheader, { key: `${control.id}-label`, label: control.label }),
         React.createElement(ChoiceMenuItem, { key: `${control.id}-default`, primary: defaultChoiceLabel(control), description: null, selected: control.selection === null, onSelect: () => {
                 onClose();
                 onChange(control, null);
@@ -340,12 +343,12 @@ function ControlsRow(props) {
     const visible = controls.slice(0, visibleCount);
     const overflow = controls.slice(visibleCount);
     return (React.createElement("div", { className: `${SELECTOR_CLASS}-controls`, ref: rowRef },
-        React.createElement("div", { className: `${SELECTOR_CLASS}-controls-measure`, ref: measureRef, "aria-hidden": "true" }, controls.map(control => (React.createElement(ControlItem, { key: control.id, control: control, onSelect: v => onChange(control, v) })))),
-        visible.map(control => (React.createElement(ControlItem, { key: control.id, control: control, onSelect: v => onChange(control, v) }))),
+        React.createElement("div", { className: `${SELECTOR_CLASS}-controls-measure`, ref: measureRef, "aria-hidden": "true" }, controls.map(control => (React.createElement(ControlMenu, { key: control.id, control: control, onSelect: v => onChange(control, v) })))),
+        visible.map(control => (React.createElement(ControlMenu, { key: control.id, control: control, onSelect: v => onChange(control, v) }))),
         overflow.length ? (React.createElement(React.Fragment, null,
             React.createElement("button", { type: "button", ref: overflowBtnRef, className: `${SELECTOR_CLASS} ${SELECTOR_CLASS}-overflow-btn`, onClick: event => setOverflowAnchor(event.currentTarget), title: "More controls", "aria-label": "More controls" },
                 React.createElement(MoreHorizIcon, { fontSize: "small" })),
-            React.createElement(OverflowMenu, { controls: overflow, anchor: overflowAnchor, onClose: () => setOverflowAnchor(null), onChange: onChange }))) : null));
+            React.createElement(OverflowControlsMenu, { controls: overflow, anchor: overflowAnchor, onClose: () => setOverflowAnchor(null), onChange: onChange }))) : null));
 }
 // All formatters pin the `en` locale so numbers agree with each other and
 // with the surrounding English labels.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyter-ai/persona-manager",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "The core manager & registry for AI personas in Jupyter AI",
     "keywords": [
         "jupyter",
@@ -67,6 +67,9 @@
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
         "@jupyterlab/testutils": "^4.0.0",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.0",
         "@types/jest": "^29.2.0",
         "@types/json-schema": "^7.0.11",
         "@types/react": "^18.0.26",

package/src/__tests__/persona-controls-menus.spec.tsx

@@ -5,16 +5,13 @@
  * type-ahead, and Enter drive the choice rows.
  */
 import React from 'react';
-import { createRoot, Root } from 'react-dom/client';
-import { Control, ControlItem, OverflowMenu } from '../persona-controls';
-
-// React 18.3 ships `React.act`, which the installed @types/react (18.0) does
-// not declare yet.
-const { act } = React as unknown as { act: (callback: () => void) => void };
-
-(
-  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
-).IS_REACT_ACT_ENVIRONMENT = true;
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Control,
+  ControlMenu,
+  OverflowControlsMenu
+} from '../persona-controls';
 
 const SUBHEADER_SELECTOR = 'li.jp-jai-controlMenu-subheader';
 
@@ -32,105 +29,84 @@ function modelControl(selection: string | null): Control {
   };
 }
 
-describe('control menus', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-  });
-
-  function menu(): HTMLElement {
-    return document.querySelector('ul[role="menu"]') as HTMLElement;
-  }
-
-  function focused(): HTMLElement {
-    return document.activeElement as HTMLElement;
-  }
+function heading(): HTMLElement {
+  return document.querySelector(SUBHEADER_SELECTOR) as HTMLElement;
+}
 
-  function press(key: string): void {
-    act(() => {
-      focused().dispatchEvent(
-        new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
-      );
-    });
-  }
+function focused(): HTMLElement {
+  return document.activeElement as HTMLElement;
+}
 
+describe('control menus', () => {
   describe('control dropdown', () => {
-    function openMenu(
+    async function openMenu(
       control: Control,
       onSelect: (value: string | null) => void = () => undefined
-    ): void {
-      act(() => {
-        root.render(<ControlItem control={control} onSelect={onSelect} />);
-      });
-      act(() => {
-        (container.querySelector('button') as HTMLElement).dispatchEvent(
-          new MouseEvent('click', { bubbles: true })
-        );
-      });
+    ): Promise<ReturnType<typeof userEvent.setup>> {
+      const user = userEvent.setup();
+      render(<ControlMenu control={control} onSelect={onSelect} />);
+      await user.click(screen.getByRole('button'));
+      return user;
     }
 
-    it('opens titled by a heading that names the menu', () => {
-      openMenu(modelControl('beta'));
-      const heading = document.querySelector(SUBHEADER_SELECTOR) as HTMLElement;
-      expect(heading.textContent).toBe('Model');
-      expect(heading.hasAttribute('tabindex')).toBe(false);
-      expect(heading.id).toBeTruthy();
-      expect(menu().getAttribute('aria-labelledby')).toBe(heading.id);
+    it('opens titled by a heading that names the menu', async () => {
+      await openMenu(modelControl('beta'));
+      expect(heading().textContent).toBe('Model');
+      expect(heading().hasAttribute('tabindex')).toBe(false);
+      expect(heading().id).toBeTruthy();
+      expect(screen.getByRole('menu').getAttribute('aria-labelledby')).toBe(
+        heading().id
+      );
+      // Sticky, so the title stays visible while a long option list scrolls.
+      expect(heading().classList.contains('MuiListSubheader-sticky')).toBe(
+        true
+      );
     });
 
-    it('focuses the selected row and moves focus with the keyboard', () => {
-      openMenu(modelControl('beta'));
+    it('focuses the selected row and moves focus with the keyboard', async () => {
+      const user = await openMenu(modelControl('beta'));
       // Rows: heading, "Default (Alpha)", "Alpha", "Beta"; "Beta" is selected.
-      expect(focused().textContent).toBe('Beta');
-      expect(focused().getAttribute('role')).toBe('menuitem');
+      expect(focused()).toBe(screen.getByRole('menuitem', { name: 'Beta' }));
       // Wrapping from the last row skips the heading to the first choice row.
-      press('ArrowDown');
-      expect(focused().textContent).toBe('Default (Alpha)');
-      press('ArrowDown');
-      expect(focused().textContent).toBe('Alpha');
+      await user.keyboard('{ArrowDown}');
+      expect(focused()).toBe(
+        screen.getByRole('menuitem', { name: 'Default (Alpha)' })
+      );
+      await user.keyboard('{ArrowDown}');
+      expect(focused()).toBe(screen.getByRole('menuitem', { name: 'Alpha' }));
       // Type-ahead: "b" jumps to Beta.
-      press('b');
-      expect(focused().textContent).toBe('Beta');
+      await user.keyboard('b');
+      expect(focused()).toBe(screen.getByRole('menuitem', { name: 'Beta' }));
     });
 
-    it('leaves focus in place when type-ahead matches only the heading', () => {
-      openMenu(modelControl('beta'));
+    it('leaves focus in place when type-ahead matches only the heading', async () => {
+      const user = await openMenu(modelControl('beta'));
       // First key after open, so it cannot buffer onto a previous press: "m"
       // matches the heading ("Model") and no choice row, and the heading
       // never takes focus.
-      press('m');
-      expect(focused().textContent).toBe('Beta');
+      await user.keyboard('m');
+      expect(focused()).toBe(screen.getByRole('menuitem', { name: 'Beta' }));
     });
 
-    it('falls back to the first choice row when the selection is stale', () => {
+    it('falls back to the first choice row when the selection is stale', async () => {
       // A selection id the persona no longer advertises leaves no row
       // selected; initial focus then skips the heading to the first row.
-      openMenu(modelControl('stale'));
-      expect(focused().textContent).toBe('Default (Alpha)');
-      expect(focused().getAttribute('role')).toBe('menuitem');
+      await openMenu(modelControl('stale'));
+      expect(focused()).toBe(
+        screen.getByRole('menuitem', { name: 'Default (Alpha)' })
+      );
     });
 
-    it('activates the focused row with Enter', () => {
+    it('activates the focused row with Enter', async () => {
       const onSelect = jest.fn();
-      openMenu(modelControl(null), onSelect);
-      press('ArrowDown');
-      press('ArrowDown');
-      press('Enter');
+      const user = await openMenu(modelControl(null), onSelect);
+      await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
       expect(onSelect).toHaveBeenCalledWith('beta');
     });
   });
 
   describe('overflow menu', () => {
-    it('is labeled and arrows skip the section headings', () => {
+    it('is labeled and arrows skip the section headings', async () => {
       const first: Control = {
         id: 'a',
         kind: 'setting',
@@ -143,32 +119,39 @@ describe('control menus', () => {
         id: 'b',
         kind: 'setting',
         label: 'Bbb',
-        current: null,
+        current: 'b1',
         selection: 'stale',
         options: [{ id: 'b1', name: 'B one', description: null }]
       };
+      const user = userEvent.setup();
       const anchor = document.createElement('button');
       document.body.appendChild(anchor);
-      act(() => {
-        root.render(
-          <OverflowMenu
-            controls={[first, second]}
-            anchor={anchor}
-            onClose={() => undefined}
-            onChange={() => undefined}
-          />
-        );
-      });
-      expect(menu().getAttribute('aria-label')).toBe('More controls');
+      render(
+        <OverflowControlsMenu
+          controls={[first, second]}
+          anchor={anchor}
+          onClose={() => undefined}
+          onChange={() => undefined}
+        />
+      );
+      expect(screen.getByRole('menu').getAttribute('aria-label')).toBe(
+        'More controls'
+      );
       const headings = Array.from(
         document.querySelectorAll(SUBHEADER_SELECTOR)
-      ).map(h => h.textContent);
-      expect(headings).toEqual(['Aaa', 'Bbb']);
+      );
+      expect(headings.map(h => h.textContent)).toEqual(['Aaa', 'Bbb']);
+      // Sticky, so the section a scrolled row belongs to stays visible.
+      for (const h of headings) {
+        expect(h.classList.contains('MuiListSubheader-sticky')).toBe(true);
+      }
       // "A one" is the only selected row; ArrowDown crosses the "Bbb" heading
       // to the next section's first choice row.
-      expect(focused().textContent).toBe('A one');
-      press('ArrowDown');
-      expect(focused().textContent).toBe('Default');
+      expect(focused()).toBe(screen.getByRole('menuitem', { name: 'A one' }));
+      await user.keyboard('{ArrowDown}');
+      expect(focused()).toBe(
+        screen.getByRole('menuitem', { name: 'Default (B one)' })
+      );
       anchor.remove();
     });
   });

package/src/persona-controls.tsx

@@ -333,15 +333,17 @@ function defaultChoiceLabel(control: Control): string {
  * The uppercase group label used in control menus: it titles a control's own
  * dropdown and labels each control's section in the overflow menu. Rendered
  * with MUI's `ListSubheader`, which has no tabindex, so arrow-key focus skips
- * it and the menu stays keyboard-navigable.
+ * it and the menu stays keyboard-navigable. Sticky: when the menu scrolls, the
+ * label pins to the top, so the group the visible rows belong to stays
+ * readable; in the overflow menu the next section's label paints over it on
+ * arrival.
  */
-function ControlSubheader(props: { label: string; id?: string }): JSX.Element {
+function ControlMenuSubheader(props: {
+  label: string;
+  id?: string;
+}): JSX.Element {
   return (
-    <ListSubheader
-      id={props.id}
-      disableSticky
-      className={`${MENU_CLASS}-subheader`}
-    >
+    <ListSubheader id={props.id} className={`${MENU_CLASS}-subheader`}>
       {props.label}
     </ListSubheader>
   );
@@ -349,14 +351,14 @@ function ControlSubheader(props: { label: string; id?: string }): JSX.Element {
 
 // MUI's MenuList skips initial focus for children whose type carries this
 // static; ListSubheader's own copy is hidden behind the wrapper.
-ControlSubheader.muiSkipListHighlight = true;
+ControlMenuSubheader.muiSkipListHighlight = true;
 
 /**
  * A dropdown for a control, titled with the control's label. The first choice
  * row is "Default" (selection = null); the rest are the persona's advertised
  * options (selection = that option's id). Exported for tests.
  */
-export function ControlItem(props: {
+export function ControlMenu(props: {
   control: Control;
   onSelect: (value: string | null) => void;
 }): JSX.Element {
@@ -388,7 +390,7 @@ export function ControlItem(props: {
         MenuListProps={{ 'aria-labelledby': headingId }}
         {...menuAnchorProps}
       >
-        <ControlSubheader id={headingId} label={control.label} />
+        <ControlMenuSubheader id={headingId} label={control.label} />
         <ChoiceMenuItem
           primary={defaultChoiceLabel(control)}
           description={null}
@@ -420,7 +422,7 @@ export function ControlItem(props: {
  * menu (no nested dropdowns). Each control renders as a group label followed by
  * its Default row and choices. Exported for tests.
  */
-export function OverflowMenu(props: {
+export function OverflowControlsMenu(props: {
   controls: Control[];
   anchor: HTMLElement | null;
   onClose: () => void;
@@ -436,7 +438,10 @@ export function OverflowMenu(props: {
       {...menuAnchorProps}
     >
       {controls.flatMap(control => [
-        <ControlSubheader key={`${control.id}-label`} label={control.label} />,
+        <ControlMenuSubheader
+          key={`${control.id}-label`}
+          label={control.label}
+        />,
         <ChoiceMenuItem
           key={`${control.id}-default`}
           primary={defaultChoiceLabel(control)}
@@ -550,7 +555,7 @@ function ControlsRow(props: {
         aria-hidden="true"
       >
         {controls.map(control => (
-          <ControlItem
+          <ControlMenu
             key={control.id}
             control={control}
             onSelect={v => onChange(control, v)}
@@ -559,7 +564,7 @@ function ControlsRow(props: {
       </div>
 
       {visible.map(control => (
-        <ControlItem
+        <ControlMenu
           key={control.id}
           control={control}
           onSelect={v => onChange(control, v)}
@@ -578,7 +583,7 @@ function ControlsRow(props: {
           >
             <MoreHorizIcon fontSize="small" />
           </button>
-          <OverflowMenu
+          <OverflowControlsMenu
             controls={overflow}
             anchor={overflowAnchor}
             onClose={() => setOverflowAnchor(null)}

package/style/base.css

@@ -229,6 +229,15 @@
   box-shadow: var(--jp-elevation-z6);
 }
 
+/* Keep focus-scrolled rows clear of the stuck group label: when arrow keys
+   scroll a row into view at the top, offset it by the label's height so the
+   label does not cover it. Only menus containing a group label need the
+   offset; the persona picker and usage popover share this paper class and
+   keep edge-aligned scrolling. */
+.jp-jai-controlMenu-paper:has(.jp-jai-controlMenu-subheader) {
+  scroll-padding-top: 32px;
+}
+
 /* stylelint-disable selector-class-pattern -- theming MUI's menu item classes */
 .jp-jai-controlMenu-paper .MuiMenuItem-root {
   padding: 6px 12px;
@@ -281,7 +290,11 @@
 /* Control menu group label: an uppercase heading above a control's choices.
    It titles each control's own dropdown; in the overflow popover a hairline
    divider and top spacing separate the controls' sections. Scoped under the
-   paper to win over MUI's ListSubheader defaults. */
+   paper to win over MUI's ListSubheader defaults. The labels are sticky:
+   sticky is MUI's ListSubheader default, and its sticky class supplies the
+   positioning. The opaque background is load-bearing, scrolled rows pass
+   beneath it. One line only, so stacked sticky labels in the overflow menu
+   cover each other exactly. */
 .jp-jai-controlMenu-paper .jp-jai-controlMenu-subheader {
   margin-top: 8px;
   padding: 8px 12px 2px;
@@ -294,6 +307,9 @@
   text-transform: uppercase;
   color: var(--jp-ui-font-color1);
   background-color: var(--jp-layout-color1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* The first (or only) label sits flush at the top, no divider or extra gap