@gravity-ui/page-constructor 6.8.2-alpha.0 → 6.9.0

package/README.md

@@ -14,24 +14,112 @@ For the format of input data and list of available blocks, see the [documentatio
 npm install @gravity-ui/page-constructor
 ```
 
-## Required dependencies
+## Quick start
 
-Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `@gravity-ui/uikit`, `react`. Check out the `peerDependencies` section of `package.json` for accurate information.
+First, we need a React project and some kind of server. For example, you can create a React project using Vite and an Express server, or you can create Next.js application - it will have a client and server side at once.
 
-### Getting started
+Install the required dependencies:
 
-The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
+```shell
+npm install @gravity-ui/page-constructor @diplodoc/transform @gravity-ui/uikit
+```
 
-```jsx
+Insert the `Page Constructor` to the page. To work correctly, it must be wrapped in a `PageConstructorProvider`:
+
+```tsx
 import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+
+const App = () => {
+  const content = {
+    blocks: [
+      {
+        type: 'header-block',
+        title: 'Hello world',
+        background: {color: '#f0f0f0'},
+        description:
+          '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+      },
+    ],
+  };
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
 
-const Page: React.PropsWithChildren<PageProps> = ({content}) => (
-  <PageConstructorProvider>
-    <PageConstructor content={content} />
-  </PageConstructorProvider>
-);
+export default App;
+```
+
+This was the simplest example of a connection. In order for YFM markup to work, you need to process content on the server and receive it on the client.
+
+If your server is a separate application, then you need to install page-constructor:
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
+To process YFM in all base blocks, call the `contentTransformer` and pass the content and options there:
+
+```ts
+const express = require('express');
+const app = express();
+const {contentTransformer} = require('@gravity-ui/page-constructor/server');
+
+const content = {
+  blocks: [
+    {
+      type: 'header-block',
+      title: 'Hello world',
+      background: {color: '#f0f0f0'},
+      description:
+        '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+    },
+  ],
+};
+
+app.get('/content', (req, res) => {
+  res.send({content: contentTransformer({content, options: {lang: 'en'}})});
+});
+
+app.listen(3000);
+```
+
+On the client, add an endpoint call to receive content:
+
+```tsx
+import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+import {useEffect, useState} from 'react';
+
+const App = () => {
+  const [content, setContent] = useState();
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetch('http://localhost:3000/content').then((r) => r.json());
+      setContent(response.content);
+    })();
+  }, []);
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
+
+export default App;
 ```
 
+### Ready-made template
+
+To start a new project, you can use the [ready-made template on Next.js ](https://github.com/gravity-ui/page-constructor-website-template) which we have prepared.
+
+## Documentation
+
 ### Parameters
 
 ```typescript

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -8,9 +8,9 @@ const Image_1 = tslib_1.__importDefault(require("../Image/Image.js"));
 exports.qaIdByDefault = 'background-image';
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, qa } = props;
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa || exports.qaIdByDefault);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault, children: [(src || desktop) && ((0, jsx_runtime_1.jsx)(Image_1.default, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && (0, jsx_runtime_1.jsx)("div", { className: b('container'), children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault, children: [(src || desktop) && !hide && ((0, jsx_runtime_1.jsx)(Image_1.default, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && (0, jsx_runtime_1.jsx)("div", { className: b('container'), children: children })] }));
 };
 exports.default = BackgroundImage;
 //# sourceMappingURL=BackgroundImage.js.map

package/build/cjs/components/BackgroundImage/BackgroundImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";;;;;AAGA,gDAAmD;AACnD,sEAAmC;AAItB,QAAA,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IAC7E,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,EAAE,IAAI,qBAAa,CAAC,CAAC;IAE1D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,qBAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CACjB,uBAAC,eAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n    const {children, src, desktop, className, imageClassName, style, qa} = props;\n    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);\n\n    return (\n        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>\n            {(src || desktop) && (\n                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n            )}\n            {children && <div className={b('container')}>{children}</div>}\n        </div>\n    );\n};\n\nexport default BackgroundImage;\n"]}
+{"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";;;;;AAGA,gDAAmD;AACnD,sEAAmC;AAItB,QAAA,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IACnF,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,EAAE,IAAI,qBAAa,CAAC,CAAC;IAE1D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,qBAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAC1B,uBAAC,eAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n    const {children, src, desktop, className, imageClassName, style, hide, qa} = props;\n    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);\n\n    return (\n        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>\n            {(src || desktop) && !hide && (\n                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n            )}\n            {children && <div className={b('container')}>{children}</div>}\n        </div>\n    );\n};\n\nexport default BackgroundImage;\n"]}

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

@@ -10,9 +10,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    maxBreakpoint?: number;
-    minBreakpoint?: number;
+    breakpoint: number;
 }
-export declare const EMPTY_IMG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==";
-declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Image;

package/build/cjs/components/Image/Image.js

@@ -1,45 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EMPTY_IMG = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../constants.js");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
-const models_1 = require("../../models/index.js");
 const utils_1 = require("../../utils/index.js");
 const imageCompress_1 = require("../../utils/imageCompress.js");
 const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase.js"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
-exports.EMPTY_IMG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
-const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint, qa, }) => {
-    const media = [];
-    if (maxBreakpoint) {
-        media.push(`(max-width: ${maxBreakpoint}px)`);
-    }
-    if (minBreakpoint) {
-        media.push(`(min-width: ${minBreakpoint}px)`);
-    }
-    const mediaString = media.join(' and ');
-    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: mediaString, "data-qa": qa })] }));
-};
+const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
 const Image = (props) => {
     const projectSettings = React.useContext(projectSettingsContext_1.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, containerClassName, qa, fetchPriority, loading, } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
-    const hideDevices = typeof hide === 'boolean' || !hide
-        ? Object.values(models_1.Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
-        : hide;
-    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
-    const disableWebp = !src ||
-        projectSettings.disableCompress ||
+    if (!src) {
+        return null;
+    }
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
+    const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
         !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
-    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile || exports.EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet || exports.EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: constants_1.BREAKPOINTS.md, minBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: exports.EMPTY_IMG, disableWebp: disableWebp, minBreakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
+    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [mobile && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
 };
 exports.default = Image;
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"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 {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    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {(mobile || hideDevices.mobile) && (\n                <DeviceSpecificFragment\n                    src={mobile || EMPTY_IMG}\n                    disableWebp={disableWebp}\n                    maxBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {(tablet || hideDevices.tablet) && (\n                <DeviceSpecificFragment\n                    src={tablet || EMPTY_IMG}\n                    disableWebp={disableWebp}\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={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 {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    breakpoint: number;\n}\n\nconst checkWebP = (src: string) => {\n    return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nconst DeviceSpecificFragment = ({\n    disableWebp,\n    src,\n    breakpoint,\n    qa,\n}: DeviceSpecificFragmentProps) => (\n    <React.Fragment>\n        {!disableWebp && (\n            <source\n                srcSet={checkWebP(src)}\n                type=\"image/webp\"\n                media={`(max-width: ${breakpoint}px)`}\n                data-qa={`${qa}-compressed`}\n            />\n        )}\n        <source srcSet={src} media={`(max-width: ${breakpoint}px)`} data-qa={qa} />\n    </React.Fragment>\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    } = props;\n    const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n    const src = imageSrc || desktop;\n\n    if (!src) {\n        return null;\n    }\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'mobile-webp-source',\n        'mobile-source',\n        'tablet-webp-source',\n        'tablet-source',\n        'desktop-source-compressed',\n    );\n\n    const disableWebp =\n        projectSettings.disableCompress ||\n        disableCompress ||\n        !isCompressible(src) ||\n        imgLoadingError;\n\n    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {mobile && (\n                <DeviceSpecificFragment\n                    src={mobile}\n                    disableWebp={disableWebp}\n                    breakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {tablet && (\n                <DeviceSpecificFragment\n                    src={tablet}\n                    disableWebp={disableWebp}\n                    breakpoint={BREAKPOINTS.md}\n                    qa={qaAttributes.tabletSource}\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"]}

package/build/cjs/models/constructor-items/common.d.ts

@@ -100,12 +100,7 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export declare enum Device {
-    Desktop = "desktop",
-    Mobile = "mobile",
-    Tablet = "tablet"
-}
-export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'>, ImageDevicesVisibleProps {
+export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
     alt?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
@@ -114,18 +109,16 @@ export interface ImageObjectProps extends ImageInfoProps {
     src: string;
 }
 export interface ImageDeviceProps extends ImageInfoProps {
-    [Device.Desktop]: string;
-    [Device.Mobile]: string;
-    [Device.Tablet]?: string;
-}
-export interface ImageDevicesVisibleProps {
-    hide?: boolean | Partial<Record<Device, boolean>>;
+    desktop: string;
+    mobile: string;
+    tablet?: string;
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps, ImageDevicesVisibleProps {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: React.CSSProperties;
     imageClassName?: string;
+    hide?: boolean;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Device = exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -56,11 +56,4 @@ var QuoteType;
     QuoteType["Chevron"] = "chevron";
     QuoteType["EnglishDouble"] = "english-double";
 })(QuoteType || (exports.QuoteType = QuoteType = {}));
-// images
-var Device;
-(function (Device) {
-    Device["Desktop"] = "desktop";
-    Device["Mobile"] = "mobile";
-    Device["Tablet"] = "tablet";
-})(Device || (exports.Device = Device = {}));
 //# sourceMappingURL=common.js.map

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

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

package/build/cjs/text-transform/utils.js

@@ -74,8 +74,11 @@ function typografToHTML(text, lang, allowedTags = exports.DEFAULT_ALLOWED_TAGS)
 function typografToText(text, lang) {
     return text && sanitizeHtml(typograf(text, lang));
 }
+const DEFAULT_MARKDOWN_OPTIONS = {
+    useCommonAnchorButtons: true,
+};
 const transformMarkdown = (input, options) => {
-    const { result } = (0, transform_1.default)(input ?? '', options);
+    const { result } = (0, transform_1.default)(input ?? '', { ...DEFAULT_MARKDOWN_OPTIONS, ...options });
     return result;
 };
 exports.transformMarkdown = transformMarkdown;

package/build/cjs/text-transform/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"../../../src","sources":["text-transform/utils.ts"],"names":[],"mappings":";;;AA4CA,4CAIC;AASD,4BAcC;AAED,oCAEC;AAED,wCAEC;AAED,wCAEC;AAOD,sCAYC;AASD,wCAqBC;;AApID,4EAAkE;AAClE,0EAAqC;AACrC,gEAAgD;AAMhD,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,8BAAa,CAAA;IACb,8BAAa,CAAA;AACjB,CAAC,EAHW,aAAa,6BAAb,aAAa,QAGxB;AAMY,QAAA,oBAAoB,GAAG;IAChC,IAAI;IACJ,GAAG;IACH,GAAG;IACH,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;CACP,CAAC;AACW,QAAA,cAAc,GAAG;IAC1B,OAAO,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;IACtE,QAAQ,EAAE;QACN,mBAAmB;QACnB,uBAAuB;QACvB,yBAAyB;QACzB,6BAA6B;KAChC;CACJ,CAAC;AACW,QAAA,oBAAoB,GAAsB;IACnD,WAAW,EAAE,EAAE;IACf,iBAAiB,EAAE,EAAE;CACxB,CAAC;AAEF,SAAgB,gBAAgB,CAAC,OAAyB;IACtD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACvB,kBAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,WAAW,CAAC,EAAY;IAC7B,MAAM,EAAC,QAAQ,EAAE,OAAO,EAAC,GAAG,sBAAc,CAAC;IAE3C,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,SAAgB,QAAQ,CAAC,IAAY,EAAE,OAAa,IAAI;IACpD,MAAM,YAAY,GAAG;QACjB,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;QACnB,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;KACtB,CAAC;IAEF,MAAM,EAAE,GAAG,IAAI,kBAAQ,CAAC;QACpB,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI;QAClC,UAAU,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC;KAC7B,CAAC,CAAC;IAEH,WAAW,CAAC,EAAE,CAAC,CAAC;IAEhB,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAgB,YAAY,CAAC,IAAY,EAAE,OAAO,GAAG,4BAAoB;IACrE,OAAO,IAAI,IAAI,IAAA,uBAAQ,EAAC,IAAI,EAAE,OAAO,IAAI,4BAAoB,CAAC,CAAC;AACnE,CAAC;AAED,SAAgB,cAAc,CAAC,IAAY,EAAE,IAAU,EAAE,WAAW,GAAG,4BAAoB;IACvF,OAAO,IAAI,IAAI,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,EAAC,WAAW,EAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACrE,CAAC;AAED,SAAgB,cAAc,CAAC,IAAY,EAAE,IAAU;IACnD,OAAO,IAAI,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AAEM,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,OAAyB,EAAoB,EAAE;IAC5F,MAAM,EAAC,MAAM,EAAC,GAAG,IAAA,mBAAY,EAAC,KAAK,IAAI,EAAE,EAAE,OAAO,CAAC,CAAC;IACpD,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAHW,QAAA,iBAAiB,qBAG5B;AAEF,SAAgB,aAAa,CACzB,KAAa,EACb,EAAC,IAAI,EAAE,GAAG,OAAO,EAAmB;IAEpC,MAAM,MAAM,GAAG,IAAA,yBAAiB,EAAC,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,OAAO,EAAC,CAAC,CAAC;IAC5D,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC;IAE7B,OAAO;QACH,GAAG,MAAM;QACT,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;QAC1B,KAAK,EAAE,KAAK,IAAI,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC;KACxC,CAAC;AACN,CAAC;AASD,SAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,IAAI,GAAG,IAAI,EACX,aAAa,GAAG,aAAa,CAAC,IAAI,GACf;IACnB,MAAM,gBAAgB,GAAG;QACrB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,cAAc;KACvB,CAAC;IAEF,MAAM,WAAW,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAEpD,MAAM,CAAC,OAAO,CAAC,CAAC,SAAiB,EAAE,EAAE;QACjC,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;YACpB,sGAAsG;YACtG,MAAM,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["import transformYFM, {Options, Output} from '@diplodoc/transform';\nimport sanitize from 'sanitize-html';\nimport Typograf, {TypografRule} from 'typograf';\n\nimport {Lang} from './types';\n\ntype AddRuleOptions = TypografRule;\n\nexport enum TransformType {\n    Text = 'text',\n    Html = 'html',\n}\n\ninterface TransformOptions extends Options {\n    lang: Lang;\n}\n\nexport const DEFAULT_ALLOWED_TAGS = [\n    'br',\n    'b',\n    'i',\n    'strong',\n    'em',\n    'sup',\n    'sub',\n    'a',\n    'ul',\n    'ol',\n    'li',\n];\nexport const typografConfig = {\n    enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],\n    disabled: [\n        'common/symbols/cf',\n        'ru/other/phone-number',\n        'common/space/afterColon',\n        'common/space/afterSemicolon',\n    ],\n};\nexport const sanitizeStripOptions: sanitize.IOptions = {\n    allowedTags: [],\n    allowedAttributes: {},\n};\n\nexport function addTypografRules(options: AddRuleOptions[]) {\n    options.forEach((option) => {\n        Typograf.addRule(option);\n    });\n}\n\nfunction enableRules(tp: Typograf) {\n    const {disabled, enabled} = typografConfig;\n\n    enabled.forEach((rule) => tp.enableRule(rule));\n    disabled.forEach((rule) => tp.disableRule(rule));\n}\n\nexport function typograf(text: string, lang: Lang = 'ru') {\n    const localeByLang = {\n        ru: ['ru', 'en-US'],\n        en: ['en-US', 'ru'],\n    };\n\n    const tp = new Typograf({\n        locale: localeByLang[lang] || lang,\n        htmlEntity: {type: 'name'},\n    });\n\n    enableRules(tp);\n\n    return tp.execute(text);\n}\n\nexport function sanitizeHtml(html: string, options = sanitizeStripOptions) {\n    return html && sanitize(html, options || sanitizeStripOptions);\n}\n\nexport function typografToHTML(text: string, lang: Lang, allowedTags = DEFAULT_ALLOWED_TAGS) {\n    return text && typograf(sanitizeHtml(text, {allowedTags}), lang);\n}\n\nexport function typografToText(text: string, lang: Lang) {\n    return text && sanitizeHtml(typograf(text, lang));\n}\n\nexport const transformMarkdown = (input: string, options: TransformOptions): Output['result'] => {\n    const {result} = transformYFM(input ?? '', options);\n    return result;\n};\n\nexport function fullTransform(\n    input: string,\n    {lang, ...options}: TransformOptions,\n): Output['result'] {\n    const result = transformMarkdown(input, {lang, ...options});\n    const {html, title} = result;\n\n    return {\n        ...result,\n        html: typograf(html, lang),\n        title: title && typograf(title, lang),\n    };\n}\n\nexport interface TypografEntityParams {\n    entity: Record<string, string>;\n    fields: string[];\n    lang: Lang;\n    transformType: TransformType;\n}\n\nexport function typografEntity({\n    entity,\n    fields,\n    lang = 'ru',\n    transformType = TransformType.Text,\n}: TypografEntityParams) {\n    const transformTypeMap = {\n        text: typografToText,\n        html: typografToHTML,\n    };\n\n    const transformer = transformTypeMap[transformType];\n\n    fields.forEach((fieldName: string) => {\n        if (entity[fieldName]) {\n            // eslint-disable-next-line no-param-reassign, no-not-accumulator-reassign/no-not-accumulator-reassign\n            entity[fieldName] = transformer(entity[fieldName], lang);\n        }\n    });\n\n    return entity;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"../../../src","sources":["text-transform/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import transformYFM, {Options, Output} from '@diplodoc/transform';\nimport sanitize from 'sanitize-html';\nimport Typograf, {TypografRule} from 'typograf';\n\nimport {Lang} from './types';\n\ntype AddRuleOptions = TypografRule;\n\nexport enum TransformType {\n    Text = 'text',\n    Html = 'html',\n}\n\ninterface TransformOptions extends Options {\n    lang: Lang;\n}\n\nexport const DEFAULT_ALLOWED_TAGS = [\n    'br',\n    'b',\n    'i',\n    'strong',\n    'em',\n    'sup',\n    'sub',\n    'a',\n    'ul',\n    'ol',\n    'li',\n];\nexport const typografConfig = {\n    enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],\n    disabled: [\n        'common/symbols/cf',\n        'ru/other/phone-number',\n        'common/space/afterColon',\n        'common/space/afterSemicolon',\n    ],\n};\nexport const sanitizeStripOptions: sanitize.IOptions = {\n    allowedTags: [],\n    allowedAttributes: {},\n};\n\nexport function addTypografRules(options: AddRuleOptions[]) {\n    options.forEach((option) => {\n        Typograf.addRule(option);\n    });\n}\n\nfunction enableRules(tp: Typograf) {\n    const {disabled, enabled} = typografConfig;\n\n    enabled.forEach((rule) => tp.enableRule(rule));\n    disabled.forEach((rule) => tp.disableRule(rule));\n}\n\nexport function typograf(text: string, lang: Lang = 'ru') {\n    const localeByLang = {\n        ru: ['ru', 'en-US'],\n        en: ['en-US', 'ru'],\n    };\n\n    const tp = new Typograf({\n        locale: localeByLang[lang] || lang,\n        htmlEntity: {type: 'name'},\n    });\n\n    enableRules(tp);\n\n    return tp.execute(text);\n}\n\nexport function sanitizeHtml(html: string, options = sanitizeStripOptions) {\n    return html && sanitize(html, options || sanitizeStripOptions);\n}\n\nexport function typografToHTML(text: string, lang: Lang, allowedTags = DEFAULT_ALLOWED_TAGS) {\n    return text && typograf(sanitizeHtml(text, {allowedTags}), lang);\n}\n\nexport function typografToText(text: string, lang: Lang) {\n    return text && sanitizeHtml(typograf(text, lang));\n}\n\nconst DEFAULT_MARKDOWN_OPTIONS: Partial<TransformOptions> = {\n    useCommonAnchorButtons: true,\n};\n\nexport const transformMarkdown = (input: string, options: TransformOptions): Output['result'] => {\n    const {result} = transformYFM(input ?? '', {...DEFAULT_MARKDOWN_OPTIONS, ...options});\n    return result;\n};\n\nexport function fullTransform(\n    input: string,\n    {lang, ...options}: TransformOptions,\n): Output['result'] {\n    const result = transformMarkdown(input, {lang, ...options});\n    const {html, title} = result;\n\n    return {\n        ...result,\n        html: typograf(html, lang),\n        title: title && typograf(title, lang),\n    };\n}\n\nexport interface TypografEntityParams {\n    entity: Record<string, string>;\n    fields: string[];\n    lang: Lang;\n    transformType: TransformType;\n}\n\nexport function typografEntity({\n    entity,\n    fields,\n    lang = 'ru',\n    transformType = TransformType.Text,\n}: TypografEntityParams) {\n    const transformTypeMap = {\n        text: typografToText,\n        html: typografToHTML,\n    };\n\n    const transformer = transformTypeMap[transformType];\n\n    fields.forEach((fieldName: string) => {\n        if (entity[fieldName]) {\n            // eslint-disable-next-line no-param-reassign, no-not-accumulator-reassign/no-not-accumulator-reassign\n            entity[fieldName] = transformer(entity[fieldName], lang);\n        }\n    });\n\n    return entity;\n}\n"]}

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -5,9 +5,9 @@ import './BackgroundImage.css';
 export const qaIdByDefault = 'background-image';
 const b = block('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, qa } = props;
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
     const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
-    return (_jsxs("div", { className: b(null, className), style: style, "data-qa": qa || qaIdByDefault, children: [(src || desktop) && (_jsx(Image, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && _jsx("div", { className: b('container'), children: children })] }));
+    return (_jsxs("div", { className: b(null, className), style: style, "data-qa": qa || qaIdByDefault, children: [(src || desktop) && !hide && (_jsx(Image, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && _jsx("div", { className: b('container'), children: children })] }));
 };
 export default BackgroundImage;
 //# sourceMappingURL=BackgroundImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,KAAK,0BAAuB;AAEnC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,KAAK,CAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IAC7E,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC;IAE1D,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,aAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CACjB,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n    const {children, src, desktop, className, imageClassName, style, qa} = props;\n    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);\n\n    return (\n        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>\n            {(src || desktop) && (\n                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n            )}\n            {children && <div className={b('container')}>{children}</div>}\n        </div>\n    );\n};\n\nexport default BackgroundImage;\n"]}
+{"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,KAAK,0BAAuB;AAEnC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,KAAK,CAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IACnF,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC;IAE1D,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,aAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAC1B,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n    const {children, src, desktop, className, imageClassName, style, hide, qa} = props;\n    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);\n\n    return (\n        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>\n            {(src || desktop) && !hide && (\n                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n            )}\n            {children && <div className={b('container')}>{children}</div>}\n        </div>\n    );\n};\n\nexport default BackgroundImage;\n"]}

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

@@ -10,9 +10,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    maxBreakpoint?: number;
-    minBreakpoint?: number;
+    breakpoint: number;
 }
-export declare const EMPTY_IMG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==";
-declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Image;

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

@@ -2,40 +2,27 @@ 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 { Device } from "../../models/index.js";
 import { getQaAttrubutes } from "../../utils/index.js";
 import { isCompressible } from "../../utils/imageCompress.js";
 import ImageBase from "../ImageBase/ImageBase.js";
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
-export const EMPTY_IMG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
-const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint, qa, }) => {
-    const media = [];
-    if (maxBreakpoint) {
-        media.push(`(max-width: ${maxBreakpoint}px)`);
-    }
-    if (minBreakpoint) {
-        media.push(`(min-width: ${minBreakpoint}px)`);
-    }
-    const mediaString = media.join(' and ');
-    return (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: mediaString, "data-qa": qa })] }));
-};
+const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
 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, containerClassName, qa, fetchPriority, loading, } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
-    const hideDevices = typeof hide === 'boolean' || !hide
-        ? Object.values(Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
-        : hide;
-    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
-    const disableWebp = !src ||
-        projectSettings.disableCompress ||
+    if (!src) {
+        return null;
+    }
+    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
+    const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: disableWebp, 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 && (_jsx(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && (_jsx(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })), 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 })] }));
 };
 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":"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","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    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {(mobile || hideDevices.mobile) && (\n                <DeviceSpecificFragment\n                    src={mobile || EMPTY_IMG}\n                    disableWebp={disableWebp}\n                    maxBreakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {(tablet || hideDevices.tablet) && (\n                <DeviceSpecificFragment\n                    src={tablet || EMPTY_IMG}\n                    disableWebp={disableWebp}\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={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":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAC5C,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;AAE5E,OAAO,EAAC,eAAe,EAAC,6BAAoB;AAC5C,OAAO,EAAC,cAAc,EAAC,qCAAkC;AACzD,OAAO,SAAS,kCAA+B;AAgB/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,sBAAsB,GAAG,CAAC,EAC5B,WAAW,EACX,GAAG,EACH,UAAU,EACV,EAAE,GACwB,EAAE,EAAE,CAAC,CAC/B,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,iBACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,eAAe,UAAU,KAAK,aAC5B,GAAG,EAAE,aAAa,GAC7B,CACL,EACD,iBAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,UAAU,KAAK,aAAW,EAAE,GAAI,IAC9D,CACpB,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,GACV,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,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,YAAY,GAAG,eAAe,CAChC,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,2BAA2B,CAC9B,CAAC;IAEF,MAAM,WAAW,GACb,eAAe,CAAC,eAAe;QAC/B,eAAe;QACf,CAAC,cAAc,CAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,OAAO,CACH,mBAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,MAAM,IAAI,CACP,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,WAAW,CAAC,EAAE,EAC1B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,MAAM,IAAI,CACP,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,WAAW,CAAC,EAAE,EAC1B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,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 {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    breakpoint: number;\n}\n\nconst checkWebP = (src: string) => {\n    return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nconst DeviceSpecificFragment = ({\n    disableWebp,\n    src,\n    breakpoint,\n    qa,\n}: DeviceSpecificFragmentProps) => (\n    <React.Fragment>\n        {!disableWebp && (\n            <source\n                srcSet={checkWebP(src)}\n                type=\"image/webp\"\n                media={`(max-width: ${breakpoint}px)`}\n                data-qa={`${qa}-compressed`}\n            />\n        )}\n        <source srcSet={src} media={`(max-width: ${breakpoint}px)`} data-qa={qa} />\n    </React.Fragment>\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    } = props;\n    const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n    const src = imageSrc || desktop;\n\n    if (!src) {\n        return null;\n    }\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'mobile-webp-source',\n        'mobile-source',\n        'tablet-webp-source',\n        'tablet-source',\n        'desktop-source-compressed',\n    );\n\n    const disableWebp =\n        projectSettings.disableCompress ||\n        disableCompress ||\n        !isCompressible(src) ||\n        imgLoadingError;\n\n    return (\n        <picture className={containerClassName} data-qa={qa}>\n            {mobile && (\n                <DeviceSpecificFragment\n                    src={mobile}\n                    disableWebp={disableWebp}\n                    breakpoint={BREAKPOINTS.sm}\n                    qa={qaAttributes.mobileSource}\n                />\n            )}\n            {tablet && (\n                <DeviceSpecificFragment\n                    src={tablet}\n                    disableWebp={disableWebp}\n                    breakpoint={BREAKPOINTS.md}\n                    qa={qaAttributes.tabletSource}\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"]}

package/build/esm/models/constructor-items/common.d.ts

@@ -100,12 +100,7 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export declare enum Device {
-    Desktop = "desktop",
-    Mobile = "mobile",
-    Tablet = "tablet"
-}
-export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'>, ImageDevicesVisibleProps {
+export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
     alt?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
@@ -114,18 +109,16 @@ export interface ImageObjectProps extends ImageInfoProps {
     src: string;
 }
 export interface ImageDeviceProps extends ImageInfoProps {
-    [Device.Desktop]: string;
-    [Device.Mobile]: string;
-    [Device.Tablet]?: string;
-}
-export interface ImageDevicesVisibleProps {
-    hide?: boolean | Partial<Record<Device, boolean>>;
+    desktop: string;
+    mobile: string;
+    tablet?: string;
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps, ImageDevicesVisibleProps {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: React.CSSProperties;
     imageClassName?: string;
+    hide?: boolean;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/build/esm/models/constructor-items/common.js

@@ -53,11 +53,4 @@ export var QuoteType;
     QuoteType["Chevron"] = "chevron";
     QuoteType["EnglishDouble"] = "english-double";
 })(QuoteType || (QuoteType = {}));
-// images
-export var Device;
-(function (Device) {
-    Device["Desktop"] = "desktop";
-    Device["Mobile"] = "mobile";
-    Device["Tablet"] = "tablet";
-})(Device || (Device = {}));
 //# sourceMappingURL=common.js.map

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

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

package/build/esm/text-transform/utils.js

@@ -63,8 +63,11 @@ export function typografToHTML(text, lang, allowedTags = DEFAULT_ALLOWED_TAGS) {
 export function typografToText(text, lang) {
     return text && sanitizeHtml(typograf(text, lang));
 }
+const DEFAULT_MARKDOWN_OPTIONS = {
+    useCommonAnchorButtons: true,
+};
 export const transformMarkdown = (input, options) => {
-    const { result } = transformYFM(input ?? '', options);
+    const { result } = transformYFM(input ?? '', { ...DEFAULT_MARKDOWN_OPTIONS, ...options });
     return result;
 };
 export function fullTransform(input, { lang, ...options }) {

package/build/esm/text-transform/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"../../../src","sources":["text-transform/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import transformYFM, {Options, Output} from '@diplodoc/transform';\nimport sanitize from 'sanitize-html';\nimport Typograf, {TypografRule} from 'typograf';\n\nimport {Lang} from './types';\n\ntype AddRuleOptions = TypografRule;\n\nexport enum TransformType {\n    Text = 'text',\n    Html = 'html',\n}\n\ninterface TransformOptions extends Options {\n    lang: Lang;\n}\n\nexport const DEFAULT_ALLOWED_TAGS = [\n    'br',\n    'b',\n    'i',\n    'strong',\n    'em',\n    'sup',\n    'sub',\n    'a',\n    'ul',\n    'ol',\n    'li',\n];\nexport const typografConfig = {\n    enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],\n    disabled: [\n        'common/symbols/cf',\n        'ru/other/phone-number',\n        'common/space/afterColon',\n        'common/space/afterSemicolon',\n    ],\n};\nexport const sanitizeStripOptions: sanitize.IOptions = {\n    allowedTags: [],\n    allowedAttributes: {},\n};\n\nexport function addTypografRules(options: AddRuleOptions[]) {\n    options.forEach((option) => {\n        Typograf.addRule(option);\n    });\n}\n\nfunction enableRules(tp: Typograf) {\n    const {disabled, enabled} = typografConfig;\n\n    enabled.forEach((rule) => tp.enableRule(rule));\n    disabled.forEach((rule) => tp.disableRule(rule));\n}\n\nexport function typograf(text: string, lang: Lang = 'ru') {\n    const localeByLang = {\n        ru: ['ru', 'en-US'],\n        en: ['en-US', 'ru'],\n    };\n\n    const tp = new Typograf({\n        locale: localeByLang[lang] || lang,\n        htmlEntity: {type: 'name'},\n    });\n\n    enableRules(tp);\n\n    return tp.execute(text);\n}\n\nexport function sanitizeHtml(html: string, options = sanitizeStripOptions) {\n    return html && sanitize(html, options || sanitizeStripOptions);\n}\n\nexport function typografToHTML(text: string, lang: Lang, allowedTags = DEFAULT_ALLOWED_TAGS) {\n    return text && typograf(sanitizeHtml(text, {allowedTags}), lang);\n}\n\nexport function typografToText(text: string, lang: Lang) {\n    return text && sanitizeHtml(typograf(text, lang));\n}\n\nexport const transformMarkdown = (input: string, options: TransformOptions): Output['result'] => {\n    const {result} = transformYFM(input ?? '', options);\n    return result;\n};\n\nexport function fullTransform(\n    input: string,\n    {lang, ...options}: TransformOptions,\n): Output['result'] {\n    const result = transformMarkdown(input, {lang, ...options});\n    const {html, title} = result;\n\n    return {\n        ...result,\n        html: typograf(html, lang),\n        title: title && typograf(title, lang),\n    };\n}\n\nexport interface TypografEntityParams {\n    entity: Record<string, string>;\n    fields: string[];\n    lang: Lang;\n    transformType: TransformType;\n}\n\nexport function typografEntity({\n    entity,\n    fields,\n    lang = 'ru',\n    transformType = TransformType.Text,\n}: TypografEntityParams) {\n    const transformTypeMap = {\n        text: typografToText,\n        html: typografToHTML,\n    };\n\n    const transformer = transformTypeMap[transformType];\n\n    fields.forEach((fieldName: string) => {\n        if (entity[fieldName]) {\n            // eslint-disable-next-line no-param-reassign, no-not-accumulator-reassign/no-not-accumulator-reassign\n            entity[fieldName] = transformer(entity[fieldName], lang);\n        }\n    });\n\n    return entity;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"../../../src","sources":["text-transform/utils.ts"],"names":[],"mappings":"AAAA,OAAO,YAA+B,MAAM,qBAAqB,CAAC;AAClE,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAwB,MAAM,UAAU,CAAC;AAMhD,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,8BAAa,CAAA;IACb,8BAAa,CAAA;AACjB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAMD,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,IAAI;IACJ,GAAG;IACH,GAAG;IACH,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;CACP,CAAC;AACF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,OAAO,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;IACtE,QAAQ,EAAE;QACN,mBAAmB;QACnB,uBAAuB;QACvB,yBAAyB;QACzB,6BAA6B;KAChC;CACJ,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAsB;IACnD,WAAW,EAAE,EAAE;IACf,iBAAiB,EAAE,EAAE;CACxB,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,OAAyB;IACtD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACvB,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,WAAW,CAAC,EAAY;IAC7B,MAAM,EAAC,QAAQ,EAAE,OAAO,EAAC,GAAG,cAAc,CAAC;IAE3C,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,OAAa,IAAI;IACpD,MAAM,YAAY,GAAG;QACjB,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;QACnB,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;KACtB,CAAC;IAEF,MAAM,EAAE,GAAG,IAAI,QAAQ,CAAC;QACpB,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI;QAClC,UAAU,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC;KAC7B,CAAC,CAAC;IAEH,WAAW,CAAC,EAAE,CAAC,CAAC;IAEhB,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,OAAO,GAAG,oBAAoB;IACrE,OAAO,IAAI,IAAI,QAAQ,CAAC,IAAI,EAAE,OAAO,IAAI,oBAAoB,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,IAAU,EAAE,WAAW,GAAG,oBAAoB;IACvF,OAAO,IAAI,IAAI,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,EAAC,WAAW,EAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACrE,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,IAAU;IACnD,OAAO,IAAI,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,wBAAwB,GAA8B;IACxD,sBAAsB,EAAE,IAAI;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,OAAyB,EAAoB,EAAE;IAC5F,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,KAAK,IAAI,EAAE,EAAE,EAAC,GAAG,wBAAwB,EAAE,GAAG,OAAO,EAAC,CAAC,CAAC;IACtF,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,aAAa,CACzB,KAAa,EACb,EAAC,IAAI,EAAE,GAAG,OAAO,EAAmB;IAEpC,MAAM,MAAM,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,OAAO,EAAC,CAAC,CAAC;IAC5D,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC;IAE7B,OAAO;QACH,GAAG,MAAM;QACT,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;QAC1B,KAAK,EAAE,KAAK,IAAI,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC;KACxC,CAAC;AACN,CAAC;AASD,MAAM,UAAU,cAAc,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,IAAI,GAAG,IAAI,EACX,aAAa,GAAG,aAAa,CAAC,IAAI,GACf;IACnB,MAAM,gBAAgB,GAAG;QACrB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,cAAc;KACvB,CAAC;IAEF,MAAM,WAAW,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAEpD,MAAM,CAAC,OAAO,CAAC,CAAC,SAAiB,EAAE,EAAE;QACjC,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;YACpB,sGAAsG;YACtG,MAAM,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["import transformYFM, {Options, Output} from '@diplodoc/transform';\nimport sanitize from 'sanitize-html';\nimport Typograf, {TypografRule} from 'typograf';\n\nimport {Lang} from './types';\n\ntype AddRuleOptions = TypografRule;\n\nexport enum TransformType {\n    Text = 'text',\n    Html = 'html',\n}\n\ninterface TransformOptions extends Options {\n    lang: Lang;\n}\n\nexport const DEFAULT_ALLOWED_TAGS = [\n    'br',\n    'b',\n    'i',\n    'strong',\n    'em',\n    'sup',\n    'sub',\n    'a',\n    'ul',\n    'ol',\n    'li',\n];\nexport const typografConfig = {\n    enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],\n    disabled: [\n        'common/symbols/cf',\n        'ru/other/phone-number',\n        'common/space/afterColon',\n        'common/space/afterSemicolon',\n    ],\n};\nexport const sanitizeStripOptions: sanitize.IOptions = {\n    allowedTags: [],\n    allowedAttributes: {},\n};\n\nexport function addTypografRules(options: AddRuleOptions[]) {\n    options.forEach((option) => {\n        Typograf.addRule(option);\n    });\n}\n\nfunction enableRules(tp: Typograf) {\n    const {disabled, enabled} = typografConfig;\n\n    enabled.forEach((rule) => tp.enableRule(rule));\n    disabled.forEach((rule) => tp.disableRule(rule));\n}\n\nexport function typograf(text: string, lang: Lang = 'ru') {\n    const localeByLang = {\n        ru: ['ru', 'en-US'],\n        en: ['en-US', 'ru'],\n    };\n\n    const tp = new Typograf({\n        locale: localeByLang[lang] || lang,\n        htmlEntity: {type: 'name'},\n    });\n\n    enableRules(tp);\n\n    return tp.execute(text);\n}\n\nexport function sanitizeHtml(html: string, options = sanitizeStripOptions) {\n    return html && sanitize(html, options || sanitizeStripOptions);\n}\n\nexport function typografToHTML(text: string, lang: Lang, allowedTags = DEFAULT_ALLOWED_TAGS) {\n    return text && typograf(sanitizeHtml(text, {allowedTags}), lang);\n}\n\nexport function typografToText(text: string, lang: Lang) {\n    return text && sanitizeHtml(typograf(text, lang));\n}\n\nconst DEFAULT_MARKDOWN_OPTIONS: Partial<TransformOptions> = {\n    useCommonAnchorButtons: true,\n};\n\nexport const transformMarkdown = (input: string, options: TransformOptions): Output['result'] => {\n    const {result} = transformYFM(input ?? '', {...DEFAULT_MARKDOWN_OPTIONS, ...options});\n    return result;\n};\n\nexport function fullTransform(\n    input: string,\n    {lang, ...options}: TransformOptions,\n): Output['result'] {\n    const result = transformMarkdown(input, {lang, ...options});\n    const {html, title} = result;\n\n    return {\n        ...result,\n        html: typograf(html, lang),\n        title: title && typograf(title, lang),\n    };\n}\n\nexport interface TypografEntityParams {\n    entity: Record<string, string>;\n    fields: string[];\n    lang: Lang;\n    transformType: TransformType;\n}\n\nexport function typografEntity({\n    entity,\n    fields,\n    lang = 'ru',\n    transformType = TransformType.Text,\n}: TypografEntityParams) {\n    const transformTypeMap = {\n        text: typografToText,\n        html: typografToHTML,\n    };\n\n    const transformer = transformTypeMap[transformType];\n\n    fields.forEach((fieldName: string) => {\n        if (entity[fieldName]) {\n            // eslint-disable-next-line no-param-reassign, no-not-accumulator-reassign/no-not-accumulator-reassign\n            entity[fieldName] = transformer(entity[fieldName], lang);\n        }\n    });\n\n    return entity;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "6.8.2-alpha.0",
+  "version": "6.9.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "type": "commonjs",
@@ -133,7 +133,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@diplodoc/transform": "^4.10.8",
+    "@diplodoc/transform": "^4.57.1",
     "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/gulp-utils": "^1.0.3",
     "@gravity-ui/icons": "^2.11.0",

package/server/models/constructor-items/common.d.ts

@@ -100,12 +100,7 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export declare enum Device {
-    Desktop = "desktop",
-    Mobile = "mobile",
-    Tablet = "tablet"
-}
-export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'>, ImageDevicesVisibleProps {
+export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
     alt?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
@@ -114,18 +109,16 @@ export interface ImageObjectProps extends ImageInfoProps {
     src: string;
 }
 export interface ImageDeviceProps extends ImageInfoProps {
-    [Device.Desktop]: string;
-    [Device.Mobile]: string;
-    [Device.Tablet]?: string;
-}
-export interface ImageDevicesVisibleProps {
-    hide?: boolean | Partial<Record<Device, boolean>>;
+    desktop: string;
+    mobile: string;
+    tablet?: string;
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps, ImageDevicesVisibleProps {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: React.CSSProperties;
     imageClassName?: string;
+    hide?: boolean;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/server/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Device = exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -56,10 +56,3 @@ var QuoteType;
     QuoteType["Chevron"] = "chevron";
     QuoteType["EnglishDouble"] = "english-double";
 })(QuoteType || (exports.QuoteType = QuoteType = {}));
-// images
-var Device;
-(function (Device) {
-    Device["Desktop"] = "desktop";
-    Device["Mobile"] = "mobile";
-    Device["Tablet"] = "tablet";
-})(Device || (exports.Device = Device = {}));

package/server/text-transform/utils.js

@@ -87,8 +87,11 @@ function typografToHTML(text, lang, allowedTags = exports.DEFAULT_ALLOWED_TAGS)
 function typografToText(text, lang) {
     return text && sanitizeHtml(typograf(text, lang));
 }
+const DEFAULT_MARKDOWN_OPTIONS = {
+    useCommonAnchorButtons: true,
+};
 const transformMarkdown = (input, options) => {
-    const { result } = (0, transform_1.default)(input !== null && input !== void 0 ? input : '', options);
+    const { result } = (0, transform_1.default)(input !== null && input !== void 0 ? input : '', Object.assign(Object.assign({}, DEFAULT_MARKDOWN_OPTIONS), options));
     return result;
 };
 exports.transformMarkdown = transformMarkdown;

package/widget/index.js

@@ -1 +1 @@
-export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[6007],{56007:function(_,t,e){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var e=t(_),Y={name:\"zh\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"周日_周一_周二_周三_周四_周五_周六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"周\":_+\"日\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日Ah点mm分\",LLLL:\"YYYY年M月D日ddddAh点mm分\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s后\",past:\"%s前\",s:\"几秒\",m:\"1 分钟\",mm:\"%d 分钟\",h:\"1 小时\",hh:\"%d 小时\",d:\"1 天\",dd:\"%d 天\",M:\"1 个月\",MM:\"%d 个月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var e=100*_+t;return e<600?\"凌晨\":e<900?\"早上\":e<1100?\"上午\":e<1300?\"中午\":e<1800?\"下午\":\"晚上\"}};return e.default.locale(Y,null,!0),Y}(e(74353))}}]);";
+export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[1349],{31349:function(_,t,Y){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var Y=t(_),e={name:\"zh-tw\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"週日_週一_週二_週三_週四_週五_週六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"週\":_+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日dddd HH:mm\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s內\",past:\"%s前\",s:\"幾秒\",m:\"1 分鐘\",mm:\"%d 分鐘\",h:\"1 小時\",hh:\"%d 小時\",d:\"1 天\",dd:\"%d 天\",M:\"1 個月\",MM:\"%d 個月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var Y=100*_+t;return Y<600?\"凌晨\":Y<900?\"早上\":Y<1100?\"上午\":Y<1300?\"中午\":Y<1800?\"下午\":\"晚上\"}};return Y.default.locale(e,null,!0),e}(Y(74353))}}]);";