@momentum-design/components 0.28.4 → 0.28.6

package/dist/components/input/input.component.js

@@ -282,7 +282,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         return html `
       <mdc-button 
         part='trailing-button'
-        class='${!this.value ? 'hidden' : ''}'
+        class='own-focus-ring ${!this.value ? 'hidden' : ''}'
         prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
         variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
         size="${DEFAULTS.CLEAR_BUTTON_SIZE}"

package/dist/components/input/input.styles.js

@@ -82,7 +82,7 @@ const styles = [css `
 
   .prefix-text{
     color: var(--mdc-input-support-text-color);
-    white-space: nowrap; // restirct prefix text to be in one line
+    white-space: nowrap; // restrict prefix text to be in one line
   }
 
   :host(:not([disabled])) .input-container:hover{
@@ -91,7 +91,7 @@ const styles = [css `
 
   :host(:not([disabled])) .input-container:active, :host(:not([disabled])) .input-container:focus-within{
     background-color: var(--mdc-input-focused-background-color);
-    border-color:  var(--mdc-input-focused-border-color);
+    border-color: var(--mdc-input-focused-border-color);
   }
 
   .input::placeholder{
@@ -115,5 +115,5 @@ const styles = [css `
     opacity: 0;
     pointer-events: none;
   }
-  `, ...hostFocusRingStyles(true)];
+`, ...hostFocusRingStyles(true)];
 export default styles;

package/dist/components/link/link.component.js

@@ -132,7 +132,11 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
         }
     }
     render() {
-        return html `<slot @slotchange=${this.updateTrailingIcon}></slot>`;
+        return html `
+      <div part='link-container' class='mdc-focus-ring'>
+        <slot @slotchange=${this.updateTrailingIcon}></slot>
+      </div>
+    `;
     }
 }
 Link.styles = [...Component.styles, ...styles];

package/dist/components/link/link.styles.js

@@ -15,7 +15,9 @@ const styles = [hostFitContentStyles, css `
     --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
     --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
     --mdc-link-text-decoration-disabled: underline;
+  }
 
+  :host::part(link-container){
     border-radius: var(--mdc-link-border-radius);
     color: var(--mdc-link-color-normal);
   }
@@ -31,11 +33,11 @@ const styles = [hostFitContentStyles, css `
     text-underline-position: from-font;
   }
 
