@api-client/ui 0.4.3 → 0.4.4

package/build/src/lib/Dom.d.ts

@@ -1,5 +1,5 @@
 /**
  * Searches for an element with the given ID in parent shadow roots
  */
-export declare function findElementInShadowRoots(id: string, from: Element): HTMLElement | null;
+export declare function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null;
 //# sourceMappingURL=Dom.d.ts.map

package/build/src/lib/Dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,CAsBtF"}
+{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAqC1F"}

package/build/src/lib/Dom.js

@@ -9,15 +9,31 @@ export function findElementInShadowRoots(id, from) {
     }
     // If not found in document, search in parent shadow roots
     let current = from;
+    const queryId = `#${id}`;
     while (current) {
-        const shadowRoot = current.shadowRoot;
-        if (shadowRoot) {
-            const element = shadowRoot.getElementById(id);
+        // Check if current element has a shadow root and search within it
+        if (current.shadowRoot) {
+            const element = current.shadowRoot.querySelector(queryId);
             if (element) {
                 return element;
             }
         }
-        current = current.parentElement ?? current.shadowRoot?.host;
+        // Move up the DOM tree
+        if (current.parentNode) {
+            if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+                // We're inside a shadow root, move to the shadow host
+                const shadowRoot = current.parentNode;
+                current = shadowRoot.host;
+            }
+            else {
+                // Regular DOM traversal
+                current = current.parentElement;
+            }
+        }
+        else {
+            // No more parents
+            current = null;
+        }
     }
     return null;
 }

