@momentum-design/components 0.80.5 → 0.81.1

package/dist/index.d.ts

@@ -50,6 +50,7 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import SideNavigation from './components/sidenavigation';
+import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -66,10 +67,12 @@ import VirtualizedList from './components/virtualizedlist';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
+import type { SkeletonVariant } from './components/skeleton/skeleton.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 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';
-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, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
-export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
+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 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

@@ -51,6 +51,7 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import SideNavigation from './components/sidenavigation';
+import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -67,7 +68,8 @@ import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 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, 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, 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, };
 // Constants / Utils Exports
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
+export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/react/index.d.ts

@@ -21,8 +21,8 @@ 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 Icon } from './icon';
 export { default as FormfieldWrapper } from './formfieldwrapper';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -52,6 +52,7 @@ 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';

package/dist/react/index.js

@@ -21,8 +21,8 @@ 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 Icon } from './icon';
 export { default as FormfieldWrapper } from './formfieldwrapper';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -52,6 +52,7 @@ 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';

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

@@ -0,0 +1,25 @@
+import Component from '../../components/skeleton';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skeleton/index.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/skeleton';
+import { TAG_NAME } from '../../components/skeleton/skeleton.constants';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Skeleton',
+});
+export default reactWrapper;

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/package.json

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