@momentum-design/components 0.81.0 → 0.81.2

package/dist/index.d.ts

@@ -29,7 +29,6 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
-import Menu from './components/menu';
 import MenuBar from './components/menubar';
 import MenuItem from './components/menuitem';
 import MenuItemCheckbox from './components/menuitemcheckbox';
@@ -73,6 +72,6 @@ import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 export type { TextType, SpinnerSize, SpinnerVariant, SkeletonVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/index.js

@@ -30,7 +30,6 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
-import Menu from './components/menu';
 import MenuBar from './components/menubar';
 import MenuItem from './components/menuitem';
 import MenuItemCheckbox from './components/menuitemcheckbox';
@@ -70,6 +69,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,14 +12,15 @@ export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
+export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -29,13 +30,11 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
-export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';
@@ -51,11 +50,11 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
-export { default as SideNavigation } from './sidenavigation';
-export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as SideNavigation } from './sidenavigation';
+export { default as Skeleton } from './skeleton';
 export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,14 +12,15 @@ export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
+export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -29,13 +30,11 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
-export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';
@@ -51,11 +50,11 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
-export { default as SideNavigation } from './sidenavigation';
-export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as SideNavigation } from './sidenavigation';
+export { default as Skeleton } from './skeleton';
 export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

package/dist/utils/mixins/FocusTrapMixin.d.ts

@@ -1,9 +1,10 @@
+import type { Component } from '../../models';
 import type { Constructor } from './index.types';
