@diplodoc/components 4.24.0 → 4.26.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "React components for drawing Diplodoc documentation",
   "author": "YFM Team <yfm-team@yandex.ru>",
   "license": "MIT",
-  "version": "4.24.0",
+  "version": "4.26.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:yandex-cloud/docs-components.git"
@@ -53,6 +53,7 @@
     "typecheck": "tsc -p . --noEmit",
     "test": "exit 0",
     "test:playwright": "npx playwright test --config playwright/playwright.config.ts",
+    "test:playwright:update": "UPDATE_SNAPSHOTS=true npx playwright test --config playwright/playwright.config.ts --update-snapshots",
     "playwright:docker": "sh ./playwright/playwright-docker.sh",
     "playwright:docker:windows": "sh ./playwright/playwright-docker-windows.sh",
     "dev": "run-s build _dev:watch",
@@ -78,6 +79,7 @@
     "@gravity-ui/uikit": "^6.2.0",
     "@popperjs/core": "^2.11.2",
     "bem-cn-lite": "4.1.0",
+    "clsx": "^2.1.1",
     "hoist-non-react-statics": "^3.3.2",
     "i18next": "^24.2.2",
     "isomorphic-dompurify": "^2.20.0",

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

@@ -1,59 +0,0 @@
-import React, { HTMLProps, ReactElement } from 'react';
-import { Router } from '../../models';
-import { InnerProps } from '../../utils';
-interface ScrollspyDefaultProps {
-    currentClassName: string;
-    overflowedClassName: string;
-    sectionOffset: number;
-    headerHeight: number;
-}
-export interface ScrollspyProps extends Partial<ScrollspyDefaultProps>, Partial<HTMLProps<HTMLUListElement>> {
-    items: string[];
-    children: ReactElement[];
-    router: Router;
-    onSectionClick?: (event: MouseEvent) => void;
-    className?: string;
-    overflowedClassName?: string;
-    scrollToListItem?: boolean;
-    /** Is used to identify items for {@link onActiveItemTitleChange} */
-    titles?: string[];
-    /** Is called with active item's corresponding value in {@link titles}, if one exists */
-    onActiveItemTitleChange?: (title: string) => void;
-}
-interface ScrollspyState {
-    targetItems: HTMLElement[];
-    inViewState: boolean[];
-}
-type ScrollspyInnerProps = InnerProps<ScrollspyProps, ScrollspyDefaultProps>;
-export declare class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspyState> {
-    static defaultProps: ScrollspyDefaultProps;
-    containerRef: React.RefObject<HTMLUListElement>;
-    itemRefs: React.RefObject<HTMLDivElement>[];
-    scrollByClick: boolean;
-    prevOffset: number;
-    hasActiveHash: boolean;
-    firstItemIndexInView: number;
-    lastItemIndexInView: number;
-    overflowChecked: boolean;
-    constructor(props: ScrollspyInnerProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<ScrollspyProps>, prevState: Readonly<ScrollspyState>): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    private updateFirstItemIndexInView;
-    private getContainerValues;
-    private updateScrollValues;
-    private syncScroll;
-    private scrollToListItem;
-    private initItems;
-    private initSections;
-    private saveActiveItems;
-    private getViewState;
-    private getActiveItemTitle;
-    private handleScroll;
-    private handleScrollDebounced;
-    private pauseScrollHandler;
-    private handleSectionClick;
-    private checkListOverflow;
-}
-export {};

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

