Fix localStorage integration

Author: hasparus

packages/components/src/components/tabs/index.client.tsx

@@ -74,14 +74,19 @@ export const Tabs = ({
 
   const tabPanelsRef = useRef<HTMLDivElement>(null!);
 
-  const ignoreLocalStorage = useActiveTabFromURL(
+  const tabIndexFromSearchParams = useActiveTabFromURL(
     tabPanelsRef,
     items,
     searchParamKey,
     setSelectedIndex,
   );
   const id = useId();
-  useActiveTabFromStorage(storageKey ?? id, items, setSelectedIndex, ignoreLocalStorage);
+  useActiveTabFromStorage(
+    storageKey ?? id,
+    items,
+    setSelectedIndex,
+    tabIndexFromSearchParams !== -1,
+  );
 
   const handleChange = (index: number) => {
     onChange?.(index);
@@ -252,11 +257,6 @@ function useActiveTabFromStorage(
     }
 
     const setSelectedTab = (key: string) => {
-      const numericIndex = Number(key);
-      if (!isNaN(numericIndex) && numericIndex >= 0 && numericIndex < items.length) {
-        setSelectedIndex(numericIndex);
-        return;
-      }
       const index = items.findIndex((_, i) => getTabKey(items, i) === key);
       if (index !== -1) {
         setSelectedIndex(index);

packages/components/src/components/tabs/tabs.stories.tsx

@@ -216,15 +216,15 @@ export const LocalStoragePersistence: Story = {
     const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
     await userEvent.click(tab2);
 
-    // Check that the value was stored in localStorage
+    // Check that the value was stored in localStorage (slugified key)
     const storedValue = localStorage.getItem('test-tabs-storage');
-    await expect(storedValue).toBe('1');
+    await expect(storedValue).toBe('tab-2');
 
     // Simulate storage event from another tab/window
     window.dispatchEvent(
       new StorageEvent('storage', {
         key: 'test-tabs-storage',
-        newValue: '2',
+        newValue: 'tab-3',
       }),
     );