docusaurus-theme-openapi-docs 5.0.2 → 5.1.0

package/lib/theme/utils/reactUtils.js

@@ -0,0 +1,23 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/utils/reactUtils.tsx (MIT).
+ * Only useShallowMemoObject is kept here — it is not re-exported by
+ * @docusaurus/theme-common (public or /internal). useEvent and
+ * ReactContextError are public APIs imported directly from the package.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShallowMemoObject = useShallowMemoObject;
+const react_1 = require("react");
+function useShallowMemoObject(obj) {
+  const deps = Object.entries(obj);
+  deps.sort((a, b) => a[0].localeCompare(b[0]));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return (0, react_1.useMemo)(() => obj, deps.flat());
+}

package/lib/theme/utils/scrollUtils.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare function ScrollControllerProvider({ children, }: {
+    children: ReactNode;
+}): ReactNode;
+export declare function useScrollPositionBlocker(): {
+    blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
+};

package/lib/theme/utils/scrollUtils.js

@@ -0,0 +1,175 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored subset of @docusaurus/theme-common/src/utils/scrollUtils.tsx (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal. Only the
+ * ScrollControllerProvider + useScrollPositionBlocker surface is kept, since
+ * that's all our tab renderers need. The ScrollControllerProvider must be
+ * mounted in the React tree above any consumer of useScrollPositionBlocker
+ * (see ApiItem/index.tsx).
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollControllerProvider = ScrollControllerProvider;
+exports.useScrollPositionBlocker = useScrollPositionBlocker;
+const react_1 = __importStar(require("react"));
+const useIsomorphicLayoutEffect_1 = __importDefault(
+  require("@docusaurus/useIsomorphicLayoutEffect")
+);
+const theme_common_1 = require("@docusaurus/theme-common");
+function useScrollControllerContextValue() {
+  const scrollEventsEnabledRef = (0, react_1.useRef)(true);
+  return (0, react_1.useMemo)(
+    () => ({
+      scrollEventsEnabledRef,
+      enableScrollEvents: () => {
+        scrollEventsEnabledRef.current = true;
+      },
+      disableScrollEvents: () => {
+        scrollEventsEnabledRef.current = false;
+      },
+    }),
+    []
+  );
+}
+const ScrollMonitorContext = react_1.default.createContext(undefined);
+function ScrollControllerProvider({ children }) {
+  const value = useScrollControllerContextValue();
+  return react_1.default.createElement(
+    ScrollMonitorContext.Provider,
+    { value: value },
+    children
+  );
+}
+function useScrollController() {
+  const context = (0, react_1.useContext)(ScrollMonitorContext);
+  if (context == null) {
+    throw new theme_common_1.ReactContextError("ScrollControllerProvider");
+  }
+  return context;
+}
+function useScrollPositionSaver() {
+  const lastElementRef = (0, react_1.useRef)({
+    elem: null,
+    top: 0,
+  });
+  const save = (0, react_1.useCallback)((elem) => {
+    lastElementRef.current = {
+      elem,
+      top: elem.getBoundingClientRect().top,
+    };
+  }, []);
+  const restore = (0, react_1.useCallback)(() => {
+    const {
+      current: { elem, top },
+    } = lastElementRef;
+    if (!elem) {
+      return { restored: false };
+    }
+    const newTop = elem.getBoundingClientRect().top;
+    const heightDiff = newTop - top;
+    if (heightDiff) {
+      window.scrollBy({ left: 0, top: heightDiff });
+    }
+    lastElementRef.current = { elem: null, top: 0 };
+    return { restored: heightDiff !== 0 };
+  }, []);
+  return (0, react_1.useMemo)(() => ({ save, restore }), [restore, save]);
+}
+function useScrollPositionBlocker() {
+  const scrollController = useScrollController();
+  const scrollPositionSaver = useScrollPositionSaver();
+  const nextLayoutEffectCallbackRef = (0, react_1.useRef)(undefined);
+  const blockElementScrollPositionUntilNextRender = (0, react_1.useCallback)(
+    (el) => {
+      scrollPositionSaver.save(el);
+      scrollController.disableScrollEvents();
+      nextLayoutEffectCallbackRef.current = () => {
+        const { restored } = scrollPositionSaver.restore();
+        nextLayoutEffectCallbackRef.current = undefined;
+        if (restored) {
+          const handleScrollRestoreEvent = () => {
+            scrollController.enableScrollEvents();
+            window.removeEventListener("scroll", handleScrollRestoreEvent);
+          };
+          window.addEventListener("scroll", handleScrollRestoreEvent);
+        } else {
+          scrollController.enableScrollEvents();
+        }
+      };
+    },
+    [scrollController, scrollPositionSaver]
+  );
+  (0, useIsomorphicLayoutEffect_1.default)(() => {
+    queueMicrotask(() => nextLayoutEffectCallbackRef.current?.());
+  });
+  return {
+    blockElementScrollPositionUntilNextRender,
+  };
+}

package/lib/theme/utils/tabsUtils.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+export interface TabValue {
+    readonly value: string;
+    readonly label?: string;
+    readonly attributes?: {
+        [key: string]: unknown;
+    };
+    readonly default?: boolean;
+}
+export interface TabsProps {
+    readonly lazy?: boolean;
+    readonly block?: boolean;
+    readonly children: ReactNode;
+    readonly defaultValue?: string | null;
+    readonly values?: readonly TabValue[];
+    readonly groupId?: string;
+    readonly className?: string;
+    readonly queryString?: string | boolean;
+}
+export interface TabProps extends TabsProps {
+    length?: number;
+}
+export interface TabItemProps {
+    readonly children: ReactNode;
+    readonly value: string;
+    readonly default?: boolean;
+    readonly label?: string;
+    readonly className?: string;
+    readonly attributes?: {
+        [key: string]: unknown;
+    };
+}
+export declare function sanitizeTabsChildren(children: ReactNode): ReactNode;
+type TabsContextValue = {
+    selectedValue: string;
+    selectValue: (value: string) => void;
+    tabValues: readonly TabValue[];
+    lazy: boolean;
+    block: boolean;
+};
+export declare function useTabsContextValue(props: TabsProps): TabsContextValue;
+export declare function useTabs(): TabsContextValue;
+export declare function TabsProvider(props: {
+    children: ReactNode;
+    value: TabsContextValue;
+}): ReactNode;
+export {};

package/lib/theme/utils/tabsUtils.js

@@ -0,0 +1,299 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/utils/tabsUtils.tsx (MIT) to
+ * remove the dependency on @docusaurus/theme-common/internal. The
+ * useQueryStringValue dependency from theme-common's historyUtils is inlined
+ * below to avoid pulling another internal module.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeTabsChildren = sanitizeTabsChildren;
+exports.useTabsContextValue = useTabsContextValue;
+exports.useTabs = useTabs;
+exports.TabsProvider = TabsProvider;
+const react_1 = __importStar(require("react"));
+const router_1 = require("@docusaurus/router");
+const theme_common_1 = require("@docusaurus/theme-common");
+const useIsomorphicLayoutEffect_1 = __importDefault(
+  require("@docusaurus/useIsomorphicLayoutEffect")
+);
+const scrollUtils_1 = require("./scrollUtils");
+function sanitizeTabsChildren(children) {
+  return react_1.default.Children.toArray(children).filter(
+    (child) => child !== "\n"
+  );
+}
+function extractChildrenTabValues(children) {
+  function isTabItemWithValueProp(comp) {
+    const { props } = comp;
+    return !!props && typeof props === "object" && "value" in props;
+  }
+  const elements = react_1.default.Children.toArray(children).flatMap(
+    (child) => {
+      if (!child) {
+        return [];
+      }
+      if ((0, react_1.isValidElement)(child) && isTabItemWithValueProp(child)) {
+        return [child];
+      }
+      const badChildTypeName =
+        // @ts-expect-error: guarding against unexpected cases
+        typeof child.type === "string" ? child.type : child.type.name;
+      throw new Error(`Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
+If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`);
+    }
+  );
+  return elements.map(
+    ({ props: { value, label, attributes, default: isDefault } }) => ({
+      value,
+      label,
+      attributes,
+      default: isDefault,
+    })
+  );
+}
+function ensureNoDuplicateValue(values) {
+  const dup = (0, theme_common_1.duplicates)(
+    values,
+    (a, b) => a.value === b.value
+  );
+  if (dup.length > 0) {
+    throw new Error(
+      `Docusaurus error: Duplicate values "${dup
+        .map((a) => `'${a.value}'`)
+        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
+    );
+  }
+}
+function useTabValues(props) {
+  const { values: valuesProp, children } = props;
+  return (0, react_1.useMemo)(() => {
+    const values = valuesProp ?? extractChildrenTabValues(children);
+    ensureNoDuplicateValue(values);
+    return values;
+  }, [valuesProp, children]);
+}
+function isValidValue({ value, tabValues }) {
+  return tabValues.some((a) => a.value === value);
+}
+function getInitialStateValue({ defaultValue, tabValues }) {
+  if (tabValues.length === 0) {
+    throw new Error(
+      "Docusaurus error: the <Tabs> component requires at least one <TabItem> children component"
+    );
+  }
+  if (defaultValue) {
+    if (!isValidValue({ value: defaultValue, tabValues })) {
+      throw new Error(
+        `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${tabValues
+          .map((a) => a.value)
+          .join(
+            ", "
+          )}. If you intend to show no default tab, use defaultValue={null} instead.`
+      );
+    }
+    return defaultValue;
+  }
+  const defaultTabValue =
+    tabValues.find((tabValue) => tabValue.default) ?? tabValues[0];
+  if (!defaultTabValue) {
+    throw new Error("Unexpected error: 0 tabValues");
+  }
+  return defaultTabValue.value;
+}
+function getStorageKey(groupId) {
+  if (!groupId) {
+    return null;
+  }
+  return `docusaurus.tab.${groupId}`;
+}
+function getQueryStringKey({ queryString = false, groupId }) {
+  if (typeof queryString === "string") {
+    return queryString;
+  }
+  if (queryString === false) {
+    return null;
+  }
+  if (queryString === true && !groupId) {
+    throw new Error(
+      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".`
+    );
+  }
+  return groupId ?? null;
+}
+// Inlined from @docusaurus/theme-common/internal historyUtils.useQueryStringValue
+function useQueryStringValue(key) {
+  const history = (0, router_1.useHistory)();
+  return (0, react_1.useSyncExternalStore)(
+    history.listen,
+    () =>
+      key === null
+        ? null
+        : new URLSearchParams(history.location.search).get(key),
+    () => null
+  );
+}
+function useTabQueryString({ queryString = false, groupId }) {
+  const history = (0, router_1.useHistory)();
+  const key = getQueryStringKey({ queryString, groupId });
+  const value = useQueryStringValue(key);
+  const setValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!key) {
+        return;
+      }
+      const searchParams = new URLSearchParams(history.location.search);
+      searchParams.set(key, newValue);
+      history.replace({ ...history.location, search: searchParams.toString() });
+    },
+    [key, history]
+  );
+  return [value, setValue];
+}
+function useTabStorage({ groupId }) {
+  const key = getStorageKey(groupId);
+  const [value, storageSlot] = (0, theme_common_1.useStorageSlot)(key);
+  const setValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!key) {
+        return;
+      }
+      storageSlot.set(newValue);
+    },
+    [key, storageSlot]
+  );
+  return [value, setValue];
+}
+function useTabsContextValue(props) {
+  const { defaultValue, queryString = false, groupId } = props;
+  const tabValues = useTabValues(props);
+  const [selectedValue, setSelectedValue] = (0, react_1.useState)(() =>
+    getInitialStateValue({ defaultValue, tabValues })
+  );
+  const [queryStringValue, setQueryString] = useTabQueryString({
+    queryString,
+    groupId,
+  });
+  const [storageValue, setStorageValue] = useTabStorage({
+    groupId,
+  });
+  const valueToSync = (() => {
+    const value = queryStringValue ?? storageValue;
+    if (!isValidValue({ value, tabValues })) {
+      return null;
+    }
+    return value;
+  })();
+  (0, useIsomorphicLayoutEffect_1.default)(() => {
+    if (valueToSync) {
+      setSelectedValue(valueToSync);
+    }
+  }, [valueToSync]);
+  const selectValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!isValidValue({ value: newValue, tabValues })) {
+        throw new Error(`Can't select invalid tab value=${newValue}`);
+      }
+      setSelectedValue(newValue);
+      setQueryString(newValue);
+      setStorageValue(newValue);
+    },
+    [setQueryString, setStorageValue, tabValues]
+  );
+  return {
+    selectedValue,
+    selectValue,
+    tabValues,
+    lazy: props.lazy ?? false,
+    block: props.block ?? false,
+  };
+}
+const TabsContext = (0, react_1.createContext)(null);
+function useTabs() {
+  const contextValue = react_1.default.useContext(TabsContext);
+  if (!contextValue) {
+    throw new Error("useTabsContext() must be used within a Tabs component");
+  }
+  return contextValue;
+}
+function TabsProvider(props) {
+  // ScrollControllerProvider is mounted here so every tab consumer
+  // (our six OpenAPI tab variants + the swizzled @theme/Tabs) gets a working
+  // useScrollPositionBlocker without callers needing a separate provider.
+  return react_1.default.createElement(
+    scrollUtils_1.ScrollControllerProvider,
+    null,
+    react_1.default.createElement(
+      TabsContext.Provider,
+      { value: props.value },
+      props.children
+    )
+  );
+}

