@vollowx/seele 0.13.10 → 0.14.0

package/src/base/menu.js

@@ -1,59 +1,46 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { setFocusVisible } from '../core/focus-visible.js';
-import { Attachable } from './mixins/attachable.js';
-import { InternalsAttached } from './mixins/internals-attached.js';
-import { FocusDelegated } from './mixins/focus-delegated.js';
-import { PopoverController } from './controllers/popover-controller.js';
+import { LitElement, html, isServer } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.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 = FocusDelegated(InternalsAttached(Attachable(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 class Menu extends Base {
+export class Menu extends InternalsAttached(LitElement) {
+    get $items() {
+        return this.listController.items || [];
+    }
+    get currentIndex() {
+        return this.listController?.currentIndex;
+    }
+    focusFirstItem() {
+        this.listController.focusFirstItem();
+    }
+    focusLastItem() {
+        this.listController.focusLastItem();
+    }
+    focusItem(item) {
+        this.listController._focusItem(item);
+    }
+    render() {
+        return html `<slot part="items"></slot>`;
+    }
     constructor() {
-        super(...arguments);
-        this._durations = { show: 0, hide: 0 };
-        this._scrollPadding = 0;
-        this.type = 'menu';
-        this.open = false;
-        this.quick = false;
-        this.offset = 0;
-        this.align = 'bottom-start';
-        this.alignStrategy = 'absolute';
-        this.keepOpenBlur = false;
-        this.keepOpenSelect = false;
-        this.keepOpenClickAway = false;
-        this.noFocusControl = false;
-        this.tabIndex = 0;
-        this.$lastFocused = null;
-        this.popoverController = new PopoverController(this, {
-            popover: () => this.$menu,
-            trigger: () => this.$control,
-            positioning: {
-                placement: () => this.align,
-                strategy: () => this.alignStrategy,
-                offset: () => this.offset,
-                windowPadding: () => 16,
-            },
-            durations: {
-                open: () => (this.quick ? 0 : this._durations.show),
-                close: () => (this.quick ? 0 : this._durations.hide),
-            },
-            onClickAway: () => {
-                if (!this.keepOpenClickAway)
-                    this.open = false;
-            },
-        });
+        super();
+        /**
+         * When true, emits `request-popup-hide` on `action`
+         */
+        this.keepOpenAction = false;
+        /**
+         * When true, removes the default focus management and `aria-activedescendant`
+         * on the host.
+         */
+        this.bare = false;
         this.listController = new ListController(this, {
             isItem: (item) => item.getAttribute('seele-base') === 'option' &&
                 !item.hasAttribute('disabled') &&
@@ -64,313 +51,204 @@ export class Menu extends Base {
             },
             focusItem: (item) => {
                 item.focused = true;
-                if (!this.noFocusControl) {
-                    this.$menu.ariaActiveDescendantElement = item;
-                }
-                scrollItemIntoView(this.$menu, item, this._scrollPadding);
+                if (!this.bare)
+                    this[internals].ariaActiveDescendantElement = item;
+                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,
                 }));
             },
             wrapNavigation: () => false,
         });
-    }
-    get $items() {
-        return this.listController.items || [];
-    }
-    render() {
-        return html `<div part="menu" role="${this.type}" tabindex="${this.tabIndex}" @keydown="${this.#handleKeyDown.bind(this)}" @focusout="${this.#handleFocusOut.bind(this)}">${this.renderItemSlot()}</div>`;
-    }
-    renderItemSlot() {
-        return html `<slot part="items"></slot>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.$control) {
-            // TODO: Manage $control ARIA attributes
-            // TODO: Handle $control change
-            this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
+        this[internals].role = 'menu';
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
         }
-        this.updateComplete.then(() => {
-            this.$items.forEach((item) => {
-                item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
-                item.addEventListener('click', this.#handleItemClick.bind(this));
-            });
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.$control) {
-            this.$control.removeEventListener('focusout', this.#handleFocusOut.bind(this));
+        if (!isServer) {
+            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));
         }
     }
-    updated(changed) {
-        if (changed.has('open')) {
-            if (this.open) {
-                this.dispatchEvent(new Event('open', { bubbles: true, composed: true }));
-                this.$lastFocused = document.activeElement;
-                if (this.$control) {
-                    this.$control.ariaExpanded = 'true';
-                }
-                this.popoverController.animateOpen().then(() => {
-                    if (!this.noFocusControl) {
-                        this.$menu.focus();
-                        this.listController.focusFirstItem();
-                    }
-                });
-            }
-            else {
-                if (!this.noFocusControl) {
-                    this.$menu.ariaActiveDescendantElement = null;
-                }
-                this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
-                this.listController.clearSearch();
-                if (this.$control) {
-                    this.$control.ariaExpanded = 'false';
-                }
-                this.popoverController.animateClose().then(() => {
-                    if (this.$lastFocused) {
-                        if (!this.noFocusControl)
-                            this.$lastFocused.focus();
-                        this.$lastFocused = null;
-                    }
-                });
-            }
-        }
+    #handleFocusIn() {
+        if (this.bare)
+            return;
+        // TODO: support focusing first selected
+        this.listController.focusFirstItem();
+    }
+    #handleFocusOut() {
+        this.listController._blurItem(this.listController._focusedItem);
     }
-    #handleKeyDown(event) {
+    handleKeyDown(event) {
         if (event.defaultPrevented)
             return;
-        const action = getActionFromKey(event, this.open);
+        const action = getActionFromKey(event);
         const items = this.$items;
         const currentIndex = this.listController.currentIndex;
         const maxIndex = items.length - 1;
         switch (action) {
-            case MenuActions.Last:
-            case MenuActions.First:
-                this.open = true;
-            // intentional fallthrough
-            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();
-                const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
-                this.listController._focusItem(items[nextIndex]);
+                this.listController.focusNextItem();
                 return;
-            case MenuActions.CloseSelect:
+            case MenuAction.Previous:
+                event.preventDefault();
+                this.listController.focusPreviousItem();
+                return;
+            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,
-                    }));
-                    if (this.keepOpenSelect)
+                    this.#dispatchAction({
+                        item: items[currentIndex],
+                        index: currentIndex,
+                    });
+                    if (this.keepOpenAction)
                         return;
-                    this.open = false;
+                    this.#dispatchHide();
                 }
                 return;
-            case MenuActions.Close:
-                event.preventDefault();
-                this.open = false;
-                return;
-            case MenuActions.Type:
-                this.open = true;
+            case MenuAction.Type:
                 this.listController.handleType(event.key);
                 return;
-            case MenuActions.Open:
-                event.preventDefault();
-                this.open = true;
-                return;
         }
     }
-    #handleFocusOut(event) {
-        if (this.keepOpenBlur)
-            return;
-        const newFocus = event.relatedTarget;
-        const isInside = this.contains(newFocus) ||
-            this.shadowRoot?.contains(newFocus) ||
-            this.$control?.contains(newFocus);
-        if (!isInside) {
-            this.open = false;
-        }
-    }
-    #handleItemMouseOver(event) {
+    #handleMouseOver(event) {
         setFocusVisible(false);
-        const hoveredItem = event.currentTarget;
-        this.listController._focusItem(hoveredItem);
+        const item = this.#getItemFromEvent(event);
+        if (item && this.currentIndex !== item.index)
+            this.listController._focusItem(item.item);
     }
-    #handleItemClick(event) {
-        const clickedItem = event.currentTarget;
-        const index = this.listController.items.indexOf(clickedItem);
-        this.listController.items[index].focused = false;
-        this.dispatchEvent(new CustomEvent('select', {
-            detail: {
-                item: clickedItem,
-                index: index,
-            },
+    #handleClick(event) {
+        const item = this.#getItemFromEvent(event);
+        if (!item)
+            return;
+        item.item.focused = false;
+        this.#dispatchAction({ ...item });
+        if (!this.keepOpenAction)
+            this.#dispatchHide();
+    }
+    #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) };
+    }
+    #dispatchAction(detail) {
+        this.dispatchEvent(new CustomEvent('action', {
+            detail: detail,
             bubbles: true,
             composed: true,
         }));
-        if (!this.keepOpenSelect)
-            this.open = false;
-    }
-    get currentIndex() {
-        return this.listController?.currentIndex;
-    }
-    focusFirstItem() {
-        this.listController.focusFirstItem();
-    }
-    focusLastItem() {
-        this.listController.focusLastItem();
-    }
-    focusItem(item) {
-        this.listController._focusItem(item);
-    }
-    show() {
-        this.open = true;
     }
-    close() {
-        this.open = false;
+    #dispatchHide() {
+        this.dispatchEvent(new Event('request-popup-hide', { bubbles: true, composed: true }));
     }
 }
 __decorate([
-    property()
-], Menu.prototype, "type", void 0);
+    property({ type: Boolean, attribute: 'keep-open-action' })
+], Menu.prototype, "keepOpenAction", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Menu.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], Menu.prototype, "quick", void 0);
-__decorate([
-    property({ type: Number })
-], Menu.prototype, "offset", void 0);
-__decorate([
-    property({ reflect: true })
-], Menu.prototype, "align", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'align-strategy' })
-], Menu.prototype, "alignStrategy", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'keep-open-blur' })
-], Menu.prototype, "keepOpenBlur", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'keep-open-select' })
-], Menu.prototype, "keepOpenSelect", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'keep-open-click-away' })
-], Menu.prototype, "keepOpenClickAway", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'no-focus-control' })
-], Menu.prototype, "noFocusControl", void 0);
-__decorate([
-    property({ type: Number, attribute: 'data-tabindex' })
-], Menu.prototype, "tabIndex", void 0);
-__decorate([
-    query('[part="menu"]')
-], Menu.prototype, "$menu", void 0);
+], Menu.prototype, "bare", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })
 ], Menu.prototype, "slotItems", void 0);
+// Might as well be used in listbox, so let's keep it for now
 // 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, menuOpen) {
+export var MenuAction;
+(function (MenuAction) {
+    MenuAction[MenuAction["Close"] = -11] = "Close";
+    MenuAction[MenuAction["CloseSelect"] = -10] = "CloseSelect";
+    MenuAction[MenuAction["First"] = 1] = "First";
+    MenuAction[MenuAction["Last"] = 2] = "Last";
+    MenuAction[MenuAction["Next"] = 3] = "Next";
+    MenuAction[MenuAction["Open"] = 4] = "Open";
+    MenuAction[MenuAction["PageDown"] = 5] = "PageDown";
+    MenuAction[MenuAction["PageUp"] = 6] = "PageUp";
+    MenuAction[MenuAction["Previous"] = 7] = "Previous";
+    MenuAction[MenuAction["Select"] = 8] = "Select";
+    MenuAction[MenuAction["Type"] = 9] = "Type";
+})(MenuAction || (MenuAction = {}));
+export function getActionFromKey(event) {
     const { key, altKey, ctrlKey, metaKey } = event;
-    const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
-    if (!menuOpen && openKeys.includes(key)) {
-        return MenuActions.Open;
-    }
-    if (key === 'Home') {
-        return MenuActions.First;
-    }
-    if (key === 'End') {
-        return MenuActions.Last;
-    }
+    if (key === 'Escape')
+        return MenuAction.Close;
+    if (key === 'Enter' || key === ' ')
+        return MenuAction.CloseSelect;
+    if (key === 'Home')
+        return MenuAction.First;
+    if (key === 'End')
+        return MenuAction.Last;
+    if (key === 'PageUp')
+        return MenuAction.PageUp;
+    if (key === 'PageDown')
+        return MenuAction.PageDown;
+    if (key === 'ArrowUp' && altKey)
+        return MenuAction.CloseSelect;
+    if (key === 'ArrowDown' && !altKey)
+        return MenuAction.Next;
+    if (key === 'ArrowUp' && !altKey)
+        return MenuAction.Previous;
     if (key === 'Backspace' ||
         key === 'Clear' ||
         (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
-        return MenuActions.Type;
+        return MenuAction.Type;
     }
-    if (menuOpen) {
-        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;
+    return null;
+}
+export function getVisibleItems(container, items) {
+    if (!items.length)
+        return { first: 0, last: 0, pageSize: 1 };
+    const containerRect = container.getBoundingClientRect();
+    const style = window.getComputedStyle(container);
+    const paddingTop = parseFloat(style.scrollPaddingTop) || 0;
+    const paddingBottom = parseFloat(style.scrollPaddingBottom) || 0;
+    const top = containerRect.top + container.clientTop + paddingTop;
+    const bottom = top + container.clientHeight - paddingTop - paddingBottom;
+    let first = -1;
+    let last = -1;
+    for (let i = 0; i < items.length; i++) {
+        const itemRect = items[i].getBoundingClientRect();
+        if (itemRect.top < bottom && itemRect.bottom > top) {
+            if (first === -1)
+                first = i;
+            last = i;
         }
-        else if (key === 'Enter' || key === ' ') {
-            return MenuActions.CloseSelect;
+        else if (first !== -1) {
+            break;
         }
     }
-    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(menu, item, paddingY = 0) {
-    if (!menu)
-        return;
-    // Basic scroll into view logic
-    const menuRect = menu.getBoundingClientRect();
-    const itemRect = item.getBoundingClientRect();
-    if (itemRect.bottom + paddingY > menuRect.bottom) {
-        menu.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
-    }
-    else if (itemRect.top - paddingY < menuRect.top) {
-        menu.scrollTop -= menuRect.top - itemRect.top + paddingY;
+    if (first === -1) {
+        return { first: 0, last: 0, pageSize: 1 };
     }
+    // pageSize is the span of visible items
+    return { first, last, pageSize: Math.max(1, last - first + 1) };
 }

package/src/base/{experimental/popup.d.ts → popup.d.ts}

@@ -1,27 +1,23 @@
 /**
  * NOTE: demos at dev/pending.html
- * NOTE: should apply writing style on event listeners to other files
- * TODO: consider removing popoverController, but in case of tooltip, reserve
- *       for now
  * TODO: hijack all `hidePopover()`s to allow more complex JS animations
- * TODO: simpler Menu that just inherits List - do we really need a separated
- *       Menu? Why not just `<md-list role="presentation">`?
- *
- * Design: TO BE ADDED
  */
 import { LitElement, PropertyValues } from 'lit';
 import { Placement, Strategy } from '@floating-ui/dom';
-import { autoAttachToParent, handleControlChange } from '../mixins/attachable.js';
-export declare function lookForTabbable(root: Node): HTMLElement | null;
-declare const Popup_base: Constructor<import("../mixins/attachable.js").AttachableInterface> & Constructor<import("../mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+import { autoAttachToParent, handleControlChange } from './mixins/attachable.js';
+declare const Popup_base: Constructor<import("./mixins/attachable.js").AttachableInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * When using popup with menu, you need to manually bind them using `aria-controls`
+ */
 export declare class Popup extends Popup_base {
     #private;
     open: boolean;
     noFocusControl: boolean;
-    placement: Placement;
+    align: Placement;
     strategy: Strategy;
     offset: number;
     windowPadding: number;
+    $ariaControl: HTMLElement | null;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     constructor();