intelicoreact 1.5.38 → 1.5.41

package/dist/Atomic/UI/NavLine/NavLine.js

@@ -1,317 +1,284 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _reactfeather = /*#__PURE__*/ _interop_require_wildcard(require("react-feather"));
-const _reactrouterdom = require("react-router-dom");
-const _indexconstants = require("../../../Constants/index.constants");
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var Icons = _interopRequireWildcard(require("react-feather"));
+var _reactRouterDom = require("react-router-dom");
+var _index = require("../../../Constants/index.constants");
 require("./NavLine.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const checkedRef = ref => ref ? typeof ref === "function" ? node => ref(node) : ref : null;
+const NavLine = _ref => {
+  let {
+    root,
+    activeTab,
+    variant,
+    onChange,
+    className,
+    items,
+    children,
+    isLocal,
+    mode,
+    isNavigateByKeys,
+    isTabLoading,
+    scrollMode = false
+  } = _ref;
+  const [navLineItems, setNavLineItems] = (0, _react.useState)([]);
+  const wrapperRef = (0, _react.useRef)(null);
+  const wrapperInnerRef = (0, _react.useRef)(null);
+  const [wrapperRefWidth, setWrapperRefWidth] = (0, _react.useState)(0);
+  const [totalScrolledItems, setTotalScrolledItems] = (0, _react.useState)(0);
+  const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
+  const [navLineItemsTotalWidth, setNavLineItemsTotalWidth] = (0, _react.useState)(0);
+  const [navLineFirstItemOffset, setNavLineFirstItemOffset] = (0, _react.useState)(0);
+  const [scrollQueue, setScrollQueue] = (0, _react.useState)([]);
+  const popScrollTask = () => {
+    if (!scrollQueue.length) return null;
+    const [task, ...rest] = scrollQueue;
+    setScrollQueue(rest);
+    return task;
+  };
+  const pushScrollTask = task => setScrollQueue(queue => [...queue, task]);
+  (0, _react.useEffect)(() => {
+    const task = popScrollTask();
+    if (scrollQueue.length && task) {
+      switch (task) {
+        case "next":
+          scrollToNextItem();
+          break;
+        case "prev":
+          scrollToPrevItem();
+          break;
+        default:
+          break;
+      }
     }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
+  }, [scrollQueue]);
+  const [isScrollBlocked, setScrollBlocked] = (0, _react.useState)(false);
+  const getVisibleNavLineItems = () => {
+    const wrapperInner = wrapperInnerRef?.current;
+    const wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    return navLineItems?.filter(item => {
+      const {
+        ref,
+        label
+      } = item;
+      const element = ref?.current;
+      if (!element) return false;
+      const {
+        x
+      } = element.getBoundingClientRect();
+      return x - wrapperInnerProps.x >= 0 && x - wrapperInnerProps.x <= wrapperRefWidth;
+    });
+  };
+  const getUnvisibleLeftSideNavLineItems = () => {
+    const wrapperInner = wrapperInnerRef?.current;
+    const wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    return navLineItems?.filter(item => {
+      const {
+        ref,
+        label
+      } = item;
+      const element = ref?.current;
+      if (!element) return false;
+      const {
+        x
+      } = element.getBoundingClientRect();
+      return x - wrapperInnerProps.x <= 0;
+    });
+  };
+  const scroll = function () {
+    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    if (isScrollBlocked) return false;
+    setScrollBlocked(true);
+    const wrapperInner = wrapperInnerRef?.current;
+    const wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    const leftOffset = wrapperInner.scrollLeft;
+    wrapperInner?.addEventListener("scroll", () => {
+      setTotalScrolledItems(state => offset > 0 ? ++state : --state);
+      setScrollLeft(leftOffset + offset < 0 ? 0 : leftOffset + offset);
+      setTimeout(() => setScrollBlocked(false), 50);
+    }, {
+      once: true
+    });
+    wrapperInner?.scrollBy({
+      left: offset,
+      behavior: "smooth"
+    });
+  };
+  const scrollToPrevItem = () => {
+    if (isScrollBlocked) return false;
+
+    // const wrapperInner = wrapperInnerRef?.current;
+    // const navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
+    // const [prevItem, secondPrevItem] = navLineUnvisibleItems.reverse();
+    // const wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    // const prevItemProps = prevItem?.ref?.current?.getBoundingClientRect();
+
+    // let scrollOffset = prevItemProps?.x - wrapperInnerProps?.x;
+
+    const scrollOffset = -100;
+    scroll(scrollOffset);
+  };
+  const scrollToNextItem = () => {
+    // const wrapperInner = wrapperInnerRef?.current;
+    // const navLineVisibleItems = getVisibleNavLineItems();
+    // const [firstVisibleItem, secondVisibleItem] = navLineVisibleItems;
+    // const wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    // const firstVisibleItemProps = firstVisibleItem?.ref?.current?.getBoundingClientRect();
+    // const secondVisibleItemProps = secondVisibleItem?.ref?.current?.getBoundingClientRect();
+
+    // const scrollOffset = secondVisibleItemProps.x-wrapperInnerProps.x;
+
+    const scrollOffset = 100;
+    scroll(scrollOffset);
+  };
+  const onWheel = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const {
+      deltaY,
+      shiftKey
+    } = e;
+    if (shiftKey) {
+      if (deltaY > 0) pushScrollTask("next");else pushScrollTask("prev");
     }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
+  };
+  const onTabChange = item => {
+    onChange(item.tabId);
+  };
+  const navigateByKeys = event => {
+    const activeTabIndex = items?.indexOf(items?.find(tab => tab.tabId === activeTab));
+    const nextTabID = items[activeTabIndex + 1]?.tabId;
+    const prevTabID = items[activeTabIndex - 1]?.tabId;
+    if (event.keyCode === _index.KEYBOARD_KEY_CODES.ARROW_RIGHT && !event.repeat && nextTabID) {
+      onChange(nextTabID);
+    } else if (event.keyCode === _index.KEYBOARD_KEY_CODES.ARROW_LEFT && !event.repeat && prevTabID) {
+      onChange(prevTabID);
     }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
+  };
+  (0, _react.useEffect)(() => {
+    if (isNavigateByKeys && !isTabLoading) {
+      document.addEventListener("keydown", navigateByKeys);
+      return () => document.removeEventListener("keydown", navigateByKeys);
     }
-    return newObj;
-}
-const CN = 'nav-line';
-/**
- * Проверяет и нормализует ref
- * @param ref - React ref объект или функция обратного вызова
- * @returns Нормализованный ref или null
- */ function checkedRef(ref) {
-    if (!ref) return null;
-    return typeof ref === 'function' ? (node)=>ref(node) : ref;
-}
-const NavLine = ({ root = '', activeTab, variant, onChange, className, items, children, isLocal = false, mode, isNavigateByKeys, isTabLoading, scrollMode = false, testId = CN })=>{
-    const [navLineItems, setNavLineItems] = (0, _react.useState)([]);
-    const wrapperRef = (0, _react.useRef)(null);
-    const wrapperInnerRef = (0, _react.useRef)(null);
-    const [showScrollButtons, setShowScrollButtons] = (0, _react.useState)(false);
-    const [canScrollLeft, setCanScrollLeft] = (0, _react.useState)(false);
-    const [canScrollRight, setCanScrollRight] = (0, _react.useState)(false);
-    const [isScrollBlocked, setIsScrollBlocked] = (0, _react.useState)(false);
-    const checkScroll = (0, _react.useCallback)(()=>{
-        const inner = wrapperInnerRef.current;
-        if (!inner) return;
-        const hasOverflow = inner.scrollWidth > inner.clientWidth;
-        const canScrollLeft = inner.scrollLeft > 0;
-        const canScrollRight = inner.scrollLeft < inner.scrollWidth - inner.clientWidth;
-        setShowScrollButtons(hasOverflow);
-        setCanScrollLeft(canScrollLeft);
-        setCanScrollRight(canScrollRight);
-    }, []);
-    const scroll = (0, _react.useCallback)((direction)=>{
-        if (isScrollBlocked || !wrapperInnerRef.current) return;
-        setIsScrollBlocked(true);
-        const scrollAmount = 100;
-        const offset = direction === 'left' ? -scrollAmount : scrollAmount;
-        try {
-            wrapperInnerRef.current.scrollBy({
-                left: offset,
-                behavior: 'smooth'
-            });
-        } catch (error) {
-            console.error('scrollBy is not supported', error);
-            // Fallback для браузеров, не поддерживающих scrollBy
-            if (wrapperInnerRef.current) {
-                wrapperInnerRef.current.scrollLeft += offset;
-            }
-        }
-        setTimeout(()=>{
-            setIsScrollBlocked(false);
-            checkScroll();
-        }, 300);
-    }, [
-        isScrollBlocked,
-        checkScroll
-    ]);
-    const handleWheel = (0, _react.useCallback)((e)=>{
-        if (!scrollMode) return;
-        e.preventDefault();
-        if (e.deltaY > 0) {
-            scroll('right');
-        } else {
-            scroll('left');
-        }
-    }, [
-        scroll,
-        scrollMode
-    ]);
-    const onTabChange = (0, _react.useCallback)((item)=>{
-        if (!item.disabled && !(mode === 'create' && item.tabId !== 'general')) {
-            onChange(item.tabId);
-        }
-    }, [
-        mode,
-        onChange
-    ]);
-    const navigateByKeys = (0, _react.useCallback)((event)=>{
-        var _items_, _items_1;
-        if (event.repeat) return;
-        const activeTabIndex = items.findIndex((tab)=>tab.tabId === activeTab);
-        const nextTabID = (_items_ = items[activeTabIndex + 1]) === null || _items_ === void 0 ? void 0 : _items_.tabId;
-        const prevTabID = (_items_1 = items[activeTabIndex - 1]) === null || _items_1 === void 0 ? void 0 : _items_1.tabId;
-        if (event.keyCode === _indexconstants.KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) {
-            onChange(nextTabID);
-        } else if (event.keyCode === _indexconstants.KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) {
-            onChange(prevTabID);
-        }
-    }, [
-        activeTab,
-        items,
-        onChange
-    ]);
-    // Инициализация табов с ref
-    (0, _react.useEffect)(()=>{
-        setNavLineItems(items.map((item)=>({
-                ...item,
-                ref: /*#__PURE__*/ (0, _react.createRef)()
-            })));
-    }, [
-        items
-    ]);
-    // Обработка клавиатурной навигации
-    (0, _react.useEffect)(()=>{
-        if (isNavigateByKeys && !isTabLoading) {
-            document.addEventListener('keydown', navigateByKeys);
-        }
-        return ()=>document.removeEventListener('keydown', navigateByKeys);
-    }, [
-        isNavigateByKeys,
-        isTabLoading,
-        navigateByKeys
-    ]);
-    // Настройка скролла
-    (0, _react.useEffect)(()=>{
-        if (!scrollMode) return;
-        const inner = wrapperInnerRef.current;
-        if (!inner) return;
-        const resizeObserver = new ResizeObserver(checkScroll);
-        resizeObserver.observe(inner);
-        inner.addEventListener('scroll', checkScroll);
-        inner.addEventListener('wheel', handleWheel, {
-            passive: false
-        });
-        checkScroll();
-        return ()=>{
-            resizeObserver.disconnect();
-            inner.removeEventListener('scroll', checkScroll);
-            inner.removeEventListener('wheel', handleWheel);
-        };
-    }, [
-        scrollMode,
-        checkScroll,
-        handleWheel
-    ]);
-    const renderNavItem = (item)=>{
-        const Icon = item.icon ? _reactfeather[item.icon] : null;
-        const isDisabled = item.disabled || mode === 'create' && item.tabId !== 'general';
-        const commonProps = {
-            'title': item.title,
-            'key': `tab__${item.tabId}`,
-            'className': (0, _classnames.default)({
-                'nav-line__item': !variant
-            }, {
-                'nav-line--simple__item': variant === 'simple'
-            }, {
-                active: activeTab === item.tabId
-            }, {
-                disabled: isDisabled
-            }, {
-                'nav-line__item--hidden': item.isHidden
-            }),
-            'role': 'tab',
-            'aria-selected': activeTab === item.tabId,
-            'aria-disabled': isDisabled,
-            'tabIndex': isDisabled ? -1 : 0
-        };
-        const content = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "nav-line__content",
-            children: [
-                Icon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "nav-line__item--icon",
-                    "aria-hidden": "true",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {})
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    className: (0, _classnames.default)({
-                        'nav-line__item--label': variant !== 'simple'
-                    }),
-                    children: item.label
-                }),
-                item.count !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                    className: "nav-line-count",
-                    "aria-label": `${item.count} items`,
-                    children: [
-                        "(",
-                        item.count,
-                        ")"
-                    ]
-                })
-            ]
-        });
-        if (isLocal) {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                ...commonProps,
-                ref: checkedRef(item.ref),
-                onClick: ()=>!isDisabled && onTabChange(item),
-                onKeyPress: (e)=>{
-                    if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-                        e.preventDefault();
-                        onTabChange(item);
-                    }
-                },
-                children: content
-            });
+  }, [activeTab, isTabLoading]);
+  (0, _react.useEffect)(() => {
+    if (wrapperRef?.current) wrapperRef?.current?.addEventListener("mousewheel", onWheel, {
+      passive: false
+    });
+  }, [wrapperRef]);
+
+  // Count Total NavLine Items Width
+  (0, _react.useEffect)(() => {
+    setNavLineItemsTotalWidth(() => {
+      return navLineItems.reduce((totalWidth, item) => {
+        const element = item?.ref?.current;
+        if (element) {
+          totalWidth += element?.getBoundingClientRect()?.width;
         }
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.NavLink, {
-            ...commonProps,
-            to: `${root}${(item === null || item === void 0 ? void 0 : item.linkChapter) || item.tabId}/`,
-            onClick: (e)=>{
-                if (isDisabled) {
-                    e.preventDefault();
-                }
-            },
-            children: content
-        });
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "nav-line-wrapper",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            "data-testid": testId,
-            className: (0, _classnames.default)({
-                [CN]: !variant
-            }, {
-                [`${CN}--simple`]: variant === 'simple'
-            }, {
-                [`${CN}--scroll-mode`]: scrollMode
-            }, className),
-            ref: wrapperRef,
-            children: [
-                scrollMode && showScrollButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                    type: "button",
-                    "data-testid": "nav-line-scroll-prev",
-                    className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
-                    onClick: ()=>scroll('left'),
-                    "aria-label": "Scroll previous",
-                    disabled: !canScrollLeft,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {})
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    ref: wrapperInnerRef,
-                    className: (0, _classnames.default)({
-                        'nav-line__inner': !variant
-                    }, {
-                        'nav-line--simple__inner': variant === 'simple'
-                    }),
-                    role: "tablist",
-                    "aria-orientation": "horizontal",
-                    children: navLineItems.map(renderNavItem)
-                }),
-                scrollMode && showScrollButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                    type: "button",
-                    "data-testid": "nav-line-scroll-next",
-                    className: "nav-line--simple__arrow nav-line--simple__arrow--next",
-                    onClick: ()=>scroll('right'),
-                    "aria-label": "Scroll next",
-                    disabled: !canScrollRight,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {})
-                }),
-                children && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "nav-line__body",
-                    role: "tabpanel",
-                    children: children
-                })
-            ]
-        })
+        return totalWidth;
+      }, 0);
     });