package/build/src/lib/Dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,EAAU,EAAE,IAAa;IAChE,gCAAgC;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAC3C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,OAAO,CAAA;IAChB,CAAC;IACD,0DAA0D;IAC1D,IAAI,OAAO,GAA+B,IAAI,CAAA;IAE9C,OAAO,OAAO,EAAE,CAAC;QACf,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAA;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;YAC7C,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,OAAsB,CAAA;YAC/B,CAAC;QACH,CAAC;QAED,OAAO,GAAG,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,EAAE,IAAI,CAAA;IAC7D,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["/**\n * Searches for an element with the given ID in parent shadow roots\n */\nexport function findElementInShadowRoots(id: string, from: Element): HTMLElement | null {\n  // First try to find in document\n  const rootElm = document.getElementById(id)\n  if (rootElm) {\n    return rootElm\n  }\n  // If not found in document, search in parent shadow roots\n  let current: Element | null | undefined = from\n\n  while (current) {\n    const shadowRoot = current.shadowRoot\n    if (shadowRoot) {\n      const element = shadowRoot.getElementById(id)\n      if (element) {\n        return element as HTMLElement\n      }\n    }\n\n    current = current.parentElement ?? current.shadowRoot?.host\n  }\n\n  return null\n}\n"]}
+{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../src/lib/Dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,EAAU,EAAE,IAAiB;IACpE,gCAAgC;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAC3C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,0DAA0D;IAC1D,IAAI,OAAO,GAAuB,IAAI,CAAA;IACtC,MAAM,OAAO,GAAG,IAAI,EAAE,EAAE,CAAA;IAExB,OAAO,OAAO,EAAE,CAAC;QACf,kEAAkE;QAClE,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACzD,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,OAAsB,CAAA;YAC/B,CAAC;QACH,CAAC;QAED,uBAAuB;QACvB,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,IAAI,OAAO,CAAC,UAAU,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChE,sDAAsD;gBACtD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAwB,CAAA;gBACnD,OAAO,GAAG,UAAU,CAAC,IAAmB,CAAA;YAC1C,CAAC;iBAAM,CAAC;gBACN,wBAAwB;gBACxB,OAAO,GAAG,OAAO,CAAC,aAAa,CAAA;YACjC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,kBAAkB;YAClB,OAAO,GAAG,IAAI,CAAA;QAChB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["/**\n * Searches for an element with the given ID in parent shadow roots\n */\nexport function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null {\n  // First try to find in document\n  const rootElm = document.getElementById(id)\n  if (rootElm) {\n    return rootElm\n  }\n\n  // If not found in document, search in parent shadow roots\n  let current: HTMLElement | null = from\n  const queryId = `#${id}`\n\n  while (current) {\n    // Check if current element has a shadow root and search within it\n    if (current.shadowRoot) {\n      const element = current.shadowRoot.querySelector(queryId)\n      if (element) {\n        return element as HTMLElement\n      }\n    }\n\n    // Move up the DOM tree\n    if (current.parentNode) {\n      if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n        // We're inside a shadow root, move to the shadow host\n        const shadowRoot = current.parentNode as ShadowRoot\n        current = shadowRoot.host as HTMLElement\n      } else {\n        // Regular DOM traversal\n        current = current.parentElement\n      }\n    } else {\n      // No more parents\n      current = null\n    }\n  }\n\n  return null\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/lib/Dom.ts

@@ -1,25 +1,40 @@
 /**
  * Searches for an element with the given ID in parent shadow roots
  */
-export function findElementInShadowRoots(id: string, from: Element): HTMLElement | null {
+export function findElementInShadowRoots(id: string, from: HTMLElement): HTMLElement | null {
   // First try to find in document
   const rootElm = document.getElementById(id)
   if (rootElm) {
     return rootElm
   }
+
   // If not found in document, search in parent shadow roots
-  let current: Element | null | undefined = from
+  let current: HTMLElement | null = from
+  const queryId = `#${id}`
 
   while (current) {
-    const shadowRoot = current.shadowRoot
-    if (shadowRoot) {
-      const element = shadowRoot.getElementById(id)
+    // Check if current element has a shadow root and search within it
+    if (current.shadowRoot) {
+      const element = current.shadowRoot.querySelector(queryId)
       if (element) {
         return element as HTMLElement
       }
     }
 
-    current = current.parentElement ?? current.shadowRoot?.host
+    // Move up the DOM tree
+    if (current.parentNode) {
+      if (current.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        // We're inside a shadow root, move to the shadow host
+        const shadowRoot = current.parentNode as ShadowRoot
+        current = shadowRoot.host as HTMLElement
+      } else {
+        // Regular DOM traversal
+        current = current.parentElement
+      }
+    } else {
+      // No more parents
+      current = null
+    }
   }
 
   return null

package/test/lib/Dom.test.ts

@@ -0,0 +1,231 @@
+import { assert } from '@open-wc/testing'
+import { findElementInShadowRoots } from '../../src/lib/Dom.js'
+
+describe('lib', () => {
+  describe('Dom', () => {
+    describe('findElementInShadowRoots', () => {
+      let container: HTMLDivElement
+
+      beforeEach(() => {
+        container = document.createElement('div')
+        container.id = 'test-container'
+        document.body.appendChild(container)
+      })
+
+      afterEach(() => {
+        document.body.removeChild(container)
+      })
+
+      it('finds element in document root', () => {
+        const element = document.createElement('div')
+        element.id = 'test-element'
+        container.appendChild(element)
+
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('test-element', fromElement)
+        assert.equal(result, element)
+      })
+
+      it('returns null when element is not found', () => {
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('non-existent', fromElement)
+        assert.isNull(result)
+      })
+
+      it('finds element in parent shadow root', () => {
+        // Create a custom element with shadow root
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        // Add target element to shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'shadow-element'
+        shadowRoot.appendChild(targetElement)
+
+        // Add shadow host to container
+        container.appendChild(shadowHost)
+
+        // Create a child element inside the shadow root to search from
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+        const result = findElementInShadowRoots('shadow-element', fromElement)
+        assert.ok(result)
+        assert.equal(result.id, 'shadow-element')
+      })
+
+      it('finds element in nested shadow roots', () => {
+        // Create outer shadow host
+        const outerShadowHost = document.createElement('div')
+        outerShadowHost.id = 'outer-shadow-host'
+        const outerShadowRoot = outerShadowHost.attachShadow({ mode: 'open' })
+
+        // Create inner shadow host inside outer shadow root
+        const innerShadowHost = document.createElement('div')
+        innerShadowHost.id = 'inner-shadow-host'
+        const innerShadowRoot = innerShadowHost.attachShadow({ mode: 'open' })
+        outerShadowRoot.appendChild(innerShadowHost)
+
+        // Add target element to outer shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'nested-element'
+        outerShadowRoot.appendChild(targetElement)
+
+        // Add container to document
+        container.appendChild(outerShadowHost)
+
+        // Search from element in inner shadow root
+        const fromElement = document.createElement('div')
+        fromElement.id = 'search-from'
+        innerShadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('nested-element', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('searches through multiple shadow root levels', () => {
+        // Create a deeply nested shadow structure
+        const level1Host = document.createElement('div')
+        const level1Shadow = level1Host.attachShadow({ mode: 'open' })
+
+        const level2Host = document.createElement('div')
+        const level2Shadow = level2Host.attachShadow({ mode: 'open' })
+        level1Shadow.appendChild(level2Host)
+
+        const level3Host = document.createElement('div')
+        const level3Shadow = level3Host.attachShadow({ mode: 'open' })
+        level2Shadow.appendChild(level3Host)
+
+        // Add target element at level 1
+        const targetElement = document.createElement('div')
+        targetElement.id = 'deep-element'
+        level1Shadow.appendChild(targetElement)
+
+        container.appendChild(level1Host)
+
+        // Search from deepest level
+        const fromElement = document.createElement('div')
+        level3Shadow.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('deep-element', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('prefers document element over shadow root element', () => {
+        // Create element in document
+        const documentElement = document.createElement('div')
+        documentElement.id = 'duplicate-id'
+        documentElement.textContent = 'document'
+        container.appendChild(documentElement)
+
+        // Create shadow host with element with same ID
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+
+        const shadowElement = document.createElement('div')
+        shadowElement.id = 'duplicate-id'
+        shadowElement.textContent = 'shadow'
+        shadowRoot.appendChild(shadowElement)
+
+        container.appendChild(shadowHost)
+
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('duplicate-id', fromElement)
+        assert.equal(result, documentElement)
+        assert.isNotNull(result)
+        assert.equal(result.textContent, 'document')
+      })
+
+      it('handles elements without parent', () => {
+        const isolatedElement = document.createElement('div')
+
+        const result = findElementInShadowRoots('test-id', isolatedElement)
+        assert.isNull(result)
+      })
+
+      it('handles shadow root host traversal', () => {
+        // Create a shadow host
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        container.appendChild(shadowHost)
+
+        // Add target element to container (outside shadow)
+        const targetElement = document.createElement('div')
+        targetElement.id = 'outside-shadow'
+        container.appendChild(targetElement)
+
+        // Search from inside shadow root
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('outside-shadow', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('handles elements in current shadow root', () => {
+        const shadowHost = document.createElement('div')
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+        container.appendChild(shadowHost)
+
+        // Add target element to same shadow root
+        const targetElement = document.createElement('div')
+        targetElement.id = 'same-shadow'
+        shadowRoot.appendChild(targetElement)
+
+        // Add search element to same shadow root
+        const fromElement = document.createElement('div')
+        shadowRoot.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('same-shadow', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('handles complex shadow DOM structure with mixed content', () => {
+        // Create complex structure: document -> shadow1 -> regular div -> shadow2
+        const shadow1Host = document.createElement('div')
+        const shadow1Root = shadow1Host.attachShadow({ mode: 'open' })
+        container.appendChild(shadow1Host)
+
+        const regularDiv = document.createElement('div')
+        shadow1Root.appendChild(regularDiv)
+
+        const shadow2Host = document.createElement('div')
+        const shadow2Root = shadow2Host.attachShadow({ mode: 'open' })
+        regularDiv.appendChild(shadow2Host)
+
+        // Add target to shadow1
+        const targetElement = document.createElement('div')
+        targetElement.id = 'complex-target'
+        shadow1Root.appendChild(targetElement)
+
+        // Search from shadow2
+        const fromElement = document.createElement('div')
+        shadow2Root.appendChild(fromElement)
+
+        const result = findElementInShadowRoots('complex-target', fromElement)
+        assert.equal(result, targetElement)
+      })
+
+      it('returns null for invalid ID characters', () => {
+        const element = document.createElement('div')
+        element.id = 'valid-id'
+        container.appendChild(element)
+
+        const fromElement = document.createElement('div')
+        container.appendChild(fromElement)
+
+        // Test with empty string
+        const result1 = findElementInShadowRoots('', fromElement)
+        assert.isNull(result1)
+
+        // Test with whitespace
+        const result2 = findElementInShadowRoots('   ', fromElement)
+        assert.isNull(result2)
+      })
+    })
+  })
+})

package/web-test-runner.config.js

@@ -81,7 +81,7 @@ export default /** @type TestRunnerConfig */ ({
   },
   browserStartTimeout: 20000,
   testsStartTimeout: 20000,
-  testsFinishTimeout: 60000,
+  testsFinishTimeout: 30000,
 
   coverageConfig: {
     report: true,