@cloud-ru/ds-accordion 1.0.8-preview-d90ac2be.0 → 1.1.0

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.0 (2026-09-25)
+
+### Bug Fixes
+
+- **FF-9085:** render accordion demo content as block to drop inherited line box ([a5c3b97](https://github.com/cloud-ru-tech/snack-v2/commit/a5c3b97d195f65f585c38b413fc7afcdbe0b4645))
+- **FF-9085:** restore tertiary body padding and chevron label in accordion ([4dc4eec](https://github.com/cloud-ru-tech/snack-v2/commit/4dc4eecfbc3d0709324a694a8083f647000c445a))
+
+### Features
+
+- **FF-9083:** align buttons with Snack UI Kit and extend mobile touch target ([bad5a26](https://github.com/cloud-ru-tech/snack-v2/commit/bad5a268c1d8328a361199b64399fa23380e6da8))
+
 ## 1.0.7 (2026-09-18)
 
 ### Bug Fixes

package/README.md

@@ -305,7 +305,7 @@ export function NestedLevels() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `afterTitle` | `ReactNode` | — | Контент справа от заголовка |
+| `afterTitle` | `ReactNode` | — | Контент справа от заголовка. Текст слота входит в доступное имя кнопки-шеврона вместе с `title`, <br/> поэтому без `title` в слот можно передать собственный заголовок. |
 | `backgroundPredefined` | `"blueBackground"` \| `"decorTransparent"` \| `"greenBackground"` \| `"neutralBackground1Level"` \| `"orangeBackground"` \| `"pinkBackground"` \| `"primaryBackground"` \| `"redBackground"` \| `"transparent"` \| `"violetBackground"` \| `"yellowBackground"` | `neutralBackground1Level` | Слой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`). <br/> По умолчанию `material/neutralBackground1Level`. |
 | `chevronPosition` | `"after"` \| `"before"` | `after` | Положение шеврона-раскрытия относительно текста (`before` \| `after`) |
 | `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — |  |
@@ -316,7 +316,7 @@ export function NestedLevels() {
 | `keepMounted` | `boolean` | `false` | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | `true` | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
-| `title` | `string` | — | Начальное состояние раскрытия (uncontrolled) |
+| `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | `simple` | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
 
 ##### Related types
@@ -355,7 +355,7 @@ export function AfterTitle() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `afterTitle` | `ReactNode` | — | Контент справа от заголовка |
+| `afterTitle` | `ReactNode` | — | Контент справа от заголовка. Текст слота входит в доступное имя кнопки-шеврона вместе с `title`, <br/> поэтому без `title` в слот можно передать собственный заголовок. |
 | `backgroundPredefined` | `"blueBackground"` \| `"decorTransparent"` \| `"greenBackground"` \| `"neutralBackground1Level"` \| `"orangeBackground"` \| `"pinkBackground"` \| `"primaryBackground"` \| `"redBackground"` \| `"transparent"` \| `"violetBackground"` \| `"yellowBackground"` | — | Слой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`). <br/> По умолчанию `material/neutralBackground1Level`. |
 | `chevronPosition` | `"after"` \| `"before"` | — | Положение шеврона-раскрытия относительно текста (`before` \| `after`) |
 | `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — |  |
@@ -365,7 +365,7 @@ export function AfterTitle() {
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
-| `title` | `string` | — | Начальное состояние раскрытия (uncontrolled) |
+| `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | — | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
 
 #### Related types
@@ -412,7 +412,7 @@ export function ChevronBefore() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `afterTitle` | `ReactNode` | — | Контент справа от заголовка |
+| `afterTitle` | `ReactNode` | — | Контент справа от заголовка. Текст слота входит в доступное имя кнопки-шеврона вместе с `title`, <br/> поэтому без `title` в слот можно передать собственный заголовок. |
 | `backgroundPredefined` | `"blueBackground"` \| `"decorTransparent"` \| `"greenBackground"` \| `"neutralBackground1Level"` \| `"orangeBackground"` \| `"pinkBackground"` \| `"primaryBackground"` \| `"redBackground"` \| `"transparent"` \| `"violetBackground"` \| `"yellowBackground"` | — | Слой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`). <br/> По умолчанию `material/neutralBackground1Level`. |
 | `chevronPosition` | `"after"` \| `"before"` | — | Положение шеврона-раскрытия относительно текста (`before` \| `after`) |
 | `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — |  |
@@ -422,7 +422,7 @@ export function ChevronBefore() {
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
-| `title` | `string` | — | Начальное состояние раскрытия (uncontrolled) |
+| `title` | `string` | — | Заголовок блока |
 | `view` | `"elevated"` \| `"outline"` \| `"simple"` | — | Визуальный вариант обложки (`simple`, `outline`, `elevated`) |
 
 #### Related types
@@ -468,7 +468,7 @@ export function NestedLevels() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `afterTitle` | `ReactNode` | — | Контент справа от заголовка |
+| `afterTitle` | `ReactNode` | — | Контент справа от заголовка. Текст слота входит в доступное имя кнопки-шеврона вместе с `title`, <br/> поэтому без `title` в слот можно передать собственный заголовок. |
 | `chevronPosition` | `"after"` \| `"before"` | — | Положение шеврона-раскрытия относительно текста (`before` \| `after`) |
 | `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — |  |
 | `className` | `string` | — | Дополнительный класс корневого элемента |
@@ -477,7 +477,7 @@ export function NestedLevels() {
 | `keepMounted` | `boolean` | — | Оставлять ли контент в DOM при сворачивании |
 | `showChevron` | `boolean` | — | Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) |
 | `subTitle` | `ReactNode` | — | Подзаголовок под строкой заголовка |
-| `title` | `string` | — | Начальное состояние раскрытия (uncontrolled) |
+| `title` | `string` | — | Заголовок блока |
 
 #### Related types
 

package/dist/cjs/Accordion.d.ts

@@ -22,9 +22,10 @@ export type AccordionProps = PropsWithChildren<{
 declare function AccordionBase({ selectionMode, onExpandedChange, expandedDefault, expanded, children, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export declare const Accordion: typeof AccordionBase & {
     CollapseBlockPrimary: (props: {
-        className?: string | undefined;
-        children?: import("react").ReactNode;
         'data-test-id'?: string | undefined;
+        children?: import("react").ReactNode;
+        className?: string | undefined;
+        id: string;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -78,20 +79,20 @@ export declare const Accordion: typeof AccordionBase & {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        view?: import("./types").View | undefined;
-        title?: string | undefined;
-        id: string;
         keepMounted?: boolean | undefined;
+        title?: string | undefined;
         afterTitle?: import("react").ReactNode;
         subTitle?: import("react").ReactNode;
+        view?: import("./types").View | undefined;
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     CollapseBlockSecondary: (props: {
-        className?: string | undefined;
-        children?: import("react").ReactNode;
         'data-test-id'?: string | undefined;
+        children?: import("react").ReactNode;
+        className?: string | undefined;
+        id: string;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -145,12 +146,11 @@ export declare const Accordion: typeof AccordionBase & {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        view?: import("./types").View | undefined;
-        title?: string | undefined;
-        id: string;
         keepMounted?: boolean | undefined;
+        title?: string | undefined;
         afterTitle?: import("react").ReactNode;
         subTitle?: import("react").ReactNode;
+        view?: import("./types").View | undefined;
         chevronPosition?: import("./types").ChevronPosition | undefined;
         backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
         showChevron?: boolean | undefined;

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

@@ -6,9 +6,12 @@ type Component = 'accordionPrimary' | 'accordionSecondary' | 'accordionTertiary'
 export type CollapseBlockProps = PropsWithChildren<WithSupportProps<{
     /** Уникальный идентификатор блока в группе переключателей */
     id: string;
-    /** Начальное состояние раскрытия (uncontrolled) */
+    /** Заголовок блока */
     title?: string;
-    /** Контент справа от заголовка */
+    /**
+     * Контент справа от заголовка. Текст слота входит в доступное имя кнопки-шеврона вместе с `title`,
+     * поэтому без `title` в слот можно передать собственный заголовок.
+     */
     afterTitle?: ReactNode;
     /** Подзаголовок под строкой заголовка */
     subTitle?: ReactNode;

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

@@ -11,8 +11,9 @@ const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
 const typography_1 = require("@cloud-ru/ds-typography");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const constants_1 = require("../../constants");
-const CollapseChevron_1 = require("../../helperComponents/CollapseChevron");
+const helperComponents_1 = require("../../helperComponents");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const MAP_COMPONENT_TO_TILE_SIZE = {
@@ -29,9 +30,13 @@ function CollapseBlock({ id, title, afterTitle, subTitle, children, className, v
         keepMounted,
     });
     const { appearance, level } = (0, materials_1.backgroundPredefinedFillToAcrylic)(backgroundPredefined);
+    const titleId = (0, react_1.useId)();
+    const afterTitleId = (0, react_1.useId)();
+    const contentId = (0, react_1.useId)();
+    const chevronLabelledBy = [title && titleId, afterTitle && afterTitleId].filter(Boolean).join(' ') || undefined;
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.extractSupportProps)(rest), className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-acrylic-appearance": appearance, "data-acrylic-level": level, "data-expanded": isOpen, "data-completely-open": isCompletelyOpen || undefined, "data-view": view, "data-component": component, "data-test-id": dataTestId ?? constants_1.TEST_IDS.collapseBlock, style: {
             '--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, "data-test-id": constants_1.TEST_IDS.title, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, variant: 'end' }) })), afterTitle && ((0, jsx_runtime_1.jsx)("div", { "data-test-id": constants_1.TEST_IDS.afterTitle, className: styles_module_scss_1.default.afterTitle, children: afterTitle }))] }), subTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subTitle, "data-test-id": constants_1.TEST_IDS.subTitle, children: subTitle }))] }), showChevron && (0, jsx_runtime_1.jsx)(CollapseChevron_1.CollapseChevron, { isOpen: isOpen, className: styles_module_scss_1.default.chevronWrapper })] }), (0, jsx_runtime_1.jsx)("div", { 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, className: styles_module_scss_1.default.content, children: children })) : null] }) })] }));
+        }, 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 && ((0, jsx_runtime_1.jsx)("div", { id: afterTitleId, "data-test-id": constants_1.TEST_IDS.afterTitle, className: styles_module_scss_1.default.afterTitle, children: afterTitle }))] }), subTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subTitle, "data-test-id": constants_1.TEST_IDS.subTitle, 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/cjs/components/CollapseBlock/hooks.js

@@ -9,21 +9,12 @@ function useCollapseState({ id, keepMounted = false }) {
     // Контент доживает до конца закрывающей анимации, но при открытии появляется синхронно с
     // `isOpen` — если монтировать его эффектом, первый кадр раскрытия считается по пустому телу
     // и высота стартует рывком.
-    // Стартует с `isOpen`: у раскрытого при маунте блока контент уже смонтирован, и эффект не должен
-    // добавлять лишний рендер, переключая флаг.
-    const [keepMountedWhileClosing, setKeepMountedWhileClosing] = (0, react_1.useState)(isOpen);
+    const [keepMountedWhileClosing, setKeepMountedWhileClosing] = (0, react_1.useState)(false);
     const isMounted = isOpen || keepMounted || keepMountedWhileClosing;
     const [isCompletelyOpen, setIsCompletelyOpen] = (0, react_1.useState)(isOpen);
     const [isCompletelyClose, setIsCompletelyClose] = (0, react_1.useState)(!isOpen);
     const timeoutRef = (0, react_1.useRef)(null);
-    const isFirstRunRef = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
-        // Начальные флаги уже согласованы с `isOpen`, анимировать нечего: без этого каждый блок при
-        // маунте ставил таймер на `ANIMATION_DURATION` ради setState с тем же значением.
-        if (isFirstRunRef.current) {
-            isFirstRunRef.current = false;
-            return;
-        }
         if (isOpen) {
             setKeepMountedWhileClosing(true);
             setIsCompletelyClose(false);