xmlui 0.7.27 → 0.7.28

package/dist/scripts/src/components/Table/Table.js

@@ -22,18 +22,25 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a component that displays cells organized into rows and columns. The \`${COMP}\` ` +
         `component is virtualized so it only renders visible cells.`,
     props: {
-        items: (0, ComponentDefs_1.d)(`You can use \`items\` as an alias for the \`data\` property. ` +
+        items: (0, metadata_helpers_1.dInternal)(`You can use \`items\` as an alias for the \`data\` property. ` +
             `When you bind the table to a data source (e.g. an API endpoint), ` +
             `the \`data\` acts as the property that accepts a URL to fetch information from an API. ` +
             `When both \`items\` and \`data\` are used, \`items\` has priority.`),
         data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
             `that the \`Table\` can display.`),
-        isPaginated: (0, ComponentDefs_1.d)(`This property adds pagination controls to the \`${COMP}\`.`),
+        isPaginated: {
+            description: `This property adds pagination controls to the \`${COMP}\`.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         loading: (0, ComponentDefs_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
         headerHeight: (0, ComponentDefs_1.d)(`This optional property is used to specify the height of the table header.`),
         rowsSelectable: (0, ComponentDefs_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
-        pageSizes: (0, ComponentDefs_1.d)(`Describes how big a page should be for pagination.`),
+        pageSizes: {
+            description: "This property holds an array of page sizes (numbers) the user can select for " +
+                "pagination. If this property is not defined, the component allows only a page size of 10 items.",
+        },
         rowDisabledPredicate: (0, ComponentDefs_1.d)(`This property defines a predicate function with a return value that determines if the ` +
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),
@@ -42,21 +49,31 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         sortDirection: (0, ComponentDefs_1.d)(`This property determines the sort order to be \`ascending\` or \`descending\`. This ` +
             `property only works if the [\`sortBy\`](#sortby) property is also set.`),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        hideHeader: (0, ComponentDefs_1.d)(`Set the header visibility using this property. Set it to \`true\` to hide the header.`),
-        iconNoSort: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when ` +
-            `when sorting is enabled and sorting is not done according to the column.`),
-        iconSortAsc: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when sorting ` +
-            `is enabled, sorting is done according to the column, and the column is sorted in ` +
-            `ascending order.`),
-        iconSortDesc: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when sorting ` +
-            `is enabled, sorting is done according to the column, and the column is sorted in ` +
-            `descending order.`),
-        enableMultiRowSelection: (0, ComponentDefs_1.d)(`This boolean property indicates whether you can select multiple rows in the table. ` +
-            `This property only has an effect when the rowsSelectable property is set. Setting it ` +
-            `to \`false\` limits selection to a single row.`),
-        alwaysShowSelectionHeader: (0, ComponentDefs_1.d)("This property indicates when the row selection header is displayed. When the value is " +
-            "`true,` the selection header is always visible. Otherwise, it is displayed only " +
-            "when hovered.", null, "boolean", false),
+        hideHeader: {
+            description: "Set the header visibility using this property. Set it to \`true\` to hide the header.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is ` +
+            `enabled, but the column remains unsorted.`),
+        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+            `and the column is sorted in ascending order.`),
+        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+            `and the column is sorted in descending order.`),
+        enableMultiRowSelection: {
+            description: `This boolean property indicates whether you can select multiple rows in the table. ` +
+                `This property only has an effect when the rowsSelectable property is set. Setting it ` +
+                `to \`false\` limits selection to a single row.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        alwaysShowSelectionHeader: {
+            description: "This property indicates when the row selection header is displayed. When the value is " +
+                "`true,` the selection header is always visible. Otherwise, it is displayed only " +
+                "when hovered.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
     },
     events: {
         sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +

package/dist/scripts/src/components/TableOfContents/TableOfContents.js

@@ -17,10 +17,19 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         `and displays them in a tree representing their hierarchy. When you select an item ` +
         `in this tree, the component navigates the page to the selected position.`,
     props: {
-        smoothScrolling: (0, ComponentDefs_1.d)(`This property indicates that smooth scrolling is used while scrolling the selected table ` +
-            `of contents items into view.`),
-        maxHeadingLevel: (0, ComponentDefs_1.d)("Defines the maximum heading level to include in the table of contents. Headings " +
-            "with a level greater than this value will be excluded."),
+        smoothScrolling: {
+            description: `This property indicates that smooth scrolling is used while scrolling the selected table ` +
+                `of contents items into view.`,
+            valueType: "boolean",
+            defaultValue: "false",
+        },
+        maxHeadingLevel: {
+            description: "Defines the maximum heading level (1 to 6) to include in the table of contents. " +
+                "For example, if it is 2, then `H1` and `H2` are displayed, but lower levels " +
+                "(`H3` to `H6`) are not.",
+            valueType: "number",
+            defaultValue: "6",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -12,15 +12,19 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
-const react_router_dom_1 = require("react-router-dom");
 exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
-    const { headings, setObserveIntersection, activeAnchorId, setActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
+    const [activeAnchorId, setActiveId] = (0, react_1.useState)(null);
+    const { headings, scrollToAnchor, subscribeToActiveAnchorChange } = (0, TableOfContentsContext_1.useTableOfContents)();
+    (0, react_1.useLayoutEffect)(() => {
+        return subscribeToActiveAnchorChange((id) => {
+            const foundHeading = headings.find((heading) => heading.id === id);
+            if (foundHeading.level <= maxHeadingLevel) {
+                setActiveId(id);
+            }
+        });
+    }, [headings, maxHeadingLevel, subscribeToActiveAnchorChange]);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(tocRef, forwardedRef) : tocRef;
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    (0, react_1.useEffect)(() => {
-        setObserveIntersection(true);
-    }, [setObserveIntersection]);
     (0, react_1.useEffect)(() => {
         if (activeAnchorId && (tocRef === null || tocRef === void 0 ? void 0 : tocRef.current)) {
             const activeAnchor = tocRef.current.querySelector(`#${activeAnchorId}`);
@@ -47,22 +51,11 @@ exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ sty
                                 [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
                                 [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
                             }), to: `#${value.id}`, onClick: (event) => {
-                                event.preventDefault();
-                                value.anchor.scrollIntoView({
-                                    block: "start",
-                                    inline: "start",
-                                    behavior: smoothScrolling ? "smooth" : "auto",
-                                });
-                                setActiveAnchorId(value.id);
-                                requestAnimationFrame(() => {
-                                    navigate({
-                                        hash: `#${value.id}`,
-                                    }, {
-                                        state: {
-                                            preventHashScroll: true
-                                        },
-                                    });
-                                });
+                                // cmd/ctrl + click - open in new tab, don't prevent that
+                                if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
+                                    event.preventDefault();
+                                }
+                                scrollToAnchor(value.id, smoothScrolling);
                             }, id: value.id, children: value.text }) }, value.id));
                 }
                 return null;

