Merge remote-tracking branch 'origin/next' into feat/dependent-fields

packages/crayons-core/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.3.0-beta.8](https://github.com/freshworks/crayons/compare/@freshworks/crayons@4.3.0-beta.7...@freshworks/crayons@4.3.0-beta.8) (2023-11-07)
+
+### Features
+
+- **toast:** added css variable to set custom z-index for toast stack ([#900](https://github.com/freshworks/crayons/issues/900)) ([d211ee4](https://github.com/freshworks/crayons/commit/d211ee4de29b2f6ac47997125514146efd645d91))
+
 ## [4.3.0-beta.7](https://github.com/freshworks/crayons/compare/@freshworks/crayons@4.3.0-beta.6...@freshworks/crayons@4.3.0-beta.7) (2023-10-16)
 
 ### Features

packages/crayons-core/package.json

@@ -15,7 +15,7 @@
     "typescript"
   ],
   "author": "Freshworks Inc",
-  "version": "4.3.0-beta.7",
+  "version": "4.3.0-beta.8",
   "description": "Crayons Web Components library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -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

@@ -1231,6 +1231,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.
          */
@@ -1797,10 +1805,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.
          */
@@ -4302,6 +4318,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.
          */
@@ -4876,10 +4900,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);
+  });
 });