@momentum-design/components 0.122.15 → 0.122.17

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

@@ -219,6 +219,11 @@ declare class VirtualizedList extends VirtualizedList_base {
      * @internal
      */
     private endOfScrollQueue;
+    /**
+     * Resize observer to monitor size changes of the component.
+     * @internal
+     */
+    private resizeObserver;
     constructor();
     /**
      * Create the virtualizer controller and the virtualizer instance when the component is first connected to the DOM.
@@ -288,6 +293,7 @@ declare class VirtualizedList extends VirtualizedList_base {
     scrollToIndex(index: number, options?: ScrollToOptions): void;
     private syncUI;
     private handleWheelEvent;
+    private handleResizeObserverCallback;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -245,6 +245,11 @@ class VirtualizedList extends DataAriaLabelMixin(List) {
          * @internal
          */
         this.endOfScrollQueue = [];
+        /**
+         * Resize observer to monitor size changes of the component.
+         * @internal
+         */
+        this.resizeObserver = null;
         this.handleElementFirstUpdateCompleted = (event) => {
             var _a, _b;
             if (this.observeSizeChanges && this.navItems.find(el => el === event.target) !== undefined) {
@@ -270,12 +275,18 @@ class VirtualizedList extends DataAriaLabelMixin(List) {
         // Set the role attribute for accessibility.
         this.role = null;
         this.atBottom = this.revertList && this.scrollAnchoring ? 'yes' : 'no';
+        this.resizeObserver = new ResizeObserver(this.handleResizeObserverCallback.bind(this));
+        this.resizeObserver.observe(this);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.clearScrollToBottomTimer();
         this.virtualizerController = null;
         this.virtualizer = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
     /**
      * This override is necessary to update the virtualizer with relevant props
@@ -612,6 +623,15 @@ class VirtualizedList extends DataAriaLabelMixin(List) {
         if (e.deltaY < 0)
             this.atBottom = 're-evaluate';
     }
+    handleResizeObserverCallback() {
+        requestAnimationFrame(() => {
+            // If revertList is true and we are positioning the items at the bottom, we need to sync the UI
+            // to update the transforms
+            if (this.revertList && this.scrollRef.clientHeight >= this.totalListHeight) {
+                this.syncUI();
+            }
+        });
+    }
     render() {
         var _a;
         return html `

package/dist/components/virtualizedlist/virtualizedlist.styles.js

@@ -24,6 +24,10 @@ const styles = [
       top: var(--mdc-virtualizedlist-hidden-top) !important;
       left: 0 !important;
     }
+
+    ::slotted(mdc-listitem) {
+      position: relative;
+    }
   `,
 ];
 export default styles;