package/dist/scripts/src/components/Tabs/Tabs.js

@@ -19,9 +19,14 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         activeTab: (0, ComponentDefs_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
             `representing the starting (leftmost) tab.`),
-        orientation: (0, ComponentDefs_1.d)(`This property indicates the orientation of the component. In horizontal orientation, ` +
-            `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-            `orientation, the buttons are at the top.`),
+        orientation: {
+            description: `This property indicates the orientation of the component. In horizontal orientation, ` +
+                `the tab sections are laid out on the left side of the content panel, while in vertical ` +
+                `orientation, the buttons are at the top.`,
+            availableValues: ["horizontal", "vertical"],
+            defaultValue: "vertical",
+            valueType: "string",
+        },
         tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),
     },
     apis: {

package/dist/scripts/src/components/Text/Text.js

@@ -29,14 +29,26 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: (0, ComponentDefs_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
             `the \`${COMP}\` component.`),
-        variant: (0, ComponentDefs_1.d)(`Optional string value that provides named presets for text variants with a ` +
-            `unique combination of font style, weight, size, color and other parameters.`, abstractions_1.variantOptionsMd),
-        maxLines: (0, ComponentDefs_1.d)(`This property determines the maximum number of lines the component can wrap to. ` +
-            `If there is no space to display all the contents, the component displays up to ` +
-            `as many lines as specified in this property.`),
-        preserveLinebreaks: (0, ComponentDefs_1.d)(`This property indicates if linebreaks should be preserved when displaying text.`),
-        ellipses: (0, ComponentDefs_1.d)(`This property indicates whether ellipses should be displayed when the text is ` +
-            `cropped (\`true\`) or not (\`false\`).`),
+        variant: {
+            description: "An optional string value that provides named presets for text variants with a " +
+                "unique combination of font style, weight, size, color, and other parameters. " +
+                "If not defined, the text uses the current style of its context.",
+            availableValues: abstractions_1.variantOptionsMd,
+        },
+        maxLines: (0, ComponentDefs_1.d)("This property determines the maximum number of lines the component can wrap to. " +
+            "If there is no space to display all the contents, the component displays up to as " +
+            "many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines."),
+        preserveLinebreaks: {
+            description: `This property indicates if linebreaks should be preserved when displaying text.`,
+            valueType: "boolean",
+            defaultValue: "false",
+        },
+        ellipses: {
+            description: "This property indicates whether ellipses should be displayed when the text is " +
+                "cropped (\`true\`) or not (\`false\`).",
+            valueType: "boolean",
+            defaultValue: false,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/TextArea/TextArea.js

@@ -13,7 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const TextAreaNative_1 = require("./TextAreaNative");
 const COMP = "TextArea";
 exports.resizeOptionsMd = [
-    { value: "undefined", description: "No resizing" },
+    { value: "(undefined)", description: "No resizing" },
     { value: "horizontal", description: "Can only resize horizontally" },
     { value: "vertical", description: "Can only resize vertically" },
     { value: "both", description: "Can resize in both dimensions" },
@@ -22,16 +22,31 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `\`${COMP}\` is a component that provides a multiline text input area.`,
     props: {
-        enterSubmits: (0, ComponentDefs_1.d)(`This optional boolean property indicates whether pressing the \`Enter\` key on the ` +
-            `keyboard prompts the parent \`Form\` component to submit. The default value is is \`true\`.`),
-        escResets: (0, ComponentDefs_1.d)(`This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
-            `the ESC key.`),
-        maxRows: (0, ComponentDefs_1.d)(`This optional number property maximizes the number of lines the \`${COMP}\` can grow to.`),
-        minRows: (0, ComponentDefs_1.d)(`This optional number property indicates the minimum number of lines the \`${COMP}\` ` +
-            `has and specifies its size accordingly.`),
-        rows: (0, ComponentDefs_1.d)(`Specifies the number of lines or rows (and thus, its size) the component has.`),
-        autoSize: (0, ComponentDefs_1.d)(`If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
-            `automatically based on the number of lines inside it.`, null, "boolean", false),
+        enterSubmits: {
+            description: "This optional boolean property indicates whether pressing the \`Enter\` key on the " +
+                "keyboard prompts the parent \`Form\` component to submit.",
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        escResets: {
+            description: `This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
+                `the ESC key.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` can grow.`),
+        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink.`),
+        rows: {
+            description: `Specifies the number of rows the component initially has.`,
+            valueType: "number",
+            defaultValue: 2,
+        },
+        autoSize: {
+            description: `If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
+                `automatically based on the number of lines inside it.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),
@@ -44,8 +59,10 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        resize: (0, ComponentDefs_1.d)(`This optional property specifies in which dimensions can the \`TextArea\` ` +
-            `be resized by the user.`, exports.resizeOptionsMd),
+        resize: { description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
+                `be resized by the user.`,
+            availableValues: exports.resizeOptionsMd,
+        },
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),

package/dist/scripts/src/components/Theme/Theme.js

@@ -25,8 +25,12 @@ exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
     allowArbitraryProps: true,
     props: {
         themeId: (0, ComponentDefs_1.d)(`This property specifies which theme to use by setting the theme's id.`),
-        tone: (0, ComponentDefs_1.d)(`This property allows the setting of the current theme's tone. Tone is either ` +
-            `\`light\` or \`dark\`.`),
+        tone: {
+            description: "This property allows the setting of the current theme's tone.",
+            availableValues: ["light", "dark"],
+            valueType: "string",
+            defaultValue: "light",
+        },
         root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`),
     },
     opaque: true,

package/dist/scripts/src/components/abstractions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -21,8 +21,8 @@ exports.LinkTargetMd = [
     },
     {
         value: "_unfencedTop",
-        description: "Allows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame."
-    }
+        description: "Allows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame.",
+    },
 ];
 // --- Available view sizes
 exports.viewportSizeMd = [
@@ -291,3 +291,14 @@ exports.variantOptionsMd = [
 const AbbreviationKeys = ["title"];
 const InsertedKeys = ["cite", "dateTime"];
 exports.VariantPropsKeys = [...AbbreviationKeys, ...InsertedKeys];
+exports.httpMethodNames = [
+    "get",
+    "post",
+    "put",
+    "delete",
+    "patch",
+    "head",
+    "options",
+    "trace",
+    "connect",
+];

package/dist/scripts/src/components-core/TableOfContentsContext.js

@@ -7,6 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("./utils/hooks");
 const react_2 = require("@remix-run/react");
+const constants_1 = require("./constants");
+const react_router_dom_1 = require("react-router-dom");
 /**
  * Several components work together to represent the hierarchy of a particular
  * app page as a TOC. This React component provides a context for storing this
@@ -18,9 +20,8 @@ exports.TableOfContentsContext = (0, react_1.createContext)(null);
  */
 function TableOfContentsProvider({ children }) {
     var _a, _b;
-    const [headings, setHeadings] = (0, react_1.useState)({});
-    const [observeIntersection, setObserveIntersection] = (0, react_1.useState)(false);
-    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const [headings, setHeadings] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const [callbacks, setCallbacks] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
     const observer = (0, react_1.useRef)(null);
     const initialHeading = (0, react_1.useRef)(null);
     const thisRef = (0, react_1.useRef)({
@@ -32,25 +33,33 @@ function TableOfContentsProvider({ children }) {
             thisRef.current.suspendPositionBasedSetActiveId = false;
         }, []),
     });
+    const notify = (0, react_1.useCallback)((id) => {
+        callbacks.forEach((cb) => cb(id));
+    }, [callbacks]);
     (0, react_1.useEffect)(() => {
-        if (observeIntersection) {
+        if (callbacks.length) {
             const handleObserver = (entries) => {
                 entries.forEach((entry) => {
                     if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
                         if (!thisRef.current.suspendPositionBasedSetActiveId) {
-                            setActiveId(entry.target.id);
+                            notify(entry.target.id);
                         }
                     }
                 });
             };
+            // stolen from nextra: https://github.com/shuding/nextra/blob/3729f67059f1fbdd3f98125bebabbe568c918694/packages/nextra-theme-docs/src/mdx-components/heading-anchor.client.tsx
+            // let headerHeight = getComputedStyle(scrollParent || document.body).getPropertyValue(
+            //   '--header-abs-height'
+            // );
             observer.current = new IntersectionObserver(handleObserver, {
-                rootMargin: "0px 0px -50%",
-                threshold: [0, 1],
+                rootMargin: `0% 0% -80%`,
+                // root: scrollParent,
+                // threshold: [0, 1],
             });
             Object.values(headings).forEach((elem) => { var _a, _b; return (_b = (_a = observer === null || observer === void 0 ? void 0 : observer.current) === null || _a === void 0 ? void 0 : _a.observe) === null || _b === void 0 ? void 0 : _b.call(_a, elem.anchor); });
             return () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); };
         }
-    }, [headings, observeIntersection]);
+    }, [callbacks.length, headings, notify, scrollParent]);
     const registerHeading = (0, react_1.useCallback)((headingItem) => {
         setHeadings((prevHeadings) => {
             return Object.assign(Object.assign({}, prevHeadings), { [headingItem.id]: headingItem });
@@ -63,12 +72,28 @@ function TableOfContentsProvider({ children }) {
             });
         };
     }, []);
-    const setActiveAnchorId = (0, react_1.useCallback)((id) => {
-        if (headings[id]) {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const scrollToAnchor = (0, react_1.useCallback)((id, smoothScrolling) => {
+        const value = headings[id];
+        if (value) {
+            value.anchor.scrollIntoView({
+                block: "start",
+                inline: "start",
+                behavior: smoothScrolling ? "smooth" : "auto",
+            });
+            notify(id);
+            requestAnimationFrame(() => {
+                navigate({
+                    hash: `#${value.id}`,
+                }, {
+                    state: {
+                        preventHashScroll: true,
+                    },
+                });
+            });
             thisRef.current.suspendPositionBasedSetActiveId = true;
