@altano/use-toc-visible-sections 1.0.4 → 1.0.6

package/README.md

@@ -0,0 +1,77 @@
+# use-toc-visible-sections
+
+[![npm](https://badgen.net/npm/v/@altano/use-toc-visible-sections)](https://www.npmjs.com/package/@altano/use-toc-visible-sections) ![Typed with TypeScript](https://badgen.net/npm/types/@altano/use-toc-visible-sections) ![ESM only](https://badgen.net/badge/module/esm%20only?icon=js)
+
+React hook to faciliate observing visibility of sections linked to a table of contents.
+
+## Installation
+
+`npm install @altano/use-toc-visible-sections`
+
+## Example
+
+### App.jsx
+
+```jsx
+import { TocVisibleSectionObserver } from "@altano/use-toc-visible-sections";
+
+export default () => (
+  <TocVisibleSectionObserver selector="article section">
+    <TableOfContents />
+    <Article />
+  </TocVisibleSectionObserver>
+);
+```
+
+### TableOfContents.jsx
+
+```jsx
+import { useVisibilityOfTarget } from "@altano/use-toc-visible-sections";
+
+export default () => (
+  <nav>
+    <ul>
+      <ListItem href="#heading1">Lorem ipsum dolor sit amet.</ListItem>
+      <ListItem href="#heading2">Dignissimos aliquam dolorum</ListItem>
+    </ul>
+  </nav>
+);
+
+function ListItem({ href, children }) {
+  // Is the section this `href` points to visible in the viewport?
+  const isVisible = useVisibilityOfTarget(href);
+  return (
+    <li
+      style={{
+        borderLeft: isVisible ? "3px solid black" : "3px solid transparent",
+      }}
+    >
+      <a href={href}>{children}</a>
+    </li>
+  );
+}
+```
+
+### Article.jsx
+
+```jsx
+export default () => (
+  <article>
+    <section>
+      <h1 id="heading1">Lorem ipsum dolor sit amet.</h1>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius libero autem in? Dicta explicabo cum laudantium voluptas voluptate quaerat inventore eos? Facilis, quae, doloribus dolorum doloremque voluptatum, labore omnis ipsum architecto debitis quibusdam quam recusandae delectus nesciunt voluptate iusto sequi saepe voluptatibus quis officiis illo dolor hic. Laudantium harum, quas tempora nobis doloremque odit sint fugit ea non beatae maxime enim odio debitis ullam delectus minima assumenda expedita. Laboriosam magni, voluptate harum officiis, voluptatibus illum porro minima architecto inventore eaque iusto a, praesentium nihil cum veritatis sunt! Incidunt debitis dignissimos hic soluta alias nisi asperiores nulla non? Corrupti, perspiciatis ducimus.</p>
+    </section>
+    <section>
+      <h1 id="heading2">Dignissimos aliquam dolorum</h1>
+      <p>Quis veniam qui quas! Repellendus tenetur nemo explicabo laborum cumque similique dicta cum ab quae ducimus aliquam ut animi sequi accusamus, dolorem perspiciatis quis doloremque, et dolorum voluptatem sunt, hic quidem nihil eveniet! Tenetur, consequatur nemo possimus sint quo itaque accusantium, voluptatibus facilis eveniet earum voluptas veniam quidem minima dolore? Aspernatur adipisci iste expedita exercitationem pariatur ex tenetur error doloribus nihil maxime eos repudiandae dolore omnis nesciunt, delectus illum, aperiam fugit blanditiis ipsa alias quaerat cupiditate eum numquam! Sed, ipsum. Eaque animi doloremque exercitationem amet eum, accusamus deserunt in atque, excepturi sunt, unde pariatur consequuntur repellendus aut quas sit ratione!</p>
+    </section>
+  </article>
+);
+```
+
+Doesn't react to DOM mutation, e.g. if you dynamically mount a `<section>` later it won't be observed.
+
+This hook is meant to be simple and handle cases like static sites generated using MDX where:
+
+- The subtree is static once mounted
+- The Markdown subtree is not directly owned by the application and therefore the observed elements are best discovered through a selector instead of explicit React refs.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useTocVisibleSections";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/useTocVisibleSections.tsx
+import {
+  VisibleElementObserver,
+  useVisibleElements
+} from "@altano/use-visible-elements";
+import { jsx } from "react/jsx-runtime";
+function useVisibilityOfTarget(href) {
+  const visibleElements = useVisibleElements();
+  return [...visibleElements].some((s) => s.querySelector(`:scope > ${href}`));
+}
+function TocVisibleSectionObserver(options) {
+  return /* @__PURE__ */ jsx(VisibleElementObserver, __spreadValues({ selector: "article section" }, options));
+}
+export {
+  TocVisibleSectionObserver,
+  useVisibilityOfTarget
+};

package/dist/useTocVisibleSections.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import React from "react";
 import { VisibleElementObserver } from "@altano/use-visible-elements";
-declare function useVisibilityOfTarget(href: string): boolean;
+export declare function useVisibilityOfTarget(href: string): boolean;
 type Options = {
     children: React.ReactNode;
     useWrapperDiv?: true;
@@ -13,5 +12,6 @@ type Options = {
     selector?: string;
     intersectionOptions?: IntersectionObserverInit;
 };
-declare function TocVisibleSectionObserver(options: Options): ReturnType<typeof VisibleElementObserver>;
-export { useVisibilityOfTarget, TocVisibleSectionObserver };
+export declare function TocVisibleSectionObserver(options: Options): ReturnType<typeof VisibleElementObserver>;
+export {};
+//# sourceMappingURL=useTocVisibleSections.d.ts.map

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@altano/use-toc-visible-sections",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Intersection-Observer-based Table of Contents Scroll Spy React Hook",
-  "main": "dist/useTocVisibleSections.js",
-  "types": "dist/useTocVisibleSections.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/**/*"
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
   ],
-  "prepublishOnly": "npm run build",
-  "scripts": {
-    "build": "rollup -c",
-    "start": "rollup -c --watch"
-  },
   "author": {
     "name": "Alan Norbauer",
     "email": "altano@gmail.com",
@@ -20,32 +18,38 @@
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
-    "url": "https://github.com/altano/use-toc-visible-sections"
+    "url": "https://github.com/altano/npm-packages",
+    "directory": "packages/use-toc-visible-sections"
   },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^3.0.0",
-    "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.25.0",
-    "@typescript-eslint/parser": "^2.25.0",
-    "@wessberg/rollup-plugin-ts": "^1.2.16",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "prettier": "^2.0.1",
-    "rollup": "^1.31.0",
-    "typescript": "^3.8.3"
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-toc-visible-sections",
+  "dependencies": {
+    "@altano/use-visible-elements": "1.0.6"
   },
   "peerDependencies": {
-    "react": "^16.12.0"
+    "react": "^18"
   },
-  "dependencies": {
-    "@altano/use-visible-elements": "1.0.0"
+  "devDependencies": {
+    "@types/react": "^18.0.38",
+    "@types/react-dom": "^18.0.11",
+    "eslint": "^8.39.0",
+    "prettier": "^2.8.7",
+    "react": "^18",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6",
+    "@altano/tsconfig": "0.0.0",
+    "eslint-config-altano": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm --onSuccess \"pnpm build:types\"",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "dev": "tsup src/index.tsx --watch --format esm",
+    "lint": "eslint src/**/*.ts*",
+    "lint:timing": "TIMING=1 eslint src/**/*.ts*",
+    "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
+    "format": "prettier --write src",
+    "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist"
   }
-}
+}

package/dist/useTocVisibleSections.js

@@ -1,845 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var react = _interopDefault(require('react'));
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var useVisibleElements_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, '__esModule', { value: true });
-function _interopDefault(ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-var React = _interopDefault(react);
-function unwrapExports(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-function createCommonjsModule(fn, module) {
-    return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-var useElementObserver_1 = createCommonjsModule(function (module, exports) {
-    Object.defineProperty(exports, '__esModule', { value: true });
-    function _interopDefault(ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-    var React__default = _interopDefault(React);
-    function unwrapExports(x) {
-        return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-    }
-    function createCommonjsModule(fn, module) {
-        return module = { exports: {} }, fn(module, module.exports), module.exports;
-    }
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
-    
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
-    
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) {
-                for (var p in b)
-                    if (b.hasOwnProperty(p))
-                        d[p] = b[p];
-            };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) {
-                try {
-                    step(generator.next(value));
-                }
-                catch (e) {
-                    reject(e);
-                }
-            }
-            function rejected(value) {
-                try {
-                    step(generator["throw"](value));
-                }
-                catch (e) {
-                    reject(e);
-                }
-            }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () {
-                if (t[0] & 1)
-                    throw t[1];
-                return t[1];
-            }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    function __exportStar(m, exports) {
-        for (var p in m)
-            if (!exports.hasOwnProperty(p))
-                exports[p] = m[p];
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) {
-            if (g[n])
-                i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-        }
-        function resume(n, v) {
-            try {
-                step(g[n](v));
-            }
-            catch (e) {
-                settle(q[0][3], e);
-            }
-        }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) {
-            if (f(v), q.shift(), q.length)
-                resume(q[0][0], q[0][1]);
-        }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (Object.hasOwnProperty.call(mod, k))
-                    result[k] = mod[k];
-        result.default = mod;
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
-    }
-    var tslib_es6 = /*#__PURE__*/ Object.freeze({
-        __proto__: null,
-        __extends: __extends,
-        get __assign() { return __assign; },
-        __rest: __rest,
-        __decorate: __decorate,
-        __param: __param,
-        __metadata: __metadata,
-        __awaiter: __awaiter,
-        __generator: __generator,
-        __exportStar: __exportStar,
-        __values: __values,
-        __read: __read,
-        __spread: __spread,
-        __spreadArrays: __spreadArrays,
-        __await: __await,
-        __asyncGenerator: __asyncGenerator,
-        __asyncDelegator: __asyncDelegator,
-        __asyncValues: __asyncValues,
-        __makeTemplateObject: __makeTemplateObject,
-        __importStar: __importStar,
-        __importDefault: __importDefault,
-        __classPrivateFieldGet: __classPrivateFieldGet,
-        __classPrivateFieldSet: __classPrivateFieldSet
-    });
-    var useSet_1 = createCommonjsModule(function (module, exports) {
-        Object.defineProperty(exports, "__esModule", { value: true });
-        /* eslint-disable */
-        var useSet = function (initialSet) {
-            if (initialSet === void 0) {
-                initialSet = new Set();
-            }
-            var _a = React__default.useState(initialSet), set = _a[0], setSet = _a[1];
-            var stableActions = React__default.useMemo(function () {
-                var add = function (item) { return setSet(function (prevSet) { return new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item])); }); };
-                var remove = function (item) { return setSet(function (prevSet) { return new Set(Array.from(prevSet).filter(function (i) { return i !== item; })); }); };
-                var toggle = function (item) {
-                    return setSet(function (prevSet) {
-                        return prevSet.has(item)
-                            ? new Set(Array.from(prevSet).filter(function (i) { return i !== item; }))
-                            : new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item]));
-                    });
-                };
-                return { add: add, remove: remove, toggle: toggle, reset: function () { return setSet(initialSet); } };
-            }, [setSet]);
-            var utils = tslib_es6.__assign({ has: React__default.useCallback(function (item) { return set.has(item); }, [set]) }, stableActions);
-            return [set, utils];
-        };
-        exports.default = useSet;
-    });
-    var useSet = unwrapExports(useSet_1);
-    const ElementObserverContext = React__default.createContext(null);
-    function useMountRef({ onMount, onUnmount }) {
-        const newRef = React.useRef(null);
-        React.useEffect(() => {
-            const ref = newRef.current;
-            if (ref == null) {
-                return () => { };
-            }
-            onMount(ref);
-            return () => onUnmount(ref);
-        }, [newRef, onMount, onUnmount]);
-        return newRef;
-    }
-    function ObserveChildWithWrapperDiv({ children, onMount, onUnmount, }) {
-        const ref = useMountRef({ onMount, onUnmount });
-        return (React__default.createElement("div", { style: { all: "inherit" }, ref: ref }, children));
-    }
-    function ObserveChild({ children, onMount, onUnmount, }) {
-        const newRef = useMountRef({ onMount, onUnmount });
-        const child = React__default.Children.only(children);
-        return React__default.cloneElement(child, { ref: newRef });
-    }
-    function Observer({ children, selector, useWrapperDiv, }) {
-        const context = React.useContext(ElementObserverContext);
-        if (context == null) {
-            throw new Error("Observer context was null");
-        }
-        const { methods } = context;
-        const { add, reset } = methods;
-        const onMount = React.useCallback((ref) => {
-            Array.from(ref.querySelectorAll(selector)).forEach(add);
-        }, [selector, add]);
-        const onUnmount = React.useCallback(() => reset, [reset]);
-        const Component = useWrapperDiv ? ObserveChildWithWrapperDiv : ObserveChild;
-        return (React__default.createElement(Component, { onMount: onMount, onUnmount: onUnmount }, children));
-    }
-    /**
-     * Allows observing mount/unmount of elements that match a given selector in the
-     * given React tree. Tree must be static: only the mounting of the tree itself
-     * is monitored. If the tree's DOM is dynamically changed those mounts and
-     * unmounts will not be detected.
-     *
-     * @param tree The React tree to observe.
-     * @param onMount The callback that will be passed any elements in the tree that
-     * match the given selector, as they mount.
-     * @param onUnmount The callback that will be passed any elements in the tree
-     * that match the given selector, as they unmount.
-     * @param selector The css selector used to select which elements are observed.
-     * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
-     * `false`, `children` must be a single child element that can take a ref (which
-     * will be overwritten).
-     * @returns A tuple of: (1) array of elements and (2) the observed tree to be
-     * rendered.
-     */
-    function useElementObserver({ tree, selector, useWrapperDiv = true, }) {
-        // @TODO Add mutation observer to catch changes to grandchildren?
-        const [mountedElements, methods] = useSet();
-        const observedTree = (React__default.createElement(ElementObserverContext.Provider, { value: { mountedElements, methods } }, React__default.createElement(Observer, { selector: selector, useWrapperDiv: useWrapperDiv }, tree)));
-        return [mountedElements, observedTree];
-    }
-    exports.useElementObserver = useElementObserver;
-});
-unwrapExports(useElementObserver_1);
-var useElementObserver_2 = useElementObserver_1.useElementObserver;
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-var extendStatics = function (d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) {
-            for (var p in b)
-                if (b.hasOwnProperty(p))
-                    d[p] = b[p];
-        };
-    return extendStatics(d, b);
-};
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-function __param(paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); };
-}
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(metadataKey, metadataValue);
-}
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function () {
-            if (t[0] & 1)
-                throw t[1];
-            return t[1];
-        }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f)
-            throw new TypeError("Generator is already executing.");
-        while (_)
-            try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                    return t;
-                if (y = 0, t)
-                    op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0:
-                    case 1:
-                        t = op;
-                        break;
-                    case 4:
-                        _.label++;
-                        return { value: op[1], done: false };
-                    case 5:
-                        _.label++;
-                        y = op[1];
-                        op = [0];
-                        continue;
-                    case 7:
-                        op = _.ops.pop();
-                        _.trys.pop();
-                        continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                            _ = 0;
-                            continue;
-                        }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                            _.label = op[1];
-                            break;
-                        }
-                        if (op[0] === 6 && _.label < t[1]) {
-                            _.label = t[1];
-                            t = op;
-                            break;
-                        }
-                        if (t && _.label < t[2]) {
-                            _.label = t[2];
-                            _.ops.push(op);
-                            break;
-                        }
-                        if (t[2])
-                            _.ops.pop();
-                        _.trys.pop();
-                        continue;
-                }
-                op = body.call(thisArg, _);
-            }
-            catch (e) {
-                op = [6, e];
-                y = 0;
-            }
-            finally {
-                f = t = 0;
-            }
-        if (op[0] & 5)
-            throw op[1];
-        return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-function __exportStar(m, exports) {
-    for (var p in m)
-        if (!exports.hasOwnProperty(p))
-            exports[p] = m[p];
-}
-function __values(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m)
-        return m.call(o);
-    if (o && typeof o.length === "number")
-        return {
-            next: function () {
-                if (o && i >= o.length)
-                    o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m)
-        return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-            ar.push(r.value);
-    }
-    catch (error) {
-        e = { error: error };
-    }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"]))
-                m.call(i);
-        }
-        finally {
-            if (e)
-                throw e.error;
-        }
-    }
-    return ar;
-}
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
-}
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-        s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-function __await(v) {
-    return this instanceof __await ? (this.v = v, this) : new __await(v);
-}
-function __asyncGenerator(thisArg, _arguments, generator) {
-    if (!Symbol.asyncIterator)
-        throw new TypeError("Symbol.asyncIterator is not defined.");
-    var g = generator.apply(thisArg, _arguments || []), i, q = [];
-    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-    function verb(n) {
-        if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-    }
-    function resume(n, v) {
-        try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        }
-    }
-    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-    function fulfill(value) { resume("next", value); }
-    function reject(value) { resume("throw", value); }
-    function settle(f, v) {
-        if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]);
-    }
-}
-function __asyncDelegator(o) {
-    var i, p;
-    return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-}
-function __asyncValues(o) {
-    if (!Symbol.asyncIterator)
-        throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-}
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) {
-        Object.defineProperty(cooked, "raw", { value: raw });
-    }
-    else {
-        cooked.raw = raw;
-    }
-    return cooked;
-}
-function __importStar(mod) {
-    if (mod && mod.__esModule)
-        return mod;
-    var result = {};
-    if (mod != null)
-        for (var k in mod)
-            if (Object.hasOwnProperty.call(mod, k))
-                result[k] = mod[k];
-    result.default = mod;
-    return result;
-}
-function __importDefault(mod) {
-    return (mod && mod.__esModule) ? mod : { default: mod };
-}
-function __classPrivateFieldGet(receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
-}
-function __classPrivateFieldSet(receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
-}
-var tslib_es6 = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    __extends: __extends,
-    get __assign() { return __assign; },
-    __rest: __rest,
-    __decorate: __decorate,
-    __param: __param,
-    __metadata: __metadata,
-    __awaiter: __awaiter,
-    __generator: __generator,
-    __exportStar: __exportStar,
-    __values: __values,
-    __read: __read,
-    __spread: __spread,
-    __spreadArrays: __spreadArrays,
-    __await: __await,
-    __asyncGenerator: __asyncGenerator,
-    __asyncDelegator: __asyncDelegator,
-    __asyncValues: __asyncValues,
-    __makeTemplateObject: __makeTemplateObject,
-    __importStar: __importStar,
-    __importDefault: __importDefault,
-    __classPrivateFieldGet: __classPrivateFieldGet,
-    __classPrivateFieldSet: __classPrivateFieldSet
-});
-var useSet_1 = createCommonjsModule(function (module, exports) {
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /* eslint-disable */
-    var useSet = function (initialSet) {
-        if (initialSet === void 0) {
-            initialSet = new Set();
-        }
-        var _a = React.useState(initialSet), set = _a[0], setSet = _a[1];
-        var stableActions = React.useMemo(function () {
-            var add = function (item) { return setSet(function (prevSet) { return new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item])); }); };
-            var remove = function (item) { return setSet(function (prevSet) { return new Set(Array.from(prevSet).filter(function (i) { return i !== item; })); }); };
-            var toggle = function (item) {
-                return setSet(function (prevSet) {
-                    return prevSet.has(item)
-                        ? new Set(Array.from(prevSet).filter(function (i) { return i !== item; }))
-                        : new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item]));
-                });
-            };
-            return { add: add, remove: remove, toggle: toggle, reset: function () { return setSet(initialSet); } };
-        }, [setSet]);
-        var utils = tslib_es6.__assign({ has: React.useCallback(function (item) { return set.has(item); }, [set]) }, stableActions);
-        return [set, utils];
-    };
-    exports.default = useSet;
-});
-var useSet = unwrapExports(useSet_1);
-const VisibleElementsContext = React.createContext(null);
-function VisibleElementObserver({ children, useWrapperDiv, selector, intersectionOptions, }) {
-    const [visibleElements, { add, remove }] = useSet();
-    const handleIntersect = React.useCallback((entries) => {
-        entries.forEach((e) => e.isIntersecting ? add(e.target) : remove(e.target));
-    }, [add, remove]);
-    const [mountedElements, observedTree] = useElementObserver_2({
-        tree: children,
-        selector,
-        useWrapperDiv,
-    });
-    React.useEffect(() => {
-        const observer = new IntersectionObserver(handleIntersect, intersectionOptions);
-        mountedElements.forEach((e) => observer.observe(e));
-        return () => {
-            observer.disconnect();
-        };
-    }, [mountedElements, handleIntersect, intersectionOptions]);
-    return (React.createElement(VisibleElementsContext.Provider, { value: visibleElements }, observedTree));
-}
-function useVisibleElements() {
-    const value = React.useContext(VisibleElementsContext);
-    if (value == null) {
-        throw new Error(`useVisibleElements must be used within a context provider`);
-    }
-    return value;
-}
-exports.VisibleElementObserver = VisibleElementObserver;
-exports.useVisibleElements = useVisibleElements;
-});
-
-unwrapExports(useVisibleElements_1);
-var useVisibleElements_2 = useVisibleElements_1.VisibleElementObserver;
-var useVisibleElements_3 = useVisibleElements_1.useVisibleElements;
-
-function useVisibilityOfTarget(href) {
-    const visibleElements = useVisibleElements_3();
-    return [...visibleElements].some((s) => s.querySelector(`:scope > ${href}`));
-}
-function TocVisibleSectionObserver(options) {
-    return react.createElement(useVisibleElements_2, Object.assign({ selector: "article section" }, options));
-}
-
-exports.TocVisibleSectionObserver = TocVisibleSectionObserver;
-exports.useVisibilityOfTarget = useVisibilityOfTarget;