@gravity-ui/page-constructor 8.13.1 → 8.14.0

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LangSwitcher = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const innerContext_1 = require("../../../../context/innerContext/index.js");
+const models_1 = require("../../../../models/index.js");
+const utils_1 = require("../../../../utils/index.js");
+const b = (0, utils_1.block)('lang-switcher');
+const LangSwitcher = ({ buttonText, items, image }) => {
+    const [isActive, setIsActive] = React.useState(false);
+    const { navItemMap } = React.useContext(innerContext_1.InnerContext);
+    const navigationItems = React.useMemo(() => items.map((item) => ({
+        type: models_1.NavigationItemType.Link,
+        text: item.text,
+        url: item.href,
+    })), [items]);
+    const hidePopup = React.useCallback(() => {
+        setIsActive(false);
+    }, []);
+    const onClick = React.useCallback((event) => {
+        event.stopPropagation();
+        setIsActive((active) => !active);
+    }, []);
+    const text = buttonText ?? 'Language';
+    const data = {
+        type: models_1.NavigationItemType.Dropdown,
+        text,
+        items: navigationItems,
+        isActive,
+        hidePopup,
+    };
+    const NavigationDropdown = navItemMap[models_1.NavigationItemType.Dropdown];
+    return ((0, jsx_runtime_1.jsx)(NavigationDropdown, { data: data, text: text, type: models_1.NavigationItemType.Dropdown, items: navigationItems, isActive: isActive, hidePopup: hidePopup, onClick: onClick, className: b(), placement: "top-start", icon: image, iconSize: 20 }));
+};
+exports.LangSwitcher = LangSwitcher;
+//# sourceMappingURL=LangSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LangSwitcher.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/LangSwitcher/LangSwitcher.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,4EAA8D;AAC9D,wDAK4B;AAC5B,sDAAwC;AAaxC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,eAAe,CAAC,CAAC;AAE1B,MAAM,YAAY,GAAG,CAAC,EAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAwB,EAAE,EAAE;IAC9E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAC,UAAU,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjB,IAAI,EAAE,2BAAkB,CAAC,IAAI;QAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,IAAI;KACjB,CAAC,CAAC,EACP,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAuB,EAAE,EAAE;QAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,WAAW,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,UAAU,IAAI,UAAU,CAAC;IACtC,MAAM,IAAI,GAA2B;QACjC,IAAI,EAAE,2BAAkB,CAAC,QAAQ;QACjC,IAAI;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ;QACR,SAAS;KACZ,CAAC;IAEF,MAAM,kBAAkB,GAAG,UAAU,CAAC,2BAAkB,CAAC,QAAQ,CAAC,CAAC;IAEnE,OAAO,CACH,uBAAC,kBAAkB,IACf,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,2BAAkB,CAAC,QAAQ,EACjC,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,EAAE,EACd,SAAS,EAAC,WAAW,EACrB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,EAAE,GACd,CACL,CAAC;AACN,CAAC,CAAC;AAjDW,QAAA,YAAY,gBAiDvB","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../../../context/innerContext';\nimport {\n    ImageProps,\n    NavigationDropdownItem,\n    NavigationItemType,\n    NavigationLinkItem,\n} from '../../../../models';\nimport {block} from '../../../../utils';\n\nimport './LangSwitcher.scss';\n\ntype LanguageSwitcherProps = {\n    buttonText?: string;\n    items: {\n        text: string;\n        href: string;\n    }[];\n    image?: ImageProps;\n};\n\nconst b = block('lang-switcher');\n\nexport const LangSwitcher = ({buttonText, items, image}: LanguageSwitcherProps) => {\n    const [isActive, setIsActive] = React.useState(false);\n    const {navItemMap} = React.useContext(InnerContext);\n\n    const navigationItems = React.useMemo<NavigationLinkItem[]>(\n        () =>\n            items.map((item) => ({\n                type: NavigationItemType.Link,\n                text: item.text,\n                url: item.href,\n            })),\n        [items],\n    );\n\n    const hidePopup = React.useCallback(() => {\n        setIsActive(false);\n    }, []);\n\n    const onClick = React.useCallback((event: React.MouseEvent) => {\n        event.stopPropagation();\n        setIsActive((active) => !active);\n    }, []);\n\n    const text = buttonText ?? 'Language';\n    const data: NavigationDropdownItem = {\n        type: NavigationItemType.Dropdown,\n        text,\n        items: navigationItems,\n        isActive,\n        hidePopup,\n    };\n\n    const NavigationDropdown = navItemMap[NavigationItemType.Dropdown];\n\n    return (\n        <NavigationDropdown\n            data={data}\n            text={text}\n            type={NavigationItemType.Dropdown}\n            items={navigationItems}\n            isActive={isActive}\n            hidePopup={hidePopup}\n            onClick={onClick}\n            className={b()}\n            placement=\"top-start\"\n            icon={image}\n            iconSize={20}\n        />\n    );\n};\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/LangSwitcher/index.ts"],"names":[],"mappings":";;;AAAA,kDAA4C;AAApC,4GAAA,YAAY,OAAA","sourcesContent":["export {LangSwitcher} from './LangSwitcher';\n"]}

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

