intelicoreact 2.0.18 → 2.0.20

package/dist/es/Atomic/UI/Modal/partials/_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_utils.js","names":[],"sources":["../../../../../../src/Atomic/UI/Modal/partials/_utils.ts"],"sourcesContent":["import type { ISuspendProcessing } from '../../../../Functions/useKeyPress/useKeyPress';\nimport type TWithEventManagementAsObj from '../../../../types/declaration/TWithEventManagementAsObj';\nimport type { IModalProps } from '../Modal.interface';\nimport type { ICustomEvent, ModalEventsInnerKeys } from './_constants';\n\nimport { isISuspendProcessing } from '../../../../Functions/useKeyPress/useKeyPress';\nimport { getIsOnlyAnObject } from '../../../../Functions/utils';\nimport { EVENTS } from './_constants';\n\n// ? Геттер объекта конфигурации для включения/выключения функционала управления ивентами\n// ? Гарантирует возврат структуры с ПОЛНЫМ набором возможных опций\nexport function getWithEventManagementStructure(\n  modalId: number | string | null | undefined,\n  withEventManagement?: IModalProps['withEventManagement'],\n): TWithEventManagementAsObj<'Modal', true> {\n  // ! Тут ДОЛЖНЫ БЫТЬ перечислены все варианты из типа TWithEventManagementAsObj<'Modal'> (БЕЗ пропсов ICommon)\n  // ! Именно поэтому типизация используется с isHard-опцией и через satisfies\n  const output = {\n    isWithSubmitAndCloseManagement: false,\n  } satisfies TWithEventManagementAsObj<'Modal', true>;\n\n  // ? Итерируемся по описанным вариантам\n  for (const key in output) {\n    // ? Если в модалку НЕ передан id, то система НЕ сможет работать корректно\n    if (!modalId) {\n      output[key as keyof typeof output] = false;\n    }\n    else {\n      // ? Приcваиваем значения пропам заданной структуры исходя из withEventManagement\n      // ?  - если withEventManagement объект, то это соответствующая пропа (если такая есть)\n      // ?  - либо это приведённое к логическому типу значение withEventManagement\n      output[key as keyof typeof output] = (\n        getIsOnlyAnObject(withEventManagement)\n          ? ((withEventManagement as TWithEventManagementAsObj<'Modal'>)[key as keyof TWithEventManagementAsObj<'Modal'>] ?? false)\n          : !!withEventManagement\n      );\n    }\n  }\n\n  return output;\n}\n\n// ? Геттер колбека для задиспатченных ивентов\n// ? (сделано через геттер чтобы не дублироваться для Modal и ModalHOC,\n// ? если пишется для одного места, то в гетере нет смысла, можно все писать в useEffect)\nexport function getOnKeyPress({\n  id: modalId,\n  onSubmit,\n  onClose,\n  suspendProcessing,\n}: {\n  id: number | string | null | undefined;\n  onSubmit?: () => unknown;\n  onClose?: () => unknown;\n  suspendProcessing?: ISuspendProcessing | null;\n}): ((ev: Event) => void) | null {\n  if (!modalId) return null;\n\n  return function onKeyPress(ev: Event): void {\n    // ? Приведение типизации\n    const customEvent = ev as CustomEvent;\n    // ? Достаем детали задиспатченного ивента\n    const { id: eventId, realEvent } = customEvent.detail || {};\n    // ? Достаем из справочника константную инфу об кастомном ивенте\n    const constantInfoAboutCustomEvent = (\n      Object.values(EVENTS).find(ev => ev.name === customEvent.type || ev.shortName === customEvent.type) || {}\n    ) as ICustomEvent<ModalEventsInnerKeys>;\n    // ? Выясняем ключ для системы suspendProcessing\n    const middlewareKey = constantInfoAboutCustomEvent.middlewareKey || 'incorrectKey';\n\n    const safelySuspendProcessing = (isISuspendProcessing(suspendProcessing) ? suspendProcessing : {}) as ISuspendProcessing;\n\n    // ? Делаем что-либо если\n    // ?    - если есть modalId (модалка идентифицирована)\n    // ?    - если есть eventId (при диспатче кастомного ивента на уровне проекта указали кому адресован ивент)\n    // ?    - если eventId === modalId (задиспатченый ивент предназначен этой модалке)\n    // ?    - если нет оснований приостановить обработку (есть колбек и его запуск вернул true, т.е. \"да, приостановить\")\n    if (modalId && eventId && eventId === modalId && !(safelySuspendProcessing[middlewareKey]?.(realEvent))) {\n      // ? В ev.type приходит ПОЛНОЕ имя ивента (так написан диспатчер)\n      switch (customEvent.type) {\n        case EVENTS.iGotAnEnterKeyPress.name: {\n          onSubmit?.();\n          break;\n        }\n        case EVENTS.iGotAnEscKeyPress.name: {\n          onClose?.();\n          break;\n        }\n        default: { break; }\n      }\n    }\n  };\n}\n\n// ? Диспатчер ивентов (для экспорта, для удобства и корректности диспатчей на местах)\n// ? eventName - определяет ивент, который вы хотите запустить\n// ? uniqueId - планируется что это будет ключ модалки (ключ ветки в ModalStore)\n// ? target - передавайте тоже самое, что/если прокидывали в пропу withEventManagement.listenersTarget\nexport function dispatchEventForModalManagement(\n  realEvent: globalThis.KeyboardEvent,\n  nameOfCustomEvent: string,\n  uniqueIdOfRecipient: number | string,\n  target?: HTMLElement | Document,\n): void {\n  const { repeat, altKey, ctrlKey, shiftKey, metaKey } = realEvent;\n  const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;\n\n  if (!repeat && isPressingWithoutAuxiliaryKeys) {\n    const event = Object.values(EVENTS).find(ev => ev.name === nameOfCustomEvent || ev.shortName === nameOfCustomEvent);\n    if (event && uniqueIdOfRecipient) {\n      (target ?? document).dispatchEvent(new CustomEvent(event.name, { ...event.options, detail: { id: uniqueIdOfRecipient, realEvent } }));\n    }\n  }\n}\n"],"mappings":";;;;AAWA,SAAgB,gCACd,SACA,qBAC0C;CAG1C,MAAM,SAAS,EACb,gCAAgC,MAClC;CAGA,KAAK,MAAM,OAAO,QAEhB,IAAI,CAAC,SACH,OAAO,OAA8B;MAMrC,OAAO,OACL,kBAAkB,mBAAmB,IAC/B,oBAA2D,QAAoD,QACjH,CAAC,CAAC;CAKZ,OAAO;AACT;AAKA,SAAgB,cAAc,EAC5B,IAAI,SACJ,UACA,SACA,qBAM+B;CAC/B,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,SAAS,WAAW,IAAiB;EAE1C,MAAM,cAAc;EAEpB,MAAM,EAAE,IAAI,SAAS,cAAc,YAAY,UAAU,CAAC;EAM1D,MAAM,iBAHJ,OAAO,OAAO,MAAM,CAAC,CAAC,MAAK,OAAM,GAAG,SAAS,YAAY,QAAQ,GAAG,cAAc,YAAY,IAAI,KAAK,CAAC,EAAA,CAGvD,iBAAiB;EAEpE,MAAM,0BAA2B,qBAAqB,iBAAiB,IAAI,oBAAoB,CAAC;EAOhG,IAAI,WAAW,WAAW,YAAY,WAAW,CAAE,wBAAwB,cAAc,GAAG,SAAS,GAEnG,QAAQ,YAAY,MAApB;GACE,KAAK,OAAO,oBAAoB;IAC9B,WAAW;IACX;GAEF,KAAK,OAAO,kBAAkB;IAC5B,UAAU;IACV;GAEF,SAAW;EACb;CAEJ;AACF;AAMA,SAAgB,gCACd,WACA,mBACA,qBACA,QACM;CACN,MAAM,EAAE,QAAQ,QAAQ,SAAS,UAAU,YAAY;CAGvD,IAAI,CAAC,UAFkC,CAAC,UAAU,CAAC,WAAW,CAAC,YAAY,CAAC,SAE7B;EAC7C,MAAM,QAAQ,OAAO,OAAO,MAAM,CAAC,CAAC,MAAK,OAAM,GAAG,SAAS,qBAAqB,GAAG,cAAc,iBAAiB;EAClH,IAAI,SAAS,qBACX,CAAC,UAAU,SAAA,CAAU,cAAc,IAAI,YAAY,MAAM,MAAM;GAAE,GAAG,MAAM;GAAS,QAAQ;IAAE,IAAI;IAAqB;GAAU;EAAE,CAAC,CAAC;CAExI;AACF"}

