@gravity-ui/page-constructor 8.13.2 → 8.14.0

package/build/cjs/blocks/Footer/Footer.css

@@ -0,0 +1,53 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block {
+  color: var(--g-color-text-primary);
+}
+.pc-footer-block_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-footer-block_indentTop_s {
+  margin-top: 24px;
+}
+.pc-footer-block_indentTop_m {
+  margin-top: 32px;
+}
+.pc-footer-block_indentTop_l {
+  margin-top: 48px;
+}
+.pc-footer-block_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-footer-block__floor {
+  width: 100%;
+  max-width: 1232px;
+  margin: 0 auto;
+  padding: 24px 0;
+}
+.pc-footer-block__floor:not(:first-of-type) {
+  border-top: 1px solid var(--g-color-line-generic);
+}
+.pc-footer-block__logo {
+  display: flex;
+  align-items: center;
+}
+.pc-footer-block__logo-image {
+  display: block;
+}
+.pc-footer-block .pc-footer-block__floor_attribution {
+  border: none;
+  padding: 0;
+}
+.pc-footer-block__attribution-block {
+  margin-top: 0;
+  --pc-brand-footer-border-color-light: var(--g-color-line-generic);
+  --pc-brand-footer-border-color-dark: var(--g-color-line-generic);
+}
+@media (max-width: 577px) {
+  .pc-footer-block .pc-Grid .container-fluid {
+    padding: 0 24px;
+  }
+  .pc-footer-block__floor_attribution {
+    height: 64px;
+  }
+}

package/build/cjs/blocks/Footer/Footer.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ClassNameProps, FooterBlockProps } from "../../models/index.js";
+export type FooterBlockFullProps = FooterBlockProps & ClassNameProps;
+export declare const FooterBlock: (props: React.PropsWithChildren<FooterBlockFullProps>) => import("react/jsx-runtime").JSX.Element;
+export default FooterBlock;

package/build/cjs/blocks/Footer/Footer.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components/index.js");
+const theme_1 = require("../../context/theme/index.js");
+const grid_1 = require("../../grid/index.js");
+const utils_1 = require("../../utils/index.js");
+const CopyrightFloor_1 = require("./components/CopyrightFloor/CopyrightFloor.js");
+const DisclaimerFloor_1 = require("./components/DisclaimerFloor/DisclaimerFloor.js");
+const NavigationFloor_1 = require("./components/NavigationFloor/NavigationFloor.js");
+const SocialFloor_1 = require("./components/SocialFloor/SocialFloor.js");
+const useLogoImageProps_1 = require("./hooks/useLogoImageProps.js");
+const b = (0, utils_1.block)('footer-block');
+const FooterBlock = (props) => {
+    const { navigation, contacts, disclaimer, copyright, attribution, backgroundColor, className, indentTop, } = props;
+    const theme = (0, theme_1.useTheme)();
+    const { logo, columns, colSizes, columnsPerRow } = navigation || {};
+    const themedBackground = backgroundColor && (0, utils_1.getThemedValue)(backgroundColor, theme);
+    const footerStyle = themedBackground
+        ? {
+            ...(themedBackground && { backgroundColor: themedBackground }),
+        }
+        : undefined;
+    const logoImage = logo?.image && (0, utils_1.getThemedValue)(logo.image, theme);
+    const logoImageProps = (0, useLogoImageProps_1.useLogoImageProps)(logoImage);
+    const logoContent = logo && logoImageProps && ((0, jsx_runtime_1.jsx)("div", { className: b('logo'), children: logo.url ? ((0, jsx_runtime_1.jsx)(uikit_1.Link, { href: logo.url, children: (0, jsx_runtime_1.jsx)(components_1.Image, { ...logoImageProps, alt: logo.alt ?? '', className: b('logo-image') }) })) : ((0, jsx_runtime_1.jsx)(components_1.Image, { ...logoImageProps, alt: logo.alt ?? '', className: b('logo-image') })) }));
+    const footer = ((0, jsx_runtime_1.jsx)("footer", { className: b({ indentTop }, className), style: footerStyle, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { className: b('main-container'), children: (0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('row'), children: [columns && ((0, jsx_runtime_1.jsx)(NavigationFloor_1.NavigationFloor, { columns: columns, colSizes: colSizes, columnsPerRow: columnsPerRow, logoContent: logoContent, logoPlacement: logo?.placement ?? 'left' })), contacts && (0, jsx_runtime_1.jsx)(SocialFloor_1.SocialFloor, { contacts: contacts }), disclaimer && (0, jsx_runtime_1.jsx)(DisclaimerFloor_1.DisclaimerFloor, { disclaimer: disclaimer }), copyright && (0, jsx_runtime_1.jsx)(CopyrightFloor_1.CopyrightFloor, { copyright: copyright }), attribution && ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12 }, className: b('floor', { attribution: true }), children: (0, jsx_runtime_1.jsx)(components_1.BrandFooter, { className: b('attribution-block') }) }))] }) }) }));
+    return footer;
+};
+exports.FooterBlock = FooterBlock;
+exports.default = exports.FooterBlock;
+//# sourceMappingURL=Footer.js.map

