@mintlify/msft-sdk 1.1.36 → 1.1.38
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/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.js +2 -3
- package/dist/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.js.map +1 -1
- package/dist/api-playground/EndpointFields/ParamFields/RecursiveParamField.js +7 -6
- package/dist/api-playground/EndpointFields/ParamFields/RecursiveParamField.js.map +1 -1
- package/dist/api-playground/EndpointFields/index.js +4 -3
- package/dist/api-playground/EndpointFields/index.js.map +1 -1
- package/dist/components/content-components/callouts.js +4 -11
- package/dist/components/content-components/callouts.js.map +1 -1
- package/dist/components/content-components/link.js +13 -13
- package/dist/components/content-components/link.js.map +1 -1
- package/dist/components/content-components/tabs/tabs.js +75 -57
- package/dist/components/content-components/tabs/tabs.js.map +1 -1
- package/dist/components/content-components/zone-pivots/zone-pivot-selector.js +10 -10
- package/dist/components/content-components/zone-pivots/zone-pivot-selector.js.map +1 -1
- package/dist/components/docsPage.js +7 -7
- package/dist/components/docsPage.js.map +1 -1
- package/dist/components/toc/index.js +18 -18
- package/dist/components/toc/index.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docsPage.js","sources":["../../src/components/docsPage.tsx"],"sourcesContent":["import { TextAlignLeftFilled } from '@fluentui/react-icons';\nimport { useEffect } from 'react';\n\nimport { ApiExamples } from '../api-playground-2/ApiExamples';\nimport { ComponentsProvider } from '../context/components-context';\nimport '../styles.css';\nimport type { DocsPageProps, PayloadData } from '../types';\nimport { cn } from '../utils/cn';\nimport { ZonePivotProvider, ZonePivotSelector } from './content-components/zone-pivots';\nimport { MDXRenderer } from './mdx-renderer';\nimport { PageContextMenu, type ContextualOption } from './page-context-menu';\nimport { TableOfContents } from './toc';\nimport { PivotAwareTOC } from './toc/pivot-aware-toc';\n\n/**\n * Localization strings for DocsPage component\n */\nexport interface DocsPageLocalization {\n /** Text for \"On this page\" heading. Default: \"On this page\" */\n onThisPage?: string;\n /** Loading message. Default: \"Loading...\" */\n loading?: string;\n /** Error title. Default: \"Error\" */\n errorTitle?: string;\n /** Generic error message. Default: \"Something went wrong\" */\n errorMessage?: string;\n /** Not found title. Default: \"Page not found\" */\n notFoundTitle?: string;\n /** Not found message. Default: \"The page you're looking for doesn't exist\" */\n notFoundMessage?: string;\n}\n\n/**\n * Telemetry configuration for DocsPage\n */\nexport interface DocsPageTelemetry {\n /** Activity name for page context menu interactions */\n contextMenuActivity?: string;\n /** Phase for context menu interactions */\n contextMenuPhase?: string;\n /** Activity name for TOC link clicks */\n tocLinkActivity?: string;\n /** Phase for TOC link clicks */\n tocLinkPhase?: string;\n /** Activity name for zone pivot selector changes */\n zonePivotActivity?: string;\n /** Phase for zone pivot changes */\n zonePivotPhase?: string;\n}\n\n/**\n * Configuration for the page context menu\n */\nexport interface PageContextMenuConfig {\n /** Custom actions for the page context menu. If provided, these will replace the default actions. */\n customActions?: ContextualOption[];\n /** Callback fired after markdown is successfully copied */\n onCopyMarkdown?: () => void;\n /** Custom handler for \"Copy Page\" action. If provided, replaces default copy behavior. */\n onCopyPage?: () => void | Promise<void>;\n /** Custom handler for \"View as Markdown\" action. If provided, replaces default view behavior. */\n onViewMarkdown?: (pathname?: string) => void;\n /** Custom handler for \"View llms.txt\" action. If provided, replaces default behavior. */\n onViewLlmsTxt?: () => void;\n /** Custom handler for \"View llms-full.txt\" action. If provided, replaces default behavior. */\n onViewLlmsFullTxt?: () => void;\n}\n\n/**\n * Enhanced DocsPageProps with localization and telemetry support\n */\nexport interface EnhancedDocsPageProps extends DocsPageProps {\n /** Localization strings */\n localization?: DocsPageLocalization;\n /** Telemetry configuration */\n telemetry?: DocsPageTelemetry;\n /** Context menu configuration */\n contextMenu?: PageContextMenuConfig;\n}\n\n/**\n * DocsPage component renders a documentation page with MDX content, table of contents,\n * zone pivot selectors, and page context menu. It supports full customization through\n * props for localization, telemetry, and custom components.\n *\n * @example\n * ```tsx\n * <DocsPage\n * payload={{\n * content: \"...\",\n * serializedContent: Content,\n * title: \"Getting Started\",\n * description: \"Learn how to get started\"\n * }}\n * toc={[{ title: \"Introduction\", slug: \"intro\", level: 2 }]}\n * theme=\"dark\"\n * pathname=\"/docs/getting-started\"\n * LinkComponent={Link}\n * localization={{\n * onThisPage: \"In this article\"\n * }}\n * telemetry={{\n * contextMenuActivity: \"DocsPageContextMenu\",\n * contextMenuPhase: \"Start\"\n * }}\n * />\n * ```\n */\nexport function DocsPage({\n payload,\n toc,\n navTree,\n activeHref,\n theme,\n className = '',\n pathname,\n markdownContent,\n allPages,\n baseUrl,\n bottomLinks,\n LinkComponent,\n localization,\n telemetry,\n contextMenu,\n apiReferenceData2,\n}: EnhancedDocsPageProps) {\n const Content = payload.serializedContent;\n const zonePivotGroups = payload.mdxExtracts?.zonePivotGroups || [];\n const pivotTocItems = payload.mdxExtracts?.pivotTocItems;\n const isFullWidth = !payload.title;\n\n // Default localization\n const defaultLocalization: Required<DocsPageLocalization> = {\n onThisPage: 'On this page',\n loading: 'Loading...',\n errorTitle: 'Error',\n errorMessage: 'Something went wrong',\n notFoundTitle: 'Page not found',\n notFoundMessage: \"The page you're looking for doesn't exist\",\n };\n\n const loc = { ...defaultLocalization, ...localization };\n\n useEffect(() => {\n const { hash } = window.location;\n if (!hash) return;\n\n const scrollToHash = () => {\n const targetId = hash.substring(1);\n const scrollContainer = document.getElementById('main-content');\n const targetElement = document.getElementById(targetId);\n\n if (scrollContainer && targetElement) {\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize;\n\n const containerRect = scrollContainer.getBoundingClientRect();\n const targetRect = targetElement.getBoundingClientRect();\n const relativeTop =\n targetRect.top - containerRect.top + scrollContainer.scrollTop - scrollOffset;\n\n scrollContainer.scrollTo({\n top: relativeTop,\n behavior: 'instant',\n });\n }\n };\n\n const timeoutId = setTimeout(scrollToHash, 100);\n\n return () => clearTimeout(timeoutId);\n }, [pathname]);\n\n return (\n <ComponentsProvider LinkComponent={LinkComponent}>\n <div\n className={cn(\n theme === 'dark' && 'dark',\n className,\n 'mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden'\n )}\n >\n <div\n id=\"page-container\"\n className=\"mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:flex-1 mint:min-h-0 mint:h-full mint:flex mint:flex-col mint:overflow-hidden\"\n >\n <div\n id=\"page-wrapper\"\n className=\"mint:flex mint:rounded-tl-2xl mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden\"\n >\n <div\n id=\"main-content\"\n className={cn(\n 'mint:flex-1 mint:p-8 mint:overflow-y-auto mint:overflow-x-hidden mint:rounded-tl-2xl mint:bg-white mint:dark:bg-[#1f1f1f] [scrollbar-gutter:stable] mint:overscroll-contain mint:lg:px-16 mint:lg:pt-12 [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30'\n )}\n >\n <ZonePivotProvider groups={zonePivotGroups}>\n <div\n className=\"mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full\"\n id=\"content-layout-container\"\n >\n {apiReferenceData2?.operation ? (\n <div className=\"mint:hidden mint:xl:!flex mint:self-start mint:sticky mint:flex-col mint:max-w-[28rem] mint:top-0 mint:gap-6\">\n <ApiExamples apiReferenceData={apiReferenceData2} />\n </div>\n ) : toc && toc.length > 0 ? (\n <aside className=\"mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block\">\n <div className=\"mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto\">\n <div className=\"mint:flex mint:items-center mint:gap-2 mint:mb-4\">\n <TextAlignLeftFilled className=\"mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]\" />\n <h2 className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white\">\n {loc.onThisPage}\n </h2>\n </div>\n {pivotTocItems && Object.keys(pivotTocItems).length > 0 ? (\n <PivotAwareTOC baseToc={toc} pivotTocItems={pivotTocItems} />\n ) : (\n <TableOfContents toc={toc} />\n )}\n </div>\n </aside>\n ) : null}\n\n <div\n className={cn(\n 'mint:w-full mint:overflow-x-visible mint:max-w-[730px]',\n isFullWidth && 'mint:max-w-none!'\n )}\n >\n {payload.title && (\n <header className=\"mint:mb-6\">\n <div className=\"mint:flex mint:flex-col mint:gap-5\">\n <div className=\"mint:flex mint:flex-col mint:gap-2 mint:items-start\">\n <h1 className=\"mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2]\">\n {payload.title}\n </h1>\n {payload.description && (\n <p className=\"mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db] mint:m-0\">\n {payload.description}\n </p>\n )}\n </div>\n {pathname && (\n <PageContextMenu\n className=\"mint:shrink-0\"\n pathname={pathname}\n markdownContent={markdownContent}\n allPages={allPages}\n baseUrl={baseUrl}\n onCopyMarkdown={contextMenu?.onCopyMarkdown}\n onViewMarkdown={contextMenu?.onViewMarkdown}\n />\n )}\n </div>\n </header>\n )}\n\n {zonePivotGroups.length > 0 && (\n <div className=\"mint:mb-6 mint:flex mint:flex-wrap mint:gap-4\">\n {zonePivotGroups.map((group) => (\n <ZonePivotSelector\n key={group.id}\n group={group}\n className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm\"\n />\n ))}\n </div>\n )}\n\n <div className=\"mint:pt-4\">\n <MDXRenderer>\n <Content />\n </MDXRenderer>\n </div>\n </div>\n </div>\n </ZonePivotProvider>\n </div>\n </div>\n </div>\n </div>\n </ComponentsProvider>\n );\n}\n\nexport type { DocsPageProps, PayloadData } from '../types';\n\nexport type { EnhancedDocsPageProps as DocsPagePropsWithCustomization };\n\nexport type { ContextualOption };\n"],"names":["DocsPage","payload","toc","navTree","activeHref","theme","className","pathname","markdownContent","allPages","baseUrl","bottomLinks","LinkComponent","localization","telemetry","contextMenu","apiReferenceData2","Content","zonePivotGroups","_a","pivotTocItems","_b","isFullWidth","loc","useEffect","hash","timeoutId","targetId","scrollContainer","targetElement","style","scrollMtRem","fontSize","scrollOffset","containerRect","relativeTop","jsx","ComponentsProvider","cn","ZonePivotProvider","jsxs","ApiExamples","TextAlignLeftFilled","PivotAwareTOC","TableOfContents","PageContextMenu","group","ZonePivotSelector","MDXRenderer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"docsPage.js","sources":["../../src/components/docsPage.tsx"],"sourcesContent":["import { TextAlignLeftFilled } from '@fluentui/react-icons';\nimport { useEffect } from 'react';\n\nimport { ApiExamples } from '../api-playground-2/ApiExamples';\nimport { ComponentsProvider } from '../context/components-context';\nimport '../styles.css';\nimport type { DocsPageProps, PayloadData } from '../types';\nimport { cn } from '../utils/cn';\nimport { ZonePivotProvider, ZonePivotSelector } from './content-components/zone-pivots';\nimport { MDXRenderer } from './mdx-renderer';\nimport { PageContextMenu, type ContextualOption } from './page-context-menu';\nimport { TableOfContents } from './toc';\nimport { PivotAwareTOC } from './toc/pivot-aware-toc';\n\n/**\n * Localization strings for DocsPage component\n */\nexport interface DocsPageLocalization {\n /** Text for \"On this page\" heading. Default: \"On this page\" */\n onThisPage?: string;\n /** Loading message. Default: \"Loading...\" */\n loading?: string;\n /** Error title. Default: \"Error\" */\n errorTitle?: string;\n /** Generic error message. Default: \"Something went wrong\" */\n errorMessage?: string;\n /** Not found title. Default: \"Page not found\" */\n notFoundTitle?: string;\n /** Not found message. Default: \"The page you're looking for doesn't exist\" */\n notFoundMessage?: string;\n}\n\n/**\n * Telemetry configuration for DocsPage\n */\nexport interface DocsPageTelemetry {\n /** Activity name for page context menu interactions */\n contextMenuActivity?: string;\n /** Phase for context menu interactions */\n contextMenuPhase?: string;\n /** Activity name for TOC link clicks */\n tocLinkActivity?: string;\n /** Phase for TOC link clicks */\n tocLinkPhase?: string;\n /** Activity name for zone pivot selector changes */\n zonePivotActivity?: string;\n /** Phase for zone pivot changes */\n zonePivotPhase?: string;\n}\n\n/**\n * Configuration for the page context menu\n */\nexport interface PageContextMenuConfig {\n /** Custom actions for the page context menu. If provided, these will replace the default actions. */\n customActions?: ContextualOption[];\n /** Callback fired after markdown is successfully copied */\n onCopyMarkdown?: () => void;\n /** Custom handler for \"Copy Page\" action. If provided, replaces default copy behavior. */\n onCopyPage?: () => void | Promise<void>;\n /** Custom handler for \"View as Markdown\" action. If provided, replaces default view behavior. */\n onViewMarkdown?: (pathname?: string) => void;\n /** Custom handler for \"View llms.txt\" action. If provided, replaces default behavior. */\n onViewLlmsTxt?: () => void;\n /** Custom handler for \"View llms-full.txt\" action. If provided, replaces default behavior. */\n onViewLlmsFullTxt?: () => void;\n}\n\n/**\n * Enhanced DocsPageProps with localization and telemetry support\n */\nexport interface EnhancedDocsPageProps extends DocsPageProps {\n /** Localization strings */\n localization?: DocsPageLocalization;\n /** Telemetry configuration */\n telemetry?: DocsPageTelemetry;\n /** Context menu configuration */\n contextMenu?: PageContextMenuConfig;\n}\n\n/**\n * DocsPage component renders a documentation page with MDX content, table of contents,\n * zone pivot selectors, and page context menu. It supports full customization through\n * props for localization, telemetry, and custom components.\n *\n * @example\n * ```tsx\n * <DocsPage\n * payload={{\n * content: \"...\",\n * serializedContent: Content,\n * title: \"Getting Started\",\n * description: \"Learn how to get started\"\n * }}\n * toc={[{ title: \"Introduction\", slug: \"intro\", level: 2 }]}\n * theme=\"dark\"\n * pathname=\"/docs/getting-started\"\n * LinkComponent={Link}\n * localization={{\n * onThisPage: \"In this article\"\n * }}\n * telemetry={{\n * contextMenuActivity: \"DocsPageContextMenu\",\n * contextMenuPhase: \"Start\"\n * }}\n * />\n * ```\n */\nexport function DocsPage({\n payload,\n toc,\n navTree,\n activeHref,\n theme,\n className = '',\n pathname,\n markdownContent,\n allPages,\n baseUrl,\n bottomLinks,\n LinkComponent,\n localization,\n telemetry,\n contextMenu,\n apiReferenceData2,\n}: EnhancedDocsPageProps) {\n const Content = payload.serializedContent;\n const zonePivotGroups = payload.mdxExtracts?.zonePivotGroups || [];\n const pivotTocItems = payload.mdxExtracts?.pivotTocItems;\n const isFullWidth = !payload.title;\n\n // Default localization\n const defaultLocalization: Required<DocsPageLocalization> = {\n onThisPage: 'On this page',\n loading: 'Loading...',\n errorTitle: 'Error',\n errorMessage: 'Something went wrong',\n notFoundTitle: 'Page not found',\n notFoundMessage: \"The page you're looking for doesn't exist\",\n };\n\n const loc = { ...defaultLocalization, ...localization };\n\n useEffect(() => {\n const { hash } = window.location;\n if (!hash) return;\n\n const scrollToHash = () => {\n const targetId = hash.substring(1);\n const scrollContainer = document.getElementById('main-content');\n const targetElement = document.getElementById(targetId);\n\n if (scrollContainer && targetElement) {\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize;\n\n const containerRect = scrollContainer.getBoundingClientRect();\n const targetRect = targetElement.getBoundingClientRect();\n const relativeTop =\n targetRect.top - containerRect.top + scrollContainer.scrollTop - scrollOffset;\n\n scrollContainer.scrollTo({\n top: relativeTop,\n behavior: 'instant',\n });\n }\n };\n\n const timeoutId = setTimeout(scrollToHash, 100);\n\n return () => clearTimeout(timeoutId);\n }, [pathname]);\n\n return (\n <ComponentsProvider LinkComponent={LinkComponent}>\n <div\n className={cn(\n theme === 'dark' && 'dark',\n className,\n 'mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden'\n )}\n >\n <div\n id=\"page-container\"\n className=\"mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:flex-1 mint:min-h-0 mint:h-full mint:flex mint:flex-col mint:overflow-hidden\"\n >\n <div\n id=\"page-wrapper\"\n className=\"mint:flex mint:rounded-tl-2xl mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden\"\n >\n <div\n id=\"main-content\"\n className={cn(\n 'mint:flex-1 mint:p-8 mint:overflow-y-auto mint:overflow-x-hidden mint:rounded-tl-2xl mint:bg-white mint:dark:bg-[#1f1f1f] [scrollbar-gutter:stable] mint:overscroll-contain mint:lg:px-16 mint:lg:pt-12 [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30'\n )}\n >\n <ZonePivotProvider groups={zonePivotGroups}>\n <div\n className=\"mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full\"\n id=\"content-layout-container\"\n >\n {apiReferenceData2?.operation ? (\n <div className=\"mint:hidden mint:xl:flex! mint:self-start mint:sticky mint:flex-col mint:max-w-md mint:top-0 mint:gap-6\">\n <ApiExamples apiReferenceData={apiReferenceData2} />\n </div>\n ) : toc && toc.length > 0 ? (\n <aside className=\"mint:w-68 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block\">\n <div className=\"mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto\">\n <div className=\"mint:flex mint:items-center mint:gap-2 mint:mb-4\">\n <TextAlignLeftFilled className=\"mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]\" />\n <h2 className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white\">\n {loc.onThisPage}\n </h2>\n </div>\n {pivotTocItems && Object.keys(pivotTocItems).length > 0 ? (\n <PivotAwareTOC baseToc={toc} pivotTocItems={pivotTocItems} />\n ) : (\n <TableOfContents toc={toc} />\n )}\n </div>\n </aside>\n ) : null}\n\n <div\n className={cn(\n 'mint:w-full mint:overflow-x-visible mint:max-w-[730px]',\n isFullWidth && 'mint:max-w-none!'\n )}\n >\n {payload.title && (\n <header className=\"mint:mb-6\">\n <div className=\"mint:flex mint:flex-col mint:gap-5\">\n <div className=\"mint:flex mint:flex-col mint:gap-2 mint:items-start\">\n <h1 className=\"mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2] mint:pt-3\">\n {payload.title}\n </h1>\n {payload.description && (\n <p className=\"mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db] mint:m-0\">\n {payload.description}\n </p>\n )}\n </div>\n {pathname && (\n <PageContextMenu\n className=\"mint:shrink-0\"\n pathname={pathname}\n markdownContent={markdownContent}\n allPages={allPages}\n baseUrl={baseUrl}\n onCopyMarkdown={contextMenu?.onCopyMarkdown}\n onViewMarkdown={contextMenu?.onViewMarkdown}\n />\n )}\n </div>\n </header>\n )}\n\n {zonePivotGroups.length > 0 && (\n <div className=\"mint:mb-6 mint:flex mint:flex-wrap mint:gap-4\">\n {zonePivotGroups.map((group) => (\n <ZonePivotSelector\n key={group.id}\n group={group}\n className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm\"\n />\n ))}\n </div>\n )}\n\n <div className=\"mint:pt-4\">\n <MDXRenderer>\n <Content />\n </MDXRenderer>\n </div>\n </div>\n </div>\n </ZonePivotProvider>\n </div>\n </div>\n </div>\n </div>\n </ComponentsProvider>\n );\n}\n\nexport type { DocsPageProps, PayloadData } from '../types';\n\nexport type { EnhancedDocsPageProps as DocsPagePropsWithCustomization };\n\nexport type { ContextualOption };\n"],"names":["DocsPage","payload","toc","navTree","activeHref","theme","className","pathname","markdownContent","allPages","baseUrl","bottomLinks","LinkComponent","localization","telemetry","contextMenu","apiReferenceData2","Content","zonePivotGroups","_a","pivotTocItems","_b","isFullWidth","loc","useEffect","hash","timeoutId","targetId","scrollContainer","targetElement","style","scrollMtRem","fontSize","scrollOffset","containerRect","relativeTop","jsx","ComponentsProvider","cn","ZonePivotProvider","jsxs","ApiExamples","TextAlignLeftFilled","PivotAwareTOC","TableOfContents","PageContextMenu","group","ZonePivotSelector","MDXRenderer"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as w, jsxs as k } from "react/jsx-runtime";
|
|
2
|
-
import { useState as I, useRef as
|
|
3
|
-
import { cn as
|
|
4
|
-
function
|
|
5
|
-
const [
|
|
2
|
+
import { useState as I, useRef as C, useEffect as L } from "react";
|
|
3
|
+
import { cn as _ } from "../../utils/cn.js";
|
|
4
|
+
function N({ toc: i }) {
|
|
5
|
+
const [R, u] = I(""), l = C(!1), r = C();
|
|
6
6
|
return L(() => {
|
|
7
7
|
var c;
|
|
8
8
|
if (i.length === 0) return;
|
|
@@ -19,16 +19,16 @@ function $({ toc: i }) {
|
|
|
19
19
|
}, e = document.getElementById("main-content"), g = () => {
|
|
20
20
|
var x, E;
|
|
21
21
|
if (!e) return (x = i[0]) == null ? void 0 : x.slug;
|
|
22
|
-
const o = window.getComputedStyle(document.documentElement), p = parseFloat(o.getPropertyValue("--scroll-mt") || "0"), h = parseFloat(o.fontSize),
|
|
23
|
-
const T = document.getElementById(
|
|
22
|
+
const o = window.getComputedStyle(document.documentElement), p = parseFloat(o.getPropertyValue("--scroll-mt") || "0"), h = parseFloat(o.fontSize), v = p * h + 100, b = e.scrollTop, a = i.map((m) => {
|
|
23
|
+
const T = document.getElementById(m.slug);
|
|
24
24
|
if (!T) return null;
|
|
25
|
-
const
|
|
26
|
-
return { id:
|
|
25
|
+
const y = T.getBoundingClientRect(), S = e.getBoundingClientRect(), B = y.top - S.top + b;
|
|
26
|
+
return { id: m.slug, top: B };
|
|
27
27
|
}).filter(Boolean);
|
|
28
|
-
if (
|
|
29
|
-
let d =
|
|
30
|
-
for (const
|
|
31
|
-
|
|
28
|
+
if (a.length === 0) return (E = i[0]) == null ? void 0 : E.slug;
|
|
29
|
+
let d = a[0];
|
|
30
|
+
for (const m of a)
|
|
31
|
+
b + v >= m.top && (d = m);
|
|
32
32
|
return d == null ? void 0 : d.id;
|
|
33
33
|
}, n = () => {
|
|
34
34
|
if (l.current) return;
|
|
@@ -43,7 +43,7 @@ function $({ toc: i }) {
|
|
|
43
43
|
s && clearTimeout(s), r.current && clearTimeout(r.current), window.removeEventListener("hashchange", f), e ? e.removeEventListener("scroll", n) : window.removeEventListener("scroll", n);
|
|
44
44
|
};
|
|
45
45
|
}, [i]), /* @__PURE__ */ w("ul", { className: "mint:list-none mint:flex mint:flex-col mint:gap-2 mint:text-sm mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:font-medium mint:relative mint:pl-[0.15rem] mint:before:content-[''] mint:before:absolute mint:before:left-[0.15rem] mint:before:top-0 mint:before:bottom-0 mint:before:w-[3px] mint:before:bg-[#f2f3f3] mint:dark:before:bg-[#222223] mint:before:rounded-full", children: i.map((t, f) => {
|
|
46
|
-
const e =
|
|
46
|
+
const e = R === t.slug;
|
|
47
47
|
return /* @__PURE__ */ k("li", { className: "mint:relative", children: [
|
|
48
48
|
e && /* @__PURE__ */ w("div", { className: "mint:absolute mint:left-0 mint:top-0 mint:bottom-0 mint:w-[3px] mint:rounded-full mint:bg-[#643fb2] mint:dark:bg-[#c9aaf9] mint:z-1" }),
|
|
49
49
|
/* @__PURE__ */ w(
|
|
@@ -54,17 +54,17 @@ function $({ toc: i }) {
|
|
|
54
54
|
g.preventDefault();
|
|
55
55
|
const n = document.getElementById("main-content"), s = document.getElementById(t.slug);
|
|
56
56
|
if (n && s) {
|
|
57
|
-
const c = window.getComputedStyle(document.documentElement), o = parseFloat(c.getPropertyValue("--scroll-mt") || "0"), p = parseFloat(c.fontSize), h = o * p,
|
|
57
|
+
const c = window.getComputedStyle(document.documentElement), o = parseFloat(c.getPropertyValue("--scroll-mt") || "0"), p = parseFloat(c.fontSize), h = o * p, v = n.getBoundingClientRect(), a = s.getBoundingClientRect().top - v.top + n.scrollTop - h;
|
|
58
58
|
n.scrollTo({
|
|
59
|
-
top:
|
|
59
|
+
top: a,
|
|
60
60
|
behavior: "instant"
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
63
|
history.replaceState(null, "", `#${t.slug}`);
|
|
64
64
|
},
|
|
65
|
-
className:
|
|
65
|
+
className: _(
|
|
66
66
|
"mint:block mint:pl-6 mint:leading-relaxed mint:no-underline",
|
|
67
|
-
e ? "mint:text-[#643fb2] mint:dark:text-[#c9aaf9] mint:
|
|
67
|
+
e ? "mint:text-[#643fb2] mint:dark:text-[#c9aaf9] mint:[text-shadow:-0.2px_0_0_currentColor,0.2px_0_0_currentColor]" : "mint:text-[#424242] mint:dark:text-[#d6d6d6] mint:dark:hover:text-[#d1d5db] mint:hover:text-[#111827]"
|
|
68
68
|
),
|
|
69
69
|
children: t.title
|
|
70
70
|
}
|
|
@@ -73,6 +73,6 @@ function $({ toc: i }) {
|
|
|
73
73
|
}) });
|
|
74
74
|
}
|
|
75
75
|
export {
|
|
76
|
-
|
|
76
|
+
N as TableOfContents
|
|
77
77
|
};
|
|
78
78
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/toc/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { TocItem } from '../../types';\nimport { cn } from '../../utils/cn';\n\ninterface TableOfContentsProps {\n toc: TocItem[];\n}\n\nexport function TableOfContents({ toc }: TableOfContentsProps) {\n const [activeId, setActiveId] = useState('');\n const ignoreScrollRef = useRef(false);\n const ignoreTimeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (toc.length === 0) return;\n\n ignoreScrollRef.current = false;\n if (ignoreTimeoutRef.current) {\n clearTimeout(ignoreTimeoutRef.current);\n }\n\n const hash = window.location.hash.slice(1);\n if (hash) {\n setActiveId(hash);\n ignoreScrollRef.current = true;\n ignoreTimeoutRef.current = setTimeout(() => {\n ignoreScrollRef.current = false;\n }, 1000);\n } else {\n setActiveId(toc[0]?.slug || '');\n }\n\n const handleHashChange = () => {\n const hash = window.location.hash.slice(1);\n if (hash) {\n setActiveId(hash);\n ignoreScrollRef.current = true;\n if (ignoreTimeoutRef.current) {\n clearTimeout(ignoreTimeoutRef.current);\n }\n ignoreTimeoutRef.current = setTimeout(() => {\n ignoreScrollRef.current = false;\n }, 1000);\n }\n };\n\n const scrollContainer = document.getElementById('main-content');\n\n const getActiveHeading = () => {\n if (!scrollContainer) return toc[0]?.slug;\n\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize + 100;\n\n const scrollY = scrollContainer.scrollTop;\n\n const headingPositions = toc\n .map((item) => {\n const element = document.getElementById(item.slug);\n if (!element) return null;\n\n const rect = element.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const relativeTop = rect.top - containerRect.top + scrollY;\n\n return { id: item.slug, top: relativeTop };\n })\n .filter(Boolean) as Array<{ id: string; top: number }>;\n\n if (headingPositions.length === 0) return toc[0]?.slug;\n\n let currentHeading = headingPositions[0];\n for (const heading of headingPositions) {\n if (scrollY + scrollOffset >= heading.top) {\n currentHeading = heading;\n }\n }\n\n return currentHeading?.id;\n };\n\n const handleScroll = () => {\n if (ignoreScrollRef.current) return;\n\n const newActiveId = getActiveHeading();\n if (newActiveId) {\n setActiveId(newActiveId);\n }\n };\n\n window.addEventListener('hashchange', handleHashChange);\n\n if (scrollContainer) {\n scrollContainer.addEventListener('scroll', handleScroll, {\n passive: true,\n });\n } else {\n window.addEventListener('scroll', handleScroll, { passive: true });\n }\n\n let timeoutId: NodeJS.Timeout | undefined;\n if (!hash) {\n timeoutId = setTimeout(handleScroll, 100);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n if (ignoreTimeoutRef.current) clearTimeout(ignoreTimeoutRef.current);\n window.removeEventListener('hashchange', handleHashChange);\n if (scrollContainer) {\n scrollContainer.removeEventListener('scroll', handleScroll);\n } else {\n window.removeEventListener('scroll', handleScroll);\n }\n };\n }, [toc]);\n\n return (\n <ul className=\"mint:list-none mint:flex mint:flex-col mint:gap-2 mint:text-sm mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:font-medium mint:relative mint:pl-[0.15rem] mint:before:content-[''] mint:before:absolute mint:before:left-[0.15rem] mint:before:top-0 mint:before:bottom-0 mint:before:w-[3px] mint:before:bg-[#f2f3f3] mint:dark:before:bg-[#222223] mint:before:rounded-full\">\n {toc.map((item, index) => {\n const isActive = activeId === item.slug;\n return (\n <li key={`${item.slug}-${index}`} className=\"mint:relative\">\n {isActive && (\n <div className=\"mint:absolute mint:left-0 mint:top-0 mint:bottom-0 mint:w-[3px] mint:rounded-full mint:bg-[#643fb2] mint:dark:bg-[#c9aaf9] mint:z-1\" />\n )}\n <a\n href={`#${item.slug}`}\n onClick={(e) => {\n e.preventDefault();\n const scrollContainer = document.getElementById('main-content');\n const targetElement = document.getElementById(item.slug);\n\n if (scrollContainer && targetElement) {\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize;\n\n const containerRect = scrollContainer.getBoundingClientRect();\n const targetRect = targetElement.getBoundingClientRect();\n const relativeTop =\n targetRect.top - containerRect.top + scrollContainer.scrollTop - scrollOffset;\n\n scrollContainer.scrollTo({\n top: relativeTop,\n behavior: 'instant',\n });\n }\n\n history.replaceState(null, '', `#${item.slug}`);\n }}\n className={cn(\n 'mint:block mint:pl-6 mint:leading-relaxed mint:no-underline',\n isActive\n ? 'mint:text-[#643fb2] mint:dark:text-[#c9aaf9] mint:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/toc/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { TocItem } from '../../types';\nimport { cn } from '../../utils/cn';\n\ninterface TableOfContentsProps {\n toc: TocItem[];\n}\n\nexport function TableOfContents({ toc }: TableOfContentsProps) {\n const [activeId, setActiveId] = useState('');\n const ignoreScrollRef = useRef(false);\n const ignoreTimeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (toc.length === 0) return;\n\n ignoreScrollRef.current = false;\n if (ignoreTimeoutRef.current) {\n clearTimeout(ignoreTimeoutRef.current);\n }\n\n const hash = window.location.hash.slice(1);\n if (hash) {\n setActiveId(hash);\n ignoreScrollRef.current = true;\n ignoreTimeoutRef.current = setTimeout(() => {\n ignoreScrollRef.current = false;\n }, 1000);\n } else {\n setActiveId(toc[0]?.slug || '');\n }\n\n const handleHashChange = () => {\n const hash = window.location.hash.slice(1);\n if (hash) {\n setActiveId(hash);\n ignoreScrollRef.current = true;\n if (ignoreTimeoutRef.current) {\n clearTimeout(ignoreTimeoutRef.current);\n }\n ignoreTimeoutRef.current = setTimeout(() => {\n ignoreScrollRef.current = false;\n }, 1000);\n }\n };\n\n const scrollContainer = document.getElementById('main-content');\n\n const getActiveHeading = () => {\n if (!scrollContainer) return toc[0]?.slug;\n\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize + 100;\n\n const scrollY = scrollContainer.scrollTop;\n\n const headingPositions = toc\n .map((item) => {\n const element = document.getElementById(item.slug);\n if (!element) return null;\n\n const rect = element.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const relativeTop = rect.top - containerRect.top + scrollY;\n\n return { id: item.slug, top: relativeTop };\n })\n .filter(Boolean) as Array<{ id: string; top: number }>;\n\n if (headingPositions.length === 0) return toc[0]?.slug;\n\n let currentHeading = headingPositions[0];\n for (const heading of headingPositions) {\n if (scrollY + scrollOffset >= heading.top) {\n currentHeading = heading;\n }\n }\n\n return currentHeading?.id;\n };\n\n const handleScroll = () => {\n if (ignoreScrollRef.current) return;\n\n const newActiveId = getActiveHeading();\n if (newActiveId) {\n setActiveId(newActiveId);\n }\n };\n\n window.addEventListener('hashchange', handleHashChange);\n\n if (scrollContainer) {\n scrollContainer.addEventListener('scroll', handleScroll, {\n passive: true,\n });\n } else {\n window.addEventListener('scroll', handleScroll, { passive: true });\n }\n\n let timeoutId: NodeJS.Timeout | undefined;\n if (!hash) {\n timeoutId = setTimeout(handleScroll, 100);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n if (ignoreTimeoutRef.current) clearTimeout(ignoreTimeoutRef.current);\n window.removeEventListener('hashchange', handleHashChange);\n if (scrollContainer) {\n scrollContainer.removeEventListener('scroll', handleScroll);\n } else {\n window.removeEventListener('scroll', handleScroll);\n }\n };\n }, [toc]);\n\n return (\n <ul className=\"mint:list-none mint:flex mint:flex-col mint:gap-2 mint:text-sm mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:font-medium mint:relative mint:pl-[0.15rem] mint:before:content-[''] mint:before:absolute mint:before:left-[0.15rem] mint:before:top-0 mint:before:bottom-0 mint:before:w-[3px] mint:before:bg-[#f2f3f3] mint:dark:before:bg-[#222223] mint:before:rounded-full\">\n {toc.map((item, index) => {\n const isActive = activeId === item.slug;\n return (\n <li key={`${item.slug}-${index}`} className=\"mint:relative\">\n {isActive && (\n <div className=\"mint:absolute mint:left-0 mint:top-0 mint:bottom-0 mint:w-[3px] mint:rounded-full mint:bg-[#643fb2] mint:dark:bg-[#c9aaf9] mint:z-1\" />\n )}\n <a\n href={`#${item.slug}`}\n onClick={(e) => {\n e.preventDefault();\n const scrollContainer = document.getElementById('main-content');\n const targetElement = document.getElementById(item.slug);\n\n if (scrollContainer && targetElement) {\n const style = window.getComputedStyle(document.documentElement);\n const scrollMtRem = parseFloat(style.getPropertyValue('--scroll-mt') || '0');\n const fontSize = parseFloat(style.fontSize);\n const scrollOffset = scrollMtRem * fontSize;\n\n const containerRect = scrollContainer.getBoundingClientRect();\n const targetRect = targetElement.getBoundingClientRect();\n const relativeTop =\n targetRect.top - containerRect.top + scrollContainer.scrollTop - scrollOffset;\n\n scrollContainer.scrollTo({\n top: relativeTop,\n behavior: 'instant',\n });\n }\n\n history.replaceState(null, '', `#${item.slug}`);\n }}\n className={cn(\n 'mint:block mint:pl-6 mint:leading-relaxed mint:no-underline',\n isActive\n ? 'mint:text-[#643fb2] mint:dark:text-[#c9aaf9] mint:[text-shadow:-0.2px_0_0_currentColor,0.2px_0_0_currentColor]'\n : 'mint:text-[#424242] mint:dark:text-[#d6d6d6] mint:dark:hover:text-[#d1d5db] mint:hover:text-[#111827]'\n )}\n >\n {item.title}\n </a>\n </li>\n );\n })}\n </ul>\n );\n}\n"],"names":["TableOfContents","toc","activeId","setActiveId","useState","ignoreScrollRef","useRef","ignoreTimeoutRef","useEffect","hash","_a","handleHashChange","scrollContainer","getActiveHeading","style","scrollMtRem","fontSize","scrollOffset","scrollY","headingPositions","item","element","rect","containerRect","relativeTop","_b","currentHeading","heading","handleScroll","newActiveId","timeoutId","jsx","index","isActive","jsxs","e","targetElement","cn"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -209,7 +209,7 @@ declare interface CalloutProps {
|
|
|
209
209
|
children: React.ReactNode;
|
|
210
210
|
}
|
|
211
211
|
|
|
212
|
-
declare type CalloutType =
|
|
212
|
+
declare type CalloutType = 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'nextstepaction';
|
|
213
213
|
|
|
214
214
|
export declare const capitalize: (str: string) => string;
|
|
215
215
|
|