@redneckz/wildless-cms-uni-blocks 0.14.359 → 0.14.360

package/bundle/UniBlock/UniBlockProps.d.ts

@@ -21,4 +21,5 @@ export interface UniBlockProps extends UniBlockContent {
     defaultPadding?: string;
     block?: BlockDef;
     options?: BlockRendererOptions;
+    suppressHydrationWarning?: boolean;
 }

package/bundle/bundle.umd.js

@@ -152,11 +152,6 @@
         return (jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor } : {}), role: role, style: inlineStyles, children: children }));
     });
 
-    const isSSR = () => Boolean(typeof globalThis.process === 'object' && globalThis.process && globalThis.process.version);
-
-    const isClient = !isSSR();
-    const ClientOnly = JSX(({ children }) => (isClient ? children : null));
-
     const GOLDEN_RATIO = 1.618;
     const Shimmer = JSX(({ className, size }) => (jsx("figure", { className: style('m-0 mt-xl min-w-[80%]', className), children: renderShimmer(size) })));
     const renderShimmer = (size = 3) => goldenSequence(100, size)
@@ -827,7 +822,7 @@
         const { items } = (props.options?.page?.adSourceBook ?? {});
         const tileIndex = useMemo(() => randomNumber(0, items?.length), [items]);
         const content = items?.[tileIndex];
-        return content ? (jsx(ClientOnly, { children: jsx(ProductBlock, { ...content, ...props }) })) : (jsx(BlockWrapper, { ...props, children: jsx(Shimmer, {}) }));
+        return content ? (jsx(ProductBlock, { suppressHydrationWarning: true, ...content, ...props })) : (jsx(BlockWrapper, { ...props, children: jsx(Shimmer, {}) }));
     });
     const randomNumber = (min = 0, max = 0) => Math.floor(Math.random() * (max - min) + min);
 
@@ -3875,6 +3870,52 @@
         return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
     };
 