package/build/cjs/blocks/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"../../../../src","sources":["blocks/Footer/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {BrandFooter, Image} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, FooterBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport {CopyrightFloor} from './components/CopyrightFloor/CopyrightFloor';\nimport {DisclaimerFloor} from './components/DisclaimerFloor/DisclaimerFloor';\nimport {NavigationFloor} from './components/NavigationFloor/NavigationFloor';\nimport {SocialFloor} from './components/SocialFloor/SocialFloor';\nimport {useLogoImageProps} from './hooks/useLogoImageProps';\n\nimport './Footer.scss';\n\nconst b = block('footer-block');\n\nexport type FooterBlockFullProps = FooterBlockProps & ClassNameProps;\n\nexport const FooterBlock = (props: React.PropsWithChildren<FooterBlockFullProps>) => {\n    const {\n        navigation,\n        contacts,\n        disclaimer,\n        copyright,\n        attribution,\n        backgroundColor,\n        className,\n        indentTop,\n    } = props;\n    const theme = useTheme();\n    const {logo, columns, colSizes, columnsPerRow} = navigation || {};\n    const themedBackground = backgroundColor && getThemedValue(backgroundColor, theme);\n    const footerStyle = themedBackground\n        ? ({\n              ...(themedBackground && {backgroundColor: themedBackground}),\n          } as React.CSSProperties)\n        : undefined;\n    const logoImage = logo?.image && getThemedValue(logo.image, theme);\n    const logoImageProps = useLogoImageProps(logoImage);\n\n    const logoContent = logo && logoImageProps && (\n        <div className={b('logo')}>\n            {logo.url ? (\n                <Link href={logo.url}>\n                    <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n                </Link>\n            ) : (\n                <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n            )}\n        </div>\n    );\n\n    const footer = (\n        <footer className={b({indentTop}, className)} style={footerStyle}>\n            <Grid className={b('main-container')}>\n                <Row className={b('row')}>\n                    {columns && (\n                        <NavigationFloor\n                            columns={columns}\n                            colSizes={colSizes}\n                            columnsPerRow={columnsPerRow}\n                            logoContent={logoContent}\n                            logoPlacement={logo?.placement ?? 'left'}\n                        />\n                    )}\n                    {contacts && <SocialFloor contacts={contacts} />}\n                    {disclaimer && <DisclaimerFloor disclaimer={disclaimer} />}\n                    {copyright && <CopyrightFloor copyright={copyright} />}\n                    {attribution && (\n                        <Col sizes={{all: 12}} className={b('floor', {attribution: true})}>\n                            <BrandFooter className={b('attribution-block')} />\n                        </Col>\n                    )}\n                </Row>\n            </Grid>\n        </footer>\n    );\n\n    return footer;\n};\n\nexport default FooterBlock;\n"]}

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.css

