@alfalab/core-components 45.6.0 → 45.8.0-beta.0

package/accordion/esm/Component.js

@@ -0,0 +1,47 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useCallback } from 'react';
+import cn from 'classnames';
+import { Typography } from '../../typography/esm';
+import { DefaultControlIcon } from './components/default-control-icon/Component.js';
+import { useRecalculateContentHeight } from './hooks/useRecalculateContentHeight.js';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@juggle/resize-observer';
+
+var styles = {"accordion":"accordion__accordion_hr8z2","container":"accordion__container_hr8z2","header":"accordion__header_hr8z2","control":"accordion__control_hr8z2","body":"accordion__body_hr8z2","expandedBody":"accordion__expandedBody_hr8z2","bodyContent":"accordion__bodyContent_hr8z2","endPosition":"accordion__endPosition_hr8z2","startPosition":"accordion__startPosition_hr8z2"};
+require('./index.css');
+
+var Accordion = function (_a) {
+    var _b, _c, _d;
+    var expanded = _a.expanded, _e = _a.defaultExpanded, defaultExpanded = _e === void 0 ? false : _e, header = _a.header, control = _a.control, _f = _a.controlPosition, controlPosition = _f === void 0 ? 'end' : _f, children = _a.children, className = _a.className, containerClassName = _a.containerClassName, headerClassName = _a.headerClassName, controlClassName = _a.controlClassName, bodyClassName = _a.bodyClassName, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId, rest = __rest(_a, ["expanded", "defaultExpanded", "header", "control", "controlPosition", "children", "className", "containerClassName", "headerClassName", "controlClassName", "bodyClassName", "onExpandedChange", "dataTestId"]);
+    var uncontrolled = expanded === undefined;
+    var _g = useState(uncontrolled ? defaultExpanded : expanded), expandedState = _g[0], setExpanded = _g[1];
+    var isExpanded = uncontrolled ? expandedState : expanded;
+    var isStartPosition = controlPosition === 'start';
+    var _h = useRecalculateContentHeight(isExpanded), contentRef = _h.contentRef, contentCaseRef = _h.contentCaseRef;
+    var controlContent = control === undefined ? (React.createElement(DefaultControlIcon, { expanded: isExpanded, startPosition: isStartPosition })) : (control);
+    var headerContent = typeof header === 'string' ? (React.createElement(Typography.Text, { view: 'primary-large', weight: 'medium' }, header)) : (header);
+    var bodyContent = typeof children === 'string' ? (React.createElement(Typography.Text, { view: 'primary-medium' }, children)) : (children);
+    var handleExpandedChange = useCallback(function () {
+        if (uncontrolled) {
+            setExpanded(!isExpanded);
+        }
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!isExpanded);
+    }, [isExpanded, onExpandedChange, uncontrolled]);
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            handleExpandedChange();
+        }
+    };
+    return (React.createElement("div", __assign({}, rest, { "data-test-id": dataTestId, className: cn(styles.accordion, className) }),
+        React.createElement("div", { role: 'button', tabIndex: 0, "aria-expanded": isExpanded, onClick: handleExpandedChange, onKeyDown: handleKeyDown, className: cn(styles.container, containerClassName) },
+            React.createElement("div", { className: cn(styles.header, headerClassName, (_b = {},
+                    _b[styles.endPosition] = isStartPosition,
+                    _b)) }, headerContent),
+            React.createElement("div", { className: cn(styles.control, controlClassName, (_c = {},
+                    _c[styles.startPosition] = isStartPosition,
+                    _c)) }, controlContent)),
+        React.createElement("div", { ref: contentRef, className: cn(styles.body, bodyClassName, (_d = {}, _d[styles.expandedBody] = isExpanded, _d)) },
+            React.createElement("div", { className: cn(styles.bodyContent), ref: contentCaseRef }, bodyContent))));
+};
+
+export { Accordion };