package/dist/es/Atomic/UI/Modal/partials/useMobileModal.js

@@ -0,0 +1,146 @@
+import useIsMobile from "../../../../Functions/useIsMobile/useIsMobile.js";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/UI/Modal/partials/useMobileModal.tsx
+var SCROLL_DIRECTION = {
+	UP: "up",
+	DOWN: "down"
+};
+function useMobileModal({ modalRef, withMobileLogic = false, withFixedFooter = false, isOpen = false }) {
+	const modalMobileContainerRef = useRef(null);
+	const modalMobileHeaderRef = useRef(null);
+	const modalMobileFooterRef = useRef(null);
+	const modalMobileBodyRef = useRef(null);
+	const { isMobile } = useIsMobile();
+	const [modalHeight, setModalHeight] = useState(0);
+	const [modalsLogic, setModalsLogic] = useState({
+		IS_HEADER_HIDDEN: false,
+		IS_HEADER_STICKY: false,
+		IS_FOOTER_HIDDEN: false,
+		IS_FOOTER_STICKY: withFixedFooter
+	});
+	const [modalsLogicProps, setModalsLogicProps] = useState({
+		headerHeight: 0,
+		footerHeight: 0
+	});
+	const [scrollDirection, setScrollDirection] = useState(SCROLL_DIRECTION.UP);
+	const [scrollTopPrev, setScrollTopPrev] = useState(0);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [scrollHeight, setScrollHeight] = useState(1);
+	const [, setContainerScrollHeight] = useState(1);
+	useLayoutEffect(() => {
+		const el = modalMobileContainerRef?.current;
+		if (!el) return void 0;
+		const handleContainerScroll = () => {
+			setScrollTop((scrollTop) => {
+				if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
+				return el.scrollTop;
+			});
+		};
+		el.addEventListener("scroll", handleContainerScroll);
+		return () => el.removeEventListener("scroll", handleContainerScroll);
+	}, [modalMobileContainerRef?.current]);
+	useEffect(() => {
+		setScrollDirection((prevScrollDirection) => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection);
+	}, [scrollTop, scrollTopPrev]);
+	useLayoutEffect(() => {
+		if (isOpen) {
+			const modalStyle = modalRef?.current ? modalRef?.current.style || window.getComputedStyle(modalRef?.current) : {};
+			const computedModalHeight = modalRef?.current ? modalHeight + Number.parseFloat(modalStyle?.marginTop || "0") : 0;
+			const windowHeight = document.documentElement.clientHeight || window.screen.availHeight || window.screen.height;
+			if (modalMobileContainerRef?.current) if (computedModalHeight <= windowHeight) {
+				modalMobileContainerRef.current.style.display = "flex";
+				modalMobileContainerRef.current.style.alignItems = "flex-end";
+			} else {
+				modalMobileContainerRef.current?.style?.removeProperty("display");
+				modalMobileContainerRef.current?.style?.removeProperty("align-items");
+			}
+		}
+	}, [
+		modalsLogicProps,
+		isOpen,
+		isMobile,
+		modalHeight
+	]);
+	useLayoutEffect(() => {
+		if (isMobile && isOpen) {
+			const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
+			if (newModalHeight && modalHeight !== newModalHeight) setModalHeight(newModalHeight);
+		}
+	});
+	useEffect(() => {
+		if (isMobile && withMobileLogic) {
+			const { footerHeight, headerHeight } = modalsLogicProps;
+			setModalsLogic((prevStickyLogic) => ({
+				IS_HEADER_HIDDEN: scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,
+				IS_HEADER_STICKY: scrollDirection === SCROLL_DIRECTION.UP && scrollTop !== 0 && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),
+				IS_FOOTER_HIDDEN: !withFixedFooter && (scrollDirection === SCROLL_DIRECTION.UP || scrollHeight === Math.round(scrollTop)),
+				IS_FOOTER_STICKY: withFixedFooter && scrollHeight > 1 || scrollDirection === SCROLL_DIRECTION.DOWN && (scrollHeight - Math.round(scrollTop) >= footerHeight || prevStickyLogic.IS_FOOTER_STICKY)
+			}));
+		}
+	}, [
+		scrollTop,
+		scrollHeight,
+		isMobile,
+		withMobileLogic,
+		scrollDirection,
+		modalsLogicProps,
+		modalHeight,
+		window.innerHeight
+	]);
+	useLayoutEffect(() => {
+		if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== void 0) setModalsLogicProps((state) => ({
+			...state,
+			headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height ?? 0
+		}));
+	}, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
+	useLayoutEffect(() => {
+		if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== void 0) setModalsLogicProps((state) => ({
+			...state,
+			footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height ?? 0
+		}));
+	}, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
+	useEffect(() => {
+		if (modalMobileContainerRef?.current) {
+			setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
+			setScrollHeight(modalMobileContainerRef?.current?.scrollHeight - window.innerHeight);
+		}
+	}, [
+		scrollTop,
+		modalMobileContainerRef?.current,
+		window.innerHeight
+	]);
+	useEffect(() => {
+		const handleWindowResize = () => {
+			setContainerScrollHeight((containerScrollHeight) => {
+				setScrollHeight(containerScrollHeight - window.innerHeight);
+				return containerScrollHeight;
+			});
+		};
+		window.addEventListener("resize", handleWindowResize);
+		return () => window.removeEventListener("resize", handleWindowResize);
+	}, []);
+	return {
+		modalMobileContainerRef,
+		modalMobileHeaderRef,
+		modalMobileBodyRef,
+		modalMobileFooterRef,
+		MODALS_LOGIC: modalsLogic,
+		SCROLL_DIRECTION,
+		scrollTop,
+		scrollHeight,
+		renderModal: useCallback((modal) => {
+			if (!isMobile || !withMobileLogic) return modal;
+			return /* @__PURE__ */ jsx("div", {
+				className: "modal-mobile-container",
+				ref: modalMobileContainerRef,
+				children: modal
+			});
+		}, [isMobile, withMobileLogic]),
+		isMobile
+	};
+}
+//#endregion
+export { useMobileModal as default };
+
+//# sourceMappingURL=useMobileModal.js.map