@@ -0,0 +1,201 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block__links-floor-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+}
+.pc-footer-block__links-floor-inner .pc-footer-block__logo {
+  height: var(--g-spacing-9);
+}
+.pc-footer-block__links-floor-inner_centered:not(.pc-footer-block__links-floor-inner_threeColumn) {
+  justify-content: center;
+}
+.pc-footer-block__links-floor-inner_centered:not(.pc-footer-block__links-floor-inner_threeColumn) .pc-footer-block__links-floor-left {
+  flex-grow: 0;
+  max-width: 480px;
+}
+.pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-side {
+  flex-shrink: 0;
+  min-width: 0;
+}
+.pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-center {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+.pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-left {
+  flex-shrink: 0;
+  min-width: 0;
+  justify-content: center;
+  width: 100%;
+}
+.pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-right {
+  min-width: 0;
+  justify-content: flex-end;
+}
+.pc-footer-block__links-floor-left {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  visibility: hidden;
+}
+.pc-footer-block__links-floor-left_measured {
+  visibility: visible;
+}
+.pc-footer-block__links-floor-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+  height: var(--g-spacing-9);
+}
+.pc-footer-block__language-switcher {
+  height: var(--g-spacing-9);
+}
+.pc-footer-block__language-switcher:hover {
+  color: var(--g-color-text-link);
+}
+.pc-footer-block__links-floor-list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  gap: 12px 16px;
+  overflow: visible;
+}
+.pc-footer-block__links-floor-list_wrap {
+  flex-wrap: wrap;
+}
+.pc-footer-block__links-floor-list a {
+  display: inline-block;
+  text-decoration: none;
+  color: var(--g-color-text-primary);
+}
+.pc-footer-block__links-floor-list a:hover {
+  color: var(--g-color-text-secondary);
+  background-color: transparent;
+}
+.pc-footer-block__links-floor-inner_centered .pc-footer-block__links-floor-list_wrap {
+  justify-content: center;
+}
+.pc-footer-block__links-floor-item {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  margin: 0;
+  white-space: nowrap;
+  list-style: none;
+}
+.pc-footer-block__links-floor-copyright {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-display-1-line-height);
+  color: var(--g-color-text-secondary);
+  text-align: right;
+  white-space: nowrap;
+}
+@media (min-width: 1081px) {
+  .pc-footer-block .pc-footer-block__links-floor-side,
+  .pc-footer-block .pc-footer-block__links-floor-right {
+    max-width: 345px;
+  }
+}
+@media (max-width: 1081px) {
+  .pc-footer-block__links-floor-inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .pc-footer-block__links-floor-inner .pc-footer-block__links-floor-side,
+  .pc-footer-block__links-floor-inner .pc-footer-block__links-floor-right {
+    flex-shrink: 1;
+  }
+  .pc-footer-block__links-floor-inner_withLanguageSwitcher {
+    gap: 8px;
+  }
+  .pc-footer-block__links-floor-inner_hasOnlyLinks .pc-footer-block__links-floor-left {
+    width: auto;
+  }
+  .pc-footer-block__links-floor-inner_centered {
+    align-items: center;
+  }
+  .pc-footer-block__links-floor-inner_centered .pc-footer-block__links-floor-right {
+    width: auto;
+  }
+  .pc-footer-block__links-floor-inner_threeColumn {
+    gap: 16px;
+  }
+  .pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__logo,
+  .pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-side,
+  .pc-footer-block__links-floor-inner_threeColumn .pc-footer-block__links-floor-center {
+    justify-content: center;
+    max-width: 100%;
+  }
+  .pc-footer-block__links-floor-inner_overflow_line-wrap .pc-footer-block__links-floor-right {
+    flex-shrink: 1;
+  }
+  .pc-footer-block__links-floor-inner_overflow_dropdown:not(.pc-footer-block__links-floor-inner_centered) .pc-footer-block__links-floor-right {
+    width: 100%;
+  }
+  .pc-footer-block__links-floor-left, .pc-footer-block__links-floor-center {
+    width: 100%;
+  }
+  .pc-footer-block__links-floor-right {
+    flex: none;
+    max-width: 100%;
+    justify-content: flex-start;
+    height: auto;
+  }
+  .pc-footer-block__links-floor-copyright {
+    text-align: left;
+    line-height: var(--g-text-body-2-line-height);
+  }
+}
+@media (min-width: 577px) and (max-width: 1081px) {
+  .pc-footer-block__links-floor-inner:not(.pc-footer-block__links-floor-inner_withLanguageSwitcher) .pc-footer-block__links-floor-inner_overflow_line-wrap {
+    gap: 16px;
+  }
+  .pc-footer-block__links-floor-inner_overflow_dropdown {
+    gap: 8px;
+  }
+  .pc-footer-block__links-floor-inner_overflow_dropdown .pc-footer-block__links-floor-left {
+    min-height: var(--g-spacing-9);
+  }
+  .pc-footer-block .pc-footer-block__links-floor-inner_withLanguageSwitcher.pc-footer-block__links-floor-inner_overflow_dropdown {
+    gap: 0;
+  }
+}
+@media (max-width: 577px) {
+  .pc-footer-block__links-floor-inner:not(.pc-footer-block__links-floor-inner_withLanguageSwitcher) {
+    gap: 16px;
+  }
+  .pc-footer-block__links-floor-inner:not(.pc-footer-block__links-floor-inner_centered) .pc-footer-block__links-floor-right {
+    width: 100%;
+  }
+  .pc-footer-block__links-floor-inner_centered .pc-footer-block__links-floor-center,
+  .pc-footer-block__links-floor-inner_centered .pc-footer-block__links-floor-list {
+    align-items: center;
+  }
+  .pc-footer-block__links-floor-inner_centered .pc-lang-switcher {
+    margin: 0 auto;
+  }
+  .pc-footer-block__links-floor-list {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  .pc-footer-block__links-floor-right {
+    gap: 8px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .pc-footer-block__floor_copyright.col {
+    padding: 24px 0;
+  }
+}

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.d.ts

@@ -0,0 +1,6 @@
+import type { FooterBlockProps } from "../../../../models/index.js";
+type CopyrightFloorProps = {
+    copyright: NonNullable<FooterBlockProps['copyright']>;
+};
+export declare const CopyrightFloor: ({ copyright }: CopyrightFloorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyrightFloor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../../../components/index.js");
+const constants_1 = require("../../../../constants.js");
+const theme_1 = require("../../../../context/theme/index.js");
+const grid_1 = require("../../../../grid/index.js");
+const utils_1 = require("../../../../utils/index.js");
+const useLogoImageProps_1 = require("../../hooks/useLogoImageProps.js");
+const useOverflowListItems_1 = require("../../hooks/useOverflowListItems.js");
+const LangSwitcher_1 = require("../LangSwitcher/index.js");
+const b = (0, utils_1.block)('footer-block');
+const MOBILE_WIDTH = constants_1.BREAKPOINTS.sm;
+const THREE_COLUMN_DESKTOP_WIDTH = constants_1.BREAKPOINTS.md;
+function getElementFlexContentWidth(element) {
+    const children = Array.from(element.children);
+    if (!children.length) {
+        return element.scrollWidth;
+    }
+    const elementStyles = window.getComputedStyle(element);
+    const columnGap = parseFloat(elementStyles.columnGap);
+    const gap = Number.isNaN(columnGap) ? 0 : columnGap;
+    // extra 1px to prevent overflow
+    const childrenWidths = children.map((child) => child.scrollWidth + 1);
+    if (elementStyles.flexDirection.startsWith('column')) {
+        return Math.ceil(Math.max(...childrenWidths));
+    }
+    return Math.ceil(childrenWidths.reduce((sum, width) => sum + width, 0) + gap * (children.length - 1));
+}
+function useLinksAlignmentState(copyright) {
+    const hasOnlyLinks = Boolean(copyright.links?.length &&
+        !copyright.logo &&
+        !copyright.languageSwitcher &&
+        !copyright.copyrightText);
+    const areLinksInTheMiddle = Boolean(copyright.logo &&
+        copyright.links?.length &&
+        (copyright.languageSwitcher || copyright.copyrightText));
+    return {
+        shouldCenterLinks: areLinksInTheMiddle || hasOnlyLinks,
+        threeColumnLayout: areLinksInTheMiddle,
+        hasOnlyLinks,
+    };
+}
+const CopyrightLogo = ({ logo, logoImageProps, logoRef }) => {
+    if (!logo || !logoImageProps) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('logo'), ref: logoRef, children: logo.url ? ((0, jsx_runtime_1.jsx)(uikit_1.Link, { href: logo.url, children: (0, jsx_runtime_1.jsx)(components_1.Image, { ...logoImageProps, alt: logo.alt ?? '', className: b('logo-image') }) })) : ((0, jsx_runtime_1.jsx)(components_1.Image, { ...logoImageProps, alt: logo.alt ?? '', className: b('logo-image') })) }));
+};
+const VisibleLinks = ({ items, isLinksOverflowDropdown }) => {
+    if (!items?.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", { className: b('links-floor-list', {
+            wrap: !isLinksOverflowDropdown,
+        }), children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("li", { className: b('links-floor-item'), children: (0, jsx_runtime_1.jsx)("a", { href: item.url, children: item.text }) }, index))) }));
+};
+const OverflowDropdown = ({ isLinksOverflowDropdown, items }) => {
+    if (!isLinksOverflowDropdown || !items.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: items, switcherWrapperClassName: b('more-button', {
+            visible: isLinksOverflowDropdown && items.length > 0,
+        }), size: "l" }));
+};
+const RightSide = ({ copyright, rightSideRef, style }) => {
+    const theme = (0, theme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('links-floor-right'), ref: rightSideRef, style: style, children: [copyright.languageSwitcher && ((0, jsx_runtime_1.jsx)(LangSwitcher_1.LangSwitcher, { buttonText: copyright.languageSwitcher.buttonText, items: copyright.languageSwitcher.items, image: (0, utils_1.getThemedValue)(copyright.languageSwitcher.image, theme) })), copyright.copyrightText && ((0, jsx_runtime_1.jsx)("span", { className: b('links-floor-copyright'), children: copyright.copyrightText }))] }));
+};
+const DOCUMENT_ELEMENT_REF = {
+    current: document.documentElement,
+};
+const CopyrightFloor = ({ copyright }) => {
+    const theme = (0, theme_1.useTheme)();
+    const [isSmallWidth, setIsSmallWidth] = React.useState(() => {
+        return document.documentElement.clientWidth <= MOBILE_WIDTH;
+    });
+    const [isThreeColumnStacked, setIsThreeColumnStacked] = React.useState(() => {
+        return document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;
+    });
+    const [sideColumnWidth, setSideColumnWidth] = React.useState();
+    const logoRef = React.useRef(null);
+    const rightSideRef = React.useRef(null);
+    const updateSideColumnWidth = React.useCallback(() => {
+        const logoWidth = Math.ceil(logoRef.current?.getBoundingClientRect().width ?? 0);
+        const rightSideWidth = rightSideRef.current
+            ? getElementFlexContentWidth(rightSideRef.current)
+            : 0;
+        const maxSideWidth = Math.max(logoWidth, rightSideWidth);
+        setSideColumnWidth(maxSideWidth || undefined);
+    }, []);
+    const updateFloorSize = React.useCallback(() => {
+        setIsSmallWidth(document.documentElement.clientWidth <= MOBILE_WIDTH);
+        setIsThreeColumnStacked(document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH);
+        updateSideColumnWidth();
+    }, [updateSideColumnWidth]);
+    (0, uikit_1.useResizeObserver)({
+        ref: DOCUMENT_ELEMENT_REF,
+        onResize: updateFloorSize,
+    });
+    const menuContainerRef = React.useRef(null);
+    const linksOverflowStrategy = copyright.linksOverflowStrategy || 'dropdown';
+    const isLinksOverflowDropdown = linksOverflowStrategy === 'dropdown';
+    const { visibleItems, hiddenItems, measured } = (0, useOverflowListItems_1.useOverflowListItems)({
+        isDropdown: isLinksOverflowDropdown && !isSmallWidth,
+        containerRef: menuContainerRef,
+        items: copyright.links,
+        itemSelector: `.${b('links-floor-item')}`,
+        moreButtonWidth: 52,
+    });
+    const { shouldCenterLinks, threeColumnLayout, hasOnlyLinks } = useLinksAlignmentState(copyright);
+    const hasLanguageSwitcher = Boolean(copyright.languageSwitcher);
+    const hasCopyrightText = Boolean(copyright.copyrightText);
+    const hasRightSideContent = hasLanguageSwitcher || hasCopyrightText;
+    const copyrightLogoImage = copyright.logo && (0, utils_1.getThemedValue)(copyright.logo.image, theme);
+    const copyrightLogoImageProps = (0, useLogoImageProps_1.useLogoImageProps)(copyrightLogoImage);
+    React.useEffect(() => {
+        if (isThreeColumnStacked) {
+            updateSideColumnWidth();
+        }
+    }, [updateSideColumnWidth, copyrightLogoImageProps, hasRightSideContent, isThreeColumnStacked]);
+    const linksContent = ((0, jsx_runtime_1.jsxs)("div", { className: b('links-floor-left', { measured }), ref: menuContainerRef, children: [(0, jsx_runtime_1.jsx)(VisibleLinks, { items: visibleItems, isLinksOverflowDropdown: isLinksOverflowDropdown }), (0, jsx_runtime_1.jsx)(OverflowDropdown, { isLinksOverflowDropdown: isLinksOverflowDropdown, items: hiddenItems })] }));
+    const sideColumnStyle = React.useMemo(() => {
+        if (!threeColumnLayout || isThreeColumnStacked || sideColumnWidth === undefined) {
+            return undefined;
+        }
+        return { width: sideColumnWidth };
+    }, [isThreeColumnStacked, sideColumnWidth, threeColumnLayout]);
+    return ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12 }, className: b('floor', { copyright: true }), children: (0, jsx_runtime_1.jsxs)("div", { className: b('links-floor-inner', {
+                centered: shouldCenterLinks,
+                threeColumn: threeColumnLayout,
+                overflow: linksOverflowStrategy,
+                withLanguageSwitcher: hasLanguageSwitcher,
+                hasOnlyLinks,
+            }), children: [copyright.logo && ((0, jsx_runtime_1.jsx)("div", { className: b('links-floor-side'), style: sideColumnStyle, children: (0, jsx_runtime_1.jsx)(CopyrightLogo, { logo: copyright.logo, logoImageProps: copyrightLogoImageProps, logoRef: logoRef }) })), threeColumnLayout ? ((0, jsx_runtime_1.jsx)("div", { className: b('links-floor-center'), children: linksContent })) : (linksContent), hasRightSideContent && ((0, jsx_runtime_1.jsx)(RightSide, { copyright: copyright, rightSideRef: rightSideRef, style: sideColumnStyle }))] }) }));
+};
+exports.CopyrightFloor = CopyrightFloor;
+//# sourceMappingURL=CopyrightFloor.js.map

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyrightFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/CopyrightFloor/CopyrightFloor.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAA0F;AAE1F,gEAA6C;AAC7C,wDAAkD;AAClD,8DAAmD;AACnD,oDAAqC;AAErC,sDAAwD;AACxD,wEAAgE;AAChE,8EAAgF;AAChF,2DAA6C;AAI7C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,YAAY,GAAG,uBAAW,CAAC,EAAE,CAAC;AACpC,MAAM,0BAA0B,GAAG,uBAAW,CAAC,EAAE,CAAC;AAMlD,SAAS,0BAA0B,CAAC,OAAoB;IACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;IAE/D,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC,WAAW,CAAC;IAC/B,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACpD,gCAAgC;IAChC,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IAEtE,IAAI,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,IAAI,CAAC,IAAI,CACZ,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CACtF,CAAC;AACN,CAAC;AAED,SAAS,sBAAsB,CAAC,SAA2C;IACvE,MAAM,YAAY,GAAG,OAAO,CACxB,SAAS,CAAC,KAAK,EAAE,MAAM;QACnB,CAAC,SAAS,CAAC,IAAI;QACf,CAAC,SAAS,CAAC,gBAAgB;QAC3B,CAAC,SAAS,CAAC,aAAa,CAC/B,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CAC/B,SAAS,CAAC,IAAI;QACV,SAAS,CAAC,KAAK,EAAE,MAAM;QACvB,CAAC,SAAS,CAAC,gBAAgB,IAAI,SAAS,CAAC,aAAa,CAAC,CAC9D,CAAC;IAEF,OAAO;QACH,iBAAiB,EAAE,mBAAmB,IAAI,YAAY;QACtD,iBAAiB,EAAE,mBAAmB;QACtC,YAAY;KACf,CAAC;AACN,CAAC;AAQD,MAAM,aAAa,GAAG,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAqB,EAAE,EAAE;IAC1E,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,YAClC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACR,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,CAAC,GAAG,YAChB,uBAAC,kBAAK,OAAK,cAAc,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,GAC3E,CACV,CAAC,CAAC,CAAC,CACA,uBAAC,kBAAK,OAAK,cAAc,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,CACjF,GACC,CACT,CAAC;AACN,CAAC,CAAC;AAOF,MAAM,YAAY,GAAG,CAAC,EAAC,KAAK,EAAE,uBAAuB,EAAoB,EAAE,EAAE;IACzE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,+BACI,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE;YAC7B,IAAI,EAAE,CAAC,uBAAuB;SACjC,CAAC,YAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,+BAAgB,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,YAC5C,8BAAG,IAAI,EAAE,IAAI,CAAC,GAAG,YAAG,IAAI,CAAC,IAAI,GAAK,IAD7B,KAAK,CAET,CACR,CAAC,GACD,CACR,CAAC;AACN,CAAC,CAAC;AAOF,MAAM,gBAAgB,GAAG,CAAC,EAAC,uBAAuB,EAAE,KAAK,EAAwB,EAAE,EAAE;IACjF,IAAI,CAAC,uBAAuB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,uBAAC,oBAAY,IACT,KAAK,EAAE,KAAK,EACZ,wBAAwB,EAAE,CAAC,CAAC,aAAa,EAAE;YACvC,OAAO,EAAE,uBAAuB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;SACvD,CAAC,EACF,IAAI,EAAC,GAAG,GACV,CACL,CAAC;AACN,CAAC,CAAC;AAQF,MAAM,SAAS,GAAG,CAAC,EAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAiB,EAAE,EAAE;IACnE,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,aAClE,SAAS,CAAC,gBAAgB,IAAI,CAC3B,uBAAC,2BAAY,IACT,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,UAAU,EACjD,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EACvC,KAAK,EAAE,IAAA,sBAAc,EAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,GAChE,CACL,EACA,SAAS,CAAC,aAAa,IAAI,CACxB,iCAAM,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,YAAG,SAAS,CAAC,aAAa,GAAQ,CAChF,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG;IACzB,OAAO,EAAE,QAAQ,CAAC,eAAe;CACpC,CAAC;AAEK,MAAM,cAAc,GAAG,CAAC,EAAC,SAAS,EAAsB,EAAE,EAAE;IAC/D,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QACxD,OAAO,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,YAAY,CAAC;IAChE,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QACxE,OAAO,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,0BAA0B,CAAC;IAC9E,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;IACvE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACjF,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO;YACvC,CAAC,CAAC,0BAA0B,CAAC,YAAY,CAAC,OAAO,CAAC;YAClD,CAAC,CAAC,CAAC,CAAC;QACR,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAEzD,kBAAkB,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAClD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,eAAe,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC;QACtE,uBAAuB,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,0BAA0B,CAAC,CAAC;QAC5F,qBAAqB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,IAAA,yBAAiB,EAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,eAAe;KAC5B,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5D,MAAM,qBAAqB,GAAG,SAAS,CAAC,qBAAqB,IAAI,UAAU,CAAC;IAC5E,MAAM,uBAAuB,GAAG,qBAAqB,KAAK,UAAU,CAAC;IACrE,MAAM,EAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IAAA,2CAAoB,EAAC;QAC/D,UAAU,EAAE,uBAAuB,IAAI,CAAC,YAAY;QACpD,YAAY,EAAE,gBAAgB;QAC9B,KAAK,EAAE,SAAS,CAAC,KAAK;QACtB,YAAY,EAAE,IAAI,CAAC,CAAC,kBAAkB,CAAC,EAAE;QACzC,eAAe,EAAE,EAAE;KACtB,CAAC,CAAC;IACH,MAAM,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAC,GAAG,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC/F,MAAM,mBAAmB,GAAG,OAAO,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChE,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,mBAAmB,IAAI,gBAAgB,CAAC;IACpE,MAAM,kBAAkB,GAAG,SAAS,CAAC,IAAI,IAAI,IAAA,sBAAc,EAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACzF,MAAM,uBAAuB,GAAG,IAAA,qCAAiB,EAAC,kBAAkB,CAAC,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,oBAAoB,EAAE,CAAC;YACvB,qBAAqB,EAAE,CAAC;QAC5B,CAAC;IACL,CAAC,EAAE,CAAC,qBAAqB,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEhG,MAAM,YAAY,GAAG,CACjB,iCAAK,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAE,GAAG,EAAE,gBAAgB,aACpE,uBAAC,YAAY,IAAC,KAAK,EAAE,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,GAAI,EACvF,uBAAC,gBAAgB,IACb,uBAAuB,EAAE,uBAAuB,EAChD,KAAK,EAAE,WAAW,GACpB,IACA,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAkC,GAAG,EAAE;QACxE,IAAI,CAAC,iBAAiB,IAAI,oBAAoB,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAC9E,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,CAAC;IACpC,CAAC,EAAE,CAAC,oBAAoB,EAAE,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/D,OAAO,CACH,uBAAC,UAAG,IAAC,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,YAC3D,iCACI,SAAS,EAAE,CAAC,CAAC,mBAAmB,EAAE;gBAC9B,QAAQ,EAAE,iBAAiB;gBAC3B,WAAW,EAAE,iBAAiB;gBAC9B,QAAQ,EAAE,qBAAqB;gBAC/B,oBAAoB,EAAE,mBAAmB;gBACzC,YAAY;aACf,CAAC,aAED,SAAS,CAAC,IAAI,IAAI,CACf,gCAAK,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,eAAe,YACzD,uBAAC,aAAa,IACV,IAAI,EAAE,SAAS,CAAC,IAAI,EACpB,cAAc,EAAE,uBAAuB,EACvC,OAAO,EAAE,OAAO,GAClB,GACA,CACT,EACA,iBAAiB,CAAC,CAAC,CAAC,CACjB,gCAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YAAG,YAAY,GAAO,CAChE,CAAC,CAAC,CAAC,CACA,YAAY,CACf,EACA,mBAAmB,IAAI,CACpB,uBAAC,SAAS,IACN,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,eAAe,GACxB,CACL,IACC,GACJ,CACT,CAAC;AACN,CAAC,CAAC;AA7GW,QAAA,cAAc,kBA6GzB","sourcesContent":["import * as React from 'react';\n\nimport {DropdownMenu, DropdownMenuItem, Link, useResizeObserver} from '@gravity-ui/uikit';\n\nimport {Image} from '../../../../components';\nimport {BREAKPOINTS} from '../../../../constants';\nimport {useTheme} from '../../../../context/theme';\nimport {Col} from '../../../../grid';\nimport type {FooterBlockProps} from '../../../../models';\nimport {block, getThemedValue} from '../../../../utils';\nimport {useLogoImageProps} from '../../hooks/useLogoImageProps';\nimport {LinkItem, useOverflowListItems} from '../../hooks/useOverflowListItems';\nimport {LangSwitcher} from '../LangSwitcher';\n\nimport './CopyrightFloor.scss';\n\nconst b = block('footer-block');\n\nconst MOBILE_WIDTH = BREAKPOINTS.sm;\nconst THREE_COLUMN_DESKTOP_WIDTH = BREAKPOINTS.md;\n\ntype CopyrightFloorProps = {\n    copyright: NonNullable<FooterBlockProps['copyright']>;\n};\n\nfunction getElementFlexContentWidth(element: HTMLElement) {\n    const children = Array.from(element.children) as HTMLElement[];\n\n    if (!children.length) {\n        return element.scrollWidth;\n    }\n\n    const elementStyles = window.getComputedStyle(element);\n    const columnGap = parseFloat(elementStyles.columnGap);\n    const gap = Number.isNaN(columnGap) ? 0 : columnGap;\n    // extra 1px to prevent overflow\n    const childrenWidths = children.map((child) => child.scrollWidth + 1);\n\n    if (elementStyles.flexDirection.startsWith('column')) {\n        return Math.ceil(Math.max(...childrenWidths));\n    }\n\n    return Math.ceil(\n        childrenWidths.reduce((sum, width) => sum + width, 0) + gap * (children.length - 1),\n    );\n}\n\nfunction useLinksAlignmentState(copyright: CopyrightFloorProps['copyright']) {\n    const hasOnlyLinks = Boolean(\n        copyright.links?.length &&\n            !copyright.logo &&\n            !copyright.languageSwitcher &&\n            !copyright.copyrightText,\n    );\n    const areLinksInTheMiddle = Boolean(\n        copyright.logo &&\n            copyright.links?.length &&\n            (copyright.languageSwitcher || copyright.copyrightText),\n    );\n\n    return {\n        shouldCenterLinks: areLinksInTheMiddle || hasOnlyLinks,\n        threeColumnLayout: areLinksInTheMiddle,\n        hasOnlyLinks,\n    };\n}\n\ntype CopyrightLogoProps = {\n    logo: CopyrightFloorProps['copyright']['logo'];\n    logoImageProps: Record<string, unknown> | null;\n    logoRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst CopyrightLogo = ({logo, logoImageProps, logoRef}: CopyrightLogoProps) => {\n    if (!logo || !logoImageProps) {\n        return null;\n    }\n\n    return (\n        <div className={b('logo')} ref={logoRef}>\n            {logo.url ? (\n                <Link href={logo.url}>\n                    <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n                </Link>\n            ) : (\n                <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n            )}\n        </div>\n    );\n};\n\ntype VisibleLinksProps = {\n    items: LinkItem[];\n    isLinksOverflowDropdown: boolean;\n};\n\nconst VisibleLinks = ({items, isLinksOverflowDropdown}: VisibleLinksProps) => {\n    if (!items?.length) {\n        return null;\n    }\n\n    return (\n        <ul\n            className={b('links-floor-list', {\n                wrap: !isLinksOverflowDropdown,\n            })}\n        >\n            {items.map((item, index) => (\n                <li key={index} className={b('links-floor-item')}>\n                    <a href={item.url}>{item.text}</a>\n                </li>\n            ))}\n        </ul>\n    );\n};\n\ntype OverflowDropdownProps = {\n    isLinksOverflowDropdown: boolean;\n    items: DropdownMenuItem[];\n};\n\nconst OverflowDropdown = ({isLinksOverflowDropdown, items}: OverflowDropdownProps) => {\n    if (!isLinksOverflowDropdown || !items.length) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            items={items}\n            switcherWrapperClassName={b('more-button', {\n                visible: isLinksOverflowDropdown && items.length > 0,\n            })}\n            size=\"l\"\n        />\n    );\n};\n\ntype RightSideProps = {\n    copyright: CopyrightFloorProps['copyright'];\n    rightSideRef: React.RefObject<HTMLDivElement>;\n    style?: React.CSSProperties;\n};\n\nconst RightSide = ({copyright, rightSideRef, style}: RightSideProps) => {\n    const theme = useTheme();\n\n    return (\n        <div className={b('links-floor-right')} ref={rightSideRef} style={style}>\n            {copyright.languageSwitcher && (\n                <LangSwitcher\n                    buttonText={copyright.languageSwitcher.buttonText}\n                    items={copyright.languageSwitcher.items}\n                    image={getThemedValue(copyright.languageSwitcher.image, theme)}\n                />\n            )}\n            {copyright.copyrightText && (\n                <span className={b('links-floor-copyright')}>{copyright.copyrightText}</span>\n            )}\n        </div>\n    );\n};\n\nconst DOCUMENT_ELEMENT_REF = {\n    current: document.documentElement,\n};\n\nexport const CopyrightFloor = ({copyright}: CopyrightFloorProps) => {\n    const theme = useTheme();\n    const [isSmallWidth, setIsSmallWidth] = React.useState(() => {\n        return document.documentElement.clientWidth <= MOBILE_WIDTH;\n    });\n    const [isThreeColumnStacked, setIsThreeColumnStacked] = React.useState(() => {\n        return document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;\n    });\n    const [sideColumnWidth, setSideColumnWidth] = React.useState<number>();\n    const logoRef = React.useRef<HTMLDivElement>(null);\n    const rightSideRef = React.useRef<HTMLDivElement>(null);\n\n    const updateSideColumnWidth = React.useCallback(() => {\n        const logoWidth = Math.ceil(logoRef.current?.getBoundingClientRect().width ?? 0);\n        const rightSideWidth = rightSideRef.current\n            ? getElementFlexContentWidth(rightSideRef.current)\n            : 0;\n        const maxSideWidth = Math.max(logoWidth, rightSideWidth);\n\n        setSideColumnWidth(maxSideWidth || undefined);\n    }, []);\n\n    const updateFloorSize = React.useCallback(() => {\n        setIsSmallWidth(document.documentElement.clientWidth <= MOBILE_WIDTH);\n        setIsThreeColumnStacked(document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH);\n        updateSideColumnWidth();\n    }, [updateSideColumnWidth]);\n\n    useResizeObserver({\n        ref: DOCUMENT_ELEMENT_REF,\n        onResize: updateFloorSize,\n    });\n\n    const menuContainerRef = React.useRef<HTMLDivElement>(null);\n    const linksOverflowStrategy = copyright.linksOverflowStrategy || 'dropdown';\n    const isLinksOverflowDropdown = linksOverflowStrategy === 'dropdown';\n    const {visibleItems, hiddenItems, measured} = useOverflowListItems({\n        isDropdown: isLinksOverflowDropdown && !isSmallWidth,\n        containerRef: menuContainerRef,\n        items: copyright.links,\n        itemSelector: `.${b('links-floor-item')}`,\n        moreButtonWidth: 52,\n    });\n    const {shouldCenterLinks, threeColumnLayout, hasOnlyLinks} = useLinksAlignmentState(copyright);\n    const hasLanguageSwitcher = Boolean(copyright.languageSwitcher);\n    const hasCopyrightText = Boolean(copyright.copyrightText);\n    const hasRightSideContent = hasLanguageSwitcher || hasCopyrightText;\n    const copyrightLogoImage = copyright.logo && getThemedValue(copyright.logo.image, theme);\n    const copyrightLogoImageProps = useLogoImageProps(copyrightLogoImage);\n\n    React.useEffect(() => {\n        if (isThreeColumnStacked) {\n            updateSideColumnWidth();\n        }\n    }, [updateSideColumnWidth, copyrightLogoImageProps, hasRightSideContent, isThreeColumnStacked]);\n\n    const linksContent = (\n        <div className={b('links-floor-left', {measured})} ref={menuContainerRef}>\n            <VisibleLinks items={visibleItems} isLinksOverflowDropdown={isLinksOverflowDropdown} />\n            <OverflowDropdown\n                isLinksOverflowDropdown={isLinksOverflowDropdown}\n                items={hiddenItems}\n            />\n        </div>\n    );\n\n    const sideColumnStyle = React.useMemo<React.CSSProperties | undefined>(() => {\n        if (!threeColumnLayout || isThreeColumnStacked || sideColumnWidth === undefined) {\n            return undefined;\n        }\n\n        return {width: sideColumnWidth};\n    }, [isThreeColumnStacked, sideColumnWidth, threeColumnLayout]);\n\n    return (\n        <Col sizes={{all: 12}} className={b('floor', {copyright: true})}>\n            <div\n                className={b('links-floor-inner', {\n                    centered: shouldCenterLinks,\n                    threeColumn: threeColumnLayout,\n                    overflow: linksOverflowStrategy,\n                    withLanguageSwitcher: hasLanguageSwitcher,\n                    hasOnlyLinks,\n                })}\n            >\n                {copyright.logo && (\n                    <div className={b('links-floor-side')} style={sideColumnStyle}>\n                        <CopyrightLogo\n                            logo={copyright.logo}\n                            logoImageProps={copyrightLogoImageProps}\n                            logoRef={logoRef}\n                        />\n                    </div>\n                )}\n                {threeColumnLayout ? (\n                    <div className={b('links-floor-center')}>{linksContent}</div>\n                ) : (\n                    linksContent\n                )}\n                {hasRightSideContent && (\n                    <RightSide\n                        copyright={copyright}\n                        rightSideRef={rightSideRef}\n                        style={sideColumnStyle}\n                    />\n                )}\n            </div>\n        </Col>\n    );\n};\n"]}

package/build/cjs/blocks/Footer/components/CopyrightFloor/index.d.ts

@@ -0,0 +1 @@
+export { CopyrightFloor } from "./CopyrightFloor.js";

package/build/cjs/blocks/Footer/components/CopyrightFloor/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyrightFloor = void 0;
+var CopyrightFloor_1 = require("./CopyrightFloor.js");
+Object.defineProperty(exports, "CopyrightFloor", { enumerable: true, get: function () { return CopyrightFloor_1.CopyrightFloor; } });
+//# sourceMappingURL=index.js.map

package/build/cjs/blocks/Footer/components/CopyrightFloor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/CopyrightFloor/index.ts"],"names":[],"mappings":";;;AAAA,sDAAgD;AAAxC,gHAAA,cAAc,OAAA","sourcesContent":["export {CopyrightFloor} from './CopyrightFloor';\n"]}

package/build/cjs/blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.css

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block__disclaimer-floor-content {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary);
+}
+.pc-footer-block__disclaimer-floor-content .yfm {
+  margin: 0;
+}
+.pc-footer-block__disclaimer-floor-content .yfm a {
+  color: var(--g-color-text-secondary);
+  text-decoration: underline;
+}
+.pc-footer-block__disclaimer-floor-content .yfm a:hover {
+  color: var(--g-color-text-primary);
+}
+.pc-footer-block__disclaimer-floor-content_align_center {
+  text-align: center;
+}
+.pc-footer-block__disclaimer-floor-content_align_left {
+  text-align: left;
+}
+@media (max-width: 577px) {
+  .pc-footer-block__floor_disclaimer.col {
+    padding: 24px 0;
+  }
+}

