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

package/dist/cjs/gux-popover-list.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-2ed3685b.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
-const onAttributeChange = require('./on-attribute-change-37556263.js');
-const usage = require('./usage-1066593d.js');
-const popper = require('./popper-9a6aec9e.js');
+const usage = require('./usage-89e1afa4.js');
+const findElementById = require('./find-element-by-id-ecf0efa3.js');
 
-const guxPopoverListCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";
+const guxPopoverListCss = ".gux-popover-wrapper{position:absolute;top:0;left:0;z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0px;background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;width:var(--gse-ui-popover-anchor-width);height:var(--gse-ui-popover-anchor-width);background:var(--gse-ui-popover-backgroundColor)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -28,86 +28,108 @@ const GuxPopoverList = class {
     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.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 = popper.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 = floatingUi_dom_esm.autoUpdate(findElementById.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.findElementById(this.root, this.for);
+    // This is 13 because this makes the arrow look aligned
+    const arrowLen = 13;
+    if (this.popupElement) {
+      void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
+        placement: this.position,
+        middleware: [
+          floatingUi_dom_esm.offset(7),
+          floatingUi_dom_esm.flip(),
+          floatingUi_dom_esm.shift(),
+          floatingUi_dom_esm.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() {
     usage.trackComponent(this.root, { variant: this.position });
-    this.hiddenObserver = onAttributeChange.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 (index.h("div", { ref: (el) => (this.popupElement = el), class: "gux-popover-wrapper" }, index.h("div", { class: "gux-arrow", "data-popper-arrow": true }), this.displayDismissButton && (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), index.h("div", { class: "gux-popover-content" }, index.h("slot", null))));
+    return (index.h("div", { ref: (el) => (this.popupElement = el), class: {
+        'gux-hidden': !this.isOpen,
+        'gux-popover-wrapper': true
+      }, "data-placement": true }, index.h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), index.h("div", { class: "gux-popover-content" }, index.h("slot", null))));
   }
   get root() { return index.getElement(this); }
-  static get watchers() { return {
-    "hidden": ["hiddenHandler"]
-  }; }
 };
 __decorate([
   onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })

package/dist/cjs/gux-popup.cjs.entry.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-cad0a9cf.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-2ed3685b.js');
+const getClosestElement = require('./get-closest-element-ab4b2eee.js');
 
-const guxPopupCss = ".gux-target-container.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-popup-container{position:fixed;z-index:var(--gux-zindex-popup, 1);width:max-content;visibility:hidden}.gux-popup-container.gux-expanded{visibility:visible}";
+function hasParentElement(selector, baseElement = this) {
+  return Boolean(getClosestElement.getClosestElement(selector, baseElement));
+}
+
+const guxPopupCss = ".gux-target-container.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.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}";
 
 const GuxPopup = class {
   constructor(hostRef) {
@@ -26,7 +31,7 @@ const GuxPopup = class {
   updatePosition() {
     if (this.targetElementContainer && this.popupElementContainer) {
       const popupElementContainer = this.popupElementContainer;
-      const targetElementContainer = this.targetElementContainer;
+      const root = this.root;
       void floatingUi_dom_esm.computePosition(this.targetElementContainer, this.popupElementContainer, {
         strategy: 'fixed',
         placement: 'bottom-start',
@@ -35,21 +40,30 @@ const GuxPopup = class {
           floatingUi_dom_esm.flip(),
           floatingUi_dom_esm.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`
+                });
+              }
             }
           }),
-          floatingUi_dom_esm.shift()
+          floatingUi_dom_esm.shift(),
+          floatingUi_dom_esm.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');
       });
     }
   }
@@ -83,11 +97,12 @@ const GuxPopup = class {
     return (index.h("div", { class: {
         'gux-target-container': true,
         'gux-disabled': this.disabled
-      }, ref: (el) => (this.targetElementContainer = el) }, index.h("slot", { name: "target" }), index.h("div", { part: "gux-popup-container", class: {
+      }, ref: (el) => (this.targetElementContainer = el) }, index.h("slot", { name: "target" }), index.h("div", { class: {
         'gux-popup-container': true,
         'gux-expanded': this.expanded && !this.disabled
       }, ref: (el) => (this.popupElementContainer = el) }, index.h("slot", { name: "popup" }))));
   }
+  get root() { return index.getElement(this); }
   static get watchers() { return {
     "expanded": ["onExpandedChange"]
   }; }