chore(components): implemented PR feedback

swisspost · Jan 28, 2025 · ee3b51b · ee3b51b
1 parent 94ee15f
commit ee3b51b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
@@ -42,16 +42,15 @@
   overflow: visible;
 
   // Safe space overlay styles
-  &[data-safe-space]::after {
+  &[safe-space]::after {
     content: '';
     position: fixed;
     inset: 0;
-    z-index: calc(#{commons.$zindex-popover} - 1);
+    z-index: -1;
     pointer-events: auto;
-    background: transparent;
   }
 
-  &[data-safe-space='triangle']::after {
+  &[safe-space='triangle']::after {
     clip-path: polygon(
       var(--safe-space-cursor-x, 0) var(--safe-space-cursor-y, 0),
       var(--safe-space-popover-x-start, var(--safe-space-popover-x, 0))
@@ -61,7 +60,7 @@
     );
   }
 
-  &[data-safe-space='trapezoid']::after {
+  &[safe-space='trapezoid']::after {
     clip-path: polygon(
       var(--safe-space-trigger-x-start, var(--safe-space-trigger-x, 0))
         var(--safe-space-trigger-y, var(--safe-space-trigger-y-start, 0)),

diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx b/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx
@@ -65,9 +65,13 @@ export class PostPopovercontainer {
   /**
    * Enables a safespace through which the cursor can be moved without the popover being disabled
    */
-  @Prop() readonly safeSpace?: 'triangle' | 'trapezoid';
+  @Prop({ reflect: true }) readonly safeSpace?: 'triangle' | 'trapezoid';
 
-  // New method for safe space
+  /**
+   * Updates cursor position for safe space feature when popover is open.
+   * Sets CSS custom properties for dynamic styling of safe area.
+   * @param event MouseEvent with cursor position
+   */
   private mouseTrackingHandler = (event: MouseEvent) => {
     if (!this.safeSpace || !this.host.matches(':where(:popover-open, .popover-open)')) return;
 
@@ -78,14 +82,12 @@ export class PostPopovercontainer {
   componentDidLoad() {
     this.host.setAttribute('popover', '');
     this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
-    window.addEventListener('mousemove', this.mouseTrackingHandler);
   }
 
   disconnectedCallback() {
     if (typeof this.clearAutoUpdate === 'function') {
       this.clearAutoUpdate();
     }
-    window.removeEventListener('mousemove', this.mouseTrackingHandler);
   }
 
   /**
@@ -139,8 +141,10 @@ export class PostPopovercontainer {
     this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
     const isOpen = e.newState === 'open';
     if (isOpen) {
+      window.addEventListener('mousemove', this.mouseTrackingHandler);
       this.startAutoupdates();
     } else {
+      window.removeEventListener('mousemove', this.mouseTrackingHandler);
       if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();
     }
     this.postToggle.emit(isOpen);
@@ -305,7 +309,7 @@ export class PostPopovercontainer {
 
   render() {
     return (
-      <Host data-version={version} data-safe-space={this.safeSpace}>
+      <Host data-version={version}>
         {this.arrow && (
           <span
             class="arrow"