package/dist/es/Atomic/UI/Modal/partials/useMobileModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMobileModal.js","names":[],"sources":["../../../../../../src/Atomic/UI/Modal/partials/useMobileModal.tsx"],"sourcesContent":["import type { MutableRefObject, ReactNode } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport useIsMobile from '../../../../Functions/useIsMobile/useIsMobile';\n\ntype ScrollDirection = 'up' | 'down';\n\ninterface ModalsLogic {\n  IS_HEADER_HIDDEN: boolean;\n  IS_HEADER_STICKY: boolean;\n  IS_FOOTER_HIDDEN: boolean;\n  IS_FOOTER_STICKY: boolean;\n}\n\ninterface UseMobileModalProps {\n  modalRef?: React.RefObject<HTMLDivElement>;\n  withMobileLogic?: boolean;\n  withFixedFooter?: boolean;\n  isOpen?: boolean;\n}\n\ninterface UseMobileModalReturn {\n  modalMobileContainerRef: MutableRefObject<HTMLDivElement | null>;\n  modalMobileHeaderRef: MutableRefObject<HTMLDivElement | null>;\n  modalMobileBodyRef: MutableRefObject<HTMLDivElement | null>;\n  modalMobileFooterRef: MutableRefObject<HTMLDivElement | null>;\n  MODALS_LOGIC: ModalsLogic;\n  SCROLL_DIRECTION: { UP: ScrollDirection; DOWN: ScrollDirection };\n  scrollTop: number;\n  scrollHeight: number;\n  renderModal: (modal: ReactNode) => ReactNode;\n  isMobile: boolean;\n}\n\nconst SCROLL_DIRECTION = {\n  UP: 'up' as ScrollDirection,\n  DOWN: 'down' as ScrollDirection,\n};\n\nexport default function useMobileModal({\n  modalRef,\n  withMobileLogic = false,\n  withFixedFooter = false,\n  isOpen = false,\n}: UseMobileModalProps): UseMobileModalReturn {\n  const modalMobileContainerRef = useRef<HTMLDivElement>(null);\n  const modalMobileHeaderRef = useRef<HTMLDivElement>(null);\n  const modalMobileFooterRef = useRef<HTMLDivElement>(null);\n  const modalMobileBodyRef = useRef<HTMLDivElement>(null);\n\n  const { isMobile } = useIsMobile();\n\n  const [modalHeight, setModalHeight] = useState(0);\n  const [modalsLogic, setModalsLogic] = useState<ModalsLogic>({\n    IS_HEADER_HIDDEN: false,\n    IS_HEADER_STICKY: false,\n    IS_FOOTER_HIDDEN: false,\n    IS_FOOTER_STICKY: withFixedFooter,\n  });\n  const [modalsLogicProps, setModalsLogicProps] = useState({\n    headerHeight: 0,\n    footerHeight: 0,\n  });\n\n  const [scrollDirection, setScrollDirection] = useState(SCROLL_DIRECTION.UP);\n  const [scrollTopPrev, setScrollTopPrev] = useState(0);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [scrollHeight, setScrollHeight] = useState(1);\n  const [, setContainerScrollHeight] = useState(1);\n\n  /* MODALS LOGIC | BEGIN */\n  // Count ScrollTop\n  useLayoutEffect(() => {\n    const el = modalMobileContainerRef?.current;\n    if (!el) return undefined;\n    /*\n     * ? Именованный хендлер + cleanup обязательны: раньше на каждый прогон эффекта\n     * ? вешалась НОВАЯ анонимная подписка без снятия — дубли обработчиков скролла\n     * ? и ретейн замыканий после анмаунта (вклад в listener-утечку adminka 2026-07).\n     */\n    const handleContainerScroll = (): void => {\n      setScrollTop((scrollTop) => {\n        if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);\n        return el.scrollTop;\n      });\n    };\n    el.addEventListener('scroll', handleContainerScroll);\n    return () => el.removeEventListener('scroll', handleContainerScroll);\n  }, [modalMobileContainerRef?.current]);\n  // Count ScrollDirection\n  useEffect(() => {\n    setScrollDirection(prevScrollDirection =>\n      scrollTop < scrollTopPrev\n        ? SCROLL_DIRECTION.UP\n        : scrollTop > scrollTopPrev\n          ? SCROLL_DIRECTION.DOWN\n          : prevScrollDirection,\n    );\n  }, [scrollTop, scrollTopPrev]);\n  // Dynamic Modal Positioning\n  useLayoutEffect(() => {\n    if (isOpen) {\n      const modalStyle = modalRef?.current\n        ? modalRef?.current.style\n        || window.getComputedStyle(modalRef?.current)\n        : {} as CSSStyleDeclaration;\n      const computedModalHeight = modalRef?.current\n        ? modalHeight + Number.parseFloat(modalStyle?.marginTop || '0')\n        : 0;\n      const windowHeight\n        = document.documentElement.clientHeight\n          || window.screen.availHeight\n          || window.screen.height;\n      if (modalMobileContainerRef?.current) {\n        if (computedModalHeight <= windowHeight) {\n          modalMobileContainerRef.current.style.display = 'flex';\n          modalMobileContainerRef.current.style.alignItems = 'flex-end';\n        }\n        else {\n          modalMobileContainerRef.current?.style?.removeProperty('display');\n          modalMobileContainerRef.current?.style?.removeProperty('align-items');\n        }\n      }\n    }\n  }, [modalsLogicProps, isOpen, isMobile, modalHeight]);\n\n  // Calculating\n  useLayoutEffect(() => {\n    if (isMobile && isOpen) {\n      const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;\n      if (newModalHeight && modalHeight !== newModalHeight) {\n        setModalHeight(newModalHeight);\n      }\n    }\n  });\n  useEffect(() => {\n    if (isMobile && withMobileLogic) {\n      const { footerHeight, headerHeight } = modalsLogicProps;\n      setModalsLogic(prevStickyLogic => ({\n        IS_HEADER_HIDDEN:\n          scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,\n        IS_HEADER_STICKY:\n          scrollDirection === SCROLL_DIRECTION.UP\n          && scrollTop !== 0\n          && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),\n        IS_FOOTER_HIDDEN:\n          !withFixedFooter\n          && (scrollDirection === SCROLL_DIRECTION.UP\n            || scrollHeight === Math.round(scrollTop)),\n        IS_FOOTER_STICKY:\n          (withFixedFooter && scrollHeight > 1)\n          || (scrollDirection === SCROLL_DIRECTION.DOWN\n            && (scrollHeight - Math.round(scrollTop) >= footerHeight\n              || prevStickyLogic.IS_FOOTER_STICKY)),\n      }));\n    }\n  }, [\n    scrollTop,\n    scrollHeight,\n    isMobile,\n    withMobileLogic,\n    scrollDirection,\n    modalsLogicProps,\n    modalHeight,\n    window.innerHeight,\n  ]);\n  useLayoutEffect(() => {\n    if (\n      modalMobileHeaderRef?.current?.getBoundingClientRect()?.height\n      !== undefined\n    ) {\n      setModalsLogicProps(state => ({\n        ...state,\n        headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height ?? 0,\n      }));\n    }\n  }, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);\n  useLayoutEffect(() => {\n    if (\n      modalMobileFooterRef?.current?.getBoundingClientRect()?.height\n      !== undefined\n    ) {\n      setModalsLogicProps(state => ({\n        ...state,\n        footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height ?? 0,\n      }));\n    }\n  }, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);\n  useEffect(() => {\n    if (modalMobileContainerRef?.current) {\n      setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);\n      setScrollHeight(\n        modalMobileContainerRef?.current?.scrollHeight - window.innerHeight,\n      );\n    }\n  }, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);\n  useEffect(() => {\n    // ? Cleanup обязателен: анонимная resize-подписка на window жила после анмаунта\n    // ? модалки навсегда (по подписке на каждый показ модалки).\n    const handleWindowResize = (): void => {\n      setContainerScrollHeight((containerScrollHeight) => {\n        setScrollHeight(containerScrollHeight - window.innerHeight);\n        return containerScrollHeight;\n      });\n    };\n    window.addEventListener('resize', handleWindowResize);\n    return () => window.removeEventListener('resize', handleWindowResize);\n  }, []);\n  /* MODALS LOGIC | END */\n\n  const renderModal = useCallback(\n    (modal: ReactNode): ReactNode => {\n      if (!isMobile || !withMobileLogic) return modal;\n\n      return (\n        <div className=\"modal-mobile-container\" ref={modalMobileContainerRef}>\n          {modal}\n        </div>\n      );\n    },\n    [isMobile, withMobileLogic],\n  );\n\n  return {\n    modalMobileContainerRef,\n    modalMobileHeaderRef,\n    modalMobileBodyRef,\n    modalMobileFooterRef,\n    MODALS_LOGIC: modalsLogic,\n    SCROLL_DIRECTION,\n    scrollTop,\n    scrollHeight,\n    renderModal,\n    isMobile,\n  };\n}\n"],"mappings":"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"}

package/dist/es/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -0,0 +1,59 @@
+import '../../../styles/base.css';
+import './MonoAccordion.styles.css';/* empty css                   */
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/MonoAccordion/MonoAccordion.js
+var RC = "mono-accordion";
+var MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled, testId = "mono-accordion", datasetProp = {} }) => {
+	const [maxHeight, setMaxHeight] = useState();
+	const titleRef = useRef();
+	const containerRef = useRef();
+	const setHeight = (value) => {
+		if (value !== void 0) setMaxHeight((state) => `${value}px`);
+		else setMaxHeight((state) => `${Array.from(containerRef.current?.childNodes)?.reduce?.((acc, el) => acc + el.offsetHeight, 0)}px`);
+	};
+	const handleClick = (e) => {
+		if (!Array.from(titleRef.current.childNodes).some((el) => el.contains(e.target))) {
+			onClick(e);
+			e?.preventDefault();
+			e?.stopPropagation();
+		} else return e;
+	};
+	useEffect(() => {
+		if (!isOpen) setHeight(0);
+		else setHeight();
+	}, [isOpen, children]);
+	return /* @__PURE__ */ jsxs("div", {
+		...datasetProp,
+		"data-testid": testId,
+		className: cn(RC, className, {
+			[`${RC}_is-open`]: isOpen,
+			[`${RC}_disabled`]: disabled
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `${RC}__head`,
+			onClick: handleClick,
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: titleRef,
+				className: `${RC}__tile-container`,
+				children: titleJSX
+			}), /* @__PURE__ */ jsx("span", {
+				className: `${RC}__icon-container`,
+				children: icon
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			style: { maxHeight },
+			className: cn(`${RC}__container`),
+			children: /* @__PURE__ */ jsx("div", {
+				className: `${RC}__content-wrapper`,
+				children
+			})
+		})]
+	});
+};
+//#endregion
+export { MonoAccordion as default };
+
+//# sourceMappingURL=MonoAccordion.js.map

