@momentum-design/components 0.129.43 → 0.129.45

package/dist/components/textarea/textarea.component.js

@@ -16,7 +16,7 @@ import { AUTO_CAPITALIZE } from '../input/input.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
-import { KEYS } from '../../utils/keys';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import styles from './textarea.styles';
 /**
@@ -104,7 +104,7 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
  * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
-class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Textarea extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
     constructor() {
         super(...arguments);
         /**
@@ -379,10 +379,11 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         }
         const currentRows = this.rows || DEFAULTS.ROWS;
         let newRows;
-        if (event.key === KEYS.ARROW_UP) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.UP) {
             newRows = Math.max(1, currentRows - 1);
         }
-        else if (event.key === KEYS.ARROW_DOWN) {
+        else if (action === ACTIONS.DOWN) {
             newRows = currentRows + 1;
         }
         if (newRows !== undefined) {

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { ToggleSize } from './toggle.types';
-declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The Toggle component is an interactive control used to switch between two mutually exclusive states,
  * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections

package/dist/components/toggle/toggle.component.js

@@ -10,7 +10,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
@@ -18,6 +17,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TOGGLE_SIZE } from './toggle.constants';
 import styles from './toggle.styles';
 /**
@@ -64,7 +64,7 @@ import styles from './toggle.styles';
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
  * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
-class Toggle extends ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
+class Toggle extends KeyToActionMixin(ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
         super(...arguments);
         /**
@@ -173,10 +173,11 @@ class Toggle extends ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(D
      */
     handleKeyDown(event) {
         var _a;
-        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
             event.preventDefault();
         }
-        if (event.key === KEYS.ENTER) {
+        if (action === ACTIONS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

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

@@ -4,7 +4,7 @@ import List from '../list/list.component';
 import type { ElementStoreChangeTypes } from '../../utils/controllers/ElementStore';
 import { type BaseArray } from '../../utils/virtualIndexArray';
 import { VirtualizerProps, Virtualizer } from './virtualizedlist.types';
-declare const VirtualizedList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof List;
+declare const VirtualizedList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof List;
 /**
  * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using
  * the Tanstack Virtual library.

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -15,8 +15,8 @@ import List from '../list/list.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { Interval } from '../../utils/range';
 import { VirtualIndexArray } from '../../utils/virtualIndexArray';
-import { KEYS } from '../../utils/keys';
 import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import styles from './virtualizedlist.styles';
 import { DEFAULTS } from './virtualizedlist.constants';
 /**
@@ -86,7 +86,7 @@ import { DEFAULTS } from './virtualizedlist.constants';
  * @csspart container - The container of the virtualized list.
  * @csspart scroll - The scrollable area of the virtualized list.
  */
-class VirtualizedList extends DataAriaLabelMixin(List) {
+class VirtualizedList extends KeyToActionMixin(DataAriaLabelMixin(List)) {
     /**
      * The current virtual items being rendered.
      */
@@ -548,21 +548,22 @@ class VirtualizedList extends DataAriaLabelMixin(List) {
     }
     handleNavigationKeyDown(event) {
         var _a, _b, _c, _d;
-        switch (event.key) {
-            case KEYS.HOME: {
+        const action = this.getActionForKeyEvent(event);
+        switch (action) {
+            case ACTIONS.HOME: {
                 // Move focus to the first item
                 (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.scrollToIndex) === null || _b === void 0 ? void 0 : _b.call(_a, 0, { align: 'start' });
                 this.endOfScrollQueue.push(() => this.resetTabIndexes(0));
                 break;
             }
-            case KEYS.END: {
+            case ACTIONS.END: {
                 // Move focus to the last item
                 const selectedItem = this.virtualizerProps.count - 1;
                 (_d = (_c = this.virtualizer) === null || _c === void 0 ? void 0 : _c.scrollToIndex) === null || _d === void 0 ? void 0 : _d.call(_c, selectedItem, { align: 'end' });
                 this.endOfScrollQueue.push(() => this.resetTabIndexes(selectedItem));
                 break;
             }
-            case KEYS.ARROW_UP: {
+            case ACTIONS.UP: {
                 this.atBottom = 're-evaluate';
                 break;
             }