@redneckz/wildless-cms-uni-blocks 0.9.3 → 0.9.4

package/mobile/bundle/bundle.umd.js

@@ -236,84 +236,41 @@
         return JSXTmpl;
     };
 
-    const DEFAULT_SLOT_NAME = null;
+    const HeadingClass = {
+        h0: 'text-m-title',
+        h1: 'text-m-title',
+        h2: 'text-m-title',
+        h3: 'text-h6',
+        h4: 'text-m-title-xs',
+        h5: 'text-m-title-xs',
+        h6: 'text-m-title-xs',
+    };
+    const Heading = JSX((props) => {
+        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
+        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
+    });
 
     const style = (...atoms) => atoms
         .flatMap((_) => _)
         .filter(Boolean)
         .join(' ');
 
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-
-    const DEFAULT_ANCESTORS = [];
-    const defaultStyle = 'col-span-12';
-    function renderBlock(block, options) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
-        const { type } = block;
-        if (!(type && type in blocksRegistry)) {
-            console.warn(`No block with "${type}" is registered`);
-        }
-        const BlockComponent = type && blocksRegistry[type];
-        return blockDecorator({
-            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
-            className, block.style || defaultStyle),
-            block,
-            ancestors,
-            // Adjusted by decorator block and blockClassName
-            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
-            },
-        }, key);
-    }
-
-    const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
-        ...options,
-        key: `${key ? key : _.type}-${j}`,
-        ancestors: options.parent
-            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-            : ancestors,
-    }));
-
-    function renderChildren({ children, block, options, renderProps, }) {
-        if (children) {
+    const mapChildren = (mapper) => (children) => {
+        if (children === null || children === undefined) {
             return children;
         }
-        return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
-            : null;
-    }
-
-    class EventBus {
-        subscribers = {};
-        subjectsStateMap = {};
-        subscribe(type, listener) {
-            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
-            const latestEvent = this.subjectsStateMap[type];
-            if (latestEvent) {
-                listener(latestEvent);
-            }
-            return () => {
-                this.unsubscribe(type, listener);
-            };
-        }
-        unsubscribe(type, listener) {
-            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
-        }
-        fire(type, event) {
-            const isSubjectDeclared = type in this.subjectsStateMap;
-            if (isSubjectDeclared) {
-                this.subjectsStateMap[type] = event;
-            }
-            this.subscribers[type]?.forEach((s) => s(event));
-        }
-        subject(type, event) {
-            this.subjectsStateMap[type] = event;
-        }
-    }
+        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
+    };
 
-    const defaultEventBus = new EventBus();
+    const HEADER_HEIGHT = 170;
+    const FOOTER_HEIGHT = 48;
+    const BLOCKS_GAP = 4;
+    const PAGE_PADDINGS_X = 20;
+    const DEFAULT_HEIGHT = 866;
+    const getContainerHeight = (minHeight) => ({
+        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
+        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
+    });
 
     const SENSITIVITY_SCALE = 10;
     function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
@@ -339,73 +296,6 @@
             .concat(1);
     }
 