package/dist/es/Atomic/UI/MonoAccordion/MonoAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonoAccordion.js","names":[],"sources":["../../../../../src/Atomic/UI/MonoAccordion/MonoAccordion.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport cn from \"classnames\";\n\nimport \"./MonoAccordion.scss\";\n\nconst RC = \"mono-accordion\";\n\nconst MonoAccordion = ({\n  titleJSX,\n  icon,\n  children,\n  isOpen,\n  onClick,\n  className,\n  disabled,\n  testId = \"mono-accordion\",\n  datasetProp = {},\n}) => {\n  const [maxHeight, setMaxHeight] = useState();\n  const titleRef = useRef();\n  const containerRef = useRef();\n\n  const setHeight = (value) => {\n    if (value !== undefined) setMaxHeight((state) => `${value}px`);\n    else\n      setMaxHeight(\n        (state) =>\n          `${Array.from(containerRef.current?.childNodes)?.reduce?.((acc, el) => acc + el.offsetHeight, 0)}px`,\n      );\n  };\n\n  const handleClick = (e) => {\n    if (\n      !Array.from(titleRef.current.childNodes).some((el) =>\n        el.contains(e.target),\n      )\n    ) {\n      onClick(e);\n      e?.preventDefault();\n      e?.stopPropagation();\n    } else return e;\n  };\n\n  useEffect(() => {\n    if (!isOpen) setHeight(0);\n    else setHeight();\n  }, [isOpen, children]);\n\n  return (\n    <div\n      {...datasetProp}\n      data-testid={testId}\n      className={cn(RC, className, {\n        [`${RC}_is-open`]: isOpen,\n        [`${RC}_disabled`]: disabled,\n      })}\n    >\n      <div\n        className={`${RC}__head`}\n        onClick={handleClick}\n      >\n        <div ref={titleRef} className={`${RC}__tile-container`}>\n          {titleJSX}\n        </div>\n        <span className={`${RC}__icon-container`}>{icon}</span>\n      </div>\n\n      <div\n        ref={containerRef}\n        style={{ maxHeight }}\n        className={cn(`${RC}__container`)}\n      >\n        <div className={`${RC}__content-wrapper`}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default MonoAccordion;\n"],"mappings":";;;;;AAMA,IAAM,KAAK;AAEX,IAAM,iBAAiB,EACrB,UACA,MACA,UACA,QACA,SACA,WACA,UACA,SAAS,kBACT,cAAc,CAAC,QACX;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS;CAC3C,MAAM,WAAW,OAAO;CACxB,MAAM,eAAe,OAAO;CAE5B,MAAM,aAAa,UAAU;EAC3B,IAAI,UAAU,KAAA,GAAW,cAAc,UAAU,GAAG,MAAK,GAAI;OAE3D,cACG,UACC,GAAG,MAAM,KAAK,aAAa,SAAS,UAAU,CAAA,EAAG,UAAU,KAAK,OAAO,MAAM,GAAG,cAAc,CAAC,EAAC,GACpG;CACJ;CAEA,MAAM,eAAe,MAAM;EACzB,IACE,CAAC,MAAM,KAAK,SAAS,QAAQ,UAAU,CAAA,CAAE,MAAM,OAC7C,GAAG,SAAS,EAAE,MAAM,CACtB,GACA;GACA,QAAQ,CAAC;GACT,GAAG,eAAe;GAClB,GAAG,gBAAgB;EACrB,OAAO,OAAO;CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,QAAQ,UAAU,CAAC;OACnB,UAAU;CACjB,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,OACE,qBAAC,OAAA;EACE,GAAG;EACJ,eAAa;EACb,WAAW,GAAG,IAAI,WAAW;IAC1B,GAAG,GAAE,YAAa;IAClB,GAAG,GAAE,aAAc;EACtB,CAAC;EAED,UAAA,CAAA,qBAAC,OAAA;GACC,WAAW,GAAG,GAAE;GAChB,SAAS;GAET,UAAA,CAAA,oBAAC,OAAA;IAAI,KAAK;IAAU,WAAW,GAAG,GAAE;IACjC,UAAA;GAAA,CACH,GACA,oBAAC,QAAA;IAAK,WAAW,GAAG,GAAE;IAAqB,UAAA;GAAA,CAAK,CAAA;EAAA,CAClD,GAEA,oBAAC,OAAA;GACC,KAAK;GACL,OAAO,EAAE,UAAU;GACnB,WAAW,GAAG,GAAG,GAAE,YAAa;GAEhC,UAAA,oBAAC,OAAA;IAAI,WAAW,GAAG,GAAE;IAAsB;GAAA,CAAS;EAAA,CACtD,CAAA;CAAA,CACF;AAEJ"}

