@gravity-ui/page-constructor 8.3.0 → 8.4.1

package/build/cjs/blocks/Header/Header.css

@@ -67,6 +67,12 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-accent-font-weight);
   position: relative;
 }
+@media (max-width: 769px) {
+  .pc-header-block__title.pc-header-block__title {
+    font-size: var(--g-text-display-3-font-size);
+    line-height: var(--g-text-display-3-line-height);
+  }
+}
 @media (max-width: 577px) {
   .pc-header-block__title.pc-header-block__title {
     font-size: var(--g-text-display-2-font-size);

package/build/cjs/blocks/Header/schema.js

@@ -86,31 +86,7 @@ exports.HeaderProperties = {
         type: 'string',
         enum: ['default', 'dark'],
     },
-    breadcrumbs: {
-        type: 'object',
-        additionalProperties: false,
-        required: ['items'],
-        properties: {
-            items: {
-                type: 'array',
-                items: {
-                    type: 'object',
-                    additionalProperties: false,
-                    required: ['url', 'text'],
-                    properties: {
-                        url: {
-                            type: 'string',
-                        },
-                        text: {
-                            type: 'string',
-                            contentType: 'text',
-                        },
-                    },
-                },
-            },
-            theme: { type: 'string', enum: ['light', 'dark'] },
-        },
-    },
+    breadcrumbs: common_1.HeaderBreadcrumbsProps,
     status: {
         type: 'string',
     },

package/build/cjs/blocks/Header/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderVideoIframeProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['src'],\n    properties: {\n        src: {type: 'string'},\n        autoplay: {type: 'boolean'},\n        previewImg: {type: 'string'},\n        height: {type: 'number'},\n    },\n};\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    videoIframe: withTheme(HeaderVideoIframeProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: {\n        type: 'object',\n        additionalProperties: false,\n        required: ['items'],\n        properties: {\n            items: {\n                type: 'array',\n                items: {\n                    type: 'object',\n                    additionalProperties: false,\n                    required: ['url', 'text'],\n                    properties: {\n                        url: {\n                            type: 'string',\n                        },\n                        text: {\n                            type: 'string',\n                            contentType: 'text',\n                        },\n                    },\n                },\n            },\n            theme: {type: 'string', enum: ['light', 'dark']},\n        },\n    },\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    HeaderBreadcrumbsProps,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderVideoIframeProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['src'],\n    properties: {\n        src: {type: 'string'},\n        autoplay: {type: 'boolean'},\n        previewImg: {type: 'string'},\n        height: {type: 'number'},\n    },\n};\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    videoIframe: withTheme(HeaderVideoIframeProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: HeaderBreadcrumbsProps,\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}

package/build/cjs/blocks/Hero/Hero.css

@@ -0,0 +1,205 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-hero-block {
+  position: relative;
+}
+.pc-hero-block__background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: min(1440px, 100%);
+  border-radius: var(--pc-border-radius);
+  transform: translateX(-50%);
+}
+.pc-hero-block__background_full-width {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  border-radius: initial;
+}
+.pc-hero-block__background > div {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-image {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-video {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-video > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pc-hero-block__wrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 1fr;
+  gap: 16px;
+  padding-inline: 8px;
+}
+.pc-hero-block__breadcrumbs {
+  position: absolute;
+  top: 16px;
+  left: 8px;
+  max-width: 100%;
+}
+.pc-hero-block__content {
+  grid-column: span 6;
+  padding-inline-end: 48px;
+}
+.pc-hero-block__content_vertical-offset_s {
+  padding-block: 48px;
+}
+.pc-hero-block__content_vertical-offset_m {
+  padding-block: 96px;
+}
+.pc-hero-block__content_vertical-offset_l {
+  padding-block: 128px;
+}
+.pc-hero-block__content_vertical-offset_xl {
+  padding-block: 160px;
+}
+.pc-hero-block__content-overtitle {
+  margin-bottom: 8px;
+}
+.pc-hero-block__content-overtitle_theme_light {
+  --_--overtitle-color: var(--g-color-text-dark-primary);
+}
+.pc-hero-block__content-overtitle_theme_dark {
+  --_--overtitle-color: var(--g-color-text-light-primary);
+}
+.pc-hero-block__content-overtitle,
+.pc-hero-block__content-overtitle .yfm_constructor {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--_--overtitle-color);
+}
+.pc-hero-block__media {
+  position: relative;
+  grid-column: span 6;
+  padding-block: 16px;
+}
+.pc-hero-block__media-container {
+  position: absolute;
+  inset: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pc-hero-block__media-container-content,
+.pc-hero-block__media-container-content .pc-media-component-image__item,
+.pc-hero-block__media-container-content .pc-fullscreen-image,
+.pc-hero-block__media-container-content .pc-fullscreen-image__image-wrapper,
+.pc-hero-block__media-container-content .pc-media-component-video__wrap,
+.pc-hero-block__media-container-content .pc-media-component-video__react-player,
+.pc-hero-block__media-container-content .pc-default-video,
+.pc-hero-block__media-container-content .pc-ReactPlayer__preview-img,
+.pc-hero-block__media-container-content .pc-full-screen-media,
+.pc-hero-block__media-container-content .pc-full-screen-media__media-wrapper {
+  width: 100%;
+  height: auto;
+}
+.pc-hero-block__media-container-content .pc-ReactPlayer__player,
+.pc-hero-block__media-container-content .pc-ReactPlayer__player > video,
+.pc-hero-block__media-container-content .react-player__preview {
+  /* stylelint-disable declaration-no-important */
+  width: 100% !important;
+  height: auto !important;
+  /* stylelint-enable declaration-no-important */
+}
+.pc-hero-block__media-container-content_vertical,
+.pc-hero-block__media-container-content_vertical .pc-media-component-image__item,
+.pc-hero-block__media-container-content_vertical .pc-fullscreen-image,
+.pc-hero-block__media-container-content_vertical .pc-fullscreen-image__image-wrapper,
+.pc-hero-block__media-container-content_vertical .pc-media-component-video__wrap,
+.pc-hero-block__media-container-content_vertical .pc-media-component-video__react-player,
+.pc-hero-block__media-container-content_vertical .pc-default-video,
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__preview-img,
+.pc-hero-block__media-container-content_vertical .pc-full-screen-media,
+.pc-hero-block__media-container-content_vertical .pc-full-screen-media__media-wrapper {
+  width: auto;
+  height: 100%;
+}
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player,
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player > video,
+.pc-hero-block__media-container-content_vertical .react-player__preview {
+  /* stylelint-disable declaration-no-important */
+  width: auto !important;
+  height: 100% !important;
+  /* stylelint-enable declaration-no-important */
+}
+.pc-hero-block__media-container-content_round-corners {
+  border-radius: var(--pc-border-radius);
+}
+.pc-hero-block__media-container-content .pc-ReactPlayer__player {
+  display: flex;
+}
+.pc-hero-block__media-container-content .pc-Media__youtube {
+  border-radius: initial;
+}
+.pc-hero-block__media-container-content .pc-media-component-data-lens__wrap,
+.pc-hero-block__media-container-content .pc-media-component-iframe {
+  margin: 0;
+}
+@media (max-width: 993px) {
+  .pc-hero-block__content {
+    grid-column: span 7;
+  }
+  .pc-hero-block__media {
+    grid-column: span 5;
+  }
+}
+@media (max-width: 769px) {
+  .pc-hero-block__wrapper {
+    gap: 0;
+    padding-block: 20px 24px;
+  }
+  .pc-hero-block__breadcrumbs {
+    position: initial;
+    grid-column: span 12;
+    order: 1;
+    margin-bottom: 16px;
+  }
+  .pc-hero-block__content {
+    grid-column: span 12;
+    order: 3;
+    padding-block: 16px;
+    padding-inline: 0;
+  }
+  .pc-hero-block__media {
+    grid-column: span 12;
+    order: 2;
+    padding-block: 0;
+  }
+  .pc-hero-block__media-container {
+    position: initial;
+    inset: 0;
+  }
+  .pc-hero-block__media-container-content_vertical,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-image__item,
+  .pc-hero-block__media-container-content_vertical .pc-fullscreen-image,
+  .pc-hero-block__media-container-content_vertical .pc-fullscreen-image__image-wrapper,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-video__wrap,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-video__react-player,
+  .pc-hero-block__media-container-content_vertical .pc-default-video,
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__preview-img,
+  .pc-hero-block__media-container-content_vertical .pc-full-screen-media,
+  .pc-hero-block__media-container-content_vertical .pc-full-screen-media__media-wrapper {
+    width: 100%;
+    height: auto;
+  }
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player,
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player > video,
+  .pc-hero-block__media-container-content_vertical .react-player__preview {
+    /* stylelint-disable declaration-no-important */
+    width: 100% !important;
+    height: auto !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}

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

@@ -0,0 +1,3 @@
+import { HeroBlockProps } from "../../models/index.js";
+declare const Hero: (props: HeroBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default Hero;

package/build/cjs/blocks/Hero/Hero.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const components_1 = require("../../components/index.js");
+const constants_1 = require("../../constants.js");
+const theme_1 = require("../../context/theme/index.js");
+const windowWidthContext_1 = require("../../context/windowWidthContext/index.js");
+const grid_1 = require("../../grid/index.js");
+const sub_blocks_1 = require("../../sub-blocks/index.js");
+const utils_1 = require("../../utils/index.js");
+const hooks_1 = require("./hooks.js");
+const b = (0, utils_1.block)('hero-block');
+const Hero = (props) => {
+    const { breadcrumbs, overtitle, buttons, media: themedMedia, fullWidth, verticalOffset = 'm', theme: contentTheme = 'default', background: themedBackground, ...contentProps } = props;
+    const [mediaAspectRatio, setMediaAspectRatio] = React.useState(Infinity);
+    const { aspectRatio: mediaContainerAspectRatio, ref: mediaContainerRef } = (0, hooks_1.useContainerAspectRatio)();
+    const isDesktop = (0, windowWidthContext_1.useWindowWidth)() > constants_1.BREAKPOINTS.md;
+    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;
+    const contextTheme = (0, theme_1.useTheme)();
+    const theme = contentTheme === 'default' ? contextTheme : contentTheme;
+    const background = (0, utils_1.getThemedValue)(themedBackground, theme);
+    const media = (0, utils_1.getThemedValue)(themedMedia, theme);
+    const buttonProps = React.useMemo(() => buttons?.map((buttonThemed) => {
+        if (React.isValidElement(buttonThemed)) {
+            return buttonThemed;
+        }
+        const button = (0, utils_1.getThemedValue)(buttonThemed, theme);
+        return {
+            size: 'xl',
+            ...button,
+        };
+    }), [buttons, theme]);
+    const onMediaIntrinsicSizeChange = React.useCallback(({ width, height }) => setMediaAspectRatio(width / height), []);
+    return ((0, jsx_runtime_1.jsxs)("header", { className: b(), children: [background && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('background', {
+                    ['full-width']: fullWidth,
+                }), imageClassName: b('background-image'), videoClassName: b('background-video'), ...background, isBackground: true })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(components_1.HeaderBreadcrumbs, { className: b('breadcrumbs'), ...breadcrumbs, theme: theme })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {
+                                ['vertical-offset']: verticalOffset,
+                            }), children: [overtitle && ((0, jsx_runtime_1.jsx)("div", { className: b('content-overtitle', { theme }), children: typeof overtitle === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { tagName: "span", content: overtitle, modifiers: {
+                                            constructor: true,
+                                            constructorTheme: theme,
+                                        } })) : (overtitle) })), (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { size: "xl", colSizes: { all: 12 }, ...contentProps, buttons: buttonProps, theme: contentTheme })] }), media && ((0, jsx_runtime_1.jsx)("div", { className: b('media'), children: (0, jsx_runtime_1.jsx)("div", { className: b('media-container'), ref: mediaContainerRef, children: (0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media-container-content', {
+                                        ['round-corners']: media.roundCorners ?? true,
+                                        vertical: isDesktop && isMediaVertical,
+                                    }), ...media, disablePlayerAutoSizing: true, onIntrinsicSizeChange: onMediaIntrinsicSizeChange }) }) }))] }) })] }));
+};
+exports.default = Hero;
+//# sourceMappingURL=Hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"../../../../src","sources":["blocks/Hero/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {HeaderBreadcrumbs, Media, YFMWrapper} from '../../components';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Grid} from '../../grid';\nimport {ButtonProps, HeroBlockProps, Theme} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport {useContainerAspectRatio} from './hooks';\n\nimport './Hero.scss';\n\nconst b = block('hero-block');\n\nconst Hero = (props: HeroBlockProps) => {\n    const {\n        breadcrumbs,\n        overtitle,\n        buttons,\n        media: themedMedia,\n        fullWidth,\n        verticalOffset = 'm',\n        theme: contentTheme = 'default',\n        background: themedBackground,\n        ...contentProps\n    } = props;\n\n    const [mediaAspectRatio, setMediaAspectRatio] = React.useState<number>(Infinity);\n\n    const {aspectRatio: mediaContainerAspectRatio, ref: mediaContainerRef} =\n        useContainerAspectRatio();\n\n    const isDesktop = useWindowWidth() > BREAKPOINTS.md;\n    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;\n\n    const contextTheme = useTheme();\n    const theme = contentTheme === 'default' ? contextTheme : (contentTheme as Theme);\n\n    const background = getThemedValue(themedBackground, theme);\n    const media = getThemedValue(themedMedia, theme);\n\n    const buttonProps = React.useMemo<(ButtonProps | React.ReactNode)[] | undefined>(\n        () =>\n            buttons?.map((buttonThemed) => {\n                if (React.isValidElement(buttonThemed)) {\n                    return buttonThemed;\n                }\n\n                const button = getThemedValue(buttonThemed, theme) as ButtonProps;\n\n                return {\n                    size: 'xl',\n                    ...button,\n                };\n            }),\n        [buttons, theme],\n    );\n\n    const onMediaIntrinsicSizeChange = React.useCallback(\n        ({width, height}: {width: number; height: number}) => setMediaAspectRatio(width / height),\n        [],\n    );\n\n    return (\n        <header className={b()}>\n            {background && (\n                <Media\n                    className={b('background', {\n                        ['full-width']: fullWidth,\n                    })}\n                    imageClassName={b('background-image')}\n                    videoClassName={b('background-video')}\n                    {...background}\n                    isBackground\n                />\n            )}\n            <Grid>\n                <div className={b('wrapper')}>\n                    {breadcrumbs && (\n                        <HeaderBreadcrumbs\n                            className={b('breadcrumbs')}\n                            {...breadcrumbs}\n                            theme={theme}\n                        />\n                    )}\n                    <div\n                        className={b('content', {\n                            ['vertical-offset']: verticalOffset,\n                        })}\n                    >\n                        {overtitle && (\n                            <div className={b('content-overtitle', {theme})}>\n                                {typeof overtitle === 'string' ? (\n                                    <YFMWrapper\n                                        tagName=\"span\"\n                                        content={overtitle}\n                                        modifiers={{\n                                            constructor: true,\n                                            constructorTheme: theme,\n                                        }}\n                                    />\n                                ) : (\n                                    overtitle\n                                )}\n                            </div>\n                        )}\n                        <Content\n                            size=\"xl\"\n                            colSizes={{all: 12}}\n                            {...contentProps}\n                            buttons={buttonProps}\n                            theme={contentTheme}\n                        />\n                    </div>\n                    {media && (\n                        <div className={b('media')}>\n                            <div className={b('media-container')} ref={mediaContainerRef}>\n                                <Media\n                                    className={b('media-container-content', {\n                                        ['round-corners']: media.roundCorners ?? true,\n                                        vertical: isDesktop && isMediaVertical,\n                                    })}\n                                    {...media}\n                                    disablePlayerAutoSizing\n                                    onIntrinsicSizeChange={onMediaIntrinsicSizeChange}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </Grid>\n        </header>\n    );\n};\n\nexport default Hero;\n"]}

