@gravity-ui/page-constructor 8.3.0 → 8.4.0

package/build/esm/blocks/Hero/schema.js

@@ -0,0 +1,62 @@
+import pick from "lodash/pick.js";
+import { BlockBaseProps, ButtonProps, HeaderBreadcrumbsProps, MediaProps, withTheme, } from "../../schema/validators/common.js";
+import { ContentBase } from "../../sub-blocks/Content/schema.js";
+export const HeroBlockButton = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['text', 'url'],
+    properties: pick(ButtonProps, ['text', 'url', 'theme', 'primary', 'size', 'extraProps']),
+};
+export const HeroBlockBackground = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        ...pick(MediaProps, ['image', 'video', 'parallax', 'height', 'ratio', 'previewImg']),
+        color: {
+            type: 'string',
+        },
+    },
+};
+export const HeroBlockProps = {
+    ...pick(ContentBase, ['title', 'text', 'list', 'additionalInfo', 'links', 'theme']),
+    breadcrumbs: HeaderBreadcrumbsProps,
+    overtitle: {
+        type: 'string',
+        contentType: 'text',
+    },
+    buttons: {
+        type: 'array',
+        items: withTheme(HeroBlockButton),
+    },
+    media: withTheme({
+        type: 'object',
+        additionalProperties: false,
+        required: [],
+        properties: {
+            ...MediaProps,
+            roundCorners: {
+                type: 'boolean',
+            },
+        },
+    }),
+    fullWidth: {
+        type: 'boolean',
+    },
+    verticalOffset: {
+        type: 'string',
+        enum: ['s', 'm', 'l', 'xl'],
+    },
+    background: withTheme(HeroBlockBackground),
+};
+export const HeroBlock = {
+    'hero-block': {
+        additionalProperties: false,
+        required: ['title'],
+        properties: {
+            ...BlockBaseProps,
+            ...HeroBlockProps,
+        },
+    },
+};
+//# sourceMappingURL=schema.js.map