@@ -1,337 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-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);
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-// 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_debounce = __toESM(require("lodash/debounce"));
-var import_isEqual = __toESM(require("lodash/isEqual"));
-var import_scroll_into_view_if_needed = __toESM(require("scroll-into-view-if-needed"));
-var Scrollspy = class extends import_react.default.Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "containerRef", import_react.default.createRef());
-    __publicField(this, "itemRefs", this.props.items.map(() => import_react.default.createRef()));
-    __publicField(this, "scrollByClick");
-    __publicField(this, "prevOffset");
-    __publicField(this, "hasActiveHash");
-    __publicField(this, "firstItemIndexInView");
-    __publicField(this, "lastItemIndexInView");
-    __publicField(this, "overflowChecked");
-    __publicField(this, "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);
-    });
-    __publicField(this, "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"
-        });
-      }
-    });
-    __publicField(this, "initSections", () => {
-      this.saveActiveItems();
-    });
-    __publicField(this, "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
-    __publicField(this, "handleScrollDebounced", (0, import_debounce.default)(this.handleScroll, 100));
-    __publicField(this, "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);
-        }
-      }
-    });
-    __publicField(this, "checkListOverflow", () => {
-      var _a, _b, _c;
-      const { containerRef, itemRefs } = this;
-      const { overflowedClassName } = this.props;
-      const containerHeight = (_b = (_a = containerRef.current) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
-      const itemsHeight = itemRefs.reduce(
-        (heightSum, item) => {
-          var _a2, _b2;
-          return heightSum + ((_b2 = (_a2 = item.current) == null ? void 0 : _a2.offsetHeight) != null ? _b2 : 0);
-        },
-        0
-      );
-      if (containerHeight < itemsHeight) {
-        (_c = containerRef.current) == null ? void 0 : _c.classList.add(overflowedClassName);
-      }
-    });
-    this.state = {
-      targetItems: [],
-      inViewState: []
-    };
-    this.overflowChecked = false;
-    this.scrollByClick = false;
-    this.prevOffset = 0;
-    this.hasActiveHash = 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);
-    }
-    this.checkListOverflow();
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const { items, router } = this.props;
-    const { inViewState } = this.state;
-    if (!(0, import_isEqual.default)(inViewState, prevState.inViewState)) {
-      this.scrollToListItem();
-    }
-    if (!(0, import_isEqual.default)(items, prevProps.items) || prevProps.router.pathname !== router.pathname) {
-      this.initItems();
-    }
-    if (!this.overflowChecked) {
-      this.overflowChecked = true;
-      this.checkListOverflow();
-    }
-    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 _a = this.props, { children, currentClassName, className } = _a, rest = __objRest(_a, ["children", "currentClassName", "className"]);
-    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],
-          "aria-current": inViewState[index] ? "location" : void 0
-        },
-        child.props.children
-      );
-    });
-    return /* @__PURE__ */ import_react.default.createElement("ul", __spreadValues({ className, ref: this.containerRef }, rest), 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 };
-  }
-  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;
-    }
-  }
-  initItems() {
-    const { items } = this.props;
-    const targetItems = items.map((item) => document.getElementById(item.split("#")[1])).filter(Boolean);
-    this.setState({ targetItems }, this.initSections);
-    this.scrollToListItem();
-  }
-  saveActiveItems(hash) {
-    const { titles, onActiveItemTitleChange } = this.props;
-    const visibleItems = this.getViewState(hash);
-    const activeItemTitle = this.getActiveItemTitle(titles, visibleItems);
-    if (activeItemTitle && onActiveItemTitleChange) {
-      onActiveItemTitleChange(activeItemTitle);
-    }
-    this.setState({ inViewState: visibleItems });
-  }
-  getViewState(hash) {
-    const { targetItems, inViewState } = this.state;
-    const { headerHeight } = this.props;
-    const currentOffset = window.pageYOffset;
-    const isScrollUp = currentOffset < this.prevOffset;
-    this.prevOffset = currentOffset;
-    const pureHash = (hash == null ? void 0 : hash.startsWith("#")) ? hash.substring(1) : hash;
-    let newActiveIndex;
-    if (pureHash) {
-      newActiveIndex = targetItems.findIndex(
-        (item) => item && item.getAttribute("id") === pureHash
-      );
-    } else {
-      newActiveIndex = targetItems.reduce((res, item, index) => {
-        if (!item) {
-          return res;
-        }
-        const isScrolledPast = item.getBoundingClientRect().top < headerHeight + 1;
-        return isScrolledPast ? index : res;
-      }, -1);
-    }
-    if (targetItems.length && newActiveIndex === -1) {
-      newActiveIndex = 0;
-    }
-    if (newActiveIndex === -1) {
-      return inViewState;
-    }
-    const prevActiveIndex = inViewState.findIndex(Boolean);
-    const getNewInViewState = () => {
-      if (newActiveIndex === prevActiveIndex) {
-        return inViewState;
-      }
-      const result = new Array(targetItems.length).fill(false);
-      result[newActiveIndex] = true;
-      return result;
-    };
-    if (pureHash) {
-      this.hasActiveHash = true;
-      return getNewInViewState();
-    }
-    if (this.hasActiveHash) {
-      if (isScrollUp || newActiveIndex > prevActiveIndex) {
-        this.hasActiveHash = false;
-        return getNewInViewState();
-      }
-      return inViewState;
-    }
-    return getNewInViewState();
-  }
-  getActiveItemTitle(titles, inViewState) {
-    var _a;
-    const activeIndex = inViewState.findIndex(Boolean);
-    return (_a = titles == null ? void 0 : titles[activeIndex]) != null ? _a : null;
-  }
-  pauseScrollHandler() {
-    this.scrollByClick = true;
-    window.removeEventListener("scroll", this.handleScroll);
-    window.addEventListener("scroll", this.handleScrollDebounced);
-  }
-};
-__publicField(Scrollspy, "defaultProps", {
-  currentClassName: "Scrollspy",
-  overflowedClassName: "Overflowed",
-  sectionOffset: 20,
-  headerHeight: 0
-});
-//# sourceMappingURL=Scrollspy.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/Scrollspy/Scrollspy.tsx"],
-  "sourcesContent": ["import React, {HTMLProps, ReactElement} from 'react';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport scrollIntoView from 'scroll-into-view-if-needed';\n\nimport {Router} from '../../models';\nimport {InnerProps} from '../../utils';\n\ninterface ScrollspyDefaultProps {\n    currentClassName: string;\n    overflowedClassName: string;\n    sectionOffset: number;\n    headerHeight: number;\n}\n\nexport interface ScrollspyProps\n    extends Partial<ScrollspyDefaultProps>,\n        Partial<HTMLProps<HTMLUListElement>> {\n    items: string[];\n    children: ReactElement[];\n    router: Router;\n    onSectionClick?: (event: MouseEvent) => void;\n    className?: string;\n    overflowedClassName?: string;\n    scrollToListItem?: boolean;\n    /** Is used to identify items for {@link onActiveItemTitleChange} */\n    titles?: string[];\n    /** Is called with active item's corresponding value in {@link titles}, if one exists */\n    onActiveItemTitleChange?: (title: string) => void;\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        overflowedClassName: 'Overflowed',\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    prevOffset: number;\n    hasActiveHash: boolean;\n    firstItemIndexInView: number;\n    lastItemIndexInView: number;\n    overflowChecked: boolean;\n\n    constructor(props: ScrollspyInnerProps) {\n        super(props);\n\n        this.state = {\n            targetItems: [],\n            inViewState: [],\n        };\n\n        this.overflowChecked = false;\n        this.scrollByClick = false;\n        this.prevOffset = 0;\n        this.hasActiveHash = 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        this.checkListOverflow();\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 (!this.overflowChecked) {\n            this.overflowChecked = true;\n\n            this.checkListOverflow();\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, ...rest} = 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                    aria-current={inViewState[index] ? 'location' : undefined}\n                >\n                    {child.props.children}\n                </ChildTag>\n            );\n        });\n\n        return (\n            <ul className={className} ref={this.containerRef} {...rest}>\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.split('#')[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 {titles, onActiveItemTitleChange} = this.props;\n\n        const visibleItems = this.getViewState(hash);\n        const activeItemTitle = this.getActiveItemTitle(titles, visibleItems);\n\n        if (activeItemTitle && onActiveItemTitleChange) {\n            onActiveItemTitleChange(activeItemTitle);\n        }\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\n        const isScrollUp = currentOffset < this.prevOffset;\n        this.prevOffset = currentOffset;\n\n        const pureHash = hash?.startsWith('#') ? hash.substring(1) : hash;\n\n        let newActiveIndex: number;\n        if (pureHash) {\n            newActiveIndex = targetItems.findIndex(\n                (item) => item && item.getAttribute('id') === pureHash,\n            );\n        } else {\n            newActiveIndex = targetItems.reduce<number>((res, item, index) => {\n                if (!item) {\n                    return res;\n                }\n\n                const isScrolledPast = item.getBoundingClientRect().top < headerHeight + 1;\n                return isScrolledPast ? index : res;\n            }, -1);\n        }\n\n        if (targetItems.length && newActiveIndex === -1) {\n            newActiveIndex = 0;\n        }\n\n        if (newActiveIndex === -1) {\n            return inViewState;\n        }\n\n        const prevActiveIndex = inViewState.findIndex(Boolean);\n        const getNewInViewState = () => {\n            if (newActiveIndex === prevActiveIndex) {\n                return inViewState;\n            }\n            const result = new Array<boolean>(targetItems.length).fill(false);\n            result[newActiveIndex] = true;\n            return result;\n        };\n\n        if (pureHash) {\n            this.hasActiveHash = true;\n            return getNewInViewState();\n        }\n\n        // not changing active item until scroll up or the next item becomes active\n        if (this.hasActiveHash) {\n            if (isScrollUp || newActiveIndex > prevActiveIndex) {\n                this.hasActiveHash = false;\n                return getNewInViewState();\n            }\n            return inViewState;\n        }\n\n        return getNewInViewState();\n    }\n\n    private getActiveItemTitle(titles: string[] | undefined, inViewState: boolean[]) {\n        const activeIndex = inViewState.findIndex(Boolean);\n        return titles?.[activeIndex] ?? null;\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    private checkListOverflow = () => {\n        const {containerRef, itemRefs} = this;\n        const {overflowedClassName} = this.props;\n\n        const containerHeight = containerRef.current?.offsetHeight ?? 0;\n        const itemsHeight = itemRefs.reduce(\n            (heightSum, item) => heightSum + (item.current?.offsetHeight ?? 0),\n            0,\n        );\n\n        if (containerHeight < itemsHeight) {\n            containerRef.current?.classList.add(overflowedClassName);\n        }\n    };\n}\n"],
-  "mappings": "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",
-  "names": ["React", "scrollIntoView", "debounce", "_a", "_b", "isEqual"]
-}

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

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

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

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