+    setNavLineFirstItemOffset(navLineItems[0]?.ref?.current?.getBoundingClientRect().x ?? 0);
+  }, [navLineItems?.length]);
+
+  // Count Wrapper Width
+  (0, _react.useEffect)(() => {
+    setWrapperRefWidth(wrapperRef?.current?.getBoundingClientRect()?.width ?? 0);
+  }, [wrapperRef]);
+
+  //Init NavLine Items
+  (0, _react.useEffect)(() => {
+    setNavLineItems(items.map(item => {
+      return {
+        ...item,
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      };
+    }));
+  }, [items]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)({
+      "nav-line": !variant
+    }, {
+      "nav-line--simple": variant === "simple"
+    }, {
+      "nav-line--scroll-mode": scrollMode
+    }, className),
+    ref: scrollMode ? wrapperRef : null
+  }, scrollMode && (totalScrolledItems > 0 || scrollLeft > 0) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
+    onClick: scrollToPrevItem
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${variant === "simple" ? "nav-line--simple__inner" : "nav-line__inner"}`,
+    ref: scrollMode ? wrapperInnerRef : null
+  }, navLineItems.map(item => {
+    const {
+      ref
+    } = item;
+    const Icon = Icons[item?.icon];
+    return isLocal ? /*#__PURE__*/_react.default.createElement("span", {
+      onClick: () => onTabChange(item),
+      key: `tab__${item.tabId}`,
+      className: (0, _classnames.default)({
+        "nav-line__item": !variant
+      }, {
+        "nav-line--simple__item": variant === "simple"
+      }, {
+        active: activeTab === item.tabId
+      }, {
+        disabled: item.disabled || mode === "create" && item.tabId !== "general"
+      }, {
+        "nav-line__item--hidden": item.isHidden
+      }),
+      ref: checkedRef(ref)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "j4"
+    }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "nav-line__item--icon"
+    }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)({
+        "nav-line__item--label": variant !== "simple"
+      })
+    }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "nav-line--count ml5"
+    }, "(", item.count || 0, ")") : null)) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, {
+      to: `${root}${item?.linkChapter || item.tabId}/`,
+      key: `tab__${item.tabId}`,
+      className: (0, _classnames.default)({
+        "nav-line__item": !variant
+      }, {
+        "nav-line--simple__item": variant === "simple"
+      }, {
+        active: activeTab === item.tabId
+      }, {
+        disabled: item.disabled || mode === "create" && item.tabId !== "general"
+      }, {
+        "nav-line__item--hidden": item.isHidden
+      }),
+      ref: checkedRef(ref)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "j4"
+    }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "nav-line__item--icon"
+    }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)({
+        "nav-line__item--label": variant !== "simple"
+      })
+    }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "nav-line--count ml5"
+    }, "(", item.count || 0, ")") : null));
+  })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && scrollLeft + wrapperRefWidth < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--next",
+    onClick: scrollToNextItem
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line__body"
+  }, children));
 };
-const _default = NavLine;
+var _default = exports.default = NavLine;