@diplodoc/components 3.0.0-alpha-1

package/build/cjs/components/SearchBar/hooks.js

@@ -0,0 +1,292 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SearchBar/hooks.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useCurrentWordSelectionEffect: () => useCurrentWordSelectionEffect,
+  useCurrentWordSelectionSyncScrollEffect: () => useCurrentWordSelectionSyncScrollEffect,
+  useHighlightedSearchWords: () => useHighlightedSearchWords,
+  useNoSearchWordsFoundEffect: () => useNoSearchWordsFoundEffect,
+  useSearchBarNavigation: () => useSearchBarNavigation
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_constants = require("./constants");
+var import_utils = require("./utils");
+function useHighlightedSearchWords({
+  html,
+  searchWords,
+  showSearchBar,
+  onContentMutation: _onContentMutation,
+  onContentLoaded: _onContentLoaded,
+  onNotFoundWords
+}) {
+  const highlightedHtml = useHighlightedHTMLString(html, searchWords, showSearchBar);
+  const { wasChangedDOM, onContentMutation, onContentLoaded } = useCallbackDOMChange({
+    onContentMutation: _onContentMutation,
+    onContentLoaded: _onContentLoaded
+  });
+  const highlightedDOMElements = useHighlightedDOMElements(
+    highlightedHtml,
+    wasChangedDOM,
+    showSearchBar
+  );
+  const searchBarIsVisible = useSearchBarIsVisible({
+    showSearchBar,
+    searchWords,
+    highlightedHtml,
+    html
+  });
+  useNoSearchWordsFoundEffect({ highlightedDOMElements, showSearchBar, onNotFoundWords });
+  return {
+    highlightedHtml,
+    highlightedDOMElements,
+    searchBarIsVisible,
+    wasChangedDOM,
+    onContentMutation,
+    onContentLoaded
+  };
+}
+function useHighlightedDOMElements(highlightedHtml, wasChangedDOM, showSearchBar) {
+  const cachedHighlightedDOMElements = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
+    cachedHighlightedDOMElements.current = [];
+  }, [highlightedHtml]);
+  (0, import_react.useEffect)(() => {
+    if (wasChangedDOM) {
+      cachedHighlightedDOMElements.current = [];
+    }
+  }, [wasChangedDOM]);
+  if (cachedHighlightedDOMElements.current.length) {
+    return cachedHighlightedDOMElements.current;
+  }
+  if (!showSearchBar || typeof document === "undefined") {
+    return [];
+  }
+  const elements = document.querySelectorAll(`.${import_constants.CLASSNAME}`);
+  cachedHighlightedDOMElements.current = [...elements];
+  return cachedHighlightedDOMElements.current;
+}
+function useHighlightedHTMLString(html, searchWords, showSearchBar) {
+  const [highlightedHtml, setHighlightedHtml] = (0, import_react.useState)(html);
+  (0, import_react.useEffect)(() => {
+    if (!searchWords.length || !showSearchBar) {
+      setHighlightedHtml(html);
+      return;
+    }
+    const highlightedResult = (0, import_utils.highlight)({
+      html,
+      keywords: searchWords,
+      options: import_constants.HIGHLIGHT_OPTIONS
+    });
+    if (highlightedResult.includes(import_constants.CLASSNAME)) {
+      setHighlightedHtml(highlightedResult);
+    } else {
+      setHighlightedHtml(html);
+    }
+  }, [html, searchWords, showSearchBar]);
+  return highlightedHtml;
+}
+function useSearchBarIsVisible({
+  showSearchBar,
+  searchWords,
+  highlightedHtml,
+  html
+}) {
+  const [searchBarIsVisible, setSearchBarIsVisible] = (0, import_react.useState)(showSearchBar);
+  (0, import_react.useEffect)(() => {
+    setSearchBarIsVisible(
+      showSearchBar && Boolean(searchWords && searchWords.length) && highlightedHtml !== html
+    );
+  }, [showSearchBar, searchWords, highlightedHtml, html]);
+  return searchBarIsVisible;
+}
+function useCallbackDOMChange({
+  onContentMutation: _onContentMutation,
+  onContentLoaded: _onContentLoaded
+}) {
+  const [wasChangedDOM, setWasChangedDOM] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (wasChangedDOM) {
+      setWasChangedDOM(false);
+    }
+  }, [wasChangedDOM]);
+  const onContentMutation = (0, import_react.useCallback)(() => {
+    if (_onContentMutation) {
+      _onContentMutation();
+    }
+    setWasChangedDOM(true);
+  }, [_onContentMutation]);
+  const onContentLoaded = (0, import_react.useCallback)(() => {
+    if (_onContentLoaded) {
+      _onContentLoaded();
+    }
+    setWasChangedDOM(true);
+  }, [_onContentLoaded]);
+  return {
+    wasChangedDOM,
+    onContentMutation,
+    onContentLoaded
+  };
+}
+function useNoSearchWordsFoundEffect({
+  showSearchBar,
+  highlightedDOMElements,
+  onNotFoundWords
+}) {
+  (0, import_react.useEffect)(() => {
+    if (!onNotFoundWords) {
+      return;
+    }
+    if (showSearchBar && !highlightedDOMElements.length) {
+      onNotFoundWords();
+    }
+  }, [highlightedDOMElements, showSearchBar, onNotFoundWords]);
+}
+function useSearchBarNavigation({
+  highlightedDOMElements,
+  stopSyncOnScroll,
+  headerHeight,
+  hash
+}) {
+  const [searchCurrentIndex, setSearchCurrentIndex] = (0, import_react.useState)(1);
+  const [searchCountResults, setSearchCountResults] = (0, import_react.useState)(1);
+  (0, import_react.useEffect)(() => {
+    const startIndex = (0, import_utils.getHighlightedItemIndexInView)({ highlightedDOMElements, headerHeight, hash }) || 1;
+    setSearchCurrentIndex(startIndex);
+    setSearchCountResults(highlightedDOMElements.length || 1);
+  }, [highlightedDOMElements, headerHeight, hash]);
+  const onClickNextSearch = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      stopSyncOnScroll();
+      if (!highlightedDOMElements.length) {
+        return;
+      }
+      let newIndex = searchCurrentIndex + 1;
+      if (newIndex > highlightedDOMElements.length) {
+        newIndex = 1;
+      }
+      setSearchCurrentIndex(newIndex);
+    },
+    [highlightedDOMElements, searchCurrentIndex, setSearchCurrentIndex, stopSyncOnScroll]
+  );
+  const onClickPrevSearch = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      stopSyncOnScroll();
+      if (!highlightedDOMElements.length) {
+        return;
+      }
+      let newIndex = searchCurrentIndex - 1;
+      if (newIndex < 1) {
+        newIndex = highlightedDOMElements.length;
+      }
+      setSearchCurrentIndex(newIndex);
+    },
+    [highlightedDOMElements, searchCurrentIndex, setSearchCurrentIndex, stopSyncOnScroll]
+  );
+  return {
+    searchCurrentIndex,
+    setSearchCurrentIndex,
+    searchCountResults,
+    onClickPrevSearch,
+    onClickNextSearch
+  };
+}
+function useCurrentWordSelectionEffect({
+  searchCurrentIndex,
+  highlightedDOMElements,
+  wasChangedDOM,
+  syncOnScroll,
+  hash
+}) {
+  (0, import_react.useEffect)(() => {
+    try {
+      if (!highlightedDOMElements || !highlightedDOMElements.length) {
+        return;
+      }
+      for (let index = 0; index < highlightedDOMElements.length; index++) {
+        const item2 = highlightedDOMElements[index];
+        item2.classList.remove(import_constants.CLASSNAME_SELECTED);
+      }
+      const item = highlightedDOMElements[searchCurrentIndex - 1];
+      item.classList.add(import_constants.CLASSNAME_SELECTED);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [highlightedDOMElements, searchCurrentIndex, wasChangedDOM]);
+  (0, import_react.useEffect)(() => {
+    if (syncOnScroll) {
+      return;
+    }
+    (0, import_utils.scrollToItem)(highlightedDOMElements[searchCurrentIndex - 1]);
+  }, [wasChangedDOM, searchCurrentIndex, highlightedDOMElements, syncOnScroll, hash]);
+}
+function useCurrentWordSelectionSyncScrollEffect({
+  highlightedDOMElements,
+  searchWords,
+  syncOnScroll,
+  searchBarIsVisible,
+  setSearchCurrentIndex,
+  headerHeight,
+  setSyncOnScroll
+}) {
+  const scrollEndTimer = (0, import_react.useRef)();
+  const handleScroll = (0, import_react.useCallback)(() => {
+    if (scrollEndTimer.current) {
+      clearTimeout(scrollEndTimer.current);
+    }
+    scrollEndTimer.current = setTimeout(() => {
+      setSyncOnScroll(true);
+    }, 50);
+    if (!syncOnScroll || !searchBarIsVisible) {
+      return;
+    }
+    const highlightedItemIndexInView = (0, import_utils.getHighlightedItemIndexInView)({
+      highlightedDOMElements,
+      headerHeight
+    });
+    if (isNaN(highlightedItemIndexInView)) {
+      return;
+    }
+    setSearchCurrentIndex(highlightedItemIndexInView);
+  }, [
+    setSyncOnScroll,
+    searchBarIsVisible,
+    syncOnScroll,
+    setSearchCurrentIndex,
+    highlightedDOMElements,
+    headerHeight
+  ]);
+  const handleScrollThrottled = (0, import_lodash.throttle)(handleScroll, 50);
+  (0, import_react.useEffect)(() => {
+    if (searchBarIsVisible) {
+      window.addEventListener("scroll", handleScrollThrottled);
+    }
+    return () => {
+      window.removeEventListener("scroll", handleScrollThrottled);
+    };
+  }, [searchBarIsVisible, searchWords, handleScrollThrottled]);
+}
+//# sourceMappingURL=hooks.js.map

package/build/cjs/components/SearchBar/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/hooks.ts"],
+  "sourcesContent": ["import {SyntheticEvent, useCallback, useEffect, useRef, useState} from 'react';\n\nimport {throttle} from 'lodash';\n\nimport {CLASSNAME, CLASSNAME_SELECTED, HIGHLIGHT_OPTIONS} from './constants';\nimport {getHighlightedItemIndexInView, highlight, scrollToItem} from './utils';\n\ntype UseHighlightedSearchWords = {\n    html: string;\n    searchWords: string[];\n    showSearchBar: boolean;\n    onNotFoundWords?: () => void;\n    onContentMutation?: () => void;\n    onContentLoaded?: () => void;\n};\n\nexport function useHighlightedSearchWords({\n    html,\n    searchWords,\n    showSearchBar,\n    onContentMutation: _onContentMutation,\n    onContentLoaded: _onContentLoaded,\n    onNotFoundWords,\n}: UseHighlightedSearchWords) {\n    const highlightedHtml = useHighlightedHTMLString(html, searchWords, showSearchBar);\n\n    const {wasChangedDOM, onContentMutation, onContentLoaded} = useCallbackDOMChange({\n        onContentMutation: _onContentMutation,\n        onContentLoaded: _onContentLoaded,\n    });\n\n    const highlightedDOMElements = useHighlightedDOMElements(\n        highlightedHtml,\n        wasChangedDOM,\n        showSearchBar,\n    );\n\n    const searchBarIsVisible = useSearchBarIsVisible({\n        showSearchBar,\n        searchWords,\n        highlightedHtml,\n        html,\n    });\n\n    useNoSearchWordsFoundEffect({highlightedDOMElements, showSearchBar, onNotFoundWords});\n\n    return {\n        highlightedHtml,\n        highlightedDOMElements,\n        searchBarIsVisible,\n        wasChangedDOM,\n        onContentMutation,\n        onContentLoaded,\n    };\n}\n\nfunction useHighlightedDOMElements(\n    highlightedHtml: string,\n    wasChangedDOM: boolean,\n    showSearchBar: boolean,\n) {\n    const cachedHighlightedDOMElements = useRef<Element[]>([] as Element[]);\n\n    useEffect(() => {\n        cachedHighlightedDOMElements.current = [];\n    }, [highlightedHtml]);\n\n    useEffect(() => {\n        if (wasChangedDOM) {\n            cachedHighlightedDOMElements.current = [];\n        }\n    }, [wasChangedDOM]);\n\n    if (cachedHighlightedDOMElements.current.length) {\n        return cachedHighlightedDOMElements.current;\n    }\n\n    if (!showSearchBar || typeof document === 'undefined') {\n        return [];\n    }\n\n    const elements = document.querySelectorAll(`.${CLASSNAME}`);\n    cachedHighlightedDOMElements.current = [...elements];\n\n    return cachedHighlightedDOMElements.current;\n}\n\n/* Try wrapping the search words in an html string by span elements with a highlight class */\nfunction useHighlightedHTMLString(html: string, searchWords: string[], showSearchBar: boolean) {\n    const [highlightedHtml, setHighlightedHtml] = useState(html);\n\n    useEffect(() => {\n        if (!searchWords.length || !showSearchBar) {\n            setHighlightedHtml(html);\n            return;\n        }\n\n        const highlightedResult = highlight({\n            html,\n            keywords: searchWords,\n            options: HIGHLIGHT_OPTIONS,\n        });\n\n        if (highlightedResult.includes(CLASSNAME)) {\n            setHighlightedHtml(highlightedResult);\n        } else {\n            setHighlightedHtml(html);\n        }\n    }, [html, searchWords, showSearchBar]);\n\n    return highlightedHtml;\n}\n\ntype UseSearchBarIsVisible = {\n    showSearchBar: boolean;\n    searchWords: string[];\n    html: string;\n    highlightedHtml: string;\n};\n\nfunction useSearchBarIsVisible({\n    showSearchBar,\n    searchWords,\n    highlightedHtml,\n    html,\n}: UseSearchBarIsVisible) {\n    const [searchBarIsVisible, setSearchBarIsVisible] = useState(showSearchBar);\n\n    useEffect(() => {\n        setSearchBarIsVisible(\n            showSearchBar && Boolean(searchWords && searchWords.length) && highlightedHtml !== html,\n        );\n    }, [showSearchBar, searchWords, highlightedHtml, html]);\n\n    return searchBarIsVisible;\n}\n\ntype UseCallbackDOMChange = {\n    onContentMutation?: () => void;\n    onContentLoaded?: () => void;\n};\n\nfunction useCallbackDOMChange({\n    onContentMutation: _onContentMutation,\n    onContentLoaded: _onContentLoaded,\n}: UseCallbackDOMChange) {\n    const [wasChangedDOM, setWasChangedDOM] = useState(false);\n\n    useEffect(() => {\n        if (wasChangedDOM) {\n            setWasChangedDOM(false);\n        }\n    }, [wasChangedDOM]);\n\n    /* Callback for dangerouslySetInnerHTML when inserting content */\n    const onContentMutation = useCallback(() => {\n        if (_onContentMutation) {\n            _onContentMutation();\n        }\n\n        setWasChangedDOM(true);\n    }, [_onContentMutation]);\n\n    /* Callback for loading resources after inserting content */\n    const onContentLoaded = useCallback(() => {\n        if (_onContentLoaded) {\n            _onContentLoaded();\n        }\n\n        setWasChangedDOM(true);\n    }, [_onContentLoaded]);\n\n    return {\n        wasChangedDOM,\n        onContentMutation,\n        onContentLoaded,\n    };\n}\n\ntype UseNoSearchWordsFoundEffect = {\n    showSearchBar: boolean;\n    highlightedDOMElements: Element[];\n    onNotFoundWords?: () => void;\n};\n\nexport function useNoSearchWordsFoundEffect({\n    showSearchBar,\n    highlightedDOMElements,\n    onNotFoundWords,\n}: UseNoSearchWordsFoundEffect) {\n    useEffect(() => {\n        if (!onNotFoundWords) {\n            return;\n        }\n\n        if (showSearchBar && !highlightedDOMElements.length) {\n            onNotFoundWords();\n        }\n    }, [highlightedDOMElements, showSearchBar, onNotFoundWords]);\n}\n\ntype UseSearchBarNavigation = {\n    highlightedDOMElements: Element[];\n    stopSyncOnScroll: () => void;\n    headerHeight: number;\n    hash?: string;\n};\n\nexport function useSearchBarNavigation({\n    highlightedDOMElements,\n    stopSyncOnScroll,\n    headerHeight,\n    hash,\n}: UseSearchBarNavigation) {\n    const [searchCurrentIndex, setSearchCurrentIndex] = useState(1);\n    const [searchCountResults, setSearchCountResults] = useState(1);\n\n    useEffect(() => {\n        const startIndex =\n            getHighlightedItemIndexInView({highlightedDOMElements, headerHeight, hash}) || 1;\n\n        setSearchCurrentIndex(startIndex);\n        setSearchCountResults(highlightedDOMElements.length || 1);\n    }, [highlightedDOMElements, headerHeight, hash]);\n\n    const onClickNextSearch = useCallback(\n        (e: SyntheticEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            stopSyncOnScroll();\n\n            if (!highlightedDOMElements.length) {\n                return;\n            }\n\n            let newIndex = searchCurrentIndex + 1;\n            if (newIndex > highlightedDOMElements.length) {\n                newIndex = 1;\n            }\n\n            setSearchCurrentIndex(newIndex);\n        },\n        [highlightedDOMElements, searchCurrentIndex, setSearchCurrentIndex, stopSyncOnScroll],\n    );\n\n    const onClickPrevSearch = useCallback(\n        (e: SyntheticEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            stopSyncOnScroll();\n\n            if (!highlightedDOMElements.length) {\n                return;\n            }\n\n            let newIndex = searchCurrentIndex - 1;\n            if (newIndex < 1) {\n                newIndex = highlightedDOMElements.length;\n            }\n\n            setSearchCurrentIndex(newIndex);\n        },\n        [highlightedDOMElements, searchCurrentIndex, setSearchCurrentIndex, stopSyncOnScroll],\n    );\n\n    return {\n        searchCurrentIndex,\n        setSearchCurrentIndex,\n        searchCountResults,\n        onClickPrevSearch,\n        onClickNextSearch,\n    };\n}\n\ntype UseHighlightCurrentWordEffect = {\n    highlightedDOMElements: Element[];\n    searchCurrentIndex: number;\n    wasChangedDOM: boolean;\n    syncOnScroll: boolean;\n    hash?: string;\n};\n\nexport function useCurrentWordSelectionEffect({\n    searchCurrentIndex,\n    highlightedDOMElements,\n    wasChangedDOM,\n    syncOnScroll,\n    hash,\n}: UseHighlightCurrentWordEffect) {\n    useEffect(() => {\n        try {\n            if (!highlightedDOMElements || !highlightedDOMElements.length) {\n                return;\n            }\n\n            for (let index = 0; index < highlightedDOMElements.length; index++) {\n                const item = highlightedDOMElements[index];\n\n                item.classList.remove(CLASSNAME_SELECTED);\n            }\n\n            const item = highlightedDOMElements[searchCurrentIndex - 1];\n            item.classList.add(CLASSNAME_SELECTED);\n        } catch (e) {\n            console.error(e);\n        }\n    }, [highlightedDOMElements, searchCurrentIndex, wasChangedDOM]);\n\n    useEffect(() => {\n        if (syncOnScroll) {\n            return;\n        }\n\n        scrollToItem(highlightedDOMElements[searchCurrentIndex - 1]);\n    }, [wasChangedDOM, searchCurrentIndex, highlightedDOMElements, syncOnScroll, hash]);\n}\n\ntype UseCurrentWordSelectionSyncScrollEffect = {\n    highlightedDOMElements: Element[];\n    searchWords: string[];\n    syncOnScroll: boolean;\n    searchBarIsVisible: boolean;\n    setSearchCurrentIndex: (index: number) => void;\n    headerHeight: number;\n    setSyncOnScroll: (flag: boolean) => void;\n};\n\nexport function useCurrentWordSelectionSyncScrollEffect({\n    highlightedDOMElements,\n    searchWords,\n    syncOnScroll,\n    searchBarIsVisible,\n    setSearchCurrentIndex,\n    headerHeight,\n    setSyncOnScroll,\n}: UseCurrentWordSelectionSyncScrollEffect) {\n    const scrollEndTimer = useRef<ReturnType<typeof setTimeout>>();\n\n    const handleScroll = useCallback(() => {\n        if (scrollEndTimer.current) {\n            clearTimeout(scrollEndTimer.current);\n        }\n\n        scrollEndTimer.current = setTimeout(() => {\n            setSyncOnScroll(true);\n        }, 50);\n\n        if (!syncOnScroll || !searchBarIsVisible) {\n            return;\n        }\n\n        const highlightedItemIndexInView = getHighlightedItemIndexInView({\n            highlightedDOMElements,\n            headerHeight,\n        });\n\n        if (isNaN(highlightedItemIndexInView as number)) {\n            return;\n        }\n\n        setSearchCurrentIndex(highlightedItemIndexInView as number);\n    }, [\n        setSyncOnScroll,\n        searchBarIsVisible,\n        syncOnScroll,\n        setSearchCurrentIndex,\n        highlightedDOMElements,\n        headerHeight,\n    ]);\n\n    const handleScrollThrottled = throttle(handleScroll, 50);\n\n    useEffect(() => {\n        if (searchBarIsVisible) {\n            window.addEventListener('scroll', handleScrollThrottled);\n        }\n        return () => {\n            window.removeEventListener('scroll', handleScrollThrottled);\n        };\n    }, [searchBarIsVisible, searchWords, handleScrollThrottled]);\n}\n"],
+  "mappings": "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",
+  "names": ["item"]
+}

package/build/cjs/components/SearchBar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SearchBar';
+export { default as SearchBar } from './SearchBar';
+export * from './withHighlightedSearchWords';
+export { default as withHighlightedSearchWords } from './withHighlightedSearchWords';

package/build/cjs/components/SearchBar/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SearchBar/index.ts
+var SearchBar_exports = {};
+__export(SearchBar_exports, {
+  SearchBar: () => import_SearchBar.default,
+  withHighlightedSearchWords: () => import_withHighlightedSearchWords.default
+});
+module.exports = __toCommonJS(SearchBar_exports);
+__reExport(SearchBar_exports, require("./SearchBar"), module.exports);
+var import_SearchBar = __toESM(require("./SearchBar"));
+__reExport(SearchBar_exports, require("./withHighlightedSearchWords"), module.exports);
+var import_withHighlightedSearchWords = __toESM(require("./withHighlightedSearchWords"));
+//# sourceMappingURL=index.js.map

package/build/cjs/components/SearchBar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/index.ts"],
+  "sourcesContent": ["export * from './SearchBar';\nexport {default as SearchBar} from './SearchBar';\nexport * from './withHighlightedSearchWords';\nexport {default as withHighlightedSearchWords} from './withHighlightedSearchWords';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAc,wBAAd;AACA,uBAAmC;AACnC,8BAAc,yCAFd;AAGA,wCAAoD;",
+  "names": []
+}

package/build/cjs/components/SearchBar/utils.d.ts

@@ -0,0 +1,26 @@
+export interface HighlightOptions {
+    html: string;
+    keywords: string[];
+    options: {
+        className: string;
+        element: string;
+        exclude: string[];
+    };
+}
+export declare function highlight({ html, keywords, options }: HighlightOptions): string;
+export declare function scrollToItem(item: Element): void;
+type GetItemIndexInView = {
+    elements: Element[];
+    offset?: number;
+    top?: number;
+    bottom?: number;
+    reverse?: boolean;
+};
+export declare function getItemIndexInView({ elements, offset, top, bottom, reverse, }: GetItemIndexInView): number | undefined;
+type UseHighlightedItemInView = {
+    highlightedDOMElements: Element[];
+    headerHeight: number;
+    hash?: string;
+};
+export declare function getHighlightedItemIndexInView({ highlightedDOMElements, headerHeight, hash, }: UseHighlightedItemInView): number | undefined;
+export {};

package/build/cjs/components/SearchBar/utils.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SearchBar/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getHighlightedItemIndexInView: () => getHighlightedItemIndexInView,
+  getItemIndexInView: () => getItemIndexInView,
+  highlight: () => highlight,
+  scrollToItem: () => scrollToItem
+});
+module.exports = __toCommonJS(utils_exports);
+var import_mark = __toESM(require("mark.ts"));
+function highlight({ html, keywords, options }) {
+  const tmpDiv = document.createElement("div");
+  tmpDiv.innerHTML = html;
+  const markInstance = new import_mark.default(tmpDiv);
+  markInstance.mark(keywords, options);
+  return tmpDiv.innerHTML;
+}
+function scrollToItem(item) {
+  if (!item) {
+    return;
+  }
+  item.scrollIntoView({
+    block: "center",
+    inline: "center"
+  });
+}
+function getElementOffset(item, offset = 0) {
+  return Math.floor(Number(item.getBoundingClientRect().top)) - offset;
+}
+function getItemIndexInView({
+  elements,
+  offset = 0,
+  top = 0,
+  bottom = Infinity,
+  reverse = false
+}) {
+  let itemIndex;
+  for (let index = 0; index < elements.length; index++) {
+    const item = elements[index];
+    const itemOffset = getElementOffset(item, offset);
+    if (itemOffset >= top && itemOffset <= bottom) {
+      itemIndex = index + 1;
+      if (!reverse) {
+        break;
+      }
+    }
+  }
+  return itemIndex;
+}
+function getHighlightedItemIndexInView({
+  highlightedDOMElements,
+  headerHeight,
+  hash
+}) {
+  const elements = highlightedDOMElements;
+  const offset = headerHeight;
+  let top = 0;
+  if (hash && typeof document !== "undefined") {
+    const anchorEl = document.getElementById(hash);
+    if (anchorEl) {
+      top = getElementOffset(anchorEl, offset);
+    }
+  }
+  const firstIndexInView = getItemIndexInView({ top, elements, offset });
+  const firstIndexOutViewBottom = getItemIndexInView({
+    top: top + window.innerHeight,
+    elements,
+    offset
+  });
+  const lastIndexOutViewTop = getItemIndexInView({
+    top: -Infinity,
+    bottom: top,
+    reverse: true,
+    elements,
+    offset
+  });
+  return firstIndexInView || firstIndexOutViewBottom || lastIndexOutViewTop;
+}
+//# sourceMappingURL=utils.js.map