package/build/cjs/blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.d.ts

@@ -0,0 +1,6 @@
+import { FooterBlockProps } from "../../../../models/index.js";
+type DisclaimerFloorProps = {
+    disclaimer: NonNullable<FooterBlockProps['disclaimer']>;
+};
+export declare const DisclaimerFloor: ({ disclaimer }: DisclaimerFloorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisclaimerFloor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("../../../../components/index.js");
+const grid_1 = require("../../../../grid/index.js");
+const utils_1 = require("../../../../utils/index.js");
+const b = (0, utils_1.block)('footer-block');
+const DisclaimerFloor = ({ disclaimer }) => {
+    return ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12 }, className: b('floor', { disclaimer: true }), children: (0, jsx_runtime_1.jsx)("div", { className: b('disclaimer-floor-content', {
+                align: disclaimer.align || 'left',
+            }), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: disclaimer.text, modifiers: {
+                    constructor: true,
+                    'constructor-notice': true,
+                } }) }) }));
+};
+exports.DisclaimerFloor = DisclaimerFloor;
+//# sourceMappingURL=DisclaimerFloor.js.map

package/build/cjs/blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisclaimerFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.tsx"],"names":[],"mappings":";;;;AAAA,gEAAkD;AAClD,oDAAqC;AAErC,sDAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAMzB,MAAM,eAAe,GAAG,CAAC,EAAC,UAAU,EAAuB,EAAE,EAAE;IAClE,OAAO,CACH,uBAAC,UAAG,IAAC,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,YAC5D,gCACI,SAAS,EAAE,CAAC,CAAC,0BAA0B,EAAE;gBACrC,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,MAAM;aACpC,CAAC,YAEF,uBAAC,uBAAU,IACP,OAAO,EAAE,UAAU,CAAC,IAAI,EACxB,SAAS,EAAE;oBACP,WAAW,EAAE,IAAI;oBACjB,oBAAoB,EAAE,IAAI;iBAC7B,GACH,GACA,GACJ,CACT,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,eAAe,mBAkB1B","sourcesContent":["import {YFMWrapper} from '../../../../components';\nimport {Col} from '../../../../grid';\nimport {FooterBlockProps} from '../../../../models';\nimport {block} from '../../../../utils';\n\nimport './DisclaimerFloor.scss';\n\nconst b = block('footer-block');\n\ntype DisclaimerFloorProps = {\n    disclaimer: NonNullable<FooterBlockProps['disclaimer']>;\n};\n\nexport const DisclaimerFloor = ({disclaimer}: DisclaimerFloorProps) => {\n    return (\n        <Col sizes={{all: 12}} className={b('floor', {disclaimer: true})}>\n            <div\n                className={b('disclaimer-floor-content', {\n                    align: disclaimer.align || 'left',\n                })}\n            >\n                <YFMWrapper\n                    content={disclaimer.text}\n                    modifiers={{\n                        constructor: true,\n                        'constructor-notice': true,\n                    }}\n                />\n            </div>\n        </Col>\n    );\n};\n"]}

