@momentum-design/components 0.110.2 → 0.111.1

package/dist/components/list/list.component.d.ts

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import { Component } from '../../models';
+declare const List_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
@@ -13,55 +14,48 @@ import { Component } from '../../models';
  *
  * @csspart container - The container slot around the list items
  */
-declare class List extends Component {
+declare class List extends List_base {
     /**
      * @internal
-     * Get all listitem elements which are not disabled in the list.
      */
-    private listItems;
-    constructor();
-    connectedCallback(): void;
+    private itemsStore;
     /**
-     * Handles the keydown event on the list element.
-     * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
-     * and sets the active tabindex of the list item.
-     * Prevents the default event behavior.
-     * @param event - The keyboard event.
+     * Whether to loop navigation when reaching the end of the list.
+     * If 'true', pressing the down arrow on the last item will focus the first item,
+     * and pressing the up arrow on the first item will focus the last item.
+     * If 'false', navigation will stop at the first or last item.
+     *
+     * @default ''
      */
-    private handleKeyDown;
+    loop: 'true' | 'false';
     /**
-     * Returns the index of the given target in the listItems array.
-     * If the target is not a list item, but a child element of a list item,
-     * it returns the index of the parent list item.
-     * @param target - The target element to find the index of.
-     * @returns The index of the target element in the listItems array.
+     * The index of the item that should receive focus when the list is first rendered.
+     * If the index is out of bounds, the first item (index 0) will receive focus.
+     *
+     * @default 0
      */
-    private getCurrentIndex;
+    initialFocus: number;
+    constructor();
+    connectedCallback(): void;
     /**
-     * Calculates a new index based on the pressed keyboard key.
-     * Supports navigation keys for moving focus within a list.
-     * @param key - The key that was pressed.
-     * @param currentIndex - The current index of the focused list item.
-     * @param wrappedDivsCount - The total number of list items.
-     * @returns The new index to focus on, or undefined if the key is not supported.
+     * @internal
      */
-    private getNewIndexBasedOnKey;
+    get navItems(): HTMLElement[];
     /**
-     * Handles the mouse click event on the list element.
-     * Finds the index of the target element in the list items array and calls
-     * `resetTabIndexAndSetActiveTabIndex` with that index.
-     * @param event - The mouse event.
+     * Update the tabIndex of the list items when a new item is added.
+     *
+     * @internal
      */
-    protected handleMouseClick(event: MouseEvent): void;
+    private handleCreatedEvent;
     /**
-     * Resets all list items tabindex to -1 and sets the tabindex of the
-     * element at the given index to 0, effectively setting the active
-     * element. This is used when navigating the list via keyboard.
+     * Update the focus when an item is removed.
+     * If there is a next item, focus it. If not, focus the previous item.
      *
-     * @param newIndex - The index of the new active element in the list.
+     * @internal
      */
-    private resetTabIndexAndSetActiveTabIndex;
-    firstUpdated(): void;
+    private handleDestroyEvent;
+    /** @internal */
+    private isValidItem;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/list/list.component.js

@@ -8,12 +8,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
+import { ListNavigationMixin } from '../../utils/mixins/ListNavigationMixin';
 import { TAG_NAME as LISTITEM_TAGNAME } from '../listitem/listitem.constants';
+import { ElementStore } from '../../utils/controllers/ElementStore';
+import { CaptureDestroyEventForChildElement } from '../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement';
+import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
 import styles from './list.styles';
+import { DEFAULTS } from './list.constants';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *
@@ -27,10 +31,65 @@ import styles from './list.styles';
  *
  * @csspart container - The container slot around the list items
  */
-class List extends Component {
+class List extends ListNavigationMixin(CaptureDestroyEventForChildElement(Component)) {
     constructor() {
         super();
-        this.addEventListener('keydown', this.handleKeyDown);
+        /**
+         * Whether to loop navigation when reaching the end of the list.
+         * If 'true', pressing the down arrow on the last item will focus the first item,
+         * and pressing the up arrow on the first item will focus the last item.
+         * If 'false', navigation will stop at the first or last item.
+         *
+         * @default ''
+         */
+        this.loop = DEFAULTS.LOOP;
+        /**
+         * The index of the item that should receive focus when the list is first rendered.
+         * If the index is out of bounds, the first item (index 0) will receive focus.
+         *
+         * @default 0
+         */
+        this.initialFocus = DEFAULTS.INITIAL_FOCUS;
+        /**
+         * Update the tabIndex of the list items when a new item is added.
+         *
+         * @internal
+         */
+        this.handleCreatedEvent = (event) => {
+            const createdElement = event.target;
+            if (!this.isValidItem(createdElement)) {
+                return;
+            }
+            createdElement.tabIndex = -1;
+        };
+        /**
+         * Update the focus when an item is removed.
+         * If there is a next item, focus it. If not, focus the previous item.
+         *
+         * @internal
+         */
+        this.handleDestroyEvent = (event) => {
+            const destroyedElement = event.target;
+            if (!this.isValidItem(destroyedElement) || destroyedElement.tabIndex !== 0) {
+                return;
+            }
+            const destroyedItemIndex = this.navItems.findIndex(node => node === destroyedElement);
+            if (destroyedItemIndex === -1) {
+                return;
+            }
+            let newIndex = destroyedItemIndex + 1;
+            if (newIndex >= this.navItems.length) {
+                newIndex = destroyedItemIndex - 1;
+            }
+            this.resetTabIndexes(newIndex);
+        };
+        this.addEventListener(LIFE_CYCLE_EVENTS.CREATED, this.handleCreatedEvent);
+        this.addEventListener(LIFE_CYCLE_EVENTS.DESTROYED, this.handleDestroyEvent);
+        // This must be initialized after the destroyed event listener
+        // to keep the element in the itemStore in order to move the focus correctly
+        this.itemsStore = new ElementStore(this, {
+            isValidItem: this.isValidItem,
+        });
     }
     connectedCallback() {
         super.connectedCallback();
@@ -38,91 +97,30 @@ class List extends Component {
         this.setAttribute('role', ROLE.LIST);
     }
     /**
-     * Handles the keydown event on the list element.
-     * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
-     * and sets the active tabindex of the list item.
-     * Prevents the default event behavior.
-     * @param event - The keyboard event.
-     */
-    handleKeyDown(event) {
-        var _a;
-        const currentIndex = this.getCurrentIndex(event.target);
-        const newIndex = this.getNewIndexBasedOnKey(event.key, currentIndex, this.listItems.length);
-        if (newIndex !== undefined) {
-            (_a = this.listItems[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            this.resetTabIndexAndSetActiveTabIndex(newIndex);
-        }
-    }
-    /**
-     * Returns the index of the given target in the listItems array.
-     * If the target is not a list item, but a child element of a list item,
-     * it returns the index of the parent list item.
-     * @param target - The target element to find the index of.
-     * @returns The index of the target element in the listItems array.
+     * @internal
      */
-    getCurrentIndex(target) {
-        return this.listItems.findIndex(node => node === target || node === target.parentElement);
+    get navItems() {
+        return this.itemsStore.items;
     }
-    /**
-     * Calculates a new index based on the pressed keyboard key.
-     * Supports navigation keys for moving focus within a list.
-     * @param key - The key that was pressed.
-     * @param currentIndex - The current index of the focused list item.
-     * @param wrappedDivsCount - The total number of list items.
-     * @returns The new index to focus on, or undefined if the key is not supported.
-     */
-    getNewIndexBasedOnKey(key, currentIndex, wrappedDivsCount) {
-        switch (key) {
-            case KEYS.ARROW_DOWN:
-                return (currentIndex + 1) % wrappedDivsCount;
-            case KEYS.ARROW_UP:
-                return (currentIndex - 1 + wrappedDivsCount) % wrappedDivsCount;
-            case KEYS.HOME:
-                return 0;
-            case KEYS.END:
-                return wrappedDivsCount - 1;
-            default:
-                return undefined;
-        }
-    }
-    /**
-     * Handles the mouse click event on the list element.
-     * Finds the index of the target element in the list items array and calls
-     * `resetTabIndexAndSetActiveTabIndex` with that index.
-     * @param event - The mouse event.
-     */
-    handleMouseClick(event) {
-        const newIndex = this.getCurrentIndex(event.target);
-        this.resetTabIndexAndSetActiveTabIndex(newIndex);
-    }
-    /**
-     * Resets all list items tabindex to -1 and sets the tabindex of the
-     * element at the given index to 0, effectively setting the active
-     * element. This is used when navigating the list via keyboard.
-     *
-     * @param newIndex - The index of the new active element in the list.
-     */
-    resetTabIndexAndSetActiveTabIndex(newIndex) {
-        this.listItems.forEach((node, index) => {
-            const newTabindex = newIndex === index ? '0' : '-1';
-            node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
-        });
-    }
-    firstUpdated() {
-        // For the first, we set the first element only as active.
-        this.resetTabIndexAndSetActiveTabIndex(0);
+    /** @internal */
+    isValidItem(item) {
+        return item.matches(`${LISTITEM_TAGNAME}:not([disabled])`);
     }
     render() {
         return html `
       <slot name="list-header"></slot>
       <!-- make the container slot role presentation to keep it ignored in a11y tree -->
-      <slot part="container" @click="${this.handleMouseClick}" role="presentation"></slot>
+      <slot part="container" role="presentation"></slot>
     `;
     }
 }
 List.styles = [...Component.styles, ...styles];
 __decorate([
-    queryAssignedElements({ selector: `${LISTITEM_TAGNAME}:not([disabled])` }),
-    __metadata("design:type", Array)
-], List.prototype, "listItems", void 0);
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], List.prototype, "loop", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'initial-focus' }),
+    __metadata("design:type", Number)
+], List.prototype, "initialFocus", void 0);
 export default List;

package/dist/components/list/list.constants.d.ts

@@ -1,3 +1,7 @@
 declare const TAG_NAME: "mdc-list";
 declare const HEADER_ID = "header-id";
-export { TAG_NAME, HEADER_ID };
+declare const DEFAULTS: {
+    readonly LOOP: "true";
+    readonly INITIAL_FOCUS: 0;
+};
+export { TAG_NAME, HEADER_ID, DEFAULTS };

package/dist/components/list/list.constants.js

@@ -1,4 +1,8 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('list');
 const HEADER_ID = 'header-id';
-export { TAG_NAME, HEADER_ID };
+const DEFAULTS = {
+    LOOP: 'true',
+    INITIAL_FOCUS: 0,
+};
+export { TAG_NAME, HEADER_ID, DEFAULTS };

package/dist/components/list/list.styles.js

@@ -3,12 +3,16 @@ const styles = css `
   :host {
     display: flex;
     flex-direction: column;
+    scroll-padding-top: 0.25rem;
+    scroll-padding-bottom: 0.25rem;
   }
 
   :host::part(container) {
     display: flex;
     flex-direction: column;
     gap: 0rem;
+    scroll-padding-top: 0.25rem;
+    scroll-padding-bottom: 0.25rem;
   }
 `;
 export default [styles];

package/dist/components/listbox/listbox.component.d.ts

@@ -32,7 +32,7 @@ declare class ListBox extends ListBox_base {
      * https://www.w3.org/WAI/ARIA/apg/practices/listbox
      * @internal
      */
-    protected loop: boolean;
+    protected loop: 'true' | 'false';
     /**
      * The name attribute is used to identify the listbox
      */

package/dist/components/listbox/listbox.component.js

@@ -49,7 +49,7 @@ class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Com
          * https://www.w3.org/WAI/ARIA/apg/practices/listbox
          * @internal
          */
-        this.loop = false;
+        this.loop = 'false';
         /**
          * The name attribute is used to identify the listbox
          */