package/dist/es/Atomic/UI/MonoAccordion/MonoAccordion.styles.css

@@ -0,0 +1,110 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.mono-accordion {
+  height: fit-content;
+}
+.mono-accordion__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  padding: 10px 15px;
+  cursor: pointer;
+}
+.mono-accordion__head:hover {
+  background-color: #f8f8fa;
+}
+.mono-accordion__icon-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  height: 100%;
+}
+.mono-accordion__tile-container {
+  flex-grow: 1;
+}
+.mono-accordion__container {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  font-size: 13px;
+  transition: all 0.25s ease-out;
+}
+.mono-accordion__container scrollbar {
+  -moz-appearance: none !important;
+}
+.mono-accordion__container scrollbarbutton {
+  -moz-appearance: none !important;
+}
+.mono-accordion__container thumb {
+  -moz-appearance: none !important;
+}
+.mono-accordion__container scrollcorner {
+  -moz-appearance: none !important;
+  resize: both;
+}
+.mono-accordion__container::-webkit-scrollbar {
+  width: 8px;
+}
+.mono-accordion__container::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #52aeff;
+}
+.mono-accordion__container::-webkit-scrollbar-thumb:hover {
+  background: #3e62ff;
+}
+.mono-accordion__container::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.mono-accordion__container::-webkit-scrollbar-track:horizontal {
+  background: #F4F6FF;
+}
+.mono-accordion__container::-webkit-scrollbar-thumb:horizontal {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: #BAC2C9;
+  background-clip: padding-box;
+  border: 4px solid rgba(0, 0, 0, 0);
+}
+.mono-accordion__container::-webkit-scrollbar-thumb:horizontal:hover {
+  background: #9AA0B9;
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+}
+.mono-accordion__content-wrapper {
+  padding: 0 15px;
+}
+.mono-accordion_open .mono-accordion__container {
+  padding: 10px 15px;
+  transition: all 0.25s ease-out;
+}
+.mono-accordion_open .mono-accordion__content-wrapper {
+  pointer-events: initial;
+}
+.mono-accordion_disabled {
+  pointer-events: none;
+}

