@vollowx/seele 0.13.5 → 0.13.6

package/src/base/list-item.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { genUniqueId } from '../core/unique-id.js';
@@ -6,11 +6,13 @@ import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
 export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
-    static{
-        this.styles = [
-            hiddenStyles
-        ];
+    constructor() {
+        super(...arguments);
+        this._role = 'option';
+        this.selected = false;
+        this.focused = false;
     }
+    static { this.styles = [hiddenStyles]; }
     get displayText() {
         return this.innerText.trim();
     }
@@ -20,19 +22,26 @@ export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
         this[internals].role = this._role;
         this.setAttribute('tabindex', '-1');
         this.#updateInternals();
-        if (!this.id) this.id = genUniqueId('item');
+        if (!this.id)
+            this.id = genUniqueId('item');
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('disabled') || changed.has('focused') || changed.has('selected')) {
+        if (changed.has('disabled') ||
+            changed.has('focused') ||
+            changed.has('selected')) {
             this.#updateInternals();
         }
     }
     #updateInternals() {
         this[internals].ariaDisabled = this.disabled ? 'true' : 'false';
-        this.focused ? this[internals].states.add('focused') : this[internals].states.delete('focused');
+        this.focused
+            ? this[internals].states.add('focused')
+            : this[internals].states.delete('focused');
         this[internals].ariaSelected = this.selected ? 'true' : 'false';
-        this.selected ? this[internals].states.add('selected') : this[internals].states.delete('selected');
+        this.selected
+            ? this[internals].states.add('selected')
+            : this[internals].states.delete('selected');
     }
     focus() {
         this.focused = true;
@@ -40,19 +49,10 @@ export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
     blur() {
         this.focused = false;
     }
-    constructor(...args){
-        super(...args), this._role = 'option', this.selected = false, this.focused = false;
-    }
 }
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], ListItem.prototype, "selected", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], ListItem.prototype, "focused", void 0);

package/src/base/list.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import type { ListItem } from './list-item.js';
+declare const Base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+interface ListSelectDetail {
+    item: ListItem;
+    index: number;
+}
+export type ListSelectEvent = CustomEvent<ListSelectDetail>;
+interface ItemFocusDetail {
+    item: ListItem;
+}
+export type ListItemFocusEvent = CustomEvent<ItemFocusDetail>;
+/**
+ * @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 {ListItemFocusEvent} item-focus - Fires when an item is focused
+ */
+export declare class List extends Base {
+    #private;
+    readonly _scrollPadding: number;
+    noFocusControl: boolean;
+    slotItems: Array<ListItem | HTMLElement>;
+    get $items(): ListItem[];
+    render(): import("lit-html").TemplateResult<1>;
+    renderItemSlot(): import("lit-html").TemplateResult<1>;
+    private readonly listController;
+    constructor();
+    protected updated(changed: Map<string, any>): void;
+    get currentIndex(): number;
+    focusFirstItem(): void;
+    focusLastItem(): void;
+    focusItem(item: ListItem): void;
+}
+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 filterOptions(options: string[], filter: string, exclude?: string[]): string[];
+export declare function getActionFromKey(event: KeyboardEvent): number;
+export declare function getUpdatedIndex(currentIndex: number, maxIndex: number, action: number): number;
+export declare function scrollItemIntoView(list: HTMLElement, item: HTMLElement, paddingY?: number): void;
+export {};

package/src/base/list.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { setFocusVisible } from '../core/focus-visible.js';
@@ -12,63 +12,68 @@ const Base = InternalsAttached(LitElement);
  * @fires {Event} close - Fires when the menu is closed.
  * @fires {ListSelectEvent} 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 Base {
     get $items() {
         return this.listController.items || [];
     }
     render() {
-        return html`${this.renderItemSlot()}`;
+        return html `${this.renderItemSlot()}`;
     }
     renderItemSlot() {
-        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' && !item.hasAttribute('disabled') && !item.hidden,
-            getPossibleItems: ()=>this.slotItems,
-            blurItem: (item)=>{
+        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' &&
+                !item.hasAttribute('disabled') &&
+                !item.hidden,
+            getPossibleItems: () => this.slotItems,
+            blurItem: (item) => {
                 item.focused = false;
             },
-            focusItem: (item)=>{
+            focusItem: (item) => {
                 item.focused = true;
                 if (!this.noFocusControl) {
                     this[internals].ariaActiveDescendantElement = item;
                 }
                 scrollItemIntoView(this, item, this._scrollPadding);
                 this.dispatchEvent(new CustomEvent('item-focus', {
-                    detail: {
-                        item: item
-                    },
+                    detail: { item: item },
                     bubbles: true,
-                    composed: true
+                    composed: true,
                 }));
             },
-            wrapNavigation: ()=>false
+            wrapNavigation: () => false,
         });
         this[internals].role = 'listbox';
         if (!this.hasAttribute('tabindex')) {
             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', (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));
         }
     }
     updated(changed) {
-    // TODO: Find somewhere to put this
-    // this.listController.clearSearch();
+        // TODO: Find somewhere to put this
+        // this.listController.clearSearch();
     }
     #handleKeyDown(event) {
-        if (event.defaultPrevented) return;
+        if (event.defaultPrevented)
+            return;
         const action = getActionFromKey(event);
         const items = this.$items;
         const currentIndex = this.listController.currentIndex;
         const maxIndex = items.length - 1;
-        switch(action){
+        switch (action) {
             case MenuActions.Last:
             case MenuActions.First:
             case MenuActions.Next:
@@ -86,10 +91,10 @@ const Base = InternalsAttached(LitElement);
                     this.dispatchEvent(new CustomEvent('select', {
                         detail: {
                             item: items[currentIndex],
-                            index: currentIndex
+                            index: currentIndex,
                         },
                         bubbles: true,
-                        composed: true
+                        composed: true,
                     }));
                 }
                 return;
@@ -99,8 +104,10 @@ const Base = InternalsAttached(LitElement);
         }
     }
     #handleFocusIn() {
