@redneckz/wildless-cms-uni-blocks 0.14.874 → 0.14.876

package/bundle/bundle.umd.js

@@ -1244,35 +1244,10 @@
 
     const getConsentDataProcessing = (inputs) => inputs?.find((_) => _?.name === 'consentDataProcessing');
 
-    function useEventListener(target, type, listener, options) {
-        useEffect(() => {
-            if (!target || !listener) {
-                return;
-            }
-            target.addEventListener(type, listener, options);
-            return () => {
-                target.removeEventListener(type, listener, options);
-            };
-        }, [target, type, listener]);
-    }
-
-    function useOutsideClick(onClick) {
-        const targetRef = useRef(null);
-        const handleClickOutside = useCallback((event) => {
-            if (targetRef && targetRef.current && event.target instanceof Node && !targetRef.current.contains(event.target)) {
-                onClick();
-            }
-        }, [onClick]);
-        useEventListener(globalThis.document, 'click', handleClickOutside);
-        return targetRef;
-    }
-
     // TODO Базовая функицональность всех Control - надо вынести и привязать к required флагу
     const getRequiredLabel = ({ label, errors }) => label && errors ? `${label}*` : label;
 
-    const noop = () => {
-        // Do nothing
-    };
+    const renderErrorText = (error) => (jsx("div", { className: "h-6", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null }));
 
     const inputValidStyle = 'border border-solid outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text rounded';
 
@@ -1300,28 +1275,30 @@
     });
     const defaultStyle$1 = 'w-full border rounded-md text-primary-text outline-none p-m';
 
-    const renderErrorText = (error) => (jsx("div", { className: "h-6", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null }));
-
-    const InputWrapper = JSX(({ className, label, value = '', error, errors, type, isInteger, placeholder, maxLength, inputRef, isOpen, onOpen, onClose, onChange = noop, ...rest }) => {
-        const popupRef = useOutsideClick(onClose);
-        const handleChange = useCallback((v) => {
-            const isOverMax = maxLength && v.length > maxLength;
-            !isOpen && onOpen();
-            if (!isOverMax) {
-                onChange(normalizeInteger(v, isInteger));
-            }
-        }, [isOpen, onChange]);
-        return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: onClose, onFocus: onOpen, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getRequiredLabel({ label, errors }), valid: Boolean(!error), onChange: handleChange, placeholder: getPlaceholder({ placeholder, errors, label }), value: value, ...rest }) }), renderErrorText(error)] }));
-    });
-    const normalizeInteger = (val = '', isInteger = false) => isInteger && val ? val.replace(/[^\d]+/g, '') : val;
-    const getPlaceholder = ({ placeholder, errors, label }) => errors && !label ? `${placeholder}*` : placeholder;
+    const formatOption = (_) => _?.text || _?.key || '';
 
-    const InputControl = JSX((props) => {
-        const [isOpen, { setFalse: close, setTrue: open }] = useBool();
-        return jsx(InputWrapper, { isOpen: isOpen, onOpen: open, onClose: close, ...props });
-    });
+    function useEventListener(target, type, listener, options) {
+        useEffect(() => {
+            if (!target || !listener) {
+                return;
+            }
+            target.addEventListener(type, listener, options);
+            return () => {
+                target.removeEventListener(type, listener, options);
+            };
+        }, [target, type, listener]);
+    }
 
-    const formatOption = (_) => _?.text || _?.key || '';
+    function useOutsideClick(onClick) {
+        const targetRef = useRef(null);
+        const handleClickOutside = useCallback((event) => {
+            if (targetRef && targetRef.current && event.target instanceof Node && !targetRef.current.contains(event.target)) {
+                onClick();
+            }
+        }, [onClick]);
+        useEventListener(globalThis.document, 'click', handleClickOutside);
+        return targetRef;
+    }
 
     const usePopupManager = () => useEmitterWithActions(defaultEventBus.emitter, 'popup');
 
@@ -1594,8 +1571,33 @@
     const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
     const AmountField = JSX(({ field, input }) => (jsx(InputRange, { title: "\u0421\u0443\u043C\u043C\u0430, \u20BD", items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field(input?.name ?? '') })));
 
