feat: #264 typescript 6 support and refactor popover types

.prettierignore

@@ -0,0 +1 @@
+test/cases/tsx/src/counter.tsx

docs/components/banner-cta/banner-cta.test.ts

@@ -43,6 +43,7 @@ describe('Components/Banner CTA', () => {
 
   afterEach(() => {
     bannerCta.remove();
+    // @ts-expect-error
     bannerCta = undefined;
   });
 });

docs/components/banner-splash/banner-splash.test.ts

@@ -25,6 +25,7 @@ describe('Components/Banner Splash', () => {
 
   afterEach(() => {
     bannerSplash.remove();
+    // @ts-expect-error
     bannerSplash = undefined;
   });
 });

docs/components/capability-box/capability-box.test.ts

@@ -56,6 +56,7 @@ describe('Components/Capability Box', () => {
 
   afterEach(() => {
     capabilityBox.remove();
+    // @ts-ignore
     capabilityBox = undefined;
   });
 });

docs/components/ctc-block/ctc-block.ts

@@ -7,11 +7,13 @@ const template = document.createElement('template');
 export default class CopyToClipboardBlock extends HTMLElement {
   selectCommandRunnerIdx;
   snippetContents;
+  root: ShadowRoot | null;
 
   constructor() {
     super();
     this.selectCommandRunnerIdx = 0;
     this.snippetContents = '';
+    this.root = null;
   }
 
   connectedCallback() {
@@ -48,23 +50,26 @@ export default class CopyToClipboardBlock extends HTMLElement {
         console.warn(`Unknown variant provided => ${variant}`);
       }
 
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-      switch (variant) {
-        case 'snippet':
-          this.shadowRoot
-            .querySelector('.copy-icon')
-            .addEventListener('click', this.copySnippetToClipboard.bind(this));
-          break;
-        case 'shell':
-          this.shadowRoot
-            .querySelector('.copy-icon')
-            .addEventListener('click', this.copyShellScriptToClipboard.bind(this));
-          break;
-      }
+      this.root = this.attachShadow({ mode: 'open' });
+
+      if (this.root) {
+        this.root.appendChild(template.content.cloneNode(true));
+
+        switch (variant) {
+          case 'snippet':
+            this.root
+              ?.querySelector('.copy-icon')
+              ?.addEventListener('click', this.copySnippetToClipboard.bind(this));
+            break;
+          case 'shell':
+            this.root
+              ?.querySelector('.copy-icon')
+              ?.addEventListener('click', this.copyShellScriptToClipboard.bind(this));
+            break;
+        }
 
-      this.shadowRoot.adoptedStyleSheets = [theme, sheet];
+        this.root.adoptedStyleSheets = [theme, sheet];
+      }
     }
   }
 
@@ -76,7 +81,12 @@ export default class CopyToClipboardBlock extends HTMLElement {
   }
 
   copyShellScriptToClipboard() {
-    const contents = this.getAttribute('paste-contents').trim();
+    const contents = this.getAttribute('paste-contents')?.trim();
+
+    if (!contents) {
+      console.warn('No content provided to copy to clipboard');
+      return;
+    }
 
     navigator.clipboard.writeText(contents);
     console.log('copying the following contents to your clipboard =>', contents);

docs/components/ctc-button/ctc-button.test.ts

@@ -18,14 +18,15 @@ describe('Components/Copy To Clipboard (Button)', () => {
     });
 
     it('should have an icon with the user provided content set', () => {
-      const icon = ctc.shadowRoot.querySelectorAll("[title='Copy to clipboard']");
+      const icon = ctc?.shadowRoot?.querySelectorAll("[title='Copy to clipboard']");
 
-      expect(icon.length).to.equal(1);
+      expect(icon?.length).to.equal(1);
     });
   });
 
   afterEach(() => {
     ctc.remove();
+    // @ts-expect-error
     ctc = undefined;
   });
 });

docs/components/ctc-button/ctc-button.tsx

