@descope/web-components-ui 3.1.5 → 3.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -51,10 +51,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.1.5",
-    "test-drivers": "3.1.5",
-    "webpack-extract-font-loader": "3.1.5",
-    "webpack-replace-plugin": "3.1.5"
+    "rollup-replace-plugin": "3.1.6",
+    "webpack-extract-font-loader": "3.1.6",
+    "webpack-replace-plugin": "3.1.6",
+    "test-drivers": "3.1.6"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -78,32 +78,32 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/descope-address-field": "3.1.5",
-    "@descope-ui/descope-apps-list": "3.1.5",
-    "@descope-ui/descope-autocomplete-field": "3.1.5",
-    "@descope-ui/descope-avatar": "3.1.5",
-    "@descope-ui/descope-country-subdivision-city-field": "3.1.5",
-    "@descope-ui/descope-badge": "3.1.5",
-    "@descope-ui/descope-button": "3.1.5",
-    "@descope-ui/common": "3.1.5",
-    "@descope-ui/descope-collapsible-container": "3.1.5",
-    "@descope-ui/descope-combo-box": "3.1.5",
-    "@descope-ui/descope-enriched-text": "3.1.5",
-    "@descope-ui/descope-icon": "3.1.5",
-    "@descope-ui/descope-image": "3.1.5",
-    "@descope-ui/descope-link": "3.1.5",
-    "@descope-ui/descope-list": "3.1.5",
-    "@descope-ui/descope-outbound-app-button": "3.1.5",
-    "@descope-ui/descope-outbound-apps": "3.1.5",
-    "@descope-ui/descope-ponyhot": "3.1.5",
-    "@descope-ui/descope-recovery-codes": "3.1.5",
-    "@descope-ui/descope-text": "3.1.5",
-    "@descope-ui/descope-timer": "3.1.5",
-    "@descope-ui/descope-timer-button": "3.1.5",
-    "@descope-ui/descope-password-strength": "3.1.5",
-    "@descope-ui/descope-tooltip": "3.1.5",
-    "@descope-ui/descope-trusted-devices": "3.1.5",
-    "@descope-ui/descope-list-item": "3.1.5"
+    "@descope-ui/common": "3.1.6",
+    "@descope-ui/descope-address-field": "3.1.6",
+    "@descope-ui/descope-apps-list": "3.1.6",
+    "@descope-ui/descope-autocomplete-field": "3.1.6",
+    "@descope-ui/descope-country-subdivision-city-field": "3.1.6",
+    "@descope-ui/descope-avatar": "3.1.6",
+    "@descope-ui/descope-button": "3.1.6",
+    "@descope-ui/descope-collapsible-container": "3.1.6",
+    "@descope-ui/descope-combo-box": "3.1.6",
+    "@descope-ui/descope-enriched-text": "3.1.6",
+    "@descope-ui/descope-icon": "3.1.6",
+    "@descope-ui/descope-image": "3.1.6",
+    "@descope-ui/descope-link": "3.1.6",
+    "@descope-ui/descope-list": "3.1.6",
+    "@descope-ui/descope-list-item": "3.1.6",
+    "@descope-ui/descope-outbound-app-button": "3.1.6",
+    "@descope-ui/descope-outbound-apps": "3.1.6",
+    "@descope-ui/descope-password-strength": "3.1.6",
+    "@descope-ui/descope-ponyhot": "3.1.6",
+    "@descope-ui/descope-badge": "3.1.6",
+    "@descope-ui/descope-timer": "3.1.6",
+    "@descope-ui/descope-timer-button": "3.1.6",
+    "@descope-ui/descope-tooltip": "3.1.6",
+    "@descope-ui/descope-trusted-devices": "3.1.6",
+    "@descope-ui/descope-recovery-codes": "3.1.6",
+    "@descope-ui/descope-text": "3.1.6"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-code-snippet/CodeSnippetClass.js

@@ -5,19 +5,23 @@ import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { decode, tpl } from './helpers';
+import copyIconSrc from './copy-icon.svg';
+import checkIconSrc from './check-icon.svg';
 
 export const componentName = getComponentName('code-snippet');
 
