@gravity-ui/blog-constructor 5.0.2 → 5.2.0

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AuthorProps } from '../../models/blocks';
-export declare const Author: React.FC<AuthorProps>;
+export declare const Author: (props: AuthorProps) => React.JSX.Element | null;

package/build/cjs/blocks/Author/Author.js

@@ -11,7 +11,7 @@ const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.block)('author');
 const Author = (props) => {
     var _a;
-    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { image, paddingTop, paddingBottom, authorId, qa } = props;
     const { post } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
     const author = (_a = post === null || post === void 0 ? void 0 : post.authors) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === authorId);
     const authorItem = (0, react_1.useMemo)(() => {
@@ -31,7 +31,7 @@ const Author = (props) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content') },
+        }, className: b('content'), qa: qa },
         react_1.default.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
             react_1.default.createElement(page_constructor_1.Author, { type: page_constructor_1.AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
 };

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BannerProps } from '../../models/blocks';
-export declare const Banner: React.FC<BannerProps>;
+export declare const Banner: ({ color, imageSize, image, paddingTop, paddingBottom, qa, ...content }: BannerProps) => React.JSX.Element;

package/build/cjs/blocks/Banner/Banner.js

@@ -10,10 +10,12 @@ const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('banner');
+const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
 const Banner = (_a) => {
     var _b;
-    var { color, imageSize = 's', image, paddingTop, paddingBottom } = _a, content = tslib_1.__rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom"]);
+    var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = tslib_1.__rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
     const contentStyle = {};
+    const qaAttributes = (0, common_1.getQaAttributes)(qa, BANNER_CUSTOM_QA_ATTRIBUTES);
     if (color) {
         contentStyle.backgroundColor = color;
     }
@@ -32,11 +34,11 @@ const Banner = (_a) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('container') },
-        react_1.default.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+        }, qa: qaAttributes.wrapper, className: b('container') },
+        react_1.default.createElement("div", { className: b('content'), style: contentStyle, "data-qa": qaAttributes.content },
             react_1.default.createElement("div", { className: b('info') },
-                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))),
-            image && (react_1.default.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData, { qa: qaAttributes.content }))),
+            image && (react_1.default.createElement("div", { className: b('image-container', { ['image-size']: imageSize }), "data-qa": qaAttributes.imageContainer },
                 react_1.default.createElement(page_constructor_1.Image, { className: b('image'), src: image }))))));
 };
 exports.Banner = Banner;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CTAProps } from '../../models/blocks';
-export declare const CTA: React.FC<CTAProps>;
+export declare const CTA: ({ items, paddingTop, paddingBottom }: CTAProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ColoredTextProps } from '../../models/blocks';
-export declare const ColoredText: React.FC<ColoredTextProps>;
+export declare const ColoredText: ({ background, paddingTop, paddingBottom, qa, ...content }: ColoredTextProps) => React.JSX.Element;

package/build/cjs/blocks/ColoredText/ColoredText.js

@@ -10,15 +10,16 @@ const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('colored-text');
 const ColoredText = (_a) => {
-    var { background, paddingTop, paddingBottom } = _a, content = tslib_1.__rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    var { background, paddingTop, paddingBottom, qa } = _a, content = tslib_1.__rest(_a, ["background", "paddingTop", "paddingBottom", "qa"]);
     const contentData = (0, common_1.updateContentSizes)(content);
+    const qaAttributes = (0, common_1.getQaAttributes)(qa);
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        } },
-        react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": "blog-colored-text-content" },
+        }, qa: qaAttributes.wrapper },
+        react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": qaAttributes.container },
             react_1.default.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (react_1.default.createElement(page_constructor_1.BackgroundImage, { className: b('picture'), alt: background === null || background === void 0 ? void 0 : background.altText, src: background === null || background === void 0 ? void 0 : background.image }))),
             react_1.default.createElement("div", { className: b('text-content') },
-                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))))));
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData, { qa: qaAttributes.content }))))));
 };
 exports.ColoredText = ColoredText;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FeedProps } from '../../models/blocks';
