@cloud-ru/ds-accordion 1.0.0

package/dist/esm/Accordion.d.ts

@@ -0,0 +1,160 @@
+import { SELECTION_MODE } from '@cloud-ru/ds-toggles';
+import { PropsWithChildren } from 'react';
+export type AccordionProps = PropsWithChildren<{
+    /** Начальное состояние */
+    expandedDefault?: string;
+    /** Controlled состояние */
+    expanded?: string;
+    /** Controlled обработчик измения состояния */
+    onExpandedChange?(value: (string | undefined) | string): void;
+    /** Режим работы аккордиона */
+    selectionMode?: typeof SELECTION_MODE.Single;
+} | {
+    /** Начальное состояние */
+    expandedDefault?: string[];
+    /** Controlled состояние */
+    expanded?: string[];
+    /** Controlled обработчик измения состояния */
+    onExpandedChange?(value: (string[] | undefined) | string[]): void;
+    /** Режим работы аккордиона */
+    selectionMode: typeof SELECTION_MODE.Multiple;
+}>;
+declare function AccordionBase({ selectionMode, onExpandedChange, expandedDefault, expanded, children, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: typeof AccordionBase & {
+    CollapseBlockPrimary: (props: {
+        id: string;
+        title?: string | undefined;
+        afterTitle?: import("react").ReactNode;
+        subTitle?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string | undefined;
+        view?: import("./types").View | undefined;
+        chevronPosition?: import("./types").ChevronPosition | undefined;
+        backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
+        keepMounted?: boolean | undefined;
+        showChevron?: boolean | undefined;
+        'data-test-id'?: string | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    CollapseBlockSecondary: (props: {
+        id: string;
+        title?: string | undefined;
+        afterTitle?: import("react").ReactNode;
+        subTitle?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string | undefined;
+        view?: import("./types").View | undefined;
+        chevronPosition?: import("./types").ChevronPosition | undefined;
+        backgroundPredefined?: import("@cloud-ru/ds-materials").BackgroundPredefinedFill | undefined;
+        keepMounted?: boolean | undefined;
+        showChevron?: boolean | undefined;
+        'data-test-id'?: string | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    CollapseBlockTertiary: (props: import("./components").CollapseBlockTertiaryProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/esm/Accordion.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SELECTION_MODE, ToggleGroup } from '@cloud-ru/ds-toggles';
+import { CollapseBlockPrimary, CollapseBlockSecondary, CollapseBlockTertiary } from './components/CollapseBlock/index.js';
+function AccordionBase({ selectionMode = SELECTION_MODE.Single, onExpandedChange, expandedDefault, expanded, children, }) {
+    const toggleGroupProps = {
+        selectionMode,
+        defaultValue: expandedDefault,
+        value: expanded,
+        onChange: onExpandedChange,
+        children,
+    };
+    return _jsx(ToggleGroup, { ...toggleGroupProps });
+}
+export const Accordion = Object.assign(AccordionBase, {
+    CollapseBlockPrimary,
+    CollapseBlockSecondary,
+    CollapseBlockTertiary,
+});

package/dist/esm/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.js';
+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/esm/components/CollapseBlock/CollapseBlock.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { BACKGROUND_PREDEFINED_FILL, backgroundPredefinedFillToAcrylic, } from '@cloud-ru/ds-materials';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ANIMATION_DURATION, CHEVRON_POSITION, TEST_IDS, VIEW } from '../../constants.js';
+import { useCollapseState } from './hooks.js';
+import styles from './styles.module.css';
+const MAP_COMPONENT_TO_TILE_SIZE = {
+    accordionPrimary: 'l',
+    accordionSecondary: 'm',
+    accordionTertiary: 's',
+};
+/**
+ * Элемент аккордеона: заголовок, шеврон и раскрываемая область с контентом.
+ */
+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 }) {
+    const { isOpen, isMounted, toggleOpen, isCompletelyOpen, isCompletelyClose } = useCollapseState({
+        id,
+        keepMounted,
+    });
+    const { appearance, level } = backgroundPredefinedFillToAcrylic(backgroundPredefined);
+    // Фиксируем density, остальные оси (colorScheme/brand/…) наследуем из контекста темы.
+    const themeClassName = useThemeClassnames({ density: 'compact' });
+    return (_jsxs("div", { ...extractSupportProps(rest), className: cn(styles.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 ?? TEST_IDS.collapseBlock, style: {
+            '--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, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, variant: 'end' }) })), afterTitle && (_jsx("div", { "data-test-id": TEST_IDS.afterTitle, className: styles.afterTitle, children: afterTitle }))] }), subTitle && (_jsx("div", { className: styles.subTitle, "data-test-id": TEST_IDS.subTitle, children: subTitle }))] }), showChevron && (_jsx("div", { className: cn(styles.chevronWrapper, themeClassName), children: _jsx(Button, { view: 'function', size: 'm', icon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": TEST_IDS.chevron, appearance: 'neutral' }) }))] }), _jsx("div", { 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, className: styles.content, children: children })) : null] }) })] }));
+}
+function getCollapseBlock(component) {
+    return function CollapseBlockWithComponent(props) {
+        return _jsx(CollapseBlock, { ...props, component: component });
+    };
+}
+export const CollapseBlockPrimary = getCollapseBlock('accordionPrimary');
+export const CollapseBlockSecondary = getCollapseBlock('accordionSecondary');
+export const CollapseBlockTertiary = getCollapseBlock('accordionTertiary');

package/dist/esm/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/esm/components/CollapseBlock/hooks.js

@@ -0,0 +1,40 @@
+import { useToggleGroup } from '@cloud-ru/ds-toggles';
+import { useEffect, useRef, useState } from 'react';
+import { ANIMATION_DURATION } from '../../constants.js';
+export function useCollapseState({ id, keepMounted = false }) {
+    const { isChecked: isOpen, handleClick: toggleOpen } = useToggleGroup({ value: id });
+    // Контент доживает до конца закрывающей анимации, но при открытии появляется синхронно с
+    // `isOpen` — если монтировать его эффектом, первый кадр раскрытия считается по пустому телу
+    // и высота стартует рывком.
+    const [keepMountedWhileClosing, setKeepMountedWhileClosing] = useState(false);
+    const isMounted = isOpen || keepMounted || keepMountedWhileClosing;
+    const [isCompletelyOpen, setIsCompletelyOpen] = useState(isOpen);
+    const [isCompletelyClose, setIsCompletelyClose] = useState(!isOpen);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (isOpen) {
+            setKeepMountedWhileClosing(true);
+            setIsCompletelyClose(false);
+            timeoutRef.current = setTimeout(() => {
+                setIsCompletelyOpen(true);
+            }, ANIMATION_DURATION);
+        }
+        else {
+            setIsCompletelyOpen(false);
+            timeoutRef.current = setTimeout(() => {
+                setIsCompletelyClose(true);
+                setKeepMountedWhileClosing(false);
+            }, ANIMATION_DURATION);
+        }
+        return () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+        };
+    }, [isOpen, keepMounted]);
+    return {
+        isOpen,
+        isMounted,
+        toggleOpen,
+        isCompletelyOpen,
+        isCompletelyClose,
+    };
+}

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

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

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

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