@momentum-design/components 0.92.3 → 0.92.5

package/dist/components/divider/divider.styles.js

@@ -201,6 +201,7 @@ const styles = [
       color: var(--mdc-divider-text-color);
       font-size: var(--mdc-divider-text-size);
       line-height: var(--mdc-divider-text-line-height);
+      flex-shrink: 0;
     }
   `,
 ];

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

@@ -3,7 +3,7 @@ import { nothing } from 'lit';
 import { Component } from '../../models';
 import type { PopoverPlacement } from '../popover/popover.types';
 import type { TextType } from '../text/text.types';
-import type { ListItemVariants } from './listitem.types';
+import { ListItemVariants } from './listitem.types';
 declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
  * mdc-listitem component is used to display a label with different types of controls.
@@ -49,6 +49,10 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
  * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
+ * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled
+ * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled
+ * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)
  */
 declare class ListItem extends ListItem_base {
     /** @internal */
@@ -108,6 +112,7 @@ declare class ListItem extends ListItem_base {
     tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Fires the click event when the enter or space key is pressed down.
      * This behavior is similar to a button click and key interaction.

package/dist/components/listitem/listitem.component.js

@@ -19,6 +19,7 @@ import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { DEFAULTS } from './listitem.constants';
 import styles from './listitem.styles';
 import { generateListItemId, generateTooltipId } from './listitem.utils';
+import { ListItemEventManager } from './listitem.events';
 /**
  * mdc-listitem component is used to display a label with different types of controls.
  * There can be three types of controls, a radio button, a checkbox on the
@@ -63,6 +64,10 @@ import { generateListItemId, generateTooltipId } from './listitem.utils';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
  * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
+ * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled
+ * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled
+ * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)
  */
 class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     constructor() {
@@ -90,6 +95,11 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         this.role = this.role || ROLE.LISTITEM;
         // Add a unique id to the listitem if it does not have one.
         this.id = this.id || generateListItemId();
+        ListItemEventManager.onCreatedListItem(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        ListItemEventManager.onDestroyedListItem(this);
     }
     /**
      * Fires the click event when the enter or space key is pressed down.
@@ -184,9 +194,11 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
             if (disabled) {
                 element.setAttribute('disabled', '');
+                ListItemEventManager.onDisableListItem(this);
             }
             else {
                 element.removeAttribute('disabled');
+                ListItemEventManager.onEnableListItem(this);
             }
         });
         // Set the aria-disabled attribute to indicate that the list item is disabled.

package/dist/components/listitem/listitem.events.d.ts

@@ -0,0 +1,34 @@
+import type ListItem from './listitem.component';
+export declare class ListItemEventManager {
+    /**
+     * Dispatches a custom event for the ListItem.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The LitItem instance.
+     */
+    private static dispatchListItemEvent;
+    /**
+     * Custom event that is fired when the popover is shown.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDisableListItem(instance: ListItem): void;
+    /**
+     * Custom event that is fired when the popover is hidden.
+     *
+     * @param instance - The popover instance.
+     */
+    static onEnableListItem(instance: ListItem): void;
+    /**
+     * Custom event that is fired when the popover is created.
+     *
+     * @param instance - The popover instance.
+     */
+    static onCreatedListItem(instance: ListItem): void;
+    /**
+     * Custom event that is fired when the popover is destroyed.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDestroyedListItem(instance: ListItem): void;
+}

package/dist/components/listitem/listitem.events.js

@@ -0,0 +1,45 @@
+export class ListItemEventManager {
+    /**
+     * Dispatches a custom event for the ListItem.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The LitItem instance.
+     */
+    static dispatchListItemEvent(eventName, instance) {
+        instance.dispatchEvent(new Event(eventName, { composed: true, bubbles: true }));
+    }
+    /**
+     * Custom event that is fired when the popover is shown.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDisableListItem(instance) {
+        this.dispatchListItemEvent('disabled', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is hidden.
+     *
+     * @param instance - The popover instance.
+     */
+    static onEnableListItem(instance) {
+        this.dispatchListItemEvent('enabled', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is created.
+     *
+     * @param instance - The popover instance.
+     */
+    static onCreatedListItem(instance) {
+        // Use setTimeout to ensure the event is dispatched after the component is fully initialized
+        // Inherited Element might execute its own lifecycle methods
+        setTimeout(() => this.dispatchListItemEvent('created', instance), 0);
+    }
+    /**
+     * Custom event that is fired when the popover is destroyed.
+     *
+     * @param instance - The popover instance.
+     */
+    static onDestroyedListItem(instance) {
+        this.dispatchListItemEvent('destroyed', instance);
+    }
+}

package/dist/components/listitem/listitem.types.d.ts

@@ -1,10 +1,21 @@
 import type { ValueOf } from '../../utils/types';
 import { LISTITEM_VARIANTS } from './listitem.constants';
-type ListItemVariants = ValueOf<typeof LISTITEM_VARIANTS>;
-interface Events {
+export type ListItemVariants = ValueOf<typeof LISTITEM_VARIANTS>;
+export interface Events {
     onClickEvent: MouseEvent;
     onKeyDownEvent: KeyboardEvent;
     onKeyUpEvent: KeyboardEvent;
     onFocusEvent: FocusEvent;
+    onEnabledEvent: Event;
+    onDisabledEvent: Event;
+    onCreatedEvent: Event;
+    onDestroyedEvent: Event;
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        disabled: Event;
+        enabled: Event;
+        created: Event;
+        destroyed: Event;
+    }
 }
-export type { ListItemVariants, Events };

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Popover from '../popover/popover.component';
-import { PopoverPlacement } from '../popover/popover.types';
+import type { PopoverPlacement } from '../popover/popover.types';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -129,6 +129,9 @@ declare class MenuPopover extends Popover {
      * @param event - The mouse event that triggered the click.
      */
     private handleMouseClick;
+    private handleItemCreation;
+    private handleItemChangeEvent;
+    private resetMenuNavigation;
     /**
      * Resolves the key pressed by the user based on the direction of the layout.
      * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.

package/dist/components/menupopover/menupopover.component.js

@@ -120,9 +120,27 @@ class MenuPopover extends Popover {
                 this.isTriggerClicked = true;
             }
         };
+        this.handleItemChangeEvent = (event) => {
+            event.stopImmediatePropagation();
+            if (event.target && event.type === 'destroyed') {
+                event.target.removeEventListener('destroyed', this.handleItemChangeEvent);
+                event.target.removeEventListener('disabled', this.handleItemChangeEvent);
+            }
+            this.resetMenuNavigation();
+        };
+        this.resetMenuNavigation = () => {
+            // Re-collect menu items to ensure the list is up-to-date
+            this.collectMenuItems();
+            // Reset tab indexes to ensure at least one menu item is focusable
+            const focusableMenuItem = this.menuItems.find(item => item.getAttribute('tabindex') === '0');
+            if (!focusableMenuItem) {
+                this.resetTabIndexes(0);
+            }
+        };
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('keyup', this.handleKeyUp);
         this.addEventListener('click', this.handleMouseClick);
+        this.addEventListener('created', this.handleItemCreation);
     }
     /** @internal */
     collectMenuItems() {
@@ -165,6 +183,7 @@ class MenuPopover extends Popover {
         if (newValue) {
             this.backdrop = !(this.triggerElement.tagName.toLowerCase() === MENUITEM_TAGNAME);
         }
+        this.resetMenuNavigation();
         return super.isOpenUpdated(oldValue, newValue);
     }
     async firstUpdated(changedProperties) {
@@ -183,6 +202,7 @@ class MenuPopover extends Popover {
         if (this.menuItems.length > 0) {
             this.menuItems.forEach(menuitem => menuitem.setAttribute('tabindex', '-1'));
             this.menuItems[currentIndex].setAttribute('tabindex', '0');
+            this.menuItems[currentIndex].focus();
         }
     }
     /**
@@ -267,6 +287,18 @@ class MenuPopover extends Popover {
             this.closeMenu(target);
         }
     }
+    handleItemCreation(event) {
+        const item = event.target;
+        if (isValidMenuItem(item)) {
+            // Parent menu popover should not listen on nested menu items
+            event.stopImmediatePropagation();
+            // `destroyed` triggered in the `disconnectedCallback` of the item which executed when the item is removed from the DOM
+            // because of that the event does not bubble up to menupopover, and we need to capture the `destroyed` event on the item itself
+            item.addEventListener('destroyed', this.handleItemChangeEvent);
+            // `disabled` could bubble up, but it is more consistent to handle it the same way as `destroyed`
+            item.addEventListener('disabled', this.handleItemChangeEvent);
+        }
+    }
     /**
      * Resolves the key pressed by the user based on the direction of the layout.
      * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.