package/build/cjs/components/SearchBar/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/utils.ts"],
+  "sourcesContent": ["import Mark from 'mark.ts';\n\nexport interface HighlightOptions {\n    html: string;\n    keywords: string[];\n    options: {\n        className: string;\n        element: string;\n        exclude: string[];\n    };\n}\n\nexport function highlight({html, keywords, options}: HighlightOptions) {\n    const tmpDiv = document.createElement('div');\n    tmpDiv.innerHTML = html;\n\n    const markInstance = new Mark(tmpDiv);\n    markInstance.mark(keywords, options);\n\n    return tmpDiv.innerHTML;\n}\n\nexport function scrollToItem(item: Element) {\n    if (!item) {\n        return;\n    }\n\n    item.scrollIntoView({\n        block: 'center',\n        inline: 'center',\n    });\n}\n\ntype GetItemIndexInView = {\n    elements: Element[];\n    offset?: number;\n    top?: number;\n    bottom?: number;\n    reverse?: boolean;\n};\n\nfunction getElementOffset(item: HTMLElement, offset = 0) {\n    return Math.floor(Number((item as HTMLElement).getBoundingClientRect().top)) - offset;\n}\n\nexport function getItemIndexInView({\n    elements,\n    offset = 0,\n    top = 0,\n    bottom = Infinity,\n    reverse = false,\n}: GetItemIndexInView) {\n    let itemIndex;\n    for (let index = 0; index < elements.length; index++) {\n        const item = elements[index];\n        const itemOffset = getElementOffset(item as HTMLElement, offset);\n\n        if (itemOffset >= top && itemOffset <= bottom) {\n            itemIndex = index + 1;\n\n            if (!reverse) {\n                break;\n            }\n        }\n    }\n\n    return itemIndex;\n}\n\ntype UseHighlightedItemInView = {\n    highlightedDOMElements: Element[];\n    headerHeight: number;\n    hash?: string;\n};\n\nexport function getHighlightedItemIndexInView({\n    highlightedDOMElements,\n    headerHeight,\n    hash,\n}: UseHighlightedItemInView) {\n    const elements = highlightedDOMElements;\n    const offset = headerHeight;\n    let top = 0;\n\n    if (hash && typeof document !== 'undefined') {\n        const anchorEl = document.getElementById(hash) as HTMLElement;\n        if (anchorEl) {\n            top = getElementOffset(anchorEl, offset);\n        }\n    }\n\n    const firstIndexInView = getItemIndexInView({top, elements, offset});\n    const firstIndexOutViewBottom = getItemIndexInView({\n        top: top + window.innerHeight,\n        elements,\n        offset,\n    });\n    const lastIndexOutViewTop = getItemIndexInView({\n        top: -Infinity,\n        bottom: top,\n        reverse: true,\n        elements,\n        offset,\n    });\n\n    return firstIndexInView || firstIndexOutViewBottom || lastIndexOutViewTop;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AAYV,SAAS,UAAU,EAAC,MAAM,UAAU,QAAO,GAAqB;AACnE,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,YAAY;AAEnB,QAAM,eAAe,IAAI,YAAAA,QAAK,MAAM;AACpC,eAAa,KAAK,UAAU,OAAO;AAEnC,SAAO,OAAO;AAClB;AAEO,SAAS,aAAa,MAAe;AACxC,MAAI,CAAC,MAAM;AACP;AAAA,EACJ;AAEA,OAAK,eAAe;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ,CAAC;AACL;AAUA,SAAS,iBAAiB,MAAmB,SAAS,GAAG;AACrD,SAAO,KAAK,MAAM,OAAQ,KAAqB,sBAAsB,EAAE,GAAG,CAAC,IAAI;AACnF;AAEO,SAAS,mBAAmB;AAAA,EAC/B;AAAA,EACA,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AACd,GAAuB;AACnB,MAAI;AACJ,WAAS,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS;AAClD,UAAM,OAAO,SAAS,KAAK;AAC3B,UAAM,aAAa,iBAAiB,MAAqB,MAAM;AAE/D,QAAI,cAAc,OAAO,cAAc,QAAQ;AAC3C,kBAAY,QAAQ;AAEpB,UAAI,CAAC,SAAS;AACV;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO;AACX;AAQO,SAAS,8BAA8B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACJ,GAA6B;AACzB,QAAM,WAAW;AACjB,QAAM,SAAS;AACf,MAAI,MAAM;AAEV,MAAI,QAAQ,OAAO,aAAa,aAAa;AACzC,UAAM,WAAW,SAAS,eAAe,IAAI;AAC7C,QAAI,UAAU;AACV,YAAM,iBAAiB,UAAU,MAAM;AAAA,IAC3C;AAAA,EACJ;AAEA,QAAM,mBAAmB,mBAAmB,EAAC,KAAK,UAAU,OAAM,CAAC;AACnE,QAAM,0BAA0B,mBAAmB;AAAA,IAC/C,KAAK,MAAM,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,EACJ,CAAC;AACD,QAAM,sBAAsB,mBAAmB;AAAA,IAC3C,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACJ,CAAC;AAED,SAAO,oBAAoB,2BAA2B;AAC1D;",
+  "names": ["Mark"]
+}