@@ -0,0 +1,93 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block .pc-footer-block__floor.pc-footer-block__floor_navigation {
+  margin: 0 auto;
+  padding: 32px 0 var(--g-spacing-10);
+  border: none;
+}
+.pc-footer-block__floor .pc-footer-block__columns-container {
+  padding: 0;
+}
+.pc-footer-block__floor_logo-placement_left .pc-footer-block__logo-col.col {
+  padding: 0 0 32px;
+}
+.pc-footer-block__floor_logo-placement_left .pc-footer-block__logo-col.col .row {
+  margin: 0;
+}
+.pc-footer-block__floor_logo-placement_top {
+  padding-top: 0;
+}
+.pc-footer-block__floor_logo-placement_top .pc-footer-block__logo-col_top.col {
+  padding: 0 0 24px;
+  margin-bottom: 32px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-footer-block__column {
+  min-width: 0;
+  padding-right: 16px;
+}
+.pc-footer-block__column-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.pc-footer-block__nav-row {
+  width: calc(100% + 24px);
+  min-width: 0;
+  gap: 48px 0;
+}
+@media (min-width: 1081px) {
+  .pc-footer-block__nav-row_custom-columns > .pc-footer-block__column {
+    flex: 0 0 var(--pc-footer-navigation-column-width);
+    max-width: var(--pc-footer-navigation-column-width);
+  }
+}
+.pc-footer-block__column-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-accent-font-weight);
+  color: var(--g-color-text-primary);
+  margin: 0;
+}
+.pc-footer-block__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pc-footer-block__link-item {
+  margin: 0;
+}
+.pc-footer-block__link-item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-footer-block__link {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--g-color-text-primary);
+  text-decoration: none;
+  line-height: var(--g-text-body-2-line-height);
+}
+.utilityfocus .pc-footer-block__link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-footer-block__link:hover, .pc-footer-block__link:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-footer-block__link:hover {
+  color: var(--g-color-text-secondary);
+}
+@media (max-width: 1081px) {
+  .pc-footer-block__floor_logo-placement_top .pc-footer-block__logo-col.col {
+    padding: 0 0 32px;
+  }
+}
+@media (max-width: 769px) {
+  .pc-footer-block__floor_navigation .pc-footer-block__logo {
+    height: 48px;
+  }
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { GridColumnSizesType } from "../../../../grid/index.js";
+import { FooterLinkColumn } from "../../../../models/index.js";
+type NavigationFloorProps = {
+    columns: FooterLinkColumn[];
+    logoContent: React.ReactNode;
+    colSizes?: GridColumnSizesType;
+    columnsPerRow?: number;
+    logoPlacement?: 'left' | 'top';
+};
+export declare const NavigationFloor: ({ columns, logoContent, colSizes, columnsPerRow, logoPlacement, }: NavigationFloorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationFloor = 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 grid_1 = require("../../../../grid/index.js");
+const utils_1 = require("../../../../utils/index.js");
+const b = (0, utils_1.block)('footer-block');
+const DEFAULT_COL_SIZES_WITH_LOGO = { all: 6, sm: 4, md: 3, lg: 3 };
+const DEFAULT_COL_SIZES_WITHOUT_LOGO = { all: 6, sm: 4, md: 3, lg: 3 };
+const DEFAULT_LOGO_COL_SIZES = { all: 12, md: 4 };
+function NavigationColumns({ columns, hasLogo, colSizes, columnsPerRow }) {
+    const defaultColSizes = hasLogo
+        ? DEFAULT_COL_SIZES_WITH_LOGO
+        : DEFAULT_COL_SIZES_WITHOUT_LOGO;
+    const resolvedColSizes = React.useMemo(() => ({
+        all: colSizes?.all ?? defaultColSizes.all,
+        sm: colSizes?.sm ?? defaultColSizes.sm,
+        md: colSizes?.md ?? defaultColSizes.md,
+        lg: colSizes?.lg ?? defaultColSizes.lg,
+    }), [colSizes, defaultColSizes]);
+    const customColumnsStyle = columnsPerRow
+        ? {
+            '--pc-footer-navigation-column-width': `${100 / columnsPerRow}%`,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('columns-container'), children: (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('nav-row', { 'custom-columns': Boolean(columnsPerRow) }), style: customColumnsStyle, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('column'), sizes: resolvedColSizes, children: (0, jsx_runtime_1.jsxs)("div", { className: b('column-inner'), children: [(0, jsx_runtime_1.jsx)("h6", { className: b('column-title'), children: column.title }), (0, jsx_runtime_1.jsx)("ul", { className: b('links'), children: column.links.map((link, linkIndex) => ((0, jsx_runtime_1.jsx)("li", { className: b('link-item'), children: (0, jsx_runtime_1.jsx)(uikit_1.Link, { href: link.url, className: b('link'), title: link.urlTitle, target: link.target, children: link.text }) }, linkIndex))) })] }) }, columnIndex))) }) }));
+}
+const NavigationFloor = ({ columns, logoContent, colSizes, columnsPerRow, logoPlacement, }) => {
+    const isTopLogoPlacement = logoPlacement === 'top';
+    const hasSideLogo = Boolean(logoContent) && !isTopLogoPlacement;
+    return ((0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('floor', { navigation: true, 'logo-placement': logoPlacement }), children: [logoContent && isTopLogoPlacement && ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('logo-col', { top: true }), sizes: { all: 12 }, children: logoContent })), logoContent && !isTopLogoPlacement && ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('logo-col'), sizes: DEFAULT_LOGO_COL_SIZES, children: (0, jsx_runtime_1.jsx)(grid_1.Row, { children: logoContent }) })), (0, jsx_runtime_1.jsx)(NavigationColumns, { columns: columns, hasLogo: hasSideLogo, colSizes: colSizes, columnsPerRow: columnsPerRow })] }));
+};
+exports.NavigationFloor = NavigationFloor;
+//# sourceMappingURL=NavigationFloor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/NavigationFloor/NavigationFloor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport type {GridColumnSizesType} from '../../../../grid';\nimport {Col, Row} from '../../../../grid';\nimport {FooterLinkColumn} from '../../../../models';\nimport {block} from '../../../../utils';\n\nimport './NavigationFloor.scss';\n\nconst b = block('footer-block');\n\nconst DEFAULT_COL_SIZES_WITH_LOGO: GridColumnSizesType = {all: 6, sm: 4, md: 3, lg: 3};\nconst DEFAULT_COL_SIZES_WITHOUT_LOGO: GridColumnSizesType = {all: 6, sm: 4, md: 3, lg: 3};\nconst DEFAULT_LOGO_COL_SIZES: GridColumnSizesType = {all: 12, md: 4};\n\ntype NavigationColumnsProps = {\n    columns: FooterLinkColumn[];\n    hasLogo: boolean;\n    colSizes?: GridColumnSizesType;\n    columnsPerRow?: number;\n};\n\nfunction NavigationColumns({columns, hasLogo, colSizes, columnsPerRow}: NavigationColumnsProps) {\n    const defaultColSizes: GridColumnSizesType = hasLogo\n        ? DEFAULT_COL_SIZES_WITH_LOGO\n        : DEFAULT_COL_SIZES_WITHOUT_LOGO;\n    const resolvedColSizes: GridColumnSizesType = React.useMemo(\n        () => ({\n            all: colSizes?.all ?? defaultColSizes.all,\n            sm: colSizes?.sm ?? defaultColSizes.sm,\n            md: colSizes?.md ?? defaultColSizes.md,\n            lg: colSizes?.lg ?? defaultColSizes.lg,\n        }),\n        [colSizes, defaultColSizes],\n    );\n    const customColumnsStyle = columnsPerRow\n        ? ({\n              '--pc-footer-navigation-column-width': `${100 / columnsPerRow}%`,\n          } as React.CSSProperties)\n        : undefined;\n\n    return (\n        <Col className={b('columns-container')}>\n            <Row\n                className={b('nav-row', {'custom-columns': Boolean(columnsPerRow)})}\n                style={customColumnsStyle}\n            >\n                {columns.map((column, columnIndex) => (\n                    <Col key={columnIndex} className={b('column')} sizes={resolvedColSizes}>\n                        <div className={b('column-inner')}>\n                            <h6 className={b('column-title')}>{column.title}</h6>\n                            <ul className={b('links')}>\n                                {column.links.map((link, linkIndex) => (\n                                    <li key={linkIndex} className={b('link-item')}>\n                                        <Link\n                                            href={link.url}\n                                            className={b('link')}\n                                            title={link.urlTitle}\n                                            target={link.target}\n                                        >\n                                            {link.text}\n                                        </Link>\n                                    </li>\n                                ))}\n                            </ul>\n                        </div>\n                    </Col>\n                ))}\n            </Row>\n        </Col>\n    );\n}\n\ntype NavigationFloorProps = {\n    columns: FooterLinkColumn[];\n    logoContent: React.ReactNode;\n    colSizes?: GridColumnSizesType;\n    columnsPerRow?: number;\n    logoPlacement?: 'left' | 'top';\n};\n\nexport const NavigationFloor = ({\n    columns,\n    logoContent,\n    colSizes,\n    columnsPerRow,\n    logoPlacement,\n}: NavigationFloorProps) => {\n    const isTopLogoPlacement = logoPlacement === 'top';\n    const hasSideLogo = Boolean(logoContent) && !isTopLogoPlacement;\n\n    return (\n        <Row className={b('floor', {navigation: true, 'logo-placement': logoPlacement})}>\n            {logoContent && isTopLogoPlacement && (\n                <Col className={b('logo-col', {top: true})} sizes={{all: 12}}>\n                    {logoContent}\n                </Col>\n            )}\n            {logoContent && !isTopLogoPlacement && (\n                <Col className={b('logo-col')} sizes={DEFAULT_LOGO_COL_SIZES}>\n                    <Row>{logoContent}</Row>\n                </Col>\n            )}\n            <NavigationColumns\n                columns={columns}\n                hasLogo={hasSideLogo}\n                colSizes={colSizes}\n                columnsPerRow={columnsPerRow}\n            />\n        </Row>\n    );\n};\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,77 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-footer-block__social-floor-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 24px;
+}
+.pc-footer-block__social-floor-inner_title-position_top {
+  flex-direction: column;
+  align-items: unset;
+}
+.pc-footer-block__social-floor-inner_links-position_center {
+  align-items: center;
+}
+.pc-footer-block__social-floor-inner_links-position_center .pc-footer-block__social-icons-list {
+  justify-content: center;
+}
+.pc-footer-block__social-floor-inner_size_m .pc-footer-block__social-icons-list {
+  gap: 24px;
+}
+.pc-footer-block__social-floor-inner_size_m .pc-footer-block__social-icon-item {
+  width: 32px;
+  height: 32px;
+}
+.pc-footer-block__social-floor-inner_size_l .pc-footer-block__social-icons-list {
+  gap: var(--g-spacing-10);
+}
+.pc-footer-block__social-floor-inner_size_l .pc-footer-block__social-icon-item {
+  width: 48px;
+  height: 48px;
+}
+.pc-footer-block__social-icon-item {
+  margin-right: 0;
+}
+.pc-footer-block__social-floor-title {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  font-weight: var(--g-text-accent-font-weight);
+  margin: 0;
+  color: var(--g-color-text-primary);
+}
+.pc-footer-block__social-icons-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pc-footer-block__social-icons-item {
+  margin: 0;
+  transition: transform 200ms ease-in-out;
+}
+.pc-footer-block__social-icons-item:hover {
+  transform: translateY(-4px);
+}
+.pc-footer-block__social-icon-link, .pc-footer-block__social-icon-link:hover {
+  text-decoration: none;
+  color: var(--g-color-text-primary);
+}
+.pc-footer-block__social-icon-item {
+  margin-right: 0;
+}
+.pc-footer-block__social-icon-item_size_m {
+  width: 32px;
+  height: 32px;
+}
+.pc-footer-block__social-icon-item_size_l {
+  width: 48px;
+  height: 48px;
+}
+@media (max-width: 577px) {
+  .pc-footer-block__floor_social.col {
+    padding: 24px 0;
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialFloor = 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 useLogoImageProps_1 = require("../../hooks/useLogoImageProps.js");
+const b = (0, utils_1.block)('footer-block');
+const SocialIconItem = ({ contact, theme }) => {
+    const iconResolved = contact.icon && (0, utils_1.getThemedValue)(contact.icon, theme);
+    const iconProps = (0, useLogoImageProps_1.useLogoImageProps)(iconResolved);
+    if (!iconProps) {
+        return null;
+    }
+    const content = ((0, jsx_runtime_1.jsx)("li", { className: b('social-icons-item'), children: (0, jsx_runtime_1.jsx)(uikit_1.Link, { className: b('social-icon-link'), href: contact.url, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)(uikit_1.Flex, { direction: "column", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(components_1.Image, { ...iconProps, alt: contact.urlTitle ?? '', className: b('social-icon-item') }) }) }) }));
+    return contact.urlTitle ? ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { content: contact.urlTitle, openDelay: 500, children: content })) : (content);
+};
+const SocialIcons = ({ links, theme }) => {
+    if (!links?.length)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("ul", { className: b('social-icons-list'), children: links.map((contact, index) => ((0, jsx_runtime_1.jsx)(SocialIconItem, { contact: contact, theme: theme }, index))) }));
+};
+const SocialFloor = ({ contacts }) => {
+    const theme = (0, theme_1.useTheme)();
+    if (!contacts.links?.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12 }, className: b('floor', { social: true }), children: (0, jsx_runtime_1.jsxs)("div", { className: b('social-floor-inner', {
+                'title-position': contacts.titlePosition || 'top',
+                'links-position': contacts.linksPosition || 'left',
+                size: contacts.iconsSize ?? 'l',
+            }), children: [contacts.title && (0, jsx_runtime_1.jsx)("h3", { className: b('social-floor-title'), children: contacts.title }), (0, jsx_runtime_1.jsx)(SocialIcons, { links: contacts.links, theme: theme })] }) }));
+};
+exports.SocialFloor = SocialFloor;
+//# sourceMappingURL=SocialFloor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/SocialFloor/SocialFloor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Flex, Link, Tooltip} from '@gravity-ui/uikit';\n\nimport {Image} from '../../../../components';\nimport {useTheme} from '../../../../context/theme';\nimport {Col} from '../../../../grid';\nimport type {FooterBlockProps, FooterContactItem} from '../../../../models';\nimport {block, getThemedValue} from '../../../../utils';\nimport {useLogoImageProps} from '../../hooks/useLogoImageProps';\n\nimport './SocialFloor.scss';\n\nconst b = block('footer-block');\n\ntype SocialFloorProps = {\n    contacts: NonNullable<FooterBlockProps['contacts']>;\n};\n\ntype SocialIconsProps = {\n    links: SocialFloorProps['contacts']['links'];\n    theme: ReturnType<typeof useTheme>;\n};\n\ntype SocialIconItemProps = {\n    contact: FooterContactItem;\n    theme: ReturnType<typeof useTheme>;\n};\n\nconst SocialIconItem = ({contact, theme}: SocialIconItemProps) => {\n    const iconResolved = contact.icon && getThemedValue(contact.icon, theme);\n    const iconProps = useLogoImageProps(iconResolved);\n\n    if (!iconProps) {\n        return null;\n    }\n\n    const content = (\n        <li className={b('social-icons-item')}>\n            <Link\n                className={b('social-icon-link')}\n                href={contact.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <Flex direction=\"column\" alignItems=\"center\" gap={2}>\n                    <Image\n                        {...iconProps}\n                        alt={contact.urlTitle ?? ''}\n                        className={b('social-icon-item')}\n                    />\n                </Flex>\n            </Link>\n        </li>\n    );\n\n    return contact.urlTitle ? (\n        <Tooltip content={contact.urlTitle} openDelay={500}>\n            {content}\n        </Tooltip>\n    ) : (\n        content\n    );\n};\n\nconst SocialIcons = ({links, theme}: SocialIconsProps) => {\n    if (!links?.length) return null;\n\n    return (\n        <ul className={b('social-icons-list')}>\n            {links.map((contact, index) => (\n                <SocialIconItem key={index} contact={contact} theme={theme} />\n            ))}\n        </ul>\n    );\n};\n\nexport const SocialFloor = ({contacts}: SocialFloorProps) => {\n    const theme = useTheme();\n\n    if (!contacts.links?.length) {\n        return null;\n    }\n\n    return (\n        <Col sizes={{all: 12}} className={b('floor', {social: true})}>\n            <div\n                className={b('social-floor-inner', {\n                    'title-position': contacts.titlePosition || 'top',\n                    'links-position': contacts.linksPosition || 'left',\n                    size: contacts.iconsSize ?? 'l',\n                })}\n            >\n                {contacts.title && <h3 className={b('social-floor-title')}>{contacts.title}</h3>}\n                <SocialIcons links={contacts.links} theme={theme} />\n            </div>\n        </Col>\n    );\n};\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/SocialFloor/index.ts"],"names":[],"mappings":";;;AAAA,gDAA0C;AAAlC,0GAAA,WAAW,OAAA","sourcesContent":["export {SocialFloor} from './SocialFloor';\n"]}

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

