fumadocs-ui 15.5.0 → 15.5.1
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.
- package/dist/components/dialog/search-algolia.d.ts +3 -2
- package/dist/components/dialog/search-algolia.d.ts.map +1 -1
- package/dist/components/dialog/search-algolia.js +17 -6
- package/dist/components/dialog/search-default.d.ts +3 -2
- package/dist/components/dialog/search-default.d.ts.map +1 -1
- package/dist/components/dialog/search-default.js +18 -6
- package/dist/components/dialog/search-orama.d.ts +3 -2
- package/dist/components/dialog/search-orama.d.ts.map +1 -1
- package/dist/components/dialog/search-orama.js +17 -6
- package/dist/components/dialog/search.d.ts +46 -19
- package/dist/components/dialog/search.d.ts.map +1 -1
- package/dist/components/dialog/search.js +93 -42
- package/dist/components/tabs.d.ts +7 -7
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +7 -4
- package/dist/contexts/search.d.ts +10 -2
- package/dist/contexts/search.d.ts.map +1 -1
- package/dist/contexts/search.js +3 -1
- package/dist/layouts/docs.d.ts +2 -11
- package/dist/layouts/docs.d.ts.map +1 -1
- package/dist/layouts/docs.js +16 -14
- package/dist/layouts/home.d.ts +1 -2
- package/dist/layouts/home.d.ts.map +1 -1
- package/dist/layouts/home.js +8 -6
- package/dist/layouts/notebook.d.ts.map +1 -1
- package/dist/layouts/notebook.js +13 -9
- package/dist/layouts/shared.d.ts +0 -9
- package/dist/layouts/shared.d.ts.map +1 -1
- package/dist/layouts/shared.js +0 -21
- package/dist/page.d.ts +1 -1
- package/dist/page.d.ts.map +1 -1
- package/dist/page.js +6 -3
- package/dist/provider/base.d.ts +1 -1
- package/dist/provider/base.d.ts.map +1 -1
- package/dist/style.css +0 -5
- package/package.json +3 -3
- package/dist/components/ui/hide-if-empty.d.ts +0 -10
- package/dist/components/ui/hide-if-empty.d.ts.map +0 -1
- package/dist/components/ui/hide-if-empty.js +0 -66
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { type AlgoliaOptions } from 'fumadocs-core/search/client';
|
|
2
2
|
import { type ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
|
|
4
4
|
export interface AlgoliaSearchDialogProps extends SharedProps {
|
|
5
5
|
searchOptions: AlgoliaOptions;
|
|
6
|
+
links?: SearchLink[];
|
|
6
7
|
footer?: ReactNode;
|
|
7
8
|
defaultTag?: string;
|
|
8
9
|
tags?: TagItem[];
|
|
@@ -19,5 +20,5 @@ export interface AlgoliaSearchDialogProps extends SharedProps {
|
|
|
19
20
|
*/
|
|
20
21
|
allowClear?: boolean;
|
|
21
22
|
}
|
|
22
|
-
export default function AlgoliaSearchDialog({ searchOptions, tags, defaultTag, showAlgolia, allowClear, ...props }: AlgoliaSearchDialogProps):
|
|
23
|
+
export default function AlgoliaSearchDialog({ searchOptions, tags, defaultTag, showAlgolia, allowClear, links, footer, ...props }: AlgoliaSearchDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
//# sourceMappingURL=search-algolia.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAgB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG1E,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,aAAa,EAAE,cAAc,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,IAAS,EACT,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,KAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAgE1B"}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useDocsSearch, } from 'fumadocs-core/search/client';
|
|
4
|
-
import { useState } from 'react';
|
|
4
|
+
import { useMemo, useState } from 'react';
|
|
5
5
|
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
6
|
-
import { SearchDialog, TagsList, TagsListItem, } from './search.js';
|
|
7
|
-
|
|
6
|
+
import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
|
|
7
|
+
import { useI18n } from '../../contexts/i18n.js';
|
|
8
|
+
export default function AlgoliaSearchDialog({ searchOptions, tags = [], defaultTag, showAlgolia = false, allowClear = false, links = [], footer, ...props }) {
|
|
8
9
|
const [tag, setTag] = useState(defaultTag);
|
|
10
|
+
const { locale } = useI18n();
|
|
9
11
|
const { search, setSearch, query } = useDocsSearch({
|
|
10
12
|
type: 'algolia',
|
|
13
|
+
tag,
|
|
14
|
+
locale,
|
|
11
15
|
...searchOptions,
|
|
12
|
-
}
|
|
16
|
+
});
|
|
17
|
+
const defaultItems = useMemo(() => links.map(([name, link]) => ({
|
|
18
|
+
type: 'page',
|
|
19
|
+
id: name,
|
|
20
|
+
content: name,
|
|
21
|
+
url: link,
|
|
22
|
+
})), [links]);
|
|
13
23
|
useOnChange(defaultTag, (v) => {
|
|
14
24
|
setTag(v);
|
|
15
25
|
});
|
|
16
|
-
|
|
26
|
+
const label = showAlgolia && _jsx(AlgoliaTitle, {});
|
|
27
|
+
return (_jsxs(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, ...props, children: [_jsx(SearchDialogOverlay, {}), _jsxs(SearchDialogContent, { children: [_jsxs(SearchDialogHeader, { children: [_jsx(SearchDialogIcon, {}), _jsx(SearchDialogInput, {}), _jsx(SearchDialogClose, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: defaultItems }))] }), _jsxs(SearchDialogFooter, { children: [tags.length > 0 ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), label] })) : (label), footer] })] }));
|
|
17
28
|
}
|
|
18
29
|
function AlgoliaTitle() {
|
|
19
30
|
return (_jsx("a", { href: "https://algolia.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Algolia" }));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
|
|
3
3
|
export interface DefaultSearchDialogProps extends SharedProps {
|
|
4
|
+
links?: SearchLink[];
|
|
4
5
|
/**
|
|
5
6
|
* @defaultValue 'fetch'
|
|
6
7
|
*/
|
|
@@ -23,5 +24,5 @@ export interface DefaultSearchDialogProps extends SharedProps {
|
|
|
23
24
|
*/
|
|
24
25
|
allowClear?: boolean;
|
|
25
26
|
}
|
|
26
|
-
export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, ...props }: DefaultSearchDialogProps):
|
|
27
|
+
export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, links, footer, ...props }: DefaultSearchDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
//# sourceMappingURL=search-default.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAiB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,IAAS,EACT,GAAG,EACH,OAAO,EACP,IAAc,EACd,UAAkB,EAClB,KAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAsE1B"}
|
|
@@ -1,24 +1,36 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useDocsSearch } from 'fumadocs-core/search/client';
|
|
4
|
-
import { useState } from 'react';
|
|
4
|
+
import { useMemo, useState } from 'react';
|
|
5
5
|
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
6
6
|
import { useI18n } from '../../contexts/i18n.js';
|
|
7
|
-
import { SearchDialog, TagsList, TagsListItem, } from './search.js';
|
|
8
|
-
export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type = 'fetch', allowClear = false, ...props }) {
|
|
7
|
+
import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
|
|
8
|
+
export default function DefaultSearchDialog({ defaultTag, tags = [], api, delayMs, type = 'fetch', allowClear = false, links = [], footer, ...props }) {
|
|
9
9
|
const { locale } = useI18n();
|
|
10
10
|
const [tag, setTag] = useState(defaultTag);
|
|
11
11
|
const { search, setSearch, query } = useDocsSearch(type === 'fetch'
|
|
12
12
|
? {
|
|
13
13
|
type: 'fetch',
|
|
14
14
|
api,
|
|
15
|
+
locale,
|
|
16
|
+
tag,
|
|
17
|
+
delayMs,
|
|
15
18
|
}
|
|
16
19
|
: {
|
|
17
20
|
type: 'static',
|
|
18
21
|
from: api,
|
|
19
|
-
|
|
22
|
+
locale,
|
|
23
|
+
tag,
|
|
24
|
+
delayMs,
|
|
25
|
+
});
|
|
26
|
+
const defaultItems = useMemo(() => links.map(([name, link]) => ({
|
|
27
|
+
type: 'page',
|
|
28
|
+
id: name,
|
|
29
|
+
content: name,
|
|
30
|
+
url: link,
|
|
31
|
+
})), [links]);
|
|
20
32
|
useOnChange(defaultTag, (v) => {
|
|
21
33
|
setTag(v);
|
|
22
34
|
});
|
|
23
|
-
return (
|
|
35
|
+
return (_jsxs(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, ...props, children: [_jsx(SearchDialogOverlay, {}), _jsxs(SearchDialogContent, { children: [_jsxs(SearchDialogHeader, { children: [_jsx(SearchDialogIcon, {}), _jsx(SearchDialogInput, {}), _jsx(SearchDialogClose, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: defaultItems }))] }), _jsxs(SearchDialogFooter, { children: [tags.length > 0 && (_jsx(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))) })), footer] })] }));
|
|
24
36
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { type OramaCloudOptions } from 'fumadocs-core/search/client';
|
|
2
2
|
import { type ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
|
|
4
4
|
export interface OramaSearchDialogProps extends SharedProps {
|
|
5
|
+
links?: SearchLink[];
|
|
5
6
|
client: OramaCloudOptions['client'];
|
|
6
7
|
searchOptions?: OramaCloudOptions['params'];
|
|
7
8
|
index?: OramaCloudOptions['index'];
|
|
@@ -24,5 +25,5 @@ export interface OramaSearchDialogProps extends SharedProps {
|
|
|
24
25
|
/**
|
|
25
26
|
* Orama Cloud integration
|
|
26
27
|
*/
|
|
27
|
-
export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, index, ...props }: OramaSearchDialogProps):
|
|
28
|
+
export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, index, footer, links, ...props }: OramaSearchDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
28
29
|
//# sourceMappingURL=search-orama.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAgB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG1E,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,aAAa,EACb,IAAS,EACT,UAAU,EACV,SAAiB,EACjB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,KAAU,EACV,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmExB"}
|
|
@@ -1,24 +1,35 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useDocsSearch, } from 'fumadocs-core/search/client';
|
|
4
|
-
import { useState } from 'react';
|
|
4
|
+
import { useMemo, useState } from 'react';
|
|
5
5
|
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
6
|
-
import { SearchDialog, TagsList, TagsListItem, } from './search.js';
|
|
6
|
+
import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
|
|
7
|
+
import { useI18n } from '../../contexts/i18n.js';
|
|
7
8
|
/**
|
|
8
9
|
* Orama Cloud integration
|
|
9
10
|
*/
|
|
10
|
-
export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama = false, allowClear = false, index, ...props }) {
|
|
11
|
+
export default function OramaSearchDialog({ client, searchOptions, tags = [], defaultTag, showOrama = false, allowClear = false, index, footer, links = [], ...props }) {
|
|
12
|
+
const { locale } = useI18n();
|
|
11
13
|
const [tag, setTag] = useState(defaultTag);
|
|
12
14
|
const { search, setSearch, query } = useDocsSearch({
|
|
13
15
|
type: 'orama-cloud',
|
|
14
16
|
client,
|
|
15
17
|
index,
|
|
16
18
|
params: searchOptions,
|
|
17
|
-
|
|
19
|
+
locale,
|
|
20
|
+
tag,
|
|
21
|
+
});
|
|
22
|
+
const defaultItems = useMemo(() => links.map(([name, link]) => ({
|
|
23
|
+
type: 'page',
|
|
24
|
+
id: name,
|
|
25
|
+
content: name,
|
|
26
|
+
url: link,
|
|
27
|
+
})), [links]);
|
|
18
28
|
useOnChange(defaultTag, (v) => {
|
|
19
29
|
setTag(v);
|
|
20
30
|
});
|
|
21
|
-
|
|
31
|
+
const label = showOrama && _jsx(Label, {});
|
|
32
|
+
return (_jsxs(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, ...props, children: [_jsx(SearchDialogOverlay, {}), _jsxs(SearchDialogContent, { children: [_jsxs(SearchDialogHeader, { children: [_jsx(SearchDialogIcon, {}), _jsx(SearchDialogInput, {}), _jsx(SearchDialogClose, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: defaultItems })), _jsxs(SearchDialogFooter, { children: [tags.length > 0 ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), label] })) : (label), footer] })] })] }));
|
|
22
33
|
}
|
|
23
34
|
function Label() {
|
|
24
35
|
return (_jsx("a", { href: "https://orama.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Orama" }));
|
|
@@ -1,31 +1,43 @@
|
|
|
1
1
|
import { type ComponentProps, type ReactNode } from 'react';
|
|
2
|
+
import { DialogContent, DialogOverlay } from '@radix-ui/react-dialog';
|
|
2
3
|
import type { SortedResult } from 'fumadocs-core/server';
|
|
3
|
-
|
|
4
|
+
import type { SharedProps } from '../../contexts/search.js';
|
|
4
5
|
type ReactSortedResult = Omit<SortedResult, 'content'> & {
|
|
5
6
|
external?: boolean;
|
|
6
7
|
content: ReactNode;
|
|
7
8
|
};
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
value: string;
|
|
11
|
-
}
|
|
12
|
-
export interface SharedProps {
|
|
13
|
-
open: boolean;
|
|
14
|
-
onOpenChange: (open: boolean) => void;
|
|
15
|
-
/**
|
|
16
|
-
* Custom links to be displayed if search is empty
|
|
17
|
-
*/
|
|
18
|
-
links?: SearchLink[];
|
|
19
|
-
}
|
|
20
|
-
interface SearchDialogProps extends SharedProps {
|
|
9
|
+
export type { SharedProps };
|
|
10
|
+
export interface SearchDialogProps extends SharedProps {
|
|
21
11
|
search: string;
|
|
22
12
|
onSearchChange: (v: string) => void;
|
|
23
13
|
isLoading?: boolean;
|
|
24
|
-
|
|
25
|
-
results: ReactSortedResult[] | 'empty';
|
|
26
|
-
footer?: ReactNode;
|
|
14
|
+
children: ReactNode;
|
|
27
15
|
}
|
|
28
|
-
export declare function SearchDialog({ open, onOpenChange,
|
|
16
|
+
export declare function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading, children, }: SearchDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function SearchDialogHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function SearchDialogInput(props: ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function SearchDialogClose({ children, className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function SearchDialogFooter(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function SearchDialogOverlay(props: ComponentProps<typeof DialogOverlay>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function SearchDialogContent({ children, ...props }: ComponentProps<typeof DialogContent>): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function SearchDialogList({ items, Empty, Item, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
|
|
24
|
+
items: ReactSortedResult[];
|
|
25
|
+
/**
|
|
26
|
+
* Renderer for empty list UI
|
|
27
|
+
*/
|
|
28
|
+
Empty?: () => ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Renderer for items
|
|
31
|
+
*/
|
|
32
|
+
Item?: (props: {
|
|
33
|
+
item: ReactSortedResult;
|
|
34
|
+
onClick: () => void;
|
|
35
|
+
}) => ReactNode;
|
|
36
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function SearchDialogListItem({ item, className, children, ...props }: ComponentProps<'button'> & {
|
|
38
|
+
item: ReactSortedResult;
|
|
39
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare function SearchDialogIcon(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
29
41
|
export interface TagsListProps extends ComponentProps<'div'> {
|
|
30
42
|
tag?: string;
|
|
31
43
|
onTagChange: (tag: string | undefined) => void;
|
|
@@ -35,5 +47,20 @@ export declare function TagsList({ tag, onTagChange, allowClear, ...props }: Tag
|
|
|
35
47
|
export declare function TagsListItem({ value, className, ...props }: ComponentProps<'button'> & {
|
|
36
48
|
value: string;
|
|
37
49
|
}): import("react/jsx-runtime").JSX.Element;
|
|
38
|
-
export {
|
|
50
|
+
export declare function useSearch(): {
|
|
51
|
+
open: boolean;
|
|
52
|
+
onOpenChange: (open: boolean) => void;
|
|
53
|
+
search: string;
|
|
54
|
+
onSearchChange: (v: string) => void;
|
|
55
|
+
isLoading: boolean;
|
|
56
|
+
};
|
|
57
|
+
export declare function useTagsList(): {
|
|
58
|
+
value?: string;
|
|
59
|
+
onValueChange: (value: string | undefined) => void;
|
|
60
|
+
allowClear: boolean;
|
|
61
|
+
};
|
|
62
|
+
export declare function useSearchList(): {
|
|
63
|
+
active: string | null;
|
|
64
|
+
setActive: (v: string | null) => void;
|
|
65
|
+
};
|
|
39
66
|
//# sourceMappingURL=search.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,56 +1,81 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { FileText, Hash, LoaderCircle, Search as SearchIcon, Text, } from '../../icons.js';
|
|
4
|
-
import { useCallback, useEffect, useMemo, useState, } from 'react';
|
|
5
|
-
import { useI18n } from '../../contexts/i18n.js';
|
|
4
|
+
import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
|
|
5
|
+
import { I18nLabel, useI18n } from '../../contexts/i18n.js';
|
|
6
6
|
import { cn } from '../../utils/cn.js';
|
|
7
7
|
import { buttonVariants } from '../../components/ui/button.js';
|
|
8
8
|
import { Dialog, DialogContent, DialogOverlay, DialogTitle, } from '@radix-ui/react-dialog';
|
|
9
9
|
import { cva } from 'class-variance-authority';
|
|
10
10
|
import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
|
|
11
|
-
import {
|
|
12
|
-
|
|
11
|
+
import { useRouter } from 'fumadocs-core/framework';
|
|
12
|
+
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
13
|
+
const Context = createContext(null);
|
|
14
|
+
const ListContext = createContext(null);
|
|
15
|
+
const TagsListContext = createContext(null);
|
|
16
|
+
export function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, children, }) {
|
|
17
|
+
const [active, setActive] = useState(null);
|
|
18
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(Context.Provider, { value: useMemo(() => ({
|
|
19
|
+
open,
|
|
20
|
+
onOpenChange,
|
|
21
|
+
search,
|
|
22
|
+
onSearchChange,
|
|
23
|
+
active,
|
|
24
|
+
setActive,
|
|
25
|
+
isLoading,
|
|
26
|
+
}), [active, isLoading, onOpenChange, onSearchChange, open, search]), children: children }) }));
|
|
27
|
+
}
|
|
28
|
+
export function SearchDialogHeader(props) {
|
|
29
|
+
return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-2 px-3', props.className) }));
|
|
30
|
+
}
|
|
31
|
+
export function SearchDialogInput(props) {
|
|
32
|
+
const { text } = useI18n();
|
|
33
|
+
const { search, onSearchChange } = useSearch();
|
|
34
|
+
return (_jsx("input", { ...props, value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }));
|
|
35
|
+
}
|
|
36
|
+
export function SearchDialogClose({ children = 'Esc', className, ...props }) {
|
|
37
|
+
const { onOpenChange } = useSearch();
|
|
38
|
+
return (_jsx("button", { type: "button", onClick: () => onOpenChange(false), className: cn(buttonVariants({
|
|
39
|
+
color: 'outline',
|
|
40
|
+
className: 'text-xs p-1.5',
|
|
41
|
+
}), className), ...props, children: children }));
|
|
42
|
+
}
|
|
43
|
+
export function SearchDialogFooter(props) {
|
|
44
|
+
return (_jsx("div", { ...props, className: cn('mt-auto border-t p-3 empty:hidden', props.className) }));
|
|
45
|
+
}
|
|
46
|
+
export function SearchDialogOverlay(props) {
|
|
47
|
+
return (_jsx(DialogOverlay, { ...props, className: cn('fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in', props.className) }));
|
|
48
|
+
}
|
|
49
|
+
export function SearchDialogContent({ children, ...props }) {
|
|
13
50
|
const { text } = useI18n();
|
|
14
|
-
|
|
15
|
-
const defaultItems = useMemo(() => links.map(([name, link]) => ({
|
|
16
|
-
type: 'page',
|
|
17
|
-
id: name,
|
|
18
|
-
content: name,
|
|
19
|
-
url: link,
|
|
20
|
-
})), [links]);
|
|
21
|
-
return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
|
|
22
|
-
onSearchChange(e.target.value);
|
|
23
|
-
setActive(undefined);
|
|
24
|
-
}, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search", onClick: () => onOpenChange(false), className: cn(buttonVariants({
|
|
25
|
-
color: 'outline',
|
|
26
|
-
className: 'text-xs p-1.5',
|
|
27
|
-
})), children: "Esc" })] }), props.results !== 'empty' || defaultItems.length > 0 ? (_jsx(SearchResults, { active: active, onActiveChange: setActive, items: props.results === 'empty' ? defaultItems : props.results, onSelect: () => onOpenChange(false) })) : null, _jsx("div", { className: "mt-auto flex flex-col border-t p-3 empty:hidden", children: footer })] })] }));
|
|
51
|
+
return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in', props.className), children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), children] }));
|
|
28
52
|
}
|
|
29
53
|
const icons = {
|
|
30
54
|
text: _jsx(Text, { className: "size-4 text-fd-muted-foreground" }),
|
|
31
55
|
heading: _jsx(Hash, { className: "size-4 text-fd-muted-foreground" }),
|
|
32
56
|
page: _jsx(FileText, { className: "size-4 text-fd-muted-foreground" }),
|
|
33
57
|
};
|
|
34
|
-
function
|
|
35
|
-
const
|
|
58
|
+
export function SearchDialogList({ items, Empty = () => (_jsx("div", { className: "py-12 text-center text-sm", children: _jsx(I18nLabel, { label: "searchNoResult" }) })), Item = (props) => _jsx(SearchDialogListItem, { ...props }), ...props }) {
|
|
59
|
+
const [active, setActive] = useState(items.at(0)?.id ?? null);
|
|
60
|
+
const { onOpenChange } = useSearch();
|
|
36
61
|
const router = useRouter();
|
|
37
62
|
const onOpen = ({ external, url }) => {
|
|
38
63
|
if (external)
|
|
39
64
|
window.open(url, '_blank')?.focus();
|
|
40
65
|
else
|
|
41
66
|
router.push(url);
|
|
42
|
-
|
|
67
|
+
onOpenChange(false);
|
|
43
68
|
};
|
|
44
69
|
const onKey = useEffectEvent((e) => {
|
|
45
70
|
if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
|
|
46
|
-
|
|
47
|
-
if (idx === -1)
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
71
|
+
let idx = items.findIndex((item) => item.id === active);
|
|
72
|
+
if (idx === -1)
|
|
73
|
+
idx = 0;
|
|
74
|
+
else if (e.key === 'ArrowDown')
|
|
75
|
+
idx++;
|
|
76
|
+
else
|
|
77
|
+
idx--;
|
|
78
|
+
setActive(items.at(idx % items.length)?.id ?? null);
|
|
54
79
|
e.preventDefault();
|
|
55
80
|
}
|
|
56
81
|
if (e.key === 'Enter') {
|
|
@@ -66,21 +91,29 @@ function SearchResults({ items, active = items.at(0)?.id, onActiveChange, onSele
|
|
|
66
91
|
window.removeEventListener('keydown', onKey);
|
|
67
92
|
};
|
|
68
93
|
}, [onKey]);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
94
|
+
useOnChange(items, () => {
|
|
95
|
+
if (items.length > 0)
|
|
96
|
+
setActive(items[0].id);
|
|
97
|
+
});
|
|
98
|
+
return (_jsx("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: _jsxs(ListContext.Provider, { value: useMemo(() => ({
|
|
99
|
+
active,
|
|
100
|
+
setActive,
|
|
101
|
+
}), [active]), children: [items.length === 0 && Empty(), items.map((item) => (_jsx(Fragment, { children: Item({ item, onClick: () => onOpen(item) }) }, item.id)))] }) }));
|
|
75
102
|
}
|
|
76
|
-
function
|
|
77
|
-
|
|
103
|
+
export function SearchDialogListItem({ item, className, children, ...props }) {
|
|
104
|
+
const { active: activeId, setActive } = useSearchList();
|
|
105
|
+
const active = item.id === activeId;
|
|
106
|
+
return (_jsxs("button", { type: "button", ref: useCallback((element) => {
|
|
78
107
|
if (active && element) {
|
|
79
108
|
element.scrollIntoView({
|
|
80
109
|
block: 'nearest',
|
|
81
110
|
});
|
|
82
111
|
}
|
|
83
|
-
}, [active]),
|
|
112
|
+
}, [active]), "aria-selected": active, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active && 'bg-fd-accent text-fd-accent-foreground', className), onPointerMove: () => setActive(item.id), ...props, children: [item.type !== 'page' && (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })), icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: children ?? item.content })] }));
|
|
113
|
+
}
|
|
114
|
+
export function SearchDialogIcon(props) {
|
|
115
|
+
const { isLoading } = useSearch();
|
|
116
|
+
return (_jsxs("div", { ...props, className: cn('relative size-4', props.className), children: [_jsx(LoaderCircle, { className: cn('absolute size-full animate-spin text-fd-primary transition-opacity', !isLoading && 'opacity-0') }), _jsx(SearchIcon, { className: cn('absolute size-full text-fd-muted-foreground transition-opacity', isLoading && 'opacity-0') })] }));
|
|
84
117
|
}
|
|
85
118
|
const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors', {
|
|
86
119
|
variants: {
|
|
@@ -89,7 +122,6 @@ const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text
|
|
|
89
122
|
},
|
|
90
123
|
},
|
|
91
124
|
});
|
|
92
|
-
const TagsListContext = createContext('TagsList');
|
|
93
125
|
export function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
|
|
94
126
|
return (_jsx("div", { ...props, className: cn('flex items-center gap-1 flex-wrap', props.className), children: _jsx(TagsListContext.Provider, { value: useMemo(() => ({
|
|
95
127
|
value: tag,
|
|
@@ -98,8 +130,27 @@ export function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
|
|
|
98
130
|
}), [allowClear, onTagChange, tag]), children: props.children }) }));
|
|
99
131
|
}
|
|
100
132
|
export function TagsListItem({ value, className, ...props }) {
|
|
101
|
-
const
|
|
102
|
-
|
|
103
|
-
|
|
133
|
+
const { onValueChange, value: selectedValue, allowClear } = useTagsList();
|
|
134
|
+
const selected = value === selectedValue;
|
|
135
|
+
return (_jsx("button", { type: "button", "data-active": selected, className: cn(itemVariants({ active: selected, className })), onClick: () => {
|
|
136
|
+
onValueChange(selected && allowClear ? undefined : value);
|
|
104
137
|
}, tabIndex: -1, ...props, children: props.children }));
|
|
105
138
|
}
|
|
139
|
+
export function useSearch() {
|
|
140
|
+
const ctx = useContext(Context);
|
|
141
|
+
if (!ctx)
|
|
142
|
+
throw new Error('Missing <SearchDialog />');
|
|
143
|
+
return ctx;
|
|
144
|
+
}
|
|
145
|
+
export function useTagsList() {
|
|
146
|
+
const ctx = useContext(TagsListContext);
|
|
147
|
+
if (!ctx)
|
|
148
|
+
throw new Error('Missing <TagsList />');
|
|
149
|
+
return ctx;
|
|
150
|
+
}
|
|
151
|
+
export function useSearchList() {
|
|
152
|
+
const ctx = useContext(ListContext);
|
|
153
|
+
if (!ctx)
|
|
154
|
+
throw new Error('Missing <SearchDialogList />');
|
|
155
|
+
return ctx;
|
|
156
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import
|
|
3
|
-
export interface TabsProps extends
|
|
1
|
+
import { type ComponentProps, type ReactNode } from 'react';
|
|
2
|
+
import * as Primitive from './ui/tabs.js';
|
|
3
|
+
export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
|
|
4
4
|
/**
|
|
5
5
|
* Identifier for Sharing value of tabs
|
|
6
6
|
*/
|
|
@@ -30,13 +30,13 @@ export interface TabsProps extends BaseProps {
|
|
|
30
30
|
}
|
|
31
31
|
export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
32
32
|
export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
33
|
-
export declare function Tabs({ groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
export
|
|
33
|
+
export declare function Tabs({ ref, className, groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export interface TabProps extends Omit<ComponentProps<typeof Primitive.TabsContent>, 'value'> {
|
|
35
35
|
/**
|
|
36
36
|
* Value of tab, detect from index if unspecified.
|
|
37
37
|
*/
|
|
38
38
|
value?: string;
|
|
39
|
-
}
|
|
39
|
+
}
|
|
40
40
|
export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
export declare function TabsContent({ value, className, ...props }:
|
|
41
|
+
export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
|
|
42
42
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAsBvC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAsFX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAoB9C"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useState, } from 'react';
|
|
3
|
+
import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { cn } from '../utils/cn.js';
|
|
5
5
|
import * as Primitive from './ui/tabs.js';
|
|
6
6
|
import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
|
|
7
|
+
import { mergeRefs } from '../utils/merge-refs.js';
|
|
7
8
|
const listeners = new Map();
|
|
8
9
|
function addChangeListener(id, listener) {
|
|
9
10
|
const list = listeners.get(id) ?? [];
|
|
@@ -23,7 +24,8 @@ function useTabContext() {
|
|
|
23
24
|
}
|
|
24
25
|
export const TabsList = Primitive.TabsList;
|
|
25
26
|
export const TabsTrigger = Primitive.TabsTrigger;
|
|
26
|
-
export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
|
|
27
|
+
export function Tabs({ ref, className, groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
|
|
28
|
+
const tabsRef = useRef(null);
|
|
27
29
|
const [value, setValue] = useState(defaultValue);
|
|
28
30
|
const valueToIdMap = useMemo(() => new Map(), []);
|
|
29
31
|
const collection = useMemo(() => [], []);
|
|
@@ -52,11 +54,12 @@ export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0,
|
|
|
52
54
|
for (const [value, id] of valueToIdMap.entries()) {
|
|
53
55
|
if (id === hash) {
|
|
54
56
|
setValue(value);
|
|
57
|
+
tabsRef.current?.scrollIntoView();
|
|
55
58
|
break;
|
|
56
59
|
}
|
|
57
60
|
}
|
|
58
61
|
}, [valueToIdMap]);
|
|
59
|
-
return (_jsxs(Primitive.Tabs, { value: value, onValueChange: (v) => {
|
|
62
|
+
return (_jsxs(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
|
|
60
63
|
if (updateAnchor) {
|
|
61
64
|
const id = valueToIdMap.get(v);
|
|
62
65
|
if (id) {
|
|
@@ -75,7 +78,7 @@ export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0,
|
|
|
75
78
|
else {
|
|
76
79
|
setValue(v);
|
|
77
80
|
}
|
|
78
|
-
},
|
|
81
|
+
}, className: cn('my-4', className), ...props, children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
|
|
79
82
|
}
|
|
80
83
|
export function Tab({ value, ...props }) {
|
|
81
84
|
const { items } = useTabContext();
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { type ComponentType, type ReactNode } from 'react';
|
|
2
|
-
import type { SearchLink, SharedProps } from '../components/dialog/search.js';
|
|
3
2
|
interface HotKey {
|
|
4
3
|
display: ReactNode;
|
|
5
4
|
/**
|
|
@@ -7,6 +6,15 @@ interface HotKey {
|
|
|
7
6
|
*/
|
|
8
7
|
key: string | ((e: KeyboardEvent) => boolean);
|
|
9
8
|
}
|
|
9
|
+
export interface SharedProps {
|
|
10
|
+
open: boolean;
|
|
11
|
+
onOpenChange: (open: boolean) => void;
|
|
12
|
+
}
|
|
13
|
+
export type SearchLink = [name: string, href: string];
|
|
14
|
+
export interface TagItem {
|
|
15
|
+
name: string;
|
|
16
|
+
value: string;
|
|
17
|
+
}
|
|
10
18
|
export interface SearchProviderProps {
|
|
11
19
|
/**
|
|
12
20
|
* Preload search dialog before opening it
|
|
@@ -33,7 +41,7 @@ export interface SearchProviderProps {
|
|
|
33
41
|
/**
|
|
34
42
|
* Additional props to the dialog
|
|
35
43
|
*/
|
|
36
|
-
options?: Partial<SharedProps
|
|
44
|
+
options?: Partial<SharedProps & Record<string, unknown>>;
|
|
37
45
|
children?: ReactNode;
|
|
38
46
|
}
|
|
39
47
|
interface SearchContextType {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/contexts/search.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/contexts/search.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAGf,UAAU,MAAM;IACd,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,YAAY,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAQD,wBAAgB,gBAAgB,IAAI,iBAAiB,CAEpD;AAcD,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,QAAQ,EACR,OAAc,EACd,OAAO,EACP,MASC,EACD,KAAK,GACN,EAAE,mBAAmB,2CAwCrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,aAI/D"}
|
package/dist/contexts/search.js
CHANGED
|
@@ -42,7 +42,9 @@ export function SearchProvider({ SearchDialog, children, preload = true, options
|
|
|
42
42
|
window.removeEventListener('keydown', handler);
|
|
43
43
|
};
|
|
44
44
|
}, [hotKey]);
|
|
45
|
-
return (_jsxs(SearchContext.Provider, { value: useMemo(() => ({ enabled: true, hotKey, setOpenSearch: setIsOpen }), [hotKey]), children: [isOpen !== undefined && (_jsx(SearchDialog, { open: isOpen, onOpenChange: setIsOpen,
|
|
45
|
+
return (_jsxs(SearchContext.Provider, { value: useMemo(() => ({ enabled: true, hotKey, setOpenSearch: setIsOpen }), [hotKey]), children: [isOpen !== undefined && (_jsx(SearchDialog, { open: isOpen, onOpenChange: setIsOpen,
|
|
46
|
+
// @ts-expect-error -- insert prop for official UIs
|
|
47
|
+
links: links, ...options })), children] }));
|
|
46
48
|
}
|
|
47
49
|
/**
|
|
48
50
|
* Show children only when search is enabled via React Context
|
package/dist/layouts/docs.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { PageTree } from 'fumadocs-core/server';
|
|
2
2
|
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
3
|
-
import { type
|
|
3
|
+
import { type LinkItemType } from '../layouts/links.js';
|
|
4
4
|
import { type BaseLayoutProps } from './shared.js';
|
|
5
5
|
import { CollapsibleControl, Navbar, NavbarSidebarTrigger } from '../layouts/docs-client.js';
|
|
6
6
|
import { type SidebarOptions } from '../layouts/docs/shared.js';
|
|
@@ -15,15 +15,6 @@ export interface DocsLayoutProps extends BaseLayoutProps {
|
|
|
15
15
|
*/
|
|
16
16
|
containerProps?: HTMLAttributes<HTMLDivElement>;
|
|
17
17
|
}
|
|
18
|
-
export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar, searchToggle, disableThemeSwitch, themeSwitch, i18n, children, ...props }: DocsLayoutProps):
|
|
19
|
-
export declare function DocsLayoutSidebar({ collapsible, components, nav, links, footer, banner, ...props }: Omit<SidebarOptions, 'tabs'> & {
|
|
20
|
-
links?: LinkItemType[];
|
|
21
|
-
nav?: ReactNode;
|
|
22
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export declare function DocsLayoutSidebarFooter({ i18n, themeSwitch, links, }: {
|
|
24
|
-
i18n?: DocsLayoutProps['i18n'];
|
|
25
|
-
links?: IconItemType[];
|
|
26
|
-
themeSwitch?: DocsLayoutProps['themeSwitch'];
|
|
27
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled, collapsible: sidebarCollapsible, component: sidebarComponent, components: sidebarComponents, ...sidebar }, searchToggle, disableThemeSwitch, themeSwitch, i18n, children, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
28
19
|
export { CollapsibleControl, Navbar, NavbarSidebarTrigger, type LinkItemType };
|
|
29
20
|
//# sourceMappingURL=docs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAYrE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAElB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,WAAW,EAAE,kBAAyB,EACtC,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,YAAiB,EACjB,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAyIjB;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC"}
|
package/dist/layouts/docs.js
CHANGED
|
@@ -4,8 +4,7 @@ import { Languages, Sidebar as SidebarIcon } from '../icons.js';
|
|
|
4
4
|
import { cn } from '../utils/cn.js';
|
|
5
5
|
import { buttonVariants } from '../components/ui/button.js';
|
|
6
6
|
import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
|
|
7
|
-
import {
|
|
8
|
-
import { BaseLinkItem, } from '../layouts/links.js';
|
|
7
|
+
import { BaseLinkItem } from '../layouts/links.js';
|
|
9
8
|
import { RootToggle } from '../components/layout/root-toggle.js';
|
|
10
9
|
import { getLinks } from './shared.js';
|
|
11
10
|
import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle.js';
|
|
@@ -16,24 +15,27 @@ import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/sha
|
|
|
16
15
|
import { NavProvider } from '../contexts/layout.js';
|
|
17
16
|
import Link from 'fumadocs-core/link';
|
|
18
17
|
import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
|
|
19
|
-
import { HideIfEmpty } from '
|
|
20
|
-
export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
|
|
21
|
-
const tabs = useMemo(() => getSidebarTabsFromOptions(
|
|
18
|
+
import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
|
|
19
|
+
export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, collapsible: sidebarCollapsible = true, component: sidebarComponent, components: sidebarComponents, ...sidebar } = {}, searchToggle = {}, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
|
|
20
|
+
const tabs = useMemo(() => getSidebarTabsFromOptions(sidebarTabs, props.tree) ?? [], [sidebarTabs, props.tree]);
|
|
22
21
|
const links = getLinks(props.links ?? [], props.githubUrl);
|
|
23
22
|
const variables = cn('md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px]', !nav.component && nav.enabled !== false
|
|
24
23
|
? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
|
|
25
24
|
: undefined);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
const sidebarFooter = (_jsx(HideIfEmpty, { children: _jsxs("div", { className: "flex items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden", children: links
|
|
26
|
+
.filter((item) => item.type === 'icon')
|
|
27
|
+
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, themeSwitch.enabled !== false &&
|
|
28
|
+
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode })))] }) }));
|
|
29
|
+
sidebarComponent ?? (sidebarComponent = _jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebar, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
30
30
|
color: 'ghost',
|
|
31
31
|
size: 'icon-sm',
|
|
32
|
-
|
|
32
|
+
className: 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden',
|
|
33
|
+
})), children: _jsx(SidebarIcon, {}) }))] }), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), searchToggle.enabled !== false &&
|
|
34
|
+
(searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" }))), sidebar.banner] }) }), _jsxs(SidebarViewport, { children: [links
|
|
33
35
|
.filter((v) => v.type !== 'icon')
|
|
34
|
-
.map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
.map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { children: [sidebarFooter, sidebar.footer] }) })] })] }));
|
|
37
|
+
return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
|
|
38
|
+
(nav.component ?? (_jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle?.enabled !== false &&
|
|
39
|
+
(searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsx(NavbarSidebarTrigger, { className: "p-2 -me-1.5 md:hidden" })] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [sidebarEnabled && sidebarComponent, children] })] }) }));
|
|
38
40
|
}
|
|
39
41
|
export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
|
package/dist/layouts/home.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { type HTMLAttributes } from 'react';
|
|
2
|
-
import { type NavOptions } from '
|
|
3
|
-
import { type BaseLayoutProps } from './shared.js';
|
|
2
|
+
import { type BaseLayoutProps, type NavOptions } from './shared.js';
|
|
4
3
|
export interface HomeLayoutProps extends BaseLayoutProps {
|
|
5
4
|
nav?: Partial<NavOptions & {
|
|
6
5
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,eAAe,EAAY,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AA8B3E,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAmCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAgB,EAChB,YAAiB,GAClB,EAAE,eAAe,2CAmGjB"}
|
package/dist/layouts/home.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment, useMemo } from 'react';
|
|
3
|
-
import { slot, slots } from '../layouts/shared.js';
|
|
4
3
|
import { cn } from '../utils/cn.js';
|
|
5
4
|
import { getLinks } from './shared.js';
|
|
6
5
|
import { NavProvider } from '../contexts/layout.js';
|
|
@@ -13,22 +12,25 @@ import Link from 'fumadocs-core/link';
|
|
|
13
12
|
import { Menu, MenuContent, MenuLinkItem, MenuTrigger, } from '../layouts/home/menu.js';
|
|
14
13
|
import { buttonVariants } from '../components/ui/button.js';
|
|
15
14
|
export function HomeLayout(props) {
|
|
16
|
-
const { nav, links, githubUrl, i18n, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, searchToggle, ...rest } = props;
|
|
17
|
-
return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [
|
|
15
|
+
const { nav = {}, links, githubUrl, i18n, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, searchToggle, ...rest } = props;
|
|
16
|
+
return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [nav.enabled !== false &&
|
|
17
|
+
(nav.component ?? (_jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl }))), props.children] }) }));
|
|
18
18
|
}
|
|
19
|
-
export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch, searchToggle, }) {
|
|
19
|
+
export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
|
|
20
20
|
const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
|
|
21
21
|
const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
|
|
22
22
|
const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
|
|
23
23
|
return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
|
|
24
24
|
.filter((item) => !isSecondary(item))
|
|
25
|
-
.map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [
|
|
25
|
+
.map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [searchToggle.enabled !== false && (_jsxs(_Fragment, { children: [searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2 lg:hidden", hideIfDisabled: true })), searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px] max-lg:hidden", hideIfDisabled: true }))] })), themeSwitch.enabled !== false &&
|
|
26
|
+
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode }))), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
|
|
26
27
|
size: 'icon',
|
|
27
28
|
color: 'ghost',
|
|
28
29
|
className: 'group -me-1.5',
|
|
29
30
|
})), enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "!size-5.5 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
|
|
30
31
|
.filter((item) => !isSecondary(item))
|
|
31
|
-
.map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null,
|
|
32
|
+
.map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, themeSwitch.enabled !== false &&
|
|
33
|
+
(themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] })] })] })] }));
|
|
32
34
|
}
|
|
33
35
|
function NavbarLinkItem({ item, ...props }) {
|
|
34
36
|
if (item.type === 'custom')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,
|
|
1
|
+
{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAIL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AAsLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/layouts/notebook.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment, useMemo } from 'react';
|
|
3
|
-
import { getLinks
|
|
3
|
+
import { getLinks } from '../layouts/shared.js';
|
|
4
4
|
import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
|
|
5
5
|
import { TreeContextProvider } from '../contexts/tree.js';
|
|
6
6
|
import { cn } from '../utils/cn.js';
|
|
@@ -16,7 +16,7 @@ import { NavProvider } from '../contexts/layout.js';
|
|
|
16
16
|
import { RootToggle } from '../components/layout/root-toggle.js';
|
|
17
17
|
import Link from 'fumadocs-core/link';
|
|
18
18
|
import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
|
|
19
|
-
import { HideIfEmpty } from '
|
|
19
|
+
import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
|
|
20
20
|
export function DocsLayout(props) {
|
|
21
21
|
const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, } = props;
|
|
22
22
|
const navMode = nav.mode ?? 'auto';
|
|
@@ -38,22 +38,26 @@ export function DocsLayout(props) {
|
|
|
38
38
|
size: 'icon-sm',
|
|
39
39
|
color: 'ghost',
|
|
40
40
|
className: 'text-fd-muted-foreground',
|
|
41
|
-
})), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null,
|
|
41
|
+
})), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, themeSwitch.enabled !== false &&
|
|
42
|
+
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' }))), sidebarFooter] }) })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), props.children] }) }) }));
|
|
42
43
|
}
|
|
43
|
-
function DocsNavbar({ links, tabs, ...props }) {
|
|
44
|
+
function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props }) {
|
|
44
45
|
const navMode = props.nav?.mode ?? 'auto';
|
|
45
46
|
const sidebarCollapsible = props.sidebar?.collapsible ?? true;
|
|
46
47
|
const nav = (_jsx(Link, { href: props.nav?.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold empty:hidden', navMode === 'auto' && 'md:hidden'), children: props.nav?.title }));
|
|
47
48
|
return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex border-b px-4 flex-1', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
48
49
|
color: 'ghost',
|
|
49
50
|
size: 'icon-sm',
|
|
50
|
-
}), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }),
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
}), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), searchToggle.enabled !== false &&
|
|
52
|
+
(searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
|
|
53
|
+
? 'rounded-xl max-w-sm ps-2.5'
|
|
54
|
+
: 'max-w-[240px]') }))), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end", children: [_jsx("div", { className: "flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden", children: links
|
|
53
55
|
.filter((item) => item.type !== 'icon')
|
|
54
|
-
.map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground" }, i))) }), props.nav?.children,
|
|
56
|
+
.map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground" }, i))) }), props.nav?.children, searchToggle.enabled !== false &&
|
|
57
|
+
(searchToggle.components?.sm ?? (_jsx(SearchToggle, { hideIfDisabled: true, className: "p-2 md:hidden" }))), _jsx(NavbarSidebarTrigger, { className: "p-2 -me-1.5 md:hidden" }), links
|
|
55
58
|
.filter((item) => item.type === 'icon')
|
|
56
|
-
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), props.i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null,
|
|
59
|
+
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), props.i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, themeSwitch.enabled !== false &&
|
|
60
|
+
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: themeSwitch.mode ?? 'light-dark-system' }))), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
57
61
|
color: 'secondary',
|
|
58
62
|
size: 'icon-sm',
|
|
59
63
|
}), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
|
package/dist/layouts/shared.d.ts
CHANGED
|
@@ -54,13 +54,4 @@ export { type LinkItemType };
|
|
|
54
54
|
* Get Links Items with shortcuts
|
|
55
55
|
*/
|
|
56
56
|
export declare function getLinks(links?: LinkItemType[], githubUrl?: string): LinkItemType[];
|
|
57
|
-
export declare function slot(obj: {
|
|
58
|
-
enabled?: boolean;
|
|
59
|
-
component?: ReactNode;
|
|
60
|
-
} | undefined, def: ReactNode): ReactNode;
|
|
61
|
-
export declare function slots<Comp extends Record<string, ReactNode>>(variant: keyof Comp, obj: {
|
|
62
|
-
enabled?: boolean;
|
|
63
|
-
components?: Comp;
|
|
64
|
-
} | undefined, def: ReactNode): ReactNode;
|
|
65
|
-
export declare function omit<T extends Record<string, unknown>, Keys extends keyof T>(obj: T, ...keys: Keys[]): Omit<T, Keys>;
|
|
66
57
|
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;YAClB,EAAE,EAAE,SAAS,CAAC;YACd,EAAE,EAAE,SAAS,CAAC;SACf,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC;AAE7B;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,GAAE,YAAY,EAAO,EAC1B,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;YAClB,EAAE,EAAE,SAAS,CAAC;YACd,EAAE,EAAE,SAAS,CAAC;SACf,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC;AAE7B;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,GAAE,YAAY,EAAO,EAC1B,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB"}
|
package/dist/layouts/shared.js
CHANGED
|
@@ -18,24 +18,3 @@ export function getLinks(links = [], githubUrl) {
|
|
|
18
18
|
];
|
|
19
19
|
return result;
|
|
20
20
|
}
|
|
21
|
-
export function slot(obj, def) {
|
|
22
|
-
if (obj?.enabled === false)
|
|
23
|
-
return;
|
|
24
|
-
if (obj?.component !== undefined)
|
|
25
|
-
return obj.component;
|
|
26
|
-
return def;
|
|
27
|
-
}
|
|
28
|
-
export function slots(variant, obj, def) {
|
|
29
|
-
if (obj?.enabled === false)
|
|
30
|
-
return;
|
|
31
|
-
if (obj?.components?.[variant] !== undefined)
|
|
32
|
-
return obj.components[variant];
|
|
33
|
-
return def;
|
|
34
|
-
}
|
|
35
|
-
export function omit(obj, ...keys) {
|
|
36
|
-
const clone = { ...obj };
|
|
37
|
-
for (const key of keys) {
|
|
38
|
-
delete clone[key];
|
|
39
|
-
}
|
|
40
|
-
return clone;
|
|
41
|
-
}
|
package/dist/page.d.ts
CHANGED
|
@@ -72,7 +72,7 @@ type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
|
|
|
72
72
|
style?: 'normal' | 'clerk';
|
|
73
73
|
};
|
|
74
74
|
type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
|
|
75
|
-
export declare function DocsPage({ editOnGithub, breadcrumb, footer, lastUpdate, container, full, tableOfContentPopover: { enabled: tocPopoverEnabled, component:
|
|
75
|
+
export declare function DocsPage({ editOnGithub, breadcrumb: { enabled: breadcrumbEnabled, component: breadcrumb, ...breadcrumbProps }, footer, lastUpdate, container, full, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, toc, article, children, }: DocsPageProps): import("react/jsx-runtime").JSX.Element;
|
|
76
76
|
export declare function EditOnGitHub(props: ComponentProps<'a'>): import("react/jsx-runtime").JSX.Element;
|
|
77
77
|
/**
|
|
78
78
|
* Add typography styles
|
package/dist/page.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}
|
package/dist/page.js
CHANGED
|
@@ -4,9 +4,8 @@ import { cn } from './utils/cn.js';
|
|
|
4
4
|
import { buttonVariants } from './components/ui/button.js';
|
|
5
5
|
import { Edit } from './icons.js';
|
|
6
6
|
import { I18nLabel } from './contexts/i18n.js';
|
|
7
|
-
import { slot } from './layouts/shared.js';
|
|
8
7
|
import { PageArticle, PageBreadcrumb, PageFooter, PageLastUpdate, PageRoot, PageTOC, PageTOCItems, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverItems, PageTOCPopoverTrigger, PageTOCTitle, } from './layouts/docs/page.js';
|
|
9
|
-
export function DocsPage({ editOnGithub, breadcrumb, footer, lastUpdate, container, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component:
|
|
8
|
+
export function DocsPage({ editOnGithub, breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer = {}, lastUpdate, container, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], article, children, }) {
|
|
10
9
|
const isTocRequired = toc.length > 0 ||
|
|
11
10
|
tocOptions.footer !== undefined ||
|
|
12
11
|
tocOptions.header !== undefined;
|
|
@@ -18,7 +17,11 @@ export function DocsPage({ editOnGithub, breadcrumb, footer, lastUpdate, contain
|
|
|
18
17
|
return (_jsxs(PageRoot, { toc: {
|
|
19
18
|
toc,
|
|
20
19
|
single: tocOptions.single,
|
|
21
|
-
}, ...container, children: [
|
|
20
|
+
}, ...container, children: [tocPopoverEnabled &&
|
|
21
|
+
(tocPopover ?? (_jsxs(PageTOCPopover, { children: [_jsx(PageTOCPopoverTrigger, {}), _jsxs(PageTOCPopoverContent, { children: [tocPopoverOptions.header, _jsx(PageTOCPopoverItems, { variant: tocPopoverOptions.style }), tocPopoverOptions.footer] })] }))), _jsxs(PageArticle, { ...article, children: [breadcrumbEnabled &&
|
|
22
|
+
(breadcrumb ?? _jsx(PageBreadcrumb, { ...breadcrumbProps })), children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [editOnGithub && (_jsx(EditOnGitHub, { href: `https://github.com/${editOnGithub.owner}/${editOnGithub.repo}/blob/${editOnGithub.sha}/${editOnGithub.path.startsWith('/') ? editOnGithub.path.slice(1) : editOnGithub.path}` })), lastUpdate && _jsx(PageLastUpdate, { date: new Date(lastUpdate) })] }), footer.enabled !== false &&
|
|
23
|
+
(footer.component ?? _jsx(PageFooter, { items: footer.items }))] }), tocEnabled &&
|
|
24
|
+
(tocReplace ?? (_jsxs(PageTOC, { children: [tocOptions.header, _jsx(PageTOCTitle, {}), _jsx(PageTOCItems, { variant: tocOptions.style }), tocOptions.footer] })))] }));
|
|
22
25
|
}
|
|
23
26
|
export function EditOnGitHub(props) {
|
|
24
27
|
return (_jsx("a", { target: "_blank", rel: "noreferrer noopener", ...props, className: cn(buttonVariants({
|
package/dist/provider/base.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import type { DefaultSearchDialogProps } from '../components/dialog/search-defau
|
|
|
4
4
|
import { type SearchProviderProps } from '../contexts/search.js';
|
|
5
5
|
import { type LocaleItem, type Translations } from '../contexts/i18n.js';
|
|
6
6
|
interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
|
|
7
|
-
options?: Partial<DefaultSearchDialogProps
|
|
7
|
+
options?: Partial<DefaultSearchDialogProps>;
|
|
8
8
|
/**
|
|
9
9
|
* Enable search functionality
|
|
10
10
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/provider/base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,
|
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/provider/base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAE5C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;QAChE;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IAEF,IAAI,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;IAE3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAEvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAW,EACX,KAAU,EACV,MAAM,EACN,IAAI,GACL,EAAE,iBAAiB,2CAgCnB"}
|
package/dist/style.css
CHANGED
|
@@ -1914,11 +1914,6 @@
|
|
|
1914
1914
|
display: none;
|
|
1915
1915
|
}
|
|
1916
1916
|
}
|
|
1917
|
-
.data-\[empty\=true\]\:hidden {
|
|
1918
|
-
&[data-empty="true"] {
|
|
1919
|
-
display: none;
|
|
1920
|
-
}
|
|
1921
|
-
}
|
|
1922
1917
|
.data-\[motion\=from-end\]\:animate-fd-enterFromRight {
|
|
1923
1918
|
&[data-motion="from-end"] {
|
|
1924
1919
|
animation: var(--animate-fd-enterFromRight);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fumadocs-ui",
|
|
3
|
-
"version": "15.5.
|
|
3
|
+
"version": "15.5.1",
|
|
4
4
|
"description": "The framework for building a documentation website in Next.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"NextJs",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"react-medium-image-zoom": "^5.2.14",
|
|
90
90
|
"react-remove-scroll": "^2.6.3",
|
|
91
91
|
"tailwind-merge": "^3.3.0",
|
|
92
|
-
"fumadocs-core": "15.5.
|
|
92
|
+
"fumadocs-core": "15.5.1"
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
95
|
"@next/eslint-plugin-next": "^15.3.3",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"tsc-alias": "^1.8.16",
|
|
103
103
|
"@fumadocs/cli": "0.2.0",
|
|
104
104
|
"eslint-config-custom": "0.0.0",
|
|
105
|
-
"fumadocs-core": "15.5.
|
|
105
|
+
"fumadocs-core": "15.5.1",
|
|
106
106
|
"tsconfig": "0.0.0"
|
|
107
107
|
},
|
|
108
108
|
"peerDependencies": {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
|
|
3
|
-
* This component is an enhancement to `empty:hidden` to fix the issue described above.
|
|
4
|
-
*
|
|
5
|
-
* This can be expensive, please avoid this whenever possible.
|
|
6
|
-
*/
|
|
7
|
-
export declare function HideIfEmpty({ children }: {
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
//# sourceMappingURL=hide-if-empty.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hide-if-empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hide-if-empty.tsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAgEtE"}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
-
import { useEffect, useId, useRef, useState } from 'react';
|
|
5
|
-
function isEmpty(node) {
|
|
6
|
-
for (let i = 0; i < node.childNodes.length; i++) {
|
|
7
|
-
const child = node.childNodes.item(i);
|
|
8
|
-
if (child.nodeType === Node.TEXT_NODE) {
|
|
9
|
-
return false;
|
|
10
|
-
}
|
|
11
|
-
else if (child.nodeType === Node.ELEMENT_NODE &&
|
|
12
|
-
window.getComputedStyle(child).display !== 'none') {
|
|
13
|
-
return false;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
return true;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
|
|
20
|
-
* This component is an enhancement to `empty:hidden` to fix the issue described above.
|
|
21
|
-
*
|
|
22
|
-
* This can be expensive, please avoid this whenever possible.
|
|
23
|
-
*/
|
|
24
|
-
export function HideIfEmpty({ children }) {
|
|
25
|
-
const id = useId();
|
|
26
|
-
const ref = useRef(null);
|
|
27
|
-
const [empty, setEmpty] = useState();
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
const element = ref.current;
|
|
30
|
-
if (!element)
|
|
31
|
-
return;
|
|
32
|
-
const onUpdate = () => {
|
|
33
|
-
setEmpty(isEmpty(element));
|
|
34
|
-
};
|
|
35
|
-
const observer = new ResizeObserver(onUpdate);
|
|
36
|
-
observer.observe(element);
|
|
37
|
-
onUpdate();
|
|
38
|
-
return () => {
|
|
39
|
-
observer.disconnect();
|
|
40
|
-
};
|
|
41
|
-
}, []);
|
|
42
|
-
const inject = `{
|
|
43
|
-
function isEmpty(node) {
|
|
44
|
-
for (let i = 0; i < node.childNodes.length; i++) {
|
|
45
|
-
const child = node.childNodes.item(i);
|
|
46
|
-
if (child.nodeType === Node.TEXT_NODE) {
|
|
47
|
-
return false;
|
|
48
|
-
} else if (
|
|
49
|
-
child.nodeType === Node.ELEMENT_NODE &&
|
|
50
|
-
window.getComputedStyle(child).display !== 'none'
|
|
51
|
-
) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return true;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const element = document.querySelector('[data-fdid="${id}"]')
|
|
60
|
-
if (element) {
|
|
61
|
-
element.setAttribute('data-empty', String(isEmpty(element)))
|
|
62
|
-
}}`;
|
|
63
|
-
return (_jsxs(_Fragment, { children: [_jsx(Slot, { ref: ref, "data-fdid": id, "data-empty": empty, className: "data-[empty=true]:hidden", suppressHydrationWarning: true, children: children }), empty === undefined && (_jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
|
|
64
|
-
__html: inject,
|
|
65
|
-
} }))] }));
|
|
66
|
-
}
|