-export declare class FocusTrapClassInterface {
-    enabledFocusTrap: boolean;
+export declare abstract class FocusTrapClassInterface {
+    protected abstract focusTrap: boolean;
     enabledPreventScroll: boolean;
-    setFocusableElements(): void;
-    setInitialFocus(prefferableElement?: number): void;
+    setInitialFocus(elementIndexToReceiveFocus?: number): void;
+    activateFocusTrap(): void;
     deactivateFocusTrap(): void;
 }
-export declare const FocusTrapMixin: <T extends Constructor<HTMLElement>>(superClass: T) => Constructor<HTMLElement & FocusTrapClassInterface> & T;
+export declare const FocusTrapMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<HTMLElement & FocusTrapClassInterface> & T;

package/dist/utils/mixins/FocusTrapMixin.js

@@ -11,14 +11,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { property } from 'lit/decorators.js';
 export const FocusTrapMixin = (superClass) => {
     class FocusTrap extends superClass {
-        constructor(...args) {
-            super(...args);
+        constructor() {
+            super(...arguments);
             /**
-             * Determines whether the focus trap is enabled.
-             * If true, focus will be restricted to the content within this component.
-             * @default false
+             * Determines whether focus should wrap around when reaching the first or last focusable element.
+             * If true, focus will cycle from end to start and vice versa.
+             *
+             * This only applies when `enabledFocusTrap` is true.
+             * @default true
              */
-            this.enabledFocusTrap = false;
+            this.shouldFocusTrapWrap = true;
             /**
              * Prevent outside scrolling when element is shown.
              * @default false
@@ -28,16 +30,43 @@ export const FocusTrapMixin = (superClass) => {
             this.focusTrapIndex = -1;
             /** @internal */
             this.focusableElements = [];
-            this.shouldWrapFocus = () => true;
-            this.addEventListener('keydown', this.handleKeydown);
+            /** @internal */
+            this.isFocusTrapActivated = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            document.addEventListener('keydown', this.handleTabKeydown.bind(this));
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            document.removeEventListener('keydown', this.handleTabKeydown.bind(this));
+        }
+        async updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('focusTrap')) {
+                if (!this.focusTrap) {
+                    this.deactivateFocusTrap();
+                }
+            }
+        }
+        /**
+         * Activate the focus trap
+         * This calculates the focusable elements within the component's shadow root
+         */
+        activateFocusTrap() {
+            if (this.focusTrap) {
+                this.isFocusTrapActivated = true;
+                this.setFocusableElements();
+            }
         }
         /**
          * Deactivate the focus trap.
          */
         deactivateFocusTrap() {
-            this.enabledFocusTrap = false;
-            this.enabledPreventScroll = false;
+            this.isFocusTrapActivated = false;
             this.focusTrapIndex = -1;
+            // todo: this should not override the body overflow style, but reset it instead
+            this.enabledPreventScroll = false;
             document.body.style.overflow = '';
         }
         /**
@@ -198,17 +227,17 @@ export const FocusTrapMixin = (superClass) => {
         /**
          * Sets the initial focus within the container.
          *
-         * @param prefferableElement - The index of the preferable element to focus.
+         * @param elementIndexToReceiveFocus - The index of the preferable element to focus.
          */
-        setInitialFocus(prefferableElement = 0) {
+        setInitialFocus(elementIndexToReceiveFocus = 0) {
             if (this.focusableElements.length === 0)
                 return;
             if (this.enabledPreventScroll) {
                 document.body.style.overflow = 'hidden';
             }
-            if (this.focusableElements[prefferableElement]) {
-                this.focusTrapIndex = prefferableElement;
-                this.focusableElements[prefferableElement].focus();
+            if (this.focusableElements[elementIndexToReceiveFocus]) {
+                this.focusTrapIndex = elementIndexToReceiveFocus;
+                this.focusableElements[elementIndexToReceiveFocus].focus();
             }
         }
         /**
@@ -220,12 +249,11 @@ export const FocusTrapMixin = (superClass) => {
          */
         calculateNextIndex(currentIndex, step) {
             const { length } = this.focusableElements;
-            const wrapFocus = this.shouldWrapFocus();
             if (currentIndex === -1) {
                 return step > 0 ? 0 : length - 1;
             }
             let nextIndex = currentIndex + step;
-            if (wrapFocus) {
+            if (this.shouldFocusTrapWrap) {
                 if (nextIndex < 0)
                     nextIndex = length - 1;
                 if (nextIndex >= length)
@@ -281,8 +309,9 @@ export const FocusTrapMixin = (superClass) => {
          * If true, the focus will be trapped in the previous element.
          */
         trapFocus(direction) {
-            if (this.focusableElements.length === 0)
+            if (this.focusableElements.length === 0) {
                 return;
+            }
             const activeElement = this.getDeepActiveElement();
             const activeIndex = this.findElement(activeElement);
             if (direction) {
@@ -301,8 +330,8 @@ export const FocusTrapMixin = (superClass) => {
          *
          * @param event - The keyboard event.
          */
-        handleKeydown(event) {
-            if (!this.enabledFocusTrap || !this.focusableElements.length) {
+        handleTabKeydown(event) {
+            if (!this.isFocusTrapActivated || !this.focusableElements.length) {
                 return;
             }
             if (event.key === 'Tab') {
@@ -312,9 +341,9 @@ export const FocusTrapMixin = (superClass) => {
         }
     }
     __decorate([
-        property({ type: Boolean }),
+        property({ type: Boolean, reflect: true, attribute: 'should-focus-trap-wrap' }),
         __metadata("design:type", Boolean)
-    ], FocusTrap.prototype, "enabledFocusTrap", void 0);
+    ], FocusTrap.prototype, "shouldFocusTrapWrap", void 0);
     __decorate([
         property({ type: Boolean }),
         __metadata("design:type", Boolean)

package/dist/utils/mixins/MenuMixin.js

@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import { TAG_NAME as MENU_TAGNAME } from '../../components/menu/menu.constants';
 import { ORIENTATION, TAG_NAME as MENUBAR_TAGNAME } from '../../components/menubar/menubar.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../../components/menupopover/menupopover.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../../components/menusection/menusection.constants';
@@ -114,8 +113,7 @@ export const MenuMixin = (superClass) => {
          * @returns True if the tag name is a valid menu, false otherwise.
          */
         isValidMenu(tagName) {
-            return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENU_TAGNAME
-                || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName));
+            return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName));
         }
         /**
          * Checks if the given tag name is a valid navitemlist tag name.

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.81.0"
+  "version": "0.81.2"
 }

package/dist/components/menu/index.d.ts

@@ -1,8 +0,0 @@
-import '../text';
-import Menu from './menu.component';
-declare global {
-    interface HTMLElementTagNameMap {
-        ['mdc-menu']: Menu;
-    }
-}
-export default Menu;

package/dist/components/menu/index.js

@@ -1,5 +0,0 @@
-import '../text';
-import Menu from './menu.component';
-import { TAG_NAME } from './menu.constants';
-Menu.register(TAG_NAME);
-export default Menu;

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

@@ -1,19 +0,0 @@
-import { CSSResult } from 'lit';
-import List from '../list/list.component';
-/**
- * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
- * It contains the menu header component.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-menu
- *
- * @slot default - This is a default/unnamed slot
- */
-declare class Menu extends List {
-    /** @internal */
-    listItems: Array<HTMLElement>;
-    connectedCallback(): void;
-    static styles: Array<CSSResult>;
-}
-export default Menu;

package/dist/components/menu/menu.component.js

@@ -1,35 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { queryAssignedElements } from 'lit/decorators.js';
-import { ROLE } from '../../utils/roles';
-import List from '../list/list.component';
-import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
-/**
- * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
- * It contains the menu header component.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-menu
- *
- * @slot default - This is a default/unnamed slot
- */
-class Menu extends List {
-    connectedCallback() {
-        super.connectedCallback();
-        this.dataRole = ROLE.MENU;
-    }
-}
-Menu.styles = [...List.styles];
-__decorate([
-    queryAssignedElements({ selector: `${MENUITEM_TAGNAME}:not([disabled])` }),
-    __metadata("design:type", Array)
-], Menu.prototype, "listItems", void 0);
-export default Menu;

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

@@ -1,2 +0,0 @@
-declare const TAG_NAME: "mdc-menu";
-export { TAG_NAME };

package/dist/components/menu/menu.constants.js

@@ -1,3 +0,0 @@
-import utils from '../../utils/tag-name';
-const TAG_NAME = utils.constructTagName('menu');
-export { TAG_NAME };

package/dist/react/menu/index.d.ts

@@ -1,13 +0,0 @@
-import Component from '../../components/menu';
-/**
- * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
- * It contains the menu header component.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-menu
- *
- * @slot default - This is a default/unnamed slot
- */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
-export default reactWrapper;

package/dist/react/menu/index.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Component from '../../components/menu';
-import { TAG_NAME } from '../../components/menu/menu.constants';
-/**
- * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
- * It contains the menu header component.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-menu
- *
- * @slot default - This is a default/unnamed slot
- */
-const reactWrapper = createComponent({
-    tagName: TAG_NAME,
-    elementClass: Component,
-    react: React,
-    events: {},
-    displayName: 'Menu',
-});
-export default reactWrapper;