@momentum-design/components 0.122.5 → 0.122.7

package/dist/utils/virtualIndexArray.js

@@ -0,0 +1,42 @@
+/**
+ * A wrapper around an array that applies a "virtual" index to the index when accessing items.
+ * This is useful when the array is just a view of the real data and the real data has gaps in the indexes.
+ *
+ * @example
+ * ```ts
+ * const originalArray = [{realIndex: 2, value: 10}, {realIndex: 3, value: 20}];
+ * const offsetArray = new OffsetArray(originalArray, (item) => item.realIndex);
+ *
+ * console.log(offsetArray.at(0)); // Output: undefined
+ * console.log(offsetArray.at(2).value); // Output: 10
+ * ```
+ */
+export class VirtualIndexArray {
+    constructor(items, getIndex, length) {
+        this.getIndex = () => 0;
+        this.items = items;
+        this.getIndex = getIndex;
+        this.lengthFn = length;
+    }
+    get length() {
+        return this.lengthFn();
+    }
+    at(index) {
+        return this.items.find(item => this.getIndex(item) === index);
+    }
+    map(cb, thisArg) {
+        return this.items.map((value, _index, array) => cb.call(thisArg, value, this.getIndex(value), array));
+    }
+    forEach(cb, thisArg) {
+        this.items.forEach((value, _index, array) => {
+            cb.call(thisArg, value, this.getIndex(value), array);
+        });
+    }
+    findIndex(predicate, thisArg) {
+        const item = this.items.find((value, _index, obj) => predicate.call(thisArg, value, this.getIndex(value), obj));
+        return !item ? -1 : this.getIndex(item);
+    }
+    find(predicate, thisArg) {
+        return this.items.find((value, _index, obj) => predicate.call(thisArg, value, this.getIndex(value), obj));
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.122.5",
+  "version": "0.122.7",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"
@@ -37,7 +37,7 @@
     "@momentum-design/fonts": "*",
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*",
-    "@tanstack/lit-virtual": "^3.11.3",
+    "@tanstack/lit-virtual": "^3.13.2",
     "lit": "^3.2.0",
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"

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

@@ -1,22 +0,0 @@
-import { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { Component } from '../../models';
-import { VirtualizerProps } from './virtualizedlist.types';
-declare class VirtualizedWrapper extends Component {
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | 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

@@ -1,82 +0,0 @@
-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
-          @scroll=${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');