+    const noop = () => {
+        // Do nothing
+    };
+
+    const InputWrapper = JSX(({ className, label, value = '', error, errors, type, isInteger, placeholder, maxLength, inputRef, isOpen, onOpen, onClose, onChange = noop, ...rest }) => {
+        const popupRef = useOutsideClick(onClose);
+        const handleChange = useCallback((v) => {
+            const isOverMax = maxLength && v.length > maxLength;
+            !isOpen && onOpen();
+            if (!isOverMax) {
+                onChange(normalizeInteger(v, isInteger));
+            }
+        }, [isOpen, onChange]);
+        return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: onClose, onFocus: onOpen, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getRequiredLabel({ label, errors }), valid: Boolean(!error), onChange: handleChange, placeholder: getPlaceholder({ placeholder, errors, label }), value: value, ...rest }) }), renderErrorText(error)] }));
+    });
+    const normalizeInteger = (val = '', isInteger = false) => isInteger && val ? val.replace(/[^\d]+/g, '') : val;
+    const getPlaceholder = ({ placeholder, errors, label }) => errors && !label ? `${placeholder}*` : placeholder;
+
+    const InputControl = JSX((props) => {
+        const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+        return jsx(InputWrapper, { isOpen: isOpen, onOpen: open, onClose: close, ...props });
+    });
+
     const AnnualRevenueField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...field(input?.name ?? '') })));
 
+    const ApplicationDateField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043C\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F \u0432 \u0411\u0430\u043D\u043A", ...field(input?.name ?? '') })));
+
     const CLIENT_KEY = 'client';
     const REPRESENTATIVE_KEY = 'representative';
     const APPLIER_TYPES = [
@@ -2238,7 +2240,7 @@
         serviceDirection: ServiceDirectionField,
         bankEmpolee: BankEmpoleeField,
         secondaryPhone: SecondaryPhoneField,
-        applicationDate: (props) => (jsx(InputControl, { label: "\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043C\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F \u0432 \u0411\u0430\u043D\u043A", ...props })),
+        applicationDate: ApplicationDateField,
         region: (props) => getPremium(props?.params?.typeForm) ? (jsx(RegionPremiumField, { ...props })) : (jsx(RegionField, { ...props })),
         consentToReceiveMaterials: ConsentToReceiveMaterialsField,
         sufferedFrom: SufferedFromField,
@@ -10066,47 +10068,6 @@
         return isURL(href) ? globalThis?.location?.href : joinPath(basePath, router.pathname);
     };
 
-    const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
-        const [isVisible, { setFalse, toggle }] = useBool(false);
-        const ref = useOutsideClick(setFalse);
-        const dropdownRef = useRef(null);
-        const changeDropdownPosition = useCallback(({ isOpened, buttonRef, menuRef }) => {
-            if (isOpened && buttonRef.current && menuRef.current) {
-                const dropdownRect = menuRef.current.getBoundingClientRect();
-                const dropdownButtonRect = buttonRef.current.getBoundingClientRect();
-                const newDropdownPosition = globalThis.innerWidth - dropdownRect.width;
-                if (dropdownRect.right >= globalThis.innerWidth) {
-                    menuRef.current.style.left = `${newDropdownPosition}px`;
-                }
-                else if (dropdownButtonRect.left > dropdownRect.left) {
-                    if (newDropdownPosition > dropdownButtonRect.left) {
-                        menuRef.current.style.left = '';
-                    }
-                    else {
-                        menuRef.current.style.left = `${newDropdownPosition}px`;
-                    }
-                }
-            }
-        }, [isVisible]);
-        useEventListener(globalThis, 'resize', () => changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef }));
-        useEffect(() => {
-            changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef });
-        }, [isVisible]);
-        return (jsxs("div", { className: style(isVisible ? 'rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, role: "button", "aria-labelledby": "labeldiv", children: Array(3)
-                        .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { ref: dropdownRef, className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', {
-                        hidden: !isVisible,
-                    }), "aria-hidden": !isVisible, children: renderDropdownItems(items, activeItem) })] }));
-    });
-    const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
-        const link = useLink();
-        const { text, href, target, onClick } = link(rest);
-        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', {
-                'text-primary-main': isActive,
-            }), href: href, target: target, onClick: onClick, role: "link", ...getAspectsAttributes(rest?.data), children: text }));
-    });
-    const renderDropdownItems = (items, activeItem) => items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i))));
-
     const BUTTON_SIZE_STYLE = {
         default: 'w-6 h-6',
         medium: 'w-10 h-10',
@@ -10137,6 +10098,64 @@
         return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'ChatBotIcon', iconVersion }, ariaLabel: ariaLabel, onClick: handleClick, buttonSize: buttonSize, isGrayBg: true, version: version, isLoading: isLoading, disabled: isLoading, dataTestId: "chat icon" }));
     });
 