package/build/esm/components/Scrollspy/Scrollspy.d.ts

@@ -1,59 +0,0 @@
-import React, { HTMLProps, ReactElement } from 'react';
-import { Router } from '../../models';
-import { InnerProps } from '../../utils';
-interface ScrollspyDefaultProps {
-    currentClassName: string;
-    overflowedClassName: string;
-    sectionOffset: number;
-    headerHeight: number;
-}
-export interface ScrollspyProps extends Partial<ScrollspyDefaultProps>, Partial<HTMLProps<HTMLUListElement>> {
-    items: string[];
-    children: ReactElement[];
-    router: Router;
-    onSectionClick?: (event: MouseEvent) => void;
-    className?: string;
-    overflowedClassName?: string;
-    scrollToListItem?: boolean;
-    /** Is used to identify items for {@link onActiveItemTitleChange} */
-    titles?: string[];
-    /** Is called with active item's corresponding value in {@link titles}, if one exists */
-    onActiveItemTitleChange?: (title: string) => void;
-}
-interface ScrollspyState {
-    targetItems: HTMLElement[];
-    inViewState: boolean[];
-}
-type ScrollspyInnerProps = InnerProps<ScrollspyProps, ScrollspyDefaultProps>;
-export declare class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspyState> {
-    static defaultProps: ScrollspyDefaultProps;
-    containerRef: React.RefObject<HTMLUListElement>;
-    itemRefs: React.RefObject<HTMLDivElement>[];
-    scrollByClick: boolean;
-    prevOffset: number;
-    hasActiveHash: boolean;
-    firstItemIndexInView: number;
-    lastItemIndexInView: number;
-    overflowChecked: boolean;
-    constructor(props: ScrollspyInnerProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<ScrollspyProps>, prevState: Readonly<ScrollspyState>): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    private updateFirstItemIndexInView;
-    private getContainerValues;
-    private updateScrollValues;
-    private syncScroll;
-    private scrollToListItem;
-    private initItems;
-    private initSections;
-    private saveActiveItems;
-    private getViewState;
-    private getActiveItemTitle;
-    private handleScroll;
-    private handleScrollDebounced;
-    private pauseScrollHandler;
-    private handleSectionClick;
-    private checkListOverflow;
-}
-export {};