package/accordion/esm/components/default-control-icon/Component.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    expanded: boolean;
+    startPosition: boolean;
+};
+declare const DefaultControlIcon: FC<Props>;
+export { DefaultControlIcon };

package/accordion/esm/components/default-control-icon/Component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cn from 'classnames';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
+
+var styles = {"icon":"accordion__icon_15h6m","expanded":"accordion__expanded_15h6m","startPosition":"accordion__startPosition_15h6m"};
+require('./index.css');
+
+var DefaultControlIcon = function (_a) {
+    var _b;
+    var expanded = _a.expanded, startPosition = _a.startPosition;
+    return (React.createElement(ChevronDownMIcon, { className: cn(styles.icon, (_b = {},
+            _b[styles.expanded] = expanded,
+            _b[styles.startPosition] = startPosition,
+            _b)) }));
+};
+
+export { DefaultControlIcon };

package/accordion/esm/components/default-control-icon/index.css

@@ -0,0 +1,16 @@
+/* hash: 14qan */
+.accordion__icon_15h6m {
+    transition: 300ms transform;
+}
+
+.accordion__expanded_15h6m {
+    transform: rotate(180deg);
+}
+
+.accordion__startPosition_15h6m {
+    transform: rotate(-90deg);
+}
+
+.accordion__startPosition_15h6m.accordion__expanded_15h6m {
+    transform: rotate(0deg);
+}

package/accordion/esm/components/default-control-icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/accordion/esm/components/default-control-icon/index.js

@@ -0,0 +1,4 @@
+export { DefaultControlIcon } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';

package/accordion/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./default-control-icon/index";

package/accordion/esm/components/index.js

@@ -0,0 +1,4 @@
+export { DefaultControlIcon } from './default-control-icon/Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';

package/accordion/esm/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useRecalculateContentHeight";

package/accordion/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export { useRecalculateContentHeight } from './useRecalculateContentHeight.js';
+import 'react';
+import '@juggle/resize-observer';

package/accordion/esm/hooks/useRecalculateContentHeight.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const useRecalculateContentHeight: (expanded: boolean) => {
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentCaseRef: import("react").RefObject<HTMLDivElement>;
+};
+export { useRecalculateContentHeight };