-    const blockRouterEventBus = new EventBus();
-
-    function useBlockIntersectionObserver(block) {
-        const observerCallback = useCallback((entries) => {
-            if (!block || !entries?.length) {
-                return;
-            }
-            const intersection = entries[entries.length - 1];
-            blockRouterEventBus.fire('intersection', { block, intersection });
-        }, [block]);
-        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
-    }
-
-    const blockStyles = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-        gray: 'bg-main-divider text-primary-text',
-        transparent: 'bg-transparent text-primary-text',
-        '': '',
-    };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, extraProps = {}, children, }) => {
-        const Tag = tag;
-        const ref = useBlockIntersectionObserver(block);
-        const [isHidden, setHidden] = useState(false);
-        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
-            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
-        }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, ...extraProps, children: children }));
-    });
-    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
-
-    const HeadingClass = {
-        h0: 'text-m-title',
-        h1: 'text-m-title',
-        h2: 'text-m-title',
-        h3: 'text-h6',
-        h4: 'text-m-title-xs',
-        h5: 'text-m-title-xs',
-        h6: 'text-m-title-xs',
-    };
-    const Heading = JSX((props) => {
-        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
-        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
-    });
-
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const Accordion = JSX(({ title, description, className = '', ...rest }) => (jsxs(BlockWrapper, { className: `py-6 px-4 ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? (jsx("div", { className: "mb-5", children: jsx(Paragraph, { size: "text-m", font: "font-light", align: "text-center", children: description }) })) : null, jsx("div", { className: "list-none m-0 p-0", children: renderChildren(rest) })] })));
-    Accordion.childrenTypes = ['Accordion'];
-
-    const mapChildren = (mapper) => (children) => {
-        if (children === null || children === undefined) {
-            return children;
-        }
-        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
-    };
-
-    const HEADER_HEIGHT = 170;
-    const FOOTER_HEIGHT = 48;
-    const BLOCKS_GAP = 4;
-    const PAGE_PADDINGS_X = 20;
-    const DEFAULT_HEIGHT = 866;
-    const getContainerHeight = (minHeight) => ({
-        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
-        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
-    });
-
     const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
         const observerCallback = useCallback((entries) => {
             if (entries.length && onIntersection) {
@@ -559,6 +449,41 @@
         return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })) : null] }));
     });
 
+    class EventBus {
+        subscribers = {};
+        subjectsStateMap = {};
+        subscribe(type, listener) {
+            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
+            const latestEvent = this.subjectsStateMap[type];
+            if (latestEvent) {
+                listener(latestEvent);
+            }
+            return () => {
+                this.unsubscribe(type, listener);
+            };
+        }
+        unsubscribe(type, listener) {
+            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+        }
+        fire(type, event) {
+            const isSubjectDeclared = type in this.subjectsStateMap;
+            if (isSubjectDeclared) {
+                this.subjectsStateMap[type] = event;
+            }
+            this.subscribers[type]?.forEach((s) => s(event));
+        }
+        subject(type, event) {
+            this.subjectsStateMap[type] = event;
+        }
+    }
+
+    const defaultEventBus = new EventBus();
+
+    const useDialog = (id = '') => ({
+        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+    });
+
     const dirname = (path) => path?.split('/').slice(0, -1).join('/');
 
     const isURL = (href) => Boolean(href?.includes(':'));
@@ -613,6 +538,7 @@
 
     function useLink(isRemote = false) {
         const router = useRouter();
+        const { close } = useDialog();
         return (props) => ({
             ...props,
             href: isRemote ? props.href : adjustHref(router)(props.href),
@@ -626,6 +552,7 @@
                     // Default routing
                     return;
                 }
+                close();
                 // Client routing
                 ev?.preventDefault();
                 router.push(href);
@@ -888,14 +815,65 @@
         return data || {};
     }
 
-    function useBool(defaultValue = false) {
-        const [value, setValue] = useState(defaultValue);
-        const setTrue = useCallback(() => setValue(true), []);
-        const setFalse = useCallback(() => setValue(false), []);
-        const toggle = useCallback(() => setValue((_) => !_), []);
-        return [value, { setValue, setTrue, setFalse, toggle }];
+    const blockRouterEventBus = new EventBus();
+
+    function useBlockIntersectionObserver(block) {
+        const observerCallback = useCallback((entries) => {
+            if (!block || !entries?.length) {
+                return;
+            }
+            const intersection = entries[entries.length - 1];
+            blockRouterEventBus.fire('intersection', { block, intersection });
+        }, [block]);
+        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
+    }
+
+    const blockStyles = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+        gray: 'bg-main-divider text-primary-text',
+        transparent: 'bg-transparent text-primary-text',
+        '': '',
+    };
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, extraProps = {}, children, }) => {
+        const Tag = tag;
+        const ref = useBlockIntersectionObserver(block);
+        const [isHidden, setHidden] = useState(false);
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
+            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
+        }), [block]);
+        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, ...extraProps, children: children }));
+    });
+    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
+
+    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+
+    function assertUnreachable(x) {
+        throw new Error(x);
     }
 
+    function useDialogHandlers({ onOpen, onClose } = {}) {
+        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
+            switch (action.type) {
+                case 'open':
+                    onOpen && onOpen(action);
+                    break;
+                case 'close':
+                    onClose && onClose();
+                    break;
+                default:
+                    assertUnreachable(action);
+            }
+        }), [onOpen, onClose]);
+    }
+
+    const useDebouncedEffect = (effect, deps, delay = 300) => useEffect(() => {
+        const timerId = setTimeout(effect, delay);
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, deps);
+
     const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
     const desc = (cmp) => (a, b) => -cmp(a, b);
 
@@ -1020,37 +998,27 @@
     const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
 
     const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const useSearch = (basePathList = ['/']) => {
-        const [query, setQuery] = useState('');
-        const [wasQueryFocused, setWasQueryFocused] = useState(false);
-        const handleFocus = useCallback(() => {
-            setWasQueryFocused(true);
-        }, []);
-        const key = useMemo(() => basePathList.map((_) => (wasQueryFocused ? _ : null)), // Load search index on input focus
-        [wasQueryFocused, ...basePathList]);
+    const useSearch = ({ basePathList = ['/'], initialQuery = '', wasOpened, }) => {
+        const [query, setQuery] = useState(initialQuery || '');
+        useEffect(() => {
+            if (initialQuery !== undefined && initialQuery !== null) {
+                setQuery(initialQuery);
+            }
+        }, [initialQuery]);
+        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
+        [wasOpened, ...basePathList]);
         const { data } = useAsyncData(key, fetchSearchIndex);
         const [result, setResult] = useState(null);
-        useEffect(() => {
-            const timerId = setTimeout(() => {
-                if (data) {
-                    setResult(data.map(search(query)));
-                }
-            }, 300);
-            return () => {
-                clearTimeout(timerId);
-            };
+        useDebouncedEffect(() => {
+            if (data) {
+                setResult(data.map(search(query)));
+            }
         }, [data, query]);
-        return [result, { value: query, onChange: setQuery, onFocus: handleFocus }];
+        return [result, { value: query, onChange: setQuery }];
     };
     const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
 
-    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
-
-    const Dialog = JSX(({ className, head, children, onClose }) => {
-        const handleClose = useCallback((ev) => {
-            ev.preventDefault();
-            onClose && onClose();
-        }, [onClose]);
+    const Dialog = JSX(({ className, isOpened, head, children, onClose }) => {
         useEffect(() => {
             const handleEscape = ({ key }) => {
                 if (key === 'Escape') {
@@ -1062,9 +1030,47 @@
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
         }, [onClose]);
-        return (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: handleClose }), head] }), children] }) }));
+        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: onClose }), head] }), children] }) })) : null;
     });
 
+    function useBool(defaultValue = false) {
+        const [value, setValue] = useState(defaultValue);
+        const setTrue = useCallback(() => setValue(true), []);
+        const setFalse = useCallback(() => setValue(false), []);
+        const toggle = useCallback(() => setValue((_) => !_), []);
+        return [value, { setValue, setTrue, setFalse, toggle }];
+    }
+
+    function useDialogProps(id) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+        const [params, setParams] = useState({ id });
+        const wasOpened = useRef(isOpened);
+        wasOpened.current ||= isOpened;
+        const handleOpen = useCallback((_) => {
+            if (_.id === id) {
+                setParams(_);
+                open();
+            }
+            else {
+                close();
+            }
+        }, [id]);
+        useDialogHandlers({
+            onOpen: handleOpen,
+            onClose: close,
+        });
+        const handleCloseAsEventSource = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
+        return {
+            ...params,
+            isOpened,
+            wasOpened: wasOpened.current,
+            onClose: handleCloseAsEventSource,
+        };
+    }
+
     const Sitemap = JSX(({ className, topItems }) => {
         const link = useLink(true);
         return (jsx("div", { className: style('flex items-start justify-between', className), children: topItems?.map(link).map(renderColumn) }));
@@ -1080,43 +1086,30 @@
         return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: isAnotherPortal ? joinPath(basePath, href) : href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const SearchBarInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const SearchInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
         return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text', isMobile ? '' : 'h-full'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
-    const MIN_QUERY_LEN = 3;
-    const SearchBarInner = JSX(({ className, isMobile, topItems }) => {
+    const SEARCH_DIALOG_ID = 'search';
+    JSX(({ topItems }) => {
+        const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
         const basePathList = topItems?.map((_) => _.href || '/');
-        const [searchResult, searchInputProps] = useSearch(basePathList);
-        const { value, onChange, onFocus } = searchInputProps;
+        const [searchResult, searchInputProps] = useSearch({
+            basePathList,
+            initialQuery: dialogProps.message,
+            wasOpened: dialogProps.wasOpened,
+        });
         const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
         useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
-        const [isSearchDialogOpen, { setTrue: openSearchDialog, setFalse: hideSearchDialog }] = useBool();
-        const handleInitialInputChange = useCallback((_) => {
-            onChange(_);
-            if (isQueryLongEnough(_)) {
-                openSearchDialog();
-            }
-        }, [onChange, isQueryLongEnough]);
-        const handleInitialInputFocus = useCallback(() => {
-            onFocus();
-            if (isQueryLongEnough(value)) {
-                openSearchDialog();
-            }
-        }, [value, onFocus]);
-        return (jsxs("div", { className: className, children: [jsx(SearchBarInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange, onFocus: handleInitialInputFocus }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: (e) => {
-                        e.preventDefault();
-                        onChange('');
-                    } })) : null, isSearchDialogOpen ? (jsx(Dialog, { head: jsx(SearchBarInput, { className: "my-5", isMobile: isMobile, autoFocus: true, ...searchInputProps }), onClose: hideSearchDialog, children: jsx(Sitemap, { topItems: searchItems }) })) : null] }));
+        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { className: "my-5", autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
     });
-    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
     const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
         ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
             ..._,
-            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: uri })),
+            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: joinPath('/', uri) })),
         }))
         : [];
     // Temp
@@ -1128,6 +1121,22 @@
         }
     }
 
+    const MIN_QUERY_LEN = 3;
+    const SearchBarInner = JSX(({ className, isMobile }) => {
+        const [value, setValue] = useState('');
+        const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+        useDialogHandlers({ onClose: resetQueryOnDialogClose });
+        const { open } = useDialog(SEARCH_DIALOG_ID);
+        const handleInitialInputChange = useCallback((_) => {
+            setValue(_);
+            if (isQueryLongEnough(_)) {
+                open(_);
+            }
+        }, []);
+        return (jsxs("div", { className: className, children: [jsx(SearchInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: resetQueryOnDialogClose })) : null] }));
+    });
+    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
+
     const SearchBar = JSX((props) => (jsx(SearchBarInner, { ...props, isMobile: true })));
 
     const getIconWithVersion = (icon, version = 'primary') => ({
@@ -1174,13 +1183,48 @@
         return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
     });
 
-    function getParentBlockDef(options) {
-        return options?.parent || {};
+    const DEFAULT_SLOT_NAME = null;
+
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+
+    const DEFAULT_ANCESTORS = [];
+    const defaultStyle = 'col-span-12';
+    function renderBlock(block, options) {
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
+        const { type } = block;
+        if (!(type && type in blocksRegistry)) {
+            console.warn(`No block with "${type}" is registered`);
+        }
+        const BlockComponent = type && blocksRegistry[type];
+        return blockDecorator({
+            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
+            className, block.style || defaultStyle),
+            block,
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
+            },
+        }, key);
     }
 
-    function getParentBlockContent(options, defaultContent) {
-        const { content } = getParentBlockDef(options);
-        return content || defaultContent;
+    const EMPTY_ANCESTORS = [];
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
+        ...options,
+        key: `${key ? key : _.type}-${j}`,
+        ancestors: options.parent
+            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+            : ancestors,
+    }));
+
+    function renderChildren({ children, block, options, renderProps, }) {
+        if (children) {
+            return children;
+        }
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            : null;
     }
 
     const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
@@ -1217,11 +1261,10 @@
     const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        const { bordered } = getParentBlockContent(rest.options, {});
-        return (jsx(BlockWrapper, { className: style('border-b border-solid border-main-divider w-full', bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0', className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) }));
+        return (jsx(BlockWrapper, { className: style('border-b border-solid border-main-divider w-full', className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) }));
     });
     RollupItem.childrenTypes = {
-        exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
+        exclude: ['RollupItem'],
     };
     const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, className = '', primaryIcon, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
@@ -1325,7 +1368,7 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { className: "mt-4", children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
     const renderSubMenuItem = (menu, i) => {
         const { icon, href, text } = menu;
@@ -1371,7 +1414,7 @@
     }
 
     const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation) {
+    function useLocation(defaultLocation = 'Москва') {
         const currentLocation = getLocalStorageLocation();
         const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
         const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
@@ -1383,7 +1426,7 @@
         const onChangeLocation = useCallback((region) => {
             globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
             setLocation(region);
-        }, [setLocation]);
+        }, []);
         return [location, onChangeLocation];
     }
     const getLocalStorageLocation = () => {
@@ -1423,6 +1466,8 @@
         return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
     });
 
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
     const headlineVersionStyles = {
         XXL: {
             wrapper: 'gap-[18px]',
@@ -1614,10 +1659,6 @@
         return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
     });
 
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
     const checkCanRenderIcon = (icon) => Boolean(icon?.icon || icon?.src);
 
     const STEPS_BLOCK_STYLE = {
@@ -1744,12 +1785,9 @@
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
         return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
     });
-    VerticalLayout.childrenTypes = {
-        exclude: ['Accordion', 'OtherProducts'],
-    };
+    VerticalLayout.childrenTypes = [];
 
     const Blocks = {
-        Accordion,
         ComparisonTable,
         Footer,
         Header,
@@ -1758,11 +1796,11 @@
         LinkList,
         MobileAppTile,
         ProductBlock,
-        RollupItem,
         StepsBlock,
         TariffsTable,
         TextBlock,
         Placeholder,
+        RollupItem,
         VerticalLayout,
     };
 
@@ -1865,7 +1903,6 @@
     const ContentPage = JSX((props) => {
         const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
         const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
-        const [overflowStyle, setOverflowStyle] = useState('');
         const options = {
             key: '',
             page: data,
@@ -1874,10 +1911,12 @@
             parent: data,
         };
         useBlockRouterProvider();
-        useEffect(() => defaultEventBus.subscribe('setPageOverflowHidden', (isHidden) => {
-            setOverflowStyle(isHidden ? 'overflow-hidden h-screen' : '');
-        }), []);
-        return (jsxs("section", { className: style('relative', pageStyle, className, overflowStyle), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] = useBool();
+        useDialogHandlers({
+            onOpen: setSomeDialogOpened,
+            onClose: resetSomeDialogOpened,
+        });
+        return (jsxs("section", { className: style('relative', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
                     }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
@@ -1897,7 +1936,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.9.3";
+    const packageVersion = "0.9.4";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;