intelicoreact 2.0.18 → 2.0.20

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

@@ -0,0 +1,337 @@
+/* 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;
+}
+
+.modal {
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.5;
+  --modal-bg: #fff;
+  --modal-header-bg: #f7fafc;
+  --modal-body-bg: #f7fafc;
+  --modal-footer-bg: #f7fafc;
+  --modal-border-color: #e2e5ec;
+  --modal-title-color: vars.$color--primary;
+  --modal-title-font-size: 16px;
+  --modal-title-font-weight: 400;
+  --modal-width: 600px;
+  --modal-min-height: 300px;
+  --modal-margin: 0 10px;
+  --modal-padding: 15px;
+  --modal-header-padding: 10px 15px;
+  --modal-footer-padding: 7.5px 15px;
+  --modal-border-radius: 6px;
+  --modal-inner-radius: 4px;
+  --modal-box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+  --modal-close-btn-size: 40px;
+  --modal-close-icon-size: 20px;
+  --modal-close-btn-color: #1e1e2d;
+  --modal-close-hover-bg: #e2e5ec;
+  --modal-primary-bg: #6b81dd;
+  --modal-primary-title-color: #ffffff;
+  --modal-primary-close-hover: #5162d4;
+  --max-height: calc(100% - 30px);
+  position: relative;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  width: var(--modal-width, 600px);
+  min-height: var(--modal-min-height, 300px);
+  max-height: var(--max-height, calc(100% - 30px));
+  margin: var(--modal-margin, 0 10px);
+  border-radius: var(--modal-border-radius, 6px);
+  background-color: var(--modal-bg, #fff);
+  box-shadow: var(--modal-box-shadow, 0 20px 20px rgba(0, 0, 0, 0.2));
+}
+.modal__header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--modal-header-padding, 10px 15px);
+  border-bottom: 1px solid var(--modal-border-color, #e2e5ec);
+  border-top-left-radius: var(--modal-inner-radius, 4px);
+  border-top-right-radius: var(--modal-inner-radius, 4px);
+  background-color: var(--modal-header-bg, #f7fafc);
+}
+.modal__header-primary {
+  background-color: var(--modal-primary-bg, #6b81dd);
+}
+.modal__header-primary-title {
+  font-size: var(--modal-title-font-size, 16px);
+  font-weight: var(--modal-title-font-weight, 400);
+  color: var(--modal-primary-title-color, #ffffff);
+}
+.modal__header-title {
+  font-size: var(--modal-title-font-size, 16px);
+  font-weight: normal;
+  color: var(--modal-title-color, #6b81dd);
+}
+.modal__body {
+  overflow-y: auto;
+  flex-grow: 1;
+  box-sizing: border-box;
+  padding: var(--modal-padding, 15px);
+  border-bottom-right-radius: var(--modal-inner-radius, 4px);
+  border-bottom-left-radius: var(--modal-inner-radius, 4px);
+  background-color: var(--modal-body-bg, #f7fafc);
+}
+.modal__body scrollbar {
+  -moz-appearance: none !important;
+}
+.modal__body scrollbarbutton {
+  -moz-appearance: none !important;
+}
+.modal__body thumb {
+  -moz-appearance: none !important;
+}
+.modal__body scrollcorner {
+  -moz-appearance: none !important;
+  resize: both;
+}
+.modal__body::-webkit-scrollbar {
+  width: 4px;
+}
+.modal__body::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #BAC2C9;
+}
+.modal__body::-webkit-scrollbar-thumb:hover {
+  background: #9AA0B9;
+}
+.modal__body::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.modal__body::-webkit-scrollbar-track:horizontal {
+  background: inherit;
+}
+.modal__body::-webkit-scrollbar-thumb:horizontal {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: #BAC2C9;
+  background-clip: padding-box;
+  border: 2px solid rgba(0, 0, 0, 0);
+}
+.modal__body::-webkit-scrollbar-thumb:horizontal:hover {
+  background: #9AA0B9;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+}
+.modal__body:first-of-type {
+  overflow-x: hidden;
+  border-top-left-radius: var(--modal-inner-radius, 4px);
+  border-top-right-radius: var(--modal-inner-radius, 4px);
+}
+.modal__body--no-footer {
+  padding: var(--modal-padding, 15px);
+}
+.modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--modal-footer-padding, 7.5px 15px);
+  border-top: 1px solid var(--modal-border-color, #e2e5ec);
+  border-bottom-right-radius: var(--modal-inner-radius, 4px);
+  border-bottom-left-radius: var(--modal-inner-radius, 4px);
+  background-color: var(--modal-footer-bg, #f7fafc);
+}
+.modal__footer_with-left-content {
+  justify-content: space-between;
+}
+.modal__footer--inbody {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: calc(100% - 30px);
+  background-color: var(--modal-bg, #fff);
+}
+.modal__buttons-block {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.modal-overlay {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: var(--modal-overlay-opacity, 0.5);
+  background-color: var(--modal-overlay-bg, black);
+  transition: opacity 0.2s ease;
+}
+
+.modal__footer--noborder {
+  border-top: none;
+}
+
+.modal-box {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  animation-name: fadeIn;
+  animation-duration: 0.25s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.consumer-info-modal {
+  overflow-x: auto;
+}
+.consumer-info-modal .button-fin {
+  background-color: white;
+}
+.consumer-info-modal .modal__body {
+  min-height: 200px;
+  padding: 0 15px;
+}
+
+.modal-close-icon-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--modal-close-btn-size, 40px);
+  height: 100%;
+  cursor: pointer;
+  color: var(--modal-close-btn-color, #1e1e2d);
+  border-top-right-radius: var(--modal-inner-radius, 4px);
+  background: transparent;
+}
+.modal-close-icon-box:hover {
+  background-color: var(--modal-close-hover-bg, #e2e5ec);
+}
+.modal-close-icon-box-primary {
+  color: var(--modal-close-btn-color, #1e1e2d);
+}
+.modal-close-icon-box-primary:hover {
+  opacity: 1;
+  background-color: var(--modal-primary-close-hover, #5162d4);
+}
+.modal-close-icon-box-merchant {
+  color: var(--modal-close-btn-color, #1e1e2d);
+}
+.modal-close-icon-box-merchant:hover {
+  opacity: 1;
+  background-color: var(--modal-primary-close-hover, #5162d4);
+}
+
+.modal-close-icon {
+  width: var(--modal-close-icon-size, 20px);
+  min-width: var(--modal-close-icon-size, 20px);
+  height: var(--modal-close-icon-size, 20px);
+}
+
+.modal-text-card {
+  padding: 15px 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  white-space: normal;
+}
+
+.prompt-text-card {
+  padding: 0;
+}
+
+.included-selector-modal--box {
+  overflow-x: auto;
+  max-height: calc(100% - 32px);
+}
+.included-selector-modal__th--id {
+  width: 1%;
+}
+.included-selector-modal__td--id {
+  color: #9aa0b9;
+}
+.included-selector-modal .simple-table {
+  overflow-x: unset;
+  min-height: 400px;
+  max-height: 500px;
+}
+.included-selector-modal .simple-table thead {
+  background-color: unset;
+}
+.included-selector-modal .simple-table thead th {
+  padding: 10px 15px;
+  font-weight: 400;
+  border-right: 1px solid var(--modal-border-color, #e2e5ec);
+}
+.included-selector-modal .simple-table thead th:first-child,
+.included-selector-modal .simple-table thead th:last-child {
+  border: none;
+}
+.included-selector-modal .simple-table tbody tr:first-child {
+  position: relative;
+}
+.included-selector-modal .simple-table tbody tr:first-child::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.152) 0%, rgba(0, 0, 0, 0) 100%);
+}
+.included-selector-modal .simple-table tbody tr:last-child {
+  border-bottom: none;
+}
+.included-selector-modal .simple-table td {
+  padding: 2.25px 15px;
+}
+.included-selector-modal .simple-table .tr-as-selector:hover td {
+  background-color: #ffedc8;
+}
+
+.reports-settings-modal-box .modal__body {
+  padding: 0;
+}
+
+.confirm-modal {
+  border-radius: var(--modal-inner-radius, 4px);
+}
+.confirm-modal .modal__header-title {
+  font-size: 13px;
+  font-weight: 700;
+}
+.confirm-modal .modal__body .modal-text-card {
+  padding: 0;
+}
+.confirm-modal .modal__footer {
+  background-color: var(--modal-bg, #fff);
+}
+
+.modal-close-icon-box--hidden {
+  display: none;
+}

package/dist/es/Atomic/UI/Modal/ModalHOC.js

@@ -0,0 +1,64 @@
+import '../../../styles/base.css';
+import useHandleKeyPress from "../../../Functions/useKeyPress/useHandleKeyPress.js";
+import { EVENTS } from "./partials/_constants.js";
+import { getOnKeyPress, getWithEventManagementStructure } from "./partials/_utils.js";
+import './Modal.styles.css';/* empty css           */
+import cn from "classnames";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/Modal/ModalHOC.tsx
+var ModalHOC = ({ id, zIndex = 100, isOpen, closeModal, closeBtnDisable, children, className, size, testId = "modal", withEventManagement = false, isClosingByEsc: isClosingByEscOuter = true, closeOnEsc }) => {
+	const modalRef = useRef(null);
+	const closeModalRef = useRef(closeModal);
+	const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
+	const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
+	const handleClose = useMemo(() => () => closeModalRef.current?.(), []);
+	useHandleKeyPress({
+		escCallback: isClosingByEsc && typeof closeModal === "function" ? handleClose : void 0,
+		withEventManagementStructure
+	});
+	useLayoutEffect(() => {
+		closeModalRef.current = closeBtnDisable ? void 0 : closeModal;
+	}, [closeModal, closeBtnDisable]);
+	useEffect(() => {
+		const onKeyPress = getOnKeyPress({
+			id,
+			onClose: handleClose
+		});
+		if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
+			if (isClosingByEsc) document.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
+		}
+		return () => {
+			if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
+				if (isClosingByEsc) document.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
+			}
+		};
+	}, []);
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id: `${id}`,
+		style: { zIndex },
+		"data-testid": testId,
+		className: "modal-box j5",
+		role: "presentation",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "modal-overlay",
+			onClick: handleClose,
+			role: "presentation",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("div", {
+			ref: modalRef,
+			style: { width: size },
+			className: cn(className, "modal"),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": testId,
+			tabIndex: -1,
+			children
+		})]
+	});
+};
+//#endregion
+export { ModalHOC as default };
+
+//# sourceMappingURL=ModalHOC.js.map

