@descope-ui/common 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.8](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.7...@descope-ui/common-0.0.8) (2025-03-05)
+
+## [0.0.7](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.6...@descope-ui/common-0.0.7) (2025-03-03)
+
 ## [0.0.6](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.5...@descope-ui/common-0.0.6) (2025-03-03)
 
 ## [0.0.5](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.4...@descope-ui/common-0.0.5) (2025-02-26)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsMixins/mixins/draggableMixin.js

@@ -1,25 +1,10 @@
+import { injectStyle } from '../../componentsHelpers'
 export const draggableMixin = (superclass) =>
   class DraggableMixinClass extends superclass {
-    #styleEle = null;
-
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || [];
-      return [...superAttrs, 'draggable'];
-    }
-
     constructor() {
       super();
 
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `* { cursor: inherit!important }`;
-    }
-
-    #handleDraggableStyle(isDraggable) {
-      if (isDraggable) {
-        this.shadowRoot.appendChild(this.#styleEle);
-      } else {
-        this.#styleEle.remove();
-      }
+      injectStyle(`:host([draggable="true"]) * { cursor: inherit!important }`, this);
     }
 
     get isDraggable() {
@@ -37,9 +22,8 @@ export const draggableMixin = (superclass) =>
           this.baseElement.setAttribute('tabindex', '-1');
 
           const onComplete = () => {
-            prevTabIndex
-              ? this.baseElement.setAttribute('tabindex', prevTabIndex)
-              : this.baseElement.removeAttribute('tabindex');
+            if (prevTabIndex) this.baseElement.setAttribute('tabindex', prevTabIndex)
+            else this.baseElement.removeAttribute('tabindex');
 
             e.target.removeEventListener('mouseup', onComplete);
             e.target.removeEventListener('dragend', onComplete);
@@ -52,11 +36,4 @@ export const draggableMixin = (superclass) =>
 
       super.init?.();
     }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-      if (attrName === 'draggable') {
-        this.#handleDraggableStyle(newValue === 'true');
-      }
-    }
   };

package/src/sbHelpers.js

@@ -1,13 +1,19 @@
-export const withForm = (children) => {
+export const withForm = (story) => {
+  setTimeout(() => {
+    const form = document.querySelector('form');
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+    });
+  });
   return `
     <style nonce="${window.DESCOPE_NONCE}">
-      .form-actions {
-        margin-top: 6em
+      .action-wrapper {
+        margin-top: 6em;
       }
     </style>
-    <form onsubmit="event.preventDefault()">
-      <div>${children}</div>
-      <div class="form-actions">
+    <form>
+      <div>${story()}</div>
+      <div class="action-wrapper">
         <button type="submit" data-testid="submit-button">Submit</button>
       </div>
     </form>