@momentum-design/components 0.105.2 → 0.105.4

package/dist/index.d.ts

@@ -88,9 +88,10 @@ import type { MenuPopoverActionEvent, MenuPopoverChangeEvent } from './component
 import type { SelectChangeEvent, SelectInputEvent } from './components/select/select.types';
 import type { MenuSectionChangeEvent } from './components/menusection/menusection.types';
 import type { InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent } from './components/input/input.types';
+import type { VirtualizedListScrollEvent } from './components/virtualizedlist/virtualizedlist.types';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, };
-export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, };
+export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -4,8 +4,8 @@ export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Avatar } from './avatar';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
@@ -54,20 +54,20 @@ export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 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 ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
-export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as Spinner } from './spinner';
 export { default as Stepper } from './stepper';
-export { default as StepperItem } from './stepperitem';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -4,8 +4,8 @@ export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Avatar } from './avatar';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
@@ -54,20 +54,20 @@ export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 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 ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
-export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as Spinner } from './spinner';
 export { default as Stepper } from './stepper';
-export { default as StepperItem } from './stepperitem';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

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

@@ -10,11 +10,11 @@ import Component from '../../components/virtualizedlist';
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onScroll: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onScroll: EventName<import("../../components/virtualizedlist/virtualizedlist.types").VirtualizedListScrollEvent>;
 }>;
 export default reactWrapper;

package/dist/react/virtualizedlist/index.js

@@ -12,7 +12,7 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
@@ -21,7 +21,7 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        onScroll: 'onscroll',
+        onScroll: 'scroll',
     },
     displayName: 'VirtualizedList',
 });

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

@@ -0,0 +1,7 @@
+import type { Component } from '../../models';
+import type { Constructor } from './index.types';
+export declare class AutoFocusOnMountMixinInterface {
+    autoFocusOnMount?: boolean;
+    protected elementToAutoFocus: HTMLElement;
+}
+export declare const AutoFocusOnMountMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<Component & AutoFocusOnMountMixinInterface> & T;

package/dist/utils/mixins/{AutoFocusMixin.js → AutoFocusOnMountMixin.js}

@@ -8,27 +8,36 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
-export const AutoFocusMixin = (superClass) => {
+export const AutoFocusOnMountMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
             /**
-             * This property indicates whether the element should receive focus automatically when it is rendered.
+             * @internal
+             */
+            this.elementToAutoFocus = this;
+            /**
+             * This property indicates whether the element should receive focus automatically when it is mounted.
+             *
+             * It will not focus if the element is re-attached to the DOM after being removed.
+             *
              * @default false
              */
-            this.autofocus = false;
+            this.autoFocusOnMount = false;
         }
-        firstUpdated(changedProperties) {
+        async firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);
-            if (this.autofocus) {
-                this.focus();
+            if (this.autoFocusOnMount) {
+                // wait for the element to be fully updated before focusing
+                await this.updateComplete;
+                this.elementToAutoFocus.focus();
             }
         }
     }
     __decorate([
-        property({ type: Boolean, reflect: true }),
+        property({ type: Boolean, reflect: true, attribute: 'auto-focus-on-mount' }),
         __metadata("design:type", Boolean)
-    ], InnerMixinClass.prototype, "autofocus", void 0);
+    ], InnerMixinClass.prototype, "autoFocusOnMount", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;
 };

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

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import type { Constructor } from './index.types';
 export interface AssociatedFormControl {
-    autofocus: boolean;
     disabled?: boolean;
     name: string;
     value: string | string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.105.2",
+  "version": "0.105.4",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"

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

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface AutoFocusMixinInterface {
-    autofocus?: boolean;
-}
-export declare const AutoFocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<AutoFocusMixinInterface> & T;