@diplodoc/components 3.0.0-alpha-1

package/build/esm/components/SearchBar/constants.js

@@ -0,0 +1,18 @@
+// src/components/SearchBar/constants.ts
+var CLASSNAME = "dc-search-highlighted";
+var CLASSNAME_SELECTED = "dc-search-highlighted_selected";
+var HIGHLIGHT_OPTIONS = {
+  element: "span",
+  className: CLASSNAME,
+  exclude: [
+    `.${CLASSNAME}`,
+    // Exclude the elements to highlight to avoid duplicating the highlight
+    "svg *"
+  ]
+};
+export {
+  CLASSNAME,
+  CLASSNAME_SELECTED,
+  HIGHLIGHT_OPTIONS
+};
+//# sourceMappingURL=constants.js.map

package/build/esm/components/SearchBar/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/constants.ts"],
+  "sourcesContent": ["export const CLASSNAME = 'dc-search-highlighted';\n\nexport const CLASSNAME_SELECTED = 'dc-search-highlighted_selected';\n\nexport const HIGHLIGHT_OPTIONS = {\n    element: 'span',\n    className: CLASSNAME,\n    exclude: [\n        `.${CLASSNAME}`, // Exclude the elements to highlight to avoid duplicating the highlight\n        'svg *',\n    ],\n};\n"],
+  "mappings": ";AAAO,IAAM,YAAY;AAElB,IAAM,qBAAqB;AAE3B,IAAM,oBAAoB;AAAA,EAC7B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,IACL,IAAI,SAAS;AAAA;AAAA,IACb;AAAA,EACJ;AACJ;",
+  "names": []
+}

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

