@watermarkinsights/ripple 5.6.0-8 → 5.7.0-0

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -38,6 +38,7 @@ export class PrivOptionList {
         this.selectAll = false;
         this.searchPlaceholder = undefined;
         this.maxHeight = undefined;
+        this.optgroupLabel = undefined;
         this.announcement = "";
         this.searchTerm = "";
     }
@@ -151,9 +152,11 @@ export class PrivOptionList {
         }
     }
     async clearSearch() {
-        this.searchFieldEl.value = "";
-        this.searchTerm = "";
-        this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
+        if (this.search) {
+            this.searchFieldEl.value = "";
+            this.searchTerm = "";
+            this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
+        }
     }
     async focusOption(option) {
         this.allOptionEls.forEach((i) => (i.focused = i === option));
@@ -249,9 +252,16 @@ export class PrivOptionList {
                 ev.preventDefault();
                 this.moveUp(ev.target);
                 break;
+            case "ArrowLeft":
+                // if an optgroupLabel was passed, we are within a Nested Select
+                if (!!this.optgroupLabel) {
+                    ev.preventDefault();
+                    this.wmKeyLeftPressed.emit();
+                }
+                break;
             case "Escape":
                 ev.preventDefault();
-                this.close();
+                this.wmEscKeyPressed.emit();
                 break;
             case "Enter":
                 if (el === this.selectAllEl) {
@@ -293,6 +303,10 @@ export class PrivOptionList {
         if (this.searchFieldEl) {
             focusableEls.unshift(this.searchFieldEl);
         }
+        // if an optgroupLabel was passed, we are is within a Nested Select
+        if (!!this.optgroupLabel) {
+            focusableEls.unshift(this.returnBtnEl);
+        }
         const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
         if (prevEl) {
             this.focusOption(prevEl);
@@ -306,6 +320,10 @@ export class PrivOptionList {
         if (this.searchFieldEl) {
             focusableEls.unshift(this.searchFieldEl);
         }
+        // if an optgroupLabel was passed, we are is within a Nested Select
+        if (!!this.optgroupLabel) {
+            focusableEls.unshift(this.returnBtnEl);
+        }
         const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
         if (nextEl) {
             this.focusOption(nextEl);
@@ -345,6 +363,12 @@ export class PrivOptionList {
         }
         this.announcement = message;
     }
+    renderReturnBtn() {
+        return (h("button", { ref: (el) => (this.returnBtnEl = el), id: "return-btn", class: "return-btn", onKeyDown: (ev) => this.handleKeyDown(ev), onClick: () => {
+                //@ts-ignore -- Check out this one weird trick TypeScript doesn't want you to know about
+                this.el.getRootNode().host.isExpanded = false;
+            } }, this.optgroupLabel));
+    }
     renderSearchField() {
         return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
             // aria-expanded={this.isExpanded ? "true" : "false"}
@@ -363,7 +387,7 @@ export class PrivOptionList {
         });
     }
     render() {
-        return (h("div", { class: "list-wrapper" }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { class: "list-wrapper" }, !!this.optgroupLabel && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {
@@ -465,6 +489,23 @@ export class PrivOptionList {
                 },
                 "attribute": "max-height",
                 "reflect": false
+            },
+            "optgroupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "optgroup-label",
+                "reflect": false
             }
         };
     }
@@ -540,6 +581,36 @@ export class PrivOptionList {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "wmEscKeyPressed",
+                "name": "wmEscKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmKeyLeftPressed",
+                "name": "wmKeyLeftPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css

@@ -172,6 +172,9 @@
   pointer-events: none;
   font-size: 1.12rem;
 }
+.button-wrapper .displayedoption.expanded:before {
+  content: "\f143";
+}
 .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
   background: var(--wmcolor-select-background);
   text-decoration: none;
@@ -282,7 +285,7 @@
 }
 .dropdown.upwards {
   top: unset;
-  bottom: calc(100% - 2.5rem);
+  bottom: 100%;
   -ms-transform-origin: center bottom;
   -webkit-transform-origin: center bottom;
   -moz-transform-origin: center bottom;
@@ -357,11 +360,20 @@
 .option-list-wrapper {
   background: white;
   width: 100%;
-  transform: translateX(100%);
+  transform: translateX(0%);
   transition: transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);
 }
-.option-list-wrapper.visible {
-  transform: translateX(0%);
+.option-list-wrapper.hidden {
+  transform: translateX(100%);
+  position: absolute;
+  top: 0px;
+}
+
+.measurement-area {
+  position: absolute;
+  visibility: hidden;
+  height: 0px;
+  pointer-events: none;
 }
 
 .sr-only {

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -1,8 +1,9 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getTextDir, intl, isElOrChild, toBool } from "../../../global/functions";
+import { getTextDir, intl, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
 import { globalMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
+        this.openUp = false;
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.clearSelectionMessage = this.multiple
@@ -47,7 +48,7 @@ export class NestedSelect {
             description: "Text displayed when all options are selected",
         });
         this.isExpanded = false;
-        this.optgroupExpanded = false;
+        this.showClearSelectionButton = false;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -76,7 +77,6 @@ export class NestedSelect {
     }
     componentDidLoad() {
         if (this.maxHeight) {
-            // this.listboxEl.style.maxHeight = this.maxHeight;
             this.dropdownEl.style.maxHeight = this.maxHeight;
         }
     }
@@ -97,14 +97,14 @@ export class NestedSelect {
             const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
             const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
             const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-            let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
-            let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
             this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
             while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
                 this.overflowCount++;
-                optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
-                optionsWidths.pop();
                 this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
             }
         }
     }
@@ -124,17 +124,12 @@ export class NestedSelect {
     closePopupOnEscape() {
         this.close();
     }
-    handleOptionKeyLeft(ev) {
-        const parentOptgroup = ev.detail.parentElement;
-        parentOptgroup.isExpanded = false;
-        this.focusFirstMenuitem();
-    }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
-            this.optgroupEls.forEach((optgroupEl) => (optgroupEl.isExpanded = false));
+            this.dropdownEl.classList.remove("open");
             window.setTimeout(() => {
-                this.dropdownEl.classList.remove("open");
+                this.optgroupEls.forEach((optgroupEl) => (optgroupEl.isExpanded = false));
                 if (returnFocus) {
                     this.buttonEl.focus();
                 }
@@ -142,12 +137,16 @@ export class NestedSelect {
         }
     }
     open() {
-        // TODO implement opening upwards if not enough space below
-        this.isExpanded = true;
-        this.dropdownEl.classList.add("open");
-        window.requestAnimationFrame(() => {
-            this.focusFirstMenuitem();
-        });
+        if (!this.isDisabled) {
+            this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            const elHeight = this.el.clientHeight;
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, elHeight, 0);
+            window.requestAnimationFrame(() => {
+                this.focusFirstMenuitem();
+            });
+        }
     }
     focusFirstMenuitem() {
         if (this.menuitemEls.length > 0) {
@@ -215,10 +214,16 @@ export class NestedSelect {
         }
     }
     handleOptgroupExpanded() {
-        this.optgroupExpanded = true;
+        this.menuEl.classList.add("hidden");
+        this.optListWrapperEl.classList.remove("hidden");
     }
-    handleOptgroupHidden() {
-        this.optgroupExpanded = false;
+    handleOptgroupHidden(ev) {
+        this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+        this.menuEl.classList.remove("hidden");
+        this.optListWrapperEl.classList.add("hidden");
+        // focus back to nested select
+        const elToFocus = this.el.shadowRoot.querySelector(`button[data-label=${ev.detail}]`);
+        elToFocus.focus();
     }
     renderButtonText() {
         if (this.displayedOptions.length < 1) {
@@ -232,29 +237,35 @@ export class NestedSelect {
         }
     }
     renderOverflowCount() {
-        // TODO overflow count not appearing due to refactor, in both regular select and nested select
         if (this.overflowCount > 0) {
             return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
     handleClearSelection() {
         this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+        if (!this.multiple) {
+            this.close();
+        }
     }
     renderClearSelectionButton() {
-        let selectedCount = this.childOptions.some((o) => o.selected);
-        if (selectedCount) {
+        if (this.showClearSelectionButton) {
             return (h("button", { class: "menuitem", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, this.clearSelectionMessage));
         }
     }
     renderSelectionCount(optgroupEl) {
         const selectionCount = this.countOptgroupSelected(optgroupEl);
         if (selectionCount) {
-            const selectionCountMessage = intl.formatMessage({
-                id: "select.optgroupSelectionCount",
-                defaultMessage: "{numSelected, plural, one {Item} other {#}} Selected",
-                description: "Text indicating number of selected in a group.",
+            const singleSelectionCountMessage = intl.formatMessage({
+                id: "select.optgroupSingleSelectionCount",
+                defaultMessage: "Item Selected",
+                description: "Text indicating number of selected in a group, where only a single selection is possible.",
+            }, { numSelected: selectionCount });
+            const multipleSelectionCountMessage = intl.formatMessage({
+                id: "select.optgroupMultipleSelectionCount",
+                defaultMessage: "{numSelected} Selected",
+                description: "Text indicating number of selected in a group, where multiple selections are possible.",
             }, { numSelected: selectionCount });
-            return (h("div", { class: "selection-count" }, h("span", null, selectionCountMessage)));
+            return (h("div", { class: "selection-count" }, h("span", null, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)));
         }
     }
     render() {
@@ -271,12 +282,12 @@ export class NestedSelect {
         };
         return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount()), h("div", { class: "dropdown", ref: (el) => (this.dropdownEl = el) }, h("div", { class: `menu ${this.optgroupExpanded ? "hidden" : ""}` }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
-            return (h("button", { class: "menuitem group-btn", role: "menuitem", tabindex: -1, onClick: () => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu" }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+            return (h("button", { class: "menuitem group-btn", role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, onClick: () => {
                     optgroupEl.isExpanded = !optgroupEl.isExpanded;
                     forceUpdate(this.el);
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl)));
-        })), h("div", { class: `option-list-wrapper ${this.optgroupExpanded ? "visible" : ""}` }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -511,7 +522,7 @@ export class NestedSelect {
     static get states() {
         return {
             "isExpanded": {},
-            "optgroupExpanded": {}
+            "showClearSelectionButton": {}
         };
     }
     static get events() {
@@ -552,12 +563,6 @@ export class NestedSelect {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmKeyLeftPressed",
-                "method": "handleOptionKeyLeft",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }, {
                 "name": "click",
                 "method": "handleClick",

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.css

@@ -48,30 +48,4 @@
 
 :host(.visible) {
   display: unset;
-}
-
-.return-btn {
-  cursor: pointer;
-  padding: 1.25rem;
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 0.875rem;
-  border-bottom: 1px solid #4a4a4a;
-}
-.return-btn:before {
-  display: inline-block;
-  font: normal normal normal 24px/1 "Material Design Icons";
-  font-size: inherit;
-  text-rendering: auto;
-  line-height: inherit;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\f141";
-  pointer-events: none;
-  font-size: 1.12rem;
-}
-.return-btn:hover {
-  background: var(--wmcolor-select-option-background-hover);
-  outline: none;
 }

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js

@@ -10,6 +10,7 @@ export class Optgroup {
     }
     isExpandedChanged() {
         if (this.isExpanded) {
+            this.el.classList.add("visible");
             this.optgroupExpanded.emit();
             window.setTimeout(() => {
                 // wait for slide in animation to complete before assigning focus
@@ -17,21 +18,22 @@ export class Optgroup {
             }, 250);
         }
         else {
-            this.optgroupHidden.emit();
+            this.optgroupHidden.emit(this.label);
+            this.optionListEl.clearSearch();
+            window.setTimeout(() => {
+                // wait for slide out animation to complete before hiding
+                this.el.classList.remove("visible");
+            }, 250);
         }
     }
     async emitDeselection() {
         this.wmOptgroupAllDeselected.emit();
     }
-    /*
-      componentWillLoad() {
-        this.multiple = this.parentNestedSelect.multiple;
-      }
-    */
+    handleOptionKeyLeft() {
+        this.isExpanded = false;
+    }
     render() {
-        return (h(Host, { class: `${this.isExpanded ? "visible" : ""}` }, h("div", { class: "return-btn", onClick: () => {
-                this.isExpanded = false;
-            } }, this.label), h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
+        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }
@@ -194,4 +196,13 @@ export class Optgroup {
                 "methodName": "isExpandedChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "wmKeyLeftPressed",
+                "method": "handleOptionKeyLeft",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/{wm-option → selects/wm-option}/wm-option.css

@@ -153,7 +153,7 @@
 
 :host(:focus) {
   outline: none;
-  background: var(--wmcolor-select-option-background-hover);
+  background: var(--wmcolor-select-option-background-focus);
 }
 
 :host(:hover) {

package/dist/collection/components/{wm-option → selects/wm-option}/wm-option.js

@@ -61,7 +61,7 @@ export class Option {
                 break;
             case "ArrowLeft":
                 ev.preventDefault();
-                this.wmKeyLeftPressed.emit(this.el);
+                this.wmKeyLeftPressed.emit();
                 break;
             default:
                 if (ev.key.length === 1) {
@@ -367,14 +367,9 @@ export class Option {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 }
             }, {
                 "method": "wmEscKeyPressed",

package/dist/collection/components/{wm-option → selects/wm-option}/wm-option.spec.js

@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Option } from "./wm-option";
-import { Select } from "../selects/wm-select/wm-select";
+import { Select } from "../wm-select/wm-select";
 // mock MutationObserver
 global.MutationObserver = jest.fn().mockImplementation(() => ({
     observe: jest.fn(),

package/dist/collection/components/selects/wm-select/wm-select.css

@@ -302,6 +302,13 @@
   overflow: auto;
 }
 
+.measurement-area {
+  position: absolute;
+  visibility: hidden;
+  height: 0px;
+  pointer-events: none;
+}
+
 .rtl > .dropdown {
   -ms-transform-origin: left top;
   -webkit-transform-origin: left top;

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -118,8 +118,8 @@ export class Select {
     handleChildChange(_) {
         // on update of children or children selected state, reset button text and rerender
         this.setButtonText();
-        forceUpdate(this.el);
         this.optionListEl.handleChildChange(_);
+        forceUpdate(this.el);
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
@@ -197,14 +197,14 @@ export class Select {
             const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
             const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
             const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-            let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
-            let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
             this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
             while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
                 this.overflowCount++;
-                optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
-                optionsWidths.pop();
                 this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
             }
         }
     }
@@ -244,7 +244,7 @@ export class Select {
         };
         return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-select/wm-select.spec.js

@@ -2,7 +2,7 @@ import { newSpecPage } from "@stencil/core/testing";
 import * as globalFuncs from "../../../global/functions";
 jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
 import { Select } from "./wm-select";
-import { Option } from "../../wm-option/wm-option";
+import { Option } from "../wm-option/wm-option";
 // mock MutationObserver
 global.MutationObserver = jest.fn().mockImplementation(() => ({
     observe: jest.fn(),

package/dist/collection/components/wm-modal/wm-modal.js

@@ -65,7 +65,7 @@ export class Modal {
     componentWillLoad() {
         if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
             if (!this.el.id) {
-                console.error("For accessibility purposes you need to set the modal content wrapper's id to 'content-[id of wm-modal].");
+                console.error("For accessibility purposes you need to set the modal content wrapper's id to 'content-[id of wm-modal]'.");
             }
         }
         this.el.focus = () => {