package/build/esm/blocks/Hero/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Hero/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,EACH,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,SAAS,GACZ,0CAAuC;AACxC,OAAO,EAAC,WAAW,EAAC,2CAAwC;AAE5D,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;IACzB,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;CAC3F,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACR,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;QACpF,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;SACjB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACnF,WAAW,EAAE,sBAAsB;IACnC,SAAS,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,MAAM;KACtB;IACD,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC;KACpC;IACD,KAAK,EAAE,SAAS,CAAC;QACb,IAAI,EAAE,QAAQ;QACd,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACR,GAAG,UAAU;YACb,YAAY,EAAE;gBACV,IAAI,EAAE,SAAS;aAClB;SACJ;KACJ,CAAC;IACF,SAAS,EAAE;QACP,IAAI,EAAE,SAAS;KAClB;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;KAC9B;IACD,UAAU,EAAE,SAAS,CAAC,mBAAmB,CAAC;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,YAAY,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,OAAO,CAAC;QACnB,UAAU,EAAE;YACR,GAAG,cAAc;YACjB,GAAG,cAAc;SACpB;KACJ;CACJ,CAAC","sourcesContent":["import pick from 'lodash/pick';\n\nimport {\n    BlockBaseProps,\n    ButtonProps,\n    HeaderBreadcrumbsProps,\n    MediaProps,\n    withTheme,\n} from '../../schema/validators/common';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\n\nexport const HeroBlockButton = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['text', 'url'],\n    properties: pick(ButtonProps, ['text', 'url', 'theme', 'primary', 'size', 'extraProps']),\n};\n\nexport const HeroBlockBackground = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...pick(MediaProps, ['image', 'video', 'parallax', 'height', 'ratio', 'previewImg']),\n        color: {\n            type: 'string',\n        },\n    },\n};\n\nexport const HeroBlockProps = {\n    ...pick(ContentBase, ['title', 'text', 'list', 'additionalInfo', 'links', 'theme']),\n    breadcrumbs: HeaderBreadcrumbsProps,\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    buttons: {\n        type: 'array',\n        items: withTheme(HeroBlockButton),\n    },\n    media: withTheme({\n        type: 'object',\n        additionalProperties: false,\n        required: [],\n        properties: {\n            ...MediaProps,\n            roundCorners: {\n                type: 'boolean',\n            },\n        },\n    }),\n    fullWidth: {\n        type: 'boolean',\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['s', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeroBlockBackground),\n};\n\nexport const HeroBlock = {\n    'hero-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeroBlockProps,\n        },\n    },\n};\n"]}

package/build/esm/blocks/index.d.ts

@@ -13,6 +13,7 @@ export { default as FoldableListBlock } from "./FoldableList/FoldableList.js";
 export { default as TableBlock } from "./Table/Table.js";
 export { default as TabsBlock } from "./Tabs/Tabs.js";
 export { default as HeaderBlock } from "./Header/Header.js";
+export { default as HeroBlock } from "./Hero/Hero.js";
 export { default as IconsBlock } from "./Icons/Icons.js";
 export { default as HeaderSliderBlock } from "./HeaderSlider/HeaderSlider.js";
 export { default as CardLayoutBlock } from "./CardLayout/CardLayout.js";

package/build/esm/blocks/index.js

@@ -12,6 +12,7 @@ export { default as FoldableListBlock } from "./FoldableList/FoldableList.js";
 export { default as TableBlock } from "./Table/Table.js";
 export { default as TabsBlock } from "./Tabs/Tabs.js";
 export { default as HeaderBlock } from "./Header/Header.js";
+export { default as HeroBlock } from "./Hero/Hero.js";
 export { default as IconsBlock } from "./Icons/Icons.js";
 export { default as HeaderSliderBlock } from "./HeaderSlider/HeaderSlider.js";
 export { default as CardLayoutBlock } from "./CardLayout/CardLayout.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AACvD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB;AACjD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,qBAAkB;AAC9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AAEvD,OAAO,EAAC,OAAO,IAAI,qBAAqB,EAAC,+CAA4C;AACrF,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,mDAAgD;AACtF,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,uCAAoC;AACzE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB;AACjD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AACvD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,uCAAoC;AACzE,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,mCAAgC;AACnE,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,yCAAsC;AAC5E,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,qCAAkC;AACjE,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB","sourcesContent":["export {default as BannerBlock} from './Banner/Banner';\nexport {default as CompaniesBlock} from './Companies/Companies';\nexport {default as InfoBlock} from './Info/Info';\nexport {default as MediaBlock} from './Media/Media';\nexport {default as MapBlock} from './Map/Map';\nexport {default as SliderOldBlock} from './SliderOld/SliderOld';\nexport {default as SliderBlock} from './Slider/Slider';\nexport type {Swiper, SwiperOptions} from './Slider/Slider';\nexport {default as ExtendedFeaturesBlock} from './ExtendedFeatures/ExtendedFeatures';\nexport {default as PromoFeaturesBlock} from './PromoFeaturesBlock/PromoFeaturesBlock';\nexport {default as QuestionsBlock} from './Questions/Questions';\nexport {default as FoldableListBlock} from './FoldableList/FoldableList';\nexport {default as TableBlock} from './Table/Table';\nexport {default as TabsBlock} from './Tabs/Tabs';\nexport {default as HeaderBlock} from './Header/Header';\nexport {default as IconsBlock} from './Icons/Icons';\nexport {default as HeaderSliderBlock} from './HeaderSlider/HeaderSlider';\nexport {default as CardLayoutBlock} from './CardLayout/CardLayout';\nexport {default as ContentLayoutBlock} from './ContentLayout/ContentLayout';\nexport {default as ShareBlock} from './Share/Share';\nexport {default as FilterBlock} from './FilterBlock/FilterBlock';\nexport {default as FormBlock} from './Form/Form';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AACvD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB;AACjD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,qBAAkB;AAC9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AAEvD,OAAO,EAAC,OAAO,IAAI,qBAAqB,EAAC,+CAA4C;AACrF,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,mDAAgD;AACtF,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,iCAA8B;AAChE,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,uCAAoC;AACzE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB;AACjD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,2BAAwB;AACvD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB;AACjD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,uCAAoC;AACzE,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,mCAAgC;AACnE,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,yCAAsC;AAC5E,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,yBAAsB;AACpD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,qCAAkC;AACjE,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,uBAAoB","sourcesContent":["export {default as BannerBlock} from './Banner/Banner';\nexport {default as CompaniesBlock} from './Companies/Companies';\nexport {default as InfoBlock} from './Info/Info';\nexport {default as MediaBlock} from './Media/Media';\nexport {default as MapBlock} from './Map/Map';\nexport {default as SliderOldBlock} from './SliderOld/SliderOld';\nexport {default as SliderBlock} from './Slider/Slider';\nexport type {Swiper, SwiperOptions} from './Slider/Slider';\nexport {default as ExtendedFeaturesBlock} from './ExtendedFeatures/ExtendedFeatures';\nexport {default as PromoFeaturesBlock} from './PromoFeaturesBlock/PromoFeaturesBlock';\nexport {default as QuestionsBlock} from './Questions/Questions';\nexport {default as FoldableListBlock} from './FoldableList/FoldableList';\nexport {default as TableBlock} from './Table/Table';\nexport {default as TabsBlock} from './Tabs/Tabs';\nexport {default as HeaderBlock} from './Header/Header';\nexport {default as HeroBlock} from './Hero/Hero';\nexport {default as IconsBlock} from './Icons/Icons';\nexport {default as HeaderSliderBlock} from './HeaderSlider/HeaderSlider';\nexport {default as CardLayoutBlock} from './CardLayout/CardLayout';\nexport {default as ContentLayoutBlock} from './ContentLayout/ContentLayout';\nexport {default as ShareBlock} from './Share/Share';\nexport {default as FilterBlock} from './FilterBlock/FilterBlock';\nexport {default as FormBlock} from './Form/Form';\n"]}

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

@@ -1,8 +1,9 @@
+import * as React from 'react';
 import { ButtonProps, ContentSize } from "../../models/index.js";
 import './Buttons.css';
 type ButtonsProps = {
     className?: string;
-    buttons?: ButtonProps[];
+    buttons?: (ButtonProps | React.ReactNode)[];
     size?: ContentSize;
     titleId?: string;
     qa?: string;

package/build/esm/components/Buttons/Buttons.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { block } from "../../utils/index.js";
 import Button from "../Button/Button.js";
 import './Buttons.css';
@@ -15,8 +16,10 @@ function getButtonSize(size) {
             return 'xl';
     }
 }
-const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa }) => buttons ? (_jsx("div", { className: b({ size }, className), "data-qa": qa, children: buttons.map((item) => (_createElement(Button, { className: b('button'), ...item, key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: {
-            'aria-describedby': item.urlTitle ? undefined : titleId,
+const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa }) => buttons ? (_jsx("div", { className: b({ size }, className), "data-qa": qa, children: buttons.map((item, index) => React.isValidElement(item) ? (_jsx(React.Fragment, { children: item }, index)) : (_createElement(Button, { className: b('button'), ...item, key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: {
+            'aria-describedby': item.urlTitle
+                ? undefined
+                : titleId,
             ...item.extraProps,
         } }))) })) : null;
 export default Buttons;

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

@@ -1 +1 @@
-{"version":3,"file":"Buttons.js","sourceRoot":"../../../../src","sources":["components/Buttons/Buttons.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,MAAM,4BAAyB;AAEtC,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAW3B,SAAS,aAAa,CAAC,IAAiB;IACpC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT,KAAK,GAAG,CAAC;QACT,KAAK,IAAI,CAAC;QACV;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAe,EAAE,EAAE,CACtF,OAAO,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,aAAW,EAAE,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,KAClB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,EACzB,EAAE,EAAE,QAAQ,EACZ,UAAU,EAAE;YACR,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YACvD,GAAG,IAAI,CAAC,UAAU;SACrB,GACH,CACL,CAAC,GACA,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,eAAe,OAAO,CAAC","sourcesContent":["import {ButtonProps, ContentSize} from '../../models';\nimport {block} from '../../utils';\nimport Button from '../Button/Button';\n\nimport './Buttons.scss';\n\nconst b = block('buttons');\n\ntype ButtonsProps = {\n    className?: string;\n    buttons?: ButtonProps[];\n    size?: ContentSize;\n    titleId?: string;\n    qa?: string;\n    buttonQa?: string;\n};\n\nfunction getButtonSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'm';\n        case 'm':\n        case 'l':\n        case 'xl':\n        default:\n            return 'xl';\n    }\n}\n\nconst Buttons = ({className, titleId, buttons, size = 's', qa, buttonQa}: ButtonsProps) =>\n    buttons ? (\n        <div className={b({size}, className)} data-qa={qa}>\n            {buttons.map((item) => (\n                <Button\n                    className={b('button')}\n                    {...item}\n                    key={item.url}\n                    size={getButtonSize(size)}\n                    qa={buttonQa}\n                    extraProps={{\n                        'aria-describedby': item.urlTitle ? undefined : titleId,\n                        ...item.extraProps,\n                    }}\n                />\n            ))}\n        </div>\n    ) : null;\n\nexport default Buttons;\n"]}
+{"version":3,"file":"Buttons.js","sourceRoot":"../../../../src","sources":["components/Buttons/Buttons.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,MAAM,4BAAyB;AAEtC,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAW3B,SAAS,aAAa,CAAC,IAAiB;IACpC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT,KAAK,GAAG,CAAC;QACT,KAAK,IAAI,CAAC;QACV;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAe,EAAE,EAAE,CACtF,OAAO,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,aAAW,EAAE,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzB,KAAC,KAAK,CAAC,QAAQ,cAAc,IAAI,IAAZ,KAAK,CAAyB,CACtD,CAAC,CAAC,CAAC,CACA,eAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,KACjB,IAAoB,EACzB,GAAG,EAAG,IAAoB,CAAC,GAAG,EAC9B,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,EACzB,EAAE,EAAE,QAAQ,EACZ,UAAU,EAAE;YACR,kBAAkB,EAAG,IAAoB,CAAC,QAAQ;gBAC9C,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,OAAO;YACb,GAAI,IAAoB,CAAC,UAAU;SACtC,GACH,CACL,CACJ,GACC,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,eAAe,OAAO,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonProps, ContentSize} from '../../models';\nimport {block} from '../../utils';\nimport Button from '../Button/Button';\n\nimport './Buttons.scss';\n\nconst b = block('buttons');\n\ntype ButtonsProps = {\n    className?: string;\n    buttons?: (ButtonProps | React.ReactNode)[];\n    size?: ContentSize;\n    titleId?: string;\n    qa?: string;\n    buttonQa?: string;\n};\n\nfunction getButtonSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'm';\n        case 'm':\n        case 'l':\n        case 'xl':\n        default:\n            return 'xl';\n    }\n}\n\nconst Buttons = ({className, titleId, buttons, size = 's', qa, buttonQa}: ButtonsProps) =>\n    buttons ? (\n        <div className={b({size}, className)} data-qa={qa}>\n            {buttons.map((item, index) =>\n                React.isValidElement(item) ? (\n                    <React.Fragment key={index}>{item}</React.Fragment>\n                ) : (\n                    <Button\n                        className={b('button')}\n                        {...(item as ButtonProps)}\n                        key={(item as ButtonProps).url}\n                        size={getButtonSize(size)}\n                        qa={buttonQa}\n                        extraProps={{\n                            'aria-describedby': (item as ButtonProps).urlTitle\n                                ? undefined\n                                : titleId,\n                            ...(item as ButtonProps).extraProps,\n                        }}\n                    />\n                ),\n            )}\n        </div>\n    ) : null;\n\nexport default Buttons;\n"]}

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

@@ -7,6 +7,7 @@ interface DefaultVideoProps {
     qa?: string;
     customBarControlsClassName?: string;
     className?: string;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLVideoElement>;
 }
 export declare const DefaultVideo: React.ForwardRefExoticComponent<DefaultVideoProps & React.RefAttributes<DefaultVideoRefType>>;
 export {};

package/build/esm/components/DefaultVideo/DefaultVideo.js

@@ -7,7 +7,7 @@ import CustomBarControls from "../ReactPlayer/CustomBarControls.js";
 import './DefaultVideo.css';
 const b = block('default-video');
 export const DefaultVideo = React.forwardRef((props, ref) => {
-    const { video, qa, customBarControlsClassName } = props;
+    const { video, qa, customBarControlsClassName, onLoadedMetadata } = props;
     const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd, loop, } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = React.useState(false);
@@ -68,7 +68,7 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
     return (_jsxs(React.Fragment, { children: [_jsxs("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, onEnded: onEnded, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, onEnded: onEnded, onLoadedMetadata: onLoadedMetadata, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                     isMuted: Boolean(isMuted),
                     changeMute: onMuteToggle,
                 } }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,kBAAkB,EAAE,sBAAsB,EAAkB,8BAAqB;AACzF,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,yBAAyB,EAAC,gCAA6B;AAC/D,OAAO,iBAAiB,4CAAyC;AAEjE,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAWjC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,0BAA0B,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EACF,QAAQ,EACR,qBAAqB,EACrB,KAAK,EAAE,cAAc,GAAG,IAAI,EAC5B,UAAU,EACV,IAAI,GACP,GAAG,KAAK,CAAC;IACV,MAAM,EACF,eAAe,EACf,WAAW,EACX,IAAI,EAAE,kBAAkB,GAC3B,GAAG,qBAAqB,IAAI,EAAE,CAAC;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,mEAAmE;IACnE,sEAAsE;IACtE,kCAAkC;IAClC,oEAAoE;IACpE,+DAA+D;IAC/D,gDAAgD;IAChD,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAChC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC;YACrB,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,QAAQ,CAAC,OAAO,CAAC;IAC5B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,iGAAiG;IACjG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QAEtC,IAAI,YAAY,IAAI,cAAc,EAAE,CAAC;YACjC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,IAAI,KAAK,EAAE,CAAC;gBACR,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAC9B,CAAC;iBAAM,CAAC;gBACJ,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO,CAAC,KAAK,CAAC;QAClB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,kBAAkB,KAAK,kBAAkB,CAAC,mBAAmB,EAAE,CAAC;YAChE,YAAY,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEvC,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACP,MAAM,EAAC,KAAK,GAAG,CAAC,EAAE,GAAG,GAAG,YAAY,CAAC,QAAQ,EAAC,GAC1C,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAE1C,IAAI,YAAY,CAAC,WAAW,IAAI,GAAG,EAAE,CAAC;gBAClC,YAAY,CAAC,WAAW,GAAG,KAAK,CAAC;gBACjC,YAAY,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;QACL,CAAC;QAED,UAAU,EAAE,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,MAAC,KAAK,CAAC,QAAQ,eACX,iBACI,uBAAuB,QACvB,WAAW;gBACX,aAAa;gBACb,qDAAqD;gBACrD,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,CAAC,EAAE,EACd,GAAG,EAAE,QAAQ,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,OAAO,gBACF,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,aAEf,yBAAyB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9D,iBAAoB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,aAAW,EAAE,IAAxC,KAAK,CAAuC,CAC5D,CAAC,EACF,gBAAO,OAAO,QAAC,IAAI,EAAC,UAAU,GAAG,IAC7B,EAEP,QAAQ,KAAK,sBAAsB,CAAC,MAAM,IAAI,CAC3C,KAAC,iBAAiB,IACd,SAAS,EAAE,0BAA0B,EACrC,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,YAAY,EACzB,eAAe,EAAE,eAAe,EAChC,KAAK,QACL,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;oBACF,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,UAAU,EAAE,YAAY;iBAC3B,GACH,CACL,IACY,CACpB,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {\n            controls,\n            customControlsOptions,\n            muted: initiallyMuted = true,\n            onVideoEnd,\n            loop,\n        } = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        const onEnded = React.useCallback(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement) {\n                return;\n            }\n\n            if (loop) {\n                const {start = 0, end = videoElement.duration} =\n                    typeof loop === 'boolean' ? {} : loop;\n\n                if (videoElement.currentTime >= end) {\n                    videoElement.currentTime = start;\n                    videoElement.play();\n                }\n            }\n\n            onVideoEnd?.();\n        }, [loop, onVideoEnd]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                    onEnded={onEnded}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}
+{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n    onLoadedMetadata?: React.ReactEventHandler<HTMLVideoElement>;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName, onLoadedMetadata} = props;\n        const {\n            controls,\n            customControlsOptions,\n            muted: initiallyMuted = true,\n            onVideoEnd,\n            loop,\n        } = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        const onEnded = React.useCallback(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement) {\n                return;\n            }\n\n            if (loop) {\n                const {start = 0, end = videoElement.duration} =\n                    typeof loop === 'boolean' ? {} : loop;\n\n                if (videoElement.currentTime >= end) {\n                    videoElement.currentTime = start;\n                    videoElement.play();\n                }\n            }\n\n            onVideoEnd?.();\n        }, [loop, onVideoEnd]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                    onEnded={onEnded}\n                    onLoadedMetadata={onLoadedMetadata}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}

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

@@ -4,7 +4,11 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     style?: React.CSSProperties;
     className?: string;
     onClick?: React.MouseEventHandler;
-    onLoad?: React.ReactEventHandler<HTMLDivElement>;
+    onLoad?: React.ReactEventHandler<HTMLImageElement>;
+    onIntrinsicSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void;
     containerClassName?: string;
 }
 export interface DeviceSpecificFragmentProps extends QAProps {

package/build/esm/components/Image/Image.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { BREAKPOINTS } from "../../constants.js";
 import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
+import { useImageSize } from "../../hooks/index.js";
 import { Device } from "../../models/index.js";
 import { getQaAttrubutes } from "../../utils/index.js";
 import { isCompressible } from "../../utils/imageCompress.js";
@@ -23,7 +24,8 @@ const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint
 };
 const Image = (props) => {
     const projectSettings = React.useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, hide, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, onIntrinsicSizeChange, containerClassName, qa, fetchPriority, loading, hide, } = props;
+    const { imageRef, onLoad: onLoadOverride } = useImageSize({ onIntrinsicSizeChange, onLoad });
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
     const hideDevices = typeof hide === 'boolean' || !hide
@@ -38,7 +40,7 @@ const Image = (props) => {
     if (!src) {
         return null;
     }
-    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
+    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoadOverride, ref: imageRef })] }));
 };
 export default Image;
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAC5C,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;AAC5E,OAAO,EAAC,MAAM,EAA8C,8BAAqB;AACjF,OAAO,EAAC,eAAe,EAAC,6BAAoB;AAC5C,OAAO,EAAC,cAAc,EAAC,qCAAkC;AACzD,OAAO,SAAS,kCAA+B;AAiB/C,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAClB,wHAAwH,CAAC;AAE7H,MAAM,sBAAsB,GAAG,CAAC,EAC5B,WAAW,EACX,GAAG,EACH,aAAa,EACb,aAAa,EACb,EAAE,GACwB,EAAE,EAAE;IAC9B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,IAAI,aAAa,EAAE,CAAC;QAChB,KAAK,CAAC,IAAI,CAAC,eAAe,aAAa,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAChB,KAAK,CAAC,IAAI,CAAC,eAAe,aAAa,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAExC,OAAO,CACH,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,iBACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,WAAW,aACT,GAAG,EAAE,aAAa,GAC7B,CACL,EACD,iBAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,aAAW,EAAE,GAAI,IAC3C,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAChC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,EACF,GAAG,EAAE,QAAQ,EACb,GAAG,EACH,eAAe,EACf,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,EAAE,EACF,aAAa,EACb,OAAO,EACP,IAAI,GACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,GAAG,GAAG,QAAQ,IAAI,OAAO,CAAC;IAEhC,MAAM,WAAW,GACb,OAAO,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI;QAC9B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,CAAC,EACpD,EAA6B,CAChC;QACH,CAAC,CAAC,IAAI,CAAC;IAEf,MAAM,YAAY,GAAG,eAAe,CAChC,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,2BAA2B,CAC9B,CAAC;IAEF,MAAM,WAAW,GACb,CAAC,GAAG;QACJ,eAAe,CAAC,eAAe;QAC/B,eAAe;QACf,CAAC,cAAc,CAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,mBAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,CAC/B,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,IAAI,SAAS,EACxB,WAAW,EAAE,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,EACvD,aAAa,EAAE,WAAW,CAAC,EAAE,EAC7B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,CAC/B,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,IAAI,SAAS,EACxB,WAAW,EAAE,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,EACvD,aAAa,EAAE,WAAW,CAAC,EAAE,EAC7B,aAAa,EAAE,WAAW,CAAC,EAAE,EAC7B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,WAAW,CAAC,OAAO,IAAI,CACpB,KAAC,sBAAsB,IACnB,GAAG,EAAE,SAAS,EACd,WAAW,QACX,aAAa,EAAE,WAAW,CAAC,EAAE,EAC7B,EAAE,EAAE,YAAY,CAAC,aAAa,GAChC,CACL,EACA,GAAG,IAAI,CAAC,WAAW,IAAI,CACpB,iBACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,aACR,YAAY,CAAC,uBAAuB,GAC/C,CACL,EACD,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,MAAM,EAAE,MAAM,GAChB,IACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLDivElement>;\n    containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n    disableWebp: boolean;\n    src: string;\n    maxBreakpoint?: number;\n    minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n    return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n    disableWebp,\n    src,\n    maxBreakpoint,\n    minBreakpoint,\n    qa,\n}: DeviceSpecificFragmentProps) => {\n    const media: string[] = [];\n\n    if (maxBreakpoint) {\n        media.push(`(max-width: ${maxBreakpoint}px)`);\n    }\n\n    if (minBreakpoint) {\n        media.push(`(min-width: ${minBreakpoint}px)`);\n    }\n\n    const mediaString = media.join(' and ');\n\n    return (\n        <React.Fragment>\n            {!disableWebp && (\n                <source\n                    srcSet={checkWebP(src)}\n                    type=\"image/webp\"\n                    media={mediaString}\n                    data-qa={`${qa}-compressed`}\n                />\n            )}\n            <source srcSet={src} media={mediaString} data-qa={qa} />\n        </React.Fragment>\n    );\n};\n\nconst Image = (props: ImageProps) => {\n    const projectSettings = React.useContext(ProjectSettingsContext);\n    const {\n        src: imageSrc,\n        alt,\n        disableCompress,\n        tablet,\n        desktop,\n        mobile,\n        style,\n        className,\n        onClick,\n        onLoad,\n        containerClassName,\n        qa,\n        fetchPriority,\n        loading,\n        hide,\n    } = props;\n    const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n    const src = imageSrc || desktop;\n\n    const hideDevices =\n        typeof hide === 'boolean' || !hide\n            ? Object.values(Device).reduce(\n                  (acc, device) => ({...acc, [device]: Boolean(hide)}),\n                  {} as Record<Device, boolean>,\n              )\n            : hide;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'mobile-webp-source',\n        'mobile-source',\n        'tablet-webp-source',\n        'tablet-source',\n        'desktop-source',\n        'desktop-source-compressed',\n    );\n\n    const disableWebp =\n        !src ||\n        projectSettings.disableCompress ||\n        disableCompress ||\n        !isCompressible(src) ||\n        imgLoadingError;\n\n    if (!src) {\n        return null;\n    }\n\n    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {(mobile || hideDevices.mobile) && (\n                <DeviceSpecificFragment\n                    src={mobile || EMPTY_IMG}\n                    disableWebp={disableWebp || Boolean(hideDevices.mobile)}\n                    maxBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {(tablet || hideDevices.tablet) && (\n                <DeviceSpecificFragment\n                    src={tablet || EMPTY_IMG}\n                    disableWebp={disableWebp || Boolean(hideDevices.tablet)}\n                    maxBreakpoint={BREAKPOINTS.md}\n                    minBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.tabletSource}\n                />\n            )}\n            {hideDevices.desktop && (\n                <DeviceSpecificFragment\n                    src={EMPTY_IMG}\n                    disableWebp\n                    minBreakpoint={BREAKPOINTS.md}\n                    qa={qaAttributes.desktopSource}\n                />\n            )}\n            {src && !disableWebp && (\n                <source\n                    srcSet={checkWebP(src)}\n                    type=\"image/webp\"\n                    data-qa={qaAttributes.desktopSourceCompressed}\n                />\n            )}\n            <ImageBase\n                className={className}\n                alt={alt}\n                src={src}\n                style={style}\n                fetchPriority={fetchPriority}\n                loading={loading}\n                onClick={onClick}\n                onError={() => setImgLoadingError(true)}\n                onLoad={onLoad}\n            />\n        </picture>\n    );\n};\n\nexport default Image;\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useImageSize} from '../../hooks';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLImageElement>;\n    onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n    containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n    disableWebp: boolean;\n    src: string;\n    maxBreakpoint?: number;\n    minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n    return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n    disableWebp,\n    src,\n    maxBreakpoint,\n    minBreakpoint,\n    qa,\n}: DeviceSpecificFragmentProps) => {\n    const media: string[] = [];\n\n    if (maxBreakpoint) {\n        media.push(`(max-width: ${maxBreakpoint}px)`);\n    }\n\n    if (minBreakpoint) {\n        media.push(`(min-width: ${minBreakpoint}px)`);\n    }\n\n    const mediaString = media.join(' and ');\n\n    return (\n        <React.Fragment>\n            {!disableWebp && (\n                <source\n                    srcSet={checkWebP(src)}\n                    type=\"image/webp\"\n                    media={mediaString}\n                    data-qa={`${qa}-compressed`}\n                />\n            )}\n            <source srcSet={src} media={mediaString} data-qa={qa} />\n        </React.Fragment>\n    );\n};\n\nconst Image = (props: ImageProps) => {\n    const projectSettings = React.useContext(ProjectSettingsContext);\n    const {\n        src: imageSrc,\n        alt,\n        disableCompress,\n        tablet,\n        desktop,\n        mobile,\n        style,\n        className,\n        onClick,\n        onLoad,\n        onIntrinsicSizeChange,\n        containerClassName,\n        qa,\n        fetchPriority,\n        loading,\n        hide,\n    } = props;\n\n    const {imageRef, onLoad: onLoadOverride} = useImageSize({onIntrinsicSizeChange, onLoad});\n\n    const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n    const src = imageSrc || desktop;\n\n    const hideDevices =\n        typeof hide === 'boolean' || !hide\n            ? Object.values(Device).reduce(\n                  (acc, device) => ({...acc, [device]: Boolean(hide)}),\n                  {} as Record<Device, boolean>,\n              )\n            : hide;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'mobile-webp-source',\n        'mobile-source',\n        'tablet-webp-source',\n        'tablet-source',\n        'desktop-source',\n        'desktop-source-compressed',\n    );\n\n    const disableWebp =\n        !src ||\n        projectSettings.disableCompress ||\n        disableCompress ||\n        !isCompressible(src) ||\n        imgLoadingError;\n\n    if (!src) {\n        return null;\n    }\n\n    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {(mobile || hideDevices.mobile) && (\n                <DeviceSpecificFragment\n                    src={mobile || EMPTY_IMG}\n                    disableWebp={disableWebp || Boolean(hideDevices.mobile)}\n                    maxBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {(tablet || hideDevices.tablet) && (\n                <DeviceSpecificFragment\n                    src={tablet || EMPTY_IMG}\n                    disableWebp={disableWebp || Boolean(hideDevices.tablet)}\n                    maxBreakpoint={BREAKPOINTS.md}\n                    minBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.tabletSource}\n                />\n            )}\n            {hideDevices.desktop && (\n                <DeviceSpecificFragment\n                    src={EMPTY_IMG}\n                    disableWebp\n                    minBreakpoint={BREAKPOINTS.md}\n                    qa={qaAttributes.desktopSource}\n                />\n            )}\n            {src && !disableWebp && (\n                <source\n                    srcSet={checkWebP(src)}\n                    type=\"image/webp\"\n                    data-qa={qaAttributes.desktopSourceCompressed}\n                />\n            )}\n            <ImageBase\n                className={className}\n                alt={alt}\n                src={src}\n                style={style}\n                fetchPriority={fetchPriority}\n                loading={loading}\n                onClick={onClick}\n                onError={() => setImgLoadingError(true)}\n                onLoad={onLoadOverride}\n                ref={imageRef}\n            />\n        </picture>\n    );\n};\n\nexport default Image;\n"]}

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

@@ -4,8 +4,8 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
     style?: React.CSSProperties;
     className?: string;
     onClick?: React.MouseEventHandler;
-    onLoad?: React.ReactEventHandler<HTMLDivElement>;
+    onLoad?: React.ReactEventHandler<HTMLImageElement>;
     onError?: () => void;
 }
-export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBase: React.ForwardRefExoticComponent<ImageBaseProps & React.RefAttributes<HTMLImageElement>>;
 export default ImageBase;

package/build/esm/components/ImageBase/ImageBase.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ImageContext } from "../../context/imageContext/imageContext.js";
-export const ImageBase = ({ fetchPriority, alt, ...props }) => {
+export const ImageBase = React.forwardRef(({ fetchPriority, alt, ...props }, ref) => {
     const { Image } = React.useContext(ImageContext);
-    return Image ? (_jsx(Image, { fetchPriority: fetchPriority, alt: alt, ...props })) : (
+    return Image ? (_jsx(Image, { fetchPriority: fetchPriority, alt: alt, ...props, ref: ref })) : (
     // There is an issue with fetchpriority attr in img in React.
     // It is still not supported. However it's nice to have ability to manage
     // this prop is good to have to improve Core Web Vitals.
     // So, here is a workaround to assign the attr.
-    _jsx("img", { fetchPriority: fetchPriority, alt: alt, ...props }));
-};
+    _jsx("img", { fetchPriority: fetchPriority, alt: alt, ...props, ref: ref }));
+});
+ImageBase.displayName = 'ImageBase';
 export default ImageBase;
 //# sourceMappingURL=ImageBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.js","sourceRoot":"../../../../src","sources":["components/ImageBase/ImageBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,mDAAgD;AAWrE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAC,aAAa,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE;IACxE,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/C,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,IAAC,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAC/D,CAAC,CAAC,CAAC;IACA,6DAA6D;IAC7D,yEAAyE;IACzE,wDAAwD;IACxD,+CAA+C;IAC/C,cAAU,aAAa,EAAE,aAAa,EAAG,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CACnE,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ImageContext} from '../../context/imageContext/imageContext';\nimport {ImageObjectProps} from '../../models';\n\nexport interface ImageBaseProps extends Partial<ImageObjectProps> {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLDivElement>;\n    onError?: () => void;\n}\n\nexport const ImageBase = ({fetchPriority, alt, ...props}: ImageBaseProps) => {\n    const {Image} = React.useContext(ImageContext);\n\n    return Image ? (\n        <Image fetchPriority={fetchPriority} alt={alt} {...props} />\n    ) : (\n        // There is an issue with fetchpriority attr in img in React.\n        // It is still not supported. However it's nice to have ability to manage\n        // this prop is good to have to improve Core Web Vitals.\n        // So, here is a workaround to assign the attr.\n        <img {...{fetchPriority: fetchPriority}} alt={alt} {...props} />\n    );\n};\n\nexport default ImageBase;\n"]}
