@momentum-design/components 0.105.2 → 0.105.3

package/dist/react/index.d.ts

@@ -1,11 +1,11 @@
-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';
 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';
@@ -55,8 +55,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as Searchfield } from './searchfield';
-export { default as Select } from './select';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
+export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
@@ -66,8 +66,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 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

@@ -1,11 +1,11 @@
-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';
 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';
@@ -55,8 +55,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as Searchfield } from './searchfield';
-export { default as Select } from './select';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
+export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
@@ -66,8 +66,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 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/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.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;