package/dist/es/Atomic/UI/Modal/ModalHOC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHOC.js","names":[],"sources":["../../../../../src/Atomic/UI/Modal/ModalHOC.tsx"],"sourcesContent":["import type { IModalHOCProps } from './Modal.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport useHandleKeyPress from '../../../Functions/useKeyPress/useHandleKeyPress';\nimport { EVENTS } from './partials/_constants';\nimport { getOnKeyPress, getWithEventManagementStructure } from './partials/_utils';\n\nimport './Modal.scss';\n\nconst ModalHOC: React.FC<IModalHOCProps> = ({\n  id,\n  zIndex = 100,\n  isOpen,\n  closeModal,\n  closeBtnDisable,\n\n  children,\n  className,\n  size,\n  testId = 'modal',\n\n  withEventManagement = false, // ! Полностью проигнорируется если в модалку НЕ прокинут id\n\n  // ? isClosingByEsc является явным разрешением/запретом на работу ф-ла,\n  // ? в то время как withEventManagement лишь настройка способа реализации этого ф-ла\n  isClosingByEsc: isClosingByEscOuter = true,\n  closeOnEsc,\n}) => {\n  const modalRef = useRef(null);\n  const closeModalRef = useRef(closeModal);\n\n  // todo(vl) - на старых пропах и раньше дефолт был true\n  // todo(vl) - поэтому для поддержки старья достаточно отслеживать запреты\n  const isClosingByEsc = closeOnEsc === false\n    ? false\n    : isClosingByEscOuter;\n\n  const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);\n\n  // ? Лучше чем useCallback, т.к.\n  // ?    - НЕ \"дёргает\" верстку (хотя по факту ре-рендер произойдет для useLayoutEffect-ов, но в шедоу-доме ничего не изменится)\n  // ?    - НЕ замыкает внешние состояния (обеспечивает useLayoutEffect)\n  // ?    - НЕ нужно переставлять листенеры\n  // ? Суть логики: \"иди по этой ссылке и попытайся запустить то что там есть\",\n  // ? ссылка - перманентная, содержание может меняться незаметно для оболочки\n  const handleClose: () => void = useMemo(() => () => closeModalRef.current?.(), []);\n\n  useHandleKeyPress({\n    escCallback: isClosingByEsc && typeof closeModal === 'function' ? handleClose : undefined,\n    withEventManagementStructure,\n  });\n\n  useLayoutEffect(() => {\n    closeModalRef.current = closeBtnDisable ? undefined : closeModal;\n  }, [closeModal, closeBtnDisable]);\n\n  // ? Обработка нажатия enter и esc на кастомных ивентах\n  useEffect(() => {\n    // ? useEffect по нулевой зависимости вызывается 1 раз, а значит ссылка на колбек НЕ изменятся,\n    // ? а значит снятие слушателя пройдет корректно\n    const onKeyPress = getOnKeyPress({ id, onClose: handleClose }); // в ModalHOC onSubmit не запланирован\n\n    if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {\n      // if () document.addEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress); // в ModalHOC onSubmit не запланирован\n      if (isClosingByEsc) document.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);\n    }\n\n    return () => {\n      if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {\n        // if () document.removeEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress); // в ModalHOC onSubmit не запланирован\n        if (isClosingByEsc) document.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);\n      }\n    }\n  }, []);\n\n  if (!isOpen) return null;\n  return (\n    <div id={`${id}`} style={{ zIndex }} data-testid={testId} className=\"modal-box j5\" role=\"presentation\">\n      <div className=\"modal-overlay\" onClick={handleClose} role=\"presentation\" aria-hidden=\"true\" />\n      <div\n        ref={modalRef}\n        style={{ width: size }}\n        className={cn(className, 'modal')}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={testId}\n        tabIndex={-1}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default ModalHOC;\n"],"mappings":";;;;;;;;AAWA,IAAM,YAAsC,EAC1C,IACA,SAAS,KACT,QACA,YACA,iBAEA,UACA,WACA,MACA,SAAS,SAET,sBAAsB,OAItB,gBAAgB,sBAAsB,MACtC,iBACI;CACJ,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,gBAAgB,OAAO,UAAU;CAIvC,MAAM,iBAAiB,eAAe,QAClC,QACA;CAEJ,MAAM,+BAA+B,gCAAgC,IAAI,mBAAmB;CAQ5F,MAAM,cAA0B,oBAAoB,cAAc,UAAU,GAAG,CAAC,CAAC;CAEjF,kBAAkB;EAChB,aAAa,kBAAkB,OAAO,eAAe,aAAa,cAAc,KAAA;EAChF;CACF,CAAC;CAED,sBAAsB;EACpB,cAAc,UAAU,kBAAkB,KAAA,IAAY;CACxD,GAAG,CAAC,YAAY,eAAe,CAAC;CAGhC,gBAAgB;EAGd,MAAM,aAAa,cAAc;GAAE;GAAI,SAAS;EAAY,CAAC;EAE7D,IAAI,6BAA6B,kCAAkC,CAAC,CAAC;OAE/D,gBAAgB,SAAS,iBAAiB,OAAO,kBAAkB,MAAM,UAAU;EAAA;EAGzF,aAAa;GACX,IAAI,6BAA6B,kCAAkC,CAAC,CAAC;QAE/D,gBAAgB,SAAS,oBAAoB,OAAO,kBAAkB,MAAM,UAAU;GAAA;EAE9F;CACF,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,QAAQ,OAAO;CACpB,OACE,qBAAC,OAAD;EAAK,IAAI,GAAG;EAAM,OAAO,EAAE,OAAO;EAAG,eAAa;EAAQ,WAAU;EAAe,MAAK;YAAxF,CACE,oBAAC,OAAD;GAAK,WAAU;GAAgB,SAAS;GAAa,MAAK;GAAe,eAAY;EAAQ,CAAA,GAC7F,oBAAC,OAAD;GACE,KAAK;GACL,OAAO,EAAE,OAAO,KAAK;GACrB,WAAW,GAAG,WAAW,OAAO;GAChC,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,UAAU;GAET;EACE,CAAA,CACF;;AAET"}

