@descope-ui/descope-attachment 3.7.0 → 3.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-attachment",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "files": [
     "src",
     "stories"
@@ -18,13 +18,14 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.7.0",
-    "test-assets": "3.7.0",
-    "test-drivers": "3.7.0"
+    "e2e-utils": "3.7.2",
+    "test-assets": "3.7.2",
+    "test-drivers": "3.7.2"
   },
   "dependencies": {
-    "@descope-ui/common": "3.7.0",
-    "@descope-ui/theme-globals": "3.7.0"
+    "@descope-ui/theme-globals": "3.7.2",
+    "@descope-ui/common": "3.7.2",
+    "@descope-ui/descope-anchored": "3.7.2"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/AttachmentClass.js

@@ -7,6 +7,7 @@ import { createBaseClass } from '@descope-ui/common/base-classes';
 import {
   getComponentName,
   injectStyle,
+  observeAttributes,
 } from '@descope-ui/common/components-helpers';
 import { compose } from '@descope-ui/common/utils';
 
@@ -25,18 +26,18 @@ const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
 
 class RawAttachment extends createBaseClass({
   componentName,
-  baseSelector: ':host > .wrapper',
+  baseSelector: 'descope-anchored',
 }) {
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-      <div class="wrapper">
+      <descope-anchored>
         <slot></slot>
-        <div class="attachment-container">
+        <div slot="anchored" class="attachment-container">
           <slot name="attachment"></slot>
         </div>
-      </div>
+      </descope-anchored>
     `;
 
     this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
@@ -45,6 +46,10 @@ class RawAttachment extends createBaseClass({
     );
   }
 
+  get #attachment() {
+    return this.attachmentSlot?.assignedElements()[0];
+  }
+
   static get observedAttributes() {
     return [...(super.observedAttributes || []), 'position'];
   }
@@ -64,9 +69,8 @@ class RawAttachment extends createBaseClass({
       :host {
         display: inline-block;
       }
-      .wrapper {
-        position: relative;
-        display: inline-flex;
+      :host(.hidden) {
+        display: none;
       }
       .attachment-container {
         position: absolute;
@@ -77,24 +81,43 @@ class RawAttachment extends createBaseClass({
         align-items: center;
         container-type: inline-size;
       }
-      :host(.hidden) {
-        display: none;
-      }
-      `,
+`,
       this,
     );
 
     this.#handlePositionChange();
 
-    this.defaultSlot.addEventListener('slotchange', () => {
-      this.#setVisibility();
-      this.#syncDirection();
+    // When descope-anchored forwards st-host-direction from the anchor to this container,
+    // propagate it to the attachment elements.
+    const container = this.shadowRoot.querySelector('.attachment-container');
+    observeAttributes(container, () => this.#syncDirection(), {
+      includeAttrs: ['st-host-direction'],
     });
 
-    window.requestAnimationFrame(() => {
+    // Re-sync direction when new elements are slotted into the attachment slot.
+    this.attachmentSlot.addEventListener('slotchange', () =>
+      this.#syncDirection(),
+    );
+
+    this.defaultSlot.addEventListener('slotchange', () => {
       this.#setVisibility();
-      this.#syncDirection();
+      window.requestAnimationFrame(() => this.#syncAvailableSizeAttr());
     });
+
+    window.requestAnimationFrame(() => this.#setVisibility());
+  }
+
+  #syncAvailableSizeAttr() {
+    const anchor = this.defaultSlot?.assignedElements()?.[0];
+
+    const anchorRect = anchor?.getBoundingClientRect();
+    if (anchorRect) {
+      const availableWidth = anchorRect.width;
+      this.#attachment?.setAttribute(
+        'data-attachment-size',
+        Number(availableWidth),
+      );
+    }
   }
 
   #setVisibility() {
@@ -103,16 +126,14 @@ class RawAttachment extends createBaseClass({
   }
 
   #syncDirection() {
-    const child = this.defaultSlot?.assignedElements()?.[0];
-    if (!child) return;
-
-    const { direction } = window.getComputedStyle(child);
+    const direction = this.shadowRoot
+      .querySelector('.attachment-container')
+      ?.getAttribute('st-host-direction');
 
+    if (!direction) return;
     // currently we support direction sync only for web-components-ui
     // elements, which support st-host-direction attribute.
-    this.attachmentSlot?.assignedElements().forEach((el) => {
-      el.setAttribute('st-host-direction', direction);
-    });
+    this.#attachment?.setAttribute('st-host-direction', direction);
   }
 
   get offsetX() {

package/src/component/index.js

@@ -1,3 +1,4 @@
+import '@descope-ui/descope-anchored';
 import { componentName, AttachmentClass } from './AttachmentClass';
 
 customElements.define(componentName, AttachmentClass);

package/stories/descope-attachment.stories.js

@@ -4,12 +4,13 @@ import { base64svg } from 'test-assets';
 
 const SIZES = ['xs', 'sm', 'md', 'lg'];
 
-const button = (size, { direction, label } = {}) => `
+const button = (size, { direction, label, 'full-width': fullWidth } = {}) => `
   <descope-button
     variant="outline"
     mode="primary"
     size="${size}"
     ${direction ? ` st-host-direction="${direction}"` : ''}
+    ${fullWidth ? ' full-width="true"' : ''}
     ${label ? '' : ' square="true"'}>
       ${label || `<descope-icon src=${base64svg}></descope-icon>`}
     </descope-button>
@@ -42,6 +43,13 @@ const Template = ({
   'offset-y': offsetY,
 }) => `
   <div class="item">
+    ${attachment(
+      position,
+      button('md', { direction, label: buttonLabel, 'full-width': true }),
+      badgeLabel,
+      offsetX,
+      offsetY,
+    )}
     ${SIZES.map((size) =>
       attachment(
         position,