npm - @gravity-ui/page-constructor - Versions diffs - 6.2.2 → 6.3.0 - Mend

@gravity-ui/page-constructor 6.2.2 → 6.3.0

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 (46) hide show

package/build/cjs/blocks/Tabs/TabContent/TabContent.css ADDED Viewed

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

package/build/cjs/blocks/Tabs/TabContent/TabContent.d.ts ADDED Viewed

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

package/build/cjs/blocks/Tabs/TabContent/TabContent.js ADDED Viewed

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const projectSettingsContext_1 = require("../../../context/projectSettingsContext/index.js");
+const utils_1 = require("../../../utils/index.js");
+const theme_1 = require("../../../context/theme/index.js");
+const VideoBlock_1 = require("../../../components/VideoBlock/VideoBlock.js");
+const utils_2 = require("../../../components/Media/Image/utils.js");
+const TabsTextContent_1 = tslib_1.__importDefault(require("../TabsTextContent/TabsTextContent.js"));
+const grid_1 = require("../../../grid/index.js");
+const Media_1 = tslib_1.__importDefault(require("../../../components/Media/Media.js"));
+const microdata_1 = require("../../../utils/microdata.js");
+const components_1 = require("../../../components/index.js");
+const uikit_1 = require("@gravity-ui/uikit");
+const b = (0, utils_1.block)('tab-content');
+const TabContent = ({ tabData, isActive, isReverse, contentSize, centered, play, getTabElementId, getTabContentElementId, }) => {
+    const { tabName } = tabData;
+    const mediaContainerRef = React.useRef(null);
+    const theme = (0, theme_1.useTheme)();
+    const { renderInvisibleBlocks } = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
+    const captionId = (0, uikit_1.useUniqId)();
+    const mediaWidth = mediaContainerRef?.current?.offsetWidth;
+    const [minImageHeight, setMinImageHeight] = React.useState(mediaContainerRef?.current?.offsetHeight);
+    const shouldRender = renderInvisibleBlocks || isActive;
+    const themedImage = (0, utils_1.getThemedValue)(tabData.image, theme);
+    const themedMedia = (0, utils_1.getThemedValue)(tabData.media, theme);
+    const hasNoImage = !themedMedia?.image && !tabData.image;
+    const mediaVideoHeight = hasNoImage && mediaWidth && (0, VideoBlock_1.getHeight)(mediaWidth);
+    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
+    const imageProps = React.useMemo(() => {
+        const imagePropsResult = themedImage && (0, utils_2.getMediaImage)(themedImage);
+        if (tabData.caption && imagePropsResult) {
+            Object.assign(imagePropsResult, {
+                'aria-describedby': captionId,
+            });
+        }
+        return imagePropsResult;
+    }, [captionId, tabData.caption, themedImage]);
+    const handleImageHeight = React.useCallback(() => {
+        if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {
+            setMinImageHeight(mediaContainerRef?.current?.offsetHeight);
+        }
+    }, [minImageHeight]);
+    React.useEffect(() => {
+        handleImageHeight();
+    }, [isActive, handleImageHeight]);
+    if (!shouldRender) {
+        return null;
+    }
+    const showMedia = isActive && Boolean(tabData.media || imageProps);
+    const showText = Boolean(tabData.text);
+    const border = tabData.border || 'shadow';
+    const textContent = showText && ((0, jsx_runtime_1.jsx)(TabsTextContent_1.default, { showMedia: showMedia, data: tabData, imageProps: imageProps || undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const mediaContent = showMedia && ((0, jsx_runtime_1.jsxs)(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
+            all: grid_1.GridColumnOrderClasses.Last,
+            md: grid_1.GridColumnOrderClasses.First,
+        }, className: b('col', { centered: centered }), children: [tabData.media && ((0, jsx_runtime_1.jsx)("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: (0, jsx_runtime_1.jsx)("div", { ref: mediaContainerRef, children: (0, react_1.createElement)(Media_1.default, { ...(0, microdata_1.mergeVideoMicrodata)((0, utils_1.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 && ((0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && ((0, jsx_runtime_1.jsx)("p", { className: b('caption'), id: captionId, children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('row', { reverse: isReverse, hidden: !isActive }), id: getTabContentElementId?.(tabName), role: "tabpanel", ariaProps: {
+            'aria-labelledby': getTabElementId?.(tabName),
+        }, children: [mediaContent, textContent] }, tabName));
+};
+exports.TabContent = TabContent;
+//# sourceMappingURL=TabContent.js.map

package/build/cjs/blocks/Tabs/TabContent/TabContent.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabContent.js","sourceRoot":"../../../../../src","sources":["blocks/Tabs/TabContent/TabContent.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA+B;AAE/B,6FAA+E;AAC/E,mDAAqD;AACrD,2DAAgD;AAChD,6EAAoE;AACpE,oEAAoE;AACpE,oGAAiE;AACjE,iDAA+D;AAC/D,uFAAoD;AACpD,2DAA6D;AAC7D,6DAAgE;AAChE,6CAA4C;AAI5C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAaxB,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,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAC,qBAAqB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,+CAAsB,CAAC,CAAC;IAEzE,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAE,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,IAAA,sBAAc,EAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,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,IAAA,sBAAS,EAAC,UAAU,CAAC,CAAC;IAE3E,0FAA0F;IAC1F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,gBAAgB,GAAG,WAAW,IAAI,IAAA,qBAAa,EAAC,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,uBAAC,yBAAe,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,wBAAC,UAAG,IACA,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACvB,MAAM,EAAE;YACJ,GAAG,EAAE,6BAAsB,CAAC,IAAI;YAChC,EAAE,EAAE,6BAAsB,CAAC,KAAK;SACnC,EACD,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,aAExC,OAAO,CAAC,KAAK,IAAI,CACd,gCAAK,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,IAAI,cAAc,EAAC,YACvD,gCAAK,GAAG,EAAE,iBAAiB,YACvB,2BAAC,eAAK,OACE,IAAA,+BAAmB,EAAC,IAAA,sBAAc,EAAC,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,uBAAC,KAAK,CAAC,QAAQ,cACX,uBAAC,4BAAe,OAAK,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,GAAI,GAC5D,CACpB,EACA,OAAO,CAAC,OAAO,IAAI,CAChB,8BAAG,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,YACrC,uBAAC,uBAAU,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,wBAAC,UAAG,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;AAlIW,QAAA,UAAU,cAkIrB","sourcesContent":["import * as React from 'react';\nimport {ContentSize, TabsBlockItem} from '../../../models';\nimport {ProjectSettingsContext} from '../../../context/projectSettingsContext';\nimport {block, getThemedValue} from '../../../utils';\nimport {useTheme} from '../../../context/theme';\nimport {getHeight} from '../../../components/VideoBlock/VideoBlock';\nimport {getMediaImage} from '../../../components/Media/Image/utils';\nimport TabsTextContent from '../TabsTextContent/TabsTextContent';\nimport {Col, GridColumnOrderClasses, Row} from '../../../grid';\nimport Media from '../../../components/Media/Media';\nimport {mergeVideoMicrodata} from '../../../utils/microdata';\nimport {FullscreenImage, YFMWrapper} from '../../../components';\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport './TabContent.scss';\n\nconst b = block('tab-content');\n\nexport interface TabContentProps {\n tabData: TabsBlockItem;\n isActive: boolean;\n isReverse: boolean;\n contentSize: ContentSize;\n centered?: boolean;\n play: boolean;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nexport const TabContent = ({\n tabData,\n isActive,\n isReverse,\n contentSize,\n centered,\n play,\n getTabElementId,\n getTabContentElementId,\n}: TabContentProps) => {\n const {tabName} = tabData;\n\n const mediaContainerRef = React.useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const {renderInvisibleBlocks} = React.useContext(ProjectSettingsContext);\n\n const captionId = useUniqId();\n\n const mediaWidth = mediaContainerRef?.current?.offsetWidth;\n const [minImageHeight, setMinImageHeight] = React.useState(\n mediaContainerRef?.current?.offsetHeight,\n );\n\n const shouldRender = renderInvisibleBlocks || isActive;\n\n const themedImage = getThemedValue(tabData.image, theme);\n const themedMedia = getThemedValue(tabData.media, theme);\n\n const hasNoImage = !themedMedia?.image && !tabData.image;\n const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);\n\n // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image\n const imageProps = React.useMemo(() => {\n const imagePropsResult = themedImage && getMediaImage(themedImage);\n\n if (tabData.caption && imagePropsResult) {\n Object.assign(imagePropsResult, {\n 'aria-describedby': captionId,\n });\n }\n\n return imagePropsResult;\n }, [captionId, tabData.caption, themedImage]);\n\n const handleImageHeight = React.useCallback(() => {\n if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {\n setMinImageHeight(mediaContainerRef?.current?.offsetHeight);\n }\n }, [minImageHeight]);\n\n React.useEffect(() => {\n handleImageHeight();\n }, [isActive, handleImageHeight]);\n\n if (!shouldRender) {\n return null;\n }\n\n const showMedia = isActive && Boolean(tabData.media || imageProps);\n const showText = Boolean(tabData.text);\n const border = tabData.border || 'shadow';\n\n const textContent = showText && (\n <TabsTextContent\n showMedia={showMedia}\n data={tabData}\n imageProps={imageProps || undefined}\n isReverse={isReverse}\n contentSize={contentSize}\n centered={centered}\n />\n );\n\n const mediaContent = showMedia && (\n <Col\n sizes={{all: 12, md: 8}}\n orders={{\n all: GridColumnOrderClasses.Last,\n md: GridColumnOrderClasses.First,\n }}\n className={b('col', {centered: centered})}\n >\n {tabData.media && (\n <div style={{minHeight: mediaVideoHeight || minImageHeight}}>\n <div ref={mediaContainerRef}>\n <Media\n {...mergeVideoMicrodata(getThemedValue(tabData.media, theme), {\n name: tabData.tabName,\n description: tabData.caption ? tabData.caption : undefined,\n })}\n key={tabName}\n className={b('media', {border})}\n playVideo={play}\n height={mediaVideoHeight || undefined}\n onImageLoad={handleImageHeight}\n />\n </div>\n </div>\n )}\n {imageProps && (\n <React.Fragment>\n <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />\n </React.Fragment>\n )}\n {tabData.caption && (\n <p className={b('caption')} id={captionId}>\n <YFMWrapper\n content={tabData.caption}\n modifiers={{constructor: true}}\n id={captionId}\n />\n </p>\n )}\n </Col>\n );\n\n return (\n <Row\n key={tabName}\n className={b('row', {reverse: isReverse, hidden: !isActive})}\n id={getTabContentElementId?.(tabName)}\n role=\"tabpanel\"\n ariaProps={{\n 'aria-labelledby': getTabElementId?.(tabName),\n }}\n >\n {mediaContent}\n {textContent}\n </Row>\n );\n};\n"]}

package/build/cjs/blocks/Tabs/Tabs.css CHANGED Viewed

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

package/build/cjs/blocks/Tabs/Tabs.js CHANGED Viewed

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

package/build/cjs/blocks/Tabs/Tabs.js.map CHANGED Viewed

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

package/build/cjs/components/Button/Button.d.ts CHANGED Viewed

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

package/build/cjs/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,uDAAkD;AAClD,6CAK2B;AAE3B,gFAAwE;AACxE,gDAAyC;AACzC,gDAAmC;AACnC,kDAAqF;AACrF,gDAA6C;AAE7C,0CAA4B;AAC5B,sCAA2F;~~AAU3F~~,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,sCAAsC;AACtC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAClC,MAAM,EAAC,GAAG,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAC9C,MAAM,EACF,SAAS,EACT,eAAe,EACf,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,QAAQ,EAChB,GAAG,EACH,QAAQ,EACR,GAAG,EACH,OAAO,EAAE,aAAa,EACtB,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,MAAM,CAAC;IAClC,MAAM,eAAe,GAAG,IAAA,oBAAY,EAAC,0BAAiB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC7B,CAAC,CAA0D,EAAE,EAAE;QAC3D,eAAe,CAAC,eAAe,CAAC,CAAC;QAEjC,IAAI,aAAa,EAAE,CAAC;YAChB,aAAa,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC;IACL,CAAC,EACD,CAAC,eAAe,EAAE,eAAe,EAAE,aAAa,CAAC,CACpD,CAAC;IAEF,MAAM,eAAe,GAAG,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC;IAE7C,MAAM,SAAS,GACX,GAAG,YAAY,MAAM;QACjB,CAAC,CAAC,EAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,IAAI,kBAAkB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAC;QAC5E,CAAC,CAAC,EAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,kBAAkB,EAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG;QACnB,CAAC,CAAC,CAAC,CAAC,EAAC,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAAE,GAAG,eAAe,EAAC,EAAE,SAAS,CAAC;QAClE,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,eAAe,EAAC,EAAE,SAAS,CAAC,CAAC;IAEzC,MAAM,WAAW,GAAG;QAChB,GAAG,IAAI;QACP,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,IAAA,iBAAS,EAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QAC3C,OAAO;KACV,CAAC;IAEF,IAAI,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;QACnD,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,gBAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC;QAEzE,OAAO,uBAAC,uBAAU,IAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAa,GAAI,CAAC;IAC3F,CAAC;IAED,IAAI,IAAI,CAAC;IACT,IAAI,KAAK,GAAG,GAAG,IAAI,CACf,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,IAAI,IAAA,WAAI,EAAC,WAAW,CAAC,GAAI,CAC9F,CAAC;IAEF,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;QACrB,IAAI,GAAG,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,cAAM,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,eAAO,GAAI,CAAC;QAC3E,KAAK,GAAG,SAAS,CAAC;IACtB,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzD,OAAO,CACH,wBAAC,cAAY,IACT,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAA,oBAAY,EAAC,WAA6B,CAAC,EACjD,IAAI,EAAE,IAAA,oBAAY,EAAC,IAAqB,CAAC,EACzC,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,KAAK,KACP,WAAgC,aAEpC,IAAI,IAAI,SAAS,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACpD,kCAAM,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAK,IAAI,SAAS,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACtD,iCAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAQ,EACxC,KAAK,IAAI,SAAS,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IACpD,EACN,IAAI,IAAI,SAAS,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAC1C,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {StoreBadge} from '@gravity-ui/components';\nimport {\n Button as CommonButton,\n Icon,\n Platform,\n ButtonProps as UIKitButtonProps,\n} from '@gravity-ui/uikit';\n\nimport {LocaleContext} from '../../context/localeContext/localeContext';\nimport {useAnalytics} from '../../hooks';\nimport {Github} from '../../icons';\nimport {ButtonProps as ButtonParams, DefaultEventNames, QAProps} from '../../models';\nimport {block, setUrlTld} from '../../utils';\n\nimport {i18n} from './i18n';\nimport {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';\n\nimport './Button.scss';\n\nexport interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {\n className?: string;\n url?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>;\n}\n\nconst b = block('button-block');\n\n// eslint-disable-next-line complexity\nconst Button = (props: ButtonProps) => {\n const {tld} = React.useContext(LocaleContext);\n const {\n className,\n analyticsEvents,\n size = 'l',\n theme = 'normal',\n url,\n urlTitle,\n img,\n onClick: onClickOrigin,\n text,\n width,\n ...rest\n } = props;\n const defaultImgPosition = 'left';\n const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);\n const onClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n handleAnalytics(analyticsEvents);\n\n if (onClickOrigin) {\n onClickOrigin(e);\n }\n },\n [handleAnalytics, analyticsEvents, onClickOrigin],\n );\n\n const buttonModifiers = {size, theme, width};\n\n const buttonImg =\n img instanceof Object\n ? {url: img.url, position: img.position \|\| defaultImgPosition, alt: img.alt}\n : {url: img, position: defaultImgPosition};\n\n const buttonClass = img\n ? b({position: buttonImg.position, ...buttonModifiers}, className)\n : b({...buttonModifiers}, className);\n\n const buttonProps = {\n ...rest,\n href: url ? setUrlTld(url, tld) : undefined,\n onClick,\n };\n\n if (theme === 'app-store' \|\| theme === 'google-play') {\n const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;\n\n return <StoreBadge className={buttonClass} platform={platform} href={url as string} />;\n }\n\n let icon;\n let image = img && (\n <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt \|\| i18n('image-alt')} />\n );\n\n if (theme === 'github') {\n icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;\n image = undefined;\n }\n\n const buttonTheme = theme === 'scale' ? 'accent' : theme;\n\n return (\n <CommonButton\n className={buttonClass}\n view={toCommonView(buttonTheme as OldButtonTheme)}\n size={toCommonSize(size as OldButtonSize)}\n title={urlTitle}\n width={width}\n {...(buttonProps as UIKitButtonProps)}\n >\n {icon && buttonImg.position === 'left' ? icon : null}\n <span className={b('content')}>\n {image && buttonImg.position === 'left' ? image : null}\n <span className={b('text')}>{text}</span>\n {image && buttonImg.position === 'right' ? image : null}\n </span>\n {icon && buttonImg.position === 'right' ? icon : null}\n </CommonButton>\n );\n};\n\nexport default Button;\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {StoreBadge} from '@gravity-ui/components';\nimport {\n Button as CommonButton,\n Icon,\n Platform,\n ButtonProps as UIKitButtonProps,\n} from '@gravity-ui/uikit';\n\nimport {LocaleContext} from '../../context/localeContext/localeContext';\nimport {useAnalytics} from '../../hooks';\nimport {Github} from '../../icons';\nimport {ButtonProps as ButtonParams, DefaultEventNames, QAProps} from '../../models';\nimport {block, setUrlTld} from '../../utils';\n\nimport {i18n} from './i18n';\nimport {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';\n\nimport './Button.scss';\n\nexport interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {\n className?: string;\n id?: string;\n url?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>;\n}\n\nconst b = block('button-block');\n\n// eslint-disable-next-line complexity\nconst Button = (props: ButtonProps) => {\n const {tld} = React.useContext(LocaleContext);\n const {\n className,\n analyticsEvents,\n size = 'l',\n theme = 'normal',\n url,\n urlTitle,\n img,\n onClick: onClickOrigin,\n text,\n width,\n ...rest\n } = props;\n const defaultImgPosition = 'left';\n const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);\n const onClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n handleAnalytics(analyticsEvents);\n\n if (onClickOrigin) {\n onClickOrigin(e);\n }\n },\n [handleAnalytics, analyticsEvents, onClickOrigin],\n );\n\n const buttonModifiers = {size, theme, width};\n\n const buttonImg =\n img instanceof Object\n ? {url: img.url, position: img.position \|\| defaultImgPosition, alt: img.alt}\n : {url: img, position: defaultImgPosition};\n\n const buttonClass = img\n ? b({position: buttonImg.position, ...buttonModifiers}, className)\n : b({...buttonModifiers}, className);\n\n const buttonProps = {\n ...rest,\n href: url ? setUrlTld(url, tld) : undefined,\n onClick,\n };\n\n if (theme === 'app-store' \|\| theme === 'google-play') {\n const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;\n\n return <StoreBadge className={buttonClass} platform={platform} href={url as string} />;\n }\n\n let icon;\n let image = img && (\n <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt \|\| i18n('image-alt')} />\n );\n\n if (theme === 'github') {\n icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;\n image = undefined;\n }\n\n const buttonTheme = theme === 'scale' ? 'accent' : theme;\n\n return (\n <CommonButton\n className={buttonClass}\n view={toCommonView(buttonTheme as OldButtonTheme)}\n size={toCommonSize(size as OldButtonSize)}\n title={urlTitle}\n width={width}\n {...(buttonProps as UIKitButtonProps)}\n >\n {icon && buttonImg.position === 'left' ? icon : null}\n <span className={b('content')}>\n {image && buttonImg.position === 'left' ? image : null}\n <span className={b('text')}>{text}</span>\n {image && buttonImg.position === 'right' ? image : null}\n </span>\n {icon && buttonImg.position === 'right' ? icon : null}\n </CommonButton>\n );\n};\n\nexport default Button;\n"]}

package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts CHANGED Viewed

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

package/build/cjs/components/ButtonTabs/ButtonTabs.js CHANGED Viewed

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

package/build/cjs/components/ButtonTabs/ButtonTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonTabs.js","sourceRoot":"../../../../src","sources":["components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAK/B,gDAAkC;AAClC,uCAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;~~AAmB~~/B,MAAM,UAAU,GAA8B,CAAC,EAC3C,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,GAAG,GAAG,EACb,EAAE,~~GACL~~,EAAE,EAAE;IACD,MAAM,WAAW,GAAkB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,SAAS,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,CAA0D,EAAE,EAAE;QACrF,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC;IACL,CAAC,EACD,CAAC,WAAW,CAAC,CAChB,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,aAAU,EAAE,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE;YACvB,MAAM,QAAQ,GAAG,EAAE,KAAK,WAAW,CAAC;YAEpC,OAAO,CACH,uBAAC,cAAM,IACH,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,UAAU,EAAE;oBACR,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,QAAQ;~~iBAC5B~~,~~IANI~~,KAAK,~~CAOZ~~,CACL,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {ButtonProps, QAProps} from '../../models';\nimport {block} from '../../utils';\nimport {Button} from '../index';\n\nimport './ButtonTabs.scss';\n\nconst b = block('button-tabs');\n\nexport interface ButtonTabsItemProps\n extends Omit<ButtonProps, 'url' \| 'primary' \| 'target' \| 'text'> {\n id: string \| null;\n title: string;\n}\n\nexport interface ButtonTabsProps extends QAProps {\n className?: string;\n items: ButtonTabsItemProps[];\n activeTab?: string \| null;\n onSelectTab?: (\n tabId: string \| null,\n e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>,\n ) => void;\n tabSize?: ButtonSize;\n}\n\nconst ButtonTabs: React.FC<ButtonTabsProps> = ({\n className,\n items,\n activeTab,\n onSelectTab,\n tabSize = 'l',\n qa,\n}) => {\n const activeTabId: string \| null = React.useMemo(() => {\n if (activeTab) {\n return activeTab;\n }\n\n return items[0].id;\n }, [activeTab, items]);\n\n const handleClick = React.useCallback(\n (tabId: string \| null) => (e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n if (onSelectTab) {\n onSelectTab(tabId, e);\n }\n },\n [onSelectTab],\n );\n\n return (\n <div className={b(null, className)} role=\"tablist\" data-qa={qa}>\n {items.map(({id, title}) => {\n const isActive = id === activeTabId;\n\n return (\n <Button\n text={title}\n className={b('item', {active: isActive})}\n key={title}\n size={tabSize}\n onClick={handleClick(id)}\n extraProps={{\n role: 'tab',\n 'aria-selected': isActive,\n }}\n />\n );\n })}\n </div>\n );\n};\n\nexport default ButtonTabs;\n"]}
1	+ {"version":3,"file":"ButtonTabs.js","sourceRoot":"../../../../src","sources":["components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAK/B,gDAAkC;AAClC,uCAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAqB/B,MAAM,UAAU,GAA8B,CAAC,EAC3C,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,GAAG,GAAG,EACb,EAAE,EACF,eAAe,EACf,sBAAsB,GACzB,EAAE,EAAE;IACD,MAAM,WAAW,GAAkB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,SAAS,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,CAA0D,EAAE,EAAE;QACrF,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC;IACL,CAAC,EACD,CAAC,WAAW,CAAC,CAChB,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,aAAU,EAAE,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE;YACvB,MAAM,QAAQ,GAAG,EAAE,KAAK,WAAW,CAAC;YAEpC,OAAO,CACH,uBAAC,cAAM,IACH,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B,UAAU,EAAE;oBACR,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,QAAQ;oBACzB,eAAe,EAAE,sBAAsB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;iBACtD,IARI,KAAK,CASZ,CACL,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {ButtonProps, QAProps} from '../../models';\nimport {block} from '../../utils';\nimport {Button} from '../index';\n\nimport './ButtonTabs.scss';\n\nconst b = block('button-tabs');\n\nexport interface ButtonTabsItemProps\n extends Omit<ButtonProps, 'url' \| 'primary' \| 'target' \| 'text'> {\n id: string \| null;\n title: string;\n}\n\nexport interface ButtonTabsProps extends QAProps {\n className?: string;\n items: ButtonTabsItemProps[];\n activeTab?: string \| null;\n onSelectTab?: (\n tabId: string \| null,\n e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>,\n ) => void;\n tabSize?: ButtonSize;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nconst ButtonTabs: React.FC<ButtonTabsProps> = ({\n className,\n items,\n activeTab,\n onSelectTab,\n tabSize = 'l',\n qa,\n getTabElementId,\n getTabContentElementId,\n}) => {\n const activeTabId: string \| null = React.useMemo(() => {\n if (activeTab) {\n return activeTab;\n }\n\n return items[0].id;\n }, [activeTab, items]);\n\n const handleClick = React.useCallback(\n (tabId: string \| null) => (e: React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n if (onSelectTab) {\n onSelectTab(tabId, e);\n }\n },\n [onSelectTab],\n );\n\n return (\n <div className={b(null, className)} role=\"tablist\" data-qa={qa}>\n {items.map(({id, title}) => {\n const isActive = id === activeTabId;\n\n return (\n <Button\n text={title}\n className={b('item', {active: isActive})}\n key={title}\n size={tabSize}\n onClick={handleClick(id)}\n id={getTabElementId?.(id ?? '')}\n extraProps={{\n role: 'tab',\n 'aria-selected': isActive,\n 'aria-controls': getTabContentElementId?.(id ?? ''),\n }}\n />\n );\n })}\n </div>\n );\n};\n\nexport default ButtonTabs;\n"]}

package/build/cjs/context/projectSettingsContext/ProjectSettingsContext.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import * as React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
     isAnimationEnabled?: boolean;
+    renderInvisibleBlocks?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

package/build/cjs/context/projectSettingsContext/ProjectSettingsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;~~AAMlB~~,QAAA,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nexport interface ProjectSettingsContextProps {\n disableCompress?: boolean;\n isAnimationEnabled?: boolean;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}
1	+ {"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAOlB,QAAA,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nexport interface ProjectSettingsContextProps {\n disableCompress?: boolean;\n isAnimationEnabled?: boolean;\n renderInvisibleBlocks?: boolean;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}

package/build/cjs/grid/Col/Col.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { QAProps, Refable, Roleable } from "../../models/index.js";
+import { AriaProps, QAProps, Refable, Roleable } from "../../models/index.js";
 import { GridColumnClassParams } from "../types.js";
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable, AriaProps {
+    id?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 }

package/build/cjs/grid/Col/Col.js CHANGED Viewed

@@ -6,8 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../utils.js");
 exports.Col = React.forwardRef((props, ref) => {
-    const { children, style, qa, role, ...rest } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": qa, role: role, children: children }));
+    const { id, children, style, qa, role, ariaProps, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, id: id, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": qa, role: role, ...ariaProps, children: children }));
 });
 exports.Col.displayName = 'Col';
 //# sourceMappingURL=Col.js.map

package/build/cjs/grid/Col/Col.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Col.js","sourceRoot":"../../../../src","sources":["grid/Col/Col.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,uCAAqC;~~AAWxB~~,QAAA,GAAG,GAAG,KAAK,CAAC,UAAU,CAC/B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;~~IAEnD~~,OAAO,CACH,~~gCAAK~~,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,mBAAW,EAAC,IAAI,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,~~aAAW~~,EAAE,~~EAAE~~,IAAI,EAAE,IAAI,~~YAC7E~~,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {QAProps, Refable, Roleable} from '../../models';\nimport {GridColumnClassParams} from '../types';\nimport {getColClass} from '../utils';\n\nexport interface GridColumnProps\n extends GridColumnClassParams,\n Refable<HTMLDivElement>,\n QAProps,\n Roleable {\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const Col = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridColumnProps>>(\n (props, ref) => {\n const {children, style, qa, role, ...rest} = props;\n\n return (\n <div ref={ref} className={getColClass(rest)} style={style} data-qa={qa} role={role}>\n {children}\n </div>\n );\n },\n);\n\nCol.displayName = 'Col';\n"]}
1	+ {"version":3,"file":"Col.js","sourceRoot":"../../../../src","sources":["grid/Col/Col.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,uCAAqC;AAaxB,QAAA,GAAG,GAAG,KAAK,CAAC,UAAU,CAC/B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;IAElE,OAAO,CACH,gCACI,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAA,mBAAW,EAAC,IAAI,CAAC,EAC5B,KAAK,EAAE,KAAK,aACH,EAAE,EACX,IAAI,EAAE,IAAI,KACN,SAAS,YAEZ,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {AriaProps, QAProps, Refable, Roleable} from '../../models';\nimport {GridColumnClassParams} from '../types';\nimport {getColClass} from '../utils';\n\nexport interface GridColumnProps\n extends GridColumnClassParams,\n Refable<HTMLDivElement>,\n QAProps,\n Roleable,\n AriaProps {\n id?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const Col = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridColumnProps>>(\n (props, ref) => {\n const {id, children, style, qa, role, ariaProps, ...rest} = props;\n\n return (\n <div\n ref={ref}\n id={id}\n className={getColClass(rest)}\n style={style}\n data-qa={qa}\n role={role}\n {...ariaProps}\n >\n {children}\n </div>\n );\n },\n);\n\nCol.displayName = 'Col';\n"]}

package/build/cjs/grid/Row/Row.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Refable } from "../../models/common.js";
+import { ClassNameProps, Refable } from "../../models/common.js";
 import { GridAlignItems, GridJustifyContent } from "../types.js";
-export interface RowProps extends Refable<HTMLDivElement> {
-    className?: string;
+import { AriaProps, Roleable } from "../../models/index.js";
+export interface RowProps extends ClassNameProps, Refable<HTMLDivElement>, Roleable, AriaProps {
+    id?: string;
     justifyContent?: GridJustifyContent;
     alignItems?: GridAlignItems;
     noGutter?: boolean;

package/build/cjs/grid/Row/Row.js CHANGED Viewed

@@ -5,13 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 exports.Row = React.forwardRef((props, ref) => {
-    const { className, justifyContent, alignItems, noGutter, style, children } = props;
+    const { id, className, justifyContent, alignItems, noGutter, style, role, ariaProps, children } = props;
     const getClassName = React.useCallback(() => {
         return ['row', className, justifyContent, alignItems, noGutter && 'no-gutter']
             .filter(Boolean)
             .join(' ');
     }, [className, justifyContent, alignItems, noGutter]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: getClassName(), style: style, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, id: id, className: getClassName(), style: style, role: role, ...ariaProps, children: children }));
 });
 exports.Row.displayName = 'Row';
 //# sourceMappingURL=Row.js.map

package/build/cjs/grid/Row/Row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Row.js","sourceRoot":"../../../../src","sources":["grid/Row/Row.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;~~AAclB~~,QAAA,GAAG,GAAG,KAAK,CAAC,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,EAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC,~~GAAG~~,KAAK,CAAC;~~IAEjF~~,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,IAAI,WAAW,CAAC;aACzE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,CACH,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,~~YACjD~~,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Refable} from '../../models/common';\nimport {GridAlignItems, GridJustifyContent} from '../types';\n\nexport interface RowProps extends Refable<HTMLDivElement> {\n ~~className~~?: string;\n justifyContent?: GridJustifyContent;\n alignItems?: GridAlignItems;\n noGutter?: boolean;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {\n const {className, justifyContent, alignItems, noGutter, style, children} = props;\n\n const getClassName = React.useCallback(() => {\n return ['row', className, justifyContent, alignItems, noGutter && 'no-gutter']\n .filter(Boolean)\n .join(' ');\n }, [className, justifyContent, alignItems, noGutter]);\n\n return (\n <div ref={ref} className={getClassName()} style={style}>\n {children}\n </div>\n );\n});\n\nRow.displayName = 'Row';\n"]}
1	+ {"version":3,"file":"Row.js","sourceRoot":"../../../../src","sources":["grid/Row/Row.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAelB,QAAA,GAAG,GAAG,KAAK,CAAC,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,EAAC,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,GACzF,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,IAAI,WAAW,CAAC;aACzE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,CACH,gCAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,KAAM,SAAS,YACpF,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ClassNameProps, Refable} from '../../models/common';\nimport {GridAlignItems, GridJustifyContent} from '../types';\nimport {AriaProps, Roleable} from '../../models';\n\nexport interface RowProps extends ClassNameProps, Refable<HTMLDivElement>, Roleable, AriaProps {\n id?: string;\n justifyContent?: GridJustifyContent;\n alignItems?: GridAlignItems;\n noGutter?: boolean;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {\n const {id, className, justifyContent, alignItems, noGutter, style, role, ariaProps, children} =\n props;\n\n const getClassName = React.useCallback(() => {\n return ['row', className, justifyContent, alignItems, noGutter && 'no-gutter']\n .filter(Boolean)\n .join(' ');\n }, [className, justifyContent, alignItems, noGutter]);\n\n return (\n <div ref={ref} id={id} className={getClassName()} style={style} role={role} {...ariaProps}>\n {children}\n </div>\n );\n});\n\nRow.displayName = 'Row';\n"]}

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

@@ -82,6 +82,9 @@ export interface Tabbable {
 export interface Roleable {
     role?: React.AriaRole;
 }
+export interface AriaProps {
+    ariaProps?: React.AriaAttributes;
+}
 export interface Background {
     image?: string;
     color?: string;