@@ -0,0 +1,271 @@
+// src/components/SearchBar/hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { throttle } from "lodash";
+import { CLASSNAME, CLASSNAME_SELECTED, HIGHLIGHT_OPTIONS } from "./constants";
+import { getHighlightedItemIndexInView, highlight, scrollToItem } from "./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 = useRef([]);
+  useEffect(() => {
+    cachedHighlightedDOMElements.current = [];
+  }, [highlightedHtml]);
+  useEffect(() => {
+    if (wasChangedDOM) {
+      cachedHighlightedDOMElements.current = [];
+    }
+  }, [wasChangedDOM]);
+  if (cachedHighlightedDOMElements.current.length) {
+    return cachedHighlightedDOMElements.current;
+  }
+  if (!showSearchBar || typeof document === "undefined") {
+    return [];
+  }
+  const elements = document.querySelectorAll(`.${CLASSNAME}`);
+  cachedHighlightedDOMElements.current = [...elements];
+  return cachedHighlightedDOMElements.current;
+}
+function useHighlightedHTMLString(html, searchWords, showSearchBar) {
+  const [highlightedHtml, setHighlightedHtml] = useState(html);
+  useEffect(() => {
+    if (!searchWords.length || !showSearchBar) {
+      setHighlightedHtml(html);
+      return;
+    }
+    const highlightedResult = highlight({
+      html,
+      keywords: searchWords,
+      options: HIGHLIGHT_OPTIONS
+    });
+    if (highlightedResult.includes(CLASSNAME)) {
+      setHighlightedHtml(highlightedResult);
+    } else {
+      setHighlightedHtml(html);
+    }
+  }, [html, searchWords, showSearchBar]);
+  return highlightedHtml;
+}
+function useSearchBarIsVisible({
+  showSearchBar,
+  searchWords,
+  highlightedHtml,
+  html
+}) {
+  const [searchBarIsVisible, setSearchBarIsVisible] = useState(showSearchBar);
+  useEffect(() => {
+    setSearchBarIsVisible(
+      showSearchBar && Boolean(searchWords && searchWords.length) && highlightedHtml !== html
+    );
+  }, [showSearchBar, searchWords, highlightedHtml, html]);
+  return searchBarIsVisible;
+}
+function useCallbackDOMChange({
+  onContentMutation: _onContentMutation,
+  onContentLoaded: _onContentLoaded
+}) {
+  const [wasChangedDOM, setWasChangedDOM] = useState(false);
+  useEffect(() => {
+    if (wasChangedDOM) {
+      setWasChangedDOM(false);
+    }
+  }, [wasChangedDOM]);
+  const onContentMutation = useCallback(() => {
+    if (_onContentMutation) {
+      _onContentMutation();
+    }
+    setWasChangedDOM(true);
+  }, [_onContentMutation]);
+  const onContentLoaded = useCallback(() => {
+    if (_onContentLoaded) {
+      _onContentLoaded();
+    }
+    setWasChangedDOM(true);
+  }, [_onContentLoaded]);
+  return {
+    wasChangedDOM,
+    onContentMutation,
+    onContentLoaded
+  };
+}
+function useNoSearchWordsFoundEffect({
+  showSearchBar,
+  highlightedDOMElements,
+  onNotFoundWords
+}) {
+  useEffect(() => {
+    if (!onNotFoundWords) {
+      return;
+    }
+    if (showSearchBar && !highlightedDOMElements.length) {
+      onNotFoundWords();
+    }
+  }, [highlightedDOMElements, showSearchBar, onNotFoundWords]);
+}
+function useSearchBarNavigation({
+  highlightedDOMElements,
+  stopSyncOnScroll,
+  headerHeight,
+  hash
+}) {
+  const [searchCurrentIndex, setSearchCurrentIndex] = useState(1);
+  const [searchCountResults, setSearchCountResults] = useState(1);
+  useEffect(() => {
+    const startIndex = getHighlightedItemIndexInView({ highlightedDOMElements, headerHeight, hash }) || 1;
+    setSearchCurrentIndex(startIndex);
+    setSearchCountResults(highlightedDOMElements.length || 1);
+  }, [highlightedDOMElements, headerHeight, hash]);
+  const onClickNextSearch = 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 = 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
+}) {
+  useEffect(() => {
+    try {
+      if (!highlightedDOMElements || !highlightedDOMElements.length) {
+        return;
+      }
+      for (let index = 0; index < highlightedDOMElements.length; index++) {
+        const item2 = highlightedDOMElements[index];
+        item2.classList.remove(CLASSNAME_SELECTED);
+      }
+      const item = highlightedDOMElements[searchCurrentIndex - 1];
+      item.classList.add(CLASSNAME_SELECTED);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [highlightedDOMElements, searchCurrentIndex, wasChangedDOM]);
+  useEffect(() => {
+    if (syncOnScroll) {
+      return;
+    }
+    scrollToItem(highlightedDOMElements[searchCurrentIndex - 1]);
+  }, [wasChangedDOM, searchCurrentIndex, highlightedDOMElements, syncOnScroll, hash]);
+}
+function useCurrentWordSelectionSyncScrollEffect({
+  highlightedDOMElements,
+  searchWords,
+  syncOnScroll,
+  searchBarIsVisible,
+  setSearchCurrentIndex,
+  headerHeight,
+  setSyncOnScroll
+}) {
+  const scrollEndTimer = useRef();
+  const handleScroll = useCallback(() => {
+    if (scrollEndTimer.current) {
+      clearTimeout(scrollEndTimer.current);
+    }
+    scrollEndTimer.current = setTimeout(() => {
+      setSyncOnScroll(true);
+    }, 50);
+    if (!syncOnScroll || !searchBarIsVisible) {
+      return;
+    }
+    const highlightedItemIndexInView = getHighlightedItemIndexInView({
+      highlightedDOMElements,
+      headerHeight
+    });
+    if (isNaN(highlightedItemIndexInView)) {
+      return;
+    }
+    setSearchCurrentIndex(highlightedItemIndexInView);
+  }, [
+    setSyncOnScroll,
+    searchBarIsVisible,
+    syncOnScroll,
+    setSearchCurrentIndex,
+    highlightedDOMElements,
+    headerHeight
+  ]);
+  const handleScrollThrottled = throttle(handleScroll, 50);
+  useEffect(() => {
+    if (searchBarIsVisible) {
+      window.addEventListener("scroll", handleScrollThrottled);
+    }
+    return () => {
+      window.removeEventListener("scroll", handleScrollThrottled);
+    };
+  }, [searchBarIsVisible, searchWords, handleScrollThrottled]);
+}
+export {
+  useCurrentWordSelectionEffect,
+  useCurrentWordSelectionSyncScrollEffect,
+  useHighlightedSearchWords,
+  useNoSearchWordsFoundEffect,
+  useSearchBarNavigation
+};
+//# sourceMappingURL=hooks.js.map

package/build/esm/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/esm/components/SearchBar/index.js

@@ -0,0 +1,10 @@
+// src/components/SearchBar/index.ts
+export * from "./SearchBar";
+import { default as default2 } from "./SearchBar";
+export * from "./withHighlightedSearchWords";
+import { default as default3 } from "./withHighlightedSearchWords";
+export {
+  default2 as SearchBar,
+  default3 as withHighlightedSearchWords
+};
+//# sourceMappingURL=index.js.map

package/build/esm/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,cAAc;AACd,SAAmB,WAAXA,gBAA2B;AACnC,cAAc;AACd,SAAmB,WAAXA,gBAA4C;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,77 @@
+// src/components/SearchBar/utils.ts
+import Mark from "mark.ts";
+function highlight({ html, keywords, options }) {
+  const tmpDiv = document.createElement("div");
+  tmpDiv.innerHTML = html;
+  const markInstance = new Mark(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;
+}
+export {
+  getHighlightedItemIndexInView,
+  getItemIndexInView,
+  highlight,
+  scrollToItem
+};
+//# sourceMappingURL=utils.js.map

package/build/esm/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,OAAO,UAAU;AAYV,SAAS,UAAU,EAAC,MAAM,UAAU,QAAO,GAAqB;AACnE,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,YAAY;AAEnB,QAAM,eAAe,IAAI,KAAK,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": []
+}

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

@@ -0,0 +1,97 @@
+// src/components/SearchBar/withHighlightedSearchWords.tsx
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  useCurrentWordSelectionEffect,
+  useCurrentWordSelectionSyncScrollEffect,
+  useHighlightedSearchWords,
+  useSearchBarNavigation
+} from "./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] = useState(true);
+    const stopSyncOnScroll = useCallback(() => setSyncOnScroll(false), []);
+    useEffect(() => {
+      setSyncOnScroll(false);
+    }, [html, searchWords]);
+    const {
+      highlightedHtml,
+      highlightedDOMElements,
+      searchBarIsVisible,
+      wasChangedDOM,
+      onContentMutation,
+      onContentLoaded
+    } = useHighlightedSearchWords({
+      html,
+      searchWords,
+      showSearchBar,
+      onContentMutation: _onContentMutation,
+      onContentLoaded: _onContentLoaded,
+      onNotFoundWords
+    });
+    const {
+      searchCurrentIndex,
+      setSearchCurrentIndex,
+      searchCountResults,
+      onClickPrevSearch,
+      onClickNextSearch
+    } = useSearchBarNavigation({ highlightedDOMElements, stopSyncOnScroll, headerHeight, hash });
+    useCurrentWordSelectionEffect({
+      searchCurrentIndex,
+      highlightedDOMElements,
+      wasChangedDOM,
+      syncOnScroll,
+      hash
+    });
+    useCurrentWordSelectionSyncScrollEffect({
+      highlightedDOMElements,
+      searchWords,
+      syncOnScroll,
+      searchBarIsVisible,
+      setSearchCurrentIndex,
+      headerHeight,
+      setSyncOnScroll
+    });
+    if (searchBarIsVisible) {
+      return /* @__PURE__ */ React.createElement(
+        Component,
+        {
+          ...props,
+          html: highlightedHtml,
+          onContentMutation,
+          onContentLoaded,
+          searchCurrentIndex,
+          searchCountResults,
+          onCloseSearchBar,
+          onClickPrevSearch,
+          onClickNextSearch
+        }
+      );
+    }
+    return /* @__PURE__ */ React.createElement(Component, { ...props, showSearchBar: false });
+  };
+  const SearchWordsHighlighterWrapper = (props) => {
+    const { useSearchBar = false } = props;
+    if (useSearchBar) {
+      return /* @__PURE__ */ React.createElement(SearchWordsHighlighter, { ...props });
+    }
+    return /* @__PURE__ */ React.createElement(Component, { ...props });
+  };
+  return SearchWordsHighlighterWrapper;
+}
+var withHighlightedSearchWords_default = withHighlightedSearchWords;
+export {
+  withHighlightedSearchWords_default as default
+};
+//# sourceMappingURL=withHighlightedSearchWords.js.map

