@ebrains/react 0.9.3-beta → 1.1.0

package/eds-toast-manager.entry.esm.js

@@ -1,9 +1,40 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { t as toast } from './toastManager-d9eee791.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
+class ToastManager {
+  constructor() {
+    this.toastManagerElement = null;
+  }
+  /**
+   * Initialize the ToastManager with a reference to the `eds-toast-manager` component.
+   */
+  init(toastManagerElement) {
+    this.toastManagerElement = toastManagerElement;
+  }
+  /**
+   * Display a toast.
+   * @param message - The message to display.
+   * @param intent - The type of the toast ('success', 'error', 'warning', 'default').
+   */
+  show(message, intent = 'default') {
+    if (!this.toastManagerElement) {
+      // eslint-disable-next-line
+      console.error('ToastManager is not initialized. Ensure <eds-toast-manager> is rendered.');
+      return;
+    }
+    const event = new CustomEvent('show-toast', {
+      detail: {
+        message,
+        intent
+      }
+    });
+    this.toastManagerElement.dispatchEvent(event);
+  }
+}
+// Export a singleton instance
+const toast = new ToastManager();
 const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
 const EdsToastManagerStyle0 = edsToastManagerCss;
 const EdsToastManager = class {
@@ -43,7 +74,7 @@ const EdsToastManager = class {
   }
   render() {
     return h("div", {
-      key: 'cc2aa94e01507dc8c27e82dfa550af5da6eaba3e',
+      key: 'b86b71e71fa88b56acab6d7060e7b05beec344e1',
       class: "toast-container"
     }, this.toasts.map(t => h("div", {
       key: t.id

package/eds-toast.entry.esm.js

@@ -30,7 +30,7 @@ const EdsToast = class {
     };
     this.message = undefined;
     this.intent = 'default';
-    this.duration = 5000;
+    this.duration = undefined;
     this.visible = true;
   }
   componentDidLoad() {
@@ -53,8 +53,9 @@ const EdsToast = class {
     btnElement.dispatchEvent(event);
   }
   connectedCallback() {
-    // Auto-dismiss the toast after the specified duration
-    this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+    if (this.duration && this.duration > 0) {
+      this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+    }
   }
   disconnectedCallback() {
     // Clear the timeout when the component is removed

package/eds-tooltip.entry.esm.js

@@ -1,119 +1,35 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.bottom-full{bottom:100%}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}";
 const EdsTooltipStyle0 = edsTooltipCss;
 const EdsTooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.content = undefined;
-    this.position = 'above';
-    this.isVisible = false;
-    this.isPositioned = false;
-    this.tooltipStyle = {
-      top: '0px',
-      left: '0px',
-      transform: ''
-    };
   }
-  /**
-   * Show the tooltip and update its position.
-   */
-  async showTooltip() {
-    var _a;
-    await this.updateTooltipPosition();
-    this.isPositioned = true;
-    this.isVisible = true;
+  /** fire analytics on every hover */
+  handleHover() {
     sendAnalytics({
       category: 'ui-component',
-      parentContext: null,
       tag: this.el.tagName.toLowerCase(),
-      name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      name: this.content.toLowerCase(),
       action: 'hover'
     });
   }
-  /**
-   * Hide the tooltip.
-   */
-  hideTooltip() {
-    this.isVisible = false;
-    this.isPositioned = false; // Reset positioning when hiding
-  }
-  /**
-   * Hide the tooltip when the `Escape` key is pressed.
-   */
-  handleKeyPress(event) {
-    if (event.key === 'Escape') {
-      this.isVisible = false;
-      this.isPositioned = false; // Reset positioning when hiding
-    }
-  }
-  /**
-   * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
-   */
-  updateTooltipPosition() {
-    var _a, _b;
-    const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (!slotElement) {
-      return;
-    }
-    const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({
-      flatten: true
-    })) || [];
-    const targetElement = assignedNodes.find(node => node instanceof HTMLElement);
-    if (targetElement) {
-      const targetRect = targetElement.getBoundingClientRect();
-      const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
-      if (tooltipElement) {
-        const tooltipWidth = tooltipElement.offsetWidth;
-        const tooltipHeight = tooltipElement.offsetHeight;
-        // Calculate position based on the preferred `position` prop
-        let top = 0;
-        let left = 0;
-        switch (this.position) {
-          case 'above':
-            top = window.scrollY - tooltipHeight - 8; // Above with offset
-            left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
-            break;
-          case 'below':
-            top = tooltipHeight - window.scrollY + 18; // Below with offset
-            left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
-            break;
-          /*case 'left':
-            top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
-            left = targetRect.left - tooltipWidth - 8; // To the left with offset
-            break;
-          case 'right':
-            top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
-            left = targetRect.right + 8; // To the right with offset
-            break;*/
-        }
-        this.tooltipStyle = {
-          top: `${top}px`,
-          left: `${left}px`,
-          transform: 'translateX(0)' // No additional horizontal adjustment needed
-        };
-      }
-    }
-  }
   render() {
     return h("div", {
-      key: '7bc92c002eaf263a2d10a2391f356f40e23d5998',
-      class: "relative"
+      key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6',
+      class: "relative inline-block group"
     }, h("slot", {
-      key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a'
-    }), this.isVisible && this.isPositioned && this.content && h("div", {
-      key: '00d854649ef43b958081bbb336319a537c181574',
-      class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6",
-      role: "tooltip",
-      style: {
-        top: this.tooltipStyle.top,
-        left: this.tooltipStyle.left,
-        transform: this.tooltipStyle.transform
-      }
+      key: '7a41d90940fff4e8b887ec4a3240371466f219a5'
+    }), h("div", {
+      key: 'ccf06592f4c977030b0cf54cce48d13889c059f3',
+      class: "absolute bottom-full left-1/2 \n            transform -translate-x-1/2 mb-2\n            rounded-xs bg-strongest text-inverse \n            f-ui-03-light pointer-events-none \n            z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n            group-hover:opacity-100",
+      role: "tooltip"
     }, this.content));
   }
   get el() {

package/eds-trl.entry.esm.js

@@ -51,10 +51,10 @@ const EdsTrl = class {
       }
     };
     return h("div", {
-      key: '7f2775e107e053cf1e8091f97915e6bc372c3954',
+      key: '8a798c644632d3168af51aa8a0775b7455ab5b52',
       class: "container mx-auto px-4 py-8"
     }, h("eds-table", {
-      key: '9576b1c5dc72335ef0f7158fa4eaa44835acd8db',
+      key: '82a692c0f7e46fe7438a594a7b5c567855c0e308',
       "table-data": JSON.stringify(tableData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": "2",

package/incorrect-use-of-colors.entry.esm.js

@@ -29,20 +29,23 @@ const IncorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '1cfc3c78012371498476886214e85fbf6e387626',
+      key: '3503dcc0e2d3f5b08eec400e74484e5725d7b4af',
       class: "container"
+    }, h("div", {
+      key: '657857e8826e60c498450326306234c59b4e770b',
+      class: "mb-8"
     }, h("eds-alert", {
-      key: '33449eeae0bca270a82d32de75d5d7c54d8b8c6c',
+      key: '88512240affc65314593f8573b3a13f58fb2806d',
       message: "Note that, each of the four colour tones cannot be mixed in the same composition.",
       intent: "error"
-    }), h("div", {
-      key: 'd436f34bf074c175c6308b822c820604a5e272bc',
+    })), h("div", {
+      key: '8614d445187d2614e5833b8c89c66b178762574e',
       class: "flex"
     }, h("div", {
-      key: '5f839c0f214b774f13af1499fe3e5f8485f959c5',
+      key: '1b36d52dbcbb65e1edb4513899ec898d691193c0',
       class: "w-full"
     }, h("ul", {
-      key: '5cbb81288c0e61431aed523d77f2c6d231c8ce7e',
+      key: '13fb2eaca0ad3fb93487f6c0c976142a18870b4d',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -52,10 +55,10 @@ const IncorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '3622c7c8376208843d3e59c6548e41d9ca8c2b21',
+      key: 'adec93113e4c02168906e1da65f48c20e9b2c7dc',
       class: "w-full"
     }, h("ul", {
-      key: 'd74e34f45e1d377be5f1087a345dee219b1fc5a3',
+      key: 'd0b43589866f53c92084b270afb3571ed2723fc8',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, incorrect.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/index.esm.js

@@ -1,4 +1,4 @@
-export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardGeneric, j as EdsCardSection, k as EdsCodeBlock, l as EdsDropdown, m as EdsFeedback, n as EdsFooter, o as EdsForm, p as EdsFullscreenMenu, q as EdsHeader, s as EdsIconWrapper, t as EdsImg, u as EdsInputField, v as EdsLink, w as EdsLogo, x as EdsMatomoNotice, y as EdsModal, z as EdsPagination, A as EdsProgressBar, B as EdsRating, C as EdsSectionCore, D as EdsSocialNetworks, F as EdsSpinner, G as EdsSplashScreen, I as EdsSteps, J as EdsStepsV2, K as EdsSwitch, L as EdsTable, M as EdsTabs, N as EdsTag, O as EdsTimeline, P as EdsToast, Q as EdsTooltip, R as EdsUser } from './index.esm2.js';
+export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardGeneric, j as EdsCardSection, k as EdsCodeBlock, l as EdsDropdown, m as EdsFeedback, n as EdsFooter, o as EdsForm, p as EdsFullscreenMenu, q as EdsGauge, s as EdsHeader, t as EdsIconWrapper, u as EdsImg, v as EdsInputField, w as EdsLink, x as EdsLogo, y as EdsMatomoNotice, z as EdsModal, A as EdsPagination, B as EdsPie, C as EdsProgressBar, D as EdsRating, F as EdsSocialNetworks, G as EdsSpinner, I as EdsSplashScreen, J as EdsSteps, K as EdsStepsV2, L as EdsSwitch, M as EdsTable, N as EdsTabs, O as EdsTag, P as EdsToast, Q as EdsTooltip, R as EdsUser } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';