@@ -8,20 +8,35 @@ template.innerHTML = `
 `;
 
 export default class CopyToClipboardButton extends HTMLElement {
+  root: ShadowRoot | null;
+
+  constructor() {
+    super();
+    this.root = null;
+  }
+
   connectedCallback() {
     // bail of out of SSR entirely
     if (!this.shadowRoot && typeof window !== 'undefined') {
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
+      this.root = this.attachShadow({ mode: 'open' });
+
+      if (this.root) {
+        this.root.appendChild(template.content.cloneNode(true));
+
+        this.root.adoptedStyleSheets = [sheet];
 
-      this.shadowRoot.adoptedStyleSheets = [sheet];
+        this.root.getElementById('icon')?.addEventListener('click', () => {
+          const contents = this.getAttribute('content');
 
-      this.shadowRoot.getElementById('icon')?.addEventListener('click', () => {
-        const contents = this.getAttribute('content') ?? undefined;
+          if (!contents) {
+            console.warn('No content provided to copy to clipboard');
+            return;
+          }
 
-        navigator.clipboard.writeText(contents);
-        console.log('copying the following contents to your clipboard =>', contents);
-      });
+          navigator.clipboard.writeText(contents);
+          console.log('copying the following contents to your clipboard =>', contents);
+        });
+      }
     }
   }
 }

docs/components/feature-box/feature-box.test.ts

@@ -68,6 +68,7 @@ describe('Components/Feature Box', () => {
 
   afterEach(() => {
     featureBox.remove();
+    // @ts-expect-error
     featureBox = undefined;
   });
 });

docs/components/footer/footer.test.ts

@@ -38,6 +38,7 @@ describe('Components/Footer', () => {
 
   afterEach(() => {
     footer.remove();
+    // @ts-expect-error
     footer = undefined;
   });
 });

docs/components/header/header.test.ts

@@ -35,7 +35,7 @@ describe('Components/Header', () => {
     });
 
     it('should have an anchor tag with title attribute wrapping the logo', () => {
-      const anchor = header.querySelector("a[title='WCC Home Page']");
+      const anchor = header.querySelector("a[title='WCC Home Page']") as HTMLAnchorElement;
 
       expect(anchor).to.not.equal(undefined);
       expect(anchor.getAttribute('href')).to.equal('/');
@@ -56,22 +56,23 @@ describe('Components/Header', () => {
         const navItem = pages.find((nav) => nav.route === link.getAttribute('href'));
 
         expect(navItem).to.not.equal(undefined);
-        expect(navItem.data.order).to.equal((idx += 1));
-        expect(link.textContent).to.equal(navItem.label);
+        expect(navItem?.data.order).to.equal((idx += 1));
+        expect(link.textContent).to.equal(navItem?.label);
 
         // Home page doesn't have a title, for example
         // maybe a Greenwood bug?
-        if (navItem.title) {
-          expect(link.getAttribute('title')).to.equal(navItem.title);
+        if (navItem?.title) {
+          expect(link.getAttribute('title')).to.equal(navItem?.title);
         }
 
         // current route should display as active
-        if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
-          activeRoute = navItem;
+        if (navItem?.route === CURRENT_ROUTE && link?.getAttribute('class')?.includes('active')) {
+          activeRoute = navItem as unknown as Page;
         }
       });
 
-      expect(activeRoute.route).to.equal(CURRENT_ROUTE);
+      // @ts-expect-error
+      expect(activeRoute?.route).to.equal(CURRENT_ROUTE);
     });
   });
 