package/build/esm/components/SearchBar/withHighlightedSearchWords.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/withHighlightedSearchWords.tsx"],
+  "sourcesContent": ["import React, {useCallback, useEffect, useState} from 'react';\n\nimport {DocPageData, Router} from '../../models';\n\nimport {\n    useCurrentWordSelectionEffect,\n    useCurrentWordSelectionSyncScrollEffect,\n    useHighlightedSearchWords,\n    useSearchBarNavigation,\n} from './hooks';\n\nexport interface SearchWordsHighlighterProps extends DocPageData {\n    useSearchBar?: boolean;\n    searchWords?: string[];\n    showSearchBar?: boolean;\n    onCloseSearchBar?: () => void;\n    onNotFoundWords?: () => void;\n    searchQuery?: string;\n    onContentMutation?: () => void;\n    onContentLoaded?: () => void;\n    headerHeight?: number;\n    router: Router;\n}\n\nfunction withHighlightedSearchWords<T extends SearchWordsHighlighterProps>(\n    Component: React.ComponentType<T>,\n) {\n    const SearchWordsHighlighter: React.FC<SearchWordsHighlighterProps & T> = (\n        props,\n    ): JSX.Element | null => {\n        const {\n            html,\n            searchWords = [],\n            showSearchBar = false,\n            onCloseSearchBar,\n            onNotFoundWords = () => {},\n            onContentMutation: _onContentMutation,\n            onContentLoaded: _onContentLoaded,\n            headerHeight = 0,\n            router: {hash},\n        } = props;\n\n        const [syncOnScroll, setSyncOnScroll] = useState<boolean>(true);\n        const stopSyncOnScroll = useCallback(() => setSyncOnScroll(false), []);\n\n        useEffect(() => {\n            setSyncOnScroll(false);\n        }, [html, searchWords]);\n\n        const {\n            highlightedHtml,\n            highlightedDOMElements,\n            searchBarIsVisible,\n            wasChangedDOM,\n            onContentMutation,\n            onContentLoaded,\n        } = useHighlightedSearchWords({\n            html,\n            searchWords,\n            showSearchBar,\n            onContentMutation: _onContentMutation,\n            onContentLoaded: _onContentLoaded,\n            onNotFoundWords,\n        });\n\n        const {\n            searchCurrentIndex,\n            setSearchCurrentIndex,\n            searchCountResults,\n            onClickPrevSearch,\n            onClickNextSearch,\n        } = useSearchBarNavigation({highlightedDOMElements, stopSyncOnScroll, headerHeight, hash});\n\n        useCurrentWordSelectionEffect({\n            searchCurrentIndex,\n            highlightedDOMElements,\n            wasChangedDOM,\n            syncOnScroll,\n            hash,\n        });\n\n        /* Sync scroll with a current item in viewport */\n        useCurrentWordSelectionSyncScrollEffect({\n            highlightedDOMElements,\n            searchWords,\n            syncOnScroll,\n            searchBarIsVisible,\n            setSearchCurrentIndex,\n            headerHeight,\n            setSyncOnScroll,\n        });\n\n        if (searchBarIsVisible) {\n            return (\n                <Component\n                    {...props}\n                    html={highlightedHtml}\n                    onContentMutation={onContentMutation}\n                    onContentLoaded={onContentLoaded}\n                    searchCurrentIndex={searchCurrentIndex}\n                    searchCountResults={searchCountResults}\n                    onCloseSearchBar={onCloseSearchBar}\n                    onClickPrevSearch={onClickPrevSearch}\n                    onClickNextSearch={onClickNextSearch}\n                />\n            );\n        }\n\n        return <Component {...props} showSearchBar={false} />;\n    };\n\n    const SearchWordsHighlighterWrapper: React.FC<SearchWordsHighlighterProps & T> = (\n        props,\n    ): JSX.Element | null => {\n        const {useSearchBar = false} = props;\n\n        if (useSearchBar) {\n            return <SearchWordsHighlighter {...props} />;\n        }\n\n        return <Component {...props} />;\n    };\n\n    return SearchWordsHighlighterWrapper;\n}\n\nexport default withHighlightedSearchWords;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,aAAa,WAAW,gBAAe;AAItD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAeP,SAAS,2BACL,WACF;AACE,QAAM,yBAAoE,CACtE,UACqB;AACrB,UAAM;AAAA,MACF;AAAA,MACA,cAAc,CAAC;AAAA,MACf,gBAAgB;AAAA,MAChB;AAAA,MACA,kBAAkB,MAAM;AAAA,MAAC;AAAA,MACzB,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,QAAQ,EAAC,KAAI;AAAA,IACjB,IAAI;AAEJ,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAC9D,UAAM,mBAAmB,YAAY,MAAM,gBAAgB,KAAK,GAAG,CAAC,CAAC;AAErE,cAAU,MAAM;AACZ,sBAAgB,KAAK;AAAA,IACzB,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB;AAAA,IACJ,CAAC;AAED,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI,uBAAuB,EAAC,wBAAwB,kBAAkB,cAAc,KAAI,CAAC;AAEzF,kCAA8B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAGD,4CAAwC;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAED,QAAI,oBAAoB;AACpB,aACI;AAAA,QAAC;AAAA;AAAA,UACI,GAAG;AAAA,UACJ,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACJ;AAAA,IAER;AAEA,WAAO,oCAAC,aAAW,GAAG,OAAO,eAAe,OAAO;AAAA,EACvD;AAEA,QAAM,gCAA2E,CAC7E,UACqB;AACrB,UAAM,EAAC,eAAe,MAAK,IAAI;AAE/B,QAAI,cAAc;AACd,aAAO,oCAAC,0BAAwB,GAAG,OAAO;AAAA,IAC9C;AAEA,WAAO,oCAAC,aAAW,GAAG,OAAO;AAAA,EACjC;AAEA,SAAO;AACX;AAEA,IAAO,qCAAQ;",
+  "names": []
+}