-  :host(:hover) {
+  :host(:hover)::part(link-container) {
     color: var(--mdc-link-color-hover);
   }
 
-  :host(:active) {
+  :host(:active)::part(link-container) {
     color: var(--mdc-link-color-active);
   }
 
@@ -43,19 +45,19 @@ const styles = [hostFitContentStyles, css `
     display: inline-flex;
   }
 
-  :host([inverted]) {
+  :host([inverted])::part(link-container) {
     color: var(--mdc-link-inverted-color-normal);
   }
 
-  :host([inverted]:hover) {
+  :host([inverted]:hover)::part(link-container) {
     color: var(--mdc-link-inverted-color-hover);
   }
 
-  :host([inverted]:active) {
+  :host([inverted]:active)::part(link-container) {
     color: var(--mdc-link-inverted-color-active);
   }
 
-  :host([size="large"]) {
+  :host([size="large"])::part(link-container) {
     font-size: var(--mds-font-apps-body-large-regular-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -63,7 +65,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size="midsize"]) {
+  :host([size="midsize"])::part(link-container) {
     font-size: var(--mds-font-apps-body-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -71,7 +73,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size="small"]) {
+  :host([size="small"])::part(link-container) {
     font-size: var(--mds-font-apps-body-small-regular-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-line-height);
@@ -79,7 +81,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 
-  :host([size="large"]:hover), :host([size="large"]:active), :host([size="large"][inline]) {
+  :host([size="large"]:hover)::part(link-container),
+  :host([size="large"]:active)::part(link-container),
+  :host([size="large"][inline])::part(link-container) {
     font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -87,7 +91,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
 
-  :host([size="midsize"]:hover), :host([size="midsize"]:active), :host([size="midsize"][inline]) {
+  :host([size="midsize"]:hover)::part(link-container),
+  :host([size="midsize"]:active)::part(link-container),
+  :host([size="midsize"][inline])::part(link-container) {
     font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -95,7 +101,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
 
-  :host([size="small"]:hover), :host([size="small"]:active), :host([size="small"][inline]) {
+  :host([size="small"]:hover)::part(link-container),
+  :host([size="small"]:active)::part(link-container),
+  :host([size="small"][inline])::part(link-container) {
     font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
@@ -103,17 +111,17 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
 
-  :host([disabled]) {
+  :host([disabled])::part(link-container) {
     color: var(--mdc-link-color-disabled);
     pointer-events: none;
   }
 
-  :host([inverted][disabled]) {
+  :host([inverted][disabled])::part(link-container) {
     color: var(--mdc-link-inverted-color-disabled);
   }
-`, ...hostFocusRingStyles(),
+`, ...hostFocusRingStyles(true),
     css `
-  :host(:active) {
+  :host(:active)::part(link-container) {
     box-shadow: none;
   }
 `];

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

@@ -1,5 +1,5 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { Virtualizer } from '@tanstack/virtual-core';
+import { Virtualizer, VirtualItem } from '@tanstack/virtual-core';
 import { Ref } from 'lit/directives/ref.js';
 import { Component } from '../../models';
 import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
@@ -24,7 +24,7 @@ declare class VirtualizedList extends Component {
      * handling logic related when the user scrolls to the top or bottom of a list.
      * @default undefined
      */
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
     /**
      * Object that sets and updates the virtualizer with any relevant props.
      * There are two required object props in order to get virtualization to work properly.
@@ -39,7 +39,7 @@ declare class VirtualizedList extends Component {
      * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
      *
      */
-    virtualizerprops: VirtualizerProps;
+    virtualizerProps: VirtualizerProps;
     /**
      * Callback that gets envoked when updates to the virtualizer interally occur.
      * This must be implemented in such a way that this function will trigger update to parent.
@@ -57,6 +57,7 @@ declare class VirtualizedList extends Component {
     private virtualizerController;
     scrollElementRef: Ref<HTMLDivElement>;
     virtualizer: Virtualizer<Element, Element> | null;
+    virtualItems: Array<VirtualItem>;
     constructor();
     /**
      * This override is necessary to update the virtualizer with relevant props
@@ -64,6 +65,15 @@ declare class VirtualizedList extends Component {
      * this way ensures we don't initialize a new virtualizer upon very prop change.
      */
     update(changedProperties: PropertyValues): void;
+    /**
+     * This is needed in order to ensure the initial render happens
+     */
+    firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * @internal
+     * Update virtuailzer with the union of the two virtualizer options (current, passed in).
+     */
+    private setVirtualizerOptions;
     connectedCallback(): void;
     /**
      * @internal

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

@@ -45,8 +45,9 @@ class VirtualizedList extends Component {
          * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
          *
          */
-        this.virtualizerprops = DEFAULTS.VIRTUALIZER_PROPS;
+        this.virtualizerProps = DEFAULTS.VIRTUALIZER_PROPS;
         this.scrollElementRef = createRef();
+        this.virtualItems = [];
         this.virtualizerController = null;
         this.virtualizer = null;
         this.setlistdata = null;
@@ -58,22 +59,34 @@ class VirtualizedList extends Component {
      * this way ensures we don't initialize a new virtualizer upon very prop change.
      */
     update(changedProperties) {
-        var _a;
         super.update(changedProperties);
-        // if the virtuailzer props change at all,
-        // update virtuailzer with the union of the two virtualizer options (current, passed in).
-        if (changedProperties.get('virtualizerprops')) {
-            (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.setOptions({ ...this.virtualizer.options, ...this.virtualizerprops });
-            this.requestUpdate();
+        if (changedProperties.get('virtualizerProps')) {
+            this.setVirtualizerOptions();
         }
     }
+    /**
+     * This is needed in order to ensure the initial render happens
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setVirtualizerOptions();
+    }
+    /**
+     * @internal
+     * Update virtuailzer with the union of the two virtualizer options (current, passed in).
+     */
+    setVirtualizerOptions() {
+        var _a;
+        (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.setOptions({ ...this.virtualizer.options, ...this.virtualizerProps });
+        this.requestUpdate();
+    }
     connectedCallback() {
         var _a;
         this.virtualizerController = new VirtualizerController(this, {
-            count: this.virtualizerprops.count,
-            estimateSize: (_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.estimateSize,
+            count: this.virtualizerProps.count,
+            estimateSize: (_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.estimateSize,
             getScrollElement: () => this.scrollElementRef.value || null,
-            ...this.virtualizerprops,
+            ...this.virtualizerProps,
         });
         super.connectedCallback();
     }
@@ -89,19 +102,24 @@ class VirtualizedList extends Component {
     getVirtualizedListWrapper(virtualizerController) {
         var _a, _b;
         this.virtualizer = virtualizerController.getVirtualizer();
-        const { getVirtualItems, measureElement, getTotalSize } = this.virtualizer;
-        const virtualItems = getVirtualItems();
-        // this style is required to be rendered by the client side list in order to handle scrolling properly
-        const listStyle = {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
-        };
-        // pass back data to client for rendering
-        if (this.setlistdata) {
-            this.setlistdata({ virtualItems, measureElement, listStyle });
+        const { getTotalSize, getVirtualItems, measureElement } = this.virtualizer;
+        const newVirtualItems = getVirtualItems();
+        // Only update client if there's a difference in virtual items
+        if (newVirtualItems !== this.virtualItems) {
+            this.virtualItems = newVirtualItems;
+            const virtualItems = getVirtualItems();
+            // this style is required to be rendered by the client side list in order to handle scrolling properly
+            const listStyle = {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
+            };
+            // pass back data to client for rendering
+            if (this.setlistdata) {
+                this.setlistdata({ virtualItems, measureElement, listStyle });
+            }
         }
         return html `<div
           part="container"
@@ -129,7 +147,7 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)
-], VirtualizedList.prototype, "virtualizerprops", void 0);
+], VirtualizedList.prototype, "virtualizerProps", void 0);
 __decorate([
     property({ type: Function, attribute: 'setlistdata' }),
     __metadata("design:type", Object)

package/dist/components/virtualizedlist/virtualizedlist.helper.test.d.ts

@@ -2,8 +2,8 @@ import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { VirtualizerProps } from './virtualizedlist.types';
 import { Component } from '../../models';
 declare class VirtualizedWrapper extends Component {
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    virtualizerprops: VirtualizerProps;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
+    virtualizerProps: VirtualizerProps;
     list: TemplateResult<1>;
     listItemTexts: string[];
     constructor();

package/dist/components/virtualizedlist/virtualizedlist.helper.test.js

@@ -15,9 +15,9 @@ import { Component } from '../../models';
 class VirtualizedWrapper extends Component {
     constructor() {
         super();
-        this.virtualizerprops = { count: 100, estimateSize: () => 100, overscan: 60 };
+        this.virtualizerProps = { count: 100, estimateSize: () => 100, overscan: 60 };
         this.list = html ``;
-        this.listItemTexts = new Array(this.virtualizerprops.count)
+        this.listItemTexts = new Array(this.virtualizerProps.count)
             .fill(true)
             .map((_, index) => `list item number ${index}`);
         this.onscroll = null;
@@ -25,20 +25,20 @@ class VirtualizedWrapper extends Component {
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.get('virtualizerprops')) {
+        if (changedProperties.get('virtualizerProps')) {
             this.updateListItemTextArray();
         }
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        if ((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count) {
+        if ((_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.count) {
             this.updateListItemTextArray();
         }
     }
     updateListItemTextArray() {
         var _a;
-        this.listItemTexts = new Array((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count)
+        this.listItemTexts = new Array((_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.count)
             .fill(true)
             .map((_, index) => `list item number ${index}`);
     }
@@ -53,7 +53,7 @@ class VirtualizedWrapper extends Component {
     <div style="height: 500px; width: 500px;">
       <mdc-virtualizedlist
         .onscroll=${this.onscroll}
-        .virtualizerprops=${this.virtualizerprops}
+        .virtualizerProps=${this.virtualizerProps}
         .setlistdata=${this.setListData}
       >${this.list}</mdc-virtualizedlist></div>
     `;
@@ -67,7 +67,7 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "virtualizerprops", void 0);
+], VirtualizedWrapper.prototype, "virtualizerProps", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)