+{"version":3,"file":"ImageBase.js","sourceRoot":"../../../../src","sources":["components/ImageBase/ImageBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,mDAAgD;AAWrE,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAC,aAAa,EAAE,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IACpC,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/C,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,IAAC,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CACzE,CAAC,CAAC,CAAC;IACA,6DAA6D;IAC7D,yEAAyE;IACzE,wDAAwD;IACxD,+CAA+C;IAC/C,cAAU,aAAa,EAAE,aAAa,EAAG,GAAG,EAAE,GAAG,KAAM,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAC7E,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ImageContext} from '../../context/imageContext/imageContext';\nimport {ImageObjectProps} from '../../models';\n\nexport interface ImageBaseProps extends Partial<ImageObjectProps> {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLImageElement>;\n    onError?: () => void;\n}\n\nexport const ImageBase = React.forwardRef<HTMLImageElement, ImageBaseProps>(\n    ({fetchPriority, alt, ...props}, ref) => {\n        const {Image} = React.useContext(ImageContext);\n\n        return Image ? (\n            <Image fetchPriority={fetchPriority} alt={alt} {...props} ref={ref} />\n        ) : (\n            // There is an issue with fetchpriority attr in img in React.\n            // It is still not supported. However it's nice to have ability to manage\n            // this prop is good to have to improve Core Web Vitals.\n            // So, here is a workaround to assign the attr.\n            <img {...{fetchPriority: fetchPriority}} alt={alt} {...props} ref={ref} />\n        );\n    },\n);\n\nImageBase.displayName = 'ImageBase';\n\nexport default ImageBase;\n"]}

