@watermarkinsights/ripple 5.20.0-alpha.11 → 5.20.0-alpha.13

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

@@ -68,7 +68,7 @@ export class Select {
         }
     }
     handleToggle(ev) {
-        ev.newState === "open" ? this.open() : this.close();
+        ev.newState === "open" ? this.onOpen() : this.onClose();
     }
     dropdownPosition() {
         // polyfill for opening up or down + positioning according to screen
@@ -108,7 +108,7 @@ export class Select {
         }
         this.isHidden = false;
     }
-    open() {
+    onOpen() {
         if (!this.isExpanded && !this.isDisabled) {
             // polyfill for browsers without anchor() support (FF)
             if (!this.hasAnchor) {
@@ -119,18 +119,31 @@ export class Select {
                 const hasSpaceBelow = this.dropdownEl.offsetHeight <= document.documentElement.clientHeight - anchorRect.bottom;
                 const hasSpaceAbove = this.dropdownEl.offsetHeight <= anchorRect.top;
                 this.openUp = !hasSpaceBelow && hasSpaceAbove;
+                if (!hasSpaceBelow && !hasSpaceAbove) {
+                    // dropdown will open downwards but doesn't have enough space
+                    // it needs to be absolutely positioned + html has to have overflow-y auto
+                    // (the default, but could have been overriden)
+                    // in order to ensure the options can be scrolled to
+                    // (would already be possible if the page has content below. this is in case select was at bottom of page)
+                    this.initialHtmlOverflowY = document.documentElement.style.overflowY;
+                    document.documentElement.style.overflowY = "auto";
+                    this.dropdownEl.style.position = "absolute";
+                }
                 this.isExpanded = true;
             });
             setTimeout(() => {
                 // focusing doesn't work when within requestAnimationFrame
                 this.optionListEl.handleInitialFocus(this.elToFocus);
                 this.elToFocus = undefined;
-            }, 50);
+            }, 100);
         }
     }