package/dist/es/Atomic/UI/MonoAccordion/index.js

@@ -0,0 +1,7 @@
+import MonoAccordion from "./MonoAccordion.js";
+//#region src/Atomic/UI/MonoAccordion/index.ts
+var MonoAccordion_default = MonoAccordion;
+//#endregion
+export { MonoAccordion_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/UI/MonoAccordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/MonoAccordion/index.ts"],"sourcesContent":["import MonoAccordion from './MonoAccordion';\n\nexport default MonoAccordion;\nexport type { IMonoAccordionProps } from './MonoAccordion.interface';\n"],"mappings":";;AAEA,IAAA,wBAAe"}

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

@@ -0,0 +1,209 @@
+import '../../../styles/base.css';
+import { KEYBOARD_KEY_CODES } from "../../../Constants/index.constants.js";
+import './NavLine.styles.css';/* empty css             */
+import cn from "classnames";
+import { createRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Icons from "react-feather";
+import { NavLink } from "react-router-dom";
+//#region src/Atomic/UI/NavLine/NavLine.tsx
+var 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;
+}
+var NavLine = ({ root = "", activeTab, variant, onChange, className, items, children, isLocal = false, mode, isNavigateByKeys, isTabLoading, scrollMode = false, testId = CN }) => {
+	const [navLineItems, setNavLineItems] = useState([]);
+	const wrapperRef = useRef(null);
+	const wrapperInnerRef = useRef(null);
+	const [showScrollButtons, setShowScrollButtons] = useState(false);
+	const [canScrollLeft, setCanScrollLeft] = useState(false);
+	const [canScrollRight, setCanScrollRight] = useState(false);
+	const [isScrollBlocked, setIsScrollBlocked] = useState(false);
+	const checkScroll = 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 = useCallback((direction) => {
+		if (isScrollBlocked || !wrapperInnerRef.current) return;
+		setIsScrollBlocked(true);
+		const offset = direction === "left" ? -100 : 100;
+		try {
+			wrapperInnerRef.current.scrollBy({
+				left: offset,
+				behavior: "smooth"
+			});
+		} catch (error) {
+			console.error("scrollBy is not supported", error);
+			if (wrapperInnerRef.current) wrapperInnerRef.current.scrollLeft += offset;
+		}
+		setTimeout(() => {
+			setIsScrollBlocked(false);
+			checkScroll();
+		}, 300);
+	}, [isScrollBlocked, checkScroll]);
+	const handleWheel = useCallback((e) => {
+		if (!scrollMode) return;
+		e.preventDefault();
+		if (e.deltaY > 0) scroll("right");
+		else scroll("left");
+	}, [scroll, scrollMode]);
+	const onTabChange = useCallback((item) => {
+		if (!item.disabled && !(mode === "create" && item.tabId !== "general")) onChange(item.tabId);
+	}, [mode, onChange]);
+	const navigateByKeys = useCallback((event) => {
+		if (event.repeat) return;
+		const activeTabIndex = items.findIndex((tab) => tab.tabId === activeTab);
+		const nextTabID = items[activeTabIndex + 1]?.tabId;
+		const prevTabID = items[activeTabIndex - 1]?.tabId;
+		if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) onChange(nextTabID);
+		else if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) onChange(prevTabID);
+	}, [
+		activeTab,
+		items,
+		onChange
+	]);
+	useEffect(() => {
+		setNavLineItems(items.map((item) => ({
+			...item,
+			ref: createRef()
+		})));
+	}, [items]);
+	useEffect(() => {
+		if (isNavigateByKeys && !isTabLoading) document.addEventListener("keydown", navigateByKeys);
+		return () => document.removeEventListener("keydown", navigateByKeys);
+	}, [
+		isNavigateByKeys,
+		isTabLoading,
+		navigateByKeys
+	]);
+	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 ? Icons[item.icon] : null;
+		const isDisabled = item.disabled || mode === "create" && item.tabId !== "general";
+		const commonProps = {
+			"title": item.title,
+			"className": cn({ "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__ */ jsxs("div", {
+			className: "nav-line__content",
+			children: [
+				Icon && /* @__PURE__ */ jsx("div", {
+					className: "nav-line__item--icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(Icon, {})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn({ "nav-line__item--label": variant !== "simple" }),
+					children: item.label
+				}),
+				item.count !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "nav-line-count",
+					"aria-label": `${item.count} items`,
+					children: [
+						"(",
+						item.count,
+						")"
+					]
+				})
+			]
+		});
+		if (isLocal) return /* @__PURE__ */ 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
+		}, `tab__${item.tabId}`);
+		return /* @__PURE__ */ jsx(NavLink, {
+			...commonProps,
+			to: `${root}${item?.linkChapter || item.tabId}/`,
+			onClick: (e) => {
+				if (isDisabled) e.preventDefault();
+			},
+			children: content
+		}, `tab__${item.tabId}`);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "nav-line-wrapper",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": testId,
+			className: cn({ [CN]: !variant }, { [`${CN}--simple`]: variant === "simple" }, { [`${CN}--scroll-mode`]: scrollMode }, className),
+			ref: wrapperRef,
+			children: [
+				scrollMode && showScrollButtons && /* @__PURE__ */ 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__ */ jsx(Icons.ChevronLeft, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: wrapperInnerRef,
+					className: cn({ "nav-line__inner": !variant }, { "nav-line--simple__inner": variant === "simple" }),
+					role: "tablist",
+					"aria-orientation": "horizontal",
+					children: navLineItems.map(renderNavItem)
+				}),
+				scrollMode && showScrollButtons && /* @__PURE__ */ 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__ */ jsx(Icons.ChevronRight, {})
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: "nav-line__body",
+					role: "tabpanel",
+					children
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { NavLine as default };
+
+//# sourceMappingURL=NavLine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavLine.js","names":[],"sources":["../../../../../src/Atomic/UI/NavLine/NavLine.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { HTMLElementOrAnchor, RefType } from '../../../types/base.types';\nimport type { INavLineItem, INavLineProps } from './NavLine.interface';\nimport cn from 'classnames';\nimport React, { createRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport * as Icons from 'react-feather';\n\nimport { NavLink } from 'react-router-dom';\n\nimport { KEYBOARD_KEY_CODES } from '../../../Constants/index.constants';\n\nimport './NavLine.scss';\n\nconst CN = 'nav-line';\n\n/**\n * Проверяет и нормализует ref\n * @param ref - React ref объект или функция обратного вызова\n * @returns Нормализованный ref или null\n */\nfunction checkedRef<T extends HTMLElementOrAnchor = HTMLElement>(ref: RefType<T>): RefType<T> {\n  if (!ref) return null;\n  return typeof ref === 'function' ? (node: T) => ref(node) : ref;\n}\n\nconst NavLine: React.FC<INavLineProps> = ({\n  root = '',\n  activeTab,\n  variant,\n  onChange,\n  className,\n  items,\n  children,\n  isLocal = false,\n  mode,\n  isNavigateByKeys,\n  isTabLoading,\n  scrollMode = false,\n  testId = CN,\n}) => {\n  const [navLineItems, setNavLineItems] = useState<\n    Array<INavLineItem & { ref: React.RefObject<HTMLElement> }>\n  >([]);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const wrapperInnerRef = useRef<HTMLDivElement>(null);\n  const [showScrollButtons, setShowScrollButtons] = useState(false);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const [isScrollBlocked, setIsScrollBlocked] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const inner = wrapperInnerRef.current;\n    if (!inner) return;\n\n    const hasOverflow = inner.scrollWidth > inner.clientWidth;\n    const canScrollLeft = inner.scrollLeft > 0;\n    const canScrollRight = inner.scrollLeft < inner.scrollWidth - inner.clientWidth;\n\n    setShowScrollButtons(hasOverflow);\n    setCanScrollLeft(canScrollLeft);\n    setCanScrollRight(canScrollRight);\n  }, []);\n\n  const scroll = useCallback(\n    (direction: 'left' | 'right') => {\n      if (isScrollBlocked || !wrapperInnerRef.current) return;\n\n      setIsScrollBlocked(true);\n      const scrollAmount = 100;\n      const offset = direction === 'left' ? -scrollAmount : scrollAmount;\n\n      try {\n        wrapperInnerRef.current.scrollBy({\n          left: offset,\n          behavior: 'smooth',\n        });\n      }\n      catch (error) {\n        console.error('scrollBy is not supported', error);\n        // Fallback для браузеров, не поддерживающих scrollBy\n        if (wrapperInnerRef.current) {\n          wrapperInnerRef.current.scrollLeft += offset;\n        }\n      }\n\n      setTimeout(() => {\n        setIsScrollBlocked(false);\n        checkScroll();\n      }, 300);\n    },\n    [isScrollBlocked, checkScroll],\n  );\n\n  const handleWheel = useCallback(\n    (e: WheelEvent) => {\n      if (!scrollMode) return;\n      e.preventDefault();\n\n      if (e.deltaY > 0) {\n        scroll('right');\n      }\n      else {\n        scroll('left');\n      }\n    },\n    [scroll, scrollMode],\n  );\n\n  const onTabChange = useCallback(\n    (item: INavLineItem) => {\n      if (!item.disabled && !(mode === 'create' && item.tabId !== 'general')) {\n        onChange(item.tabId);\n      }\n    },\n    [mode, onChange],\n  );\n\n  const navigateByKeys = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.repeat) return;\n\n      const activeTabIndex = items.findIndex(tab => tab.tabId === activeTab);\n      const nextTabID = items[activeTabIndex + 1]?.tabId;\n      const prevTabID = items[activeTabIndex - 1]?.tabId;\n\n      if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) {\n        onChange(nextTabID);\n      }\n      else if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) {\n        onChange(prevTabID);\n      }\n    },\n    [activeTab, items, onChange],\n  );\n\n  // Инициализация табов с ref\n  useEffect(() => {\n    setNavLineItems(\n      items.map(item => ({\n        ...item,\n        ref: createRef<HTMLElement>(),\n      })),\n    );\n  }, [items]);\n\n  // Обработка клавиатурной навигации\n  useEffect(() => {\n    if (isNavigateByKeys && !isTabLoading) {\n      document.addEventListener('keydown', navigateByKeys);\n    }\n\n    return () => document.removeEventListener('keydown', navigateByKeys);\n  }, [isNavigateByKeys, isTabLoading, navigateByKeys]);\n\n  // Настройка скролла\n  useEffect(() => {\n    if (!scrollMode) return;\n\n    const inner = wrapperInnerRef.current;\n    if (!inner) return;\n\n    const resizeObserver = new ResizeObserver(checkScroll);\n    resizeObserver.observe(inner);\n\n    inner.addEventListener('scroll', checkScroll);\n    inner.addEventListener('wheel', handleWheel, { passive: false });\n\n    checkScroll();\n\n    return () => {\n      resizeObserver.disconnect();\n      inner.removeEventListener('scroll', checkScroll);\n      inner.removeEventListener('wheel', handleWheel);\n    };\n  }, [scrollMode, checkScroll, handleWheel]);\n\n  const renderNavItem = (item: INavLineItem & { ref: React.RefObject<HTMLElement> }): ReactNode => {\n    const Icon = item.icon ? Icons[item.icon as keyof typeof Icons] : null;\n    const isDisabled = item.disabled || (mode === 'create' && item.tabId !== 'general');\n\n    const commonProps = {\n      'title': item.title,\n      'className': cn(\n        { 'nav-line__item': !variant },\n        { 'nav-line--simple__item': variant === 'simple' },\n        { active: activeTab === item.tabId },\n        { disabled: isDisabled },\n        { 'nav-line__item--hidden': item.isHidden },\n      ),\n      'role': 'tab',\n      'aria-selected': activeTab === item.tabId,\n      'aria-disabled': isDisabled,\n      'tabIndex': isDisabled ? -1 : 0,\n    };\n\n    const content = (\n      <div className=\"nav-line__content\">\n        {Icon && (\n          <div className=\"nav-line__item--icon\" aria-hidden=\"true\">\n            <Icon />\n          </div>\n        )}\n        <span className={cn({ 'nav-line__item--label': variant !== 'simple' })}>{item.label}</span>\n        {item.count !== undefined && (\n          <span className=\"nav-line-count\" aria-label={`${item.count} items`}>\n            (\n            {item.count}\n            )\n          </span>\n        )}\n      </div>\n    );\n    if (isLocal) {\n      return (\n        <span\n          key={`tab__${item.tabId}`}\n          {...commonProps}\n          ref={checkedRef(item.ref)}\n          onClick={() => !isDisabled && onTabChange(item)}\n          onKeyPress={(e: React.KeyboardEvent) => {\n            if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault();\n              onTabChange(item);\n            }\n          }}\n        >\n          {content}\n        </span>\n      );\n    }\n\n    return (\n      <NavLink\n        key={`tab__${item.tabId}`}\n        {...commonProps}\n        to={`${root}${item?.linkChapter || item.tabId}/`}\n        onClick={(e) => {\n          if (isDisabled) {\n            e.preventDefault();\n          }\n        }}\n      >\n        {content}\n      </NavLink>\n    );\n  };\n\n  return (\n    <div className=\"nav-line-wrapper\">\n      <div\n        data-testid={testId}\n        className={cn(\n          { [CN]: !variant },\n          { [`${CN}--simple`]: variant === 'simple' },\n          { [`${CN}--scroll-mode`]: scrollMode },\n          className,\n        )}\n        ref={wrapperRef}\n      >\n        {scrollMode && showScrollButtons && (\n          <button\n            type=\"button\"\n            data-testid=\"nav-line-scroll-prev\"\n            className=\"nav-line--simple__arrow nav-line--simple__arrow--prev\"\n            onClick={() => scroll('left')}\n            aria-label=\"Scroll previous\"\n            disabled={!canScrollLeft}\n          >\n            <Icons.ChevronLeft />\n          </button>\n        )}\n\n        <div\n          ref={wrapperInnerRef}\n          className={cn({ 'nav-line__inner': !variant }, { 'nav-line--simple__inner': variant === 'simple' })}\n          role=\"tablist\"\n          aria-orientation=\"horizontal\"\n        >\n          {navLineItems.map(renderNavItem)}\n        </div>\n\n        {scrollMode && showScrollButtons && (\n          <button\n            type=\"button\"\n            data-testid=\"nav-line-scroll-next\"\n            className=\"nav-line--simple__arrow nav-line--simple__arrow--next\"\n            onClick={() => scroll('right')}\n            aria-label=\"Scroll next\"\n            disabled={!canScrollRight}\n          >\n            <Icons.ChevronRight />\n          </button>\n        )}\n\n        {children && (\n          <div className=\"nav-line__body\" role=\"tabpanel\">\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default NavLine;\n"],"mappings":"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"}