package/build/cjs/blocks/Footer/components/DisclaimerFloor/index.d.ts

@@ -0,0 +1 @@
+export { DisclaimerFloor } from "./DisclaimerFloor.js";

package/build/cjs/blocks/Footer/components/DisclaimerFloor/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisclaimerFloor = void 0;
+var DisclaimerFloor_1 = require("./DisclaimerFloor.js");
+Object.defineProperty(exports, "DisclaimerFloor", { enumerable: true, get: function () { return DisclaimerFloor_1.DisclaimerFloor; } });
+//# sourceMappingURL=index.js.map

package/build/cjs/blocks/Footer/components/DisclaimerFloor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/DisclaimerFloor/index.ts"],"names":[],"mappings":";;;AAAA,wDAAkD;AAA1C,kHAAA,eAAe,OAAA","sourcesContent":["export {DisclaimerFloor} from './DisclaimerFloor';\n"]}

package/build/cjs/blocks/Footer/components/LangSwitcher/LangSwitcher.css

@@ -0,0 +1,14 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block__links-floor-right .pc-lang-switcher {
+  height: var(--g-spacing-9);
+  padding: 0;
+  cursor: pointer;
+}
+.pc-footer-block__links-floor-right .pc-lang-switcher .pc-content-wrapper__text {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-footer-block__links-floor-right .pc-lang-switcher:hover .pc-content-wrapper__text {
+  color: var(--g-color-text-secondary);
+}

package/build/cjs/blocks/Footer/components/LangSwitcher/LangSwitcher.d.ts

@@ -0,0 +1,11 @@
+import { ImageProps } from "../../../../models/index.js";
+type LanguageSwitcherProps = {
+    buttonText?: string;
+    items: {
+        text: string;
+        href: string;
+    }[];
+    image?: ImageProps;
+};
+export declare const LangSwitcher: ({ buttonText, items, image }: LanguageSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export {};