genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -8,11 +8,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { createPopper } from '@popperjs/core';
 import { h } from '@stencil/core';
+import { autoUpdate, computePosition, arrow, flip, offset, shift } from '@floating-ui/dom';
 import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { onHiddenChange } from '../../../utils/dom/on-attribute-change';
 import { trackComponent } from '@utils/tracking/usage';
+import { findElementById } from '@utils/dom/find-element-by-id';
 /**
  * @slot - popover content
  */
@@ -22,87 +22,112 @@ export class GuxPopoverList {
     this.position = 'bottom';
     this.displayDismissButton = undefined;
     this.closeOnClickOutside = false;
-    this.hidden = true;
-  }
-  hiddenHandler(hidden) {
-    if (!hidden && !this.popperInstance) {
-      this.runPopper();
-    }
-    else if (!hidden && this.popperInstance) {
-      this.popperInstance.forceUpdate();
-    }
+    this.isOpen = false;
   }
   checkForClickOutside(event) {
     const clickPath = event.composedPath();
-    const forElement = document.getElementById(this.for);
+    const forElement = findElementById(this.root, this.for);
     const clickedForElement = clickPath.includes(forElement);
     if ((this.closeOnClickOutside || !this.displayDismissButton) &&
-      !this.hidden &&
+      this.isOpen &&
       !clickedForElement) {
       this.dismiss();
     }
   }
-  runPopper() {
-    const forElement = document.getElementById(this.for);
-    if (!forElement) {
-      console.error(`gux-popover-list: invalid "for" attribute. No element in page with the id "${this.for}"`);
-    }
-    else if (this.popupElement) {
-      this.popperInstance = createPopper(forElement, this.popupElement, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 7]
-            }
-          },
-          {
-            name: 'arrow',
-            options: {
-              padding: 16
-            }
-          }
-        ],
-        placement: this.position
+  runUpdatePosition() {
+    if (this.root.isConnected) {
+      this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+        ancestorScroll: true,
+        elementResize: true,
+        animationFrame: true,
+        ancestorResize: true
       });
     }
+    else {
+      this.disconnectedCallback();
+    }
   }
-  destroyPopper() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+  updatePosition() {
+    const forElement = findElementById(this.root, this.for);
+    // This is 13 because this makes the arrow look aligned
+    const arrowLen = 13;
+    if (this.popupElement) {
+      void computePosition(forElement, this.popupElement, {
+        placement: this.position,
+        middleware: [
+          offset(7),
+          flip(),
+          shift(),
+          arrow({
+            element: this.arrowElement,
+            padding: 16
+          })
+        ]
+      }).then(({ x, y, middlewareData, placement }) => {
+        Object.assign(this.popupElement.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+        const side = placement.split('-')[0];
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right'
+        }[side];
+        if (middlewareData.arrow) {
+          const { x, y } = middlewareData.arrow;
+          this.popupElement.setAttribute('data-placement', placement);
+          Object.assign(this.arrowElement.style, {
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: `${-arrowLen / 2}px`,
+            transform: 'rotate(45deg)'
+          });
+        }
+      });
     }
   }
   dismiss() {
     const dismissEvent = this.guxdismiss.emit();
     if (!dismissEvent.defaultPrevented) {
-      this.root.setAttribute('hidden', '');
+      this.isOpen = false;
     }
   }
   connectedCallback() {
     trackComponent(this.root, { variant: this.position });
-    this.hiddenObserver = onHiddenChange(this.root, (hidden) => {
-      this.hidden = hidden;
-    });
-    this.hidden = this.root.hidden;
   }
   componentDidLoad() {
-    this.runPopper();
+    if (this.isOpen) {
+      this.runUpdatePosition();
+    }
+  }
+  componentDidUpdate() {
+    if (this.isOpen) {
+      this.runUpdatePosition();
+    }
+    else if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   disconnectedCallback() {
-    this.destroyPopper();
-    if (this.hiddenObserver) {
-      this.hiddenObserver.disconnect();
+    if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
     }
   }
   render() {
-    return (h("div", { ref: (el) => (this.popupElement = el), class: "gux-popover-wrapper" }, h("div", { class: "gux-arrow", "data-popper-arrow": true }), this.displayDismissButton && (h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), h("div", { class: "gux-popover-content" }, h("slot", null))));
+    return (h("div", { ref: (el) => (this.popupElement = el), class: {
+        'gux-hidden': !this.isOpen,
+        'gux-popover-wrapper': true
+      }, "data-placement": true }, h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), h("div", { class: "gux-popover-content" }, h("slot", null))));
   }
   static get is() { return "gux-popover-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-popover-list.less"]
