feat(fw-list-options): Virtualise list options

packages/crayons-core/package.json

@@ -107,6 +107,7 @@
     "@freshworks/crayons-i18n": "^4.2.0",
     "@popperjs/core": "^2.10.2",
     "@stencil/core": "2.17.4",
+    "@tanstack/virtual-core": "^3.0.0-beta.68",
     "date-fns": "^2.28.0",
     "libphonenumber-js": "^1.10.8",
     "multi-nprogress": "0.3.5"

packages/crayons-core/src/components.d.ts

@@ -1230,6 +1230,14 @@ export namespace Components {
           * Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
          */
         "disabled": boolean;
+        /**
+          * Virtualize long list of elements in list options *Experimental*
+         */
+        "enableVirtualScroll": boolean;
+        /**
+          * Works only when 'enableVirtualScroll' is true. Estimated size of each item in the list box to ensure smooth-scrolling.
+         */
+        "estimatedSize": number;
         /**
           * The text to filter the options.
          */
@@ -1692,10 +1700,18 @@ export namespace Components {
           * Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
          */
         "disabled": boolean;
+        /**
+          * Virtualize long list of elements in list options *Experimental*
+         */
+        "enableVirtualScroll": boolean;
         /**
           * Error text displayed below the text box.
          */
         "errorText": string;
+        /**
+          * Works only when 'enableVirtualScroll' is true. Estimated size of each item in the list box to ensure smooth-scrolling.
+         */
+        "estimatedSize": number;
         /**
           * Alternative placement for popover if the default placement is not possible.
          */
@@ -4178,6 +4194,14 @@ declare namespace LocalJSX {
           * Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
          */
         "disabled"?: boolean;
+        /**
+          * Virtualize long list of elements in list options *Experimental*
+         */
+        "enableVirtualScroll"?: boolean;
+        /**
+          * Works only when 'enableVirtualScroll' is true. Estimated size of each item in the list box to ensure smooth-scrolling.
+         */
+        "estimatedSize"?: number;
         /**
           * The text to filter the options.
          */
@@ -4644,10 +4668,18 @@ declare namespace LocalJSX {
           * Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
          */
         "disabled"?: boolean;
+        /**
+          * Virtualize long list of elements in list options *Experimental*
+         */
+        "enableVirtualScroll"?: boolean;
         /**
           * Error text displayed below the text box.
          */
         "errorText"?: string;
+        /**
+          * Works only when 'enableVirtualScroll' is true. Estimated size of each item in the list box to ensure smooth-scrolling.
+         */
+        "estimatedSize"?: number;
         /**
           * Alternative placement for popover if the default placement is not possible.
          */

packages/crayons-core/src/components/options-list/list-options.e2e.ts

@@ -406,4 +406,27 @@ describe('fw-list-options', () => {
     expect(await options[0].getProperty('checkbox')).toBeFalsy();
     expect(await options[0].getProperty('text')).toBe('Cannot find item');
   });
+
+  it('should have virtual scroll (display only limited nodes based on space available in parent) when popup opens up', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<fw-popover>
+    <fw-button slot="popover-trigger">Click Me!</fw-button>
+      <fw-list-options slot="popover-content" enable-virtual-scroll="true" estimated-size="35"></fw-list-options>
+    </fw-popover`);
+    await page.$eval('fw-list-options', (elm: any) => {
+      elm.options = Array.from(Array(7000), (_, i) => ({
+        text: `Item No: ${i + 1}`,
+        value: i,
+      }));
+    });
+    await page.waitForChanges();
+    const trigger = await page.find('fw-button');
+    await trigger.click();
+    await page.waitForChanges();
+    await new Promise((resolve) => setTimeout(() => resolve(null), 2000));
+    const options = await page.findAll('fw-list-options >>> fw-select-option');
+    expect(options.length).toBeGreaterThan(5);
+    expect(options.length).toBeLessThan(20);
+  });
 });