@gravity-ui/page-constructor 6.2.2 → 6.3.1

package/build/cjs/models/constructor-items/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAOA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB","sourcesContent":["import * as React from 'react';\n\nimport {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n    Column = 'column',\n    Line = 'line',\n}\n\nexport enum PriceDetailsType {\n    MARKED_LIST = 'marked-list',\n    SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    YELLOW = 'yellow',\n    PURPLE = 'purple',\n    RED = 'red',\n}\n\nexport enum PlayButtonType {\n    Default = 'default',\n    Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n    Blue = 'blue',\n    Grey = 'grey',\n}\n\nexport enum CustomControlsType {\n    WithMuteButton = 'with-mute-button',\n    WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n    Left = 'left',\n    Right = 'right',\n    Center = 'center',\n}\n\nexport enum MediaVideoType {\n    Default = 'default',\n    Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n    Default = 'default',\n    Custom = 'custom',\n}\n\nexport enum QuoteType {\n    Chevron = 'chevron', // « »\n    EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' | 'dark';\nexport type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l';\nexport type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\nexport type HeaderWidth = 's' | 'm' | 'l';\nexport type HeaderImageSize = 's' | 'm';\nexport type HeaderOffset = 'default' | 'large';\nexport type Justify = 'start' | 'center' | 'end';\nexport type ColumnsCount = 1 | 2 | 3 | 4;\nexport type LegendTableMarkerType = 'disk' | 'tick';\nexport type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';\nexport type MediaDirection = 'media-content' | 'content-media';\nexport type PriceDescriptionColor = 'cornflower' | 'black';\nexport type ContentSize = 's' | 'm' | 'l';\nexport type ContentTextSize = 's' | 'm' | 'l';\nexport type ContentTheme = 'default' | 'dark' | 'light';\nexport type FileLinkType = 'vertical' | 'horizontal';\nexport type ImageCardMargins = 's' | 'm';\nexport type LayoutItemContentMargin = 'm' | 'l';\n\n// modifiers\nexport interface Themable {\n    theme?: TextTheme;\n}\n\nexport interface Justifyable {\n    justify?: Justify;\n}\n\nexport interface Stylable {\n    className?: string;\n}\n\nexport interface Animatable {\n    animated?: boolean;\n}\n\nexport interface Tabbable {\n    tabIndex?: number;\n}\n\nexport interface Roleable {\n    role?: React.AriaRole;\n}\n\n//common props\nexport interface Background {\n    image?: string;\n    color?: string;\n}\n\nexport interface AnchorProps {\n    text: string;\n    url: string;\n}\n\n/**\n * @deprecated Component VideoBlock will be deleted, which uses this logic\n */\ninterface LoopProps {\n    start: number;\n    end?: number;\n}\n\n// images\n\nexport interface ImageInfoProps\n    extends Pick<\n        React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n        'aria-describedby' | 'loading'\n    > {\n    alt?: string;\n    fetchPriority?: 'high' | 'low' | 'auto';\n    disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n    src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n    desktop: string;\n    mobile: string;\n    tablet?: string;\n}\n\nexport type ImageProps = string | ImageObjectProps | ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n    extends React.HTMLProps<HTMLDivElement>,\n        Partial<ImageDeviceProps>,\n        Partial<ImageObjectProps>,\n        QAProps {\n    style?: React.CSSProperties;\n    imageClassName?: string;\n    hide?: boolean;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n    src: string[];\n    type?: MediaVideoType;\n    loop?: LoopProps | boolean;\n    muted?: boolean;\n    autoplay?: boolean;\n    elapsedTime?: number;\n    playButton?: PlayButtonProps;\n    controls?: MediaVideoControlsType;\n    customControlsOptions?: CustomControlsOptions;\n    ariaLabel?: string;\n    contain?: boolean;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n    url: string;\n    urlTitle?: string;\n    text?: string;\n    textSize?: TextSize;\n    theme?: LinkTheme;\n    colorTheme?: TextTheme;\n    arrow?: boolean;\n    target?: string;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n    href: string;\n    text: React.ReactNode;\n    type?: FileLinkType;\n    textSize?: TextSize;\n    theme?: ContentTheme;\n    urlTitle?: string;\n    onClick?: () => void;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n    | ButtonView\n    | 'github'\n    | 'app-store'\n    | 'google-play'\n    | 'scale'\n    | 'monochrome';\n\nexport interface ButtonProps\n    extends AnalyticsEventsBase,\n        Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {\n    text: string;\n    url: string;\n    urlTitle?: string;\n    primary?: boolean;\n    theme?: ButtonTheme;\n    img?: ButtonImageProps | string;\n    target?: string;\n}\n\nexport type ButtonImagePosition = 'left' | 'right';\n\nexport interface ButtonImageProps {\n    url: string;\n    position?: ButtonImagePosition;\n    alt?: string;\n}\n\nexport interface CustomControlsOptions {\n    type?: CustomControlsType;\n    muteButtonShown?: boolean;\n    positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n    type?: PlayButtonType;\n    theme?: PlayButtonThemes;\n    text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n    video: MediaVideoProps;\n    height?: number;\n    ratio?: number | 'auto';\n    previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n    videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n    youtube: string;\n    previewImg?: string;\n    fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n    image: ImageProps | ImageProps[] | ImageDeviceProps;\n    video?: MediaVideoProps;\n    parallax?: boolean;\n    height?: number;\n    disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n    dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n    iframe: IframeProps;\n    margins?: boolean;\n}\n\nexport interface MediaProps\n    extends Animatable,\n        Partial<MediaComponentDataLensProps>,\n        Partial<MediaComponentYoutubeProps>,\n        Partial<MediaComponentVideoIframeProps>,\n        Partial<MediaComponentImageProps>,\n        Partial<MediaComponentIframeProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n    videoMicrodata?: {\n        name?: string;\n        description?: string;\n        duration?: string;\n        uploadDate?: string;\n        contentUrl?: string;\n        thumbnailUrl?: string;\n    };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n    fullWidthMedia?: boolean;\n    className?: string;\n    mediaClassName?: string;\n}\n\nexport type Coordinate = number[];\n\nexport interface MapBaseProps {\n    zoom?: number;\n    className?: string;\n}\n\nexport interface GMapProps extends MapBaseProps {\n    address: string;\n}\n\nexport interface YMapProps extends MapBaseProps {\n    markers: YMapMarker[];\n    id: string;\n}\n\nexport interface YMapMarker {\n    address?: string;\n    coordinate?: Coordinate;\n    label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n    iconCaption?: string;\n    iconContent?: string;\n    iconColor?: string;\n    preset?: string;\n}\n\nexport type MapProps = GMapProps | YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n    id: string;\n    theme: 'dark' | 'light';\n}\n\nexport interface IframeProps {\n    src: string;\n    width?: number;\n    height?: number;\n    title?: string;\n    name?: string;\n}\n\nexport type DataLensProps = string | DataLensObjectProps;\n\nexport interface AuthorItem {\n    firstName: string;\n    secondName: string;\n    description?: string;\n    avatar?: ThemeSupporting<ImageProps> | JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps {\n    items: {\n        url: string;\n        text: React.ReactNode;\n    }[];\n    theme?: TextTheme;\n    analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps {\n    navTitle?: string;\n    anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n    text: string;\n    textSize?: TextSize;\n    url?: string;\n    urlTitle?: string;\n    custom?: string | React.ReactNode;\n    onClick?: () => void;\n}\n\nexport type MediaView = 'fit' | 'full';\n\n// card\nexport type MediaBorder = 'shadow' | 'line' | 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' | 'footer';\n\nexport interface CardBaseProps {\n    border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n    controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n    title: string;\n    detailedTitle?: string;\n    description: string;\n    label?: {\n        color: PriceLabelColor;\n        text?: string;\n        size?: TextSize;\n    };\n}\n\nexport interface PriceDetailsSettingsProps {\n    title: string;\n    description: string;\n}\n\nexport interface PriceDetailsListProps {\n    text: string;\n}\n\nexport interface PriceDetailsProps {\n    items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n    extends PriceDetailsProps,\n        PriceDescriptionProps,\n        AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n    title: string;\n    size?: TextSize;\n    titleColor?: PriceDescriptionColor;\n}\n\n/** @deprecated */\nexport interface PriceDetailedProps extends CardBaseProps {\n    items: PriceItemProps[];\n    description?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n        titleColor?: PriceDescriptionColor;\n    };\n    details?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n    };\n    priceType?: PriceDetailsType;\n    numberGroupItems?: 3 | 4 | 5;\n    isCombined?: boolean;\n    useMixedView?: boolean;\n    foldable?: PriceFoldableDetailsProps;\n    labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n    author: AuthorItem;\n    className?: string;\n    authorContainerClassName?: string;\n    type?: AuthorType;\n    theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n    title?: TitleItemProps | string;\n    subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n    id: number | string;\n    containerId?: string;\n    theme?: string;\n    className?: string;\n    headerHeight?: number;\n    customFormOrigin?: string;\n    customFormSection?: string;\n    params?: {[key: string]: string};\n\n    onSubmit?: () => void;\n    onLoad?: () => void;\n}\n\nexport interface WithBorder {\n    border?: MediaBorder;\n    /**\n     * @deprecated use custom class for media-component\n     */\n    disableShadow?: boolean;\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAOA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB","sourcesContent":["import * as React from 'react';\n\nimport {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n    Column = 'column',\n    Line = 'line',\n}\n\nexport enum PriceDetailsType {\n    MARKED_LIST = 'marked-list',\n    SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    YELLOW = 'yellow',\n    PURPLE = 'purple',\n    RED = 'red',\n}\n\nexport enum PlayButtonType {\n    Default = 'default',\n    Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n    Blue = 'blue',\n    Grey = 'grey',\n}\n\nexport enum CustomControlsType {\n    WithMuteButton = 'with-mute-button',\n    WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n    Left = 'left',\n    Right = 'right',\n    Center = 'center',\n}\n\nexport enum MediaVideoType {\n    Default = 'default',\n    Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n    Default = 'default',\n    Custom = 'custom',\n}\n\nexport enum QuoteType {\n    Chevron = 'chevron', // « »\n    EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' | 'dark';\nexport type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l';\nexport type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\nexport type HeaderWidth = 's' | 'm' | 'l';\nexport type HeaderImageSize = 's' | 'm';\nexport type HeaderOffset = 'default' | 'large';\nexport type Justify = 'start' | 'center' | 'end';\nexport type ColumnsCount = 1 | 2 | 3 | 4;\nexport type LegendTableMarkerType = 'disk' | 'tick';\nexport type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';\nexport type MediaDirection = 'media-content' | 'content-media';\nexport type PriceDescriptionColor = 'cornflower' | 'black';\nexport type ContentSize = 's' | 'm' | 'l';\nexport type ContentTextSize = 's' | 'm' | 'l';\nexport type ContentTheme = 'default' | 'dark' | 'light';\nexport type FileLinkType = 'vertical' | 'horizontal';\nexport type ImageCardMargins = 's' | 'm';\nexport type LayoutItemContentMargin = 'm' | 'l';\n\n// modifiers\nexport interface Themable {\n    theme?: TextTheme;\n}\n\nexport interface Justifyable {\n    justify?: Justify;\n}\n\nexport interface Stylable {\n    className?: string;\n}\n\nexport interface Animatable {\n    animated?: boolean;\n}\n\nexport interface Tabbable {\n    tabIndex?: number;\n}\n\nexport interface Roleable {\n    role?: React.AriaRole;\n}\n\nexport interface AriaProps {\n    ariaProps?: React.AriaAttributes;\n}\n\n//common props\nexport interface Background {\n    image?: string;\n    color?: string;\n}\n\nexport interface AnchorProps {\n    text: string;\n    url: string;\n}\n\n/**\n * @deprecated Component VideoBlock will be deleted, which uses this logic\n */\ninterface LoopProps {\n    start: number;\n    end?: number;\n}\n\n// images\n\nexport interface ImageInfoProps\n    extends Pick<\n        React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n        'aria-describedby' | 'loading'\n    > {\n    alt?: string;\n    fetchPriority?: 'high' | 'low' | 'auto';\n    disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n    src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n    desktop: string;\n    mobile: string;\n    tablet?: string;\n}\n\nexport type ImageProps = string | ImageObjectProps | ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n    extends React.HTMLProps<HTMLDivElement>,\n        Partial<ImageDeviceProps>,\n        Partial<ImageObjectProps>,\n        QAProps {\n    style?: React.CSSProperties;\n    imageClassName?: string;\n    hide?: boolean;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n    src: string[];\n    type?: MediaVideoType;\n    loop?: LoopProps | boolean;\n    muted?: boolean;\n    autoplay?: boolean;\n    elapsedTime?: number;\n    playButton?: PlayButtonProps;\n    controls?: MediaVideoControlsType;\n    customControlsOptions?: CustomControlsOptions;\n    ariaLabel?: string;\n    contain?: boolean;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n    url: string;\n    urlTitle?: string;\n    text?: string;\n    textSize?: TextSize;\n    theme?: LinkTheme;\n    colorTheme?: TextTheme;\n    arrow?: boolean;\n    target?: string;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n    href: string;\n    text: React.ReactNode;\n    type?: FileLinkType;\n    textSize?: TextSize;\n    theme?: ContentTheme;\n    urlTitle?: string;\n    onClick?: () => void;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n    | ButtonView\n    | 'github'\n    | 'app-store'\n    | 'google-play'\n    | 'scale'\n    | 'monochrome';\n\nexport interface ButtonProps\n    extends AnalyticsEventsBase,\n        Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {\n    text: string;\n    url: string;\n    urlTitle?: string;\n    primary?: boolean;\n    theme?: ButtonTheme;\n    img?: ButtonImageProps | string;\n    target?: string;\n}\n\nexport type ButtonImagePosition = 'left' | 'right';\n\nexport interface ButtonImageProps {\n    url: string;\n    position?: ButtonImagePosition;\n    alt?: string;\n}\n\nexport interface CustomControlsOptions {\n    type?: CustomControlsType;\n    muteButtonShown?: boolean;\n    positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n    type?: PlayButtonType;\n    theme?: PlayButtonThemes;\n    text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n    video: MediaVideoProps;\n    height?: number;\n    ratio?: number | 'auto';\n    previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n    videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n    youtube: string;\n    previewImg?: string;\n    fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n    image: ImageProps | ImageProps[] | ImageDeviceProps;\n    video?: MediaVideoProps;\n    parallax?: boolean;\n    height?: number;\n    disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n    dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n    iframe: IframeProps;\n    margins?: boolean;\n}\n\nexport interface MediaProps\n    extends Animatable,\n        Partial<MediaComponentDataLensProps>,\n        Partial<MediaComponentYoutubeProps>,\n        Partial<MediaComponentVideoIframeProps>,\n        Partial<MediaComponentImageProps>,\n        Partial<MediaComponentIframeProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n    videoMicrodata?: {\n        name?: string;\n        description?: string;\n        duration?: string;\n        uploadDate?: string;\n        contentUrl?: string;\n        thumbnailUrl?: string;\n    };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n    fullWidthMedia?: boolean;\n    className?: string;\n    mediaClassName?: string;\n}\n\nexport type Coordinate = number[];\n\nexport interface MapBaseProps {\n    zoom?: number;\n    className?: string;\n}\n\nexport interface GMapProps extends MapBaseProps {\n    address: string;\n}\n\nexport interface YMapProps extends MapBaseProps {\n    markers: YMapMarker[];\n    id: string;\n}\n\nexport interface YMapMarker {\n    address?: string;\n    coordinate?: Coordinate;\n    label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n    iconCaption?: string;\n    iconContent?: string;\n    iconColor?: string;\n    preset?: string;\n}\n\nexport type MapProps = GMapProps | YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n    id: string;\n    theme: 'dark' | 'light';\n}\n\nexport interface IframeProps {\n    src: string;\n    width?: number;\n    height?: number;\n    title?: string;\n    name?: string;\n}\n\nexport type DataLensProps = string | DataLensObjectProps;\n\nexport interface AuthorItem {\n    firstName: string;\n    secondName: string;\n    description?: string;\n    avatar?: ThemeSupporting<ImageProps> | JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps {\n    items: {\n        url: string;\n        text: React.ReactNode;\n    }[];\n    theme?: TextTheme;\n    analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps {\n    navTitle?: string;\n    anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n    text: string;\n    textSize?: TextSize;\n    url?: string;\n    urlTitle?: string;\n    custom?: string | React.ReactNode;\n    onClick?: () => void;\n}\n\nexport type MediaView = 'fit' | 'full';\n\n// card\nexport type MediaBorder = 'shadow' | 'line' | 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' | 'footer';\n\nexport interface CardBaseProps {\n    border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n    controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n    title: string;\n    detailedTitle?: string;\n    description: string;\n    label?: {\n        color: PriceLabelColor;\n        text?: string;\n        size?: TextSize;\n    };\n}\n\nexport interface PriceDetailsSettingsProps {\n    title: string;\n    description: string;\n}\n\nexport interface PriceDetailsListProps {\n    text: string;\n}\n\nexport interface PriceDetailsProps {\n    items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n    extends PriceDetailsProps,\n        PriceDescriptionProps,\n        AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n    title: string;\n    size?: TextSize;\n    titleColor?: PriceDescriptionColor;\n}\n\n/** @deprecated */\nexport interface PriceDetailedProps extends CardBaseProps {\n    items: PriceItemProps[];\n    description?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n        titleColor?: PriceDescriptionColor;\n    };\n    details?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n    };\n    priceType?: PriceDetailsType;\n    numberGroupItems?: 3 | 4 | 5;\n    isCombined?: boolean;\n    useMixedView?: boolean;\n    foldable?: PriceFoldableDetailsProps;\n    labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n    author: AuthorItem;\n    className?: string;\n    authorContainerClassName?: string;\n    type?: AuthorType;\n    theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n    title?: TitleItemProps | string;\n    subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n    id: number | string;\n    containerId?: string;\n    theme?: string;\n    className?: string;\n    headerHeight?: number;\n    customFormOrigin?: string;\n    customFormSection?: string;\n    params?: {[key: string]: string};\n\n    onSubmit?: () => void;\n    onLoad?: () => void;\n}\n\nexport interface WithBorder {\n    border?: MediaBorder;\n    /**\n     * @deprecated use custom class for media-component\n     */\n    disableShadow?: boolean;\n}\n"]}

package/build/cjs/navigation/components/NavigationPopup/NavigationPopup.css

@@ -13,6 +13,8 @@ unpredictable css rules order in build */
   border-radius: calc(var(--pc-border-radius) / 2);
   background: var(--g-color-base-float);
   box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-navigation-popup__list {
   margin: 0;

package/build/cjs/navigation/components/NavigationPopup/NavigationPopup.js

@@ -9,11 +9,19 @@ const models_1 = require("../../models.js");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/index.js"));
 const b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = { mainAxis: 0, crossAxis: 0 };
-const NavigationPopup = ({ anchorRef, items, onClose, open, }) => ((0, jsx_runtime_1.jsx)(uikit_1.Popup
-// Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-, { 
-    // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-    anchorRef: open ? anchorRef : undefined, open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET, children: (0, jsx_runtime_1.jsx)("ul", { className: b('list'), children: items.map((item) => ((0, jsx_runtime_1.jsx)(NavigationItem_1.default, { className: b('link'), data: item, menuLayout: models_1.NavigationLayout.Dropdown }, item.text))) }) }));
+const NavigationPopup = ({ anchorRef, items, onClose, open, }) => {
+    // Opening and closing is controlled by the associated button,
+    // but in order to give the popup control over closing as well (e.g. on click outside or escape key press)
+    // there needs to be an awkward looking handler like this.
+    const onOpenChange = (isOpen) => {
+        if (!isOpen) {
+            onClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { className: b(), 
+        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+        anchorElement: anchorRef.current, open: open, onOpenChange: onOpenChange, keepMounted: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET, children: (0, jsx_runtime_1.jsx)("ul", { className: b('list'), children: items.map((item) => ((0, jsx_runtime_1.jsx)(NavigationItem_1.default, { className: b('link'), data: item, menuLayout: models_1.NavigationLayout.Dropdown }, item.text))) }) }));
+};
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;
 //# sourceMappingURL=NavigationPopup.js.map

package/build/cjs/navigation/components/NavigationPopup/NavigationPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopup.js","sourceRoot":"../../../../../src","sources":["navigation/components/NavigationPopup/NavigationPopup.tsx"],"names":[],"mappings":";;;;;AAEA,6CAAwC;AAExC,mDAAqC;AACrC,4CAAoE;AACpE,wFAA+C;AAI/C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,kBAAkB,CAAC,CAAC;AACpC,MAAM,YAAY,GAA4C,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAC,CAAC;AAEnF,MAAM,eAAe,GAAmC,CAAC,EAC5D,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GACP,EAAE,EAAE,CAAC,CACF,uBAAC,aAAK;AACF,0HAA0H;;IAA1H,0HAA0H;IAC1H,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,OAAO,EACvB,WAAW,QACX,aAAa,QACb,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,cAAc,EACxB,MAAM,EAAE,YAAY,YAEpB,+BAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACnB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,uBAAC,wBAAc,IAEX,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,yBAAgB,CAAC,QAAQ,IAHhC,IAAI,CAAC,IAAI,CAIhB,CACL,CAAC,GACD,GACD,CACX,CAAC;AA7BW,QAAA,eAAe,mBA6B1B;AAEF,kBAAe,uBAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Popup} from '@gravity-ui/uikit';\n\nimport {block} from '../../../utils';\nimport {NavigationLayout, NavigationPopupProps} from '../../models';\nimport NavigationItem from '../NavigationItem';\n\nimport './NavigationPopup.scss';\n\nconst b = block('navigation-popup');\nconst OFFSET_RESET: {mainAxis?: number; crossAxis?: number} = {mainAxis: 0, crossAxis: 0};\n\nexport const NavigationPopup: React.FC<NavigationPopupProps> = ({\n    anchorRef,\n    items,\n    onClose,\n    open,\n}) => (\n    <Popup\n        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.\n        anchorRef={open ? anchorRef : undefined}\n        open={open}\n        onClose={onClose}\n        onOutsideClick={onClose}\n        keepMounted\n        disablePortal\n        strategy=\"fixed\"\n        placement=\"bottom-start\"\n        offset={OFFSET_RESET}\n    >\n        <ul className={b('list')}>\n            {items.map((item) => (\n                <NavigationItem\n                    key={item.text}\n                    className={b('link')}\n                    data={item}\n                    menuLayout={NavigationLayout.Dropdown}\n                />\n            ))}\n        </ul>\n    </Popup>\n);\n\nexport default NavigationPopup;\n"]}
+{"version":3,"file":"NavigationPopup.js","sourceRoot":"../../../../../src","sources":["navigation/components/NavigationPopup/NavigationPopup.tsx"],"names":[],"mappings":";;;;;AAEA,6CAAwC;AAExC,mDAAqC;AACrC,4CAAoE;AACpE,wFAA+C;AAI/C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,kBAAkB,CAAC,CAAC;AACpC,MAAM,YAAY,GAA4C,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAC,CAAC;AAEnF,MAAM,eAAe,GAAmC,CAAC,EAC5D,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GACP,EAAE,EAAE;IACD,8DAA8D;IAC9D,0GAA0G;IAC1G,0DAA0D;IAC1D,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE;QACrC,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;QACd,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,aAAK,IACF,SAAS,EAAE,CAAC,EAAE;QACd,0HAA0H;QAC1H,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,WAAW,QACX,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,cAAc,EACxB,MAAM,EAAE,YAAY,YAEpB,+BAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACnB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,uBAAC,wBAAc,IAEX,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,yBAAgB,CAAC,QAAQ,IAHhC,IAAI,CAAC,IAAI,CAIhB,CACL,CAAC,GACD,GACD,CACX,CAAC;AACN,CAAC,CAAC;AAvCW,QAAA,eAAe,mBAuC1B;AAEF,kBAAe,uBAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Popup} from '@gravity-ui/uikit';\n\nimport {block} from '../../../utils';\nimport {NavigationLayout, NavigationPopupProps} from '../../models';\nimport NavigationItem from '../NavigationItem';\n\nimport './NavigationPopup.scss';\n\nconst b = block('navigation-popup');\nconst OFFSET_RESET: {mainAxis?: number; crossAxis?: number} = {mainAxis: 0, crossAxis: 0};\n\nexport const NavigationPopup: React.FC<NavigationPopupProps> = ({\n    anchorRef,\n    items,\n    onClose,\n    open,\n}) => {\n    // Opening and closing is controlled by the associated button,\n    // but in order to give the popup control over closing as well (e.g. on click outside or escape key press)\n    // there needs to be an awkward looking handler like this.\n    const onOpenChange = (isOpen: boolean) => {\n        if (!isOpen) {\n            onClose();\n        }\n    };\n\n    return (\n        <Popup\n            className={b()}\n            // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.\n            anchorElement={anchorRef.current}\n            open={open}\n            onOpenChange={onOpenChange}\n            keepMounted\n            strategy=\"fixed\"\n            placement=\"bottom-start\"\n            offset={OFFSET_RESET}\n        >\n            <ul className={b('list')}>\n                {items.map((item) => (\n                    <NavigationItem\n                        key={item.text}\n                        className={b('link')}\n                        data={item}\n                        menuLayout={NavigationLayout.Dropdown}\n                    />\n                ))}\n            </ul>\n        </Popup>\n    );\n};\n\nexport default NavigationPopup;\n"]}

package/build/esm/blocks/Tabs/TabContent/TabContent.css

@@ -0,0 +1,77 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-tab-content__col_centered {
+  margin: 0 auto;
+}
+.pc-tab-content__image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
+}
+.pc-tab-content__image_border_shadow, .pc-tab-content__media_border_shadow {
+  box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+}
+.pc-tab-content__image_border_line, .pc-tab-content__media_border_line {
+  border-radius: var(--pc-border-radius);
+  border: 1px solid var(--g-color-line-generic);
+}
+.pc-tab-content__image_border_none, .pc-tab-content__media_border_none {
+  border-radius: var(--pc-border-radius);
+}
+.pc-tab-content__caption {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  margin: 12px 0 0;
+}
+.pc-tab-content__caption.pc-tab-content__caption .yfm,
+.pc-tab-content__caption.pc-tab-content__caption .yfm > * {
+  color: var(--g-color-text-secondary);
+}
+.pc-tab-content__caption.pc-tab-content__caption .yfm a {
+  color: var(--g-color-text-secondary);
+  text-decoration: underline;
+}
+.pc-tab-content__caption.pc-tab-content__caption .yfm a:hover {
+  color: var(--g-color-text-primary);
+}
+
+.pc-tab-content__row_hidden {
+  display: none;
+}
+.pc-tab-content__row_reverse {
+  flex-direction: row-reverse;
+}
+@media (max-width: 769px) {
+  .pc-tab-content__row_reverse {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 769px) {
+  .pc-tab-content.pc-AnimateBlock .pc-tab-content__media, .pc-AnimateBlock .pc-tab-content .pc-tab-content__media {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-tab-content.pc-AnimateBlock.animate .pc-tab-content__media, .pc-AnimateBlock .pc-tab-content.animate .pc-tab-content__media {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+@media (min-width: 769px) {
+  .pc-tab-content.pc-AnimateBlock .pc-tab-content__image, .pc-AnimateBlock .pc-tab-content .pc-tab-content__image {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-tab-content.pc-AnimateBlock.animate .pc-tab-content__image, .pc-AnimateBlock .pc-tab-content.animate .pc-tab-content__image {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}

package/build/esm/blocks/Tabs/TabContent/TabContent.d.ts

@@ -0,0 +1,13 @@
+import { ContentSize, TabsBlockItem } from "../../../models/index.js";
+import './TabContent.css';
+export interface TabContentProps {
+    tabData: TabsBlockItem;
+    isActive: boolean;
+    isReverse: boolean;
+    contentSize: ContentSize;
+    centered?: boolean;
+    play: boolean;
+    getTabElementId?: (tabId: string) => string;
+    getTabContentElementId?: (tabId: string) => string;
+}
+export declare const TabContent: ({ tabData, isActive, isReverse, contentSize, centered, play, getTabElementId, getTabContentElementId, }: TabContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/build/esm/blocks/Tabs/TabContent/TabContent.js

@@ -0,0 +1,66 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ProjectSettingsContext } from "../../../context/projectSettingsContext/index.js";
+import { block, getThemedValue } from "../../../utils/index.js";
+import { useTheme } from "../../../context/theme/index.js";
+import { getHeight } from "../../../components/VideoBlock/VideoBlock.js";
+import { getMediaImage } from "../../../components/Media/Image/utils.js";
+import TabsTextContent from "../TabsTextContent/TabsTextContent.js";
+import { Col, GridColumnOrderClasses, Row } from "../../../grid/index.js";
+import Media from "../../../components/Media/Media.js";
+import { mergeVideoMicrodata } from "../../../utils/microdata.js";
+import { FullscreenImage, YFMWrapper } from "../../../components/index.js";
+import { useUniqId } from '@gravity-ui/uikit';
+import './TabContent.css';
+const b = block('tab-content');
+export const TabContent = ({ tabData, isActive, isReverse, contentSize, centered, play, getTabElementId, getTabContentElementId, }) => {
+    const { tabName } = tabData;
+    const mediaContainerRef = React.useRef(null);
+    const theme = useTheme();
+    const { renderInvisibleBlocks } = React.useContext(ProjectSettingsContext);
+    const captionId = useUniqId();
+    const mediaWidth = mediaContainerRef?.current?.offsetWidth;
+    const [minImageHeight, setMinImageHeight] = React.useState(mediaContainerRef?.current?.offsetHeight);
+    const shouldRender = renderInvisibleBlocks || isActive;
+    const themedImage = getThemedValue(tabData.image, theme);
+    const themedMedia = getThemedValue(tabData.media, theme);
+    const hasNoImage = !themedMedia?.image && !tabData.image;
+    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);
+    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
+    const imageProps = React.useMemo(() => {
+        const imagePropsResult = themedImage && getMediaImage(themedImage);
+        if (tabData.caption && imagePropsResult) {
+            Object.assign(imagePropsResult, {
+                'aria-describedby': captionId,
+            });
+        }
+        return imagePropsResult;
+    }, [captionId, tabData.caption, themedImage]);
+    const handleImageHeight = React.useCallback(() => {
+        if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {
+            setMinImageHeight(mediaContainerRef?.current?.offsetHeight);
+        }
+    }, [minImageHeight]);
+    React.useEffect(() => {
+        handleImageHeight();
+    }, [isActive, handleImageHeight]);
+    if (!shouldRender) {
+        return null;
+    }
+    const showMedia = isActive && Boolean(tabData.media || imageProps);
+    const showText = Boolean(tabData.text);
+    const border = tabData.border || 'shadow';
+    const textContent = showText && (_jsx(TabsTextContent, { showMedia: showMedia, data: tabData, imageProps: imageProps || undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const mediaContent = showMedia && (_jsxs(Col, { sizes: { all: 12, md: 8 }, orders: {
+            all: GridColumnOrderClasses.Last,
+            md: GridColumnOrderClasses.First,
+        }, className: b('col', { centered: centered }), children: [tabData.media && (_jsx("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: _jsx("div", { ref: mediaContainerRef, children: _createElement(Media, { ...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {
+                            name: tabData.tabName,
+                            description: tabData.caption ? tabData.caption : undefined,
+                        }), key: tabName, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }) }) })), imageProps && (_jsx(React.Fragment, { children: _jsx(FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && (_jsx("p", { className: b('caption'), id: captionId, children: _jsx(YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
+    return (_jsxs(Row, { className: b('row', { reverse: isReverse, hidden: !isActive }), id: getTabContentElementId?.(tabName), role: "tabpanel", ariaProps: {
+            'aria-labelledby': getTabElementId?.(tabName),
+        }, children: [mediaContent, textContent] }, tabName));
+};
+//# sourceMappingURL=TabContent.js.map

package/build/esm/blocks/Tabs/TabContent/TabContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContent.js","sourceRoot":"../../../../../src","sources":["blocks/Tabs/TabContent/TabContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {ContentSize, TabsBlockItem} from '../../../models';\nimport {ProjectSettingsContext} from '../../../context/projectSettingsContext';\nimport {block, getThemedValue} from '../../../utils';\nimport {useTheme} from '../../../context/theme';\nimport {getHeight} from '../../../components/VideoBlock/VideoBlock';\nimport {getMediaImage} from '../../../components/Media/Image/utils';\nimport TabsTextContent from '../TabsTextContent/TabsTextContent';\nimport {Col, GridColumnOrderClasses, Row} from '../../../grid';\nimport Media from '../../../components/Media/Media';\nimport {mergeVideoMicrodata} from '../../../utils/microdata';\nimport {FullscreenImage, YFMWrapper} from '../../../components';\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport './TabContent.scss';\n\nconst b = block('tab-content');\n\nexport interface TabContentProps {\n    tabData: TabsBlockItem;\n    isActive: boolean;\n    isReverse: boolean;\n    contentSize: ContentSize;\n    centered?: boolean;\n    play: boolean;\n    getTabElementId?: (tabId: string) => string;\n    getTabContentElementId?: (tabId: string) => string;\n}\n\nexport const TabContent = ({\n    tabData,\n    isActive,\n    isReverse,\n    contentSize,\n    centered,\n    play,\n    getTabElementId,\n    getTabContentElementId,\n}: TabContentProps) => {\n    const {tabName} = tabData;\n\n    const mediaContainerRef = React.useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    const {renderInvisibleBlocks} = React.useContext(ProjectSettingsContext);\n\n    const captionId = useUniqId();\n\n    const mediaWidth = mediaContainerRef?.current?.offsetWidth;\n    const [minImageHeight, setMinImageHeight] = React.useState(\n        mediaContainerRef?.current?.offsetHeight,\n    );\n\n    const shouldRender = renderInvisibleBlocks || isActive;\n\n    const themedImage = getThemedValue(tabData.image, theme);\n    const themedMedia = getThemedValue(tabData.media, theme);\n\n    const hasNoImage = !themedMedia?.image && !tabData.image;\n    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);\n\n    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image\n    const imageProps = React.useMemo(() => {\n        const imagePropsResult = themedImage && getMediaImage(themedImage);\n\n        if (tabData.caption && imagePropsResult) {\n            Object.assign(imagePropsResult, {\n                'aria-describedby': captionId,\n            });\n        }\n\n        return imagePropsResult;\n    }, [captionId, tabData.caption, themedImage]);\n\n    const handleImageHeight = React.useCallback(() => {\n        if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {\n            setMinImageHeight(mediaContainerRef?.current?.offsetHeight);\n        }\n    }, [minImageHeight]);\n\n    React.useEffect(() => {\n        handleImageHeight();\n    }, [isActive, handleImageHeight]);\n\n    if (!shouldRender) {\n        return null;\n    }\n\n    const showMedia = isActive && Boolean(tabData.media || imageProps);\n    const showText = Boolean(tabData.text);\n    const border = tabData.border || 'shadow';\n\n    const textContent = showText && (\n        <TabsTextContent\n            showMedia={showMedia}\n            data={tabData}\n            imageProps={imageProps || undefined}\n            isReverse={isReverse}\n            contentSize={contentSize}\n            centered={centered}\n        />\n    );\n\n    const mediaContent = showMedia && (\n        <Col\n            sizes={{all: 12, md: 8}}\n            orders={{\n                all: GridColumnOrderClasses.Last,\n                md: GridColumnOrderClasses.First,\n            }}\n            className={b('col', {centered: centered})}\n        >\n            {tabData.media && (\n                <div style={{minHeight: mediaVideoHeight || minImageHeight}}>\n                    <div ref={mediaContainerRef}>\n                        <Media\n                            {...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {\n                                name: tabData.tabName,\n                                description: tabData.caption ? tabData.caption : undefined,\n                            })}\n                            key={tabName}\n                            className={b('media', {border})}\n                            playVideo={play}\n                            height={mediaVideoHeight || undefined}\n                            onImageLoad={handleImageHeight}\n                        />\n                    </div>\n                </div>\n            )}\n            {imageProps && (\n                <React.Fragment>\n                    <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />\n                </React.Fragment>\n            )}\n            {tabData.caption && (\n                <p className={b('caption')} id={captionId}>\n                    <YFMWrapper\n                        content={tabData.caption}\n                        modifiers={{constructor: true}}\n                        id={captionId}\n                    />\n                </p>\n            )}\n        </Col>\n    );\n\n    return (\n        <Row\n            key={tabName}\n            className={b('row', {reverse: isReverse, hidden: !isActive})}\n            id={getTabContentElementId?.(tabName)}\n            role=\"tabpanel\"\n            ariaProps={{\n                'aria-labelledby': getTabElementId?.(tabName),\n            }}\n        >\n            {mediaContent}\n            {textContent}\n        </Row>\n    );\n};\n"]}

package/build/esm/blocks/Tabs/Tabs.css

@@ -36,76 +36,4 @@ unpredictable css rules order in build */
     padding-left: 24px;
     padding-right: 16px;
   }
-}
-.pc-tabs-block__row_reverse {
-  flex-direction: row-reverse;
-}
-.pc-tabs-block__image {
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-  display: block;
-}
-.pc-tabs-block__image_border_shadow, .pc-tabs-block__media_border_shadow {
-  box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
-  overflow-x: hidden;
-  border-radius: var(--pc-border-radius);
-}
-.pc-tabs-block__image_border_line, .pc-tabs-block__media_border_line {
-  border-radius: var(--pc-border-radius);
-  border: 1px solid var(--g-color-line-generic);
-}
-.pc-tabs-block__image_border_none, .pc-tabs-block__media_border_none {
-  border-radius: var(--pc-border-radius);
-}
-.pc-tabs-block__caption {
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-  margin: 12px 0 0;
-}
-.pc-tabs-block__caption.pc-tabs-block__caption .yfm,
-.pc-tabs-block__caption.pc-tabs-block__caption .yfm > * {
-  color: var(--g-color-text-secondary);
-}
-.pc-tabs-block__caption.pc-tabs-block__caption .yfm a {
-  color: var(--g-color-text-secondary);
-  text-decoration: underline;
-}
-.pc-tabs-block__caption.pc-tabs-block__caption .yfm a:hover {
-  color: var(--g-color-text-primary);
-}
-
-.pc-tabs-block__col_centered {
-  margin: 0 auto;
-}
-@media (max-width: 769px) {
-  .pc-tabs-block__row_reverse {
-    flex-direction: column-reverse;
-  }
-}
-@media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
-    position: relative;
-    top: 100px;
-    opacity: 0;
-  }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
-    top: 0;
-    opacity: 1;
-    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
-    position: relative;
-    top: 100px;
-    opacity: 0;
-  }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
-    top: 0;
-    opacity: 1;
-    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    transition-delay: 0s;
-  }
 }

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,78 +1,34 @@
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUniqId } from '@gravity-ui/uikit';
 import * as React from 'react';
 import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
 import ButtonTabs from "../../components/ButtonTabs/ButtonTabs.js";
-import FullscreenImage from "../../components/FullscreenImage/FullscreenImage.js";
-import { getMediaImage } from "../../components/Media/Image/utils.js";
-import Media from "../../components/Media/Media.js";
 import Title from "../../components/Title/Title.js";
-import { getHeight } from "../../components/VideoBlock/VideoBlock.js";
-import YFMWrapper from "../../components/YFMWrapper/YFMWrapper.js";
-import { useTheme } from "../../context/theme/index.js";
-import { Col, GridColumnOrderClasses, GridJustifyContent, Row } from "../../grid/index.js";
-import { block, getThemedValue } from "../../utils/index.js";
-import { mergeVideoMicrodata } from "../../utils/microdata.js";
-import TabsTextContent from "./TabsTextContent/TabsTextContent.js";
+import { Col, GridJustifyContent, Row } from "../../grid/index.js";
+import { block } from "../../utils/index.js";
 import './Tabs.css';
+import { TabContent } from "./TabContent/TabContent.js";
+import { getUniqId } from '@gravity-ui/uikit';
 const b = block('tabs-block');
-// eslint-disable-next-line complexity
 export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
     const [activeTab, setActiveTab] = React.useState(items[0].tabName);
     const [play, setPlay] = React.useState(false);
-    const theme = useTheme();
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
-    const activeTabData = items.find(({ tabName }) => tabName === activeTab);
     const isReverse = direction === 'content-media';
-    const ref = React.useRef(null);
-    const mediaWidth = ref?.current?.offsetWidth;
-    const captionId = useUniqId();
-    const themedMedia = getThemedValue(activeTabData?.media, theme);
-    const hasNoImage = !themedMedia?.image && !activeTabData?.image;
-    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);
-    const [minImageHeight, setMinImageHeight] = React.useState(ref?.current?.offsetHeight);
-    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
-    let imageProps;
-    const handleImageHeight = React.useCallback(() => {
-        if (minImageHeight !== ref?.current?.offsetHeight) {
-            setMinImageHeight(ref?.current?.offsetHeight);
-        }
-    }, [minImageHeight]);
-    const onSelectTab = React.useCallback((id, e) => {
-        setActiveTab(id);
+    const tabIds = React.useMemo(() => items.reduce((acc, { tabName }) => Object.assign(acc, { [tabName]: getUniqId() }), {}), [items]);
+    const getTabElementId = (tabId) => `${tabIds[tabId]}`;
+    const getTabContentElementId = (tabId) => `${tabIds[tabId]}-content`;
+    const onSelectTab = React.useCallback((tabId, e) => {
+        setActiveTab(tabId);
         e.currentTarget.scrollIntoView({
             inline: 'center',
             behavior: 'smooth',
             block: 'nearest',
         });
     }, []);
-    React.useEffect(() => {
-        handleImageHeight();
-    }, [activeTab, handleImageHeight]);
-    if (activeTabData) {
-        const themedImage = getThemedValue(activeTabData?.image, theme);
-        imageProps = themedImage && getMediaImage(themedImage);
-        if (activeTabData.caption && imageProps) {
-            Object.assign(imageProps, {
-                'aria-describedby': captionId,
-            });
-        }
-    }
-    const showMedia = Boolean(activeTabData?.media || imageProps);
-    const showText = Boolean(activeTabData?.text);
-    const border = activeTabData?.border || 'shadow';
-    const textContent = showText && (_jsx(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
-    const mediaContent = showMedia && (_jsxs(Col, { sizes: { all: 12, md: 8 }, orders: {
-            all: GridColumnOrderClasses.Last,
-            md: GridColumnOrderClasses.First,
-        }, className: b('col', { centered: centered }), children: [activeTabData?.media && (_jsx("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: _jsx("div", { ref: ref, children: _createElement(Media, { ...mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {
-                            name: activeTabData.tabName,
-                            description: activeTabData.caption
-                                ? activeTabData.caption
-                                : undefined,
-                        }), key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }) }) })), imageProps && (_jsx(React.Fragment, { children: _jsx(FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), activeTabData?.caption && (_jsx("p", { className: b('caption'), id: captionId, children: _jsx(YFMWrapper, { content: activeTabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
-    return (_jsxs(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated, children: [_jsx(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }), _jsx(Row, { justifyContent: centered ? GridJustifyContent.Center : undefined, children: _jsx(Col, { sizes: tabsColSizes, children: _jsx(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }) }) }), activeTabData && (_jsxs(Row, { className: b('row', { reverse: isReverse }), children: [mediaContent, textContent] }))] }));
+    return (_jsxs(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated, children: [_jsx(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }), _jsx(Row, { justifyContent: centered ? GridJustifyContent.Center : undefined, children: _jsx(Col, { sizes: tabsColSizes, children: _jsx(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }), getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }) }) }), items.map((tabData) => {
+                const { tabName } = tabData;
+                return (_jsx(TabContent, { tabData: tabData, isActive: tabName === activeTab, isReverse: isReverse, contentSize: contentSize, centered: centered, play: play, getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }, tabName));
+            })] }));
 };
 export default TabsBlock;
 //# sourceMappingURL=Tabs.js.map

package/build/esm/blocks/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"../../../../src","sources":["blocks/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport FullscreenImage from '../../components/FullscreenImage/FullscreenImage';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport Media from '../../components/Media/Media';\nimport Title from '../../components/Title/Title';\nimport {getHeight} from '../../components/VideoBlock/VideoBlock';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnOrderClasses, GridJustifyContent, Row} from '../../grid';\nimport {TabsBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport TabsTextContent from './TabsTextContent/TabsTextContent';\nimport './Tabs.scss';\n\nconst b = block('tabs-block');\n\n// eslint-disable-next-line complexity\nexport const TabsBlock = ({\n    items,\n    title,\n    description,\n    animated,\n    tabsColSizes,\n    centered,\n    direction = 'media-content',\n    contentSize = 's',\n}: TabsBlockProps) => {\n    const [activeTab, setActiveTab] = React.useState<string | null>(items[0].tabName);\n    const [play, setPlay] = React.useState<boolean>(false);\n    const theme = useTheme();\n    const tabs: ButtonTabsItemProps[] = items.map(({tabName}) => ({title: tabName, id: tabName}));\n    const activeTabData = items.find(({tabName}) => tabName === activeTab);\n    const isReverse = direction === 'content-media';\n    const ref = React.useRef<HTMLDivElement>(null);\n    const mediaWidth = ref?.current?.offsetWidth;\n    const captionId = useUniqId();\n    const themedMedia = getThemedValue(activeTabData?.media, theme);\n    const hasNoImage = !themedMedia?.image && !activeTabData?.image;\n    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);\n    const [minImageHeight, setMinImageHeight] = React.useState(ref?.current?.offsetHeight);\n    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image\n    let imageProps;\n\n    const handleImageHeight = React.useCallback(() => {\n        if (minImageHeight !== ref?.current?.offsetHeight) {\n            setMinImageHeight(ref?.current?.offsetHeight);\n        }\n    }, [minImageHeight]);\n\n    const onSelectTab = React.useCallback(\n        (id: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            setActiveTab(id);\n            e.currentTarget.scrollIntoView({\n                inline: 'center',\n                behavior: 'smooth',\n                block: 'nearest',\n            });\n        },\n        [],\n    );\n\n    React.useEffect(() => {\n        handleImageHeight();\n    }, [activeTab, handleImageHeight]);\n\n    if (activeTabData) {\n        const themedImage = getThemedValue(activeTabData?.image, theme);\n\n        imageProps = themedImage && getMediaImage(themedImage);\n\n        if (activeTabData.caption && imageProps) {\n            Object.assign(imageProps, {\n                'aria-describedby': captionId,\n            });\n        }\n    }\n\n    const showMedia = Boolean(activeTabData?.media || imageProps);\n    const showText = Boolean(activeTabData?.text);\n    const border = activeTabData?.border || 'shadow';\n\n    const textContent = showText && (\n        <TabsTextContent\n            showMedia={showMedia}\n            data={activeTabData}\n            imageProps={imageProps ? imageProps : undefined}\n            isReverse={isReverse}\n            contentSize={contentSize}\n            centered={centered}\n        />\n    );\n\n    const mediaContent = showMedia && (\n        <Col\n            sizes={{all: 12, md: 8}}\n            orders={{\n                all: GridColumnOrderClasses.Last,\n                md: GridColumnOrderClasses.First,\n            }}\n            className={b('col', {centered: centered})}\n        >\n            {activeTabData?.media && (\n                <div style={{minHeight: mediaVideoHeight || minImageHeight}}>\n                    <div ref={ref}>\n                        <Media\n                            {...mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {\n                                name: activeTabData.tabName,\n                                description: activeTabData.caption\n                                    ? activeTabData.caption\n                                    : undefined,\n                            })}\n                            key={activeTab}\n                            className={b('media', {border})}\n                            playVideo={play}\n                            height={mediaVideoHeight || undefined}\n                            onImageLoad={handleImageHeight}\n                        />\n                    </div>\n                </div>\n            )}\n            {imageProps && (\n                <React.Fragment>\n                    <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />\n                </React.Fragment>\n            )}\n            {activeTabData?.caption && (\n                <p className={b('caption')} id={captionId}>\n                    <YFMWrapper\n                        content={activeTabData.caption}\n                        modifiers={{constructor: true}}\n                        id={captionId}\n                    />\n                </p>\n            )}\n        </Col>\n    );\n\n    return (\n        <AnimateBlock className={b()} onScroll={() => setPlay(true)} animate={animated}>\n            <Title\n                title={title}\n                subtitle={description}\n                className={b('title', {centered: centered})}\n            />\n            <Row justifyContent={centered ? GridJustifyContent.Center : undefined}>\n                <Col sizes={tabsColSizes}>\n                    <ButtonTabs\n                        items={tabs}\n                        onSelectTab={onSelectTab}\n                        activeTab={activeTab}\n                        className={b('tabs', {centered: centered})}\n                    />\n                </Col>\n            </Row>\n            {activeTabData && (\n                <Row className={b('row', {reverse: isReverse})}>\n                    {mediaContent}\n                    {textContent}\n                </Row>\n            )}\n        </AnimateBlock>\n    );\n};\n\nexport default TabsBlock;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"../../../../src","sources":["blocks/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,sDAAmD;AACtE,OAAO,UAAiC,kDAA+C;AACvF,OAAO,KAAK,wCAAqC;AACjD,OAAO,EAAC,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,4BAAmB;AAExD,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,YAAY,CAAC;AACpB,OAAO,EAAC,UAAU,EAAC,mCAAgC;AACnD,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5C,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,eAAe,EAC3B,WAAW,GAAG,GAAG,GACJ,EAAE,EAAE;IACjB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,IAAI,GAA0B,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,SAAS,GAAG,SAAS,KAAK,eAAe,CAAC;IAEhD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CACxB,GAAG,EAAE,CACD,KAAK,CAAC,MAAM,CACR,CAAC,GAAG,EAAE,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,EAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,EAAC,CAAC,EAChE,EAA4B,CAC/B,EACL,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9D,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC;IAE7E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAoB,EAAE,CAA0D,EAAE,EAAE;QACjF,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC;YAC3B,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;SACnB,CAAC,CAAC;IACP,CAAC,EACD,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,aAC1E,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,GAC7C,EACF,KAAC,GAAG,IAAC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACjE,KAAC,GAAG,IAAC,KAAK,EAAE,YAAY,YACpB,KAAC,UAAU,IACP,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,EAC1C,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,GAChD,GACA,GACJ,EACL,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;gBACnB,MAAM,EAAC,OAAO,EAAC,GAAG,OAAO,CAAC;gBAE1B,OAAO,CACH,KAAC,UAAU,IAEP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,KAAK,SAAS,EAC/B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,IARzC,OAAO,CASd,CACL,CAAC;YACN,CAAC,CAAC,IACS,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport Title from '../../components/Title/Title';\nimport {Col, GridJustifyContent, Row} from '../../grid';\nimport {TabsBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport './Tabs.scss';\nimport {TabContent} from './TabContent/TabContent';\nimport {getUniqId} from '@gravity-ui/uikit';\n\nconst b = block('tabs-block');\n\nexport const TabsBlock = ({\n    items,\n    title,\n    description,\n    animated,\n    tabsColSizes,\n    centered,\n    direction = 'media-content',\n    contentSize = 's',\n}: TabsBlockProps) => {\n    const [activeTab, setActiveTab] = React.useState<string | null>(items[0].tabName);\n    const [play, setPlay] = React.useState<boolean>(false);\n\n    const tabs: ButtonTabsItemProps[] = items.map(({tabName}) => ({title: tabName, id: tabName}));\n    const isReverse = direction === 'content-media';\n\n    const tabIds = React.useMemo(\n        () =>\n            items.reduce(\n                (acc, {tabName}) => Object.assign(acc, {[tabName]: getUniqId()}),\n                {} as Record<string, string>,\n            ),\n        [items],\n    );\n\n    const getTabElementId = (tabId: string) => `${tabIds[tabId]}`;\n    const getTabContentElementId = (tabId: string) => `${tabIds[tabId]}-content`;\n\n    const onSelectTab = React.useCallback(\n        (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            setActiveTab(tabId);\n            e.currentTarget.scrollIntoView({\n                inline: 'center',\n                behavior: 'smooth',\n                block: 'nearest',\n            });\n        },\n        [],\n    );\n\n    return (\n        <AnimateBlock className={b()} onScroll={() => setPlay(true)} animate={animated}>\n            <Title\n                title={title}\n                subtitle={description}\n                className={b('title', {centered: centered})}\n            />\n            <Row justifyContent={centered ? GridJustifyContent.Center : undefined}>\n                <Col sizes={tabsColSizes}>\n                    <ButtonTabs\n                        items={tabs}\n                        onSelectTab={onSelectTab}\n                        activeTab={activeTab}\n                        className={b('tabs', {centered: centered})}\n                        getTabElementId={getTabElementId}\n                        getTabContentElementId={getTabContentElementId}\n                    />\n                </Col>\n            </Row>\n            {items.map((tabData) => {\n                const {tabName} = tabData;\n\n                return (\n                    <TabContent\n                        key={tabName}\n                        tabData={tabData}\n                        isActive={tabName === activeTab}\n                        isReverse={isReverse}\n                        contentSize={contentSize}\n                        centered={centered}\n                        play={play}\n                        getTabElementId={getTabElementId}\n                        getTabContentElementId={getTabContentElementId}\n                    />\n                );\n            })}\n        </AnimateBlock>\n    );\n};\n\nexport default TabsBlock;\n"]}

package/build/esm/components/Button/Button.d.ts

@@ -3,6 +3,7 @@ import { ButtonProps as ButtonParams, QAProps } from "../../models/index.js";
 import './Button.css';
 export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
+    id?: string;
     url?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }

package/build/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {StoreBadge} from '@gravity-ui/components';\nimport {\n    Button as CommonButton,\n    Icon,\n    Platform,\n    ButtonProps as UIKitButtonProps,\n} from '@gravity-ui/uikit';\n\nimport {LocaleContext} from '../../context/localeContext/localeContext';\nimport {useAnalytics} from '../../hooks';\nimport {Github} from '../../icons';\nimport {ButtonProps as ButtonParams, DefaultEventNames, QAProps} from '../../models';\nimport {block, setUrlTld} from '../../utils';\n\nimport {i18n} from './i18n';\nimport {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';\n\nimport './Button.scss';\n\nexport interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {\n    className?: string;\n    url?: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nconst b = block('button-block');\n\n// eslint-disable-next-line complexity\nconst Button = (props: ButtonProps) => {\n    const {tld} = React.useContext(LocaleContext);\n    const {\n        className,\n        analyticsEvents,\n        size = 'l',\n        theme = 'normal',\n        url,\n        urlTitle,\n        img,\n        onClick: onClickOrigin,\n        text,\n        width,\n        ...rest\n    } = props;\n    const defaultImgPosition = 'left';\n    const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);\n    const onClick = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            handleAnalytics(analyticsEvents);\n\n            if (onClickOrigin) {\n                onClickOrigin(e);\n            }\n        },\n        [handleAnalytics, analyticsEvents, onClickOrigin],\n    );\n\n    const buttonModifiers = {size, theme, width};\n\n    const buttonImg =\n        img instanceof Object\n            ? {url: img.url, position: img.position || defaultImgPosition, alt: img.alt}\n            : {url: img, position: defaultImgPosition};\n\n    const buttonClass = img\n        ? b({position: buttonImg.position, ...buttonModifiers}, className)\n        : b({...buttonModifiers}, className);\n\n    const buttonProps = {\n        ...rest,\n        href: url ? setUrlTld(url, tld) : undefined,\n        onClick,\n    };\n\n    if (theme === 'app-store' || theme === 'google-play') {\n        const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;\n\n        return <StoreBadge className={buttonClass} platform={platform} href={url as string} />;\n    }\n\n    let icon;\n    let image = img && (\n        <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt || i18n('image-alt')} />\n    );\n\n    if (theme === 'github') {\n        icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;\n        image = undefined;\n    }\n\n    const buttonTheme = theme === 'scale' ? 'accent' : theme;\n\n    return (\n        <CommonButton\n            className={buttonClass}\n            view={toCommonView(buttonTheme as OldButtonTheme)}\n            size={toCommonSize(size as OldButtonSize)}\n            title={urlTitle}\n            width={width}\n            {...(buttonProps as UIKitButtonProps)}\n        >\n            {icon && buttonImg.position === 'left' ? icon : null}\n            <span className={b('content')}>\n                {image && buttonImg.position === 'left' ? image : null}\n                <span className={b('text')}>{text}</span>\n                {image && buttonImg.position === 'right' ? image : null}\n            </span>\n            {icon && buttonImg.position === 'right' ? icon : null}\n        </CommonButton>\n    );\n};\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {StoreBadge} from '@gravity-ui/components';\nimport {\n    Button as CommonButton,\n    Icon,\n    Platform,\n    ButtonProps as UIKitButtonProps,\n} from '@gravity-ui/uikit';\n\nimport {LocaleContext} from '../../context/localeContext/localeContext';\nimport {useAnalytics} from '../../hooks';\nimport {Github} from '../../icons';\nimport {ButtonProps as ButtonParams, DefaultEventNames, QAProps} from '../../models';\nimport {block, setUrlTld} from '../../utils';\n\nimport {i18n} from './i18n';\nimport {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';\n\nimport './Button.scss';\n\nexport interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {\n    className?: string;\n    id?: string;\n    url?: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nconst b = block('button-block');\n\n// eslint-disable-next-line complexity\nconst Button = (props: ButtonProps) => {\n    const {tld} = React.useContext(LocaleContext);\n    const {\n        className,\n        analyticsEvents,\n        size = 'l',\n        theme = 'normal',\n        url,\n        urlTitle,\n        img,\n        onClick: onClickOrigin,\n        text,\n        width,\n        ...rest\n    } = props;\n    const defaultImgPosition = 'left';\n    const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);\n    const onClick = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            handleAnalytics(analyticsEvents);\n\n            if (onClickOrigin) {\n                onClickOrigin(e);\n            }\n        },\n        [handleAnalytics, analyticsEvents, onClickOrigin],\n    );\n\n    const buttonModifiers = {size, theme, width};\n\n    const buttonImg =\n        img instanceof Object\n            ? {url: img.url, position: img.position || defaultImgPosition, alt: img.alt}\n            : {url: img, position: defaultImgPosition};\n\n    const buttonClass = img\n        ? b({position: buttonImg.position, ...buttonModifiers}, className)\n        : b({...buttonModifiers}, className);\n\n    const buttonProps = {\n        ...rest,\n        href: url ? setUrlTld(url, tld) : undefined,\n        onClick,\n    };\n\n    if (theme === 'app-store' || theme === 'google-play') {\n        const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;\n\n        return <StoreBadge className={buttonClass} platform={platform} href={url as string} />;\n    }\n\n    let icon;\n    let image = img && (\n        <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt || i18n('image-alt')} />\n    );\n\n    if (theme === 'github') {\n        icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;\n        image = undefined;\n    }\n\n    const buttonTheme = theme === 'scale' ? 'accent' : theme;\n\n    return (\n        <CommonButton\n            className={buttonClass}\n            view={toCommonView(buttonTheme as OldButtonTheme)}\n            size={toCommonSize(size as OldButtonSize)}\n            title={urlTitle}\n            width={width}\n            {...(buttonProps as UIKitButtonProps)}\n        >\n            {icon && buttonImg.position === 'left' ? icon : null}\n            <span className={b('content')}>\n                {image && buttonImg.position === 'left' ? image : null}\n                <span className={b('text')}>{text}</span>\n                {image && buttonImg.position === 'right' ? image : null}\n            </span>\n            {icon && buttonImg.position === 'right' ? icon : null}\n        </CommonButton>\n    );\n};\n\nexport default Button;\n"]}

package/build/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -12,6 +12,8 @@ export interface ButtonTabsProps extends QAProps {
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     tabSize?: ButtonSize;
+    getTabElementId?: (tabId: string) => string;
+    getTabContentElementId?: (tabId: string) => string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -4,7 +4,7 @@ import { block } from "../../utils/index.js";
 import { Button } from "../index.js";
 import './ButtonTabs.css';
 const b = block('button-tabs');
-const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', qa, }) => {
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', qa, getTabElementId, getTabContentElementId, }) => {
     const activeTabId = React.useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -18,9 +18,10 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
     }, [onSelectTab]);
     return (_jsx("div", { className: b(null, className), role: "tablist", "data-qa": qa, children: items.map(({ id, title }) => {
             const isActive = id === activeTabId;
-            return (_jsx(Button, { text: title, className: b('item', { active: isActive }), size: tabSize, onClick: handleClick(id), extraProps: {
+            return (_jsx(Button, { text: title, className: b('item', { active: isActive }), size: tabSize, onClick: handleClick(id), id: getTabElementId?.(id ?? ''), extraProps: {
                     role: 'tab',
                     'aria-selected': isActive,
+                    'aria-controls': getTabContentElementId?.(id ?? ''),
                 } }, title));
         }) }));
 };