@momentum-design/components 0.105.3 → 0.106.0

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

@@ -13,18 +13,11 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
 declare class VirtualizedList extends Component {
-    /**
-     * Callback that gets called when user scrolls inside of list. This gives access to the scroll container element
-     * as well via the event. Particularly useful for
-     * handling logic related when the user scrolls to the top or bottom of a list.
-     * @default undefined
-     */
-    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.
@@ -85,6 +78,10 @@ declare class VirtualizedList extends Component {
      * @returns The template result containing the list wrapper.
      */
     private getVirtualizedListWrapper;
+    /**
+     * Refires the scroll event from the internal scroll container to the host element
+     */
+    private handleScroll;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -24,7 +24,7 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
@@ -125,17 +125,20 @@ class VirtualizedList extends Component {
       <slot></slot>
     </div>`;
     }
+    /**
+     * Refires the scroll event from the internal scroll container to the host element
+     */
+    handleScroll(event) {
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
     render() {
-        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.onscroll && this.onscroll}>
+        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.handleScroll}>
       ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
-    </div> `;
+    </div>`;
     }
 }
 VirtualizedList.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: Function, attribute: 'onscroll' }),
-    __metadata("design:type", Object)
-], VirtualizedList.prototype, "onscroll", void 0);
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)

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

@@ -53,7 +53,7 @@ class VirtualizedWrapper extends Component {
         return html `
       <div style="height: 500px; width: 500px;">
         <mdc-virtualizedlist
-          .onscroll=${this.onscroll}
+          @scroll=${this.onscroll}
           .virtualizerProps=${this.virtualizerProps}
           .setlistdata=${this.setListData}
           >${this.list}</mdc-virtualizedlist

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

@@ -7,8 +7,9 @@ interface SetListDataProps {
     measureElement: (node: Element | null | undefined) => void;
     listStyle: Readonly<StyleInfo>;
 }
+type VirtualizedListScrollEvent = TypedCustomEvent<VirtualizedList>;
 interface Events {
-    onScrollEvent: TypedCustomEvent<VirtualizedList>;
+    onScrollEvent: VirtualizedListScrollEvent;
 }
 type VirtualizerProps = Partial<VirtualizerOptions<Element, Element>>;
-export type { Events, VirtualizerProps, SetListDataProps };
+export type { Events, VirtualizedListScrollEvent, VirtualizerProps, SetListDataProps };