package/lib/theme/utils/useCodeWordWrap.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+export type WordWrap = {
+    readonly codeBlockRef: RefObject<HTMLPreElement | null>;
+    readonly isEnabled: boolean;
+    readonly isCodeScrollable: boolean;
+    readonly toggle: () => void;
+};
+export declare function useCodeWordWrap(): WordWrap;

package/lib/theme/utils/useCodeWordWrap.js

@@ -0,0 +1,84 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useCodeWordWrap.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeWordWrap = useCodeWordWrap;
+const react_1 = require("react");
+const useMutationObserver_1 = require("./useMutationObserver");
+// Callback fires when the "hidden" attribute of a tabpanel changes
+// See https://github.com/facebook/docusaurus/pull/7485
+function useTabBecameVisibleCallback(codeBlockRef, callback) {
+  const [hiddenTabElement, setHiddenTabElement] = (0, react_1.useState)();
+  const updateHiddenTabElement = (0, react_1.useCallback)(() => {
+    setHiddenTabElement(
+      codeBlockRef.current?.closest("[role=tabpanel][hidden]")
+    );
+  }, [codeBlockRef, setHiddenTabElement]);
+  (0, react_1.useEffect)(() => {
+    updateHiddenTabElement();
+  }, [updateHiddenTabElement]);
+  (0, useMutationObserver_1.useMutationObserver)(
+    hiddenTabElement,
+    (mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "hidden"
+        ) {
+          callback();
+          updateHiddenTabElement();
+        }
+      });
+    },
+    {
+      attributes: true,
+      characterData: false,
+      childList: false,
+      subtree: false,
+    }
+  );
+}
+function useCodeWordWrap() {
+  const [isEnabled, setIsEnabled] = (0, react_1.useState)(false);
+  const [isCodeScrollable, setIsCodeScrollable] = (0, react_1.useState)(false);
+  const codeBlockRef = (0, react_1.useRef)(null);
+  const toggle = (0, react_1.useCallback)(() => {
+    const codeElement = codeBlockRef.current.querySelector("code");
+    if (isEnabled) {
+      codeElement.removeAttribute("style");
+    } else {
+      codeElement.style.whiteSpace = "pre-wrap";
+      codeElement.style.overflowWrap = "anywhere";
+    }
+    setIsEnabled((value) => !value);
+  }, [codeBlockRef, isEnabled]);
+  const updateCodeIsScrollable = (0, react_1.useCallback)(() => {
+    const { scrollWidth, clientWidth } = codeBlockRef.current;
+    const isScrollable =
+      scrollWidth > clientWidth ||
+      codeBlockRef.current.querySelector("code").hasAttribute("style");
+    setIsCodeScrollable(isScrollable);
+  }, [codeBlockRef]);
+  useTabBecameVisibleCallback(codeBlockRef, updateCodeIsScrollable);
+  (0, react_1.useEffect)(() => {
+    updateCodeIsScrollable();
+  }, [isEnabled, updateCodeIsScrollable]);
+  (0, react_1.useEffect)(() => {
+    window.addEventListener("resize", updateCodeIsScrollable, {
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener("resize", updateCodeIsScrollable);
+    };
+  }, [updateCodeIsScrollable]);
+  return { codeBlockRef, isEnabled, isCodeScrollable, toggle };
+}

package/lib/theme/utils/useMutationObserver.d.ts

@@ -0,0 +1,3 @@
+type Options = MutationObserverInit;
+export declare function useMutationObserver(target: Element | undefined | null, callback: MutationCallback, options?: Options): void;
+export {};

package/lib/theme/utils/useMutationObserver.js

@@ -0,0 +1,34 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useMutationObserver.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutationObserver = useMutationObserver;
+const react_1 = require("react");
+const theme_common_1 = require("@docusaurus/theme-common");
+const reactUtils_1 = require("./reactUtils");
+const DefaultOptions = {
+  attributes: true,
+  characterData: true,
+  childList: true,
+  subtree: true,
+};
+function useMutationObserver(target, callback, options = DefaultOptions) {
+  const stableCallback = (0, theme_common_1.useEvent)(callback);
+  const stableOptions = (0, reactUtils_1.useShallowMemoObject)(options);
+  (0, react_1.useEffect)(() => {
+    const observer = new MutationObserver(stableCallback);
+    if (target) {
+      observer.observe(target, stableOptions);
+    }
+    return () => observer.disconnect();
+  }, [target, stableCallback, stableOptions]);
+}