package/build/esm/components/SearchItem/SearchItem.css

@@ -0,0 +1,88 @@
+/* src/components/SearchItem/SearchItem.scss */
+.SearchItem__link {
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+}
+.SearchItem__link:hover,
+.SearchItem__link:active {
+  color: var(--g-color-text-link-hover);
+}
+.SearchItem__marks-wrapper {
+  display: none;
+  justify-content: flex-end;
+  align-items: center;
+}
+.SearchItem__marks {
+  height: 16px;
+  margin-top: 10px;
+}
+.SearchItem__mark {
+  margin-right: 20px;
+}
+.SearchItem__mark:last-child {
+  margin-right: 0;
+}
+.SearchItem__item-wrapper:hover .SearchItem__marks-wrapper {
+  display: flex;
+}
+.SearchItem__item-wrapper {
+  margin-bottom: 20px;
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.SearchItem__item {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+.SearchItem__item-title,
+.SearchItem__item-description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.SearchItem__item-title {
+  margin-bottom: 4px;
+}
+.SearchItem__item-title,
+.SearchItem__item-title .SearchItem__item-search-token {
+  outline: none;
+  color: var(--g-color-text-link);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+}
+.utilityfocus .SearchItem__item-title:focus,
+.utilityfocus .SearchItem__item-title .SearchItem__item-search-token:focus {
+  outline: 2px solid #ffdb4d;
+}
+.SearchItem__item-title:hover,
+.SearchItem__item-title:active,
+.SearchItem__item-title .SearchItem__item-search-token:hover,
+.SearchItem__item-title .SearchItem__item-search-token:active {
+  color: var(--g-color-text-link-hover);
+}
+.SearchItem__item-title:hover .SearchItem__item-search-token {
+  color: var(--g-color-text-link-hover);
+}
+.SearchItem__item-description {
+  display: inline-block;
+  color: var(--g-color-text-secondary);
+}
+.SearchItem__item-description em {
+  font-weight: bolder;
+}
+.SearchItem__item-description::after {
+  content: "...";
+  display: inline;
+}
+.SearchItem__item-description .SearchItem__item-search-token {
+  color: var(--g-color-text-primary);
+}
+/*# sourceMappingURL=SearchItem.css.map */