npm - @gravity-ui/page-constructor - Versions diffs - 7.0.0-alpha.6 → 7.0.0-alpha.8 - Mend

@gravity-ui/page-constructor 7.0.0-alpha.6 → 7.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/build/esm/blocks/CardLayout/schema.d.ts CHANGED Viewed

@@ -52,6 +52,25 @@ export declare const CardLayoutProps: {
                         type: string;
                         enum: string[];
                     };
+                    hide: {
+                        oneOf: ({
+                            type: string;
+                            properties?: undefined;
+                        } | {
+                            type: string;
+                            properties: {
+                                mobile: {
+                                    type: string;
+                                };
+                                tablet: {
+                                    type: string;
+                                };
+                                desktop: {
+                                    type: string;
+                                };
+                            };
+                        })[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -89,6 +108,25 @@ export declare const CardLayoutProps: {
                         type: string;
                         enum: string[];
                     };
+                    hide: {
+                        oneOf: ({
+                            type: string;
+                            properties?: undefined;
+                        } | {
+                            type: string;
+                            properties: {
+                                mobile: {
+                                    type: string;
+                                };
+                                tablet: {
+                                    type: string;
+                                };
+                                desktop: {
+                                    type: string;
+                                };
+                            };
+                        })[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -240,6 +278,25 @@ export declare const CardLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                     optionName: string;
                     type: string;
@@ -277,6 +334,25 @@ export declare const CardLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                     optionName: string;
                     type: string;

package/build/esm/blocks/ContentLayout/schema.d.ts CHANGED Viewed

@@ -50,6 +50,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                 } | {
                     optionName: string;
@@ -84,6 +103,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                 })[];
             };
@@ -256,6 +294,25 @@ export declare const ContentLayoutBlock: {
                                 type: string;
                                 enum: string[];
                             };
+                            hide: {
+                                oneOf: ({
+                                    type: string;
+                                    properties?: undefined;
+                                } | {
+                                    type: string;
+                                    properties: {
+                                        mobile: {
+                                            type: string;
+                                        };
+                                        tablet: {
+                                            type: string;
+                                        };
+                                        desktop: {
+                                            type: string;
+                                        };
+                                    };
+                                })[];
+                            };
                         };
                     } | {
                         optionName: string;
@@ -290,6 +347,25 @@ export declare const ContentLayoutBlock: {
                                 type: string;
                                 enum: string[];
                             };
+                            hide: {
+                                oneOf: ({
+                                    type: string;
+                                    properties?: undefined;
+                                } | {
+                                    type: string;
+                                    properties: {
+                                        mobile: {
+                                            type: string;
+                                        };
+                                        tablet: {
+                                            type: string;
+                                        };
+                                        desktop: {
+                                            type: string;
+                                        };
+                                    };
+                                })[];
+                            };
                         };
                     })[];
                 };

