@cloud-ru/ds-accordion 1.1.7-preview-5c9b8135.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.2.0 (2026-10-05)
+
+### Features
+
+- **FF-9218:** add stopSlotsClickPropagation prop ([0284a62](https://github.com/cloud-ru-tech/snack-v2/commit/0284a62cd9bbc2193627f627e3d366cd84dcf989))
+
 ## 1.1.6 (2026-10-02)
 
 ### Bug Fixes

package/README.md

@@ -315,6 +315,7 @@ export function NestedLevels() {
 | `id` | `string` | — | Уникальный идентификатор блока в группе переключателей |
 | `keepMounted` | `boolean` | `false` | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | `true` | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
+| `stopSlotsClickPropagation` | `boolean` | `false` | Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
 | `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | `simple` | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
@@ -364,6 +365,7 @@ export function AfterTitle() {
 | `id` | `string` | — | Уникальный идентификатор блока в группе переключателей |
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
+| `stopSlotsClickPropagation` | `boolean` | `false` | Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
 | `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | — | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
@@ -421,6 +423,7 @@ export function ChevronBefore() {
 | `id` | `string` | — | Уникальный идентификатор блока в группе переключателей |
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
+| `stopSlotsClickPropagation` | `boolean` | `false` | Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
 | `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | — | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
@@ -476,6 +479,7 @@ export function NestedLevels() {
 | `id` | `string` | — | Уникальный идентификатор блока в группе переключателей |
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
+| `stopSlotsClickPropagation` | `boolean` | `false` | Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
 | `title` | `string` | — | Заголовок блока |
 

package/dist/cjs/Accordion.d.ts

@@ -87,6 +87,7 @@ export declare const Accordion: typeof AccordionBase & {
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;
+        stopSlotsClickPropagation?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     CollapseBlockSecondary: (props: {
         'data-test-id'?: string | undefined;
@@ -154,6 +155,7 @@ export declare const Accordion: typeof AccordionBase & {
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;
+        stopSlotsClickPropagation?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     CollapseBlockTertiary: (props: import("./components/CollapseBlock").CollapseBlockTertiaryProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/components/CollapseBlock/CollapseBlock.d.ts

@@ -32,11 +32,16 @@ export type CollapseBlockProps = PropsWithChildren<WithSupportProps<{
     component: Component;
     /** Оставлять ли контент в DOM при сворачивании */
     keepMounted?: boolean;
+    /**
+     * Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока
+     * @default false
+     */
+    stopSlotsClickPropagation?: boolean;
 }>>;
 /**
  * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
  */
-export declare function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view, chevronPosition, backgroundPredefined, keepMounted, component, showChevron, 'data-test-id': dataTestId, ...rest }: CollapseBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view, chevronPosition, backgroundPredefined, keepMounted, component, showChevron, stopSlotsClickPropagation, 'data-test-id': dataTestId, ...rest }: CollapseBlockProps): import("react/jsx-runtime").JSX.Element;
 export type CollapseBlockComponent = CollapseBlockProps['component'];
 type CollapseBlockPropsWithoutComponent = Omit<CollapseBlockProps, 'component'>;
 export type CollapseBlockPrimaryProps = CollapseBlockPropsWithoutComponent;

package/dist/cjs/components/CollapseBlock/CollapseBlock.js

@@ -16,7 +16,11 @@ const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-const stopPropagation = (e) => e.stopPropagation();
+const getStopPropagationHandler = (stopPropagation) => (e) => {
+    if (stopPropagation) {
+        e.stopPropagation();
+    }
+};
 const MAP_COMPONENT_TO_TILE_SIZE = {
     accordionPrimary: 'l',
     accordionSecondary: 'm',
@@ -25,7 +29,7 @@ const MAP_COMPONENT_TO_TILE_SIZE = {
 /**
  * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
  */
-function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view = constants_1.VIEW.Simple, chevronPosition = constants_1.CHEVRON_POSITION.After, backgroundPredefined = materials_1.BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level, keepMounted = false, component, showChevron = true, 'data-test-id': dataTestId, ...rest }) {
+function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view = constants_1.VIEW.Simple, chevronPosition = constants_1.CHEVRON_POSITION.After, backgroundPredefined = materials_1.BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level, keepMounted = false, component, showChevron = true, stopSlotsClickPropagation = false, 'data-test-id': dataTestId, ...rest }) {
     const { isOpen, isMounted, toggleOpen, isCompletelyOpen, isCompletelyClose } = (0, hooks_1.useCollapseState)({
         id,
         keepMounted,
@@ -39,9 +43,9 @@ function CollapseBlock({ id, title, afterTitle, subTitle, children, className, v
             '--sn-collapse-block-animation-duration': `${constants_1.ANIMATION_DURATION}ms`,
         }, children: [component !== 'accordionTertiary' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylic }), view === constants_1.VIEW.Outline && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.stateLayer, "data-state": 'borderOnBackground' })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleContent, "data-expanded": isOpen || undefined, "data-completely-close": isCompletelyClose || undefined, "data-chevron-position": chevronPosition, onClick: toggleOpen, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleLine, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { size: MAP_COMPONENT_TO_TILE_SIZE[component], variant: 'title', className: styles_module_scss_1.default.title, id: titleId, "data-test-id": constants_1.TEST_IDS.title, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, variant: 'end' }) })), afterTitle && (
                                     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-                                    (0, jsx_runtime_1.jsx)("div", { id: afterTitleId, "data-test-id": constants_1.TEST_IDS.afterTitle, className: styles_module_scss_1.default.afterTitle, onClick: stopPropagation, children: afterTitle }))] }), subTitle && (
+                                    (0, jsx_runtime_1.jsx)("div", { id: afterTitleId, "data-test-id": constants_1.TEST_IDS.afterTitle, className: styles_module_scss_1.default.afterTitle, onClick: getStopPropagationHandler(stopSlotsClickPropagation), children: afterTitle }))] }), subTitle && (
                             /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-                            (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subTitle, "data-test-id": constants_1.TEST_IDS.subTitle, onClick: stopPropagation, children: subTitle }))] }), showChevron && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.chevronWrapper, children: (0, jsx_runtime_1.jsx)(helperComponents_1.ChevronButton, { expanded: isOpen, contentId: contentId, labelledBy: chevronLabelledBy, "data-test-id": constants_1.TEST_IDS.chevron }) }))] }), (0, jsx_runtime_1.jsx)("div", { id: contentId, className: styles_module_scss_1.default.collapse, "data-expanded": isOpen || undefined, "aria-hidden": !isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, isCompletelyOpen && styles_module_scss_1.default.containerCompletelyOpen), "data-completely-close": isCompletelyClose || undefined, "data-expanded": isOpen || undefined, children: [(0, jsx_runtime_1.jsx)("div", {}), isMounted ? (0, jsx_runtime_1.jsx)("div", { "data-test-id": constants_1.TEST_IDS.content, children: children }) : null] }) })] }));
+                            (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subTitle, "data-test-id": constants_1.TEST_IDS.subTitle, onClick: getStopPropagationHandler(stopSlotsClickPropagation), children: subTitle }))] }), showChevron && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.chevronWrapper, children: (0, jsx_runtime_1.jsx)(helperComponents_1.ChevronButton, { expanded: isOpen, contentId: contentId, labelledBy: chevronLabelledBy, "data-test-id": constants_1.TEST_IDS.chevron }) }))] }), (0, jsx_runtime_1.jsx)("div", { id: contentId, className: styles_module_scss_1.default.collapse, "data-expanded": isOpen || undefined, "aria-hidden": !isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, isCompletelyOpen && styles_module_scss_1.default.containerCompletelyOpen), "data-completely-close": isCompletelyClose || undefined, "data-expanded": isOpen || undefined, children: [(0, jsx_runtime_1.jsx)("div", {}), isMounted ? (0, jsx_runtime_1.jsx)("div", { "data-test-id": constants_1.TEST_IDS.content, children: children }) : null] }) })] }));
 }
 function getCollapseBlock(component) {
     return function CollapseBlockWithComponent(props) {

package/dist/esm/Accordion.d.ts

@@ -87,6 +87,7 @@ export declare const Accordion: typeof AccordionBase & {
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;
+        stopSlotsClickPropagation?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     CollapseBlockSecondary: (props: {
         'data-test-id'?: string | undefined;
@@ -154,6 +155,7 @@ export declare const Accordion: typeof AccordionBase & {
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;
+        stopSlotsClickPropagation?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     CollapseBlockTertiary: (props: import("./components").CollapseBlockTertiaryProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/components/CollapseBlock/CollapseBlock.d.ts

@@ -32,11 +32,16 @@ export type CollapseBlockProps = PropsWithChildren<WithSupportProps<{
     component: Component;
     /** Оставлять ли контент в DOM при сворачивании */
     keepMounted?: boolean;
+    /**
+     * Клики в слотах afterTitle и subTitle не тригерять расскрытие/закрытие блока
+     * @default false
+     */
+    stopSlotsClickPropagation?: boolean;
 }>>;
 /**
  * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
  */
-export declare function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view, chevronPosition, backgroundPredefined, keepMounted, component, showChevron, 'data-test-id': dataTestId, ...rest }: CollapseBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view, chevronPosition, backgroundPredefined, keepMounted, component, showChevron, stopSlotsClickPropagation, 'data-test-id': dataTestId, ...rest }: CollapseBlockProps): import("react/jsx-runtime").JSX.Element;
 export type CollapseBlockComponent = CollapseBlockProps['component'];
 type CollapseBlockPropsWithoutComponent = Omit<CollapseBlockProps, 'component'>;
 export type CollapseBlockPrimaryProps = CollapseBlockPropsWithoutComponent;

package/dist/esm/components/CollapseBlock/CollapseBlock.js

@@ -9,7 +9,11 @@ import { ANIMATION_DURATION, CHEVRON_POSITION, TEST_IDS, VIEW } from '../../cons
 import { ChevronButton } from '../../helperComponents/index.js';
 import { useCollapseState } from './hooks.js';
 import styles from './styles.module.css';
-const stopPropagation = (e) => e.stopPropagation();
+const getStopPropagationHandler = (stopPropagation) => (e) => {
+    if (stopPropagation) {
+        e.stopPropagation();
+    }
+};
 const MAP_COMPONENT_TO_TILE_SIZE = {
     accordionPrimary: 'l',
     accordionSecondary: 'm',
@@ -18,7 +22,7 @@ const MAP_COMPONENT_TO_TILE_SIZE = {
 /**
  * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
  */
-export function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view = VIEW.Simple, chevronPosition = CHEVRON_POSITION.After, backgroundPredefined = BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level, keepMounted = false, component, showChevron = true, 'data-test-id': dataTestId, ...rest }) {
+export function CollapseBlock({ id, title, afterTitle, subTitle, children, className, view = VIEW.Simple, chevronPosition = CHEVRON_POSITION.After, backgroundPredefined = BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level, keepMounted = false, component, showChevron = true, stopSlotsClickPropagation = false, 'data-test-id': dataTestId, ...rest }) {
     const { isOpen, isMounted, toggleOpen, isCompletelyOpen, isCompletelyClose } = useCollapseState({
         id,
         keepMounted,
@@ -32,9 +36,9 @@ export function CollapseBlock({ id, title, afterTitle, subTitle, children, class
             '--sn-collapse-block-animation-duration': `${ANIMATION_DURATION}ms`,
         }, children: [component !== 'accordionTertiary' && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.acrylic }), view === VIEW.Outline && _jsx("div", { className: styles.stateLayer, "data-state": 'borderOnBackground' })] })), _jsxs("div", { className: styles.titleContent, "data-expanded": isOpen || undefined, "data-completely-close": isCompletelyClose || undefined, "data-chevron-position": chevronPosition, onClick: toggleOpen, children: [_jsxs("div", { className: styles.titleWrapper, children: [_jsxs("div", { className: styles.titleLine, children: [title && (_jsx(Typography, { size: MAP_COMPONENT_TO_TILE_SIZE[component], variant: 'title', className: styles.title, id: titleId, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, variant: 'end' }) })), afterTitle && (
                                     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-                                    _jsx("div", { id: afterTitleId, "data-test-id": TEST_IDS.afterTitle, className: styles.afterTitle, onClick: stopPropagation, children: afterTitle }))] }), subTitle && (
+                                    _jsx("div", { id: afterTitleId, "data-test-id": TEST_IDS.afterTitle, className: styles.afterTitle, onClick: getStopPropagationHandler(stopSlotsClickPropagation), children: afterTitle }))] }), subTitle && (
                             /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-                            _jsx("div", { className: styles.subTitle, "data-test-id": TEST_IDS.subTitle, onClick: stopPropagation, children: subTitle }))] }), showChevron && (_jsx("div", { className: styles.chevronWrapper, children: _jsx(ChevronButton, { expanded: isOpen, contentId: contentId, labelledBy: chevronLabelledBy, "data-test-id": TEST_IDS.chevron }) }))] }), _jsx("div", { id: contentId, className: styles.collapse, "data-expanded": isOpen || undefined, "aria-hidden": !isOpen, children: _jsxs("div", { className: cn(styles.container, isCompletelyOpen && styles.containerCompletelyOpen), "data-completely-close": isCompletelyClose || undefined, "data-expanded": isOpen || undefined, children: [_jsx("div", {}), isMounted ? _jsx("div", { "data-test-id": TEST_IDS.content, children: children }) : null] }) })] }));
+                            _jsx("div", { className: styles.subTitle, "data-test-id": TEST_IDS.subTitle, onClick: getStopPropagationHandler(stopSlotsClickPropagation), children: subTitle }))] }), showChevron && (_jsx("div", { className: styles.chevronWrapper, children: _jsx(ChevronButton, { expanded: isOpen, contentId: contentId, labelledBy: chevronLabelledBy, "data-test-id": TEST_IDS.chevron }) }))] }), _jsx("div", { id: contentId, className: styles.collapse, "data-expanded": isOpen || undefined, "aria-hidden": !isOpen, children: _jsxs("div", { className: cn(styles.container, isCompletelyOpen && styles.containerCompletelyOpen), "data-completely-close": isCompletelyClose || undefined, "data-expanded": isOpen || undefined, children: [_jsx("div", {}), isMounted ? _jsx("div", { "data-test-id": TEST_IDS.content, children: children }) : null] }) })] }));
 }
 function getCollapseBlock(component) {
     return function CollapseBlockWithComponent(props) {