package/build/cjs/blocks/Hero/hooks.d.ts

@@ -0,0 +1,4 @@
+export declare const useContainerAspectRatio: () => {
+    aspectRatio: number;
+    ref: (mediaContainer: HTMLDivElement | null) => void;
+};

package/build/cjs/blocks/Hero/hooks.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerAspectRatio = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle.js"));
+const SIZE_UPDATE_FREQUENCY_MS = 100;
+const useContainerAspectRatio = () => {
+    const containerRef = React.useRef(null);
+    const [containerAspectRatio, setContainerAspectRatio] = React.useState(1);
+    const updateAspectRatio = React.useCallback(() => {
+        const container = containerRef.current;
+        if (container) {
+            setContainerAspectRatio(container.clientWidth / container.clientHeight);
+        }
+    }, []);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        const isResizeEventsSupported = 'ResizeObserver' in window;
+        if (!container || !isResizeEventsSupported) {
+            return () => { };
+        }
+        const observer = new ResizeObserver((0, throttle_1.default)(updateAspectRatio, SIZE_UPDATE_FREQUENCY_MS, { leading: true }));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [updateAspectRatio]);
+    return {
+        aspectRatio: containerAspectRatio,
+        ref: (mediaContainer) => {
+            if (mediaContainer) {
+                containerRef.current = mediaContainer;
+                updateAspectRatio();
+            }
+        },
+    };
+};
+exports.useContainerAspectRatio = useContainerAspectRatio;
+//# sourceMappingURL=hooks.js.map