+    const LinkList = JSX(({ className = '', items, basePath }) => {
+        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
+        const link = useLink({ isRemote: isAnotherPortal, basePath });
+        return (jsx("ul", { className: style('flex flex-col gap-s w-full', className), children: items?.map(renderLinkListItem(link)) }));
+    });
+    const renderLinkListItem = (link) => (item, i) => {
+        const { text, dataFooter, ...linkProps } = item;
+        const { href, target, onClick } = link(linkProps);
+        return (jsx("li", { className: "list-none", children: jsx("a", { className: "hover:text-primary-main font-light", role: "link", href: href, target: target || '_self', onClick: onClick, ...getAspectsAttributes(dataFooter), children: text ? text : null }) }, `list_item_${String(i)}`));
+    };
+
+    const FOOTER_AREA_KEYS = ['all', 'footer'];
+    const Sitemap = JSX(({ className, topItems }) => {
+        const link = useLink({ isRemote: true });
+        return (jsx("div", { role: "menu", className: style('w-full flex items-start justify-between flex-col md:flex-row gap-y-m lg:order-2', className), children: topItems?.filter(isVisibleItem$1).map(link).map(renderColumn) }));
+    });
+    const renderColumn = (menuItem, index) => {
+        const { text, items = [], href, target = '_self', onClick, dataFooter } = menuItem;
+        const visibleSubItems = items.filter(isVisibleItem$1);
+        return (jsxs("div", { role: "menuitem", className: "flex flex-col gap-s w-full @md:w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target, onClick: onClick, ...getAspectsAttributes(dataFooter), children: text }), visibleSubItems ? jsx(LinkList, { items: visibleSubItems, basePath: appendSlash(href) }) : null] }, String(index)));
+    };
+    const isVisibleItem$1 = (_) => !_.displayArea || FOOTER_AREA_KEYS.includes(_.displayArea.toLowerCase());
+
+    const Contacts = JSX(({ className = '', items = [] }) => items?.length ? (jsx("div", { className: style('space-y-m', className), children: items.map(renderContactsGroup) })) : null);
+    const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
+    const renderContact = (item, index) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item.description })] }, String(index)));
+    const renderText = (type, text = '') => {
+        switch (type) {
+            case 'tel':
+                return (jsx("a", { className: "text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: jsx(Text, { size: "text-h6", children: text }) }));
+            case 'email':
+                return (jsx("a", { className: "no-underline", href: `mailto:${text}`, children: jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: text }) }));
+            default:
+                return jsx("span", { children: text });
+        }
+    };
+    const formatTel = (s) => s.replaceAll(/\D/g, '');
+
+    const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
+        const link = useLink();
+        const { href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-secondary-text', className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
+    });
+
+    const HorizontalNavigation = JSX(({ className = '', title, links }) => (jsx("div", { className: className, children: links?.length ? (jsxs("div", { className: "flex justify-between lg:items-center flex-col lg:flex-row gap-lg py-lg border-y border-y-main-divider", children: [jsx("div", { className: "lg:hidden", children: jsx(Text, { size: "text-l", font: "font-normal", children: title }) }), links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-l font-light lg:max-w-[292px]", ..._ }, String(i))))] })) : null })));
+
     const ICON_SIZE = { width: '40', height: '45' };
 
     const logoTitleSizeStyle = '';
@@ -4058,24 +4099,6 @@
         return (jsxs("div", { onClick: onClick, className: style('relative min-h-full bg-white pt-0 p-lg', className), role: "dialog", children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: handleClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-6xl", children: children })] }));
     });
 
-    const FOOTER_AREA_KEYS = ['all', 'footer'];
-    const Sitemap = JSX(({ className, topItems }) => {
-        const link = useLink({ isRemote: true });
-        return (jsx("div", { role: "menu", className: style('flex items-start justify-between', className), children: topItems?.filter(isVisibleItem$1).map(link).map(renderColumn) }));
-    });
-    const renderColumn = (menuItem, index) => {
-        const { text, items = [], href, target, onClick } = menuItem;
-        const visibleSubItems = items.filter(isVisibleItem$1);
-        return (jsxs("div", { role: "menuitem", className: "flex flex-col gap-s @sm:w-full @md:w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), visibleSubItems.map((_, i) => (jsx(ColumnItem, { ..._, basePath: appendSlash(href), index: i }, String(i))))] }, String(index)));
-    };
-    const ColumnItem = JSX(({ text, index, basePath, ...rest }) => {
-        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
-        const link = useLink({ isRemote: isAnotherPortal, basePath });
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: style('text-l font-light text-secondary-text hover:text-primary-main no-underline', 'whitespace-wrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
-    });
-    const isVisibleItem$1 = (_) => !_.displayArea || FOOTER_AREA_KEYS.includes(_.displayArea.toLowerCase());
-
     const SearchDialog = JSX(({ initialQuery, topItems }) => {
         const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
         const [searchResult, searchInputProps] = useSearch({
@@ -4115,30 +4138,11 @@
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const Contacts = JSX(({ className = '', items = [] }) => items?.length ? (jsx("div", { className: style('space-y-m', className), children: items.map(renderContactsGroup) })) : null);
-    const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
-    const renderContact = (item, index) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item.description })] }, String(index)));
-    const renderText = (type, text = '') => {
-        switch (type) {
-            case 'tel':
-                return (jsx("a", { className: "text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: jsx(Text, { size: "text-h6", children: text }) }));
-            case 'email':
-                return (jsx("a", { className: "no-underline", href: `mailto:${text}`, children: jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: text }) }));
-            default:
-                return jsx("span", { children: text });
-        }
+    const renderLogoSearchBar = (sitemap, LEFT_COL_WIDTH = '') => {
+        const { logo } = sitemap ?? {};
+        const { dataFooter, ...logoProps } = logo ?? {};
+        return (jsxs("div", { className: "flex items-stretch gap-3xl", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logoProps, data: dataFooter }), jsx(SearchBar$1, { className: "grow", ...sitemap })] }));
     };
-    const formatTel = (s) => s.replaceAll(/\D/g, '');
-
-    const horizontalNavigationLinkStyles = 'text-secondary-text';
-
-    const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
-        const link = useLink();
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: style(horizontalNavigationLinkStyles, className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
-    });
-
-    const HorizontalNavigation = JSX(({ className = '', links }) => (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-lg py-lg border-solid border-x-0 border-y border-y-main-divider flex-col @sm:flex-row", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-l font-light max-w-[292px]", ..._ }, String(i)))) })) : null })));
 
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink({ isRemote: true });
@@ -4148,14 +4152,12 @@
 
     const TextInformation = JSX(({ className = '', links, license }) => (jsxs("div", { className: style('@container space-y-lg', className), children: [license ? (jsx("div", { children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0${license}` }) })) : null, links?.length ? (jsx("div", { className: "flex flex-col @5xl:flex-row justify-start items-start gap-x-lg gap-y-xs", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
-    const LEFT_COL_WIDTH = 'w-52';
+    const LEFT_COL_WIDTH = 'w-full lg:w-52';
     const Footer = UniBlock(({ className, footer, ...rest }) => {
         const sitemap = rest.options?.page?.sitemap ?? {};
-        const { logo } = sitemap;
-        const { dataFooter, ...logoProps } = logo ?? {};
-        const { documents, relatedEnterprises, contacts, mediaLinks = [], feedbackButton, license, otherLinks = [], } = footer ?? {};
+        const { documents, relatedEnterprises, contacts, mediaLinks = [], horizontalNavigationTitle, feedbackButton, license, otherLinks = [], } = footer ?? {};
         const linkStyle = '!text-left text-s font-light';
-        return (jsxs(BlockWrapper, { tag: "footer", className: style('space-y-xl', className), ...rest, children: [jsxs("div", { className: "flex items-stretch gap-3xl", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logoProps, data: dataFooter }), jsx(SearchBar$1, { className: "grow", ...sitemap })] }), jsxs("div", { className: "flex items-center @lg:items-stretch gap-6xl flex-col @lg:flex-row", children: [jsxs("div", { className: style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, stretched: true, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(LinkButton, { className: linkStyle, version: "link", ..._, children: _?.text }, String(i))))] }), jsx(Sitemap, { className: "flex-grow flex-wrap", ...sitemap })] }), jsx(HorizontalNavigation, { links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: style('grid gap-y-xl p-4xl pb-24 lg:p-xl', className), ...rest, children: [renderLogoSearchBar(sitemap, LEFT_COL_WIDTH), jsxs("div", { className: "flex flex-col lg:flex-row items-center @lg:items-stretch gap-lg lg:gap-6xl ", children: [jsx(Sitemap, { ...sitemap }), jsx("div", { className: "border-t border-main-divider lg:hidden w-full" }), jsxs("div", { className: style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, stretched: true, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(LinkButton, { className: linkStyle, version: "link", ..._, children: _?.text }, String(i))))] })] }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
     });
 
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-m', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), calendar ? renderCalendar(calendar) : null] })));
@@ -4205,7 +4207,7 @@
     const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
         const link = useLink({ isRemote: true });
         const { href, target, text, onClick } = link(rest);
-        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, ...getAspectsAttributes(data), children: jsx("span", { className: getTextStyle$1(active, flat), children: text || children }) }));
+        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, ...getAspectsAttributes(data), children: jsx("span", { suppressHydrationWarning: true, className: getTextStyle$1(active, flat), children: text || children }) }));
     });
     const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
         ? 'rounded-md border-primary-main group-data-transparent:border-white'
@@ -4810,6 +4812,11 @@
         childSchema: (content) => content?.filtrationSchema || {},
     });
 
+    const isSSR = () => Boolean(typeof globalThis.process === 'object' && globalThis.process && globalThis.process.version);
+
+    const isClient = !isSSR();
+    const ClientOnly = JSX(({ children }) => (isClient ? children : null));
+
     const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
     const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
     function renderClusterer({ yandexMaps, map, points, }) {
@@ -5022,7 +5029,7 @@
             return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
         }, [data, remoteWorkplaces, filtrationState]);
         const [activeButton, setActiveButton] = useState('all');
-        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] }));
+        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [jsx("span", { suppressHydrationWarning: true, children: title }), lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: jsx("span", { suppressHydrationWarning: true, children: ` (${lengthItems})` }) })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), jsxs(ClientOnly, { children: [filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] })] }));
     });
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = getVersion(activeButton === 'all');
@@ -6258,7 +6265,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.358";
+    const packageVersion = "0.14.359";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;