@momentum-design/components 0.105.1 → 0.105.3

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
+export { default as Accordion } from './accordion';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
@@ -28,8 +28,8 @@ export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
-export { default as InputChip } from './inputchip';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
@@ -54,8 +54,8 @@ 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 ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
@@ -73,9 +73,9 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
-export { default as Toggle } from './toggle';
-export { default as Tooltip } from './tooltip';
 export { default as Toast } from './toast';
+export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
+export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -1,5 +1,5 @@
-export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
+export { default as Accordion } from './accordion';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
@@ -28,8 +28,8 @@ export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
-export { default as InputChip } from './inputchip';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
@@ -54,8 +54,8 @@ 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 ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
@@ -73,9 +73,9 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
-export { default as Toggle } from './toggle';
-export { default as Tooltip } from './tooltip';
 export { default as Toast } from './toast';
+export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
+export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './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.1",
+  "version": "0.105.3",
   "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;