@cloud-ru/ds-accordion 1.0.0

package/dist/cjs/Accordion.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const CollapseBlock_1 = require("./components/CollapseBlock");
+function AccordionBase({ selectionMode = toggles_1.SELECTION_MODE.Single, onExpandedChange, expandedDefault, expanded, children, }) {
+    const toggleGroupProps = {
+        selectionMode,
+        defaultValue: expandedDefault,
+        value: expanded,
+        onChange: onExpandedChange,
+        children,
+    };
+    return (0, jsx_runtime_1.jsx)(toggles_1.ToggleGroup, { ...toggleGroupProps });
+}
+exports.Accordion = Object.assign(AccordionBase, {
+    CollapseBlockPrimary: CollapseBlock_1.CollapseBlockPrimary,
+    CollapseBlockSecondary: CollapseBlock_1.CollapseBlockSecondary,
+    CollapseBlockTertiary: CollapseBlock_1.CollapseBlockTertiary,
+});

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

@@ -0,0 +1,45 @@
+import { type BackgroundPredefinedFill } from '@cloud-ru/ds-materials';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+import { ChevronPosition, View } from '../../types';
+type Component = 'accordionPrimary' | 'accordionSecondary' | 'accordionTertiary';
+export type CollapseBlockProps = PropsWithChildren<WithSupportProps<{
+    /** Уникальный идентификатор блока в группе переключателей */
+    id: string;
+    /** Начальное состояние раскрытия (uncontrolled) */
+    title?: string;
+    /** Контент справа от заголовка */
+    afterTitle?: ReactNode;
+    /** Подзаголовок под строкой заголовка */
+    subTitle?: ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Визуальный вариант обложки (`simple`, `outline`, `elevated`) */
+    view?: View;
+    /** Положение шеврона-раскрытия относительно текста (`before` | `after`) */
+    chevronPosition?: ChevronPosition;
+    /** Показывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`) */
+    showChevron?: boolean;
+    /**
+     * Слой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`).
+     * По умолчанию `material/neutralBackground1Level`.
+     */
+    backgroundPredefined?: BackgroundPredefinedFill;
+    /** Уровень аккордеона: размер типографики и отступы */
+    component: Component;
+    /** Оставлять ли контент в DOM при сворачивании */
+    keepMounted?: 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 type CollapseBlockComponent = CollapseBlockProps['component'];
+type CollapseBlockPropsWithoutComponent = Omit<CollapseBlockProps, 'component'>;
+export type CollapseBlockPrimaryProps = CollapseBlockPropsWithoutComponent;
+export declare const CollapseBlockPrimary: (props: CollapseBlockPropsWithoutComponent) => import("react/jsx-runtime").JSX.Element;
+export type CollapseBlockSecondaryProps = CollapseBlockPropsWithoutComponent;
+export declare const CollapseBlockSecondary: (props: CollapseBlockPropsWithoutComponent) => import("react/jsx-runtime").JSX.Element;
+export type CollapseBlockTertiaryProps = Omit<CollapseBlockPropsWithoutComponent, 'view' | 'backgroundPredefined'>;
+export declare const CollapseBlockTertiary: (props: CollapseBlockTertiaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseBlockTertiary = exports.CollapseBlockSecondary = exports.CollapseBlockPrimary = void 0;
+exports.CollapseBlock = CollapseBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const materials_1 = require("@cloud-ru/ds-materials");
+const theme_1 = require("@cloud-ru/ds-theme");
+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 constants_1 = require("../../constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const MAP_COMPONENT_TO_TILE_SIZE = {
+    accordionPrimary: 'l',
+    accordionSecondary: 'm',
+    accordionTertiary: 's',
+};
+/**
+ * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
+ */
+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 }) {
+    const { isOpen, isMounted, toggleOpen, isCompletelyOpen, isCompletelyClose } = (0, hooks_1.useCollapseState)({
+        id,
+        keepMounted,
+    });
+    const { appearance, level } = (0, materials_1.backgroundPredefinedFillToAcrylic)(backgroundPredefined);
+    // Фиксируем density, остальные оси (colorScheme/brand/…) наследуем из контекста темы.
+    const themeClassName = (0, theme_1.useThemeClassnames)({ density: 'compact' });
+    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)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.chevronWrapper, themeClassName), children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', icon: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": constants_1.TEST_IDS.chevron, appearance: 'neutral' }) }))] }), (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] }) })] }));
+}
+function getCollapseBlock(component) {
+    return function CollapseBlockWithComponent(props) {
+        return (0, jsx_runtime_1.jsx)(CollapseBlock, { ...props, component: component });
+    };
+}
+exports.CollapseBlockPrimary = getCollapseBlock('accordionPrimary');
+exports.CollapseBlockSecondary = getCollapseBlock('accordionSecondary');
+exports.CollapseBlockTertiary = getCollapseBlock('accordionTertiary');

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

@@ -0,0 +1,12 @@
+type UseCollapseStateProps = {
+    id: string;
+    keepMounted?: boolean;
+};
+export declare function useCollapseState({ id, keepMounted }: UseCollapseStateProps): {
+    isOpen: boolean;
+    isMounted: boolean;
+    toggleOpen: () => void;
+    isCompletelyOpen: boolean;
+    isCompletelyClose: boolean;
+};
+export {};

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapseState = useCollapseState;
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+function useCollapseState({ id, keepMounted = false }) {
+    const { isChecked: isOpen, handleClick: toggleOpen } = (0, toggles_1.useToggleGroup)({ value: id });
+    // Контент доживает до конца закрывающей анимации, но при открытии появляется синхронно с
+    // `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);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setKeepMountedWhileClosing(true);
+            setIsCompletelyClose(false);
+            timeoutRef.current = setTimeout(() => {
+                setIsCompletelyOpen(true);
+            }, constants_1.ANIMATION_DURATION);
+        }
+        else {
+            setIsCompletelyOpen(false);
+            timeoutRef.current = setTimeout(() => {
+                setIsCompletelyClose(true);
+                setKeepMountedWhileClosing(false);
+            }, constants_1.ANIMATION_DURATION);
+        }
+        return () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+        };
+    }, [isOpen, keepMounted]);
+    return {
+        isOpen,
+        isMounted,
+        toggleOpen,
+        isCompletelyOpen,
+        isCompletelyClose,
+    };
+}

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

@@ -0,0 +1 @@
+export * from './CollapseBlock';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CollapseBlock"), exports);