@diplodoc/components 3.0.0-alpha-1

package/build/cjs/components/Scrollspy/Scrollspy.js

@@ -0,0 +1,259 @@
+"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/Scrollspy/Scrollspy.tsx
+var Scrollspy_exports = {};
+__export(Scrollspy_exports, {
+  Scrollspy: () => Scrollspy
+});
+module.exports = __toCommonJS(Scrollspy_exports);
+var import_react = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_scroll_into_view_if_needed = __toESM(require("scroll-into-view-if-needed"));
+var Scrollspy = class extends import_react.default.Component {
+  static defaultProps = {
+    currentClassName: "Scrollspy",
+    sectionOffset: 20,
+    headerHeight: 0
+  };
+  containerRef = import_react.default.createRef();
+  itemRefs = this.props.items.map(() => import_react.default.createRef());
+  scrollByClick;
+  firstItemIndexInView;
+  lastItemIndexInView;
+  constructor(props) {
+    super(props);
+    this.state = {
+      targetItems: [],
+      inViewState: []
+    };
+    this.scrollByClick = false;
+    this.firstItemIndexInView = -1;
+    this.lastItemIndexInView = -1;
+  }
+  componentDidMount() {
+    this.initItems();
+    window.addEventListener("scroll", this.handleScroll);
+    const containerEl = this.containerRef.current;
+    if (containerEl) {
+      containerEl.addEventListener("scroll", this.updateScrollValues);
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const { items, router } = this.props;
+    const { inViewState } = this.state;
+    if (!(0, import_lodash.isEqual)(inViewState, prevState.inViewState)) {
+      this.scrollToListItem();
+    }
+    if (!(0, import_lodash.isEqual)(items, prevProps.items) || prevProps.router.pathname !== router.pathname) {
+      this.initItems();
+    }
+    if (router.hash !== prevProps.router.hash) {
+      this.pauseScrollHandler();
+      this.saveActiveItems(router.hash);
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener("scroll", this.handleScroll);
+    const containerEl = this.containerRef.current;
+    if (containerEl) {
+      containerEl.removeEventListener("scroll", this.updateScrollValues);
+    }
+  }
+  render() {
+    const { children, currentClassName, className } = this.props;
+    const { inViewState } = this.state;
+    const items = children.map((child, index) => {
+      if (!child) {
+        return null;
+      }
+      const ChildTag = child.type;
+      let childClassNames = child.props.className;
+      if (inViewState[index] && currentClassName.length > 0) {
+        childClassNames += ` ${currentClassName}`;
+        this.syncScroll(index);
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        ChildTag,
+        {
+          key: child.key,
+          className: childClassNames,
+          onClick: this.handleSectionClick,
+          ref: this.itemRefs[index]
+        },
+        child.props.children
+      );
+    });
+    return /* @__PURE__ */ import_react.default.createElement("ul", { className, ref: this.containerRef }, items);
+  }
+  updateFirstItemIndexInView(maxItemsInView) {
+    this.firstItemIndexInView = Math.max(this.lastItemIndexInView - (maxItemsInView - 1), 0);
+  }
+  getContainerValues(containerEl) {
+    const { children } = this.props;
+    const childHeight = Math.round(containerEl.scrollHeight / children.length);
+    const maxItemsInView = Math.round(containerEl.clientHeight / childHeight);
+    return { childHeight, maxItemsInView };
+  }
+  updateScrollValues = () => {
+    const containerEl = this.containerRef.current;
+    if (!containerEl) {
+      return;
+    }
+    const { childHeight, maxItemsInView } = this.getContainerValues(containerEl);
+    this.lastItemIndexInView = Math.round(containerEl.scrollTop / childHeight) + maxItemsInView - 1;
+    this.updateFirstItemIndexInView(maxItemsInView);
+  };
+  syncScroll(index) {
+    const { children } = this.props;
+    const containerEl = this.containerRef.current;
+    if (!containerEl) {
+      return;
+    }
+    const { childHeight, maxItemsInView } = this.getContainerValues(containerEl);
+    if (this.lastItemIndexInView === -1) {
+      this.lastItemIndexInView = maxItemsInView - 1;
+    }
+    this.updateFirstItemIndexInView(maxItemsInView);
+    let itemInView = false;
+    if (index >= this.lastItemIndexInView) {
+      this.lastItemIndexInView = Math.min(index + 1, children.length - 1);
+    } else if (index <= this.firstItemIndexInView) {
+      this.lastItemIndexInView = Math.max(index + maxItemsInView - 2, maxItemsInView - 1);
+    } else {
+      itemInView = true;
+    }
+    this.updateFirstItemIndexInView(maxItemsInView);
+    const endIsNear = index + maxItemsInView / 2 > children.length;
+    if (itemInView) {
+      return;
+    } else if (endIsNear) {
+      containerEl.scrollTop = containerEl.scrollHeight;
+    } else {
+      containerEl.scrollTop = childHeight * this.firstItemIndexInView;
+    }
+  }
+  scrollToListItem = () => {
+    if (!this.props.scrollToListItem) {
+      return;
+    }
+    let itemIndex = this.state.inViewState.findIndex((isActive) => isActive);
+    if (itemIndex < 0) {
+      itemIndex = 0;
+    }
+    const ref = this.itemRefs[itemIndex] && this.itemRefs[itemIndex].current;
+    if (ref) {
+      (0, import_scroll_into_view_if_needed.default)(ref, {
+        scrollMode: "if-needed",
+        block: "nearest",
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    }
+  };
+  initItems() {
+    const { items } = this.props;
+    const targetItems = items.map((item) => document.getElementById(item.slice(1))).filter(Boolean);
+    this.setState({ targetItems }, this.initSections);
+    this.scrollToListItem();
+  }
+  initSections = () => {
+    this.saveActiveItems();
+  };
+  saveActiveItems(hash) {
+    const visibleItems = this.getViewState(hash);
+    this.setState({ inViewState: visibleItems });
+  }
+  getViewState(hash) {
+    const { targetItems, inViewState } = this.state;
+    const { headerHeight } = this.props;
+    const currentOffset = window.pageYOffset;
+    const visibleItemOffset = [];
+    let isOneActive = false;
+    const pureHash = hash && hash.startsWith("#") ? hash.substring(1) : hash;
+    targetItems.forEach((item, index) => {
+      if (!item) {
+        return;
+      }
+      const offsetTop = item.getBoundingClientRect().top;
+      const isVisibleItem = offsetTop < headerHeight + 1;
+      if (pureHash) {
+        if (pureHash === item.getAttribute("id")) {
+          visibleItemOffset.push(true);
+          isOneActive = true;
+        } else {
+          visibleItemOffset.push(false);
+        }
+      } else if (isVisibleItem) {
+        if (visibleItemOffset[index - 1]) {
+          visibleItemOffset[index - 1] = false;
+        }
+        visibleItemOffset.push(true);
+        isOneActive = true;
+      } else {
+        visibleItemOffset.push(false);
+      }
+    });
+    if (targetItems && targetItems.length && !isOneActive) {
+      if (currentOffset < targetItems[0].getBoundingClientRect().top) {
+        visibleItemOffset[0] = true;
+        isOneActive = true;
+      }
+    }
+    return isOneActive ? visibleItemOffset : inViewState;
+  }
+  handleScroll = () => {
+    if (this.scrollByClick) {
+      window.removeEventListener("scroll", this.handleScrollDebounced);
+      window.addEventListener("scroll", this.handleScroll);
+      this.scrollByClick = false;
+    }
+    this.saveActiveItems();
+  };
+  // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
+  handleScrollDebounced = (0, import_lodash.debounce)(this.handleScroll, 100);
+  pauseScrollHandler() {
+    this.scrollByClick = true;
+    window.removeEventListener("scroll", this.handleScroll);
+    window.addEventListener("scroll", this.handleScrollDebounced);
+  }
+  handleSectionClick = (event) => {
+    const { onSectionClick } = this.props;
+    const { target } = event;
+    if (target && target.tagName === "A") {
+      event.stopPropagation();
+      this.pauseScrollHandler();
+      this.saveActiveItems(target.hash);
+      if (onSectionClick) {
+        onSectionClick(event);
+      }
+    }
+  };
+};
+//# sourceMappingURL=Scrollspy.js.map

package/build/cjs/components/Scrollspy/Scrollspy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Scrollspy/Scrollspy.tsx"],
+  "sourcesContent": ["import React, {ReactElement} from 'react';\n\nimport {debounce, isEqual} from 'lodash';\nimport scrollIntoView from 'scroll-into-view-if-needed';\n\nimport {Router} from '../../models';\nimport {InnerProps} from '../../utils';\n\ninterface ScrollspyDefaultProps {\n    currentClassName: string;\n    sectionOffset: number;\n    headerHeight: number;\n}\n\nexport interface ScrollspyProps extends Partial<ScrollspyDefaultProps> {\n    items: string[];\n    children: ReactElement[];\n    router: Router;\n    onSectionClick?: (event: MouseEvent) => void;\n    className?: string;\n    scrollToListItem?: boolean;\n}\n\ninterface ScrollspyState {\n    targetItems: HTMLElement[];\n    inViewState: boolean[];\n}\n\ntype ScrollspyInnerProps = InnerProps<ScrollspyProps, ScrollspyDefaultProps>;\n\nexport class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspyState> {\n    static defaultProps: ScrollspyDefaultProps = {\n        currentClassName: 'Scrollspy',\n        sectionOffset: 20,\n        headerHeight: 0,\n    };\n\n    containerRef = React.createRef<HTMLUListElement>();\n    itemRefs = this.props.items.map(() => React.createRef<HTMLDivElement>());\n\n    scrollByClick: boolean;\n    firstItemIndexInView: number;\n    lastItemIndexInView: number;\n\n    constructor(props: ScrollspyInnerProps) {\n        super(props);\n\n        this.state = {\n            targetItems: [],\n            inViewState: [],\n        };\n\n        this.scrollByClick = false;\n        this.firstItemIndexInView = -1;\n        this.lastItemIndexInView = -1;\n    }\n\n    componentDidMount() {\n        this.initItems();\n        window.addEventListener('scroll', this.handleScroll);\n\n        const containerEl = this.containerRef.current;\n        if (containerEl) {\n            containerEl.addEventListener('scroll', this.updateScrollValues);\n        }\n    }\n\n    componentDidUpdate(prevProps: Readonly<ScrollspyProps>, prevState: Readonly<ScrollspyState>) {\n        const {items, router} = this.props;\n        const {inViewState} = this.state;\n\n        if (!isEqual(inViewState, prevState.inViewState)) {\n            this.scrollToListItem();\n        }\n\n        if (!isEqual(items, prevProps.items) || prevProps.router.pathname !== router.pathname) {\n            this.initItems();\n        }\n\n        if (router.hash !== prevProps.router.hash) {\n            this.pauseScrollHandler();\n            this.saveActiveItems(router.hash);\n        }\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('scroll', this.handleScroll);\n\n        const containerEl = this.containerRef.current;\n        if (containerEl) {\n            containerEl.removeEventListener('scroll', this.updateScrollValues);\n        }\n    }\n\n    render() {\n        const {children, currentClassName, className} = this.props;\n        const {inViewState} = this.state;\n\n        const items = children.map((child, index) => {\n            if (!child) {\n                return null;\n            }\n\n            const ChildTag = child.type;\n            let childClassNames = child.props.className;\n\n            if (inViewState[index] && currentClassName.length > 0) {\n                childClassNames += ` ${currentClassName}`;\n\n                this.syncScroll(index);\n            }\n\n            return (\n                <ChildTag\n                    key={child.key}\n                    className={childClassNames}\n                    onClick={this.handleSectionClick}\n                    ref={this.itemRefs[index]}\n                >\n                    {child.props.children}\n                </ChildTag>\n            );\n        });\n\n        return (\n            <ul className={className} ref={this.containerRef}>\n                {items}\n            </ul>\n        );\n    }\n\n    private updateFirstItemIndexInView(maxItemsInView: number) {\n        this.firstItemIndexInView = Math.max(this.lastItemIndexInView - (maxItemsInView - 1), 0);\n    }\n\n    private getContainerValues(containerEl: HTMLUListElement) {\n        const {children} = this.props;\n\n        /* Average values */\n        const childHeight = Math.round(containerEl.scrollHeight / children.length);\n        const maxItemsInView = Math.round(containerEl.clientHeight / childHeight);\n\n        return {childHeight, maxItemsInView};\n    }\n\n    private updateScrollValues = () => {\n        const containerEl = this.containerRef.current;\n\n        if (!containerEl) {\n            return;\n        }\n\n        const {childHeight, maxItemsInView} = this.getContainerValues(containerEl);\n        this.lastItemIndexInView =\n            Math.round(containerEl.scrollTop / childHeight) + maxItemsInView - 1;\n\n        this.updateFirstItemIndexInView(maxItemsInView);\n    };\n\n    private syncScroll(index: number) {\n        const {children} = this.props;\n        const containerEl = this.containerRef.current;\n\n        if (!containerEl) {\n            return;\n        }\n\n        const {childHeight, maxItemsInView} = this.getContainerValues(containerEl);\n\n        if (this.lastItemIndexInView === -1) {\n            this.lastItemIndexInView = maxItemsInView - 1;\n        }\n\n        this.updateFirstItemIndexInView(maxItemsInView);\n\n        let itemInView = false;\n        if (index >= this.lastItemIndexInView) {\n            this.lastItemIndexInView = Math.min(index + 1, children.length - 1);\n        } else if (index <= this.firstItemIndexInView) {\n            this.lastItemIndexInView = Math.max(index + maxItemsInView - 2, maxItemsInView - 1);\n        } else {\n            itemInView = true;\n        }\n\n        this.updateFirstItemIndexInView(maxItemsInView);\n\n        const endIsNear = index + maxItemsInView / 2 > children.length;\n        if (itemInView) {\n            return;\n        } else if (endIsNear) {\n            containerEl.scrollTop = containerEl.scrollHeight;\n        } else {\n            containerEl.scrollTop = childHeight * this.firstItemIndexInView;\n        }\n    }\n\n    private scrollToListItem = () => {\n        if (!this.props.scrollToListItem) {\n            return;\n        }\n\n        let itemIndex = this.state.inViewState.findIndex((isActive) => isActive);\n\n        if (itemIndex < 0) {\n            itemIndex = 0;\n        }\n\n        const ref = this.itemRefs[itemIndex] && this.itemRefs[itemIndex].current;\n\n        if (ref) {\n            scrollIntoView(ref, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n                behavior: 'smooth',\n            });\n        }\n    };\n\n    private initItems() {\n        const {items} = this.props;\n        const targetItems = items\n            .map((item) => document.getElementById(item.slice(1)))\n            .filter(Boolean) as HTMLElement[];\n\n        this.setState({targetItems}, this.initSections);\n        this.scrollToListItem();\n    }\n\n    private initSections = () => {\n        this.saveActiveItems();\n    };\n\n    private saveActiveItems(hash?: string) {\n        const visibleItems = this.getViewState(hash);\n\n        this.setState({inViewState: visibleItems});\n    }\n\n    private getViewState(hash?: string) {\n        const {targetItems, inViewState} = this.state;\n        const {headerHeight} = this.props;\n        const currentOffset = window.pageYOffset;\n        const visibleItemOffset: boolean[] = [];\n        let isOneActive = false;\n\n        const pureHash = hash && hash.startsWith('#') ? hash.substring(1) : hash;\n\n        targetItems.forEach((item, index) => {\n            if (!item) {\n                return;\n            }\n\n            const offsetTop = item.getBoundingClientRect().top;\n            const isVisibleItem = offsetTop < headerHeight + 1;\n\n            if (pureHash) {\n                if (pureHash === item.getAttribute('id')) {\n                    visibleItemOffset.push(true);\n                    isOneActive = true;\n                } else {\n                    visibleItemOffset.push(false);\n                }\n            } else if (isVisibleItem) {\n                if (visibleItemOffset[index - 1]) {\n                    visibleItemOffset[index - 1] = false;\n                }\n\n                visibleItemOffset.push(true);\n                isOneActive = true;\n            } else {\n                visibleItemOffset.push(false);\n            }\n        });\n\n        if (targetItems && targetItems.length && !isOneActive) {\n            if (currentOffset < targetItems[0].getBoundingClientRect().top) {\n                visibleItemOffset[0] = true;\n                isOneActive = true;\n            }\n        }\n\n        return isOneActive ? visibleItemOffset : inViewState;\n    }\n\n    private handleScroll = () => {\n        if (this.scrollByClick) {\n            // the end of smooth auto-scroll\n            window.removeEventListener('scroll', this.handleScrollDebounced);\n            window.addEventListener('scroll', this.handleScroll);\n            this.scrollByClick = false;\n        }\n        this.saveActiveItems();\n    };\n\n    // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp\n    private handleScrollDebounced = debounce(this.handleScroll, 100);\n\n    private pauseScrollHandler() {\n        // wait for the end of smooth auto-scroll\n        this.scrollByClick = true;\n        window.removeEventListener('scroll', this.handleScroll);\n        window.addEventListener('scroll', this.handleScrollDebounced);\n    }\n\n    private handleSectionClick = (event: MouseEvent) => {\n        const {onSectionClick} = this.props;\n        const {target} = event;\n\n        if (target && (target as HTMLElement).tagName === 'A') {\n            event.stopPropagation();\n            this.pauseScrollHandler();\n            this.saveActiveItems((target as HTMLAnchorElement).hash);\n\n            if (onSectionClick) {\n                onSectionClick(event);\n            }\n        }\n    };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,oBAAgC;AAChC,wCAA2B;AA2BpB,IAAM,YAAN,cAAwB,aAAAA,QAAM,UAA+C;AAAA,EAChF,OAAO,eAAsC;AAAA,IACzC,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,cAAc;AAAA,EAClB;AAAA,EAEA,eAAe,aAAAA,QAAM,UAA4B;AAAA,EACjD,WAAW,KAAK,MAAM,MAAM,IAAI,MAAM,aAAAA,QAAM,UAA0B,CAAC;AAAA,EAEvE;AAAA,EACA;AAAA,EACA;AAAA,EAEA,YAAY,OAA4B;AACpC,UAAM,KAAK;AAEX,SAAK,QAAQ;AAAA,MACT,aAAa,CAAC;AAAA,MACd,aAAa,CAAC;AAAA,IAClB;AAEA,SAAK,gBAAgB;AACrB,SAAK,uBAAuB;AAC5B,SAAK,sBAAsB;AAAA,EAC/B;AAAA,EAEA,oBAAoB;AAChB,SAAK,UAAU;AACf,WAAO,iBAAiB,UAAU,KAAK,YAAY;AAEnD,UAAM,cAAc,KAAK,aAAa;AACtC,QAAI,aAAa;AACb,kBAAY,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,IAClE;AAAA,EACJ;AAAA,EAEA,mBAAmB,WAAqC,WAAqC;AACzF,UAAM,EAAC,OAAO,OAAM,IAAI,KAAK;AAC7B,UAAM,EAAC,YAAW,IAAI,KAAK;AAE3B,QAAI,KAAC,uBAAQ,aAAa,UAAU,WAAW,GAAG;AAC9C,WAAK,iBAAiB;AAAA,IAC1B;AAEA,QAAI,KAAC,uBAAQ,OAAO,UAAU,KAAK,KAAK,UAAU,OAAO,aAAa,OAAO,UAAU;AACnF,WAAK,UAAU;AAAA,IACnB;AAEA,QAAI,OAAO,SAAS,UAAU,OAAO,MAAM;AACvC,WAAK,mBAAmB;AACxB,WAAK,gBAAgB,OAAO,IAAI;AAAA,IACpC;AAAA,EACJ;AAAA,EAEA,uBAAuB;AACnB,WAAO,oBAAoB,UAAU,KAAK,YAAY;AAEtD,UAAM,cAAc,KAAK,aAAa;AACtC,QAAI,aAAa;AACb,kBAAY,oBAAoB,UAAU,KAAK,kBAAkB;AAAA,IACrE;AAAA,EACJ;AAAA,EAEA,SAAS;AACL,UAAM,EAAC,UAAU,kBAAkB,UAAS,IAAI,KAAK;AACrD,UAAM,EAAC,YAAW,IAAI,KAAK;AAE3B,UAAM,QAAQ,SAAS,IAAI,CAAC,OAAO,UAAU;AACzC,UAAI,CAAC,OAAO;AACR,eAAO;AAAA,MACX;AAEA,YAAM,WAAW,MAAM;AACvB,UAAI,kBAAkB,MAAM,MAAM;AAElC,UAAI,YAAY,KAAK,KAAK,iBAAiB,SAAS,GAAG;AACnD,2BAAmB,IAAI,gBAAgB;AAEvC,aAAK,WAAW,KAAK;AAAA,MACzB;AAEA,aACI,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACG,KAAK,MAAM;AAAA,UACX,WAAW;AAAA,UACX,SAAS,KAAK;AAAA,UACd,KAAK,KAAK,SAAS,KAAK;AAAA;AAAA,QAEvB,MAAM,MAAM;AAAA,MACjB;AAAA,IAER,CAAC;AAED,WACI,6BAAAA,QAAA,cAAC,QAAG,WAAsB,KAAK,KAAK,gBAC/B,KACL;AAAA,EAER;AAAA,EAEQ,2BAA2B,gBAAwB;AACvD,SAAK,uBAAuB,KAAK,IAAI,KAAK,uBAAuB,iBAAiB,IAAI,CAAC;AAAA,EAC3F;AAAA,EAEQ,mBAAmB,aAA+B;AACtD,UAAM,EAAC,SAAQ,IAAI,KAAK;AAGxB,UAAM,cAAc,KAAK,MAAM,YAAY,eAAe,SAAS,MAAM;AACzE,UAAM,iBAAiB,KAAK,MAAM,YAAY,eAAe,WAAW;AAExE,WAAO,EAAC,aAAa,eAAc;AAAA,EACvC;AAAA,EAEQ,qBAAqB,MAAM;AAC/B,UAAM,cAAc,KAAK,aAAa;AAEtC,QAAI,CAAC,aAAa;AACd;AAAA,IACJ;AAEA,UAAM,EAAC,aAAa,eAAc,IAAI,KAAK,mBAAmB,WAAW;AACzE,SAAK,sBACD,KAAK,MAAM,YAAY,YAAY,WAAW,IAAI,iBAAiB;AAEvE,SAAK,2BAA2B,cAAc;AAAA,EAClD;AAAA,EAEQ,WAAW,OAAe;AAC9B,UAAM,EAAC,SAAQ,IAAI,KAAK;AACxB,UAAM,cAAc,KAAK,aAAa;AAEtC,QAAI,CAAC,aAAa;AACd;AAAA,IACJ;AAEA,UAAM,EAAC,aAAa,eAAc,IAAI,KAAK,mBAAmB,WAAW;AAEzE,QAAI,KAAK,wBAAwB,IAAI;AACjC,WAAK,sBAAsB,iBAAiB;AAAA,IAChD;AAEA,SAAK,2BAA2B,cAAc;AAE9C,QAAI,aAAa;AACjB,QAAI,SAAS,KAAK,qBAAqB;AACnC,WAAK,sBAAsB,KAAK,IAAI,QAAQ,GAAG,SAAS,SAAS,CAAC;AAAA,IACtE,WAAW,SAAS,KAAK,sBAAsB;AAC3C,WAAK,sBAAsB,KAAK,IAAI,QAAQ,iBAAiB,GAAG,iBAAiB,CAAC;AAAA,IACtF,OAAO;AACH,mBAAa;AAAA,IACjB;AAEA,SAAK,2BAA2B,cAAc;AAE9C,UAAM,YAAY,QAAQ,iBAAiB,IAAI,SAAS;AACxD,QAAI,YAAY;AACZ;AAAA,IACJ,WAAW,WAAW;AAClB,kBAAY,YAAY,YAAY;AAAA,IACxC,OAAO;AACH,kBAAY,YAAY,cAAc,KAAK;AAAA,IAC/C;AAAA,EACJ;AAAA,EAEQ,mBAAmB,MAAM;AAC7B,QAAI,CAAC,KAAK,MAAM,kBAAkB;AAC9B;AAAA,IACJ;AAEA,QAAI,YAAY,KAAK,MAAM,YAAY,UAAU,CAAC,aAAa,QAAQ;AAEvE,QAAI,YAAY,GAAG;AACf,kBAAY;AAAA,IAChB;AAEA,UAAM,MAAM,KAAK,SAAS,SAAS,KAAK,KAAK,SAAS,SAAS,EAAE;AAEjE,QAAI,KAAK;AACL,4CAAAC,SAAe,KAAK;AAAA,QAChB,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEQ,YAAY;AAChB,UAAM,EAAC,MAAK,IAAI,KAAK;AACrB,UAAM,cAAc,MACf,IAAI,CAAC,SAAS,SAAS,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,EACpD,OAAO,OAAO;AAEnB,SAAK,SAAS,EAAC,YAAW,GAAG,KAAK,YAAY;AAC9C,SAAK,iBAAiB;AAAA,EAC1B;AAAA,EAEQ,eAAe,MAAM;AACzB,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEQ,gBAAgB,MAAe;AACnC,UAAM,eAAe,KAAK,aAAa,IAAI;AAE3C,SAAK,SAAS,EAAC,aAAa,aAAY,CAAC;AAAA,EAC7C;AAAA,EAEQ,aAAa,MAAe;AAChC,UAAM,EAAC,aAAa,YAAW,IAAI,KAAK;AACxC,UAAM,EAAC,aAAY,IAAI,KAAK;AAC5B,UAAM,gBAAgB,OAAO;AAC7B,UAAM,oBAA+B,CAAC;AACtC,QAAI,cAAc;AAElB,UAAM,WAAW,QAAQ,KAAK,WAAW,GAAG,IAAI,KAAK,UAAU,CAAC,IAAI;AAEpE,gBAAY,QAAQ,CAAC,MAAM,UAAU;AACjC,UAAI,CAAC,MAAM;AACP;AAAA,MACJ;AAEA,YAAM,YAAY,KAAK,sBAAsB,EAAE;AAC/C,YAAM,gBAAgB,YAAY,eAAe;AAEjD,UAAI,UAAU;AACV,YAAI,aAAa,KAAK,aAAa,IAAI,GAAG;AACtC,4BAAkB,KAAK,IAAI;AAC3B,wBAAc;AAAA,QAClB,OAAO;AACH,4BAAkB,KAAK,KAAK;AAAA,QAChC;AAAA,MACJ,WAAW,eAAe;AACtB,YAAI,kBAAkB,QAAQ,CAAC,GAAG;AAC9B,4BAAkB,QAAQ,CAAC,IAAI;AAAA,QACnC;AAEA,0BAAkB,KAAK,IAAI;AAC3B,sBAAc;AAAA,MAClB,OAAO;AACH,0BAAkB,KAAK,KAAK;AAAA,MAChC;AAAA,IACJ,CAAC;AAED,QAAI,eAAe,YAAY,UAAU,CAAC,aAAa;AACnD,UAAI,gBAAgB,YAAY,CAAC,EAAE,sBAAsB,EAAE,KAAK;AAC5D,0BAAkB,CAAC,IAAI;AACvB,sBAAc;AAAA,MAClB;AAAA,IACJ;AAEA,WAAO,cAAc,oBAAoB;AAAA,EAC7C;AAAA,EAEQ,eAAe,MAAM;AACzB,QAAI,KAAK,eAAe;AAEpB,aAAO,oBAAoB,UAAU,KAAK,qBAAqB;AAC/D,aAAO,iBAAiB,UAAU,KAAK,YAAY;AACnD,WAAK,gBAAgB;AAAA,IACzB;AACA,SAAK,gBAAgB;AAAA,EACzB;AAAA;AAAA,EAGQ,4BAAwB,wBAAS,KAAK,cAAc,GAAG;AAAA,EAEvD,qBAAqB;AAEzB,SAAK,gBAAgB;AACrB,WAAO,oBAAoB,UAAU,KAAK,YAAY;AACtD,WAAO,iBAAiB,UAAU,KAAK,qBAAqB;AAAA,EAChE;AAAA,EAEQ,qBAAqB,CAAC,UAAsB;AAChD,UAAM,EAAC,eAAc,IAAI,KAAK;AAC9B,UAAM,EAAC,OAAM,IAAI;AAEjB,QAAI,UAAW,OAAuB,YAAY,KAAK;AACnD,YAAM,gBAAgB;AACtB,WAAK,mBAAmB;AACxB,WAAK,gBAAiB,OAA6B,IAAI;AAEvD,UAAI,gBAAgB;AAChB,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAAA,EACJ;AACJ;",
+  "names": ["React", "scrollIntoView"]
+}

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

@@ -0,0 +1 @@
+export * from './Scrollspy';

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

@@ -0,0 +1,21 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Scrollspy/index.ts
+var Scrollspy_exports = {};
+module.exports = __toCommonJS(Scrollspy_exports);
+__reExport(Scrollspy_exports, require("./Scrollspy"), module.exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Scrollspy/index.ts"],
+  "sourcesContent": ["export * from './Scrollspy';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,wBAAd;",
+  "names": []
+}

package/build/cjs/components/SearchBar/SearchBar.css

@@ -0,0 +1,59 @@
+/* src/components/SearchBar/SearchBar.scss */
+.dc-search-bar {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 10px var(--g-color-base-generic-accent);
+  padding: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--g-text-body-short-font-size);
+  line-height: var(--g-text-body-short-line-height);
+}
+.dc-search-bar__search-query-label {
+  color: var(--g-color-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+@media (max-width: 770px) {
+  .dc-search-bar__search-query-label {
+    display: none;
+  }
+}
+.dc-search-bar__search-query {
+  max-width: 400px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+@media (max-width: 770px) {
+  .dc-search-bar__search-query {
+    display: none;
+  }
+}
+.dc-search-bar__left {
+  width: 90%;
+  display: flex;
+  align-items: center;
+}
+.dc-search-bar__navigation {
+  display: flex;
+  align-items: center;
+  margin-right: 11px;
+}
+.dc-search-bar__next-arrow {
+  transform: rotate(-180deg);
+}
+.dc-search-bar__counter {
+  margin: 0 4px;
+}
+.dc-search-highlighted {
+  background: var(--dc-text-highlight);
+}
+.dc-search-highlighted_selected {
+  background: var(--dc-text-highlight-selected);
+}
+/*# sourceMappingURL=SearchBar.css.map */

package/build/cjs/components/SearchBar/SearchBar.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/Users/3y3k0/doctools/docs-components/src/components/SearchBar/SearchBar.scss", "../../../../src/components/SearchBar/%3Cinput%20css%20o51xU7%3E"],
+  "sourcesContent": ["@import '../../styles/variables';\n@import '../../styles/mixins';\n\n.dc-search-bar {\n    width: 100%;\n    height: 100%;\n    border-radius: 5px;\n    box-sizing: border-box;\n    box-shadow: 0px 3px 10px var(--g-color-base-generic-accent);\n    padding: 11px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n\n    &__search-query-label {\n        color: var(--g-color-text-secondary);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n\n        @media (max-width: map-get($screenBreakpoints, 'md') + 1) {\n            display: none;\n        }\n    }\n\n    &__search-query {\n        max-width: 400px;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n\n        @media (max-width: map-get($screenBreakpoints, 'md') + 1) {\n            display: none;\n        }\n    }\n\n    &__left {\n        width: 90%;\n        display: flex;\n        align-items: center;\n    }\n\n    &__navigation {\n        display: flex;\n        align-items: center;\n        margin-right: 11px;\n    }\n\n    &__next-arrow {\n        transform: rotate(-180deg);\n    }\n\n    &__counter {\n        margin: 0 4px;\n    }\n}\n\n$hl-class: '.dc-search-highlighted';\n\n#{$hl-class} {\n    background: var(--dc-text-highlight);\n\n    &_selected {\n        background: var(--dc-text-highlight-selected);\n    }\n}\n", ".dc-search-bar {\n  width: 100%;\n  height: 100%;\n  border-radius: 5px;\n  box-sizing: border-box;\n  box-shadow: 0px 3px 10px var(--g-color-base-generic-accent);\n  padding: 11px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--g-text-body-short-font-size);\n  line-height: var(--g-text-body-short-line-height);\n}\n.dc-search-bar__search-query-label {\n  color: var(--g-color-text-secondary);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n@media (max-width: 770px) {\n  .dc-search-bar__search-query-label {\n    display: none;\n  }\n}\n.dc-search-bar__search-query {\n  max-width: 400px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n@media (max-width: 770px) {\n  .dc-search-bar__search-query {\n    display: none;\n  }\n}\n.dc-search-bar__left {\n  width: 90%;\n  display: flex;\n  align-items: center;\n}\n.dc-search-bar__navigation {\n  display: flex;\n  align-items: center;\n  margin-right: 11px;\n}\n.dc-search-bar__next-arrow {\n  transform: rotate(-180deg);\n}\n.dc-search-bar__counter {\n  margin: 0 4px;\n}\n\n.dc-search-highlighted {\n  background: var(--dc-text-highlight);\n}\n.dc-search-highlighted_selected {\n  background: var(--dc-text-highlight-selected);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzLzN5M2swL2RvY3Rvb2xzL2RvY3MtY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9TZWFyY2hCYXIiLCJzb3VyY2VzIjpbIlNlYXJjaEJhci5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0k7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7RUFDQTs7QUFFQTtFQUNJO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBTko7SUFPUTs7O0FBSVI7RUFDSTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQU5KO0lBT1E7OztBQUlSO0VBQ0k7RUFDQTtFQUNBOztBQUdKO0VBQ0k7RUFDQTtFQUNBOztBQUdKO0VBQ0k7O0FBR0o7RUFDSTs7O0FBTVI7RUFDSTs7QUFFQTtFQUNJIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAnLi4vLi4vc3R5bGVzL3ZhcmlhYmxlcyc7XG5AaW1wb3J0ICcuLi8uLi9zdHlsZXMvbWl4aW5zJztcblxuLmRjLXNlYXJjaC1iYXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBib3gtc2hhZG93OiAwcHggM3B4IDEwcHggdmFyKC0tZy1jb2xvci1iYXNlLWdlbmVyaWMtYWNjZW50KTtcbiAgICBwYWRkaW5nOiAxMXB4O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cbiAgICBmb250LXNpemU6IHZhcigtLWctdGV4dC1ib2R5LXNob3J0LWZvbnQtc2l6ZSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWctdGV4dC1ib2R5LXNob3J0LWxpbmUtaGVpZ2h0KTtcblxuICAgICZfX3NlYXJjaC1xdWVyeS1sYWJlbCB7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1nLWNvbG9yLXRleHQtc2Vjb25kYXJ5KTtcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IG1hcC1nZXQoJHNjcmVlbkJyZWFrcG9pbnRzLCAnbWQnKSArIDEpIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmX19zZWFyY2gtcXVlcnkge1xuICAgICAgICBtYXgtd2lkdGg6IDQwMHB4O1xuICAgICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgICAgICBAbWVkaWEgKG1heC13aWR0aDogbWFwLWdldCgkc2NyZWVuQnJlYWtwb2ludHMsICdtZCcpICsgMSkge1xuICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICZfX2xlZnQge1xuICAgICAgICB3aWR0aDogOTAlO1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cblxuICAgICZfX25hdmlnYXRpb24ge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDExcHg7XG4gICAgfVxuXG4gICAgJl9fbmV4dC1hcnJvdyB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0xODBkZWcpO1xuICAgIH1cblxuICAgICZfX2NvdW50ZXIge1xuICAgICAgICBtYXJnaW46IDAgNHB4O1xuICAgIH1cbn1cblxuJGhsLWNsYXNzOiAnLmRjLXNlYXJjaC1oaWdobGlnaHRlZCc7XG5cbiN7JGhsLWNsYXNzfSB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tZGMtdGV4dC1oaWdobGlnaHQpO1xuXG4gICAgJl9zZWxlY3RlZCB7XG4gICAgICAgIGJhY2tncm91bmQ6IHZhcigtLWRjLXRleHQtaGlnaGxpZ2h0LXNlbGVjdGVkKTtcbiAgICB9XG59XG4iXX0= */"],
+  "mappings": ";AAGA,CAAA;AACI,SAAA;AACA,UAAA;AACA,iBAAA;AACA,cAAA;AACA,cAAA,IAAA,IAAA,KAAA,IAAA;AACA,WAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;AAEA,aAAA,IAAA;AACA,eAAA,IAAA;ACHJ;ADKI,CAAA;AACI,SAAA,IAAA;AACA,eAAA;AACA,iBAAA;AACA,YAAA;ACHR;ADKQ,OAAA,CAAA,SAAA,EAAA;AANJ,GAAA;AAOQ,aAAA;ACFV;AACF;ADKI,CAAA;AACI,aAAA;AACA,eAAA;AACA,iBAAA;AACA,YAAA;ACHR;ADKQ,OAAA,CAAA,SAAA,EAAA;AANJ,GAAA;AAOQ,aAAA;ACFV;AACF;ADKI,CAAA;AACI,SAAA;AACA,WAAA;AACA,eAAA;ACHR;ADMI,CAAA;AACI,WAAA;AACA,eAAA;AACA,gBAAA;ACJR;ADOI,CAAA;AACI,aAAA,OAAA;ACLR;ADQI,CAAA;AACI,UAAA,EAAA;ACNR;ADYA,CAAA;AACI,cAAA,IAAA;ACTJ;ADWI,CAAA;AACI,cAAA,IAAA;ACTR;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './SearchBar.scss';
+export interface SearchBarProps {
+    searchQuery?: string;
+    onClickPrevSearch?: () => void;
+    onClickNextSearch?: () => void;
+    onCloseSearchBar?: () => void;
+    searchCurrentIndex?: number;
+    searchCountResults?: number;
+}
+declare const SearchBar: React.NamedExoticComponent<SearchBarProps>;
+export default SearchBar;

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

@@ -0,0 +1,88 @@
+"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/SearchBar.tsx
+var SearchBar_exports = {};
+__export(SearchBar_exports, {
+  default: () => SearchBar_default
+});
+module.exports = __toCommonJS(SearchBar_exports);
+var import_react = __toESM(require("react"));
+var import_uikit = require("@gravity-ui/uikit");
+var import_bem_cn_lite = __toESM(require("bem-cn-lite"));
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var import_hooks = require("../../hooks");
+var import_Control = require("../Control");
+var import_chevron_left = __toESM(require("@gravity-ui/icons/svgs/chevron-left.svg"));
+var import_xmark = __toESM(require("@gravity-ui/icons/svgs/xmark.svg"));
+var import_SearchBar = require("./SearchBar.css");
+var b = (0, import_bem_cn_lite.default)("dc-search-bar");
+var noop = () => {
+};
+var SearchBar = (0, import_react.memo)((props) => {
+  const { t } = (0, import_hooks.useTranslation)("search-bar");
+  const {
+    searchQuery,
+    searchCurrentIndex,
+    searchCountResults,
+    onClickPrevSearch = noop,
+    onClickNextSearch = noop,
+    onCloseSearchBar = noop
+  } = props;
+  const hotkeysOptions = { filterPreventDefault: true };
+  const hotkeysPrev = "\u21E7+enter";
+  const hotkeysNext = "enter";
+  (0, import_react_hotkeys_hook.useHotkeys)(hotkeysPrev, onClickPrevSearch, hotkeysOptions, [onClickPrevSearch]);
+  (0, import_react_hotkeys_hook.useHotkeys)(hotkeysNext, onClickNextSearch, hotkeysOptions, [onClickNextSearch]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: b() }, /* @__PURE__ */ import_react.default.createElement("div", { className: b("left") }, /* @__PURE__ */ import_react.default.createElement("div", { className: b("navigation") }, /* @__PURE__ */ import_react.default.createElement(
+    import_Control.Control,
+    {
+      onClick: onClickPrevSearch,
+      tooltipText: `${t("prev")} (${hotkeysPrev})`,
+      icon: (args) => /* @__PURE__ */ import_react.default.createElement(import_uikit.Icon, { data: import_chevron_left.default, ...args })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: b("counter") }, searchCurrentIndex, "/", searchCountResults), /* @__PURE__ */ import_react.default.createElement(
+    import_Control.Control,
+    {
+      onClick: onClickNextSearch,
+      tooltipText: `${t("next")} (${hotkeysNext})`,
+      icon: (args) => /* @__PURE__ */ import_react.default.createElement(import_uikit.Icon, { data: import_chevron_left.default, className: b("next-arrow"), ...args })
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("span", { className: b("search-query-label") }, t("search-query-label"), ":\xA0"), /* @__PURE__ */ import_react.default.createElement("span", { className: b("search-query") }, searchQuery)), /* @__PURE__ */ import_react.default.createElement("div", { className: b("right") }, /* @__PURE__ */ import_react.default.createElement(
+    import_Control.Control,
+    {
+      onClick: onCloseSearchBar,
+      tooltipText: t("close"),
+      icon: () => /* @__PURE__ */ import_react.default.createElement(import_uikit.Icon, { data: import_xmark.default, size: 16 })
+    }
+  )));
+});
+SearchBar.displayName = "DCSearchBar";
+var SearchBar_default = SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SearchBar/SearchBar.tsx"],
+  "sourcesContent": ["import React, {memo} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\nimport {useHotkeys} from 'react-hotkeys-hook';\n\nimport {useTranslation} from '../../hooks';\nimport {Control} from '../Control';\n\nimport ArrowLeftIcon from '@gravity-ui/icons/svgs/chevron-left.svg';\nimport CloseIcon from '@gravity-ui/icons/svgs/xmark.svg';\n\nimport './SearchBar.scss';\n\nconst b = block('dc-search-bar');\n\nexport interface SearchBarProps {\n    searchQuery?: string;\n    onClickPrevSearch?: () => void;\n    onClickNextSearch?: () => void;\n    onCloseSearchBar?: () => void;\n    searchCurrentIndex?: number;\n    searchCountResults?: number;\n}\n\nconst noop = () => {};\n\nconst SearchBar = memo<SearchBarProps>((props) => {\n    const {t} = useTranslation('search-bar');\n    const {\n        searchQuery,\n        searchCurrentIndex,\n        searchCountResults,\n        onClickPrevSearch = noop,\n        onClickNextSearch = noop,\n        onCloseSearchBar = noop,\n    } = props;\n\n    const hotkeysOptions = {filterPreventDefault: true};\n    const hotkeysPrev = '\u21E7+enter';\n    const hotkeysNext = 'enter';\n    useHotkeys(hotkeysPrev, onClickPrevSearch, hotkeysOptions, [onClickPrevSearch]);\n    useHotkeys(hotkeysNext, onClickNextSearch, hotkeysOptions, [onClickNextSearch]);\n\n    return (\n        <div className={b()}>\n            <div className={b('left')}>\n                <div className={b('navigation')}>\n                    <Control\n                        onClick={onClickPrevSearch}\n                        tooltipText={`${t('prev')} (${hotkeysPrev})`}\n                        icon={(args) => <Icon data={ArrowLeftIcon} {...args} />}\n                    />\n                    <span className={b('counter')}>\n                        {searchCurrentIndex}/{searchCountResults}\n                    </span>\n                    <Control\n                        onClick={onClickNextSearch}\n                        tooltipText={`${t('next')} (${hotkeysNext})`}\n                        icon={(args) => (\n                            <Icon data={ArrowLeftIcon} className={b('next-arrow')} {...args} />\n                        )}\n                    />\n                </div>\n                <span className={b('search-query-label')}>\n                    {t<string>('search-query-label')}:&nbsp;\n                </span>\n                <span className={b('search-query')}>{searchQuery}</span>\n            </div>\n            <div className={b('right')}>\n                <Control\n                    onClick={onCloseSearchBar}\n                    tooltipText={t('close')}\n                    icon={() => <Icon data={CloseIcon} size={16} />}\n                />\n            </div>\n        </div>\n    );\n});\n\nSearchBar.displayName = 'DCSearchBar';\n\nexport default SearchBar;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,mBAAmB;AACnB,yBAAkB;AAClB,gCAAyB;AAEzB,mBAA6B;AAC7B,qBAAsB;AAEtB,0BAA0B;AAC1B,mBAAsB;AAEtB,uBAAO;AAEP,IAAM,QAAI,mBAAAA,SAAM,eAAe;AAW/B,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAM,gBAAY,mBAAqB,CAAC,UAAU;AAC9C,QAAM,EAAC,EAAC,QAAI,6BAAe,YAAY;AACvC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EACvB,IAAI;AAEJ,QAAM,iBAAiB,EAAC,sBAAsB,KAAI;AAClD,QAAM,cAAc;AACpB,QAAM,cAAc;AACpB,4CAAW,aAAa,mBAAmB,gBAAgB,CAAC,iBAAiB,CAAC;AAC9E,4CAAW,aAAa,mBAAmB,gBAAgB,CAAC,iBAAiB,CAAC;AAE9E,SACI,6BAAAC,QAAA,cAAC,SAAI,WAAW,EAAE,KACd,6BAAAA,QAAA,cAAC,SAAI,WAAW,EAAE,MAAM,KACpB,6BAAAA,QAAA,cAAC,SAAI,WAAW,EAAE,YAAY,KAC1B,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACG,SAAS;AAAA,MACT,aAAa,GAAG,EAAE,MAAM,CAAC,KAAK,WAAW;AAAA,MACzC,MAAM,CAAC,SAAS,6BAAAA,QAAA,cAAC,qBAAK,MAAM,oBAAAC,SAAgB,GAAG,MAAM;AAAA;AAAA,EACzD,GACA,6BAAAD,QAAA,cAAC,UAAK,WAAW,EAAE,SAAS,KACvB,oBAAmB,KAAE,kBAC1B,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACG,SAAS;AAAA,MACT,aAAa,GAAG,EAAE,MAAM,CAAC,KAAK,WAAW;AAAA,MACzC,MAAM,CAAC,SACH,6BAAAA,QAAA,cAAC,qBAAK,MAAM,oBAAAC,SAAe,WAAW,EAAE,YAAY,GAAI,GAAG,MAAM;AAAA;AAAA,EAEzE,CACJ,GACA,6BAAAD,QAAA,cAAC,UAAK,WAAW,EAAE,oBAAoB,KAClC,EAAU,oBAAoB,GAAE,OACrC,GACA,6BAAAA,QAAA,cAAC,UAAK,WAAW,EAAE,cAAc,KAAI,WAAY,CACrD,GACA,6BAAAA,QAAA,cAAC,SAAI,WAAW,EAAE,OAAO,KACrB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACG,SAAS;AAAA,MACT,aAAa,EAAE,OAAO;AAAA,MACtB,MAAM,MAAM,6BAAAA,QAAA,cAAC,qBAAK,MAAM,aAAAE,SAAW,MAAM,IAAI;AAAA;AAAA,EACjD,CACJ,CACJ;AAER,CAAC;AAED,UAAU,cAAc;AAExB,IAAO,oBAAQ;",
+  "names": ["block", "React", "ArrowLeftIcon", "CloseIcon"]
+}

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

@@ -0,0 +1,7 @@
+export declare const CLASSNAME = "dc-search-highlighted";
+export declare const CLASSNAME_SELECTED = "dc-search-highlighted_selected";
+export declare const HIGHLIGHT_OPTIONS: {
+    element: string;
+    className: string;
+    exclude: string[];
+};

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

@@ -0,0 +1,39 @@
+"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/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  CLASSNAME: () => CLASSNAME,
+  CLASSNAME_SELECTED: () => CLASSNAME_SELECTED,
+  HIGHLIGHT_OPTIONS: () => HIGHLIGHT_OPTIONS
+});
+module.exports = __toCommonJS(constants_exports);
+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 *"
+  ]
+};
+//# sourceMappingURL=constants.js.map

package/build/cjs/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/cjs/components/SearchBar/hooks.d.ts

@@ -0,0 +1,55 @@
+import { SyntheticEvent } from 'react';
+type UseHighlightedSearchWords = {
+    html: string;
+    searchWords: string[];
+    showSearchBar: boolean;
+    onNotFoundWords?: () => void;
+    onContentMutation?: () => void;
+    onContentLoaded?: () => void;
+};
+export declare function useHighlightedSearchWords({ html, searchWords, showSearchBar, onContentMutation: _onContentMutation, onContentLoaded: _onContentLoaded, onNotFoundWords, }: UseHighlightedSearchWords): {
+    highlightedHtml: string;
+    highlightedDOMElements: Element[];
+    searchBarIsVisible: boolean;
+    wasChangedDOM: boolean;
+    onContentMutation: () => void;
+    onContentLoaded: () => void;
+};
+type UseNoSearchWordsFoundEffect = {
+    showSearchBar: boolean;
+    highlightedDOMElements: Element[];
+    onNotFoundWords?: () => void;
+};
+export declare function useNoSearchWordsFoundEffect({ showSearchBar, highlightedDOMElements, onNotFoundWords, }: UseNoSearchWordsFoundEffect): void;
+type UseSearchBarNavigation = {
+    highlightedDOMElements: Element[];
+    stopSyncOnScroll: () => void;
+    headerHeight: number;
+    hash?: string;
+};
+export declare function useSearchBarNavigation({ highlightedDOMElements, stopSyncOnScroll, headerHeight, hash, }: UseSearchBarNavigation): {
+    searchCurrentIndex: number;
+    setSearchCurrentIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    searchCountResults: number;
+    onClickPrevSearch: (e: SyntheticEvent) => void;
+    onClickNextSearch: (e: SyntheticEvent) => void;
+};
+type UseHighlightCurrentWordEffect = {
+    highlightedDOMElements: Element[];
+    searchCurrentIndex: number;
+    wasChangedDOM: boolean;
+    syncOnScroll: boolean;
+    hash?: string;
+};
+export declare function useCurrentWordSelectionEffect({ searchCurrentIndex, highlightedDOMElements, wasChangedDOM, syncOnScroll, hash, }: UseHighlightCurrentWordEffect): void;
+type UseCurrentWordSelectionSyncScrollEffect = {
+    highlightedDOMElements: Element[];
+    searchWords: string[];
+    syncOnScroll: boolean;
+    searchBarIsVisible: boolean;
+    setSearchCurrentIndex: (index: number) => void;
+    headerHeight: number;
+    setSyncOnScroll: (flag: boolean) => void;
+};
+export declare function useCurrentWordSelectionSyncScrollEffect({ highlightedDOMElements, searchWords, syncOnScroll, searchBarIsVisible, setSearchCurrentIndex, headerHeight, setSyncOnScroll, }: UseCurrentWordSelectionSyncScrollEffect): void;
+export {};