-        if (this.currentIndex == -1) this.listController.focusFirstItem();
-        else this.$items[this.currentIndex].focused = true;
+        if (this.currentIndex == -1)
+            this.listController.focusFirstItem();
+        else
+            this.$items[this.currentIndex].focused = true;
     }
     #handleFocusOut() {
         this.$items[this.currentIndex].focused = false;
@@ -116,20 +123,22 @@ const Base = InternalsAttached(LitElement);
         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;
+        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)) return;
+        if (!item || !this.listController.items.includes(item))
+            return;
         this.dispatchEvent(new CustomEvent('select', {
             detail: {
                 item: item,
-                index: this.listController.items.indexOf(item)
+                index: this.listController.items.indexOf(item),
             },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     #getEventItem(event) {
@@ -148,16 +157,11 @@ const Base = InternalsAttached(LitElement);
         this.listController._focusItem(item);
     }
 }
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'no-focus-control'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'no-focus-control' })
 ], List.prototype, "noFocusControl", void 0);
-_ts_decorate([
-    queryAssignedElements({
-        flatten: true
-    })
+__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 = {
@@ -171,10 +175,10 @@ export const MenuActions = {
     PageUp: 7,
     Previous: 8,
     Select: 9,
-    Type: 10
+    Type: 10,
 };
 export function filterOptions(options = [], filter, exclude = []) {
-    return options.filter((option)=>{
+    return options.filter((option) => {
         const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
         return matches && exclude.indexOf(option) < 0;
     });
@@ -187,29 +191,37 @@ export function getActionFromKey(event) {
     if (key === 'End') {
         return MenuActions.Last;
     }
-    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
+    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) {
+    }
+    else if (key === 'ArrowDown' && !altKey) {
         return MenuActions.Next;
-    } else if (key === 'ArrowUp') {
+    }
+    else if (key === 'ArrowUp') {
         return MenuActions.Previous;
-    } else if (key === 'PageUp') {
+    }
+    else if (key === 'PageUp') {
         return MenuActions.PageUp;
-    } else if (key === 'PageDown') {
+    }
+    else if (key === 'PageDown') {
         return MenuActions.PageDown;
-    } else if (key === 'Escape') {
+    }
+    else if (key === 'Escape') {
         return MenuActions.Close;
-    } else if (key === 'Enter' || key === ' ') {
+    }
+    else if (key === 'Enter' || key === ' ') {
         return MenuActions.CloseSelect;
     }
     return undefined;
 }
 export function getUpdatedIndex(currentIndex, maxIndex, action) {
     const pageSize = 10;
-    switch(action){
+    switch (action) {
         case MenuActions.First:
             return 0;
         case MenuActions.Last:
@@ -227,13 +239,15 @@ export function getUpdatedIndex(currentIndex, maxIndex, action) {
     }
 }
 export function scrollItemIntoView(list, item, paddingY = 0) {
-    if (!list) return;
+    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) {
+    }
+    else if (itemRect.top - paddingY < menuRect.top) {
         list.scrollTop -= menuRect.top - itemRect.top + paddingY;
     }
 }

package/src/base/menu-item.d.ts

@@ -0,0 +1,6 @@
+import { ListItem } from './list-item.js';
+export declare const MenuItemMixin: <T extends Constructor<ListItem>>(superClass: T) => T;
+declare const MenuItem_base: typeof ListItem;
+export declare class MenuItem extends MenuItem_base {
+}
+export {};

package/src/base/menu-item.js

@@ -1,8 +1,9 @@
 import { ListItem } from './list-item.js';
-export const MenuItemMixin = (superClass)=>{
+export const MenuItemMixin = (superClass) => {
     class MenuItemElement extends superClass {
-        constructor(...args){
-            super(...args), this._role = 'menuitem';
+        constructor() {
+            super(...arguments);
+            this._role = 'menuitem';
         }
     }
     return MenuItemElement;

package/src/base/menu.d.ts

@@ -0,0 +1,76 @@
+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 {
+    item: MenuItem;
+    index: number;
+}
+export type MenuSelectEvent = CustomEvent<MenuSelectDetail>;
+interface ItemFocusDetail {
+    item: MenuItem;
+}
+export type MenuItemFocusEvent = CustomEvent<ItemFocusDetail>;
+/**
+ * @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
+ */
+export declare class Menu extends 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>;
+    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;
+}
+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 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 {};