-class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host > code' }) {
+class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host > .wrapper' }) {
   static get observedAttributes() {
-    return ['lang', 'inline'];
+    return ['lang', 'inline', 'copy-button'];
   }
 
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <code class="hljs"></code>
+      <div class="wrapper">
+        <code class="hljs"></code>
+      </div>
     `;
 
     injectStyle(
@@ -26,6 +30,10 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
         display: inline-block;
         width: 100%;
       }
+      .wrapper {
+        position: relative;
+        width: 100%;
+      }
       code {
         display: block;
         width: 100%;
@@ -36,6 +44,38 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
       pre {
         margin: 0;
       }
+      .copy-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-style: solid;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 150ms ease, background 150ms ease;
+      }
+      .wrapper:hover .copy-btn,
+      .copy-btn:focus-visible {
+        opacity: 1;
+      }
+      .copy-btn descope-icon {
+        width: 16px;
+        height: 16px;
+        pointer-events: none;
+        flex-shrink: 0;
+      }
+      .copy-btn .check-icon {
+        display: none;
+      }
+      .copy-btn.copied .check-icon {
+        display: block;
+      }
+      .copy-btn.copied descope-icon:not(.check-icon) {
+        display: none;
+      }
       `,
       this
     );
@@ -47,11 +87,15 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
     this.lang = this.getAttribute('lang');
     this.isInline = this.getAttribute('inline') === 'true';
 
+    if (this.getAttribute('copy-button') === 'true') {
+      this.#initCopyButton();
+    }
+
     observeChildren(this, this.#renderSnippet.bind(this));
   }
 
   get contentNode() {
-    return this.shadowRoot.querySelector(this.baseSelector);
+    return this.shadowRoot.querySelector('code');
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -66,10 +110,58 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
         this.lang = newValue;
       }
 
+      if (attrName === 'copy-button') {
+        if (newValue === 'true') {
+          this.#initCopyButton();
+        } else {
+          this.#destroyCopyButton();
+        }
+      }
+
       this.#renderSnippet();
     }
   }
 
+  // ── Copy button ────────────────────────────────────────────────────────────
+
+  #initCopyButton() {
+    if (this.shadowRoot.querySelector('.copy-btn')) return;
+
+    const btn = document.createElement('button');
+    btn.className = 'copy-btn';
+    btn.type = 'button';
+    btn.setAttribute('aria-label', 'Copy code');
+    const copyIcon = document.createElement('descope-icon');
+    copyIcon.setAttribute('src', copyIconSrc);
+
+    const checkIcon = document.createElement('descope-icon');
+    checkIcon.setAttribute('src', checkIconSrc);
+    checkIcon.classList.add('check-icon');
+
+    btn.appendChild(copyIcon);
+    btn.appendChild(checkIcon);
+    btn.addEventListener('click', () => this.#handleCopyClick());
+
+    this.shadowRoot.querySelector('.wrapper').appendChild(btn);
+  }
+
+  #destroyCopyButton() {
+    this.shadowRoot.querySelector('.copy-btn')?.remove();
+  }
+
+  #handleCopyClick() {
+    const btn = this.shadowRoot.querySelector('.copy-btn');
+    navigator.clipboard
+      .writeText(decode(this.textContent))
+      .then(() => {
+        btn.classList.add('copied');
+        setTimeout(() => btn.classList.remove('copied'), 2000);
+      })
+      .catch(() => {});
+  }
+
+  // ── Snippet rendering ──────────────────────────────────────────────────────
+
   #renderSnippet() {
     const sanitized = decode(this.textContent);
     const language = this.lang;
@@ -85,6 +177,8 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
   }
 }
 
+const copyBtn = { selector: () => '.copy-btn' };
+
 const {
   root,
   docTag,
@@ -236,6 +330,16 @@ export const CodeSnippetClass = compose(
       propertyTextColor: { ...property, property: 'color' },
       punctuationTextColor: { ...punctuation, property: 'color' },
       tagTextColor: { ...tag, property: 'color' },
+      copyButtonSize: [
+        { ...copyBtn, property: 'width' },
+        { ...copyBtn, property: 'height' },
+      ],
+      copyButtonBorderRadius: { ...copyBtn, property: 'border-radius' },
+      copyButtonBorderWidth: { ...copyBtn, property: 'border-width' },
+      copyButtonBorderColor: { ...copyBtn, property: 'border-color' },
+      copyButtonBgColor: { ...copyBtn, property: 'background-color' },
+      copyButtonHoverBgColor: { selector: () => '.copy-btn:hover', property: 'background-color' },
+      copyButtonColor: { ...copyBtn, property: 'color' },
     },
   }),
   draggableMixin,