-export declare const Feed: React.FC<FeedProps>;
+export declare const Feed: ({ image }: FeedProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { HeaderProps } from '../../models/blocks';
-export declare const Header: React.FC<HeaderProps>;
+export declare const Header: (props: HeaderProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { LayoutProps } from '../../models/blocks';
-export declare const Layout: React.FC<LayoutProps>;
+export declare const Layout: ({ fullWidth, mobileOrder, children, paddingTop, paddingBottom, }: PropsWithChildren<LayoutProps>) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { MediaProps } from '../../models/blocks';
-export declare const Media: React.FC<MediaProps>;
+export declare const Media: ({ text, paddingTop, paddingBottom, ...mediaProps }: MediaProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { MetaProps } from '../../models/blocks';
-export declare const Meta: React.FC<MetaProps>;
+export declare const Meta: (props: MetaProps) => React.JSX.Element;

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

@@ -9,4 +9,4 @@ import { SuggestProps } from '../../models/blocks';
  *
  * @returns -jsx
  */
-export declare const Suggest: React.FC<SuggestProps>;
+export declare const Suggest: ({ paddingTop, paddingBottom }: SuggestProps) => React.JSX.Element | null;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { YFMProps } from '../../models/blocks';
-export declare const YFM: React.FC<YFMProps>;
+export declare const YFM: (props: YFMProps) => React.JSX.Element;

package/build/cjs/blocks/YFM/YFM.js

@@ -4,16 +4,18 @@ exports.YFM = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const Wrapper_1 = require("../../components/Wrapper/Wrapper");
 const paddings_1 = require("../../models/paddings");
-const b = (0, bem_cn_lite_1.default)('yfm');
+const cn_1 = require("../../utils/cn");
+const common_1 = require("../../utils/common");
+const b = (0, cn_1.cn)('yfm');
 const YFM = (props) => {
-    const { text, paddingTop, paddingBottom } = props;
+    const { text, paddingTop, paddingBottom, qa } = props;
+    const qaAttributes = (0, common_1.getQaAttributes)(qa);
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        } },
+        }, qa: qaAttributes.wrapper },
         react_1.default.createElement(page_constructor_1.YFMWrapper, { content: text, modifiers: {
                 blog: true,
                 resetPaddings: true,

package/build/cjs/components/FeedHeader/FeedHeader.d.ts

@@ -4,5 +4,5 @@ import { ControlsProps } from './components/Controls/Controls';
 type HeaderProps = Pick<HeaderBlockProps, 'background' | 'offset' | 'theme' | 'verticalOffset'>;
 type FeedHeaderProps = HeaderProps & ControlsProps;
 type FeedHeaderContainerProps = FeedHeaderProps & ClassNameProps;
-export declare const FeedHeader: React.FC<FeedHeaderContainerProps>;
+export declare const FeedHeader: ({ tags, services, handleLoadData, offset, background, theme, verticalOffset, className, queryParams, }: FeedHeaderContainerProps) => React.JSX.Element;
 export {};

package/build/cjs/components/FeedHeader/components/Controls/Controls.css

@@ -23,9 +23,6 @@ unpredictable css rules order in build */
   width: 100%;
   max-width: 100%;
 }
-.bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
-  border-color: var(--g-color-base-background);
-}
 .bc-feed-controls__select {
   width: 100%;
 }
@@ -33,9 +30,6 @@ unpredictable css rules order in build */
   max-height: 500px;
   border-radius: 12px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
-  margin-top: 0;
-}
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list {
   overflow: scroll;
 }
