@sapudex/web-components 2.41.0 → 2.43.0

package/cypress/specs/SelectBox.cy.tsx

@@ -1,5 +1,7 @@
 import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton, UDExModal } from  "../support/component-imports.js";
-import { UDExListMode } from "../../src/types/List.js";
+import { UDExListItemSize, UDExListMode, UDExListStyleType } from "../../src/types/List.js";
+import { UDExAvatarShape, UDExAvatarSize } from "../../src/Avatar.js";
+import UDExStatusBadgeValueState from "../../src/types/StatusBadgeValueState.js";
 
 const selectBoxWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
   id="select-box"
@@ -337,6 +339,9 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow()
     .find(".udex-tag-group").shadow().as("tagGroup");
 
+    // Wait for the resize handler to fire and render the tooltip before clicking.
+    cy.get("@tagGroup").find("udex-tooltip").should("exist");
+
     cy.get("@tagGroup")
     .find(".udex-tag-group__tokenizer").shadow()
     .find(".ui5-tokenizer-more-text")
@@ -1594,6 +1599,180 @@ describe("SelectBox", () => {
     });
   });
 
+  // Added: covers SearchableListBase.filterItems group-header label matching.
+  // When the search query matches a group header's label, the header label is
+  // highlighted with <b> tags and ALL children of that group are shown.
+  // When the query matches only some children, the header label is left intact
+  // (no <b>) and only the matching children are shown.
+  describe("Select Box group header search highlighting", () => {
+    const groupHeaderForSearch = <div style="width: 350px; position:relative;">
+      <UDExSelectBox
+        id="select-box"
+        mode={UDExListMode.MultiSelect}
+        label="Programming languages">
+        <UDExSelectBoxGroupHeader label="Programming Languages" supportingText="Digital Builders">
+          <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    // Selector for the title span inside the udex-list-item rendered for the
+    // multi-select group header. The label is forwarded as the `label` attribute
+    // of the inner udex-list-item, which renders it as <span part="title">{{{label}}}</span>.
+    const groupHeaderTitleSelector = "[part='title']";
+
+    // Updated: covers Fix 1 — when the header label matches, children whose
+    // labels also contain the query now get <b> highlights too. Query "P"
+    // matches header "Programming Languages" AND child "Python".
+    it("highlights the group header label with <b> tags when the search query matches the header label", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("P");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").should("exist");
+
+      // Header label is highlighted on the "P" of "Programming Languages".
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+
+      // Fix 1: child "Python" also matches "P" and must be highlighted as well,
+      // not left as a plain label just because the header matched.
+      // Children render in slotted order: index 0 = JavaScript, index 1 = Python.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+    });
+
+    // Updated: covers Fix 1 — children matching the query DO get <b>; children
+    // that do not contain the query do NOT get <b>. Highlighting is selective,
+    // not all-or-nothing, even when the header match keeps every child visible.
+    // Query "n": header "Programming Languages" has "n", "Python" has "n",
+    // "JavaScript" has no "n" — so eq(1) is highlighted, eq(0) is not.
+    it("shows ALL children of the group when the search query matches the group header label", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("n");
+
+      // Both children remain rendered as udex-list-item inside the group header
+      // even though only one of their labels matches — header match shows all children.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 2);
+
+      // "Python" (index 1) contains "n" — its label gets a <b> highlight.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist");
+
+      // "JavaScript" (index 0) has no "n" — its label has no <b>.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(0).shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    // Added: covers Fix 2 — checkAndUpdateLabel now resets item.label to its
+    // clean form before deciding whether to add a new <b>, so a header that
+    // matched a previous query is cleaned up when the new query no longer
+    // matches it.
+    it("clears stale highlight on header when query changes", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").as("searchField");
+
+      // First search matches the header — header label is highlighted.
+      cy.get("@searchField").click();
+      cy.realType("Programming");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist");
+
+      // Replace the search with one that does NOT match the header label.
+      // "Java" matches a child but not "Programming Languages".
+      cy.get("@searchField").clear();
+      cy.get("@searchField").click();
+      cy.realType("Java");
+
+      // Fix 2: stale <b> from the previous "Programming" match must be gone.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("does NOT highlight the group header label when only child items match the query", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("Python");
+
+      // Only the matching child is rendered as an udex-list-item under the header.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 1);
+
+      // The matching child label itself receives the <b> highlight.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("have.text", "Python");
+
+      // Header label has no <b> tag because the header label itself does not
+      // match "Python" — only the child does.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("hides the group entirely when neither the header nor any child matches the query", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("zzznomatch");
+
+      // The whole group is filtered out — group header is not rendered in shadow.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("not.exist");
+
+      // The empty-state message is shown instead.
+      cy.get("#select-box").shadow()
+        .find(".udex-no-result")
+        .should("include.text", "No matches found.");
+    });
+  });
+
   describe("SelectBox keyboard navigation with action icon buttons", () => {
     const shortComponentWithFocusTargets = <div style="width: 350px; position:relative;">
       <a id="previous-focus" href="#">Previous focusable element</a>
@@ -1774,4 +1953,273 @@ describe("SelectBox", () => {
       cy.get("#next-focus").should("be.focused");
     });
   });
+
+  describe("SelectBoxItem forwarded properties", () => {
+    const selectBoxWithImageItems = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="People">
+        <UDExSelectBoxItem
+          id="item-image"
+          label="Alice"
+          image="./stories/list/image.png"
+          imageAlt="Alice avatar"
+          imageBadgeState={UDExStatusBadgeValueState.Information}
+          imageShape={UDExAvatarShape.Square}
+          imageSize={UDExAvatarSize.M}>
+        </UDExSelectBoxItem>
+        <UDExSelectBoxItem
+          id="item-image-default-shape-size"
+          label="Bob"
+          image="./stories/list/image.png"
+          imageAlt="Bob avatar">
+        </UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithFlagItems = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Countries">
+        <UDExSelectBoxItem id="item-flag-start" label="Germany" flag flagPosition="start"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-flag-end" label="France" flag flagPosition="end"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-no-flag" label="Spain"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithIconType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-icon" label="Items" type={UDExListStyleType.Icon} itemIcon="accept">
+        <UDExSelectBoxItem id="item-icon" label="Saved"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-icon-2" label="Done"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithCircleType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-circle" label="Items" type={UDExListStyleType.Circle}>
+        <UDExSelectBoxItem id="item-circle" label="Bullet"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithNumberType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-number" label="Items" type={UDExListStyleType.Number}>
+        <UDExSelectBoxItem id="item-number" label="Numbered"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithSizes = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Sizes">
+        <UDExSelectBoxItem id="item-large" label="Large" size={UDExListItemSize.Large}></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-standard" label="Standard" size={UDExListItemSize.Standard}></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const openDropdown = () => {
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+    };
+
+    describe("Defaults on the host udex-select-box-item", () => {
+      it("imageShape defaults to 'Circle' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).imageShape).to.equal(UDExAvatarShape.Circle);
+        });
+      });
+
+      it("imageSize defaults to 'S' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).imageSize).to.equal(UDExAvatarSize.S);
+        });
+      });
+
+      it("type defaults to 'None' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).type).to.equal(UDExListStyleType.None);
+        });
+      });
+
+      it("size defaults to 'Standard' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).size).to.equal(UDExListItemSize.Standard);
+        });
+      });
+
+      it("flag defaults to falsy on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).flag).to.not.equal(true);
+        });
+      });
+    });
+
+    describe("Image forwarding", () => {
+      it("forwards image src to the rendered udex-list-item as 'image'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image", "./stories/list/image.png");
+      });
+
+      it("forwards imageAlt to the rendered udex-list-item as 'image-alt'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-alt", "Alice avatar");
+      });
+
+      it("forwards imageBadgeState to the rendered udex-list-item as 'image-badge-state'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-badge-state", UDExStatusBadgeValueState.Information);
+      });
+
+      it("forwards imageShape to the rendered udex-list-item as 'image-shape'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-shape", UDExAvatarShape.Square);
+      });
+
+      it("forwards imageSize to the rendered udex-list-item as 'image-size'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-size", UDExAvatarSize.M);
+      });
+
+      it("forwards default imageShape ('Circle') and imageSize ('S') when not explicitly set", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "image-shape", UDExAvatarShape.Circle)
+          .and("have.attr", "image-size", UDExAvatarSize.S);
+      });
+
+      it("renders the avatar inside the rendered udex-list-item shadow with the correct shape and size", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .shadow().find(".udex-list__avatar").as("avatar");
+
+        cy.get("@avatar").should("have.attr", "shape", UDExAvatarShape.Square);
+        cy.get("@avatar").should("have.attr", "size", UDExAvatarSize.M);
+        cy.get("@avatar").find("img").should("have.attr", "alt", "Alice avatar");
+      });
+
+      it("renders the status badge inside the rendered udex-list-item with the forwarded value-state", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .shadow().find("udex-status-badge")
+          .should("have.attr", "value-state", UDExStatusBadgeValueState.Information);
+      });
+    });
+
+    describe("Flag forwarding", () => {
+      it("forwards flag boolean to the rendered udex-list-item as the 'flag' attribute", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "flag");
+      });
+
+      it("forwards flagPosition='start' to the rendered udex-list-item as 'flag-position'", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "flag-position", "start");
+      });
+
+      it("forwards flagPosition='end' to the rendered udex-list-item as 'flag-position'", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "flag-position", "end");
+      });
+
+      it("does not forward flag attribute when flag is not set on the SelectBoxItem", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(2)
+          .should("not.have.attr", "flag");
+      });
+    });
+
+    describe("itemIcon and type forwarding", () => {
+      it("renders the icon in the list item shadow DOM when type='Icon' and itemIcon is set", () => {
+        cy.mount(selectBoxWithIconType);
+        cy.get("#select-box-icon").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-icon").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Icon)
+          .shadow().find("ui5-icon.udex-list__icon")
+          .should("have.attr", "name", "accept");
+      });
+
+      it("forwards type='Circle' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithCircleType);
+        cy.get("#select-box-circle").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-circle").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Circle);
+      });
+
+      it("forwards type='Number' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithNumberType);
+        cy.get("#select-box-number").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-number").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Number);
+      });
+    });
+
+    describe("size forwarding", () => {
+      it("forwards size='Large' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithSizes);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "size", UDExListItemSize.Large);
+      });
+
+      it("forwards size='Standard' (default) to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithSizes);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "size", UDExListItemSize.Standard);
+      });
+    });
+  });
 });

