@momentum-design/components 0.28.5 → 0.28.6

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)