@theguild/components 9.12.0-alpha-20251205170657-b03f2c5dae91cc852b7d8c0a5039d54e24eedae4 → 9.12.0-alpha-20251219234943-ca44411deed43d9d7ce27975515cd10980d391df
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,10 +18,11 @@ interface TabsProps extends Pick<TabGroupProps, 'defaultIndex' | 'selectedIndex'
|
|
|
18
18
|
searchParamKey?: string;
|
|
19
19
|
/**
|
|
20
20
|
* LocalStorage key for persisting the selected tab.
|
|
21
|
-
*
|
|
22
|
-
*
|
|
21
|
+
* Set to `true` to use the default key `tabs-${id}`.
|
|
22
|
+
* Leave empty or set to `null` to disable localStorage persistence.
|
|
23
|
+
* Set to a string to use a custom key.
|
|
23
24
|
*/
|
|
24
|
-
storageKey?: string | null;
|
|
25
|
+
storageKey?: string | true | null;
|
|
25
26
|
/** Tabs CSS class name. */
|
|
26
27
|
className?: TabListProps['className'];
|
|
27
28
|
/** Tab CSS class name. */
|
|
@@ -25,7 +25,7 @@ const Tabs = ({
|
|
|
25
25
|
items,
|
|
26
26
|
children,
|
|
27
27
|
searchParamKey = "tab",
|
|
28
|
-
storageKey,
|
|
28
|
+
storageKey = null,
|
|
29
29
|
defaultIndex = 0,
|
|
30
30
|
selectedIndex: _selectedIndex,
|
|
31
31
|
onChange,
|
|
@@ -33,7 +33,7 @@ const Tabs = ({
|
|
|
33
33
|
tabClassName
|
|
34
34
|
}) => {
|
|
35
35
|
const id = useId();
|
|
36
|
-
if (storageKey ===
|
|
36
|
+
if (storageKey === true) {
|
|
37
37
|
storageKey = `tabs-${id}`;
|
|
38
38
|
}
|
|
39
39
|
let [selectedIndex, setSelectedIndex] = useState(defaultIndex);
|
|
@@ -149,13 +149,6 @@ function useActiveTabFromURL(tabPanelsRef, items, searchParamKey, setSelectedInd
|
|
|
149
149
|
const tabIndexFromSearchParams = items.findIndex(
|
|
150
150
|
(_, index) => tabsInSearchParams.includes(getTabKey(items, index, id))
|
|
151
151
|
);
|
|
152
|
-
console.log({
|
|
153
|
-
searchParams,
|
|
154
|
-
tabIndexFromSearchParams,
|
|
155
|
-
tabsInSearchParams,
|
|
156
|
-
items,
|
|
157
|
-
id
|
|
158
|
-
});
|
|
159
152
|
useIsomorphicLayoutEffect(() => {
|
|
160
153
|
const tabPanel = hash ? tabPanelsRef.current?.querySelector(`[role=tabpanel]:has([id="${hash}"])`) : null;
|
|
161
154
|
if (tabPanel) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@theguild/components",
|
|
3
|
-
"version": "9.12.0-alpha-
|
|
3
|
+
"version": "9.12.0-alpha-20251219234943-ca44411deed43d9d7ce27975515cd10980d391df",
|
|
4
4
|
"repository": {
|
|
5
5
|
"url": "https://github.com/the-guild-org/docs",
|
|
6
6
|
"directory": "packages/components"
|