@watermarkinsights/ripple 5.20.0-alpha.8 → 5.20.0-alpha.9

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

@@ -349,9 +349,7 @@ export class PrivOptionList {
             : selectMessages.optgroupSingleSelectionCount())))));
     }
     renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
-            // aria-expanded={this.isExpanded ? "true" : "false"}
-            onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
     }
     renderSearchFailedMessage() {
         return h("div", { class: "search-results-message" }, selectMessages.noSearchResults);
@@ -369,7 +367,7 @@ export class PrivOptionList {
         return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
     }
     render() {
-        return (h("div", { key: '1b5a638b1ce9746eba27e3b106f910b6c08d59ed', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '314e0a7234cdb65a636ea96bb9a5bc3ea94cf9aa', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '4399f882be1d24b5ee799126b1c8b7396f4985d7' })), h("div", { key: '4132af7d3529fdfa3ec301baa9aaf7ad460f9f5e', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '9f19650526738eefcf2e2de58b812d9d0d3a21af', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '381b60f8cb2dc58f7c268e75e6d0e78879393f0d', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '6a99161cdb2d3c4b6b1bfbe9b4af333daa4704de' })), h("div", { key: '8cee667df6aa79c7db5511858a73f68e911cc566', 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() {

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

@@ -878,6 +878,10 @@
   --wmcolor-select-selectall-border: var(--wmcolor-select-option-border);
   --wmcolor-select-selectall-text: var(--wmcolor-interactive);
   --wmcolor-select-text: var(--wmcolor-interactive);
+  --button-width: auto;
+  --dropdown-left: 0;
+  --dropdown-translate-y: 0;
+  --dropdown-max-height: none;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -975,14 +979,16 @@
   margin-left: 0.75rem;
 }
 
-.wrapper .button-wrapper {
+.button-wrapper {
   position: relative;
   flex: 1;
   font-size: 1.125rem;
   color: var(--wmcolor-select-text);
   min-width: 8.75rem;
 }
-.wrapper .button-wrapper .displayedoption {
+
+.displayedoption {
+  anchor-name: --select-button;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -1009,118 +1015,112 @@
   text-align: left;
 }
 @media only screen and (max-width: 768px) {
-  .wrapper .button-wrapper .displayedoption {
+  .displayedoption {
     height: 2.75rem;
   }
 }
-.wrapper .button-wrapper .displayedoption .expand-icon {
+.displayedoption .expand-icon {
   --icon-size: 1.125rem;
   position: absolute;
   inset-inline-end: 0.5625rem;
 }
-.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
+.displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
   background: var(--wmcolor-select-background);
   text-decoration: none;
 }
-.wrapper .button-wrapper .displayedoption:active {
+.displayedoption:active {
   -ms-transform: initial;
   transform: initial;
 }
-.wrapper .button-wrapper .displayedoption:focus {
+.displayedoption:focus {
   outline: none;
 }
-.wrapper .button-wrapper .displayedoption::-moz-focus-inner {
+.displayedoption::-moz-focus-inner {
   border: 0;
 }
-.wrapper .button-wrapper .displayedoption:focus-visible {
+.displayedoption:focus-visible {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
-.wrapper .button-wrapper .displayedoption .overflowcontrol {
+.displayedoption .overflowcontrol {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 1;
 }
-.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo {
+.displayedoption .overflowcontrol.hassubinfo {
   display: flex;
 }
-.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text {
+.displayedoption .overflowcontrol.hassubinfo .button-text {
   flex: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;
 }
-.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo {
+.displayedoption .overflowcontrol.hassubinfo .subinfo {
   flex: none;
   font-style: italic;
 }
-.wrapper .button-wrapper .displayedoption .overflow-counter {
+.displayedoption .overflow-counter {
   font-weight: bold;
   margin-left: 0.5rem;
 }
-.wrapper .button-wrapper > .displayedoption[disabled] {
+
+.displayedoption[disabled] {
   color: var(--wmcolor-select-option-text-disabled);
   border-color: var(--wmcolor-border-dark);
   background: var(--wmcolor-select-option-background-disabled);
   cursor: default;
 }
-.wrapper .button-wrapper > .dropdown {
-  -webkit-overflow-scrolling: touch;
+
+.dropdown {
+  margin: 0;
+  padding: 0;
+  width: unset;
+  position: absolute;
   -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
-  -ms-transition: transform 0.25s ease;
-  -webkit-transition: transform 0.25s ease;
-  -moz-transition: transform 0.25s ease;
-  transition: transform 0.25s ease;
-  -ms-transform: scale(1, 0);
-  -webkit-transform: scale(1, 0);
-  -moz-transform: scale(1, 0);
-  transform: scale(1, 0);
-  -ms-transform-origin: center top;
-  -webkit-transform-origin: center top;
-  -moz-transform-origin: center top;
-  transform-origin: center top;
+  border: none;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
-  position: absolute;
-  top: 40px;
-  right: 0;
+  -webkit-overflow-scrolling: touch;
   background: var(--wmcolor-select-option-background);
-  z-index: 100;
-  width: 100%;
   font-size: 0.875rem;
   max-height: var(--max-height);
   overflow-y: auto;
 }
-.wrapper .button-wrapper > .dropdown.upwards {
-  top: unset;
-  bottom: 100%;
-  -ms-transform-origin: center bottom;
-  -webkit-transform-origin: center bottom;
-  -moz-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-.wrapper .button-wrapper > .dropdown.hidden {
+.dropdown.hidden {
   visibility: hidden;
 }
-.wrapper .button-wrapper > .dropdown.open {
-  -ms-transform: scale(1, 1);
-  -webkit-transform: scale(1, 1);
-  -moz-transform: scale(1, 1);
-  transform: scale(1, 1);
+
+@supports (top: anchor(bottom)) {
+  .dropdown {
+    position-anchor: --select-button;
+    top: anchor(bottom);
+    left: anchor(left);
+    right: anchor(right);
+    visibility: hidden;
+  }
+  .dropdown.is-open {
+    visibility: visible;
+  }
+  .dropdown.upward {
+    top: unset;
+    bottom: anchor(top);
+  }
 }
-.wrapper.invalid .button-wrapper .displayedoption {
+.invalid .displayedoption {
   -webkit-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   -moz-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   border-color: var(--wmcolor-border-error);
 }
-.wrapper .error-message {
+
+.error-message {
   display: block;
   font-style: italic;
   color: var(--wmcolor-text-error);
@@ -1129,7 +1129,7 @@
   top: 100%;
   left: 0;
 }
-.wrapper .error-message:not(:empty) {
+.error-message:not(:empty) {
   margin-top: 0.25rem;
 }
 
@@ -1141,10 +1141,6 @@
 }
 
 .rtl > .dropdown {
-  -ms-transform-origin: left top;
-  -webkit-transform-origin: left top;
-  -moz-transform-origin: left top;
-  transform-origin: left top;
   left: 0;
   right: auto;
 }
@@ -1159,4 +1155,20 @@
 .rtl > .displayedoption:before {
   right: auto;
   left: 0.5625rem;
+}
+
+@supports not (top: anchor(bottom)) {
+  .dropdown {
+    position: fixed !important;
+    z-index: 30;
+    inset: auto;
+    width: var(--button-width, auto) !important;
+    top: 0 !important;
+    left: var(--dropdown-left, 0) !important;
+    transform: translate(0, var(--dropdown-translate-y, 0)) !important;
+    max-height: var(--dropdown-max-height, none) !important;
+  }
+  .dropdown.hidden {
+    visibility: hidden;
+  }
 }