@cloud-ru/uikit-product-site-section 1.1.8-preview-481817ca.0 → 1.1.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.1.8 (2026-03-04)
+
+
+### Bug Fixes
+
+* **SITE-10810:** pass tab onClick prop to SectionContentTabs tab ([4c33bb9](https://github.com/cloud-ru-tech/uikit-product/commit/4c33bb9606d9dfb5fe571d364ffedddb2d38ba58))
+
+
+
+
+
 ## 1.1.7 (2026-02-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -46,7 +46,7 @@
 | content* | `ContentBasicTab[] \| CardBasicArray \| ContentInfoTab[] \| CardInfoArray \| ContentNumericTab[] \| CardNumericArray \| ContentProductTab[] \| CardProductArray` | - |  |
 | type* | "basic" \| "info" \| "numeric" \| "product" | - |  |
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| columnsConfig* | `ColumnsConfig` | - | Конфигурация настройки колонок для разных layoutType |
+| columnsConfig* | `WithSupportProps<WithLayoutType<{ children: ReactNode; columnsConfig: ColumnsConfig; gap?: "s" \| "m" \| "l" \| "xs"; className?: string; }>>` | - | Конфигурация настройки колонок для разных layoutType |
 | id | `string` | - | id секции |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Название подзаголовка секции |
@@ -157,9 +157,9 @@
 | button | `Omit<ButtonFilledProps, "size" \| "fullWidth">` | - | Кнопка действия |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background1-level | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 ## SectionContentList
@@ -174,9 +174,9 @@
 | items | `Item[]` | - | Список элементов |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 ## SectionContentTabs
@@ -232,7 +232,7 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| items* | `CardMarketplaceProps[]` | - | Массив айтемов |
+| items* | `WithSupportProps<WithLayoutType<{ title: string; description?: string; href: string; target?: HTMLAttributeAnchorTarget; onClick?(e?: MouseEvent<HTMLAnchorElement \| HTMLDivElement, MouseEvent>): void; logo: { ...; }; tag?: Omit<...>; disabled?: boolean; className?: string; }>>[]` | - | Массив айтемов |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | description | `string` | - | Описание секции |
@@ -257,9 +257,9 @@
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | id | `string` | - | id секции |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 ## SectionPersonalManager
 ### Props
@@ -272,7 +272,7 @@
 | title | `string` | - |  |
 | description | `string` | - |  |
 | card | `{ title: string; text: string; }` | - |  |
-| benefits | `Pick<CardBasicProps, "title" \| "icon">[]` | - |  |
+| benefits | `Pick<WithSupportProps<WithLayoutType<{ title: string; description?: string; icon?: ReactNode \| IconElement \| { src: string; alt?: string; }; className?: string; }>>, "title" \| "icon">[]` | - |  |
 | withoutBenefits | `boolean` | - |  |
 | className | `string` | - | CSS-класс |
 ## SectionPromoList
@@ -299,20 +299,11 @@
 | id | `string` | - | id секции |
 | className | `string` | - | CSS-класс |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
-| gap | "s" \| "m" \| "l" \| "xs" | s | Размер отступов сетки |
+| gap | `WithSupportProps<WithLayoutType<{ children: ReactNode; columnsConfig: ColumnsConfig; gap?: "s" \| "m" \| "l" \| "xs"; className?: string; }>>` | s | Размер отступов сетки |
 ## SectionTable
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| rows* | `Cell[][]` | - |  |
-| id | `string` | - | id секции |
-| className | `string` | - | CSS-класс |
-| title | `string` | - | Заголовок |
-| subtitle | `string` | - | Подзаголовок |
-| description | `string` | - | Описание |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Фон подложки |
-| withHeader | `boolean` | - |  |
 ## SectionCarousel
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/SectionContentTabs/SectionContentTabs.js

@@ -36,8 +36,8 @@ function SectionContentTabs(_a) {
     var { id, title, tabs, activeTab: activeTabProp, onActiveTabChange, button, className, layoutType, backgroundColor, titleTag, 'data-test-id': dataTestId = 'section-content-tabs' } = _a, rest = __rest(_a, ["id", "title", "tabs", "activeTab", "onActiveTabChange", "button", "className", "layoutType", "backgroundColor", "titleTag", 'data-test-id']);
     const [activeTab, setActiveTab] = (0, uncontrollable_1.useUncontrolledProp)(activeTabProp, tabs[0].id, onActiveTabChange);
     const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper, { [styles_module_scss_1.default.desktopTabsWrapper]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: tabs.map(({ id, title, disabled, icon }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, 
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper, { [styles_module_scss_1.default.desktopTabsWrapper]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: tabs.map(({ id, title, disabled, icon, onClick }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, 
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                     // @ts-ignore
-                                    label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }), (0, jsx_runtime_1.jsx)(TabIcon, { icon: icon })] }), disabled: disabled }, id))) }), Boolean(button) && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] }), tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => ((0, jsx_runtime_1.jsxs)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.mediaWrapper, children: [image && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` }) })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` })), (mediaTitle || mediaSubtitle) && ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { titleSectionSize: 's', layoutType: layoutType, title: mediaTitle, description: mediaSubtitle })), mediaDescription && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, description: mediaDescription })] }, id)))] }) }) })));
+                                    label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }), (0, jsx_runtime_1.jsx)(TabIcon, { icon: icon })] }), disabled: disabled, onClick: onClick }, id))) }), Boolean(button) && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] }), tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => ((0, jsx_runtime_1.jsxs)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.mediaWrapper, children: [image && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` }) })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` })), (mediaTitle || mediaSubtitle) && ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { titleSectionSize: 's', layoutType: layoutType, title: mediaTitle, description: mediaSubtitle })), mediaDescription && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, description: mediaDescription })] }, id)))] }) }) })));
 }

