@theguild/components 9.12.0-alpha-20251204002326-2a985828907ff904a08269604e8ed510d0fd16c4 → 9.12.0-alpha-20251204140849-33f2cded35360019d44f4277a3dc63b6799e421e

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-20251204140849-33f2cded35360019d44f4277a3dc63b6799e421e",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"