@@ -49,27 +43,15 @@ unpredictable css rules order in build */
   margin: 4px;
   border-radius: 8px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content {
-  padding: 4px;
-  border: none;
-  border-bottom: 1px solid var(--yc-color-line-generic);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content .yc-text-input__control.yc-text-input__control_type_input {
-  border: none;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list_size_xl .g-select-list__option {
-  padding: 0 16px;
-}
 
-.bc-feed-controls__popup-filter .yc-text-input__control {
+.bc-feed-controls__popup-filter {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  padding: 4px 12px;
   border: none;
-}
-.bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
-  border: none;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .bc-feed-controls__select:hover {
   width: 100%;

package/build/cjs/components/FeedHeader/components/Controls/Controls.d.ts

@@ -12,4 +12,4 @@ export type ControlsProps = {
     queryParams: Query;
     setQuery?: SetQueryType;
 };
-export declare const Controls: React.FC<ControlsProps>;
+export declare const Controls: ({ handleLoadData, tags, services, queryParams, }: ControlsProps) => React.JSX.Element;

package/build/cjs/components/FeedHeader/components/Controls/Controls.js

@@ -104,7 +104,7 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
                         defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllTags),
                     }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption })),
             services.length > 0 ? (react_1.default.createElement("div", { className: b('filter-item') },
-                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
+                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
                         initial: servicesItems,
                         list: services,
                         defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllServices),

package/build/cjs/components/FeedHeader/components/Controls/customRenders.js

@@ -13,8 +13,7 @@ const renderSwitcher = ({ initial, list, defaultLabel }) =>
 // eslint-disable-next-line react/display-name
 ({ onClick, ref }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
 exports.renderSwitcher = renderSwitcher;
-const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement("div", { className: b('popup-filter') },
-    react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown })));
+const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 exports.renderFilter = renderFilter;
 const renderOption = (option) => (react_1.default.createElement(CustomSelectOption_1.CustomSelectOption, { data: option }));
 exports.renderOption = renderOption;

