@momentum-design/components 0.22.6 → 0.23.0

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

@@ -0,0 +1,7 @@
+import VirtualizedList from './virtualizedlist.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-virtualizedlist']: VirtualizedList;
+    }
+}
+export default VirtualizedList;

package/dist/components/virtualizedlist/index.js

@@ -0,0 +1,4 @@
+import VirtualizedList from './virtualizedlist.component';
+import { TAG_NAME } from './virtualizedlist.constants';
+VirtualizedList.register(TAG_NAME);
+export default VirtualizedList;

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

@@ -0,0 +1,79 @@
+import { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import { Virtualizer } from '@tanstack/virtual-core';
+import { Ref } from 'lit/directives/ref.js';
+import { Component } from '../../models';
+import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
+/**
+ * `mdc-virtualizedlist` component for creating custom virtualized lists.
+ * IMPORTANT: This component does not create it's own list/list items.
+ * Use the setlistdata callback prop to update client state in order to
+ * Pass list/listitems as a child of this component, which this will virtuailze
+ * This implementation handles dynamic lists as well as fixed sized lists.
+ * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.
+ *
+ * @tagname mdc-virtualizedlist
+ *
+ * @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) => any) | 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.
+     * count - The length of your list that you are virtualizing.
+     * As your list grows/shrinks, this component must be updated with the appropriate value
+     * (Same with any other updated prop).
+     * estimateSize - A function that returns the estimated size of your items.
+     * If your list is fixed, this will just be the size of your items.
+     * If your list is dynamic, try to return approximate the size of each item.
+     *
+     * A full list of possible props can be in
+     * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
+     *
+     */
+    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.
+     *
+     * virtualItems - Array that will be what the client displays on screen. Use this to render
+     * a List of your choosing with these items nested inside as your ListItems.
+     * measureElement - Ref to pass to each ListItem rendered client side.
+     * Each ListItem should also be be passed key and a data-index (which can be found on the virtualItem).
+     * listStyle - This should be passed as the style attribute to your List.
+     */
+    setlistdata: (({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null;
+    /**
+     * @internal
+     */
+    private virtualizerController;
+    scrollElementRef: Ref<HTMLDivElement>;
+    virtualizer: Virtualizer<Element, Element> | null;
+    constructor();
+    /**
+     * This override is necessary to update the virtualizer with relevant props
+     * if the client updates any props (most commonly, count). Updating the options
+     * this way ensures we don't initialize a new virtualizer upon very prop change.
+     */
+    update(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    /**
+     * @internal
+     * Renders the list wrapper and invokes the callback which eventually will render in the slot.
+     * Uses getTotalSize to update the height of the wrapper. This value is equal to the total size
+     * OR the total estimated size (if you haven't physically scrolled the entire list)
+     * Passes the virtualItems, measureElement, and listStyle to callback for client to pass in as child
+     *
+     * @returns The template result containing the list wrapper.
+     */
+    private getVirtualizedListWrapper;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default VirtualizedList;

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

@@ -0,0 +1,135 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { VirtualizerController } from '@tanstack/lit-virtual';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import styles from './virtualizedlist.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './virtualizedlist.constants';
+/**
+ * `mdc-virtualizedlist` component for creating custom virtualized lists.
+ * IMPORTANT: This component does not create it's own list/list items.
+ * Use the setlistdata callback prop to update client state in order to
+ * Pass list/listitems as a child of this component, which this will virtuailze
+ * This implementation handles dynamic lists as well as fixed sized lists.
+ * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.
+ *
+ * @tagname mdc-virtualizedlist
+ *
+ * @slot - Client side List with nested list items.
+ */
+class VirtualizedList extends Component {
+    constructor() {
+        super();
+        /**
+         * 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.
+         * count - The length of your list that you are virtualizing.
+         * As your list grows/shrinks, this component must be updated with the appropriate value
+         * (Same with any other updated prop).
+         * estimateSize - A function that returns the estimated size of your items.
+         * If your list is fixed, this will just be the size of your items.
+         * If your list is dynamic, try to return approximate the size of each item.
+         *
+         * A full list of possible props can be in
+         * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
+         *
+         */
+        this.virtualizerprops = DEFAULTS.VIRTUALIZER_PROPS;
+        this.scrollElementRef = createRef();
+        this.virtualizerController = null;
+        this.virtualizer = null;
+        this.setlistdata = null;
+        this.onscroll = null;
+    }
+    /**
+     * This override is necessary to update the virtualizer with relevant props
+     * if the client updates any props (most commonly, count). Updating the options
+     * 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();
+        }
+    }
+    connectedCallback() {
+        var _a;
+        this.virtualizerController = new VirtualizerController(this, {
+            count: this.virtualizerprops.count,
+            estimateSize: (_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.estimateSize,
+            getScrollElement: () => this.scrollElementRef.value || null,
+            ...this.virtualizerprops,
+        });
+        super.connectedCallback();
+    }
+    /**
+     * @internal
+     * Renders the list wrapper and invokes the callback which eventually will render in the slot.
+     * Uses getTotalSize to update the height of the wrapper. This value is equal to the total size
+     * OR the total estimated size (if you haven't physically scrolled the entire list)
+     * Passes the virtualItems, measureElement, and listStyle to callback for client to pass in as child
+     *
+     * @returns The template result containing the list wrapper.
+     */
+    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 });
+        }
+        return html `<div
+          class="mdc-virtualizedlist-container"
+          style="height: ${getTotalSize()}px;"
+        >
+          <slot></slot>
+        </div>`;
+    }
+    render() {
+        return html `<div
+      ${ref(this.scrollElementRef)}
+      class="mdc-virtualizedlist-scroll"
+      @scroll=${this.onscroll && this.onscroll}
+    >
+      ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
+    </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)
+], VirtualizedList.prototype, "virtualizerprops", void 0);
+__decorate([
+    property({ type: Function, attribute: 'setlistdata' }),
+    __metadata("design:type", Object)
+], VirtualizedList.prototype, "setlistdata", void 0);
+export default VirtualizedList;

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

@@ -0,0 +1,9 @@
+declare const TAG_NAME: "mdc-virtualizedlist";
+declare const VIRTUALIZED_WRAPPER_TAG_NAME: "mdc-virtualizedwrapper";
+declare const DEFAULTS: {
+    VIRTUALIZER_PROPS: {
+        count: number;
+        estimateSize: () => number;
+    };
+};
+export { TAG_NAME, DEFAULTS, VIRTUALIZED_WRAPPER_TAG_NAME };

package/dist/components/virtualizedlist/virtualizedlist.constants.js

@@ -0,0 +1,10 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('virtualizedlist');
+const VIRTUALIZED_WRAPPER_TAG_NAME = utils.constructTagName('virtualizedwrapper');
+const DEFAULTS = {
+    VIRTUALIZER_PROPS: {
+        count: 0,
+        estimateSize: () => 0,
+    },
+};
+export { TAG_NAME, DEFAULTS, VIRTUALIZED_WRAPPER_TAG_NAME };

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

@@ -0,0 +1,22 @@
+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;
+    list: TemplateResult<1>;
+    listItemTexts: string[];
+    constructor();
+    update(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    private updateListItemTextArray;
+    private setListData;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-virtualizedwrapper']: VirtualizedWrapper;
+    }
+}
+export {};

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

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Component } from '../../models';
+class VirtualizedWrapper extends Component {
+    constructor() {
+        super();
+        this.virtualizerprops = { count: 100, estimateSize: () => 100, overscan: 60 };
+        this.list = html ``;
+        this.listItemTexts = new Array(this.virtualizerprops.count)
+            .fill(true)
+            .map((_, index) => `list item number ${index}`);
+        this.onscroll = null;
+        this.setListData = this.setListData.bind(this);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.get('virtualizerprops')) {
+            this.updateListItemTextArray();
+        }
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        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)
+            .fill(true)
+            .map((_, index) => `list item number ${index}`);
+    }
+    setListData({ virtualItems, measureElement, listStyle }) {
+        if (virtualItems) {
+            this.list = html `<ul style="margin: 0;${styleMap(listStyle)}">${virtualItems.map((virtualItem) => html `<li role="listitem" key=${virtualItem.key} data-index=${virtualItem.index} ref=${ref(measureElement)}>
+          ${this.listItemTexts[virtualItem.index]}</li>`)}</ul>`;
+        }
+    }
+    render() {
+        return html `
+    <div style="height: 500px; width: 500px;">
+      <mdc-virtualizedlist
+        .onscroll=${this.onscroll}
+        .virtualizerprops=${this.virtualizerprops}
+        .setlistdata=${this.setListData}
+      >${this.list}</mdc-virtualizedlist></div>
+    `;
+    }
+}
+VirtualizedWrapper.styles = Component.styles;
+__decorate([
+    property({ type: Function, attribute: 'onscroll' }),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "onscroll", void 0);
+__decorate([
+    property({ type: Object, attribute: 'virtualizerprops' }),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "virtualizerprops", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "list", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "listItemTexts", void 0);
+VirtualizedWrapper.register('mdc-virtualizedwrapper');

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+const styles = [
+    css `
+    :host {
+      .mdc-virtualizedlist-scroll {  
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+      .mdc-virtualizedlist-container {
+        position: relative;
+        width: 100%;
+      }
+    }
+  `,
+];
+export default styles;

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

@@ -0,0 +1,17 @@
+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;
+    list: TemplateResult<1>;
+    listItemTexts: string[];
+    constructor();
+    update(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    private updateListItemTextArray;
+    private setListData;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default VirtualizedWrapper;

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

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Component } from '../../models';
+class VirtualizedWrapper extends Component {
+    constructor() {
+        super();
+        this.virtualizerprops = { count: 100, estimateSize: () => 100 };
+        this.list = html ``;
+        this.listItemTexts = new Array(this.virtualizerprops.count)
+            .fill(true)
+            .map((_, index) => `list item number ${index}`);
+        this.onscroll = null;
+        this.setListData = this.setListData.bind(this);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.get('virtualizerprops')) {
+            this.updateListItemTextArray();
+        }
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        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)
+            .fill(true)
+            .map((_, index) => `list item number ${index}`);
+    }
+    setListData({ virtualItems, measureElement, listStyle }) {
+        if (virtualItems) {
+            this.list = html `<ul style="margin: 0;${styleMap(listStyle)}">${virtualItems.map((virtualItem) => html `<li role="listitem" key=${virtualItem.key} data-index=${virtualItem.index} ref=${ref(measureElement)}>
+          ${this.listItemTexts[virtualItem.index]}</li>`)}</ul>`;
+        }
+    }
+    render() {
+        return html `
+    <div style="height: 500px; width: 500px;">
+      <mdc-virtualizedlist
+        .onscroll=${this.onscroll}
+        .virtualizerprops=${this.virtualizerprops}
+        .setlistdata=${this.setListData}
+      >${this.list}</mdc-virtualizedlist></div>
+    `;
+    }
+}
+VirtualizedWrapper.styles = Component.styles;
+__decorate([
+    property({ type: Function, attribute: 'onscroll' }),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "onscroll", void 0);
+__decorate([
+    property({ type: Object, attribute: 'virtualizerprops' }),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "virtualizerprops", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "list", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], VirtualizedWrapper.prototype, "listItemTexts", void 0);
+export default VirtualizedWrapper;

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

@@ -0,0 +1,8 @@
+import { VirtualItem, VirtualizerOptions } from '@tanstack/virtual-core';
+import { StyleInfo } from 'lit/directives/style-map.js';
+export interface SetListDataProps {
+    virtualItems: Array<VirtualItem>;
+    measureElement: (node: Element | null | undefined) => void;
+    listStyle: Readonly<StyleInfo>;
+}
+export type VirtualizerProps = Partial<VirtualizerOptions<Element, Element>>;

package/dist/components/virtualizedlist/virtualizedlist.types.js

@@ -0,0 +1 @@
+export {};