package/build/cjs/blocks/Hero/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"../../../../src","sources":["blocks/Hero/hooks.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,0EAAuC;AAEvC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAE9B,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAElF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,IAAI,SAAS,EAAE,CAAC;YACZ,uBAAuB,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;QAC5E,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,MAAM,uBAAuB,GAAG,gBAAgB,IAAI,MAAM,CAAC;QAE3D,IAAI,CAAC,SAAS,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACzC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QACpB,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAC/B,IAAA,kBAAQ,EAAC,iBAAiB,EAAE,wBAAwB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CACzE,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAE5B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO;QACH,WAAW,EAAE,oBAAoB;QACjC,GAAG,EAAE,CAAC,cAAqC,EAAE,EAAE;YAC3C,IAAI,cAAc,EAAE,CAAC;gBACjB,YAAY,CAAC,OAAO,GAAG,cAAc,CAAC;gBACtC,iBAAiB,EAAE,CAAC;YACxB,CAAC;QACL,CAAC;KACJ,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,uBAAuB,2BAsClC","sourcesContent":["import * as React from 'react';\n\nimport throttle from 'lodash/throttle';\n\nconst SIZE_UPDATE_FREQUENCY_MS = 100;\n\nexport const useContainerAspectRatio = () => {\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\n    const [containerAspectRatio, setContainerAspectRatio] = React.useState<number>(1);\n\n    const updateAspectRatio = React.useCallback(() => {\n        const container = containerRef.current;\n\n        if (container) {\n            setContainerAspectRatio(container.clientWidth / container.clientHeight);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const container = containerRef.current;\n        const isResizeEventsSupported = 'ResizeObserver' in window;\n\n        if (!container || !isResizeEventsSupported) {\n            return () => {};\n        }\n\n        const observer = new ResizeObserver(\n            throttle(updateAspectRatio, SIZE_UPDATE_FREQUENCY_MS, {leading: true}),\n        );\n\n        observer.observe(container);\n\n        return () => observer.disconnect();\n    }, [updateAspectRatio]);\n\n    return {\n        aspectRatio: containerAspectRatio,\n        ref: (mediaContainer: HTMLDivElement | null) => {\n            if (mediaContainer) {\n                containerRef.current = mediaContainer;\n                updateAspectRatio();\n            }\n        },\n    };\n};\n"]}