@@ -0,0 +1,2 @@
+import type { ImageProps as ModelImageProps } from "../../../models/index.js";
+export declare function useLogoImageProps(logoImage?: ModelImageProps | null): Record<string, unknown> | null;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogoImageProps = useLogoImageProps;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../components/Media/Image/utils.js");
+function useLogoImageProps(logoImage) {
+    return React.useMemo(() => {
+        if (!logoImage) {
+            return null;
+        }
+        const resolved = (0, utils_1.getMediaImage)(logoImage);
+        if (typeof resolved === 'string') {
+            return { src: resolved };
+        }
+        return resolved && typeof resolved === 'object'
+            ? resolved
+            : null;
+    }, [logoImage]);
+}
+//# sourceMappingURL=useLogoImageProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLogoImageProps.js","sourceRoot":"../../../../../src","sources":["blocks/Footer/hooks/useLogoImageProps.ts"],"names":[],"mappings":";;AAKA,8CAiBC;;AAtBD,qDAA+B;AAE/B,oEAAoE;AAGpE,SAAgB,iBAAiB,CAC7B,SAAkC;IAElC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,QAAQ,GAAG,IAAA,qBAAa,EAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAC,CAAC;QAC3B,CAAC;QAED,OAAO,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ;YAC3C,CAAC,CAAE,QAA+C;YAClD,CAAC,CAAC,IAAI,CAAC;IACf,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AACpB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {getMediaImage} from '../../../components/Media/Image/utils';\nimport type {ImageProps as ModelImageProps} from '../../../models';\n\nexport function useLogoImageProps(\n    logoImage?: ModelImageProps | null,\n): Record<string, unknown> | null {\n    return React.useMemo(() => {\n        if (!logoImage) {\n            return null;\n        }\n\n        const resolved = getMediaImage(logoImage);\n        if (typeof resolved === 'string') {\n            return {src: resolved};\n        }\n\n        return resolved && typeof resolved === 'object'\n            ? (resolved as unknown as Record<string, unknown>)\n            : null;\n    }, [logoImage]);\n}\n"]}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DropdownMenuItem } from '@gravity-ui/uikit';
+import { LinkProps } from "../../../models/index.js";
+export type LinkItem = Required<Pick<LinkProps, 'text' | 'url'>>;
+type UseOverflowListItemsProps = {
+    isDropdown?: boolean;
+    containerRef: React.RefObject<HTMLElement>;
+    items?: LinkItem[];
+    itemSelector: string;
+    moreButtonWidth?: number;
+};
+type OverflowListItemsResult = {
+    visibleItems: LinkItem[];
+    hiddenItems: DropdownMenuItem[];
+    measured: boolean;
+};
+export declare function useOverflowListItems({ isDropdown, containerRef, items, itemSelector, moreButtonWidth, }: UseOverflowListItemsProps): OverflowListItemsResult;
+export {};

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverflowListItems = useOverflowListItems;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle.js"));
+function parseCssPixelValue(value) {
+    const parsedValue = parseFloat(value);
+    return Number.isNaN(parsedValue) ? 0 : parsedValue;
+}
+function getElementWidth(element) {
+    return Math.ceil(Math.max(element.scrollWidth, element.getBoundingClientRect().width));
+}
+function useOverflowListItems({ isDropdown = false, containerRef, items, itemSelector, moreButtonWidth = 0, }) {
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [itemWidths, setItemWidths] = React.useState([]);
+    const [itemGap, setItemGap] = React.useState(0);
+    const itemsCount = items?.length ?? 0;
+    const areItemsMeasured = !isDropdown || itemWidths.length === itemsCount;
+    const updateItemWidths = React.useCallback(() => {
+        if (!containerRef.current || !itemsCount) {
+            setItemWidths([]);
+            return;
+        }
+        const itemElements = Array.from(containerRef.current.querySelectorAll(itemSelector));
+        if (itemElements.length !== itemsCount) {
+            return;
+        }
+        const listElement = itemElements[0]?.parentElement;
+        setItemWidths(itemElements.map(getElementWidth));
+        if (listElement) {
+            const listStyles = window.getComputedStyle(listElement);
+            setItemGap(parseCssPixelValue(listStyles.columnGap));
+        }
+    }, [containerRef, itemSelector, itemsCount]);
+    React.useEffect(() => {
+        setItemWidths((currentItemWidths) => (currentItemWidths.length ? [] : currentItemWidths));
+    }, [items, isDropdown]);
+    React.useLayoutEffect(() => {
+        if (isDropdown && !areItemsMeasured) {
+            updateItemWidths();
+        }
+    }, [areItemsMeasured, isDropdown, updateItemWidths]);
+    React.useEffect(() => {
+        if (!isDropdown || typeof document === 'undefined' || !('fonts' in document)) {
+            return undefined;
+        }
+        let cancelled = false;
+        document.fonts.ready.then(() => {
+            if (!cancelled) {
+                setItemWidths((currentItemWidths) => currentItemWidths.length ? [] : currentItemWidths);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [items, isDropdown]);
+    const updateContainerSize = React.useMemo(() => (0, throttle_1.default)(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        setContainerWidth(containerRef.current.clientWidth);
+    }, 100), [containerRef]);
+    (0, uikit_1.useResizeObserver)({ ref: containerRef, onResize: updateContainerSize });
+    const isMeasured = containerWidth > 0 && areItemsMeasured;
+    const { visibleItems, hiddenItems } = React.useMemo(() => {
+        if (!isDropdown) {
+            return {
+                visibleItems: items ?? [],
+                hiddenItems: [],
+            };
+        }
+        if (!isMeasured) {
+            return {
+                visibleItems: items ?? [],
+                hiddenItems: [],
+            };
+        }
+        const linksCount = itemWidths.length;
+        let visibleItemsCount = 0;
+        let remainingContainerWidth = containerWidth;
+        for (const width of itemWidths) {
+            const isMoreThanOneItemLeft = linksCount !== visibleItemsCount + 1;
+            const currentItemWidth = width + (visibleItemsCount === 0 ? 0 : itemGap);
+            remainingContainerWidth -= currentItemWidth;
+            const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;
+            if (remainingContainerWidth < moreButtonWidth &&
+                (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem)) {
+                break;
+            }
+            visibleItemsCount++;
+        }
+        visibleItemsCount = Math.max(visibleItemsCount, 1);
+        return {
+            visibleItems: items?.slice(0, visibleItemsCount) ?? [],
+            hiddenItems: transformItemsToDropdownMenuItems(items?.slice(visibleItemsCount) ?? []),
+        };
+    }, [containerWidth, isMeasured, itemGap, itemWidths, items, moreButtonWidth, isDropdown]);
+    return { visibleItems, hiddenItems, measured: isMeasured };
+}
+function transformItemsToDropdownMenuItems(items) {
+    return items.map((item) => ({
+        text: item.text,
+        href: item.url,
+    }));
+}
+//# sourceMappingURL=useOverflowListItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowListItems.js","sourceRoot":"../../../../../src","sources":["blocks/Footer/hooks/useOverflowListItems.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {DropdownMenuItem, useResizeObserver} from '@gravity-ui/uikit';\nimport throttleFn from 'lodash/throttle';\n\nimport {LinkProps} from '../../../models';\n\nexport type LinkItem = Required<Pick<LinkProps, 'text' | 'url'>>;\n\ntype UseOverflowListItemsProps = {\n    isDropdown?: boolean;\n    containerRef: React.RefObject<HTMLElement>;\n    items?: LinkItem[];\n    itemSelector: string;\n    moreButtonWidth?: number;\n};\n\ntype OverflowListItemsResult = {\n    visibleItems: LinkItem[];\n    hiddenItems: DropdownMenuItem[];\n    measured: boolean;\n};\n\nfunction parseCssPixelValue(value: string) {\n    const parsedValue = parseFloat(value);\n\n    return Number.isNaN(parsedValue) ? 0 : parsedValue;\n}\n\nfunction getElementWidth(element: HTMLElement) {\n    return Math.ceil(Math.max(element.scrollWidth, element.getBoundingClientRect().width));\n}\n\nexport function useOverflowListItems({\n    isDropdown = false,\n    containerRef,\n    items,\n    itemSelector,\n    moreButtonWidth = 0,\n}: UseOverflowListItemsProps): OverflowListItemsResult {\n    const [containerWidth, setContainerWidth] = React.useState<number>(0);\n    const [itemWidths, setItemWidths] = React.useState<number[]>([]);\n    const [itemGap, setItemGap] = React.useState<number>(0);\n    const itemsCount = items?.length ?? 0;\n    const areItemsMeasured = !isDropdown || itemWidths.length === itemsCount;\n\n    const updateItemWidths = React.useCallback(() => {\n        if (!containerRef.current || !itemsCount) {\n            setItemWidths([]);\n            return;\n        }\n\n        const itemElements = Array.from(\n            containerRef.current.querySelectorAll(itemSelector),\n        ) as HTMLElement[];\n\n        if (itemElements.length !== itemsCount) {\n            return;\n        }\n\n        const listElement = itemElements[0]?.parentElement;\n\n        setItemWidths(itemElements.map(getElementWidth));\n\n        if (listElement) {\n            const listStyles = window.getComputedStyle(listElement);\n            setItemGap(parseCssPixelValue(listStyles.columnGap));\n        }\n    }, [containerRef, itemSelector, itemsCount]);\n\n    React.useEffect(() => {\n        setItemWidths((currentItemWidths) => (currentItemWidths.length ? [] : currentItemWidths));\n    }, [items, isDropdown]);\n\n    React.useLayoutEffect(() => {\n        if (isDropdown && !areItemsMeasured) {\n            updateItemWidths();\n        }\n    }, [areItemsMeasured, isDropdown, updateItemWidths]);\n\n    React.useEffect(() => {\n        if (!isDropdown || typeof document === 'undefined' || !('fonts' in document)) {\n            return undefined;\n        }\n\n        let cancelled = false;\n\n        document.fonts.ready.then(() => {\n            if (!cancelled) {\n                setItemWidths((currentItemWidths) =>\n                    currentItemWidths.length ? [] : currentItemWidths,\n                );\n            }\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, [items, isDropdown]);\n\n    const updateContainerSize = React.useMemo(\n        () =>\n            throttleFn(() => {\n                if (!containerRef.current) {\n                    return;\n                }\n\n                setContainerWidth(containerRef.current.clientWidth);\n            }, 100),\n        [containerRef],\n    );\n\n    useResizeObserver({ref: containerRef, onResize: updateContainerSize});\n\n    const isMeasured = containerWidth > 0 && areItemsMeasured;\n\n    const {visibleItems, hiddenItems} = React.useMemo(() => {\n        if (!isDropdown) {\n            return {\n                visibleItems: items ?? [],\n                hiddenItems: [],\n            };\n        }\n\n        if (!isMeasured) {\n            return {\n                visibleItems: items ?? [],\n                hiddenItems: [],\n            };\n        }\n\n        const linksCount = itemWidths.length;\n        let visibleItemsCount = 0;\n        let remainingContainerWidth = containerWidth;\n\n        for (const width of itemWidths) {\n            const isMoreThanOneItemLeft = linksCount !== visibleItemsCount + 1;\n            const currentItemWidth = width + (visibleItemsCount === 0 ? 0 : itemGap);\n\n            remainingContainerWidth -= currentItemWidth;\n\n            const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;\n            if (\n                remainingContainerWidth < moreButtonWidth &&\n                (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem)\n            ) {\n                break;\n            }\n\n            visibleItemsCount++;\n        }\n\n        visibleItemsCount = Math.max(visibleItemsCount, 1);\n\n        return {\n            visibleItems: items?.slice(0, visibleItemsCount) ?? [],\n            hiddenItems: transformItemsToDropdownMenuItems(items?.slice(visibleItemsCount) ?? []),\n        };\n    }, [containerWidth, isMeasured, itemGap, itemWidths, items, moreButtonWidth, isDropdown]);\n\n    return {visibleItems, hiddenItems, measured: isMeasured};\n}\n\nfunction transformItemsToDropdownMenuItems<ItemType extends {text: string; url: string}>(\n    items: ItemType[],\n): DropdownMenuItem[] {\n    return items.map((item) => ({\n        text: item.text,\n        href: item.url,\n    }));\n}\n"]}