starlight-package-managers 0.4.0 → 0.5.0

package/PackageManagers.astro

@@ -38,131 +38,12 @@ function getTabItemProps(pkgManager: PackageManager) {
   singlePkgManager ? (
     <Code code={getCommand(singlePkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
   ) : (
-    <starlight-package-managers>
-      <Tabs>
-        {getSupportedPkgManagers(type, pkgManagers).map((pkgManager) => (
-          <TabItem {...getTabItemProps(pkgManager)}>
-            <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
-          </TabItem>
-        ))}
-      </Tabs>
-    </starlight-package-managers>
+    <Tabs syncKey="starlight-package-managers-pkg">
+      {getSupportedPkgManagers(type, pkgManagers).map((pkgManager) => (
+        <TabItem {...getTabItemProps(pkgManager)}>
+          <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
+        </TabItem>
+      ))}
+    </Tabs>
   )
 }
-
-<style>
-  starlight-package-managers {
-    display: block;
-  }
-</style>
-
-<script>
-  customElements.define(
-    'starlight-package-managers',
-    class StarlightPackageManagers extends HTMLElement {
-      #observer: MutationObserver
-      #observerConfig: MutationObserverInit = { attributes: true, attributeFilter: ['aria-selected'] }
-
-      #tabs: NodeListOf<HTMLAnchorElement>
-
-      constructor() {
-        super()
-
-        this.#observer = new MutationObserver(this.#handleTabChange)
-        this.#tabs = this.querySelectorAll<HTMLAnchorElement>('starlight-tabs [role="tablist"] [role="tab"]')
-
-        this.observeTabs()
-      }
-
-      observeTabs = () => {
-        for (const tab of this.#tabs) {
-          this.#observer.observe(tab, this.#observerConfig)
-        }
-      }
-
-      disconnectTabs = () => {
-        this.#observer.disconnect()
-      }
-
-      #handleTabChange = (mutations: MutationRecord[]) => {
-        const pkgTabs = [...document.querySelectorAll<this>('starlight-package-managers')]
-
-        for (const pkgTab of pkgTabs) {
-          pkgTab.disconnectTabs()
-        }
-
-        let newFocusedTab: HTMLAnchorElement | null = null
-
-        for (const mutation of mutations) {
-          if (mutation.attributeName !== 'aria-selected' || !(mutation.target instanceof HTMLAnchorElement)) {
-            continue
-          }
-
-          if (mutation.target.getAttribute('aria-selected') !== 'true') {
-            continue
-          }
-
-          newFocusedTab = mutation.target
-
-          const newPkgManager = newFocusedTab.textContent?.trim() ?? ''
-          const otherTabs = pkgTabs.filter((tabs) => tabs !== this)
-
-          for (const otherTab of otherTabs) {
-            const starlightTabs = otherTab.querySelector('starlight-tabs')
-
-            if (!this.#isStarlightTabs(starlightTabs)) {
-              continue
-            }
-
-            // We cannot use the `switchTab()` method provided by Starlight as it focuses the new tab which will cause
-            // the page to scroll for every set of tabs.
-            this.#switchTabs(starlightTabs, newPkgManager)
-          }
-        }
-
-        requestAnimationFrame(() => {
-          for (const pkgTab of pkgTabs) {
-            pkgTab.observeTabs()
-          }
-
-          newFocusedTab?.focus()
-        })
-      }
-
-      // https://github.com/withastro/starlight/blob/290af4f0b5f65619fa4c65609940c3a911a7e698/packages/starlight/user-components/Tabs.astro#L116-L135
-      #switchTabs(starlightTabs: StarlightTabs, newPkgManager: string) {
-        const tabs = starlightTabs.tabs
-        const newTabIndex = tabs.findIndex((tab) => tab.textContent?.trim() === newPkgManager)
-        const newTab = tabs[newTabIndex]
-        const newPanel = starlightTabs.panels[newTabIndex]
-
-        if (!newTab || !newPanel) {
-          return
-        }
-
-        for (const tab of starlightTabs.tabs) {
-          tab.removeAttribute('aria-selected')
-          tab.setAttribute('tabindex', '-1')
-        }
-
-        for (const panel of starlightTabs.panels) {
-          panel.hidden = true
-        }
-
-        newPanel.hidden = false
-        // Restore active tab to the default tab order.
-        newTab.removeAttribute('tabindex')
-        newTab.setAttribute('aria-selected', 'true')
-      }
-
-      #isStarlightTabs(element: Element | null): element is StarlightTabs {
-        return element instanceof Element && 'tabs' in element && 'panels' in element
-      }
-    },
-  )
-
-  type StarlightTabs = Element & {
-    panels: HTMLElement[]
-    tabs: HTMLAnchorElement[]
-  }
-</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-package-managers",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Quickly display npm related commands for multiple package managers in your Starlight documentation site.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
@@ -10,13 +10,13 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@astrojs/starlight": "0.21.0",
+    "@astrojs/starlight": "0.22.0",
     "@playwright/test": "1.36.2",
     "astro": "4.3.7",
     "vitest": "0.33.0"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.21.0",
+    "@astrojs/starlight": ">=0.22.0",
     "astro": ">=4.2.7"
   },
   "engines": {