package/accordion/esm/hooks/useRecalculateContentHeight.js

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+var useRecalculateContentHeight = function (expanded) {
+    var contentRef = useRef(null);
+    var contentCaseRef = useRef(null);
+    useEffect(function () {
+        var recalculate = function () {
+            var contentHeight;
+            if (!contentRef.current || !contentCaseRef.current) {
+                return;
+            }
+            if (expanded) {
+                contentHeight = contentCaseRef.current.offsetHeight;
+            }
+            else {
+                contentHeight = 0;
+            }
+            contentRef.current.style.height = "".concat(contentHeight, "px");
+        };
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        var observer = new ResizeObserver$1(recalculate);
+        if (contentRef.current) {
+            observer.observe(contentRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [expanded]);
+    return { contentRef: contentRef, contentCaseRef: contentCaseRef };
+};
+
+export { useRecalculateContentHeight };

package/accordion/esm/index.css

@@ -0,0 +1,50 @@
+/* hash: 1hy4e */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .accordion__accordion_hr8z2 {
+    width: 100%;
+} .accordion__container_hr8z2 {
+    display: flex;
+    cursor: pointer;
+} .accordion__header_hr8z2 {
+    display: flex;
+    align-items: center;
+} .accordion__control_hr8z2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--gap-2xs);
+} .accordion__body_hr8z2 {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 400ms cubic-bezier(0.2, 0, 0.2, 1.25), visibility 0s linear 400ms;
+} .accordion__expandedBody_hr8z2 {
+    visibility: visible;
+    height: auto;
+    transition: height 400ms cubic-bezier(0, 0.1, 0.5, 1);
+    transform: translate3d(0, 0, 0);
+} .accordion__bodyContent_hr8z2 {
+    padding-top: var(--gap-s);
+} .accordion__endPosition_hr8z2 {
+    order: 2;
+    margin-left: var(--gap-2xs);
+} .accordion__startPosition_hr8z2 {
+    margin-left: 0;
+}

package/accordion/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./typings";

package/accordion/esm/index.js

@@ -0,0 +1,9 @@
+export { Accordion } from './Component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '../../typography/esm';
+import './components/default-control-icon/Component.js';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import './hooks/useRecalculateContentHeight.js';
+import '@juggle/resize-observer';

package/accordion/esm/typings.d.ts

@@ -0,0 +1,2 @@
+type ControlPosition = 'start' | 'end';
+export { ControlPosition };

package/accordion/esm/typings.js

@@ -0,0 +1 @@
+

package/accordion/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useRecalculateContentHeight";

package/accordion/hooks/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks_useRecalculateContentHeight = require('./useRecalculateContentHeight.js');
+
+
+
+exports.useRecalculateContentHeight = hooks_useRecalculateContentHeight.useRecalculateContentHeight;

package/accordion/hooks/useRecalculateContentHeight.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const useRecalculateContentHeight: (expanded: boolean) => {
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentCaseRef: import("react").RefObject<HTMLDivElement>;
+};
+export { useRecalculateContentHeight };

package/accordion/hooks/useRecalculateContentHeight.js

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizeObserver = require('@juggle/resize-observer');
+
+var useRecalculateContentHeight = function (expanded) {
+    var contentRef = React.useRef(null);
+    var contentCaseRef = React.useRef(null);
+    React.useEffect(function () {
+        var recalculate = function () {
+            var contentHeight;
+            if (!contentRef.current || !contentCaseRef.current) {
+                return;
+            }
+            if (expanded) {
+                contentHeight = contentCaseRef.current.offsetHeight;
+            }
+            else {
+                contentHeight = 0;
+            }
+            contentRef.current.style.height = "".concat(contentHeight, "px");
+        };
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        var observer = new ResizeObserver(recalculate);
+        if (contentRef.current) {
+            observer.observe(contentRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [expanded]);
+    return { contentRef: contentRef, contentCaseRef: contentCaseRef };
+};
+
+exports.useRecalculateContentHeight = useRecalculateContentHeight;

package/accordion/index.css

@@ -0,0 +1,50 @@
+/* hash: 1hy4e */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .accordion__accordion_hr8z2 {
+    width: 100%;
+} .accordion__container_hr8z2 {
+    display: flex;
+    cursor: pointer;
+} .accordion__header_hr8z2 {
+    display: flex;
+    align-items: center;
+} .accordion__control_hr8z2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--gap-2xs);
+} .accordion__body_hr8z2 {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 400ms cubic-bezier(0.2, 0, 0.2, 1.25), visibility 0s linear 400ms;
+} .accordion__expandedBody_hr8z2 {
+    visibility: visible;
+    height: auto;
+    transition: height 400ms cubic-bezier(0, 0.1, 0.5, 1);
+    transform: translate3d(0, 0, 0);
+} .accordion__bodyContent_hr8z2 {
+    padding-top: var(--gap-s);
+} .accordion__endPosition_hr8z2 {
+    order: 2;
+    margin-left: var(--gap-2xs);
+} .accordion__startPosition_hr8z2 {
+    margin-left: 0;
+}

package/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./typings";

package/accordion/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Accordion = Component.Accordion;

package/accordion/modern/Component.d.ts

@@ -0,0 +1,58 @@
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
+import { ControlPosition } from "./typings";
+type AccordionProps = {
+    /**
+     * Состояние компонента
+     */
+    expanded?: boolean;
+    /**
+     * Элемент заголовка
+     */
+    header: ReactNode;
+    /**
+     * Слот для элемента управления
+     */
+    control?: ReactNode;
+    /**
+     * Указывает компоненту - где будет размещен control
+     */
+    controlPosition?: ControlPosition;
+    /**
+     * Начальное состояние uncontrolled компонента
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Основной элемент для отображения содержимого
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс обертки
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контейнера с заголовком
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для header
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс для control
+     */
+    controlClassName?: string;
+    /**
+     * Дополнительный класс для body
+     */
+    bodyClassName?: string;
+    /**
+     * Обработчик смены состояний `expanded`
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AnchorHTMLAttributes<HTMLDivElement>;
+declare const Accordion: FC<AccordionProps>;
+export { AccordionProps, Accordion };

package/accordion/modern/Component.js

@@ -0,0 +1,44 @@
+import React, { useState, useCallback } from 'react';
+import cn from 'classnames';
+import { Typography } from '../../typography/modern';
+import { DefaultControlIcon } from './components/default-control-icon/Component.js';
+import { useRecalculateContentHeight } from './hooks/useRecalculateContentHeight.js';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@juggle/resize-observer';
+
+const styles = {"accordion":"accordion__accordion_hr8z2","container":"accordion__container_hr8z2","header":"accordion__header_hr8z2","control":"accordion__control_hr8z2","body":"accordion__body_hr8z2","expandedBody":"accordion__expandedBody_hr8z2","bodyContent":"accordion__bodyContent_hr8z2","endPosition":"accordion__endPosition_hr8z2","startPosition":"accordion__startPosition_hr8z2"};
+require('./index.css');
+
+const Accordion = ({ expanded, defaultExpanded = false, header, control, controlPosition = 'end', children, className, containerClassName, headerClassName, controlClassName, bodyClassName, onExpandedChange, dataTestId, ...rest }) => {
+    const uncontrolled = expanded === undefined;
+    const [expandedState, setExpanded] = useState(uncontrolled ? defaultExpanded : expanded);
+    const isExpanded = uncontrolled ? expandedState : expanded;
+    const isStartPosition = controlPosition === 'start';
+    const { contentRef, contentCaseRef } = useRecalculateContentHeight(isExpanded);
+    const controlContent = control === undefined ? (React.createElement(DefaultControlIcon, { expanded: isExpanded, startPosition: isStartPosition })) : (control);
+    const headerContent = typeof header === 'string' ? (React.createElement(Typography.Text, { view: 'primary-large', weight: 'medium' }, header)) : (header);
+    const bodyContent = typeof children === 'string' ? (React.createElement(Typography.Text, { view: 'primary-medium' }, children)) : (children);
+    const handleExpandedChange = useCallback(() => {
+        if (uncontrolled) {
+            setExpanded(!isExpanded);
+        }
+        onExpandedChange?.(!isExpanded);
+    }, [isExpanded, onExpandedChange, uncontrolled]);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleExpandedChange();
+        }
+    };
+    return (React.createElement("div", { ...rest, "data-test-id": dataTestId, className: cn(styles.accordion, className) },
+        React.createElement("div", { role: 'button', tabIndex: 0, "aria-expanded": isExpanded, onClick: handleExpandedChange, onKeyDown: handleKeyDown, className: cn(styles.container, containerClassName) },
+            React.createElement("div", { className: cn(styles.header, headerClassName, {
+                    [styles.endPosition]: isStartPosition,
+                }) }, headerContent),
+            React.createElement("div", { className: cn(styles.control, controlClassName, {
+                    [styles.startPosition]: isStartPosition,
+                }) }, controlContent)),
+        React.createElement("div", { ref: contentRef, className: cn(styles.body, bodyClassName, { [styles.expandedBody]: isExpanded }) },
+            React.createElement("div", { className: cn(styles.bodyContent), ref: contentCaseRef }, bodyContent))));
+};
+
+export { Accordion };

package/accordion/modern/components/default-control-icon/Component.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    expanded: boolean;
+    startPosition: boolean;
+};
+declare const DefaultControlIcon: FC<Props>;
+export { DefaultControlIcon };

package/accordion/modern/components/default-control-icon/Component.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
+
+const styles = {"icon":"accordion__icon_15h6m","expanded":"accordion__expanded_15h6m","startPosition":"accordion__startPosition_15h6m"};
+require('./index.css');
+
+const DefaultControlIcon = ({ expanded, startPosition }) => (React.createElement(ChevronDownMIcon, { className: cn(styles.icon, {
+        [styles.expanded]: expanded,
+        [styles.startPosition]: startPosition,
+    }) }));
+
+export { DefaultControlIcon };

package/accordion/modern/components/default-control-icon/index.css

@@ -0,0 +1,16 @@
+/* hash: 14qan */
+.accordion__icon_15h6m {
+    transition: 300ms transform;
+}
+
+.accordion__expanded_15h6m {
+    transform: rotate(180deg);
+}
+
+.accordion__startPosition_15h6m {
+    transform: rotate(-90deg);
+}
+
+.accordion__startPosition_15h6m.accordion__expanded_15h6m {
+    transform: rotate(0deg);
+}

package/accordion/modern/components/default-control-icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/accordion/modern/components/default-control-icon/index.js

@@ -0,0 +1,4 @@
+export { DefaultControlIcon } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';

package/accordion/modern/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./default-control-icon/index";

package/accordion/modern/components/index.js

@@ -0,0 +1,4 @@
+export { DefaultControlIcon } from './default-control-icon/Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';

package/accordion/modern/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useRecalculateContentHeight";

package/accordion/modern/hooks/index.js

@@ -0,0 +1,3 @@
+export { useRecalculateContentHeight } from './useRecalculateContentHeight.js';
+import 'react';
+import '@juggle/resize-observer';

package/accordion/modern/hooks/useRecalculateContentHeight.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const useRecalculateContentHeight: (expanded: boolean) => {
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentCaseRef: import("react").RefObject<HTMLDivElement>;
+};
+export { useRecalculateContentHeight };

package/accordion/modern/hooks/useRecalculateContentHeight.js

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+const useRecalculateContentHeight = (expanded) => {
+    const contentRef = useRef(null);
+    const contentCaseRef = useRef(null);
+    useEffect(() => {
+        const recalculate = () => {
+            let contentHeight;
+            if (!contentRef.current || !contentCaseRef.current) {
+                return;
+            }
+            if (expanded) {
+                contentHeight = contentCaseRef.current.offsetHeight;
+            }
+            else {
+                contentHeight = 0;
+            }
+            contentRef.current.style.height = `${contentHeight}px`;
+        };
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        const observer = new ResizeObserver$1(recalculate);
+        if (contentRef.current) {
+            observer.observe(contentRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [expanded]);
+    return { contentRef, contentCaseRef };
+};
+
+export { useRecalculateContentHeight };

package/accordion/modern/index.css

@@ -0,0 +1,50 @@
+/* hash: 1hy4e */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .accordion__accordion_hr8z2 {
+    width: 100%;
+} .accordion__container_hr8z2 {
+    display: flex;
+    cursor: pointer;
+} .accordion__header_hr8z2 {
+    display: flex;
+    align-items: center;
+} .accordion__control_hr8z2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--gap-2xs);
+} .accordion__body_hr8z2 {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 400ms cubic-bezier(0.2, 0, 0.2, 1.25), visibility 0s linear 400ms;
+} .accordion__expandedBody_hr8z2 {
+    visibility: visible;
+    height: auto;
+    transition: height 400ms cubic-bezier(0, 0.1, 0.5, 1);
+    transform: translate3d(0, 0, 0);
+} .accordion__bodyContent_hr8z2 {
+    padding-top: var(--gap-s);
+} .accordion__endPosition_hr8z2 {
+    order: 2;
+    margin-left: var(--gap-2xs);
+} .accordion__startPosition_hr8z2 {
+    margin-left: 0;
+}

package/accordion/modern/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./typings";