package/cypress/specs/Toast.cy.tsx

@@ -76,27 +76,24 @@ describe("Toast", async () => {
   describe("With Success valueState", () => {
     it("renders sys-enter-2 icon when valueState is Success", () => {
       cy.mount(successToast);
-      cy.get("#successToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-       expect($toastIcon.attr("name")).to.eq("sys-enter-2")
-      )
+      cy.get("#successToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "sys-enter-2")
     });
   })
 
   describe("With Warning valueState", () => {
     it("renders alert icon when valueState is Warning", () => {
       cy.mount(warningToast);
-      cy.get("#warningToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-       expect($toastIcon.attr("name")).to.eq("alert")
-      )
+      cy.get("#warningToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "alert")
     });
   })
 
   describe("With Error valueState", () => {
     it("renders error icon when valueState is Error", () => {
       cy.mount(errorToast);
-      cy.get("#errorToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-        expect($toastIcon.attr("name")).to.eq("error")
-      )
+      cy.get("#errorToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "error")
     });
   })
 });

package/cypress.config.ts

@@ -8,6 +8,16 @@ export default defineConfig({
     async setupNodeEvents(on, config) {
       const codeCoverageTask = await import('@cypress/code-coverage/task');
       codeCoverageTask.default(on, config);
+
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome') {
+          launchOptions.args.push('--no-sandbox');
+          launchOptions.args.push('--disable-dev-shm-usage');
+          launchOptions.args.push('--disable-gpu');
+        }
+        return launchOptions;
+      });
+
       return config;
     },
     devServer: {

package/dist/MastheadCountrySelector.d.ts

@@ -146,13 +146,15 @@ declare class UDExMastheadCountrySelector extends UI5Element {
     _mastheadShell: UDExMastheadShell;
     _countriesListHolderClassName: string;
     _itemClassName: string;
+    _boundHandleActiveRegionClose: () => void;
     static i18nBundle: I18nBundle;
     constructor();
-    onAfterRendering(): void;
     onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    handleActiveRegionClose(): void;
     handleRegionClick(e: CustomEvent): void;
     handleCountryClick(e: CustomEvent): void;
-    handleKeyDown(e: KeyboardEvent): void;
     handleSearch(e: CustomEvent): void;
     handleSearchReset(): void;
     handleFocusItem(): void;
@@ -162,10 +164,7 @@ declare class UDExMastheadCountrySelector extends UI5Element {
     backToRegions(): void;
     focusNextItem(currentItem: UDExMastheadMenuItem): void;
     focusPreviousItem(currentItem: UDExMastheadMenuItem): void;
-    focusLastItem(e: KeyboardEvent): void;
-    focusFirstItem(e: KeyboardEvent): void;
-    handleEndKey(e: KeyboardEvent): void;
-    handleHomeKey(e: KeyboardEvent): void;
+    focusFirstItem(): void;
     handleSingleRegionMode(): void;
     focusBackBtn(): void;
     focusRegionByIndex(): void;
@@ -173,7 +172,6 @@ declare class UDExMastheadCountrySelector extends UI5Element {
     fireEventCountryItemClick(e: CustomEvent | KeyboardEvent): void;
     setActiveRegion(region: Region | null): void;
     setActiveCountries(countries: Array<Country>): void;
-    setTabIndexForItems(): void;
     closeMenu(): void;
     checkScrollableCountriesList(): void;
     handleCountryListShadowVisible(): void;