intelicoreact 1.5.38 → 1.5.41

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

@@ -1,136 +1,159 @@
 "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 useMobileModal;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../../Functions/useIsMobile/useIsMobile"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+exports.default = useMobileModal;
+var _react = _interopRequireWildcard(require("react"));
+var _useIsMobile = _interopRequireDefault(require("../../../../Functions/useIsMobile"));
+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 SCROLL_DIRECTION = {
-    UP: 'up',
-    DOWN: 'down'
+  UP: "up",
+  DOWN: "down"
 };
-function useMobileModal({ withMobileLogic = false, withFixedFooter = false, isOpen = false }) {
-    const modalMobileContainerRef = (0, _react.useRef)(null);
-    const modalMobileHeaderRef = (0, _react.useRef)(null);
-    const modalMobileFooterRef = (0, _react.useRef)(null);
-    const modalMobileBodyRef = (0, _react.useRef)(null);
-    const { isMobile } = (0, _useIsMobile.default)();
-    const [scrollTop, setScrollTop] = (0, _react.useState)(0);
-    const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
-    const [modalsLogic, setModalsLogic] = (0, _react.useState)({
-        IS_HEADER_HIDDEN: false,
-        IS_HEADER_STICKY: false,
-        IS_FOOTER_HIDDEN: false,
-        IS_FOOTER_STICKY: withFixedFooter
-    });
-    // Update scroll state
-    const updateScrollState = (0, _react.useCallback)(()=>{
-        var _modalMobileHeaderRef_current, _modalMobileFooterRef_current;
-        const container = modalMobileContainerRef.current;
-        if (!container || !isOpen) return;
-        const currentScrollTop = container.scrollTop;
-        var _modalMobileHeaderRef_current_offsetHeight;
-        const headerHeight = (_modalMobileHeaderRef_current_offsetHeight = (_modalMobileHeaderRef_current = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef_current === void 0 ? void 0 : _modalMobileHeaderRef_current.offsetHeight) !== null && _modalMobileHeaderRef_current_offsetHeight !== void 0 ? _modalMobileHeaderRef_current_offsetHeight : 0;
-        var _modalMobileFooterRef_current_offsetHeight;
-        const footerHeight = (_modalMobileFooterRef_current_offsetHeight = (_modalMobileFooterRef_current = modalMobileFooterRef.current) === null || _modalMobileFooterRef_current === void 0 ? void 0 : _modalMobileFooterRef_current.offsetHeight) !== null && _modalMobileFooterRef_current_offsetHeight !== void 0 ? _modalMobileFooterRef_current_offsetHeight : 0;
-        const containerHeight = container.scrollHeight;
-        const viewportHeight = window.innerHeight;
-        const maxScroll = Math.max(0, containerHeight - viewportHeight);
-        setScrollTop(currentScrollTop);
-        setScrollHeight(maxScroll);
-        setModalsLogic((prev)=>({
-                ...prev,
-                IS_HEADER_HIDDEN: currentScrollTop > 0,
-                IS_HEADER_STICKY: currentScrollTop >= headerHeight,
-                IS_FOOTER_HIDDEN: !withFixedFooter && currentScrollTop >= maxScroll - footerHeight,
-                IS_FOOTER_STICKY: withFixedFooter
-            }));
-    }, [
-        isOpen,
-        withFixedFooter
-    ]);
-    // Handle scroll events
-    (0, _react.useEffect)(()=>{
-        const container = modalMobileContainerRef.current;
-        if (container && isOpen) {
-            container.addEventListener('scroll', updateScrollState, {
-                passive: true
-            });
-            updateScrollState(); // Initial state update
-        }
-        return ()=>{
-            if (container) {
-                container.removeEventListener('scroll', updateScrollState);
-            }
-        };
-    }, [
-        isOpen,
-        updateScrollState
-    ]);
-    // Handle resize events
-    (0, _react.useEffect)(()=>{
-        if (isOpen) {
-            window.addEventListener('resize', updateScrollState, {
-                passive: true
-            });
-        }
-        return ()=>{
-            window.removeEventListener('resize', updateScrollState);
-        };
-    }, [
-        isOpen,
-        updateScrollState
-    ]);
-    // Initial setup when modal opens
-    (0, _react.useEffect)(()=>{
-        if (isOpen) {
-            updateScrollState();
-        }
-    }, [
-        isOpen,
-        updateScrollState
-    ]);
-    // Update footer sticky state
-    (0, _react.useEffect)(()=>{
-        setModalsLogic((prev)=>({
-                ...prev,
-                IS_FOOTER_STICKY: withFixedFooter
-            }));
-    }, [
-        withFixedFooter
-    ]);
-    const renderModal = (0, _react.useCallback)((modal)=>{
-        if (!isMobile || !withMobileLogic) return modal;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "modal-mobile-container",
-            ref: modalMobileContainerRef,
-            children: modal
+function useMobileModal(_ref) {
+  let {
+    modalRef = null,
+    withMobileLogic = false,
+    withFixedFooter,
+    isOpen
+  } = _ref;
+  const modalMobileContainerRef = (0, _react.useRef)(null);
+  const modalMobileHeaderRef = (0, _react.useRef)(null);
+  const modalMobileFooterRef = (0, _react.useRef)(null);
+  const modalMobileBodyRef = (0, _react.useRef)(null);
+  const {
+    isMobile
+  } = (0, _useIsMobile.default)();
+  const [modalHeight, setModalHeight] = (0, _react.useState)(0);
+  const [modalsLogic, setModalsLogic] = (0, _react.useState)({
+    IS_HEADER_HIDDEN: false,
+    IS_HEADER_STICKY: false,
+    IS_FOOTER_HIDDEN: false,
+    IS_FOOTER_STICKY: false
+  });
+  const [modalsLogicProps, setModalsLogicProps] = (0, _react.useState)({
+    headerHeight: 0,
+    footerHeight: 0
+  });
+  const [scrollDirection, setScrollDirection] = (0, _react.useState)(SCROLL_DIRECTION.UP);
+  const [scrollTopPrev, setScrollTopPrev] = (0, _react.useState)(0);
+  const [scrollTop, setScrollTop] = (0, _react.useState)(0);
+  const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
+  const [containerScrollHeight, setContainerScrollHeight] = (0, _react.useState)(1);
+
+  /* MODALS LOGIC | BEGIN */
+  // Count ScrollTop
+  (0, _react.useLayoutEffect)(() => {
+    const el = modalMobileContainerRef?.current;
+    if (el) {
+      el.addEventListener("scroll", () => {
+        setScrollTop(scrollTop => {
+          if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
+          return el.scrollTop;
         });
-    }, [
-        isMobile,
-        withMobileLogic
-    ]);
-    return {
-        modalMobileContainerRef,
-        modalMobileHeaderRef,
-        modalMobileBodyRef,
-        modalMobileFooterRef,
-        MODALS_LOGIC: modalsLogic,
-        SCROLL_DIRECTION,
-        scrollTop,
-        scrollHeight,
-        renderModal,
-        isMobile
-    };
-}
+      });
+    }
+  }, [modalMobileContainerRef?.current]);
+  // Count ScrollDirection
+  (0, _react.useEffect)(() => {
+    setScrollDirection(prevScrollDirection => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection);
+  }, [scrollTop, scrollTopPrev]);
+  // Dynamic Modal Positioning
+  (0, _react.useLayoutEffect)(() => {
+    if (isOpen) {
+      const modalStyle = modalRef?.current ? modalRef?.current.currentStyle || window.getComputedStyle(modalRef?.current) : {};
+      const computedModalHeight = modalRef?.current ? modalHeight + 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]);
+
+  // Calculating
+  (0, _react.useLayoutEffect)(() => {
+    if (isMobile && isOpen) {
+      const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
+      if (modalHeight !== newModalHeight) {
+        setModalHeight(newModalHeight);
+      }
+    }
+  });
+  (0, _react.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]);
+  (0, _react.useLayoutEffect)(() => {
+    if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== undefined) {
+      setModalsLogicProps(state => ({
+        ...state,
+        headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height
+      }));
+    }
+  }, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
+  (0, _react.useLayoutEffect)(() => {
+    if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== undefined) {
+      setModalsLogicProps(state => ({
+        ...state,
+        footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height
+      }));
+    }
+  }, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
+  (0, _react.useEffect)(() => {
+    if (modalMobileContainerRef?.current) {
+      // eslint-disable-next-line no-unsafe-optional-chaining
+      setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
+      setScrollHeight(modalMobileContainerRef?.current?.scrollHeight - window.innerHeight);
+    }
+  }, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener("resize", () => {
+      setContainerScrollHeight(containerScrollHeight => {
+        setScrollHeight(containerScrollHeight - window.innerHeight);
+        return containerScrollHeight;
+      });
+    });
+  }, []);
+  /* MODALS LOGIC | END */
+
+  const renderMobileModal = modal => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "modal-mobile-container",
+      ref: modalMobileContainerRef
+    }, modal);
+  };
+  const renderModal = modal => {
+    return isMobile && withMobileLogic ? renderMobileModal(modal) : modal;
+  };
+  return {
+    modalMobileContainerRef,
+    modalMobileHeaderRef,
+    modalMobileBodyRef,
+    modalMobileFooterRef,
+    MODALS_LOGIC: modalsLogic,
+    SCROLL_DIRECTION,
+    scrollTop,
+    scrollHeight,
+    renderModal,
+    isMobile
+  };
+}

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