-            setActiveId(id);
         }
-    }, [headings]);
+    }, [headings, navigate, notify]);
     const sortedHeadings = (0, react_1.useMemo)(() => {
         return Object.values(headings).sort(function (a, b) {
             if (a.anchor === b.anchor)
@@ -100,16 +125,31 @@ function TableOfContentsProvider({ children }) {
             }
         }
     }, [location.hash, sortedHeadings]);
+    const subscribeToActiveAnchorChange = (0, react_1.useCallback)((cb) => {
+        setCallbacks((prev) => {
+            return [...prev, cb];
+        });
+        return () => {
+            setCallbacks((prev) => {
+                return prev.filter((item) => item !== cb);
+            });
+        };
+    }, []);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             registerHeading,
             headings: sortedHeadings,
-            observeIntersection,
-            setObserveIntersection,
-            activeAnchorId: activeId,
-            setActiveAnchorId,
+            scrollToAnchor,
+            subscribeToActiveAnchorChange,
+            hasTableOfContents: callbacks.length > 0,
         };
-    }, [registerHeading, sortedHeadings, observeIntersection, activeId, setActiveAnchorId]);
+    }, [
+        registerHeading,
+        sortedHeadings,
+        scrollToAnchor,
+        subscribeToActiveAnchorChange,
+        callbacks.length,
+    ]);
     return ((0, jsx_runtime_1.jsx)(exports.TableOfContentsContext.Provider, { value: contextValue, children: children }));
 }
 function useTableOfContents() {