package/dist/es/Atomic/UI/Modal/ModalMobile.styles.css

@@ -0,0 +1,60 @@
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@media only screen and (max-width: 768px), (width <= 1024px) and (orientation: landscape) {
+  .modal-mobile-container {
+    --modal-container-z-index: 100;
+    --modal-container-width: 100dvw;
+    --modal-container-height: 100dvh;
+    --modal-container-border-radius: 16px;
+    --modal-content-margin-top: 16px;
+    --modal-animation-duration: 0.4s;
+    --modal-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+    position: relative;
+    z-index: var(--modal-container-z-index, 100);
+    overflow-y: auto;
+    box-sizing: border-box;
+    width: var(--modal-container-width, 100dvw);
+    height: var(--modal-container-height, 100dvh);
+    border-radius: var(--modal-container-border-radius, 16px) var(--modal-container-border-radius, 16px) 0 0;
+  }
+  .modal-mobile-container .modal {
+    --modal-header-footer-width: 100%;
+    --modal-header-top: 0;
+    --modal-footer-bottom: 0;
+    max-width: 100vw;
+    max-height: unset !important;
+    margin-top: var(--modal-content-margin-top, 16px) !important;
+    border-radius: var(--modal-container-border-radius, 16px) var(--modal-container-border-radius, 16px) 0 0;
+    animation-name: slideup;
+    animation-duration: var(--modal-animation-duration, 0.4s);
+  }
+  .modal-mobile-container .modal__header, .modal-mobile-container .modal__footer {
+    z-index: 2;
+    left: 0;
+    box-sizing: border-box;
+    width: var(--modal-header-footer-width, 100%);
+  }
+  .modal-mobile-container .modal__header--hidden, .modal-mobile-container .modal__footer--hidden {
+    position: relative;
+  }
+  .modal-mobile-container .modal__header--sticky, .modal-mobile-container .modal__footer--sticky {
+    position: sticky;
+    box-shadow: var(--modal-shadow, 0px 0px 16px 0px rgba(0, 0, 0, 0.15));
+  }
+  .modal-mobile-container .modal__header {
+    top: var(--modal-header-top, 0);
+  }
+  .modal-mobile-container .modal__footer {
+    bottom: var(--modal-footer-bottom, 0);
+    border-radius: 0 !important;
+  }
+  .modal-mobile-container .modal:not(.modal--no-header) .modal__body {
+    border-radius: 0 !important;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { EVENTS } from "./partials/_constants.js";
+import { dispatchEventForModalManagement } from "./partials/_utils.js";
+import ModalFooter from "./partials/ModalFooter.js";
+import ModalTitle from "./partials/ModalTitle.js";
+import useMobileModal from "./partials/useMobileModal.js";
+import Modal from "./Modal.js";
+import ModalHOC from "./ModalHOC.js";
+//#region src/Atomic/UI/Modal/index.ts
+var Modal_default = Modal;
+//#endregion
+export { EVENTS, Modal, ModalFooter, ModalHOC, ModalTitle, Modal_default as default, dispatchEventForModalManagement, useMobileModal };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/Modal/index.ts"],"sourcesContent":["import Modal from './Modal';\nimport ModalHOC from './ModalHOC';\nimport { EVENTS } from './partials/_constants';\nimport { dispatchEventForModalManagement } from './partials/_utils';\n\n// ? Экспорт типов\nexport type { IModalFooterProps, IModalHOCProps, IModalProps, IModalTitleProps } from './Modal.interface';\n// ? Экспорт компоненттов\nexport { Modal, ModalHOC };\n// ? Экспорт partials\nexport { default as ModalFooter } from './partials/ModalFooter';\nexport { default as ModalTitle } from './partials/ModalTitle';\nexport { default as useMobileModal } from './partials/useMobileModal';\n// ? Экспорт констант\nexport { EVENTS };\n// ? Экспорт нужных снаружи методов\nexport { dispatchEventForModalManagement };\n// ? Целевой дефолтный экспорт\nexport default Modal;\n"],"mappings":";;;;;;;;AAkBA,IAAA,gBAAe"}

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

@@ -0,0 +1,19 @@
+import cn from "classnames";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/UI/Modal/partials/ModalFooter.tsx
+var ModalFooter = memo(({ className = "", children, wrapperRef, testId = "modal-footer" }) => {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-testid": testId,
+		ref: wrapperRef,
+		className: cn("modal__footer", className),
+		role: "contentinfo",
+		"aria-label": "Modal footer",
+		children
+	});
+});
+ModalFooter.displayName = "ModalFooter";
+//#endregion
+export { ModalFooter as default };
+
+//# sourceMappingURL=ModalFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","names":[],"sources":["../../../../../../src/Atomic/UI/Modal/partials/ModalFooter.tsx"],"sourcesContent":["import type { IModalFooterProps } from '../Modal.interface';\nimport cn from 'classnames';\n\nimport React, { memo } from 'react';\n\nconst ModalFooter: React.FC<IModalFooterProps> = memo(\n  ({ className = '', children, wrapperRef, testId = 'modal-footer' }) => {\n    return (\n      <footer\n        data-testid={testId}\n        ref={wrapperRef}\n        className={cn('modal__footer', className)}\n        role=\"contentinfo\"\n        aria-label=\"Modal footer\"\n      >\n        {children}\n      </footer>\n    );\n  },\n);\n\nModalFooter.displayName = 'ModalFooter';\n\nexport default ModalFooter;\n"],"mappings":";;;;AAKA,IAAM,cAA2C,MAC9C,EAAE,YAAY,IAAI,UAAU,YAAY,SAAS,qBAAqB;CACrE,OACE,oBAAC,UAAD;EACE,eAAa;EACb,KAAK;EACL,WAAW,GAAG,iBAAiB,SAAS;EACxC,MAAK;EACL,cAAW;EAEV;CACK,CAAA;AAEZ,CACF;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,43 @@
+import cn from "classnames";
+import { memo, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "react-feather";
+//#region src/Atomic/UI/Modal/partials/ModalTitle.tsx
+var ModalTitle = memo(({ variant = "primary", children, isForced = false, onClose, closeBtnDisable, noHeaderCloseBtn = false, className, wrapperRef, testId = "modal-title" }) => {
+	const closeModalRef = useRef(onClose);
+	const handleClick = useMemo(() => () => closeModalRef.current?.(), []);
+	useLayoutEffect(() => {
+		closeModalRef.current = closeBtnDisable ? void 0 : onClose;
+	}, [onClose, closeBtnDisable]);
+	return /* @__PURE__ */ jsxs("header", {
+		"data-testid": testId,
+		ref: wrapperRef,
+		className: cn("modal__header", className, { [`modal__header-${variant}`]: variant }),
+		role: "banner",
+		"aria-label": "Modal header",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("modal__header-title", { [`modal__header-${variant}-title`]: variant }),
+			id: `${testId}-heading`,
+			children
+		}), !isForced && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClick,
+			className: cn("modal-close-icon-box", {
+				"modal-close-icon-box-primary": variant === "primary",
+				"modal-close-icon-box--hidden": noHeaderCloseBtn
+			}),
+			"aria-label": "Close modal",
+			title: "Close modal",
+			children: !noHeaderCloseBtn && /* @__PURE__ */ jsx(X, {
+				className: "modal-close-icon",
+				role: "img",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+});
+ModalTitle.displayName = "ModalTitle";
+//#endregion
+export { ModalTitle as default };
+
+//# sourceMappingURL=ModalTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle.js","names":[],"sources":["../../../../../../src/Atomic/UI/Modal/partials/ModalTitle.tsx"],"sourcesContent":["import type { IModalTitleProps } from '../Modal.interface';\nimport cn from 'classnames';\nimport React, { memo, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { X } from 'react-feather';\n\nconst ModalTitle: React.FC<IModalTitleProps> = memo(\n  ({\n    variant = 'primary',\n    children,\n    isForced = false,\n    onClose,\n    closeBtnDisable,\n\n    noHeaderCloseBtn = false,\n    className,\n    wrapperRef,\n    testId = 'modal-title',\n  }) => {\n    const closeModalRef = useRef(onClose);\n\n    // ! НЕ нужно тут предусматривать обработку нажатия Enter/Esc (предусмотрена в ModalHOC).\n    // ? Если нужна эта инкапсулированая логика - пользуйтесь композицией\n    // ?  - \"закрыватель\" в ModalHOC обеспечит обработку Enter/Esc\n    // ?  - \"закрыватель\" в ModalTitle накинется на \"крестик\"\n    /*\n      <ModalHOC\n        пропы\n        closeModal={ваш_закрыватель}\n      >\n        <ModalTitle\n          пропы\n          onClose={ваш_закрыватель}\n        >\n          {ваша верстка}\n        </ModalTitle>\n\n        {ваш остальной контент}\n      </ModalHOC>\n    */\n\n    // ? Лучше чем useCallback, т.к.\n    // ?    - НЕ \"дёргает\" верстку (хотя по факту ре-рендер произойдет для useLayoutEffect-ов, но в шедоу-доме ничего не изменится)\n    // ?    - НЕ замыкает внешние состояния (обеспечивает useLayoutEffect)\n    // ?    - НЕ нужно переставлять листенеры\n    // ? Суть логики: \"иди по этой ссылке и попытайся запустить то что там есть\",\n    // ? ссылка - перманентная, содержание может меняться незаметно для оболочки\n    const handleClick: () => void = useMemo(() => () => closeModalRef.current?.(), []);\n\n    useLayoutEffect(() => {\n      closeModalRef.current = closeBtnDisable ? undefined : onClose;\n    }, [onClose, closeBtnDisable]);\n\n    return (\n      <header\n        data-testid={testId}\n        ref={wrapperRef}\n        className={cn('modal__header', className, {\n          [`modal__header-${variant}`]: variant,\n        })}\n        role=\"banner\"\n        aria-label=\"Modal header\"\n      >\n        <span\n          className={cn('modal__header-title', {\n            [`modal__header-${variant}-title`]: variant,\n          })}\n          id={`${testId}-heading`}\n        >\n          {children}\n        </span>\n        {!isForced && (\n          <button\n            type=\"button\"\n            onClick={handleClick}\n            className={cn('modal-close-icon-box', {\n              'modal-close-icon-box-primary': variant === 'primary',\n              'modal-close-icon-box--hidden': noHeaderCloseBtn,\n            })}\n            aria-label=\"Close modal\"\n            title=\"Close modal\"\n          >\n            {!noHeaderCloseBtn && <X className=\"modal-close-icon\" role=\"img\" aria-hidden=\"true\" />}\n          </button>\n        )}\n      </header>\n    );\n  },\n);\n\nModalTitle.displayName = 'ModalTitle';\n\nexport default ModalTitle;\n"],"mappings":";;;;;AAMA,IAAM,aAAyC,MAC5C,EACC,UAAU,WACV,UACA,WAAW,OACX,SACA,iBAEA,mBAAmB,OACnB,WACA,YACA,SAAS,oBACL;CACJ,MAAM,gBAAgB,OAAO,OAAO;CA4BpC,MAAM,cAA0B,oBAAoB,cAAc,UAAU,GAAG,CAAC,CAAC;CAEjF,sBAAsB;EACpB,cAAc,UAAU,kBAAkB,KAAA,IAAY;CACxD,GAAG,CAAC,SAAS,eAAe,CAAC;CAE7B,OACE,qBAAC,UAAD;EACE,eAAa;EACb,KAAK;EACL,WAAW,GAAG,iBAAiB,WAAW,GACvC,iBAAiB,YAAY,QAChC,CAAC;EACD,MAAK;EACL,cAAW;YAPb,CASE,oBAAC,QAAD;GACE,WAAW,GAAG,uBAAuB,GAClC,iBAAiB,QAAQ,UAAU,QACtC,CAAC;GACD,IAAI,GAAG,OAAO;GAEb;EACG,CAAA,GACL,CAAC,YACA,oBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW,GAAG,wBAAwB;IACpC,gCAAgC,YAAY;IAC5C,gCAAgC;GAClC,CAAC;GACD,cAAW;GACX,OAAM;aAEL,CAAC,oBAAoB,oBAAC,GAAD;IAAG,WAAU;IAAmB,MAAK;IAAM,eAAY;GAAQ,CAAA;EAC/E,CAAA,CAEJ;;AAEZ,CACF;AAEA,WAAW,cAAc"}

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

@@ -0,0 +1,26 @@
+//#region src/Atomic/UI/Modal/partials/_constants.ts
+var DEFAULT_EVENT_OPTIONS = Object.freeze({
+	bubbles: true,
+	cancelable: true,
+	composed: false
+});
+var EVENTS = Object.freeze({
+	["iGotAnEnterKeyPress"]: {
+		innerKey: "iGotAnEnterKeyPress",
+		name: "modal:i-got-an-enter-key-press",
+		shortName: "enterIsPressed",
+		middlewareKey: "Enter",
+		options: DEFAULT_EVENT_OPTIONS
+	},
+	["iGotAnEscKeyPress"]: {
+		innerKey: "iGotAnEscKeyPress",
+		name: "modal:i-got-an-esc-key-press",
+		shortName: "escIsPressed",
+		middlewareKey: "Escape",
+		options: DEFAULT_EVENT_OPTIONS
+	}
+});
+//#endregion
+export { DEFAULT_EVENT_OPTIONS, EVENTS };
+
+//# sourceMappingURL=_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_constants.js","names":[],"sources":["../../../../../../src/Atomic/UI/Modal/partials/_constants.ts"],"sourcesContent":["// ? Опции для диспатча ивента\nexport const DEFAULT_EVENT_OPTIONS = Object.freeze({\n  bubbles: true,\n  cancelable: true,\n  composed: false,\n});\n\n// ? Возможные ключи кастомных ивентов, предусмотренных в системе обработки (внутренний нейминг)\nexport enum ModalEventsInnerKeys {\n  iGotAnEnterKeyPress = 'iGotAnEnterKeyPress',\n  iGotAnEscKeyPress = 'iGotAnEscKeyPress',\n}\n\n/** Тип значения ev.key (KeyboardEvent.key) — привязка к глобальному типу, без своего union */\nexport type KeyboardEventKey = globalThis.KeyboardEvent['key'];\n\n// ? Интерфейс ивента (константная информация об ивенте)\nexport interface ICustomEvent<Key extends ModalEventsInnerKeys> {\n  // ? внутренний ключ, соотношение с внутренним неймингом\n  innerKey: Key;\n  // ? Полное название ивента (используется для диспатча)\n  // ? Для полного имени кастомного ивента используется следующий шаблон:\n  // ? 'условная_цель_ивента:описание_того_что_произошло'\n  // ? На уровне проекта пнредполагается, что константа EVENTS будет импортирована (как и диспатчер),\n  // ? И диспатчится будут ивенты на манеру: dispatch(EVENTS.iGotAnEnterKeyPress.name, ...остальные_аргументы)\n  name: string;\n  // ? НО )) если комуто лень, то можно воспоьзоваться кототким имененм и прописать \"руками\"\n  // ? Например: dispatch('enterIsPressed', ...остальные_аргументы), если 'enterIsPressed' указано в shortName нужного ивента\n  // ? Но, нужно помнить, что на обработку (уровень либы) ивент придет все-равно с полным имененм (custonEvent.type),\n  // ? так написан диспатчер\n  shortName: string;\n\n  // ? Идетнтификатор для механики suspendProcessing: ключ колбека из suspendProcessing с которым соотносится этот ивент.\n  // ? Завязал бы механику suspendProcessing на типизацию и нейминг отсюда, но вынужден поддерживать старые механики\n  // ? (в частности useKeyPress), а там как бы не очень логично юзать \"какую-то левую типизацию\"\n  // ? На текущий момент. система кастомных ивентов \"умеет\" обрабатывать нажатия клавиш (enter и escape),\n  // ? поэтому логично выбрать ev.key (ключ клавиши в ивенте - KeyboardEventKey).\n  // ? Но в дальнейшем система может раширяться и затрагиватьивенты \"не клавишные\", поэтому предусматриваю прото стринговое велью.\n  middlewareKey: string | KeyboardEventKey;\n  // ? Опции для диспатча ивента, можно переиспользовать DEFAULT_EVENT_OPTIONS, можно прописать свои значения\n  options: EventInit;\n}\n\n/** Объект, у которого каждый ключ K из енама задаёт тип значения ICustomEvent<K> */\n// ? Объект у которого\n// ?   - ключи могут быть ТОЛЬКО из ModalEventsInnerKeys\n// ?   - ключ объекта задает ключ дженерика ICustomEvent (фиксируем конкретный ивент с внутренним неймингом, в ивенте - innerKey)\nexport type IConstantInfoAboutModalEvents<Keys extends ModalEventsInnerKeys> = { [K in Keys]: ICustomEvent<K> };\n\n// ? Описание всех кастомных ивентов, предусмотренных в системе обработки.\nexport const EVENTS: IConstantInfoAboutModalEvents<ModalEventsInnerKeys> = Object.freeze({\n  [ModalEventsInnerKeys.iGotAnEnterKeyPress]: {\n    innerKey: ModalEventsInnerKeys.iGotAnEnterKeyPress,\n    name: 'modal:i-got-an-enter-key-press',\n    shortName: 'enterIsPressed',\n    middlewareKey: 'Enter',\n    options: DEFAULT_EVENT_OPTIONS,\n  },\n  [ModalEventsInnerKeys.iGotAnEscKeyPress]: {\n    innerKey: ModalEventsInnerKeys.iGotAnEscKeyPress,\n    name: 'modal:i-got-an-esc-key-press',\n    shortName: 'escIsPressed',\n    middlewareKey: 'Escape',\n    options: DEFAULT_EVENT_OPTIONS,\n  },\n});\n"],"mappings":";AACA,IAAa,wBAAwB,OAAO,OAAO;CACjD,SAAS;CACT,YAAY;CACZ,UAAU;AACZ,CAAC;AA6CD,IAAa,SAA8D,OAAO,OAAO;0BAC3C;EAC1C,UAAA;EACA,MAAM;EACN,WAAW;EACX,eAAe;EACf,SAAS;CACX;wBAC0C;EACxC,UAAA;EACA,MAAM;EACN,WAAW;EACX,eAAe;EACf,SAAS;CACX;AACF,CAAC"}

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

@@ -0,0 +1,45 @@
+import { getIsOnlyAnObject } from "../../../../Functions/utils.js";
+import { isISuspendProcessing } from "../../../../Functions/useKeyPress/useKeyPress.js";
+import { EVENTS } from "./_constants.js";
+//#region src/Atomic/UI/Modal/partials/_utils.ts
+function getWithEventManagementStructure(modalId, withEventManagement) {
+	const output = { isWithSubmitAndCloseManagement: false };
+	for (const key in output) if (!modalId) output[key] = false;
+	else output[key] = getIsOnlyAnObject(withEventManagement) ? withEventManagement[key] ?? false : !!withEventManagement;
+	return output;
+}
+function getOnKeyPress({ id: modalId, onSubmit, onClose, suspendProcessing }) {
+	if (!modalId) return null;
+	return function onKeyPress(ev) {
+		const customEvent = ev;
+		const { id: eventId, realEvent } = customEvent.detail || {};
+		const middlewareKey = (Object.values(EVENTS).find((ev) => ev.name === customEvent.type || ev.shortName === customEvent.type) || {}).middlewareKey || "incorrectKey";
+		const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
+		if (modalId && eventId && eventId === modalId && !safelySuspendProcessing[middlewareKey]?.(realEvent)) switch (customEvent.type) {
+			case EVENTS.iGotAnEnterKeyPress.name:
+				onSubmit?.();
+				break;
+			case EVENTS.iGotAnEscKeyPress.name:
+				onClose?.();
+				break;
+			default: break;
+		}
+	};
+}
+function dispatchEventForModalManagement(realEvent, nameOfCustomEvent, uniqueIdOfRecipient, target) {
+	const { repeat, altKey, ctrlKey, shiftKey, metaKey } = realEvent;
+	if (!repeat && !altKey && !ctrlKey && !shiftKey && !metaKey) {
+		const event = Object.values(EVENTS).find((ev) => ev.name === nameOfCustomEvent || ev.shortName === nameOfCustomEvent);
+		if (event && uniqueIdOfRecipient) (target ?? document).dispatchEvent(new CustomEvent(event.name, {
+			...event.options,
+			detail: {
+				id: uniqueIdOfRecipient,
+				realEvent
+			}
+		}));
+	}
+}
+//#endregion
+export { dispatchEventForModalManagement, getOnKeyPress, getWithEventManagementStructure };
+
+//# sourceMappingURL=_utils.js.map