@ebrains/react 1.0.0 → 1.2.0

package/components-section.entry.esm.js

@@ -85,7 +85,7 @@ const DocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p", n
   "section-title": "Example React App",
   "heading-level": "h3"
 }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", {
-  code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n",
+  code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader,\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n",
   language: "javascript",
   "copy-label": "Copy Code"
 })));

package/eds-accordion.entry.esm.js

@@ -70,21 +70,21 @@ const EdsAccordion = class {
    */
   render() {
     return h("div", {
-      key: 'd2fcce2468130200dd1516902a203c4ca8ae543f',
+      key: 'addeb5f79d497efcd3eab9f849890adf48a5e275',
       ref: el => this.wrapperRef = el,
       class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''}
           ${this.description ? 'min-h-56' : ''}`
     }, h("h3", {
-      key: 'f59a85e886736b483f6a311a00426340a36dcb71',
+      key: 'c522c074c205e471f9e95991a03f703bec8d3219',
       ref: el => this.headerRef = el,
       class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"
     }, this.heading), h("div", {
-      key: '9fe1d99f46f3c066bbb1e8f4ef695fe87e8fad54',
+      key: '5ee474856bf9a3cdc732c27c6fccb68c24e0dc3b',
       class: "ml-auto"
     }, h("eds-button", {
-      key: '4d4c16a958df05f1e773fe74fa49647fc94766c7',
+      key: 'a274b1d82f30607f61103433aa6ceb745464f530',
       id: "toggleAccordion",
       intent: "tertiary",
       "aria-expanded": this.isExpanded || this.shortContent,
@@ -94,7 +94,7 @@ const EdsAccordion = class {
       onClick: this.handleClick,
       icon: "chevron-down"
     })), h("div", {
-      key: '5d84ffe8032834575d165f7a5e097539de73350f',
+      key: '69a638f2dc3c5ebff95fc4049c47abd4884b13ad',
       class: `w-full`,
       style: Number.isFinite(this.headerHeight) ? {
         marginTop: `${this.headerHeight}px`
@@ -102,7 +102,7 @@ const EdsAccordion = class {
     }, this.description ? h("span", {
       class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
     }, this.description) : null, h("section", {
-      key: '1813aea1369b8883cd45088799f9715cf8fc0556',
+      key: '820f39174c6e6d42e7c4407a2a4175fb077f86ac',
       id: "accordionSection",
       role: "region",
       "aria-labelledby": "accordionHeader",
@@ -112,15 +112,15 @@ const EdsAccordion = class {
         height: this.isExpanded ? 'auto' : '0'
       }
     }, h("div", {
-      key: 'a9a95adbb819530f426045c55ca1a02f3a778f0a',
+      key: '3d9ea33856d350434d26c07ddc9d230e28d8c344',
       ref: el => this.childContentRef = el,
       class: `accordion-content effect-color pt-4`,
       "aria-hidden": !this.isExpanded
     }, h("span", {
-      key: '2518e3243e0bd199061ac255922d661e0558bdc8',
+      key: '1d0761d7894d5ba4d7c7f5051031857555ce0b0c',
       class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
     }, h("slot", {
-      key: '3f3ab74926e7e45d4aacc4c7003c05be3c6b82c3'
+      key: 'ed31f44736a8ce85a7df4216b2f90c2ca7d9b873'
     }))))));
   }
   get el() {

package/eds-alert.entry.esm.js

@@ -83,7 +83,7 @@ const EdsAlert = class {
   }
   render() {
     return h("div", {
-      key: '90eae6088fb792c671eca1d74d9a6e7d212c2c1c',
+      key: '5252aca583e87d8c3249c501e55368e340ef0d64',
       class: alertStyles({
         intent: this.intent,
         brd: this.brd,
@@ -92,7 +92,7 @@ const EdsAlert = class {
       }),
       role: "alert"
     }, h("p", {
-      key: '201a9e6352350dbe9d4f1ab137a669f212519ea5',
+      key: 'bb23c94e802ec5e287a2b8619277e83de173b498',
       class: "f-ui-01 py-8",
       innerHTML: this.message
     }), this.withBtn && (this.pressableUrl ? h("eds-link", {