@@ -106,33 +107,35 @@ describe('Components/Header', () => {
 
     it('should have the expected navigation links', () => {
       const links = header.querySelectorAll("nav[aria-label='Mobile'] ul li a");
-      let activeRoute: Page = undefined;
+      let activeRoute: Page;
 
       Array.from(links).forEach((link, idx) => {
         const navItem = pages.find((nav) => nav.route === link.getAttribute('href'));
 
         expect(navItem).to.not.equal(undefined);
-        expect(navItem.data.order).to.equal((idx += 1));
-        expect(link.textContent).to.equal(navItem.label);
+        expect(navItem?.data.order).to.equal((idx += 1));
+        expect(link.textContent).to.equal(navItem?.label);
 
         // Home page doesn't have a title, for example
         // maybe a Greenwood bug?
-        if (navItem.title) {
+        if (navItem?.title) {
           expect(link.getAttribute('title')).to.equal(navItem.title);
         }
 
         // current route should display as active
-        if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
-          activeRoute = navItem;
+        if (navItem?.route === CURRENT_ROUTE && link?.getAttribute('class')?.includes('active')) {
+          activeRoute = navItem as unknown as Page;
         }
       });
 
-      expect(activeRoute.route).to.equal(CURRENT_ROUTE);
+      // @ts-expect-error
+      expect(activeRoute?.route).to.equal(CURRENT_ROUTE);
     });
   });
 
   afterEach(() => {
     header.remove();
+    // @ts-expect-error
     header = undefined;
   });
 

docs/components/sandbox/signal-counter.tsx

@@ -25,7 +25,9 @@ export default class SignalCounter extends HTMLElement {
       this.render();
     }
 
-    this.shadowRoot.adoptedStyleSheets = [sheet];
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
   }
 
   increment() {

docs/components/side-nav/side-nav.test.ts

@@ -89,7 +89,7 @@ describe('Components/Side Nav', () => {
     nav.setAttribute('route', ROUTE);
     nav.setAttribute('heading', HEADING);
 
-    expectedDocsContent = GRAPH.find((page) => page.route === ROUTE);
+    expectedDocsContent = GRAPH.find((page) => page.route === ROUTE) as DocsPage;
 
     document.body.appendChild(nav);
 
@@ -101,7 +101,7 @@ describe('Components/Side Nav', () => {
     let fullMenu: HTMLElement;
 
     beforeEach(async () => {
-      fullMenu = nav.querySelector('#main-menu');
+      fullMenu = nav.querySelector('#main-menu') as HTMLElement;
     });
 
     it('should not be null', () => {
@@ -118,18 +118,21 @@ describe('Components/Side Nav', () => {
     it('should have the expected number of section heading links', () => {
       const links = fullMenu.querySelectorAll('ul li a');
 
-      expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
+      expect(links.length).to.equal(expectedDocsContent.data?.tableOfContents?.length);
     });
 
     it('should have the expected content for section headings links', () => {
       const links = fullMenu.querySelectorAll('ul li a');
 
       links.forEach((link, index) => {
-        expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
+        expect(link.textContent).to.equal(
+          expectedDocsContent.data?.tableOfContents?.[index]?.content,
+        );
       });
     });
 
     afterAll(() => {
+      // @ts-expect-error
       fullMenu = null;
     });
   });
@@ -139,7 +142,7 @@ describe('Components/Side Nav', () => {
     let popoverSelector = 'compact-menu';
 
     beforeEach(async () => {
-      compactMenu = nav.querySelector(`#mobile-menu`);
+      compactMenu = nav.querySelector(`#mobile-menu`) as HTMLElement;
     });
 
     it('should not be null', () => {
@@ -179,24 +182,28 @@ describe('Components/Side Nav', () => {
     it('should have the expected number of section heading links', () => {
       const links = compactMenu.querySelectorAll('ul li a');
 
-      expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
+      expect(links.length).to.equal(expectedDocsContent.data?.tableOfContents?.length);
     });
 
     it('should have the expected content for section headings links', () => {
       const links = compactMenu.querySelectorAll('ul li a');
 
       links.forEach((link, index) => {
-        expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
+        expect(link.textContent).to.equal(
+          expectedDocsContent.data?.tableOfContents?.[index]?.content,
+        );
       });
     });
 
     afterEach(() => {
+      // @ts-expect-error
       compactMenu = null;
     });
   });
 
   afterEach(() => {
     nav.remove();
+    // @ts-expect-error
     nav = undefined;
   });
 

docs/components/side-nav/side-nav.tsx

@@ -14,14 +14,14 @@ export type DocsPage = Page & {
 };
 
 export default class SideNav extends HTMLElement {
-  route: string;
-  toc: TableOfContents;
-  heading: string;
+  route: string = '';
+  toc: TableOfContents = [];
+  heading: string = '';
 
   async connectedCallback() {
     const route = this.getAttribute('route') ?? '';
     const heading = this.getAttribute('heading') ?? '';
-    const page: DocsPage = (await getContent()).find((page) => page.route === route);
+    const page: DocsPage = (await getContent()).find((page) => page.route === route) as DocsPage;
 
     this.heading = heading;
     this.toc = page?.data?.tableOfContents ?? [];

docs/components/social-tray/social-tray.test.ts

@@ -48,14 +48,15 @@ describe('Components/Social Tray', () => {
         const iconItem = ICONS.find((icon) => icon.title === link.getAttribute('title'));
 
         expect(iconItem).to.not.equal(undefined);
-        expect(link.getAttribute('href')).to.equal(iconItem.link);
+        expect(link.getAttribute('href')).to.equal(iconItem?.link);
         expect(link.getAttribute('target')).equal('_blank');
       });
     });
   });
 
   afterEach(() => {
     tray.remove();
+    // @ts-expect-error
     tray = undefined;
   });
 });