npm - wcs-core - Versions diffs - 7.5.1 → 7.7.0 - Mend

wcs-core 7.5.1 → 7.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (768) hide show

package/dist/collection/components/com-nav/com-nav.js CHANGED Viewed

@@ -78,11 +78,11 @@ export class ComNav {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (h(Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, h("slot", { key: '3cfe05e6e510826ffd2168e6edc3380bc92ad459', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (h(Host, { key: '0ad6128d41f1a09da5bfc1668a9c5ca88e0a10dc' }, h("div", { key: '3c6fc5016fe04299461271e9d7ee5d52198e0e94', class: "container" }, h("div", { key: '229cb6d60903fd5d7998db5079589a67af95f87c', class: "container-left" }, h("div", { key: '59d5ece9de29819279b2601646e5a95e48f5113d', class: "app-name" }, this.appName, h("slot", { key: '4b205236b381eb02b8aeaf7149f00c2ccf24f1a0', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? h("slot", null)
                 : null))
-            : null), h("div", { key: '83496cccd32eec07f5a508dbf36b591442e668e2', class: "container-right" }, h("slot", { key: 'cf68946afcefa0b77fb57019f9734e5ff1e763aa', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), h("div", { key: '49ee0dd4b30bab8e83707380daee66220dd74117', class: "container-right" }, h("slot", { key: '3cf89cb129b2a59221578f5da6410965fb3f4da2', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), h("button", { id: "mobile-menu-icon", "aria-label": menuAriaLabel, "aria-expanded": this.mobileMenuOpen ? "true" : "false", "aria-controls": "wcs-com-nav-mobile-menu", onClick: () => this.mobileMenuIconClick() }), this.currentActiveSizing === 'mobile'
                 ? h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, h("slot", null))
                 : null)

package/dist/collection/components/com-nav-category/com-nav-category.js CHANGED Viewed

@@ -103,9 +103,9 @@ export class ComNavCategory {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '0b5d69d30228c1585c17d74bf8183f6fe91c1696', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: 'cab005c22a1390a75127cc8ee4691a90fb06443c', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
             h("h3", { role: "presentation", class: "label-container" }, h("span", { class: "label" }, this.label))
-            : h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), h("div", { key: '8269a3a8eb304343e6beef3cfde1e20976e02bbb', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, h("slot", { key: '0cd3f5916499f4e14d554e7fe963a2a384c4b39d' }))));
+            : h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), h("div", { key: '2e6b6e969a0fff4bc6e9ce70ffeb0dc0cb599865', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, h("slot", { key: 'ee841a45fa5d9ec6a80c8015246551c4eb793dcf' }))));
     }
     static get is() { return "wcs-com-nav-category"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/com-nav-item/com-nav-item.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class ComNavItem {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (h(Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (h(Host, { key: 'f99424e8faebbae16b206f49c003a34bd6824b6a', role: "listitem" }, h("slot", { key: 'f6b8dc69ba05d1c9ca8785b2905218612e9e6b8e' }), h("span", { key: 'b24f65c8fd58dcccca47d55ed18ab74f6572b122', class: "arrow-container" }, h("span", { key: '7f7e3cabd2006d703474969edfca277d0fc6ce0c', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
     static get is() { return "wcs-com-nav-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js CHANGED Viewed

@@ -121,9 +121,9 @@ export class ComNavSubmenu {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '935e78a3daf751160c21e7375e86be186bcfdec9', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: 'e6de47cc3e8d11be47b32229dc74a58aaf2f23c4', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
             h("h2", { role: "presentation", class: "menu-button" }, h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107")))
-            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: '1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: '1c2d8a56d7e91071fcb43f537173850ecf62fb28', class: "drawer-container" }, h("div", { key: '4880e09bcf8e06464db2984ac43dbd01ee9a0af3', class: "drawer-content" }, h("div", { key: 'd2e6e97442a73ff8d24ba4165587fd544b2ff853', class: "drawer-description" }, h("h3", { key: '04b20b11befc1dc63e719fda8dda51fe248e93cd' }, this.panelTitle), h("p", { key: '69810728510063a77b97845d91f684fe2abfa347' }, this.panelDescription)), h("div", { key: 'ed35406cc3a5ced0155181239dc96b4afcaa2871', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '3059b3ccbef8b9483e05e4d400b1643d9ab23273' })))))));
+            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: '99667d527d33591f69d9591ca039a8b416322bc5', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: 'cece9395bfb103342f9f54fc89bc207ccb18db9c', class: "drawer-container" }, h("div", { key: '19482a5a7393852da570431292c0f0cde86cfdcd', class: "drawer-content" }, h("div", { key: '85387b5371209178cb451065ddd9124143bb0112', class: "drawer-description" }, h("h3", { key: '4692b2d757408142da7357cddcfb55f8efa154e7' }, this.panelTitle), h("p", { key: 'e21e9eda294bac55a85e16e82178e9ad127907f4' }, this.panelDescription)), h("div", { key: '984f302624daf4341fbb3236cde16ff7e640f458', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '286906e6ab84bed9d990eb4cbb10fea119a9d060' })))))));
     }
     static get is() { return "wcs-com-nav-submenu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/counter/counter.js CHANGED Viewed

@@ -165,7 +165,7 @@ export class Counter {
         });
     }
     render() {
-        return (h(Host, { key: '6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834' }, h("div", { key: 'c3ed2c944c2a8f61ab862411b1d503a84ac37ae4', class: "counter" }, h("wcs-button", { key: 'c0d0d41e07a99ef0730b22d029529e629ff2f8d3', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '5003db6a007f8ede51d567a76ea18160fdb60949', icon: "remove", size: "s" })), h("div", { key: 'ae3b0ca61a95fe908583df73748b7e7d19242fd0', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '499a0d0ff7f38fcae6664b118991aeb39f5d6034', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '62cab421b796106f0b2957e4d8445266bd6ba754', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '339b6949d2b64262085f7bda19897f9533166cb4', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ee77cee6c9d08225c1844d1c4703ea6868c054da', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'b1b6cc395186ee871801d47ad2b9b62791f64b29', icon: "add", size: "s" })))));
+        return (h(Host, { key: '4043c155f8c67913d62318235aca68123f9746b6' }, h("div", { key: 'c3207a199646cba8f00ec1c942515c0888a64234', class: "counter" }, h("wcs-button", { key: 'ff7d18184fba7ff20fcaf59539ad379310f8ddc2', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '6749957c0b3d7ed71552bac6e57f7b1edcc2b30a', icon: "remove", size: "s" })), h("div", { key: 'ed9f5e4410f0858b2ac82b5931bc8195fb98eb7f', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: 'e5ec58628efa9cd02ed824eec9f1f2e9773e24f1', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '27100d8f18b1325dfbab458b8465ce927c21682f', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '7129d4872e064d799dd654975e112f4200ebb141', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: '9fffb1c68e9ab63336983f368aeea7a4f41cd5db', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: '4e07a2939e4c3c24d52bd7c6ff698526de781ca4', icon: "add", size: "s" })))));
     }
     static get is() { return "wcs-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return (h(Host, { key: 'cf4452e90a52e1bb419fec0db2d9c0838ad7b134' }));
+        return (h(Host, { key: 'd0fea091e2fa4aa557e56be65dcb604cd4340309' }));
     }
     static get is() { return "wcs-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -4,6 +4,14 @@
  */
 :host {
   display: flex;
+  /*
+  * DO NOT REMOVE:
+  * The native button is absolutely positioned.
+  * This `position: relative` makes `wcs-dropdown` its containing block.
+  * Without it, the button can be laid out relative to another ancestor higher in the DOM,
+  * so when the browser focuses the native button it may scroll the window unexpectedly.
+  */
+  position: relative;
   --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
   --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);
   --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);
@@ -56,6 +64,7 @@ button:focus-visible + wcs-button {
 }
 .popover {
+  width: max-content;
   display: none;
   border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);
   border-radius: var(--wcs-dropdown-overlay-border-radius);

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js CHANGED Viewed

@@ -316,5 +316,81 @@ test.describe('Dropdown component', () => {
             await expect(dropdown).toBeFocused();
         });
     });
+    test.describe('Behavior in window with scroll', () => {
+        test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; gap: 16px; align-items: center;">
+                        <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                            <span slot="placeholder">Dropdown</span>
+                            <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                            <wcs-dropdown-item>Second item</wcs-dropdown-item>
+                        </wcs-dropdown>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const body = page.locator('body');
+            const dropdown = page.locator('wcs-dropdown');
+            await dropdown.scrollIntoViewIfNeeded();
+            // When
+            await dropdown.click();
+            await page.waitForChanges();
+            // Then
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+        test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; gap: 16px; align-items: center;">
+                        <button id="before-dropdown">Before dropdown</button>
+                        <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                            <span slot="placeholder">Dropdown</span>
+                            <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                            <wcs-dropdown-item>Second item</wcs-dropdown-item>
+                        </wcs-dropdown>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const body = page.locator('body');
+            const beforeDropdownButton = page.locator('#before-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            await beforeDropdownButton.scrollIntoViewIfNeeded();
+            await beforeDropdownButton.focus();
+            // When
+            await page.keyboard.press('Tab');
+            // Then
+            await expect(dropdownButton).toBeFocused();
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+    });
+    test.describe('Overlay positionning', () => {
+        test('should display the popover wider than the trigger button when items have long labels', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div style="display: flex; width: 100%;">
+                    <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                        <span slot="placeholder">OK</span>
+                        <wcs-dropdown-item>Un libellé vraiment très très long qui dépasse la taille du bouton</wcs-dropdown-item>
+                        <wcs-dropdown-item>Autre item</wcs-dropdown-item>
+                    </wcs-dropdown>
+                </div>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const wcsButton = dropdown.locator('wcs-button');
+            // When
+            await wcsButton.click();
+            await page.waitForChanges();
+            // Then
+            const buttonWidth = await wcsButton.evaluate((el) => el.getBoundingClientRect().width);
+            const popoverWidth = await dropdown.locator('.popover').evaluate((el) => el.getBoundingClientRect().width);
+            expect(popoverWidth).toBeGreaterThan(buttonWidth + 50 /* some margin */);
+        });
+    });
 });
 //# sourceMappingURL=dropdown.e2e.playwright.js.map

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Dropdown component', () => {\n test.describe('keyboard interactions', () => {\n test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Space');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(lastItem).toBeFocused();\n });\n\n test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Home\n await page.keyboard.press('Home');\n await page.waitForChanges();\n\n // Then\n await expect(firstItem).toBeFocused();\n });\n\n test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing End\n await page.keyboard.press('End');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(secondItem).toBeFocused();\n });\n\n test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('Escape');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Tab\n await page.keyboard.press('Tab'); // should close the menu and focus back to button\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n await page.keyboard.down('Shift');\n await page.keyboard.press('Tab');\n await page.keyboard.up('Shift');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n // spy on the custom event on the locator\n const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n expect(itemClickSpy).toHaveReceivedEventTimes(1);\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Dropdown component', () => {\n test.describe('keyboard interactions', () => {\n test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Space');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(lastItem).toBeFocused();\n });\n\n test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Home\n await page.keyboard.press('Home');\n await page.waitForChanges();\n\n // Then\n await expect(firstItem).toBeFocused();\n });\n\n test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing End\n await page.keyboard.press('End');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(secondItem).toBeFocused();\n });\n\n test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('Escape');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Tab\n await page.keyboard.press('Tab'); // should close the menu and focus back to button\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n await page.keyboard.down('Shift');\n await page.keyboard.press('Tab');\n await page.keyboard.up('Shift');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n // spy on the custom event on the locator\n const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n expect(itemClickSpy).toHaveReceivedEventTimes(1);\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n });\n\n test.describe('Behavior in window with scroll', () => {\n test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const dropdown = page.locator('wcs-dropdown');\n\n await dropdown.scrollIntoViewIfNeeded();\n\n // When\n await dropdown.click();\n await page.waitForChanges();\n\n // Then\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n\n test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <button id=\"before-dropdown\">Before dropdown</button>\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const beforeDropdownButton = page.locator('#before-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n await beforeDropdownButton.scrollIntoViewIfNeeded();\n await beforeDropdownButton.focus();\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(dropdownButton).toBeFocused();\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n });\n\n test.describe('Overlay positionning', () => {\n test('should display the popover wider than the trigger button when items have long labels', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div style=\"display: flex; width: 100%;\">\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">OK</span>\n <wcs-dropdown-item>Un libellé vraiment très très long qui dépasse la taille du bouton</wcs-dropdown-item>\n <wcs-dropdown-item>Autre item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const wcsButton = dropdown.locator('wcs-button');\n\n // When\n await wcsButton.click();\n await page.waitForChanges();\n\n // Then\n const buttonWidth = await wcsButton.evaluate((el) => el.getBoundingClientRect().width);\n const popoverWidth = await dropdown.locator('.popover').evaluate((el) => el.getBoundingClientRect().width);\n\n expect(popoverWidth).toBeGreaterThan(buttonWidth + 50 /* some margin */);\n });\n })\n});\n"]}

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -198,7 +198,7 @@ export class Dropdown {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS));
     }
     render() {
-        return (h(Host, { key: '96be2f9df0a80b4d6c88cf15419ff29cb001c695' }, h("button", Object.assign({ key: '562456822837e6ff61ed23569335e42ad4e36df9', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '66348725409b810219dd1bd4658611c63bbb5eb8', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: '028e06637e35ecc14b66cf74fba32dc59d58121a', class: "wcs-button-content-wrapper" }, h("slot", { key: '7f7e2db54f9b5d3a20588c48c1d3fd6750187017', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '7f6f4efe22cab63033b3e7775791856ed8e1b921', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: 'ca7ce6adea1005d7126d4ae060ada55e9d3b6d70', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '0f2a9e15df898550117743f855e7ee0746157ab1', role: "presentation", class: "container" }, h("slot", { key: '688fd29a894bae8aee4c848a9b07380c95302ca2', name: "item" }, h("span", { key: 'a80c902d26d7afed58e8a17646dac92473042fa4', id: "is-empty" }))))));
+        return (h(Host, { key: '38b0312bdb316b0fb3995ac7e04b3be6f2ae80b1' }, h("button", Object.assign({ key: '5842016e2ccb71db7f793e0376d9cc948591b9fb', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '463316eddbafe0beaa01eca79b06aeca9768d489', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: '49a3210683fa548f2baaebbc6319e78e864ca7a2', class: "wcs-button-content-wrapper" }, h("slot", { key: 'b3fb4307c73fceddfc931342dc73069dbda28835', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '4a0eeee69519eb8a336120c976594aac191abc4d', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '05a7807155799f0492c4bc180d3bf998055ba148', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '61bc7b3fcda2d10d83a68eb40db1e95ec9db3c6f', role: "presentation", class: "container" }, h("slot", { key: '30e21e28fb8c0ce46b6da18cdf67b7c567897839', name: "item" }, h("span", { key: 'ea05bd99cd367f7be8aacea33286e95ebbe82cd9', id: "is-empty" }))))));
     }
     static get is() { return "wcs-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-divider/dropdown-divider.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownDivider {
     render() {
-        return (h(Host, { key: '52d90154f003445f1d62badde51df437a38d6f19', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
+        return (h(Host, { key: 'f6099eab21640cea46aaeb81b78d744416550b62', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
     }
     static get is() { return "wcs-dropdown-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownHeader {
     render() {
-        return (h(Host, { key: 'a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8', slot: "item", tabindex: "-1" }, h("slot", { key: 'ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b' })));
+        return (h(Host, { key: '63465bc35721ca858aeb4465f0581151f372b532', slot: "item", tabindex: "-1" }, h("slot", { key: '7f064837e9840499d7916fde0ff67ef98ecf649a' })));
     }
     static get is() { return "wcs-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class DropdownItem {
         }
     }
     render() {
-        return (h(Host, { key: '70e0767afe5fe295df4292e356db89d555fa71a3', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: '11cd674f89784aec6bfa1ba4d15f0fb0f25d976e' })));
+        return (h(Host, { key: '5833a19574cfb6d128e6fb015ec2124e3d40d8ce', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: 'c679dd4325533514ebff2934bd7d21ff2f0c3e9c' })));
     }
     static get is() { return "wcs-dropdown-item"; }
     static get originalStyleUrls() {