@theguild/components 9.12.0-alpha-20251204002326-2a985828907ff904a08269604e8ed510d0fd16c4 → 9.12.0-alpha-20251205170657-b03f2c5dae91cc852b7d8c0a5039d54e24eedae4

package/dist/components/marketplace-search.js

@@ -2,11 +2,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useMemo, useState } from "react";
 import fuzzy from "fuzzy";
-import { Tabs } from "./tabs";
 import { cn } from "../cn";
 import { Heading } from "./heading";
 import { CloseIcon, SearchIcon } from "./icons";
 import { MarketplaceList } from "./marketplace-list";
+import { Tabs } from "./tabs";
 import { Tag, TagsContainer } from "./tag";
 const renderQueryPlaceholder = (placeholder, query) => {
   if (!query || isValidElement(placeholder)) {

package/dist/components/tabs/index.client.d.mts

@@ -16,8 +16,12 @@ interface TabsProps extends Pick<TabGroupProps, 'defaultIndex' | 'selectedIndex'
      * @default "tab"
      */
     searchParamKey?: string;
-    /** LocalStorage key for persisting the selected tab. */
-    storageKey?: string;
+    /**
+     * LocalStorage key for persisting the selected tab.
+     * Defaults to `tabs-${id}` if not provided.
+     * Set to `null` to disable localStorage persistence.
+     */
+    storageKey?: string | null;
     /** Tabs CSS class name. */
     className?: TabListProps['className'];
     /** Tab CSS class name. */

package/dist/components/tabs/index.client.js

@@ -33,7 +33,9 @@ const Tabs = ({
   tabClassName
 }) => {
   const id = useId();
-  storageKey ??= `tabs-${id}`;
+  if (storageKey === void 0) {
+    storageKey = `tabs-${id}`;
+  }
   let [selectedIndex, setSelectedIndex] = useState(defaultIndex);
   if (_selectedIndex !== void 0) {
     selectedIndex = _selectedIndex;
@@ -58,7 +60,16 @@ const Tabs = ({
     }
     if (searchParamKey) {
       const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(searchParamKey, getTabKey(items, index, id));
+      const tabKeys = new Set(searchParams.getAll(searchParamKey));
+      for (let i = 0; i < items.length; i++) {
+        const key = getTabKey(items, i, id);
+        tabKeys.delete(key);
+      }
+      searchParams.delete(searchParamKey);
+      for (const key of tabKeys) {
+        searchParams.append(searchParamKey, key);
+      }
+      searchParams.append(searchParamKey, getTabKey(items, index, id));
       window.history.replaceState(
         null,
         "",
@@ -138,6 +149,13 @@ function useActiveTabFromURL(tabPanelsRef, items, searchParamKey, setSelectedInd
   const tabIndexFromSearchParams = items.findIndex(
     (_, index) => tabsInSearchParams.includes(getTabKey(items, index, id))
   );
+  console.log({
+    searchParams,
+    tabIndexFromSearchParams,
+    tabsInSearchParams,
+    items,
+    id
+  });
   useIsomorphicLayoutEffect(() => {
     const tabPanel = hash ? tabPanelsRef.current?.querySelector(`[role=tabpanel]:has([id="${hash}"])`) : null;
     if (tabPanel) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.12.0-alpha-20251204002326-2a985828907ff904a08269604e8ed510d0fd16c4",
+  "version": "9.12.0-alpha-20251205170657-b03f2c5dae91cc852b7d8c0a5039d54e24eedae4",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -38,11 +38,11 @@
     "style.css"
   ],
   "peerDependencies": {
+    "@headlessui/react": "2.2.0",
     "@theguild/tailwind-config": "^0.6.3",
     "next": "^13 || ^14 || ^15.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@headlessui/react": "2.2.0"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@giscus/react": "3.1.0",