+    const DropdownMenu = ({ dropdownRef, items = [], activeItem, ariaLabel, }) => (jsx("div", { ref: dropdownRef, className: "absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40", "aria-label": ariaLabel, children: renderDropdownItems(items, activeItem) }));
+    const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
+        const link = useLink();
+        const { text, href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', {
+                'text-primary-main': isActive,
+            }), href: href, target: target, onClick: onClick, role: "link", ...getAspectsAttributes(rest?.data), children: text }));
+    });
+    const renderDropdownItems = (items, activeItem) => items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i))));
+
+    function useDropdownSubMenu({ items, activeItem, onClose, isOpen }) {
+        const popup = usePopupManager();
+        useEffect(() => {
+            if (isOpen) {
+                popup.close();
+            }
+        }, [isOpen]);
+        const close = useCallback(() => {
+            popup.close();
+            onClose?.();
+        }, [onClose]);
+        const parentRef = useRef(null);
+        const popupRef = useOutsideClick(close);
+        useEffect(() => {
+            if (!isOpen || !parentRef.current || !items?.length) {
+                return;
+            }
+            const parentElement = parentRef.current;
+            const { top, left, width, height } = parentElement.getBoundingClientRect();
+            popup.open({
+                popup: jsx(DropdownMenu, { dropdownRef: popupRef, items: items, activeItem: activeItem }),
+                top: top + window.scrollY + height,
+                left,
+                width,
+            });
+        }, [isOpen, items, close]);
+        return parentRef;
+    }
+
+    const HeaderMoreMenuItem = JSX(({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
+        const [isOpenDropdown, { setFalse, toggle }] = useBool(false);
+        const dropdownMenu = useDropdownSubMenu({
+            items,
+            onClose: setFalse,
+            isOpen: isOpenDropdown,
+            activeItem,
+        });
+        useEffect(() => {
+            dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+            return () => {
+                dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+            };
+        }, []);
+        return (jsx("div", { className: style(isOpenDropdown ? 'rounded-md shadow-blue-gray' : '', className), ref: dropdownMenu, role: "navigation", children: jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, role: "button", "aria-labelledby": "labeldiv", children: Array(3)
+                    .fill(null)
+                    .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }) }));
+    });
+
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
@@ -10144,7 +10163,8 @@
     });
     const getTextStyle$1 = (active = false) => style('font-sans text-l lg:font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
-    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, items, activeItem, ...rest }) => {
+        const [isOpenDropdown, { setFalse, setTrue }] = useBool(false);
         const observerCallback = useCallback((entries) => {
             if (!entries.length || !onVisibilityChange) {
                 return;
@@ -10154,7 +10174,21 @@
             onVisibilityChange(entry.isIntersecting);
         }, [onVisibilityChange]);
         const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(HeaderItem, { ...rest, children: children }) }));
+        const dropdownMenu = useDropdownSubMenu({
+            items,
+            onClose: setFalse,
+            isOpen: isOpenDropdown,
+            activeItem,
+        });
+        useEffect(() => {
+            dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+            dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+            return () => {
+                dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+                dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+            };
+        }, []);
+        return (jsx("div", { className: "inline-block", ref: dropdownMenu, children: jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(HeaderItem, { ...rest, children: children }) }) }));
     });
 
     const BUTTON_STYLE = {
@@ -10179,7 +10213,7 @@
                 ? handleIntersectionActivation$1(index)
                 : handleIntersectionDeactivation$1(index));
         }), [subItems]);
-        return (jsxs("nav", { className: "mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-lg", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+        return (jsxs("nav", { className: "mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-lg", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, activeItem: activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(HeaderMoreMenuItem, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
     });
     const handleIntersectionActivation$1 = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation$1 = (index) => (prev) => Math.min(prev, index);
@@ -10304,7 +10338,7 @@
         }), [navigationItems]);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
-        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-40 pb-xs mt-xs", role: "menu", children: navigationItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "mx-xs", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", search: search, navigationItems: navigationItems, ...headerData })] }));
+        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-40 pb-xs mt-xs", role: "menu", children: navigationItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(HeaderMoreMenuItem, { className: "mx-xs rounded-md shadow-blue-gray", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", search: search, navigationItems: navigationItems, ...headerData })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -11177,7 +11211,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.873";
+    const packageVersion = "0.14.875";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;