@vollowx/seele 0.13.10 → 0.14.0

package/src/base/list.js

@@ -1,31 +1,40 @@
+/**
+ * TODO: currently list and menu has too much in common, should be split into
+ *       menu, listbox and a LinearFocusController for tabs/toolbars
+ */
 import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import { setFocusVisible } from '../core/focus-visible.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { focusVisible, setFocusVisible } from '../core/focus.js';
+import { internals, InternalsAttached } from './mixins/internals-attached.js';
 import { ListController } from './controllers/list-controller.js';
-const Base = InternalsAttached(LitElement);
+import { MenuAction, getActionFromKey, getVisibleItems } from './menu.js';
 /**
  * @csspart items
- *
- * @fires {Event} open - Fires when the menu is opened.
- * @fires {Event} close - Fires when the menu is closed.
- * @fires {ListSelectEvent} select - Fires when an item is selected.
+ * @fires {ListboxSelectEvent} select - Fires when an item is selected.
  * @fires {ListItemFocusEvent} item-focus - Fires when an item is focused
  */
-export class List extends Base {
+export class List extends InternalsAttached(LitElement) {
     get $items() {
         return this.listController.items || [];
     }
-    render() {
-        return html `${this.renderItemSlot()}`;
+    get currentIndex() {
+        return this.listController?.currentIndex;
+    }
+    focusFirstItem() {
+        this.listController.focusFirstItem();
+    }
+    focusLastItem() {
+        this.listController.focusLastItem();
+    }
+    focusItem(item) {
+        this.listController._focusItem(item);
     }
-    renderItemSlot() {
+    render() {
         return html `<slot part="items"></slot>`;
     }
     constructor() {
         super();
-        this._scrollPadding = 0;
         this.noFocusControl = false;
         this.listController = new ListController(this, {
             isItem: (item) => item.getAttribute('seele-base') === 'option' &&
@@ -40,9 +49,10 @@ export class List extends Base {
                 if (!this.noFocusControl) {
                     this[internals].ariaActiveDescendantElement = item;
                 }
-                scrollItemIntoView(this, item, this._scrollPadding);
+                if (focusVisible)
+                    item.scrollIntoView({ block: 'nearest' });
                 this.dispatchEvent(new CustomEvent('item-focus', {
-                    detail: { item: item },
+                    detail: { item, index: this.$items.indexOf(item) },
                     bubbles: true,
                     composed: true,
                 }));
@@ -54,19 +64,27 @@ export class List extends Base {
             this.setAttribute('tabindex', '0');
         }
         if (!isServer) {
-            this.addEventListener('keydown', (e) => this.#handleKeyDown(e));
-            this.addEventListener('focusin', () => this.#handleFocusIn());
-            this.addEventListener('focusout', () => this.#handleFocusOut());
-            this.addEventListener('pointerdown', (e) => this.#handlePointerDown(e));
-            this.addEventListener('click', (e) => this.#handleClick(e));
-            this.addEventListener('mouseover', (e) => this.#handleMouseOver(e));
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.addEventListener('focusin', this.#handleFocusIn.bind(this));
+            this.addEventListener('focusout', this.#handleFocusOut.bind(this));
+            this.addEventListener('mouseover', this.#handleMouseOver.bind(this));
+            this.addEventListener('click', this.#handleClick.bind(this));
+        }
+    }
+    #handleFocusIn() {
+        if (this.currentIndex === -1) {
+            this.listController.focusFirstItem();
+        }
+        else {
+            this.listController._focusItem(this.$items[this.currentIndex]);
         }
     }
-    updated(changed) {
-        // TODO: Find somewhere to put this
-        // this.listController.clearSearch();
+    #handleFocusOut() {
+        if (this.listController._focusedItem) {
+            this.listController._blurItem(this.listController._focusedItem);
+        }
     }
-    #handleKeyDown(event) {
+    handleKeyDown(event) {
         if (event.defaultPrevented)
             return;
         const action = getActionFromKey(event);
@@ -74,88 +92,76 @@ export class List extends Base {
         const currentIndex = this.listController.currentIndex;
         const maxIndex = items.length - 1;
         switch (action) {
-            case MenuActions.Last:
-            case MenuActions.First:
-            case MenuActions.Next:
-            case MenuActions.Previous:
-            case MenuActions.PageUp:
-            case MenuActions.PageDown:
+            case MenuAction.First:
+                event.preventDefault();
+                this.listController.focusFirstItem();
+                return;
+            case MenuAction.Last:
+                event.preventDefault();
+                this.listController.focusLastItem();
+                return;
+            case MenuAction.PageUp:
+            case MenuAction.PageDown: {
+                event.preventDefault();
+                const { first, last, pageSize } = getVisibleItems(this, items);
+                const isDown = action === MenuAction.PageDown;
+                const boundary = isDown ? last : first;
+                const atBoundary = isDown
+                    ? currentIndex >= last
+                    : currentIndex <= first;
+                const step = isDown ? pageSize : -pageSize;
+                const nextIndex = atBoundary ? currentIndex + step : boundary;
+                this.listController._focusItem(items[Math.max(0, Math.min(maxIndex, nextIndex))]);
+                return;
+            }
+            case MenuAction.Next:
+                event.preventDefault();
+                this.listController.focusNextItem();
+                return;
+            case MenuAction.Previous:
                 event.preventDefault();
-                const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
-                this.listController._focusItem(items[nextIndex]);
+                this.listController.focusPreviousItem();
                 return;
-            case MenuActions.CloseSelect:
+            case MenuAction.CloseSelect:
                 event.preventDefault();
                 if (currentIndex >= 0) {
-                    items[currentIndex].focused = false;
-                    this.dispatchEvent(new CustomEvent('select', {
-                        detail: {
-                            item: items[currentIndex],
-                            index: currentIndex,
-                        },
-                        bubbles: true,
-                        composed: true,
-                    }));
+                    this.#dispatchSelect({
+                        item: items[currentIndex],
+                        index: currentIndex,
+                    });
                 }
                 return;
-            case MenuActions.Type:
+            case MenuAction.Type:
                 this.listController.handleType(event.key);
                 return;
         }
     }
-    #handleFocusIn() {
-        if (this.currentIndex == -1)
-            this.listController.focusFirstItem();
-        else
-            this.$items[this.currentIndex].focused = true;
-    }
-    #handleFocusOut() {
-        this.$items[this.currentIndex].focused = false;
-    }
     #handleMouseOver(event) {
         setFocusVisible(false);
-        const item = event.target.closest('[seele-base="option"]');
-        if (item && this.listController.items.includes(item)) {
-            this.listController._focusItem(item);
+        const item = this.#getItemFromEvent(event);
+        if (item && this.currentIndex !== item.index) {
+            this.listController._focusItem(item.item);
         }
     }
-    #handlePointerDown(event) {
-        event.preventDefault(); // This makes sure that the container is focused
-        this.focus();
-        const item = this.#getEventItem(event);
-        if (!item || !this.listController.items.includes(item))
-            return;
-        this.listController._focusItem(item);
-    }
     #handleClick(event) {
-        this.focus();
-        const item = this.#getEventItem(event);
-        if (!item || !this.listController.items.includes(item))
+        const item = this.#getItemFromEvent(event);
+        if (!item)
             return;
+        this.#dispatchSelect({ ...item });
+    }
+    #getItemFromEvent(event) {
+        const item = event.target.closest('[seele-base=option]');
+        if (!item || !this.$items.includes(item))
+            return null;
+        return { item, index: this.$items.indexOf(item) };
+    }
+    #dispatchSelect(detail) {
         this.dispatchEvent(new CustomEvent('select', {
-            detail: {
-                item: item,
-                index: this.listController.items.indexOf(item),
-            },
+            detail: detail,
             bubbles: true,
             composed: true,
         }));
     }
-    #getEventItem(event) {
-        return event.target.closest('[seele-base="option"]');
-    }
-    get currentIndex() {
-        return this.listController?.currentIndex;
-    }
-    focusFirstItem() {
-        this.listController.focusFirstItem();
-    }
-    focusLastItem() {
-        this.listController.focusLastItem();
-    }
-    focusItem(item) {
-        this.listController._focusItem(item);
-    }
 }
 __decorate([
     property({ type: Boolean, attribute: 'no-focus-control' })
@@ -163,91 +169,3 @@ __decorate([
 __decorate([
     queryAssignedElements({ flatten: true })
 ], List.prototype, "slotItems", void 0);
-// Reference: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-export const MenuActions = {
-    Close: 0,
-    CloseSelect: 1,
-    First: 2,
-    Last: 3,
-    Next: 4,
-    Open: 5,
-    PageDown: 6,
-    PageUp: 7,
-    Previous: 8,
-    Select: 9,
-    Type: 10,
-};
-export function filterOptions(options = [], filter, exclude = []) {
-    return options.filter((option) => {
-        const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
-        return matches && exclude.indexOf(option) < 0;
-    });
-}
-export function getActionFromKey(event) {
-    const { key, altKey, ctrlKey, metaKey } = event;
-    if (key === 'Home') {
-        return MenuActions.First;
-    }
-    if (key === 'End') {
-        return MenuActions.Last;
-    }
-    if (key === 'Backspace' ||
-        key === 'Clear' ||
-        (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
-        return MenuActions.Type;
-    }
-    if (key === 'ArrowUp' && altKey) {
-        return MenuActions.CloseSelect;
-    }
-    else if (key === 'ArrowDown' && !altKey) {
-        return MenuActions.Next;
-    }
-    else if (key === 'ArrowUp') {
-        return MenuActions.Previous;
-    }
-    else if (key === 'PageUp') {
-        return MenuActions.PageUp;
-    }
-    else if (key === 'PageDown') {
-        return MenuActions.PageDown;
-    }
-    else if (key === 'Escape') {
-        return MenuActions.Close;
-    }
-    else if (key === 'Enter' || key === ' ') {
-        return MenuActions.CloseSelect;
-    }
-    return undefined;
-}
-export function getUpdatedIndex(currentIndex, maxIndex, action) {
-    const pageSize = 10;
-    switch (action) {
-        case MenuActions.First:
-            return 0;
-        case MenuActions.Last:
-            return maxIndex;
-        case MenuActions.Previous:
-            return Math.max(0, currentIndex - 1);
-        case MenuActions.Next:
-            return Math.min(maxIndex, currentIndex + 1);
-        case MenuActions.PageUp:
-            return Math.max(0, currentIndex - pageSize);
-        case MenuActions.PageDown:
-            return Math.min(maxIndex, currentIndex + pageSize);
-        default:
-            return currentIndex;
-    }
-}
-export function scrollItemIntoView(list, item, paddingY = 0) {
-    if (!list)
-        return;
-    // Basic scroll into view logic
-    const menuRect = list.getBoundingClientRect();
-    const itemRect = item.getBoundingClientRect();
-    if (itemRect.bottom + paddingY > menuRect.bottom) {
-        list.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
-    }
-    else if (itemRect.top - paddingY < menuRect.top) {
-        list.scrollTop -= menuRect.top - itemRect.top + paddingY;
-    }
-}

package/src/base/menu.d.ts

@@ -1,78 +1,58 @@
 import { LitElement } from 'lit';
-import type { Placement, Strategy } from '@floating-ui/dom';
 import type { MenuItem } from './menu-item.js';
-declare const Base: Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & Constructor<import("./mixins/attachable.js").AttachableInterface> & typeof LitElement;
-interface MenuSelectDetail {
+export interface MenuEventDetail {
     item: MenuItem;
     index: number;
 }
-export type MenuSelectEvent = CustomEvent<MenuSelectDetail>;
-interface ItemFocusDetail {
-    item: MenuItem;
-}
-export type MenuItemFocusEvent = CustomEvent<ItemFocusDetail>;
+export type MenuActionEvent = CustomEvent<MenuEventDetail>;
+export type MenuItemFocusEvent = CustomEvent<MenuEventDetail>;
+declare const Menu_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
- * @csspart menu
  * @csspart items
- *
- * @fires {Event} open - Fires when the menu is opened.
- * @fires {Event} close - Fires when the menu is closed.
- * @fires {MenuSelectEvent} select - Fires when an item is selected.
- * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
- *
- * TODO: handle slotchange
+ * @slot - menu items
+ * @fires {MenuActionEvent} action - Fires when an item is activated.
+ * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused.
+ * @fires {Event} request-popup-hide - Fires when menu should be hidden.
  */
-export declare class Menu extends Base {
+export declare class Menu extends Menu_base {
     #private;
-    readonly _durations: {
-        show: number;
-        hide: number;
-    };
-    readonly _scrollPadding: number;
-    type: string;
-    open: boolean;
-    quick: boolean;
-    offset: number;
-    align: Placement;
-    alignStrategy: Strategy;
-    keepOpenBlur: boolean;
-    keepOpenSelect: boolean;
-    keepOpenClickAway: boolean;
-    noFocusControl: boolean;
-    tabIndex: number;
-    $menu: HTMLElement;
-    slotItems: Array<MenuItem | HTMLElement>;
+    /**
+     * When true, emits `request-popup-hide` on `action`
+     */
+    keepOpenAction: boolean;
+    /**
+     * When true, removes the default focus management and `aria-activedescendant`
+     * on the host.
+     */
+    bare: boolean;
+    slotItems: Array<MenuItem>;
     get $items(): MenuItem[];
-    private $lastFocused;
-    render(): import("lit-html").TemplateResult<1>;
-    renderItemSlot(): import("lit-html").TemplateResult<1>;
-    private readonly popoverController;
-    private readonly listController;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, any>): void;
     get currentIndex(): number;
     focusFirstItem(): void;
     focusLastItem(): void;
     focusItem(item: MenuItem): void;
-    show(): void;
-    close(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    private readonly listController;
+    handleKeyDown(event: KeyboardEvent): void;
+}
+export declare enum MenuAction {
+    Close = -11,
+    CloseSelect = -10,
+    First = 1,
+    Last = 2,
+    Next = 3,
+    Open = 4,
+    PageDown = 5,
+    PageUp = 6,
+    Previous = 7,
+    Select = 8,
+    Type = 9
 }
-export declare const MenuActions: {
-    Close: number;
-    CloseSelect: number;
-    First: number;
-    Last: number;
-    Next: number;
-    Open: number;
-    PageDown: number;
-    PageUp: number;
-    Previous: number;
-    Select: number;
-    Type: number;
+export declare function getActionFromKey(event: KeyboardEvent): MenuAction | null;
+export declare function getVisibleItems(container: HTMLElement, items: HTMLElement[]): {
+    first: number;
+    last: number;
+    pageSize: number;
 };
-export declare function filterOptions(options: string[], filter: string, exclude?: string[]): string[];
-export declare function getActionFromKey(event: KeyboardEvent, menuOpen: boolean): number;
-export declare function getUpdatedIndex(currentIndex: number, maxIndex: number, action: number): number;
-export declare function scrollItemIntoView(menu: HTMLElement, item: HTMLElement, paddingY?: number): void;
 export {};