@@ -1,123 +1,67 @@
 "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"));
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 require("./MonoAccordion.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;
-    }
-    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);
-    }
-    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];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const RC = 'mono-accordion';
-const dataSetDefault = {};
-const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled = false, testId = 'mono-accordion', datasetProp = dataSetDefault })=>{
-    const contentRef = (0, _react.useRef)(null);
-    const containerRef = (0, _react.useRef)(null);
-    const handleClick = (0, _react.useCallback)((e)=>{
-        e.stopPropagation();
-        if (!disabled) {
-            onClick(e);
-        }
-    }, [
-        onClick,
-        disabled
-    ]);
-    // Обновляем CSS переменную с высотой контента при изменении содержимого
-    (0, _react.useEffect)(()=>{
-        if (containerRef.current && contentRef.current) {
-            const height = contentRef.current.scrollHeight;
-            containerRef.current.style.setProperty('--content-height', `${height}px`);
-        }
-    }, [
-        children,
-        isOpen
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        ...datasetProp,
-        "data-testid": testId,
-        className: (0, _classnames.default)(RC, className, {
-            [`${RC}--is-open`]: isOpen,
-            [`${RC}--disabled`]: disabled
-        }),
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
-                type: "button",
-                className: `${RC}__head`,
-                onClick: handleClick,
-                "aria-expanded": isOpen,
-                disabled: disabled,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: `${RC}__title-container`,
-                        children: titleJSX
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: `${RC}__icon-container`,
-                        "aria-hidden": "true",
-                        children: icon
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                ref: containerRef,
-                className: `${RC}__container`,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    ref: contentRef,
-                    className: `${RC}__content-wrapper`,
-                    children: children
-                })
-            })
-        ]
-    });
+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 RC = "mono-accordion";
+const MonoAccordion = _ref => {
+  let {
+    titleJSX,
+    icon,
+    children,
+    isOpen,
+    onClick,
+    className,
+    disabled,
+    testId = "mono-accordion",
+    datasetProp = {}
+  } = _ref;
+  const [maxHeight, setMaxHeight] = (0, _react.useState)();
+  const titleRef = (0, _react.useRef)();
+  const containerRef = (0, _react.useRef)();
+  const setHeight = value => {
+    if (value !== undefined) 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;
+  };
+  (0, _react.useEffect)(() => {
+    if (!isOpen) setHeight(0);else setHeight();
+  }, [isOpen, children]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+    "data-testid": testId,
+    className: (0, _classnames.default)(RC, className, {
+      [`${RC}_is-open`]: isOpen,
+      [`${RC}_disabled`]: disabled
+    })
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${RC}__head`,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: titleRef,
+    className: `${RC}__tile-container`
+  }, titleJSX), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${RC}__icon-container`
+  }, icon)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    style: {
+      maxHeight
+    },
+    className: (0, _classnames.default)(`${RC}__container`)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${RC}__content-wrapper`
+  }, children)));
 };
-const _default = MonoAccordion;
+var _default = exports.default = MonoAccordion;