package/build/esm/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.pc-FoldableListBlockItem__title {
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title {
   margin: 0;
 }
@@ -11,45 +11,55 @@ unpredictable css rules order in build */
 .pc-FoldableListBlockItem + .pc-FoldableListBlockItem {
   padding-top: 32px;
 }
-.pc-FoldableListBlockItem__title {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--g-text-accent-font-weight);
-  position: relative;
-  display: block;
-  width: 100%;
-  padding-right: 24px;
-  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }
-.pc-FoldableListBlockItem__title:focus {
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-FoldableListBlockItem__title:focus:not(:focus-visible) {
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-FoldableListBlockItem__title a {
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-FoldableListBlockItem__title a:focus {
+.utilityfocus .pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-FoldableListBlockItem__title a:hover, .pc-FoldableListBlockItem__title a:active {
+.pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title a:hover, .pc-FoldableListBlockItem__title.pc-FoldableListBlockItem__title a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-FoldableListBlockItem__title-container {
+  margin: 0;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-right: 24px;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-FoldableListBlockItem__title-container a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-FoldableListBlockItem__title-container a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-FoldableListBlockItem__title-container a:hover, .pc-FoldableListBlockItem__title-container a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
@@ -75,4 +85,16 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   margin-top: 12px;
+}
+.pc-FoldableListBlockItem__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  width: 100%;
 }

package/build/esm/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.js CHANGED Viewed

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useActionHandlers } from '@gravity-ui/uikit';
-import { Foldable, HTML, ToggleArrow, YFMWrapper } from "../../../components/index.js";
+import { Foldable, ToggleArrow, YFMWrapper } from "../../../components/index.js";
 import Link from "../../../components/Link/Link.js";
 import { block } from "../../../utils/index.js";
 import './FoldableListBlockItem.css';
 const b = block('FoldableListBlockItem');
 export const FoldableListBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
     const { onKeyDown } = useActionHandlers(onClick);
-    return (_jsxs("div", { className: b(), itemScope: true, role: 'listitem', children: [_jsxs("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown, children: [_jsx(HTML, { children: itemTitle }), _jsx(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })] }), _jsx(Foldable, { isOpened: isOpened, children: _jsxs("div", { className: b('text'), "aria-hidden": !isOpened, children: [_jsx(YFMWrapper, { content: itemText, modifiers: {
+    return (_jsxs("div", { className: b(), itemScope: true, role: 'listitem', children: [_jsx("button", { className: b('button'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown, children: _jsx(YFMWrapper, { tagName: "h3", className: b('title-container'), contentClassName: b('title'), content: itemTitle, modifiers: {
+                        constructor: true,
+                    }, onClick: onClick, tabIndex: 0, children: _jsx(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') }) }) }), _jsx(Foldable, { isOpened: isOpened, children: _jsxs("div", { className: b('text'), "aria-hidden": !isOpened, children: [_jsx(YFMWrapper, { content: itemText, modifiers: {
                                 constructor: true,
                                 constructorListStyle: true,
                                 constructorListStyleDash: listStyle === 'dash',

package/build/esm/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FoldableListBlockItem.js","sourceRoot":"../../../../../src","sources":["blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAC,QAAQ,EAAE,~~IAAI,EAAE,~~WAAW,EAAE,UAAU,EAAC,qCAA4B;~~AAC5E~~,OAAO,IAAI,yCAAsC;AAEjD,OAAO,EAAC,KAAK,EAAC,gCAAuB;AAErC,OAAO,6BAA6B,CAAC;AAErC,MAAM,CAAC,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAClC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,OAAO,GACkB,EAAE,EAAE;IAC7B,MAAM,EAAC,SAAS,EAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,QAAC,IAAI,EAAE,UAAU,aAC3C,~~kBACI~~,SAAS,EAAE,CAAC,CAAC,~~OAAO~~,CAAC,~~EACrB~~,OAAO,EAAE,OAAO,mBACD,QAAQ,EACvB,SAAS,EAAE,SAAS,~~aAEpB~~,KAAC,IAAI,~~cAAE~~,SAAS,~~GAAQ~~,~~EACxB~~,KAAC,WAAW,IACR,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACvB,~~IACG~~,EACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,YACxB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,iBAAe,CAAC,QAAQ,aAC7C,KAAC,UAAU,IACP,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE;gCACP,WAAW,EAAE,IAAI;gCACjB,oBAAoB,EAAE,IAAI;gCAC1B,wBAAwB,EAAE,SAAS,KAAK,MAAM;6BACjD,GACH,EACD,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,IAC5E,GACC,IACT,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useActionHandlers} from '@gravity-ui/uikit';\n\nimport {Foldable, ~~HTML,~~ ToggleArrow, YFMWrapper} from '../../../components';\nimport Link from '../../../components/Link/Link';\nimport {FoldableListBlockItemProps} from '../../../models';\nimport {block} from '../../../utils';\n\nimport './FoldableListBlockItem.scss';\n\nconst b = block('FoldableListBlockItem');\n\nexport const FoldableListBlockItem = ({\n title: itemTitle,\n text: itemText,\n link,\n listStyle = 'dash',\n isOpened,\n onClick,\n}: FoldableListBlockItemProps) => {\n const {onKeyDown} = useActionHandlers(onClick);\n\n return (\n <div className={b()} itemScope role={'listitem'}>\n <button\n className={b('~~title~~')}\n onClick={onClick}\n aria-expanded={isOpened}\n onKeyDown={onKeyDown}\n >\n <~~HTML>~~{itemTitle}~~</HTML~~>\n <ToggleArrow\n open={isOpened}\n size={16}\n type={'vertical'}\n iconType=\"navigation\"\n className={b('arrow')}\n />\n </button>\n <Foldable isOpened={isOpened}>\n <div className={b('text')} aria-hidden={!isOpened}>\n <YFMWrapper\n content={itemText}\n modifiers={{\n constructor: true,\n constructorListStyle: true,\n constructorListStyleDash: listStyle === 'dash',\n }}\n />\n {link && <Link {...link} tabIndex={isOpened ? 0 : -1} className={b('link')} />}\n </div>\n </Foldable>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"FoldableListBlockItem.js","sourceRoot":"../../../../../src","sources":["blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAC,qCAA4B;AACtE,OAAO,IAAI,yCAAsC;AAEjD,OAAO,EAAC,KAAK,EAAC,gCAAuB;AAErC,OAAO,6BAA6B,CAAC;AAErC,MAAM,CAAC,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAClC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,OAAO,GACkB,EAAE,EAAE;IAC7B,MAAM,EAAC,SAAS,EAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,QAAC,IAAI,EAAE,UAAU,aAC3C,iBACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,OAAO,mBACD,QAAQ,EACvB,SAAS,EAAE,SAAS,YAEpB,KAAC,UAAU,IACP,OAAO,EAAC,IAAI,EACZ,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,EAC5B,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE;wBACP,WAAW,EAAE,IAAI;qBACpB,EACD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,YAEX,KAAC,WAAW,IACR,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACvB,GACO,GACR,EACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,YACxB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,iBAAe,CAAC,QAAQ,aAC7C,KAAC,UAAU,IACP,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE;gCACP,WAAW,EAAE,IAAI;gCACjB,oBAAoB,EAAE,IAAI;gCAC1B,wBAAwB,EAAE,SAAS,KAAK,MAAM;6BACjD,GACH,EACD,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,IAC5E,GACC,IACT,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useActionHandlers} from '@gravity-ui/uikit';\n\nimport {Foldable, ToggleArrow, YFMWrapper} from '../../../components';\nimport Link from '../../../components/Link/Link';\nimport {FoldableListBlockItemProps} from '../../../models';\nimport {block} from '../../../utils';\n\nimport './FoldableListBlockItem.scss';\n\nconst b = block('FoldableListBlockItem');\n\nexport const FoldableListBlockItem = ({\n title: itemTitle,\n text: itemText,\n link,\n listStyle = 'dash',\n isOpened,\n onClick,\n}: FoldableListBlockItemProps) => {\n const {onKeyDown} = useActionHandlers(onClick);\n\n return (\n <div className={b()} itemScope role={'listitem'}>\n <button\n className={b('button')}\n onClick={onClick}\n aria-expanded={isOpened}\n onKeyDown={onKeyDown}\n >\n <YFMWrapper\n tagName=\"h3\"\n className={b('title-container')}\n contentClassName={b('title')}\n content={itemTitle}\n modifiers={{\n constructor: true,\n }}\n onClick={onClick}\n tabIndex={0}\n >\n <ToggleArrow\n open={isOpened}\n size={16}\n type={'vertical'}\n iconType=\"navigation\"\n className={b('arrow')}\n />\n </YFMWrapper>\n </button>\n <Foldable isOpened={isOpened}>\n <div className={b('text')} aria-hidden={!isOpened}>\n <YFMWrapper\n content={itemText}\n modifiers={{\n constructor: true,\n constructorListStyle: true,\n constructorListStyleDash: listStyle === 'dash',\n }}\n />\n {link && <Link {...link} tabIndex={isOpened ? 0 : -1} className={b('link')} />}\n </div>\n </Foldable>\n </div>\n );\n};\n"]}

package/build/esm/blocks/Slider/Arrow/Arrow.css CHANGED Viewed

@@ -1,26 +1,26 @@
-.pc-slider-block-arrow__inner {
+.pc-slider-arrow__inner {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
-.pc-slider-block-arrow__inner:hover {
+.pc-slider-arrow__inner:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__inner, .pc-slider-block-arrow {
+.pc-slider-arrow__icon-wrapper, .pc-slider-arrow__inner, .pc-slider-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 @media (max-width: 576px) {
-  .pc-slider-block-arrow {
+  .pc-slider-arrow {
     display: none;
   }
 }
-.pc-slider-block-arrow__button {
+.pc-slider-arrow__button {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -31,14 +31,14 @@ unpredictable css rules order in build */
   background: none;
   cursor: pointer;
 }
-.pc-slider-block-arrow__button:focus {
+.pc-slider-arrow__button:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+.pc-slider-arrow__button:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-slider-block-arrow__inner {
+.pc-slider-arrow__inner {
   width: 42px;
   height: 42px;
   color: var(--g-color-text-secondary);
@@ -47,20 +47,20 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-block-arrow__inner_type_left .pc-slider-block-arrow__icon-wrapper {
+.pc-slider-arrow__inner_type_left .pc-slider-arrow__icon-wrapper {
   transform: rotate(180deg);
 }
-.pc-slider-block-arrow__inner:hover {
+.pc-slider-arrow__inner:hover {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
-.pc-slider-block-arrow__inner_transparent {
+.pc-slider-arrow__inner_transparent {
   background-color: transparent;
   box-shadow: none;
 }
-.pc-slider-block-arrow__inner_transparent:hover {
+.pc-slider-arrow__inner_transparent:hover {
   box-shadow: none;
 }
-.pc-slider-block-arrow__icon {
+.pc-slider-arrow__icon {
   position: relative;
 }

package/build/esm/blocks/Slider/Arrow/Arrow.js CHANGED Viewed

@@ -3,7 +3,7 @@ import ToggleArrow from "../../../components/ToggleArrow/ToggleArrow.js";
 import { block } from "../../../utils/index.js";
 import { i18n } from "../i18n/index.js";
 import './Arrow.css';
-const b = block('slider-block-arrow');
+const b = block('slider-arrow');
 const Arrow = ({ type, transparent, onClick, className, size = 16, extraProps, }) => (_jsx("div", { className: b(null, className), children: _jsx("button", { className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`), ...extraProps, children: _jsx("div", { className: b('inner', { type, transparent }), children: _jsx("span", { className: b('icon-wrapper'), children: _jsx(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }) }) }) }) }));
 export default Arrow;
 //# sourceMappingURL=Arrow.js.map

package/build/esm/blocks/Slider/Arrow/Arrow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/Slider/Arrow/Arrow.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,uDAAoD;AAEtE,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,IAAI,EAAC,yBAAgB;AAE7B,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,~~oBAAoB~~,CAAC,CAAC;~~AAYtC~~,MAAM,KAAK,GAAG,CAAC,EACX,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,GAAG,EAAE,EACT,UAAU,GACgB,EAAE,EAAE,CAAC,CAC/B,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,iBACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,OAAO,gBACJ,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,KAC7B,UAAU,YAEd,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC,YAC3C,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,GACL,GACD,GACP,CACT,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-~~block-~~arrow');\n\nexport type ArrowType = 'left' \| 'right';\n\nexport interface ArrowProps {\n type: ArrowType;\n transparent?: boolean;\n onClick?: () => void;\n size?: number;\n extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nconst Arrow = ({\n type,\n transparent,\n onClick,\n className,\n size = 16,\n extraProps,\n}: ArrowProps & ClassNameProps) => (\n <div className={b(null, className)}>\n <button\n className={b('button')}\n onClick={onClick}\n aria-label={i18n(`arrow-${type}`)}\n {...extraProps}\n >\n <div className={b('inner', {type, transparent})}>\n <span className={b('icon-wrapper')}>\n <ToggleArrow\n size={size}\n type={'horizontal'}\n iconType=\"navigation\"\n className={b('icon')}\n />\n </span>\n </div>\n </button>\n </div>\n);\n\nexport default Arrow;\n"]}
1	+ {"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/Slider/Arrow/Arrow.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,uDAAoD;AAEtE,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,IAAI,EAAC,yBAAgB;AAE7B,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAYhC,MAAM,KAAK,GAAG,CAAC,EACX,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,GAAG,EAAE,EACT,UAAU,GACgB,EAAE,EAAE,CAAC,CAC/B,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,iBACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,OAAO,gBACJ,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,KAC7B,UAAU,YAEd,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC,YAC3C,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,GACL,GACD,GACP,CACT,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-arrow');\n\nexport type ArrowType = 'left' \| 'right';\n\nexport interface ArrowProps {\n type: ArrowType;\n transparent?: boolean;\n onClick?: () => void;\n size?: number;\n extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nconst Arrow = ({\n type,\n transparent,\n onClick,\n className,\n size = 16,\n extraProps,\n}: ArrowProps & ClassNameProps) => (\n <div className={b(null, className)}>\n <button\n className={b('button')}\n onClick={onClick}\n aria-label={i18n(`arrow-${type}`)}\n {...extraProps}\n >\n <div className={b('inner', {type, transparent})}>\n <span className={b('icon-wrapper')}>\n <ToggleArrow\n size={size}\n type={'horizontal'}\n iconType=\"navigation\"\n className={b('icon')}\n />\n </span>\n </div>\n </button>\n </div>\n);\n\nexport default Arrow;\n"]}

package/build/esm/blocks/Slider/Slider.css CHANGED Viewed

@@ -788,7 +788,7 @@ unpredictable css rules order in build */
   left: 0;
   margin-right: 0;
 }
-.pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-slider-block-arrow__inner {
+.pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-slider-arrow__inner {
   color: var(--g-color-text-dark-primary);
 }
 .pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot {
@@ -797,7 +797,7 @@ unpredictable css rules order in build */
 .pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot_active {
   background-color: var(--g-color-private-black-300);
 }
-.pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-slider-block-arrow__inner {
+.pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-slider-arrow__inner {
   color: var(--g-color-text-light-primary);
 }
 .pc-SliderBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-SliderBlock__dot {

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

@@ -58,7 +58,7 @@ export const TabContent = ({ tabData, isActive, isReverse, contentSize, centered
         }, className: b('col', { centered: centered }), children: [tabData.media && (_jsx("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: _jsx("div", { ref: mediaContainerRef, children: _createElement(Media, { ...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {
                             name: tabData.tabName,
                             description: tabData.caption ? tabData.caption : undefined,
-                        }), key: tabName, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }) }) })), imageProps && (_jsx(React.Fragment, { children: _jsx(FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && (_jsx("p", { className: b('caption'), id: captionId, children: _jsx(YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
+                        }), key: tabName, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }) }) })), imageProps && (_jsx(React.Fragment, { children: _jsx(FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && (_jsx("div", { className: b('caption'), id: captionId, children: _jsx(YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
     return (_jsxs(Row, { className: b('row', { reverse: isReverse, hidden: !isActive }), id: getTabContentElementId?.(tabName), role: "tabpanel", ariaProps: {
             'aria-labelledby': getTabElementId?.(tabName),
         }, children: [mediaContent, textContent] }, tabName));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabContent.js","sourceRoot":"../../../../../src","sources":["blocks/Tabs/TabContent/TabContent.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,sBAAsB,EAAC,yDAAgD;AAC/E,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,gCAAuB;AACrD,OAAO,EAAC,QAAQ,EAAC,wCAA+B;AAChD,OAAO,EAAC,SAAS,EAAC,qDAAkD;AACpE,OAAO,EAAC,aAAa,EAAC,iDAA8C;AACpE,OAAO,eAAe,8CAA2C;AACjE,OAAO,EAAC,GAAG,EAAE,sBAAsB,EAAE,GAAG,EAAC,+BAAsB;AAC/D,OAAO,KAAK,2CAAwC;AACpD,OAAO,EAAC,mBAAmB,EAAC,oCAAiC;AAC7D,OAAO,EAAC,eAAe,EAAE,UAAU,EAAC,qCAA4B;AAChE,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAa/B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,sBAAsB,GACR,EAAE,EAAE;IAClB,MAAM,EAAC,OAAO,EAAC,GAAG,OAAO,CAAC;IAE1B,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAC,qBAAqB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAEzE,MAAM,SAAS,GAAG,SAAS,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,iBAAiB,EAAE,OAAO,EAAE,WAAW,CAAC;IAC3D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CACtD,iBAAiB,EAAE,OAAO,EAAE,YAAY,CAC3C,CAAC;IAEF,MAAM,YAAY,GAAG,qBAAqB,IAAI,QAAQ,CAAC;IAEvD,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IACzD,MAAM,gBAAgB,GAAG,UAAU,IAAI,UAAU,IAAI,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3E,0FAA0F;IAC1F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,gBAAgB,GAAG,WAAW,IAAI,aAAa,CAAC,WAAW,CAAC,CAAC;QAEnE,IAAI,OAAO,CAAC,OAAO,IAAI,gBAAgB,EAAE,CAAC;YACtC,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;gBAC5B,kBAAkB,EAAE,SAAS;aAChC,CAAC,CAAC;QACP,CAAC;QAED,OAAO,gBAAgB,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,cAAc,KAAK,iBAAiB,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;YAC9D,iBAAiB,CAAC,iBAAiB,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;QAChE,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,iBAAiB,EAAE,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE1C,MAAM,WAAW,GAAG,QAAQ,IAAI,CAC5B,KAAC,eAAe,IACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,UAAU,IAAI,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,IAAI,CAC9B,MAAC,GAAG,IACA,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACvB,MAAM,EAAE;YACJ,GAAG,EAAE,sBAAsB,CAAC,IAAI;YAChC,EAAE,EAAE,sBAAsB,CAAC,KAAK;SACnC,EACD,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,aAExC,OAAO,CAAC,KAAK,IAAI,CACd,cAAK,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,IAAI,cAAc,EAAC,YACvD,cAAK,GAAG,EAAE,iBAAiB,YACvB,eAAC,KAAK,OACE,mBAAmB,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;4BAC1D,IAAI,EAAE,OAAO,CAAC,OAAO;4BACrB,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;yBAC7D,CAAC,EACF,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,EAC/B,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,gBAAgB,IAAI,SAAS,EACrC,WAAW,EAAE,iBAAiB,GAChC,GACA,GACJ,CACT,EACA,UAAU,IAAI,CACX,KAAC,KAAK,CAAC,QAAQ,cACX,KAAC,eAAe,OAAK,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,GAAI,GAC5D,CACpB,EACA,OAAO,CAAC,OAAO,IAAI,CAChB,~~YAAG~~,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,~~YACrC~~,KAAC,UAAU,IACP,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,SAAS,GACf,~~GACF~~,~~CACP~~,IACC,CACT,CAAC;IAEF,OAAO,CACH,MAAC,GAAG,IAEA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,QAAQ,EAAC,CAAC,EAC5D,EAAE,EAAE,sBAAsB,EAAE,CAAC,OAAO,CAAC,EACrC,IAAI,EAAC,UAAU,EACf,SAAS,EAAE;YACP,iBAAiB,EAAE,eAAe,EAAE,CAAC,OAAO,CAAC;SAChD,aAEA,YAAY,EACZ,WAAW,KATP,OAAO,CAUV,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {ContentSize, TabsBlockItem} from '../../../models';\nimport {ProjectSettingsContext} from '../../../context/projectSettingsContext';\nimport {block, getThemedValue} from '../../../utils';\nimport {useTheme} from '../../../context/theme';\nimport {getHeight} from '../../../components/VideoBlock/VideoBlock';\nimport {getMediaImage} from '../../../components/Media/Image/utils';\nimport TabsTextContent from '../TabsTextContent/TabsTextContent';\nimport {Col, GridColumnOrderClasses, Row} from '../../../grid';\nimport Media from '../../../components/Media/Media';\nimport {mergeVideoMicrodata} from '../../../utils/microdata';\nimport {FullscreenImage, YFMWrapper} from '../../../components';\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport './TabContent.scss';\n\nconst b = block('tab-content');\n\nexport interface TabContentProps {\n tabData: TabsBlockItem;\n isActive: boolean;\n isReverse: boolean;\n contentSize: ContentSize;\n centered?: boolean;\n play: boolean;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nexport const TabContent = ({\n tabData,\n isActive,\n isReverse,\n contentSize,\n centered,\n play,\n getTabElementId,\n getTabContentElementId,\n}: TabContentProps) => {\n const {tabName} = tabData;\n\n const mediaContainerRef = React.useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const {renderInvisibleBlocks} = React.useContext(ProjectSettingsContext);\n\n const captionId = useUniqId();\n\n const mediaWidth = mediaContainerRef?.current?.offsetWidth;\n const [minImageHeight, setMinImageHeight] = React.useState(\n mediaContainerRef?.current?.offsetHeight,\n );\n\n const shouldRender = renderInvisibleBlocks \|\| isActive;\n\n const themedImage = getThemedValue(tabData.image, theme);\n const themedMedia = getThemedValue(tabData.media, theme);\n\n const hasNoImage = !themedMedia?.image && !tabData.image;\n const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);\n\n // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image\n const imageProps = React.useMemo(() => {\n const imagePropsResult = themedImage && getMediaImage(themedImage);\n\n if (tabData.caption && imagePropsResult) {\n Object.assign(imagePropsResult, {\n 'aria-describedby': captionId,\n });\n }\n\n return imagePropsResult;\n }, [captionId, tabData.caption, themedImage]);\n\n const handleImageHeight = React.useCallback(() => {\n if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {\n setMinImageHeight(mediaContainerRef?.current?.offsetHeight);\n }\n }, [minImageHeight]);\n\n React.useEffect(() => {\n handleImageHeight();\n }, [isActive, handleImageHeight]);\n\n if (!shouldRender) {\n return null;\n }\n\n const showMedia = isActive && Boolean(tabData.media \|\| imageProps);\n const showText = Boolean(tabData.text);\n const border = tabData.border \|\| 'shadow';\n\n const textContent = showText && (\n <TabsTextContent\n showMedia={showMedia}\n data={tabData}\n imageProps={imageProps \|\| undefined}\n isReverse={isReverse}\n contentSize={contentSize}\n centered={centered}\n />\n );\n\n const mediaContent = showMedia && (\n <Col\n sizes={{all: 12, md: 8}}\n orders={{\n all: GridColumnOrderClasses.Last,\n md: GridColumnOrderClasses.First,\n }}\n className={b('col', {centered: centered})}\n >\n {tabData.media && (\n <div style={{minHeight: mediaVideoHeight \|\| minImageHeight}}>\n <div ref={mediaContainerRef}>\n <Media\n {...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {\n name: tabData.tabName,\n description: tabData.caption ? tabData.caption : undefined,\n })}\n key={tabName}\n className={b('media', {border})}\n playVideo={play}\n height={mediaVideoHeight \|\| undefined}\n onImageLoad={handleImageHeight}\n />\n </div>\n </div>\n )}\n {imageProps && (\n <React.Fragment>\n <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />\n </React.Fragment>\n )}\n {tabData.caption && (\n <p className={b('caption')} id={captionId}>\n <YFMWrapper\n content={tabData.caption}\n modifiers={{constructor: true}}\n id={captionId}\n />\n </p>\n )}\n </Col>\n );\n\n return (\n <Row\n key={tabName}\n className={b('row', {reverse: isReverse, hidden: !isActive})}\n id={getTabContentElementId?.(tabName)}\n role=\"tabpanel\"\n ariaProps={{\n 'aria-labelledby': getTabElementId?.(tabName),\n }}\n >\n {mediaContent}\n {textContent}\n </Row>\n );\n};\n"]}
1	+ {"version":3,"file":"TabContent.js","sourceRoot":"../../../../../src","sources":["blocks/Tabs/TabContent/TabContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {ContentSize, TabsBlockItem} from '../../../models';\nimport {ProjectSettingsContext} from '../../../context/projectSettingsContext';\nimport {block, getThemedValue} from '../../../utils';\nimport {useTheme} from '../../../context/theme';\nimport {getHeight} from '../../../components/VideoBlock/VideoBlock';\nimport {getMediaImage} from '../../../components/Media/Image/utils';\nimport TabsTextContent from '../TabsTextContent/TabsTextContent';\nimport {Col, GridColumnOrderClasses, Row} from '../../../grid';\nimport Media from '../../../components/Media/Media';\nimport {mergeVideoMicrodata} from '../../../utils/microdata';\nimport {FullscreenImage, YFMWrapper} from '../../../components';\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport './TabContent.scss';\n\nconst b = block('tab-content');\n\nexport interface TabContentProps {\n tabData: TabsBlockItem;\n isActive: boolean;\n isReverse: boolean;\n contentSize: ContentSize;\n centered?: boolean;\n play: boolean;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nexport const TabContent = ({\n tabData,\n isActive,\n isReverse,\n contentSize,\n centered,\n play,\n getTabElementId,\n getTabContentElementId,\n}: TabContentProps) => {\n const {tabName} = tabData;\n\n const mediaContainerRef = React.useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const {renderInvisibleBlocks} = React.useContext(ProjectSettingsContext);\n\n const captionId = useUniqId();\n\n const mediaWidth = mediaContainerRef?.current?.offsetWidth;\n const [minImageHeight, setMinImageHeight] = React.useState(\n mediaContainerRef?.current?.offsetHeight,\n );\n\n const shouldRender = renderInvisibleBlocks \|\| isActive;\n\n const themedImage = getThemedValue(tabData.image, theme);\n const themedMedia = getThemedValue(tabData.media, theme);\n\n const hasNoImage = !themedMedia?.image && !tabData.image;\n const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);\n\n // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image\n const imageProps = React.useMemo(() => {\n const imagePropsResult = themedImage && getMediaImage(themedImage);\n\n if (tabData.caption && imagePropsResult) {\n Object.assign(imagePropsResult, {\n 'aria-describedby': captionId,\n });\n }\n\n return imagePropsResult;\n }, [captionId, tabData.caption, themedImage]);\n\n const handleImageHeight = React.useCallback(() => {\n if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {\n setMinImageHeight(mediaContainerRef?.current?.offsetHeight);\n }\n }, [minImageHeight]);\n\n React.useEffect(() => {\n handleImageHeight();\n }, [isActive, handleImageHeight]);\n\n if (!shouldRender) {\n return null;\n }\n\n const showMedia = isActive && Boolean(tabData.media \|\| imageProps);\n const showText = Boolean(tabData.text);\n const border = tabData.border \|\| 'shadow';\n\n const textContent = showText && (\n <TabsTextContent\n showMedia={showMedia}\n data={tabData}\n imageProps={imageProps \|\| undefined}\n isReverse={isReverse}\n contentSize={contentSize}\n centered={centered}\n />\n );\n\n const mediaContent = showMedia && (\n <Col\n sizes={{all: 12, md: 8}}\n orders={{\n all: GridColumnOrderClasses.Last,\n md: GridColumnOrderClasses.First,\n }}\n className={b('col', {centered: centered})}\n >\n {tabData.media && (\n <div style={{minHeight: mediaVideoHeight \|\| minImageHeight}}>\n <div ref={mediaContainerRef}>\n <Media\n {...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {\n name: tabData.tabName,\n description: tabData.caption ? tabData.caption : undefined,\n })}\n key={tabName}\n className={b('media', {border})}\n playVideo={play}\n height={mediaVideoHeight \|\| undefined}\n onImageLoad={handleImageHeight}\n />\n </div>\n </div>\n )}\n {imageProps && (\n <React.Fragment>\n <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />\n </React.Fragment>\n )}\n {tabData.caption && (\n <div className={b('caption')} id={captionId}>\n <YFMWrapper\n content={tabData.caption}\n modifiers={{constructor: true}}\n id={captionId}\n />\n </div>\n )}\n </Col>\n );\n\n return (\n <Row\n key={tabName}\n className={b('row', {reverse: isReverse, hidden: !isActive})}\n id={getTabContentElementId?.(tabName)}\n role=\"tabpanel\"\n ariaProps={{\n 'aria-labelledby': getTabElementId?.(tabName),\n }}\n >\n {mediaContent}\n {textContent}\n </Row>\n );\n};\n"]}

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

@@ -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, hide, qa } = props;
+    const { children, src, desktop, className, imageClassName, style, qa } = props;
     const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
-    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 })] }));
+    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 })] }));
 };
 export default BackgroundImage;
 //# sourceMappingURL=BackgroundImage.js.map

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

	@@ -1 +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,~~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"]}
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"]}

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

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

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

@@ -2,27 +2,43 @@ 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';
 };
-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 })] }));
+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 Image = (props) => {
     const projectSettings = React.useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, hide, } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
-    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 ||
+    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 ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    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 })] }));
+    if (!src) {
+        return null;
+    }
+    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
 };
 export default Image;
 //# sourceMappingURL=Image.js.map