package/build/cjs/components/Paginator/types.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { Modifications } from 'bem-cn-lite';
-import { ClassNameProps } from '../../models/common';
+import type { ReactNode } from 'react';
+import type { NoStrictEntityMods } from '@bem-react/classname';
+import type { ClassNameProps } from '../../models/common';
 export interface PaginatorItemProps {
     key: string | ArrowType;
     dataKey: string | ArrowType;
-    mods: Modifications;
+    mods: NoStrictEntityMods;
     content: ReactNode;
     onClick?: (key: number | ArrowType) => void;
     loading?: boolean;

package/build/cjs/components/PostCard/PostCard.d.ts

@@ -1,15 +1,16 @@
 import React from 'react';
 import { MetrikaGoal } from '@gravity-ui/page-constructor';
-import { PostData } from '../../models/common';
+import { PostCardSize, PostCardTitleHeadingLevel, PostData } from '../../models/common';
 type PostCardProps = {
     post: PostData;
     fullWidth?: boolean;
     showTag?: boolean;
-    size?: 's' | 'm';
+    size?: PostCardSize;
+    titleHeadingLevel?: PostCardTitleHeadingLevel;
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
     metrikaGoals?: MetrikaGoal;
 };
-export declare const PostCard: React.FC<PostCardProps>;
+export declare const PostCard: ({ post, metrikaGoals, fullWidth, size, showTag, titleHeadingLevel, }: PostCardProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostCard/PostCard.js

@@ -5,10 +5,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const LikesContext_1 = require("../../contexts/LikesContext");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const SuggestPostInfo_1 = require("../PostInfo/SuggestPostInfo");
 const b = (0, cn_1.block)('post-card');
-const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, }) => {
+const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostCardSize.SMALL, showTag = false, titleHeadingLevel = common_1.PostCardTitleHeadingLevel.H3, }) => {
     var _a;
     const { title: postTitle, htmlTitle, textTitle, blogPostId, id, date, readingTime, hasUserLike, likes, image, description, tags, url, } = post;
     const title = postTitle || textTitle || htmlTitle;
@@ -25,9 +26,9 @@ const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag =
             react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         react_1.default.createElement(page_constructor_1.CardBase.Content, null,
             showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (react_1.default.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
-            title && (react_1.default.createElement("h4", { className: b('title', { size }) },
-                react_1.default.createElement("span", null,
-                    react_1.default.createElement(page_constructor_1.HTML, null, title)))),
+            title &&
+                react_1.default.createElement(titleHeadingLevel, { className: b('title', { size }) }, react_1.default.createElement("span", null,
+                    react_1.default.createElement(page_constructor_1.HTML, null, title))),
             description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,

package/build/cjs/components/PostInfo/PostInfo.d.ts

@@ -26,5 +26,5 @@ type PostInfoProps = QAProps & {
  *
  * @returns jsx
  */
-export declare const PostInfo: React.FC<PostInfoProps>;
+export declare const PostInfo: ({ date, readingTime, postId, theme, metrikaGoals, qa, }: PostInfoProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
+import { PostCardSize, PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
 export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
     postId: PostData['blogPostId'];
-    size?: 's' | 'm';
+    size?: PostCardSize;
     likes?: {
         likesCount?: number;
         hasUserLike?: boolean;
@@ -23,4 +23,4 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
  *
  * @returns jsx
  */
-export declare const SuggestPostInfo: React.FC<SuggestPostInfoProps>;
+export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, }: SuggestPostInfoProps) => React.JSX.Element;

package/build/cjs/components/PostInfo/SuggestPostInfo.js

@@ -4,6 +4,7 @@ exports.SuggestPostInfo = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const useLikes_1 = require("../../hooks/useLikes");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const Date_1 = require("./components/Date");
 const ReadingTime_1 = require("./components/ReadingTime");
@@ -23,7 +24,7 @@ const b = (0, cn_1.block)('post-info');
  *
  * @returns jsx
  */
-const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
+const SuggestPostInfo = ({ postId, date, readingTime, likes, size = common_1.PostCardSize.SMALL, qa, }) => {
     const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,

package/build/cjs/components/PostInfo/components/Date.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { PostCardSize } from '../../../models/common';
 type DateProps = {
     date: string | number;
-    size?: 's' | 'm';
+    size?: PostCardSize;
 };
-export declare const Date: React.FC<DateProps>;
+export declare const Date: ({ date, size }: DateProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/Date.js

@@ -4,10 +4,11 @@ exports.Date = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const LocaleContext_1 = require("../../../contexts/LocaleContext");
+const common_1 = require("../../../models/common");
 const cn_1 = require("../../../utils/cn");
 const date_1 = require("../../../utils/date");
 const b = (0, cn_1.block)('post-info');
-const Date = ({ date, size = 's' }) => {
+const Date = ({ date, size = common_1.PostCardSize.SMALL }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
     return react_1.default.createElement("div", { className: b('item', { size }) }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
 };

package/build/cjs/components/PostInfo/components/ReadingTime.d.ts

@@ -3,5 +3,5 @@ type ReadingTimeProps = {
     readingTime: number;
     size?: 's' | 'm';
 };
-export declare const ReadingTime: React.FC<ReadingTimeProps>;
+export declare const ReadingTime: ({ readingTime, size }: ReadingTimeProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/Save.d.ts

@@ -24,5 +24,5 @@ type SaveProps = QAProps & {
  *
  * @returns jsx
  */
-export declare const Save: React.FC<SaveProps>;
+export declare const Save: ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, qa, }: SaveProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/Sharing.d.ts

@@ -6,5 +6,5 @@ type SharingProps = {
      */
     metrikaGoal?: string;
 };
-export declare const Sharing: React.FC<SharingProps>;
+export declare const Sharing: ({ theme, metrikaGoal }: SharingProps) => React.JSX.Element;
 export {};

package/build/cjs/components/Posts/Posts.d.ts

@@ -14,5 +14,5 @@ type PostCardProps = {
     pinnedPostOnPage?: PostData;
     pageCountForShowSupportButtons?: number;
 };
-export declare const Posts: React.FC<PostCardProps>;
+export declare const Posts: ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }: PostCardProps) => React.JSX.Element;
 export {};

package/build/cjs/components/Posts/Posts.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = require("../../i18n");
+const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
 const Paginator_1 = require("../Paginator/Paginator");
 const PostCard_1 = require("../PostCard/PostCard");
@@ -15,12 +16,14 @@ const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShow
     isFetching && react_1.default.createElement("div", { className: b('loaderContainer') }),
     react_1.default.createElement("div", { id: containerId, className: b('cards-container', { isLoading: isFetching }) },
         pinnedPostOnPage && currentPage === 1 && (react_1.default.createElement("div", { className: b('pinned-container') },
-            react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
+            react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: common_1.PostCardSize.MEDIUM, fullWidth: true, showTag: true, titleHeadingLevel: common_1.PostCardTitleHeadingLevel.H2 }))),
         (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (react_1.default.createElement(page_constructor_1.CardLayoutBlock, { title: '', colSizes: {
                 all: 12,
                 lg: 4,
                 md: 6,
-            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
+            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true, titleHeadingLevel: pinnedPostOnPage
+                ? common_1.PostCardTitleHeadingLevel.H3
+                : common_1.PostCardTitleHeadingLevel.H2 }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
     react_1.default.createElement("div", { className: b('pagination') },
         Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore }, (0, i18n_1.i18)(i18n_1.Keyset.ActionLoadMore))),
         errorShowMore && (react_1.default.createElement("div", { className: b('error-show-more') },

package/build/cjs/components/PostsEmpty/PostsEmpty.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const PostsEmpty: React.FC;
+export declare const PostsEmpty: () => React.JSX.Element;

package/build/cjs/components/PostsError/PostsError.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type PostsErrorContainerProps = {
     onButtonClick?: () => void | Promise<void>;
 };
-export declare const PostsError: React.FC<PostsErrorContainerProps>;
+export declare const PostsError: ({ onButtonClick }: PostsErrorContainerProps) => React.JSX.Element;
 export {};

package/build/cjs/components/Search/Search.css

@@ -7,30 +7,28 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  height: 44px;
   transition: width 0.3s;
 }
-.bc-search__close-button, .bc-search__search-button {
-  position: absolute;
-  z-index: 2;
-  right: 10px;
+.bc-search__input-icon {
+  display: flex;
+  padding-right: 7px;
   color: var(--g-color-text-hint);
+  cursor: pointer;
 }
-.bc-search__search-button:hover {
-  color: var(--g-color-text-secondary);
+.bc-search__search-suggest {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  background-color: var(--g-color-base-background);
+  border-radius: var(--bc-text-input-border-radius);
+  border: 1px solid var(--g-color-base-background);
 }
-.bc-search__search-suggest-container {
-  width: 100%;
+.bc-search__search-suggest:hover, .bc-search__search-suggest:focus {
+  border: 1px solid var(--g-color-base-generic-hover);
 }
 .bc-search .bc-search__search-suggest-control {
-  background-color: var(--g-color-base-background);
   padding-left: 12px;
   padding-right: 32px;
-  border-radius: var(--bc-text-input-border-radius);
-  border: 1px solid transparent;
-}
-.bc-search .bc-search__search-suggest-control:hover, .bc-search .bc-search__search-suggest-control:focus {
-  border: 1px solid var(--g-color-base-generic-hover);
 }
 .bc-search_size_s {
   --bc-text-input-border-radius: var(--g-border-radius-l);

package/build/cjs/components/Search/Search.d.ts

@@ -11,5 +11,11 @@ interface SearchProps extends ClassNameProps {
     autoFocus?: boolean;
     className?: string;
 }
-export declare const Search: React.FC<SearchProps>;
+/**
+ * Search component, placed on blog main page,
+ * based on TextInput from uikit
+ *
+ * @returns {JSX|null}
+ */
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => React.JSX.Element;
 export {};

package/build/cjs/components/Search/Search.js

@@ -10,12 +10,17 @@ const i18n_1 = require("../../i18n");
 const Close_1 = require("../../icons/Close");
 const SearchIcon_1 = require("../../icons/SearchIcon");
 const cn_1 = require("../../utils/cn");
-const ButtonWithIcon_1 = require("../ButtonWithIcon/ButtonWithIcon");
 const b = (0, cn_1.block)('search');
 const SEARCH_ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
-const Search = (props) => {
-    const { className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, } = props;
+const AUTOFOCUS_TIMEOUT = 0;
+/**
+ * Search component, placed on blog main page,
+ * based on TextInput from uikit
+ *
+ * @returns {JSX|null}
+ */
+const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
     const handleChange = (0, lodash_1.debounce)(onSubmit, debounce);
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const inputRef = (0, react_1.useRef)(null);
@@ -27,21 +32,28 @@ const Search = (props) => {
     }, [externalValue]);
     (0, react_1.useEffect)(() => {
         if (autoFocus && !isIPhone) {
-            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, 0);
+            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, AUTOFOCUS_TIMEOUT);
         }
     }, [autoFocus, inputRef, isIPhone]);
-    return (react_1.default.createElement("div", { className: b({ size }, className) },
-        react_1.default.createElement("div", { className: b('search-suggest-container') },
-            react_1.default.createElement(uikit_1.TextInput, { className: b('search-suggest'), value: value, onUpdate: (query) => {
-                    setValue(query);
-                    handleChange(query);
-                }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
-                    className: b('search-suggest-control'),
-                } })),
-        value ? (react_1.default.createElement(ButtonWithIcon_1.ButtonWithIcon, { className: b('close-button'), icon: Close_1.Close, iconSize: CLOSE_ICON_SIZE, size: "xs", onClick: () => {
+    const rightContent = (0, react_1.useMemo)(() => {
+        const iconData = value ? Close_1.Close : SearchIcon_1.SearchIcon;
+        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;
+        const handleClick = () => {
+            if (value) {
                 handleChange.cancel();
                 setValue('');
                 onSubmit('');
-            } })) : (react_1.default.createElement(ButtonWithIcon_1.ButtonWithIcon, { className: b('search-button'), icon: SearchIcon_1.SearchIcon, iconSize: SEARCH_ICON_SIZE, size: "xs", disabled: true }))));
+            }
+        };
+        return (react_1.default.createElement("div", { className: b('input-icon'), onClick: handleClick },
+            react_1.default.createElement(uikit_1.Icon, { size: iconSize, data: iconData })));
+    }, [handleChange, onSubmit, value]);
+    return (react_1.default.createElement("div", { className: b({ size }, className) },
+        react_1.default.createElement(uikit_1.TextInput, { className: b('search-suggest'), value: value, onUpdate: (query) => {
+                setValue(query);
+                handleChange(query);
+            }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
+                className: b('search-suggest-control'),
+            }, rightContent: rightContent })));
 };
 exports.Search = Search;

package/build/cjs/constructor/BlogConstructorProvider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { AnalyticsContextProps } from '@gravity-ui/page-constructor';
 import { DeviceContextProps } from '../contexts/DeviceContext';
 import { RouterContextProps } from '../contexts/RouterContext';
@@ -15,4 +15,4 @@ export interface BlogConstructorProviderProps {
     settings?: SettingsContextProps;
     children?: React.ReactNode;
 }
-export declare const BlogConstructorProvider: React.FC<BlogConstructorProviderProps>;
+export declare const BlogConstructorProvider: ({ isMobile, locale, router, theme, device, analytics, settings, children, }: PropsWithChildren<BlogConstructorProviderProps>) => React.JSX.Element;