-    close() {
+    onClose() {
         if (this.isExpanded) {
             this.optionListEl.unfocusAll();
+            // see onOpen
+            document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+            this.dropdownEl.style.position = "fixed";
             window.setTimeout(() => {
                 if (!this.hasAnchor) {
                     this.isHidden = true;
@@ -301,14 +314,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '4ec7d687b40ffcef80fbce21e6880680c72d03a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c400196d862a763af6f4f5d4663a8f3e805a9ddd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1c7df9eee5ebc62a12bd36e97918e144c7e4dc72', class: "label-wrapper" }, h("label", { key: '752c9ce6491c959afda2105a5e2c6063ce4ee52e', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '3fcd03885fbfcc151122eeaa6b2ea5d66bca8087', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c2d9380b84acfe546c93be0aeabab2b26f0e8679', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'bec7ca8c61ecfab6a3ffddda763afca1a33feb05', class: "label-wrapper" }, h("label", { key: '15da16525dcd6ac3920fc04c7cb1bef5a5538c4b', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: 'c0b4660ed16129c1a3aaf5252aa5e7c71eb42f20', class: "required" }, h("span", { key: '8c4a41df3473c88021f8d73f09fdfd33e3ad1c48', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '303e6f18bef3d30b32508c6192ac363bbc8fb80c', "aria-hidden": "true" }, "*")))), h("div", { key: '7acc269a0e60042549cbc3fc6879b3e471f1b016', class: "button-wrapper" }, h("button", { key: 'd1e7751c22951130f92ca6fdc2c9f253e4e63b5b', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '6236a027968e849c873e1d09bf89910ca627b760', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '3af139e809e636873cd53dfb53141c0c606e4963', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '5894b37ef490101b0ba38547745f450c0521a8ea', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '6bce5cbddd6160c0d2eeb8de27ed7f0d46fffb38', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'a0d9da60b818f8a576f6fcaab422b9ec31d42fd4', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc70db1f203700702cf3586412eef64ab108b86f',
+        this.requiredField && (h("span", { key: 'a9beeb0b4ef38862af732f158021855bd78cef42', class: "required" }, h("span", { key: '9ff60a2e20dc60549318f867d4b7a6c10d541f8b', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'e2cf635fb00b871d990629a1607221ea7c2e1f88', "aria-hidden": "true" }, "*")))), h("div", { key: 'c5605786b12c33cddb06cedff0c994478d4acff4', class: "button-wrapper" }, h("button", { key: 'd1712c1d8069766f0228ffd85247685f3bafa540', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '38fd12103e1da0037d9b3c845cfd1cd6e4a64a32', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'd5708f71ce4610455d0eecda4d3e5f1e39ff625b', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '0c4c7d045c687672248ca9346a9d6d51ef0d7989', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'cc1ba9b5123efd0e29004d9837dc9856d229416b', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'd97730b3fd77457642d81704fde92929d818f842', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dd8ee12a983657908640c38c981a76735b0e211e',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '09db81570f9990ec4cf87f16b52320ec82701a04', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '9706c17c9e999007f196e631e75684dbde28964e', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -316,7 +329,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '420515d805ad1039ed3b72bd2968a0a29c27a5fc' }))), h("div", { key: '3bda216f90f3d6b10b92034996d3bdc90a4ffd60', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '032fb47f7c64c04d518740dbcb31efcd761baed6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'd828427ecec9469efbf4b18343b966800c8b54dd' }))), h("div", { key: '6cecc516bbd4b0be21604d76bf4ffc5b073f1b45', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '3579651121bb56282663827993aaf11de1d09d32', 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/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -54,11 +54,14 @@ export class TabList {
     componentDidLoad() {
         const selectedTab = this.selectedTab || this.tabItems[0].tabId;
         this.setSelected(selectedTab);
-        this.handleTabFocused(this.selectedTabItem);
         this.updateArrowVisibility();
         this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerState);
         const resizeObserver = new ResizeObserver(() => this.debouncedUpdateContainerState());
         resizeObserver.observe(this.el);
+        requestAnimationFrame(() => {
+            // Wait for layout to complete before measuring and scrolling initial tab into view
+            this.handleTabFocused(this.selectedTabItem);
+        });
     }
     tabItemLoaded(ev) {
         this.setAriaOnPanelAndTab(ev.target);
@@ -254,15 +257,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: '3ca0e37138d368c09ec188b8023ec1bc9cda9428' }, h("div", { key: '3c7ead3f44a7c03980eefde2a36e64d7c62da7b9', class: "component-wrapper" }, h("wm-button", { key: '979ea44451d40012037b169201d9b7f84f432e2f', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: '5818027d2cb7470679c21ac94fef8bae53395054' }, h("div", { key: '02a4a7678765a6cbf269c01d4e2f2f8afcde8cb1', class: "component-wrapper" }, h("wm-button", { key: '267436b0e7f4dae88da12517527ca0dbf324d0b0', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '993e39f11a24760262c017d40ca1691cb8e8a093', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '0e6176cd6fc3c360016dd98cc6c1d3443bead0d3' })), h("wm-button", { key: '40b09e7e81013467eff14d8fe5855ded630888d7', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '4983447234c47552d424d4572ae794503eb536fd', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '40d3c063e98bf2fbec8d9e92ecc8ada156cea2ea' })), h("wm-button", { key: 'bc45390e49d2246cd16b24a1159720308a3fe24f', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'bc41b920586e762674761ba973ed91a041d2022e', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'c98334986ffe5ffc47d0b48d141c2d985772b3e5', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-875a52fe.js → app-globals-f4e5a389.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.20.0-alpha.11";
+const version = "5.20.0-alpha.13";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-875a52fe.js';
+import { g as globalScripts } from './app-globals-f4e5a389.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-875a52fe.js';
+import { g as globalScripts } from './app-globals-f4e5a389.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com