package/src/components/descope-code-snippet/check-icon.svg

@@ -0,0 +1,3 @@
+<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>

package/src/components/descope-code-snippet/copy-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+</svg>

package/src/components/descope-code-snippet/index.js

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

package/src/components/descope-grid/GridClass.js

@@ -32,6 +32,18 @@ const GridMixin = (superclass) =>
       };
 
       this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
+
+      // Stop wheel events from propagating to vaadin-grid when scrolling
+      // inside code snippets, so touchpad horizontal scroll works
+      this.baseElement.addEventListener(
+        'wheel',
+        (e) => {
+          if (e.target.closest('descope-code-snippet')) {
+            e.stopPropagation();
+          }
+        },
+        true
+      );
     }
 
     // this renders the details panel content
@@ -342,6 +354,14 @@ export const GridClass = compose(
         grid-column: 1 / -1;
         order: 2;
       }
+      vaadin-grid details.row-details__item {
+        padding: 0;
+      }
+      vaadin-grid details.row-details__item > summary.row-details__label {
+        cursor: pointer;
+        list-style: revert;
+        display: revert;
+      }
       vaadin-grid .row-details__value.text {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -349,8 +369,7 @@ export const GridClass = compose(
       }
       vaadin-grid .row-details__value.code {
         margin-top: 5px;
-        max-height: 120px;
-        overflow: scroll;
+        overflow-x: auto;
         font-size: 0.85em;
       }
       vaadin-grid vaadin-icon.toggle-details-button {

package/src/components/descope-grid/helpers.js

@@ -29,7 +29,7 @@ export const getValueType = (value) => {
 };
 
 export const renderCodeSnippet = (value, lang) =>
-  `<descope-code-snippet lang="${lang}" class="row-details__value code">${escapeXML(value)}</descope-code-snippet>`;
+  `<descope-code-snippet copy-button="true" lang="${lang}" class="row-details__value code">${escapeXML(value)}</descope-code-snippet>`;
 
 export const renderText = (text) =>
   `<div class="row-details__value text" title="${text}">${escapeXML(text)}</div>`;
@@ -57,16 +57,31 @@ const defaultRowDetailsValueRenderer = (value) => {
   return renderText(value);
 };
 
+const isCodeSnippetValue = (value) => {
+  const type = getValueType(value);
+  return (
+    type === 'object' ||
+    type === 'xml' ||
+    (type === 'array' && value.some((v) => getValueType(v) === 'object'))
+  );
+};
+
 export const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
   <div class="row-details">
   ${Object.entries(item)
-    .map(
-      ([key, value]) =>
-        `<div class="row-details__item" >
-          <div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
+    .map(([key, value]) => {
+      const label = itemLabelsMapping[key] || toTitle(key);
+      if (isCodeSnippetValue(value)) {
+        return `<details class="row-details__item">
+          <summary class="row-details__label">${label}</summary>
+          ${defaultRowDetailsValueRenderer(value)}
+        </details>`;
+      }
+      return `<div class="row-details__item">
+          <div class="row-details__label">${label}</div>
           ${defaultRowDetailsValueRenderer(value)}
-        </div>`
-    )
+        </div>`;
+    })
     .join('\n')}
 </div>
   `;

package/src/theme/components/codeSnippet.js

@@ -39,6 +39,13 @@ const dark = {
 };
 
 const CodeSnippet = {
+  [vars.copyButtonSize]: '32px',
+  [vars.copyButtonBorderRadius]: globalRefs.radius.xs,
+  [vars.copyButtonBorderWidth]: globalRefs.border.xs,
+  [vars.copyButtonBorderColor]: globalRefs.colors.surface.light,
+  [vars.copyButtonBgColor]: globalRefs.colors.surface.highlight,
+  [vars.copyButtonHoverBgColor]: globalRefs.colors.surface.light,
+  [vars.copyButtonColor]: globalRefs.colors.surface.contrast,
   [vars.rootBgColor]: globalRefs.colors.surface.main,
   [vars.rootTextColor]: globalRefs.colors.surface.contrast,
   [vars.docTagTextColor]: light.color2,