@sanity/tsdoc
Version:
Generate API reference docs from TypeScript projects and store in a Sanity-friendly JSON format. Render a static frontend, or as React components.
1,151 lines (1,141 loc) • 123 kB
JavaScript
import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
import { useTheme, Box, Heading, Text, TreeItem, Flex, MenuItem, MenuButton, Menu, Button, Tree, Card, Stack, Popover, Autocomplete, Layer, Spinner, Code, Tooltip, Label, Container, usePrefersDark, ThemeProvider, studioTheme } from "@sanity/ui";
import { createContext, useContext, useMemo, useState, useEffect, memo, useCallback, useRef, forwardRef, StrictMode } from "react";
import { cyan, yellow, green, blue } from "@sanity/color";
import { styled, css } from "styled-components";
import { SelectIcon, SearchIcon, WarningOutlineIcon, InfoOutlineIcon } from "@sanity/icons";
import { PortableText as PortableText$1 } from "@portabletext/react";
import Refractor from "react-refractor";
import { createTSDocMemoryStore } from "@sanity/tsdoc/store";
import { createBrowserHistory } from "history";
import { createRoot } from "react-dom/client";
function parsePath(path, options = {}) {
const { basePath = "", version = "0.0.0" } = options, baseSegments = basePath.split("/").filter(Boolean), segments = path.split("/").filter(Boolean).slice(baseSegments.length);
let packageScope = null, packageName = null, releaseVersion = null, exportPath = null, memberSlug = null;
return packageName = segments.shift() || null, packageName?.startsWith("@") && (packageScope = packageName, packageName = segments.shift() || null), packageName && (releaseVersion = version), releaseVersion && (segments.length > 1 ? (memberSlug = segments.pop() || null, exportPath = `./${segments.join("/")}`) : segments.length === 1 && (memberSlug = segments.pop() || null, exportPath = ".")), {
exportPath,
packageName,
packageScope,
releaseVersion,
memberSlug
};
}
const SyntaxText = styled.code(
({ $deprecated, $syntax, theme }) => {
const { color } = theme.sanity;
return css`
&& {
background-color: transparent;
color: ${$syntax ? overrideSyntaxColors(color, $syntax) : void 0};
text-decoration: ${$deprecated ? "line-through" : void 0};
}
`;
}
), overrideSyntaxColors = (color, $syntax) => {
const isDarkMode = color.dark;
switch ($syntax) {
case "function":
return isDarkMode ? color.syntax[$syntax] : green[700].hex;
case "string":
return isDarkMode ? color.syntax[$syntax] : yellow[700].hex;
case "className":
return isDarkMode ? color.syntax[$syntax] : cyan[700].hex;
default:
return color.syntax[$syntax];
}
};
function isArray(val) {
return Array.isArray(val);
}
const LevelContext = createContext(null);
function useLevel() {
return useContext(LevelContext) || 1;
}
function addResponsiveProp(a, b) {
const _a = isArray(a) ? a : [a], _b = isArray(b) ? b : [b], len = Math.max(_a.length, _b.length), ret = [];
for (let i = 0; i < len; i += 1) {
const aSize = _a[i] ?? _a[_a.length - 1] ?? 0, bSize = _b[i] ?? _b[_b.length - 1] ?? 0;
ret.push(aSize + bSize);
}
return ret;
}
const SizeContext = createContext(2);
function useSize(props) {
const { min = 0, max = 1 / 0, size = 0 } = props || {}, delta = useContext(SizeContext) ?? 0, __cache_key__ = JSON.stringify([size, delta]);
return useMemo(
() => addResponsiveProp(size, delta).map((s) => Math.min(Math.max(s, min), max)),
// Improve performance: Keep object identify for a given hash of the value
// eslint-disable-next-line react-hooks/exhaustive-deps
[__cache_key__]
);
}
function useHeadingSize(size) {
const { fonts } = useTheme().sanity, level = useLevel(), levelSize = useMemo(() => (isArray(size) ? size : [size]).map((v) => v - level + 2), [level, size]);
return useSize({ size: levelSize, min: 0, max: fonts.heading.sizes.length - 1 });
}
function useSpace(size) {
const { space } = useTheme().sanity;
return useSize({ size, min: 0, max: space.length - 1 });
}
function H(props) {
const { size: sizeProp = 0, ...restProps } = props, level = useLevel();
return /* @__PURE__ */ jsx$1(
Box,
{
marginTop: useSpace(level === 1 ? [1, 1, 2, 3] : [2, 2, 3, 4]),
marginBottom: useSpace([2, 2, 2, 3]),
children: /* @__PURE__ */ jsx$1(Heading, { as: `h${level}`, ...restProps, size: useHeadingSize(sizeProp) })
}
);
}
function Level(props) {
const { children } = props, level = useLevel();
return /* @__PURE__ */ jsx$1(LevelContext.Provider, { value: level + 1, children });
}
function useTextSize(size) {
const { fonts } = useTheme().sanity;
return useSize({ size, min: 0, max: fonts.text.sizes.length - 1 });
}
function P(props) {
const { size: sizeProp = 0, ...restProps } = props;
return /* @__PURE__ */ jsx$1(Box, { "data-ui": "P", marginTop: useSpace([-1, -1, -1]), children: /* @__PURE__ */ jsx$1(Text, { as: "p", ...restProps, size: useTextSize(sizeProp) }) });
}
function Size(props) {
const { delta, children } = props, size = useContext(SizeContext) + delta;
return /* @__PURE__ */ jsx$1(SizeContext.Provider, { value: size, children });
}
const TSDocContext = createContext(null);
function useTSDoc() {
const tsdoc = useContext(TSDocContext);
if (!tsdoc) throw new Error("TSDoc: missing context value");
return tsdoc;
}
function useExports() {
const { params, store } = useTSDoc(), [data, setData] = useState(null), [error, setError] = useState(null), [loading, setLoading] = useState(!1);
return useEffect(() => {
if (!params.packageName || !params.releaseVersion) {
setData(null);
return;
}
const queryParams = {
packageScope: params.packageScope,
packageName: params.packageName,
releaseVersion: params.releaseVersion
};
let cancelled = !1;
async function run() {
try {
setLoading(!0), setData(null);
const data2 = await store.exports.get(queryParams);
cancelled || setData(data2);
} catch (err) {
err instanceof Error && !cancelled && setError(err);
} finally {
cancelled || setLoading(!1);
}
}
return run(), () => {
cancelled = !0;
};
}, [params.packageScope, params.packageName, params.releaseVersion, store]), { data, error, loading };
}
function usePackages() {
const { store } = useTSDoc(), [data, setData] = useState(null), [error, setError] = useState(null), [loading, setLoading] = useState(!0);
return useEffect(() => {
let cancelled = !1;
async function run() {
try {
setData(null);
const data2 = await store.packages.get();
cancelled || setData(data2);
} catch (err) {
err instanceof Error && !cancelled && setError(err);
} finally {
cancelled || setLoading(!1);
}
}
return run(), () => {
cancelled = !0;
};
}, [store]), { data, error, loading };
}
const BoxSticky = memo(styled(Box)`
position: sticky;
top: 0;
`);
function getGroupedMembers(members) {
const components2 = members.filter(
(mem) => (mem._type === "api.class" || mem._type === "api.function" || mem._type === "api.variable") && mem.isReactComponentType
), hooks = members.filter(
(mem) => mem._type === "api.function" && mem.isReactHook
), classes = members.filter(
(mem) => !components2.includes(mem) && mem._type === "api.class"
), enums = members.filter((mem) => mem._type === "api.enum"), functions = members.filter(
(mem) => !components2.includes(mem) && !hooks.includes(mem) && mem._type === "api.function"
), interfaces = members.filter((mem) => mem._type === "api.interface"), namespaces = members.filter((mem) => mem._type === "api.namespace"), typeAliases = members.filter((mem) => mem._type === "api.typeAlias"), variables = members.filter(
(mem) => !components2.includes(mem) && mem._type === "api.variable"
);
return {
classes,
enums,
functions,
interfaces,
namespaces,
reactComponents: components2,
reactHooks: hooks,
typeAliases,
variables
};
}
const UnformattedCode = styled.code(({ $deprecated }) => css`
&& {
background-color: transparent;
color: inherit;
text-decoration: ${$deprecated ? "line-through" : void 0};
}
`);
function TSDocMemberTitle(props) {
const { data } = props, isDeprecated = !!data.comment?.deprecated;
return "isReactComponentType" in data && data.isReactComponentType ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(UnformattedCode, { children: "<" }),
/* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }),
/* @__PURE__ */ jsx$1(UnformattedCode, { $deprecated: isDeprecated, children: " />" })
] }) : data._type === "api.class" ? /* @__PURE__ */ jsx$1(Fragment, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }) }) : data._type === "api.enum" ? /* @__PURE__ */ jsx$1(Fragment, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }) }) : data._type === "api.function" ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "function", children: data.name }),
/* @__PURE__ */ jsx$1(UnformattedCode, { $deprecated: isDeprecated, children: "()" })
] }) : data._type === "api.interface" ? /* @__PURE__ */ jsx$1(Fragment, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }) }) : data._type === "api.namespace" ? /* @__PURE__ */ jsx$1(Fragment, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }) }) : data._type === "api.typeAlias" ? /* @__PURE__ */ jsx$1(Fragment, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $deprecated: isDeprecated, $syntax: "className", children: data.name }) }) : data._type === "api.variable" ? /* @__PURE__ */ jsx$1(UnformattedCode, { $deprecated: isDeprecated, children: data.name }) : /* @__PURE__ */ jsx$1(Fragment, { children: "Uknown" });
}
function compilePath(params) {
const segments = [];
return params.packageName && (params.packageScope && segments.push(params.packageScope), segments.push(params.packageName), params.releaseVersion && params.exportPath && (params.exportPath !== "." && segments.push(params.exportPath.slice(2)), params.memberSlug && segments.push(params.memberSlug))), `/${segments.join("/")}`;
}
function useMemberLink(props) {
const { params } = props, { basePath, onPathChange } = useTSDoc(), path = params && compilePath(params), href = useMemo(() => `${basePath}${path || ""}`, [basePath, path]), onClick = useCallback(
(event) => {
path && (event.preventDefault(), onPathChange(path));
},
[onPathChange, path]
);
return { href, onClick };
}
const SyntaxTreeItem = memo(
styled(TreeItem)(({ theme }) => {
const isThemeDark = theme.sanity.color.dark, activeBackground = blue[50].hex, focusBackground = theme.sanity.color.selectable.default.enabled.bg2, color = theme.sanity.color.selectable.default.hovered.fg, selectedLight = isThemeDark ? "" : `&[data-selected] > [role='treeitem'] {
background-color: ${activeBackground} !important
}`;
return `
// solely on changing the "()" color
&:focus code,
& > a:focus code {
color: ${color} !important;
}
${selectedLight}
// change focus for api items trees
& > a:focus {
background-color: ${focusBackground} !important;
}
`;
})
);
function MemberLink(props) {
const { data, namespace } = props, { basePath, path } = useTSDoc(), fontSize = useSize(), params = useMemo(
() => ({
exportPath: data.export?.path || namespace?.export.path || ".",
memberName: data.name,
packageName: data.package.name,
packageScope: data.package.scope || null,
releaseVersion: data.release.version,
memberSlug: data.slug.current
}),
[data, namespace]
), linkProps = useMemberLink({ params }), tone = useMemo(() => {
if (data.releaseTag === "beta") return "caution";
if (data.releaseTag === "alpha") return "critical";
}, [data.releaseTag]), tag = useMemo(() => data.releaseTag === "beta" ? /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $syntax: "string", children: "@beta" }) }) : data.releaseTag === "alpha" ? /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsx$1(SyntaxText, { $syntax: "builtin", children: "@alpha" }) }) : null, [data.releaseTag]), isSelected = `${basePath}${path}` === linkProps.href;
return /* @__PURE__ */ jsx$1(
SyntaxTreeItem,
{
...linkProps,
fontSize,
padding: 2,
selected: isSelected,
text: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
/* @__PURE__ */ jsx$1(Box, { flex: 1, children: /* @__PURE__ */ jsx$1(TSDocMemberTitle, { data }) }),
tag
] }),
tone
}
);
}
const TreeItemFocus = memo(
styled(TreeItem)(({ theme }) => `
&:focus > [data-ui='TreeItem__box'],
&:focus > [data-ui="TreeItem"] {
background-color: transparent !important;
& svg, & code, & [data-ui="Text"] {
color: ${theme.sanity.color.selectable.default.enabled.fg} !important;
}
}
`)
);
function GroupedMembersTree(props) {
const { exp, expandSubPackages } = props, { params } = useTSDoc(), fontSize = useSize();
return /* @__PURE__ */ jsxs(Fragment, { children: [
exp.reactComponents.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.reactComponents.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Components",
weight: "semibold",
children: exp.reactComponents.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.reactHooks.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.reactHooks.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Hooks",
weight: "semibold",
children: exp.reactHooks.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.classes.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.classes.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Classes",
weight: "semibold",
children: exp.classes.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.functions.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.functions.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Functions",
weight: "semibold",
children: exp.functions.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.variables.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.variables.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Variables",
weight: "semibold",
children: exp.variables.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.enums.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.enums.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Enumerations",
weight: "semibold",
children: exp.enums.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.interfaces.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.interfaces.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Interfaces",
weight: "semibold",
children: exp.interfaces.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.namespaces.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.namespaces.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Namespaces",
weight: "semibold",
children: exp.namespaces.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
),
exp.typeAliases.length > 0 && /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandSubPackages || exp.typeAliases.some((m) => m.name === params.memberName),
fontSize,
padding: 2,
text: "Type aliases",
weight: "semibold",
children: exp.typeAliases.map((member) => /* @__PURE__ */ jsx$1(MemberLink, { data: member }, member.name))
}
)
] });
}
const SyntaxMenuItem = memo(styled(MenuItem)`
&:focus code,
& > a:focus code {
color: inherit !important;
}
& > a:focus {
background: transparent !important;
}
`);
function PackageMenuButton(props) {
const { currentPkg, packages } = props, { updateParams } = useTSDoc(), fontSize = useSize();
return /* @__PURE__ */ jsx$1(
MenuButton,
{
button: /* @__PURE__ */ jsx$1(
Button,
{
fontSize,
iconRight: SelectIcon,
mode: "bleed",
padding: 2,
text: /* @__PURE__ */ jsx$1(SyntaxText, { children: [currentPkg.scope, currentPkg.name].filter(Boolean).join("/") })
}
),
id: "package-menu",
menu: /* @__PURE__ */ jsx$1(Menu, { children: packages.map((p) => /* @__PURE__ */ jsx$1(
SyntaxMenuItem,
{
fontSize,
onClick: () => {
updateParams((prev) => ({
...prev,
exportPath: null,
packageScope: p.scope || null,
packageName: p.name,
releaseVersion: p.latestRelease.version,
memberName: null
}));
},
padding: 2,
text: /* @__PURE__ */ jsx$1(SyntaxText, { children: [p.scope, p.name].filter(Boolean).join("/") })
},
p.name
)) }),
popover: {
constrainSize: !0,
matchReferenceWidth: !0,
portal: !0
}
}
);
}
function PackageTreeItem(props) {
const { pkg, ...restProps } = props, { params, updateParams } = useTSDoc(), href = compilePath({
...params,
packageScope: pkg.scope || null,
packageName: pkg.name,
releaseVersion: pkg.latestRelease.version
}), handleClick = useCallback(
(event) => {
event.preventDefault(), updateParams((prev) => ({
...prev,
packageScope: pkg.scope || null,
packageName: pkg.name,
releaseVersion: pkg.latestRelease.version
}));
},
[pkg, updateParams]
);
return /* @__PURE__ */ jsx$1(
SyntaxTreeItem,
{
...restProps,
href,
onClick: handleClick,
text: /* @__PURE__ */ jsx$1(SyntaxText, { children: [pkg.scope, pkg.name].filter(Boolean).join("/") })
}
);
}
function ReleaseMenuButton(props) {
const { currentPkg, currentRelease } = props, { updateParams } = useTSDoc(), fontSize = useSize();
return /* @__PURE__ */ jsx$1(
MenuButton,
{
button: /* @__PURE__ */ jsx$1(
Button,
{
fontSize,
iconRight: SelectIcon,
mode: "bleed",
padding: 2,
text: /* @__PURE__ */ jsx$1(SyntaxText, { $syntax: "className", children: currentRelease.version })
}
),
id: "version-menu",
menu: /* @__PURE__ */ jsx$1(Menu, { children: currentPkg.releases.map((r) => /* @__PURE__ */ jsx$1(
SyntaxMenuItem,
{
fontSize,
onClick: () => updateParams((prev) => ({ ...prev, releaseVersion: r.version })),
padding: 2,
selected: currentRelease.version === r.version,
text: /* @__PURE__ */ jsx$1(SyntaxText, { $syntax: "className", children: r.version })
},
r.version
)) }),
popover: {
constrainSize: !0,
matchReferenceWidth: !0,
portal: !0
}
}
);
}
const SearchWrapper = memo(styled(Box)`
background-color: var(--card-bg-color);
`), TreeNav = memo(styled(Tree)`
overflow: auto;
height: 100vh;
`), DEBOUNCE_MS = 150;
function useSymbolSearch(props) {
const { query } = props, { params, store } = useTSDoc(), [data, setData] = useState([]), [error, setError] = useState(null), [loading, setLoading] = useState(!1), [debouncedQuery, setDebouncedQuery] = useState(query), timeoutRef = useRef(null);
return useEffect(() => {
let cancelled = !1;
async function run() {
if (!debouncedQuery || !params.packageName) {
setData([]);
return;
}
try {
setLoading(!0);
const data2 = await store.symbol.search({
query: debouncedQuery,
packageName: params.packageName,
packageScope: params.packageScope
});
cancelled || (setLoading(!1), setData(data2));
} catch (err) {
err instanceof Error && !cancelled && setError(err);
} finally {
cancelled || setLoading(!1);
}
setLoading(!1);
}
return run(), () => {
cancelled = !0;
};
}, [debouncedQuery, params.packageName, params.packageScope, store]), useEffect(() => {
timeoutRef.current && clearTimeout(timeoutRef.current), timeoutRef.current = setTimeout(() => {
setDebouncedQuery(query), timeoutRef.current = null;
}, DEBOUNCE_MS);
}, [query]), { data, error, loading };
}
function TSDocSearch() {
const [query, setQuery] = useState(null), { data, loading } = useSymbolSearch({ query }), [value, setValue] = useState(), autocompletePopoverReferenceElementRef = useRef(null), options = useMemo(
() => data.map((result) => ({ value: result._id, symbol: result })),
[data]
), filterOption = useCallback(() => !0, []), handleSelect = useCallback((value2) => {
setValue(value2), setTimeout(() => setValue(""), 0);
}, []), renderOption = useCallback((option) => /* @__PURE__ */ jsx$1(SearchOption, { symbol: option.symbol }), []), renderValue = useCallback(() => "", []), renderPopover = useCallback(
({ content, hidden }) => query ? /* @__PURE__ */ jsx$1(
Popover,
{
arrow: !1,
open: !loading && !hidden,
overflow: "auto",
placement: "bottom-start",
matchReferenceWidth: !0,
radius: 0,
content: content || /* @__PURE__ */ jsx$1(Box, { padding: 4, children: /* @__PURE__ */ jsx$1(Flex, { align: "center", height: "fill", justify: "center", children: /* @__PURE__ */ jsxs(Text, { align: "center", muted: !0, children: [
"No results for ",
/* @__PURE__ */ jsxs("strong", { children: [
"\u201C",
query,
"\u201D"
] })
] }) }) }),
referenceElement: autocompletePopoverReferenceElementRef.current
}
) : null,
[loading, query]
);
return /* @__PURE__ */ jsx$1("div", { ref: autocompletePopoverReferenceElementRef, children: /* @__PURE__ */ jsx$1(
Autocomplete,
{
filterOption,
icon: SearchIcon,
id: "tsdoc-search",
loading,
onQueryChange: setQuery,
onSelect: handleSelect,
options,
padding: 3,
placeholder: "Search for API members",
radius: 2,
renderOption,
renderValue,
renderPopover,
value
}
) });
}
const SearchOption = forwardRef(function(props, ref) {
const { symbol, ...restProps } = props, latestMember = symbol.members[0], params = useMemo(
() => ({
exportPath: latestMember ? latestMember.exportPath : ".",
packageName: symbol.package.name,
packageScope: symbol.package.scope || null,
memberName: symbol.name,
releaseVersion: latestMember ? latestMember.releaseVersion : "0.0.0",
memberSlug: latestMember ? latestMember.slug.current : ""
}),
[latestMember, symbol]
), link = useMemberLink({ params });
return /* @__PURE__ */ jsx$1(
Card,
{
...restProps,
as: "a",
href: link.href,
onClick: link.onClick,
padding: 3,
radius: 2,
ref,
children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
/* @__PURE__ */ jsx$1(Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsx$1(UnformattedCode, { children: symbol.name }) }),
/* @__PURE__ */ jsx$1(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx$1(UnformattedCode, { children: [
[
symbol.package.scope,
symbol.package.name,
latestMember?.exportPath === "." ? void 0 : latestMember?.exportPath.replace("./", "/")
].filter(Boolean)
] }) })
] })
}
);
});
function TSDocNav(props) {
return /* @__PURE__ */ jsx$1(Size, { delta: -1, children: /* @__PURE__ */ jsx$1(TSDocNavView, { ...props }) });
}
function TSDocNavView(props) {
const { params } = useTSDoc(), _exports = useExports(), packages = usePackages(), fontSize = useSize(), { showVersionMenu, expandPackages, expandSubPackages } = props, currentPkg = packages.data?.find(
(p) => p.scope === params.packageScope && p.name === params.packageName
), currentRelease = currentPkg?.releases.length ? currentPkg?.releases.find(
(r) => params.releaseVersion ? r.version === params.releaseVersion : r.version == currentPkg.latestRelease.version
) : currentPkg?.latestRelease, currentVersion = currentRelease?.version, currentExportName = currentPkg && params.exportPath && [currentPkg.scope, currentPkg.name, params.exportPath].filter(Boolean).join("/"), exports = useMemo(() => {
if (!_exports.data) return [];
const items = [];
for (const exp of _exports.data) {
if (exp.members.length === 0)
continue;
const { members, name, package: pkg, ...restExp } = exp, item = items.find(
(e) => e.packageScope === pkg.scope && e.packageName === pkg.name && e.name === exp.name
), data = {
name,
package: pkg,
...restExp,
...getGroupedMembers(members)
};
item ? item.versions.push(data) : items.push({
packageScope: pkg.scope,
packageName: pkg.name,
name,
versions: [data]
});
}
return items || [];
}, [_exports.data]);
return /* @__PURE__ */ jsx$1(BoxSticky, { paddingTop: 3, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", height: "fill", overflow: "hidden", children: [
!currentPkg && !packages.loading && /* @__PURE__ */ jsx$1(Card, { overflow: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
/* @__PURE__ */ jsx$1(Box, { padding: 2, children: /* @__PURE__ */ jsx$1(Text, { size: fontSize, weight: "bold", children: "Choose package" }) }),
/* @__PURE__ */ jsx$1(Tree, { children: packages.data?.map((pkg) => /* @__PURE__ */ jsx$1(PackageTreeItem, { pkg, fontSize, padding: 2 }, pkg.name)) })
] }) }),
currentPkg && /* @__PURE__ */ jsxs(Fragment, { children: [
showVersionMenu && /* @__PURE__ */ jsx$1(Layer, { style: { flex: "none", position: "sticky", top: 0 }, children: /* @__PURE__ */ jsx$1(Card, { padding: [2, 2, 3], shadow: 1, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
packages.data && /* @__PURE__ */ jsx$1(Stack, { flex: 1, children: /* @__PURE__ */ jsx$1(PackageMenuButton, { currentPkg, packages: packages.data }) }),
currentRelease && /* @__PURE__ */ jsx$1(Stack, { flex: "none", children: /* @__PURE__ */ jsx$1(
ReleaseMenuButton,
{
currentPkg,
currentRelease
}
) })
] }) }) }),
_exports.loading && /* @__PURE__ */ jsx$1(Flex, { align: "center", height: "fill", justify: "center", children: /* @__PURE__ */ jsx$1(Spinner, { muted: !0 }) }),
!_exports.loading && /* @__PURE__ */ jsxs(Stack, { flex: 1, overflow: "auto", children: [
currentPkg && /* @__PURE__ */ jsx$1(SearchWrapper, { padding: 1, children: /* @__PURE__ */ jsx$1(TSDocSearch, {}) }),
exports.length === 1 ? /* @__PURE__ */ jsx$1(SingleExportTree, { currentVersion, exp: exports[0] }) : /* @__PURE__ */ jsx$1(
MultiExportTree,
{
currentExportName,
currentVersion,
exports,
fontSize,
expandPackages,
expandSubPackages
}
)
] })
] })
] }) });
}
function SingleExportTree(props) {
const { currentVersion, exp } = props, versionedExports = useMemo(
() => exp.versions.filter((d) => d.release.version === currentVersion),
[currentVersion, exp]
);
return /* @__PURE__ */ jsx$1(TreeNav, { children: versionedExports.map((exp2) => /* @__PURE__ */ jsx$1(GroupedMembersTree, { exp: exp2 }, exp2.release.version)) });
}
function MultiExportTree(props) {
const { currentExportName, currentVersion, fontSize, exports, expandPackages, expandSubPackages } = props, versionedExports = useMemo(
() => exports.filter((data) => data.versions.some((v) => v.release.version === currentVersion)),
[currentVersion, exports]
);
return /* @__PURE__ */ jsx$1(TreeNav, { children: versionedExports.map((data) => /* @__PURE__ */ jsx$1(
TreeItemFocus,
{
expanded: expandPackages || data.name === currentExportName,
tabIndex: 0,
fontSize,
padding: 2,
text: /* @__PURE__ */ jsx$1(SyntaxText, { children: data.name }),
weight: "semibold",
children: data.versions.filter((d) => d.release.version === currentVersion).map((exp) => /* @__PURE__ */ jsx$1(
GroupedMembersTree,
{
exp,
expandSubPackages
},
exp.release.version
))
},
data.name
)) });
}
const CommentBox = styled(Box)`
/* border-top: 1px solid var(--card-border-color); */
& > *:first-child {
margin-top: 0 !important;
}
& > *:last-child {
margin-bottom: 0 !important;
}
`, CODE_LANGUAGES = {
sh: "bash",
tsx: "typescript",
ts: "typescript"
};
function PortableText(props) {
const { blocks } = props;
return /* @__PURE__ */ jsx$1(PortableText$1, { components, value: blocks });
}
const components = {
block: {
blockquote: BlockquoteBlock,
h1: H1Block,
h2: H2Block,
h3: H3Block,
h4: H4Block,
h5: H5Block,
h6: H6Block,
normal: NormalBlock
},
types: {
code: CodeBlock
},
marks: {
link: Link
}
};
function CodeBlock(props) {
const { code, language = "typescript" } = props.value;
return /* @__PURE__ */ jsx$1(
Card,
{
border: !0,
marginY: useSpace([1, 1, 2, 3]),
overflow: "auto",
padding: 4,
radius: 3,
tone: "inherit",
children: /* @__PURE__ */ jsx$1(
Code,
{
language: CODE_LANGUAGES[language] || language || "typescript",
size: useTextSize([-1, -1, 0]),
children: code
}
)
}
);
}
function H1Block({ children }) {
return /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children });
}
function H2Block({ children }) {
return /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children }) });
}
function H3Block({ children }) {
return /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children }) }) });
}
function H4Block({ children }) {
return /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children }) }) }) });
}
function H5Block({ children }) {
return /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children }) }) }) }) });
}
function H6Block({ children }) {
return /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children }) }) }) }) }) });
}
function BlockquoteBlock({ children }) {
return /* @__PURE__ */ jsx$1(Box, { as: "blockquote", children: /* @__PURE__ */ jsx$1(P, { muted: !0, size: [-1, 0, 1], children }) });
}
function NormalBlock({ children }) {
return /* @__PURE__ */ jsx$1(Box, { marginBottom: 4, children: /* @__PURE__ */ jsx$1(P, { muted: !0, children }) });
}
function isValidUrl(url) {
try {
return !!new URL(url);
} catch {
return !1;
}
}
function getInternalHref({
url,
packageName,
exportPath
}) {
const urlSegments = url.split("/");
return urlSegments.length === 1 ? `/${packageName}${exportPath?.replace(".", "")}/${url}` : `/${packageName}/${urlSegments.join("/")}`;
}
function Link(props) {
const { basePath, onPathChange, params } = useTSDoc(), { value, text } = props, { packageName, exportPath } = params, url = value?.href, isExternalUrl = isValidUrl(url), path = !isExternalUrl && getInternalHref({ url, packageName, exportPath }), href = isExternalUrl ? url : `${basePath}${path}`, handleClick = useCallback(
(e) => {
isExternalUrl || !path || (e.preventDefault(), onPathChange(path));
},
[isExternalUrl, onPathChange, path]
);
return /* @__PURE__ */ jsx$1("a", { href, onClick: handleClick, children: text });
}
function CommentDeprecatedCallout(props) {
const { data } = props, { deprecated } = data, textSize = useTextSize([0, 0, 1]);
return deprecated?.content ? /* @__PURE__ */ jsx$1(Card, { padding: 4, radius: 3, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", children: [
/* @__PURE__ */ jsx$1(Box, { flex: "none", marginRight: 3, children: /* @__PURE__ */ jsx$1(Text, { size: textSize, children: /* @__PURE__ */ jsx$1(WarningOutlineIcon, {}) }) }),
/* @__PURE__ */ jsx$1(Stack, { flex: 1, space: 2, children: /* @__PURE__ */ jsxs(CommentBox, { children: [
/* @__PURE__ */ jsx$1(Text, { size: textSize, weight: "semibold", children: "Deprecated" }),
/* @__PURE__ */ jsx$1(Size, { delta: -1, children: /* @__PURE__ */ jsx$1(PortableText, { blocks: deprecated.content }) })
] }) })
] }) }) : /* @__PURE__ */ jsx$1(Fragment, {});
}
function CommentExampleBlocks(props) {
const { data } = props, { exampleBlocks } = data;
if (!exampleBlocks || exampleBlocks.length === 0) return /* @__PURE__ */ jsx$1(Fragment, {});
const showPerExampleHeader = exampleBlocks.length > 1;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children: "Examples" }),
exampleBlocks.map((exampleBlock, idx) => /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(CommentExampleBlock, { data: exampleBlock, index: idx, showHeader: showPerExampleHeader }) }, exampleBlock._key))
] });
}
function CommentExampleBlock(props) {
const { data, index, showHeader } = props;
return data.content ? /* @__PURE__ */ jsxs(Fragment, { children: [
showHeader && /* @__PURE__ */ jsxs(H, { size: [-1, 0, 1, 2], children: [
"Example #",
index + 1
] }),
/* @__PURE__ */ jsx$1(PortableText, { blocks: data.content })
] }) : /* @__PURE__ */ jsx$1(Fragment, {});
}
function CommentRemarks(props) {
const { data } = props, { remarks } = data;
return remarks?.content ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children: "Remarks" }),
/* @__PURE__ */ jsx$1(PortableText, { blocks: remarks.content })
] }) : /* @__PURE__ */ jsx$1(Fragment, {});
}
function CommentReturnType(props) {
const { returns } = props.data;
return returns?.content ? /* @__PURE__ */ jsx$1(CommentBox, { children: /* @__PURE__ */ jsx$1(PortableText, { blocks: returns.content }) }) : /* @__PURE__ */ jsx$1(Fragment, {});
}
function CommentSummary(props) {
const { summary } = props.data;
return summary ? /* @__PURE__ */ jsx$1(PortableText, { blocks: summary }) : /* @__PURE__ */ jsx$1(Fragment, {});
}
function _compileTypeParameters(typeParameters) {
return !typeParameters || typeParameters.length === 0 ? "" : `<${typeParameters.map((p) => {
let code = `${p.name}`;
return p.constraintType?.length && (code += ` extends ${p.constraintType.map((t) => t.text).join("")}`), p.defaultType?.length && (code += ` = ${p.defaultType.map((t) => t.text).join("")}`), code;
}).join(", ")}>`;
}
function _compileClassDefinition(data) {
let code = `class ${data.name}${_compileTypeParameters(data.typeParameters)} `;
code += "{";
for (const m of data.members)
m._type === "api.constructor" ? code += `
constructor()` : m._type === "api.property" ? code += `
${m.name}${m.isOptional ? "?" : ""}: ${m.type.map((t) => t.text).join("")}` : m._type === "api.method" && (code += `
${m.name}${m.isOptional ? "?" : ""}(): ${m.returnType.map((t) => t.text).join("")}`);
return code += `
}`, code;
}
function _compileFunctionDefinition(data) {
let code = `function ${data.name}${_compileTypeParameters(data.typeParameters)}`;
const parameters = data.parameters.map((p) => `${p.name}: ${p.type.map((t) => t.text).join("")}`);
return parameters.length ? code += `(
${parameters.join(`,
`)}
): ` : code += "(): ", code += data.returnType.map((t) => t.text).join(""), code;
}
function _compileTokens(tokens) {
return tokens.map((t) => t.text).join("").replace(/History_2/g, "History").replace(/React_2/g, "React");
}
function _compileInterfaceDefinition(data) {
let code = `interface ${data.name}${_compileTypeParameters(data.typeParameters)}`;
if (data.extends.length && (data.extends.length === 1 ? code += ` extends ${data.extends.map((e) => _compileTokens(e.type)).join(", ")}` : code += `
extends ${data.extends.map((e) => _compileTokens(e.type)).join(`,
`)}`), data.members.length) {
code += " {";
for (const m of data.members)
m._type === "api.propertySignature" ? code += `
${m.name}${m.isOptional ? "?" : ""}: ${_compileTokens(m.type)}` : m._type === "api.callSignature" ? code += `
(${m.parameters.map((p) => `${p.name}: ${_compileTokens(p.type)}`).join(", ")}) => ${_compileTokens(m.returnType)}` : m._type === "api.indexSignature" ? (code += `
[`, code += m.parameters.map((p) => `${p.name}: ${_compileTokens(p.type)}`), code += `]: ${_compileTokens(m.returnType)}`) : code += `
// @todo: _type=${m._type}`;
code += `
}`;
} else
code += " {}";
return code;
}
function _compileTypeAliasDefinition(data) {
let code = `type ${data.name}${_compileTypeParameters(data.typeParameters)} = `;
return code += data.type?.map((t) => t.text).join(""), code;
}
function _compileVariableDefinition(data) {
let code = `const ${data.name}: `;
return code += data.type.map((t) => t.text).join(""), code;
}
function ClassTooltipContent(props) {
const { data } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { padding: 3, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Card, { borderTop: !0, padding: 3, overflow: "auto", children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]), children: _compileClassDefinition(data) }) }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function EnumTooltipContent(props) {
const { data } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" }, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Box, { padding: 3, overflow: "auto", children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]) }) }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function _getMembers(data) {
if (!("members" in data))
return [];
let mems = data.members;
if ("extends" in data)
for (const ext of data.extends)
for (const tok of ext.type) {
const member = tok.member;
member && "members" in member && (mems = mems.concat(
member.members.map((mem) => ({
...mem,
inheritedFrom: { name: member.name, slug: member.name }
}))
));
}
return mems.sort((a, b) => {
const aName = "name" in a ? a.name : "", bName = "name" in b ? b.name : "";
return aName < bName ? -1 : aName > bName ? 1 : 0;
}), mems;
}
function FunctionTooltipContent(props) {
const { data } = props, { propsType } = data, propsTypeMembers = useMemo(() => propsType && _getMembers(propsType), [propsType]), propsTypeLinkParams = useMemo(
() => propsType && {
exportPath: propsType.export?.path,
packageName: propsType.package?.name,
packageScope: propsType.package?.scope || null,
memberName: propsType.name,
releaseVersion: propsType.release?.version,
memberSlug: propsType.slug.current
},
[propsType]
), propsTypeLink = useMemberLink({
params: propsTypeLinkParams || null
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { overflow: "auto", padding: 3, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Box, { padding: 3, overflow: "auto", style: { borderTop: "1px solid var(--card-border-color)" }, children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]), children: _compileFunctionDefinition(data) }) }),
propsType && propsTypeMembers && propsTypeMembers.length > 0 && /* @__PURE__ */ jsxs(CommentBox, { padding: 3, children: [
/* @__PURE__ */ jsx$1(H, { size: [-1, 0, 1, 2], children: "Props" }),
/* @__PURE__ */ jsxs(P, { size: [-1, 0, 1], children: [
"Defined by the",
" ",
/* @__PURE__ */ jsx$1("code", { children: /* @__PURE__ */ jsx$1("a", { href: propsTypeLink.href, onClick: propsTypeLink?.onClick, children: propsType.name }) }),
" ",
"interface."
] }),
propsTypeMembers.length > 0 && /* @__PURE__ */ jsx$1(Members, { data: propsTypeMembers, member: data })
] }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function InterfaceTooltipContent(props) {
const { data } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" }, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Box, { padding: 3, overflow: "auto", children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]), children: _compileInterfaceDefinition(data) }) }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function TypeAliasTooltipContent(props) {
const { data } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" }, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Box, { padding: 3, overflow: "auto", children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]), children: _compileTypeAliasDefinition(data) }) }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function VariableTooltipContent(props) {
const { data } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx$1(Box, { padding: 3, style: { borderBottom: "1px solid var(--card-border-color)" }, children: /* @__PURE__ */ jsx$1(
Code,
{
language: "typescript",
size: useTextSize([-1, 0, 1]),
children: `import {${data.name}} from '${data.export.name}'`
}
) }),
/* @__PURE__ */ jsx$1(Box, { padding: 3, overflow: "auto", children: /* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, 0, 1]), children: _compileVariableDefinition(data) }) }),
data.comment?.summary && /* @__PURE__ */ jsx$1(CommentBox, { padding: 3, children: /* @__PURE__ */ jsx$1(CommentSummary, { data: data.comment }) })
] });
}
function ReferenceTooltip(props) {
const { children, member } = props;
return /* @__PURE__ */ jsx$1(
Tooltip,
{
content: /* @__PURE__ */ jsx$1(Size, { delta: -1, children: /* @__PURE__ */ jsx$1(Level, { children: /* @__PURE__ */ jsx$1(ReferenceTooltipContent, { data: member }) }) }),
placement: "top",
portal: !0,
children
}
);
}
function ReferenceTooltipContent(props) {
const { data } = props, textSize = useTextSize([-1, 0, 1]);
return data._type === "api.class" ? /* @__PURE__ */ jsx$1(ClassTooltipContent, { data }) : data._type === "api.enum" ? /* @__PURE__ */ jsx$1(EnumTooltipContent, { data }) : data._type === "api.function" ? /* @__PURE__ */ jsx$1(FunctionTooltipContent, { data }) : data._type === "api.interface" ? /* @__PURE__ */ jsx$1(InterfaceTooltipContent, { data }) : data._type === "api.typeAlias" ? /* @__PURE__ */ jsx$1(TypeAliasTooltipContent, { data }) : data._type === "api.variable" ? /* @__PURE__ */ jsx$1(VariableTooltipContent, { data }) : /* @__PURE__ */ jsx$1(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Text, { size: textSize, children: [
"Unknown type: ",
/* @__PURE__ */ jsx$1("code", { children: data._type })
] }) });
}
function ApiToken(props) {
const { deindent, token } = props, text = token.text.replace(/History_2/g, "History").replace(/React_2/g, "React"), params = useMemo(
() => token.member && token.member.export ? {
exportPath: token.member.export.path,
memberName: token.member.name,
packageScope: token.member.package.scope || null,
packageName: token.member.package.name,
releaseVersion: token.member.release.version,
memberSlug: token.member.slug.current
} : null,
[token.member]
), linkProps = useMemberLink({ params });
return !token.member || !params ? /* @__PURE__ */ jsx$1(Fragment, { children: deindent ? text.replace(/\n\s\s/g, `
`) : text }) : /* @__PURE__ */ jsx$1(Size, { delta: -1, children: /* @__PURE__ */ jsx$1(ReferenceTooltip, { member: token.member, children: /* @__PURE__ */ jsx$1("a", { ...linkProps, children: text }) }) });
}
function CodeSnippet(props) {
const { data, deindent, prefix, suffix } = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
prefix,
data?.map((t) => /* @__PURE__ */ jsx$1(ApiToken, { deindent, token: t }, t._key)),
suffix
] });
}
const Root$3 = styled(Box)`
position: relative;
& > pre:first-child {
position: absolute;
color: transparent;
inset: 0;
& a {
border-radius: 2px;
color: inherit;
&:hover {
background: var(--card-code-bg-color);
}
}
}
& > pre:last-child {
pointer-events: none;
}
`;
function TSDocCode(props) {
const { deindent, prefix = "", suffix = "", tokens } = props, code = (prefix + tokens.map((t) => t.text).join("") + suffix).replace(/History_2/g, "History").replace(/React_2/g, "React").replace(/Plugin_2/g, "Plugin2").replace(/JSX_2/g, "JSX");
return /* @__PURE__ */ jsxs(Root$3, { children: [
/* @__PURE__ */ jsx$1(Code, { size: useTextSize([-1, -1, 0]), children: /* @__PURE__ */ jsx$1(CodeSnippet, { data: tokens, deindent, prefix, suffix }) }),
/* @__PURE__ */ jsx$1(Code, { language: "typescript", size: useTextSize([-1, -1, 0]), children: deindent ? code.replace(/\n\s\s/g, `
`) : code })
] });
}
function _fontSize(fontSize, sizes) {
return sizes.map((f) => Math.min(Math.max(f + (fontSize - 2), 0), 4));
}
function MemberInheritedFrom(props) {
const { data, fontSize = 2 } = props;
return /* @__PURE__ */ jsxs(Text, { as: "p", muted: !0, size: _fontSize(fontSize, [1, 1, 2]), children: [
"Inherited from",
" ",
data.slug && /* @__PURE__ */ jsx$1("code", { children: /* @__PURE__ */ jsx$1("a", { children: data.name }) }),
!data.slug && /* @__PURE__ */ jsx$1("code", { children: data.name }),
"."
] });
}
const ReleaseBadgeTextWrapper = memo(styled(Text)`
white-space: pre-line;
`);
function ReleaseBadge(props) {
const { padding = 1, radius = 2, releaseTag } = props, releaseTone = useMemo(() => releaseTag === "alpha" ? "primary" : rele