package/dist/esm/components/SectionContentTabs/SectionContentTabs.js

@@ -30,8 +30,8 @@ export function SectionContentTabs(_a) {
     var { id, title, tabs, activeTab: activeTabProp, onActiveTabChange, button, className, layoutType, backgroundColor, titleTag, 'data-test-id': dataTestId = 'section-content-tabs' } = _a, rest = __rest(_a, ["id", "title", "tabs", "activeTab", "onActiveTabChange", "button", "className", "layoutType", "backgroundColor", "titleTag", 'data-test-id']);
     const [activeTab, setActiveTab] = useUncontrolledProp(activeTabProp, tabs[0].id, onActiveTabChange);
     const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
-    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, extractSupportProps(rest), { children: _jsx(Tabs, { value: activeTab, onChange: setActiveTab, children: _jsxs("div", { className: styles.sectionContent, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.tabsWrapper, { [styles.desktopTabsWrapper]: isDesktop }), children: [_jsx(Tabs.TabBar, { orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: cn({ [styles.desktopTabs]: isDesktop }), children: tabs.map(({ id, title, disabled, icon }) => (_jsx(Tabs.Tab, { value: id, 
+    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, extractSupportProps(rest), { children: _jsx(Tabs, { value: activeTab, onChange: setActiveTab, children: _jsxs("div", { className: styles.sectionContent, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.tabsWrapper, { [styles.desktopTabsWrapper]: isDesktop }), children: [_jsx(Tabs.TabBar, { orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: cn({ [styles.desktopTabs]: isDesktop }), children: tabs.map(({ id, title, disabled, icon, onClick }) => (_jsx(Tabs.Tab, { value: id, 
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                     // @ts-ignore
-                                    label: _jsxs(_Fragment, { children: [_jsx(RichText, { richText: title }), _jsx(TabIcon, { icon: icon })] }), disabled: disabled }, id))) }), Boolean(button) && (_jsx(ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] }), tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => (_jsxs(Tabs.TabContent, { value: id, className: styles.mediaWrapper, children: [image && (_jsx("div", { className: styles.imageWrapper, children: _jsx("img", { className: styles.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` }) })), video && (_jsx(SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` })), (mediaTitle || mediaSubtitle) && (_jsx(SectionTitle, { titleSectionSize: 's', layoutType: layoutType, title: mediaTitle, description: mediaSubtitle })), mediaDescription && _jsx(SectionTitle, { layoutType: layoutType, description: mediaDescription })] }, id)))] }) }) })));
+                                    label: _jsxs(_Fragment, { children: [_jsx(RichText, { richText: title }), _jsx(TabIcon, { icon: icon })] }), disabled: disabled, onClick: onClick }, id))) }), Boolean(button) && (_jsx(ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] }), tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => (_jsxs(Tabs.TabContent, { value: id, className: styles.mediaWrapper, children: [image && (_jsx("div", { className: styles.imageWrapper, children: _jsx("img", { className: styles.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` }) })), video && (_jsx(SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` })), (mediaTitle || mediaSubtitle) && (_jsx(SectionTitle, { titleSectionSize: 's', layoutType: layoutType, title: mediaTitle, description: mediaSubtitle })), mediaDescription && _jsx(SectionTitle, { layoutType: layoutType, description: mediaDescription })] }, id)))] }) }) })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "1.1.8-preview-481817ca.0",
+  "version": "1.1.8",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,14 +37,14 @@
   "scripts": {},
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "17.0.5",
-    "@cloud-ru/uikit-product-mobile-fields": "2.0.8-preview-481817ca.0",
-    "@cloud-ru/uikit-product-site-cards": "1.1.6-preview-481817ca.0",
+    "@cloud-ru/uikit-product-mobile-fields": "2.0.7",
+    "@cloud-ru/uikit-product-site-cards": "1.1.5",
     "@cloud-ru/uikit-product-site-case-card": "1.1.2",
     "@cloud-ru/uikit-product-site-grid": "1.1.2",
     "@cloud-ru/uikit-product-site-layout": "1.1.2",
     "@cloud-ru/uikit-product-site-media": "1.1.5",
     "@cloud-ru/uikit-product-site-rich-text": "1.1.2",
-    "@cloud-ru/uikit-product-site-table": "1.1.3-preview-481817ca.0",
+    "@cloud-ru/uikit-product-site-table": "1.1.2",
     "@cloud-ru/uikit-product-utils": "9.0.2",
     "@snack-uikit/accordion": "0.11.0",
     "@snack-uikit/button": "0.19.7",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "61b29cd0c60aba104c60fa645489cba57f0066e9"
+  "gitHead": "015956d43324a417a39c0ee5eb6eb906a123592a"
 }

package/src/components/SectionContentTabs/SectionContentTabs.tsx

@@ -92,7 +92,7 @@ export function SectionContentTabs({
               markerPosition={isDesktop ? 'before' : 'after'}
               className={cn({ [styles.desktopTabs]: isDesktop })}
             >
-              {tabs.map(({ id, title, disabled, icon }) => (
+              {tabs.map(({ id, title, disabled, icon, onClick }) => (
                 <Tabs.Tab
                   key={id}
                   value={id}
@@ -105,6 +105,7 @@ export function SectionContentTabs({
                     </>
                   }
                   disabled={disabled}
+                  onClick={onClick}
                 />
               ))}
             </Tabs.TabBar>