package/build/esm/components/Media/Image/Image.d.ts

@@ -6,6 +6,10 @@ export interface ImageAdditionProps {
     fullscreen?: boolean;
     fullscreenClassName?: string;
     onLoad?: () => void;
+    onIntrinsicSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void;
 }
 interface InnerImageProps {
     hasVideoFallback: boolean;

package/build/esm/components/Media/Image/Image.js

@@ -13,7 +13,7 @@ import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, onIntrinsicSizeChange, } = props;
     const image = Array.isArray(props.image) && disableImageSliderForArrayInput
         ? props.image[0]
         : props.image;
@@ -41,7 +41,7 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item, sliderData) => {
         const itemData = getMediaImage(item);
-        return (_jsx(FullscreenImage, { ...itemData, imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData }, itemData.alt));
+        return (_jsx(FullscreenImage, { ...itemData, imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }, itemData.alt));
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
@@ -49,7 +49,7 @@ const Image = (props) => {
     };
     const imageOnly = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (_jsx(ImageView, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad }));
+        return (_jsx(ImageView, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

package/build/esm/components/Media/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    fullscreenClassName?: string;\n    onLoad?: () => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        fullscreenClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (\n        item: ImageProps,\n        sliderData?: FullscreenImageProps['sliderData'],\n    ) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                modalImageClass={fullscreenClassName}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n                sliderData={sliderData}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem\n                            ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n                            : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC7E,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,iCAAwB;AAC5C,OAAO,EAAgD,UAAU,EAAC,iCAAwB;AAC1F,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,gCAAuB;AACtD,OAAO,eAAe,iDAA8C;AACpE,OAAO,eAAuC,iDAA8C;AAC5F,OAAO,SAAS,6BAA0B;AAE1C,OAAO,EAAC,aAAa,EAAC,mBAAgB;AAEtC,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;AAiBzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAEnD,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IACnC,MAAM,EACF,QAAQ,EACR,MAAM,EACN,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,+BAA+B,EAC/B,EAAE,EACF,MAAM,EACN,qBAAqB,GACxB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GACP,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,+BAA+B;QACzD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAEtB,MAAM,YAAY,GAAG,eAAe,CAChC,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,cAAc,CACjB,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,EAAC,aAAa,EAAC,EAAE,gBAAgB,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC;QACzD,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC,QAAQ;KAC1B,CAAC,CAAC,CAAC;IAEJ,IAAI,mBAAmB,GAA2C,EAAE,CAAC;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACtD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YAEnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;YACrE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,EAAE,CAAC;QACX,MAAM,aAAa,GAAG,CAAC,CAAC;QACxB,gBAAgB,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,MAAM,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAC,CAAC;QACvF,mBAAmB,GAAG,aAAa,CAAC,EAAE,CAClC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,KAAK,CAC/D,CAAC;IACN,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,EAAE,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAC,EAAE,cAAc,CAAC,CAAC;IAE/F,MAAM,qBAAqB,GAAG,CAC1B,IAAgB,EAChB,UAA+C,EACjD,EAAE;QACA,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;QAErC,OAAO,CACH,KAAC,eAAe,OAER,QAAQ,EACZ,cAAc,EAAE,UAAU,EAC1B,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,EAAC,MAAM,EAAC,EACpB,EAAE,EAAE,YAAY,CAAC,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,qBAAqB,IARvC,QAAQ,CAAC,GAAG,CASnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,KAAC,QAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,mBAAmB,EAAC,aAAW,YAAY,CAAC,OAAO,YAChF,KAAC,eAAe,OACR,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,eAAe,GAClC,GACS,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,QAAoB,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,KAAC,SAAS,OACF,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,SAAS,EAC1B,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,qBAAqB,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,UAAwB,EAAE,EAAE;QAC7C,MAAM,cAAc,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,CAAC;QAE9D,OAAO,CACH,KAAC,WAAW,IAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,SAAS,YACnD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,CAAC,QAAQ,cACV,cAAc;oBACX,CAAC,CAAC,qBAAqB,CAAC,IAAI,EAAE,EAAC,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAC,CAAC;oBACvE,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAHJ,KAAK,CAIT,CACpB,CAAC,GACQ,CACjB,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACpE,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    fullscreenClassName?: string;\n    onLoad?: () => void;\n    onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        fullscreenClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n        onIntrinsicSizeChange,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (\n        item: ImageProps,\n        sliderData?: FullscreenImageProps['sliderData'],\n    ) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                modalImageClass={fullscreenClassName}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n                sliderData={sliderData}\n                onLoad={onLoad}\n                onIntrinsicSizeChange={onIntrinsicSizeChange}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n                onIntrinsicSizeChange={onIntrinsicSizeChange}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem\n                            ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n                            : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}

package/build/esm/components/Media/Media.js

@@ -12,14 +12,14 @@ import Video from "./Video/Video.js";
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, isFullscreenImageCover, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, isFullscreenImageCover, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, onIntrinsicSizeChange, disablePlayerAutoSizing, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = React.useState(false);
     const { microdata } = React.useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = React.useMemo(() => {
         let result = [];
         if (image) {
-            result.push(_jsx(Image, { parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, fullscreenClassName: isFullscreenImageCover ? b('fullscreen-image-cover') : undefined, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }, "image"));
+            result.push(_jsx(Image, { parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, fullscreenClassName: isFullscreenImageCover ? b('fullscreen-image-cover') : undefined, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }, "image"));
         }
         if (video) {
             const videoProps = {
@@ -34,6 +34,8 @@ export const Media = (props) => {
                 customBarControlsClassName,
                 hasVideoFallback,
                 setHasVideoFallback,
+                disablePlayerAutoSizing,
+                onIntrinsicSizeChange,
                 ratio,
             };
             if (fullscreen) {
@@ -56,27 +58,29 @@ export const Media = (props) => {
     }, [
         image,
         video,
-        videoIframe,
         youtube,
+        videoIframe,
         dataLens,
         iframe,
         parallax,
         disableImageSliderForArrayInput,
         height,
         imageClassName,
+        isFullscreenImageCover,
         isBackground,
         hasVideoFallback,
         fullscreen,
-        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,
+        onIntrinsicSizeChange,
         videoClassName,
         analyticsEvents,
         playVideo,
         previewImg,
         playButton,
         customBarControlsClassName,
+        disablePlayerAutoSizing,
         ratio,
         youtubeClassName,
         autoplay,

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

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    isFullscreenImageCover?: boolean;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        isFullscreenImageCover,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    fullscreenClassName={\n                        isFullscreenImageCover ? b('fullscreen-image-cover') : undefined\n                    }\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        videoIframe,\n        youtube,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        isFullscreenImageCover,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}
+{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    isFullscreenImageCover?: boolean;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        isFullscreenImageCover,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        onIntrinsicSizeChange,\n        disablePlayerAutoSizing,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    fullscreenClassName={\n                        isFullscreenImageCover ? b('fullscreen-image-cover') : undefined\n                    }\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                    onIntrinsicSizeChange={onIntrinsicSizeChange}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                disablePlayerAutoSizing,\n                onIntrinsicSizeChange,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isFullscreenImageCover,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        onIntrinsicSizeChange,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        disablePlayerAutoSizing,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}

package/build/esm/components/Media/Video/Video.d.ts

@@ -6,6 +6,11 @@ export interface VideoAdditionProps {
     customBarControlsClassName?: string;
     videoClassName?: string;
     playVideo?: boolean;
+    disablePlayerAutoSizing?: boolean;
+    onIntrinsicSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void;
 }
 interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;