package/build/cjs/components/SearchBar/withHighlightedSearchWords.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DocPageData, Router } from '../../models';
+export interface SearchWordsHighlighterProps extends DocPageData {
+    useSearchBar?: boolean;
+    searchWords?: string[];
+    showSearchBar?: boolean;
+    onCloseSearchBar?: () => void;
+    onNotFoundWords?: () => void;
+    searchQuery?: string;
+    onContentMutation?: () => void;
+    onContentLoaded?: () => void;
+    headerHeight?: number;
+    router: Router;
+}
+declare function withHighlightedSearchWords<T extends SearchWordsHighlighterProps>(Component: React.ComponentType<T>): React.FC<SearchWordsHighlighterProps & T>;
+export default withHighlightedSearchWords;

package/build/cjs/components/SearchBar/withHighlightedSearchWords.js

@@ -0,0 +1,123 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SearchBar/withHighlightedSearchWords.tsx
+var withHighlightedSearchWords_exports = {};
+__export(withHighlightedSearchWords_exports, {
+  default: () => withHighlightedSearchWords_default
+});
+module.exports = __toCommonJS(withHighlightedSearchWords_exports);
+var import_react = __toESM(require("react"));
+var import_hooks = require("./hooks");
+function withHighlightedSearchWords(Component) {
+  const SearchWordsHighlighter = (props) => {
+    const {
+      html,
+      searchWords = [],
+      showSearchBar = false,
+      onCloseSearchBar,
+      onNotFoundWords = () => {
+      },
+      onContentMutation: _onContentMutation,
+      onContentLoaded: _onContentLoaded,
+      headerHeight = 0,
+      router: { hash }
+    } = props;
+    const [syncOnScroll, setSyncOnScroll] = (0, import_react.useState)(true);
+    const stopSyncOnScroll = (0, import_react.useCallback)(() => setSyncOnScroll(false), []);
+    (0, import_react.useEffect)(() => {
+      setSyncOnScroll(false);
+    }, [html, searchWords]);
+    const {
+      highlightedHtml,
+      highlightedDOMElements,
+      searchBarIsVisible,
+      wasChangedDOM,
+      onContentMutation,
+      onContentLoaded
+    } = (0, import_hooks.useHighlightedSearchWords)({
+      html,
+      searchWords,
+      showSearchBar,
+      onContentMutation: _onContentMutation,
+      onContentLoaded: _onContentLoaded,
+      onNotFoundWords
+    });
+    const {
+      searchCurrentIndex,
+      setSearchCurrentIndex,
+      searchCountResults,
+      onClickPrevSearch,
+      onClickNextSearch
+    } = (0, import_hooks.useSearchBarNavigation)({ highlightedDOMElements, stopSyncOnScroll, headerHeight, hash });
+    (0, import_hooks.useCurrentWordSelectionEffect)({
+      searchCurrentIndex,
+      highlightedDOMElements,
+      wasChangedDOM,
+      syncOnScroll,
+      hash
+    });
+    (0, import_hooks.useCurrentWordSelectionSyncScrollEffect)({
+      highlightedDOMElements,
+      searchWords,
+      syncOnScroll,
+      searchBarIsVisible,
+      setSearchCurrentIndex,
+      headerHeight,
+      setSyncOnScroll
+    });
+    if (searchBarIsVisible) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        Component,
+        {
+          ...props,
+          html: highlightedHtml,
+          onContentMutation,
+          onContentLoaded,
+          searchCurrentIndex,
+          searchCountResults,
+          onCloseSearchBar,
+          onClickPrevSearch,
+          onClickNextSearch
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Component, { ...props, showSearchBar: false });
+  };
+  const SearchWordsHighlighterWrapper = (props) => {
+    const { useSearchBar = false } = props;
+    if (useSearchBar) {
+      return /* @__PURE__ */ import_react.default.createElement(SearchWordsHighlighter, { ...props });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Component, { ...props });
+  };
+  return SearchWordsHighlighterWrapper;
+}
+var withHighlightedSearchWords_default = withHighlightedSearchWords;
+//# sourceMappingURL=withHighlightedSearchWords.js.map