+      "$": ["gux-popover-list.scss"]
     };
   }
   static get styleUrls() {
@@ -133,12 +158,12 @@ export class GuxPopoverList {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopperPosition",
+          "original": "Placement",
           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
-            "PopperPosition": {
+            "Placement": {
               "location": "import",
-              "path": "./gux-popover-list.types"
+              "path": "@floating-ui/dom"
             }
           }
         },
@@ -146,7 +171,7 @@ export class GuxPopoverList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicate position of popover element arrow (follow popper js position attribute api)"
+          "text": "Indicate position of popover element arrow (follow floating ui placement attribute api)"
         },
         "attribute": "position",
         "reflect": false,
@@ -186,14 +211,27 @@ export class GuxPopoverList {
         "attribute": "close-on-click-outside",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "isOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls hiding and showing the popover"
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "hidden": {}
-    };
-  }
   static get events() {
     return [{
         "method": "guxdismiss",
@@ -213,12 +251,6 @@ export class GuxPopoverList {
       }];
   }
   static get elementRef() { return "root"; }
-  static get watchers() {
-    return [{
-        "propName": "hidden",
-        "methodName": "hiddenHandler"
-      }];
-  }
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })

package/dist/collection/components/stable/gux-popup/gux-popup.css

@@ -6,10 +6,21 @@
 
 .gux-popup-container {
   position: fixed;
+  background-color: white;
   z-index: var(--gux-zindex-popup, 1);
   width: max-content;
   visibility: hidden;
 }
 .gux-popup-container.gux-expanded {
   visibility: visible;
+}
+
+.gux-sr-only-clip:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }

package/dist/collection/components/stable/gux-popup/gux-popup.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset, size, shift } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, offset, size, shift, hide } from '@floating-ui/dom';
+import { hasParentElement } from '@utils/dom/has-parent-element';
 /**
  * @slot target - Required slot for target
  * @slot popup - Required slot for popup
@@ -20,7 +21,7 @@ export class GuxPopup {
   updatePosition() {
     if (this.targetElementContainer && this.popupElementContainer) {
       const popupElementContainer = this.popupElementContainer;
-      const targetElementContainer = this.targetElementContainer;
+      const root = this.root;
       void computePosition(this.targetElementContainer, this.popupElementContainer, {
         strategy: 'fixed',
         placement: 'bottom-start',
@@ -29,21 +30,30 @@ export class GuxPopup {
           flip(),
           size({
             apply({ rects }) {
-              Object.assign(popupElementContainer.style, {
-                minWidth: `${rects.reference.width}px`
-              });
-              Object.assign(targetElementContainer.style, {
-                width: `${rects.reference.width}px`
-              });
+              if (hasParentElement('gux-action-button, gux-button-multi', root)) {
+                Object.assign(popupElementContainer.style, {
+                  minWidth: `${rects.reference.width}px`
+                });
+              }
+              else {
+                Object.assign(popupElementContainer.style, {
+                  width: `${rects.reference.width}px`
+                });
+              }
             }
           }),
-          shift()
+          shift(),
+          hide()
         ]
-      }).then(({ x, y }) => {
+      }).then(({ x, y, middlewareData }) => {
+        const { referenceHidden } = middlewareData.hide;
         Object.assign(this.popupElementContainer.style, {
           left: `${x}px`,
           top: `${y}px`
         });
+        referenceHidden
+          ? this.popupElementContainer.classList.add('gux-sr-only-clip')
+          : this.popupElementContainer.classList.remove('gux-sr-only-clip');
       });
     }
   }
@@ -77,7 +87,7 @@ export class GuxPopup {
     return (h("div", { class: {
         'gux-target-container': true,
         'gux-disabled': this.disabled
-      }, ref: (el) => (this.targetElementContainer = el) }, h("slot", { name: "target" }), h("div", { part: "gux-popup-container", class: {
+      }, ref: (el) => (this.targetElementContainer = el) }, h("slot", { name: "target" }), h("div", { class: {
         'gux-popup-container': true,
         'gux-expanded': this.expanded && !this.disabled
       }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { name: "popup" }))));
@@ -167,6 +177,7 @@ export class GuxPopup {
         }
       }];
   }
+  static get elementRef() { return "root"; }
   static get watchers() {
     return [{
         "propName": "expanded",