@alfalab/core-components 21.0.0 → 21.2.1-beta.0

package/collapse/Component.d.ts

@@ -32,6 +32,10 @@ type CollapseProps = {
      * Обработчик смены состояний `expanded/collapsed`
      */
     onExpandedChange?: (expanded?: boolean) => void;
+    /**
+     * Обработчик события завершения анимации
+     */
+    onTransitionEnd?: (expanded?: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/Component.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var resizeObserver = require('resize-observer');
 var ArrowDownMBlackIcon = require('@alfalab/icons-classic/ArrowDownMBlackIcon');
 var ArrowUpMBlackIcon = require('@alfalab/icons-classic/ArrowUpMBlackIcon');
 var coreComponentsLink = require('../link');
@@ -13,16 +14,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var styles = {"collapse":"collapse__collapse_11t4e","content":"collapse__content_11t4e","expandedContent":"collapse__expandedContent_11t4e","expandedLabel":"collapse__expandedLabel_11t4e"};
+var styles = {"collapse":"collapse__collapse_1882u","content":"collapse__content_1882u","expandedContent":"collapse__expandedContent_1882u","expandedLabel":"collapse__expandedLabel_1882u"};
 require('./index.css');
 
 var Collapse = React.forwardRef(function (_a, ref) {
-    var _b;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = React.useRef(null);
     var contentCaseRef = React.useRef(null);
-    var _c = React.useState(expanded), expandedState = _c[0], setExpandedState = _c[1];
+    var _d = React.useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = React.useCallback(function () {
         var contentHeight;
@@ -37,17 +38,10 @@ var Collapse = React.forwardRef(function (_a, ref) {
         }
         contentRef.current.style.height = contentHeight + "px";
     }, [isExpanded]);
-    React.useEffect(function () {
-        var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [recalculate]);
-    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
-    var contentClassName = cn__default['default'](styles.content, (_b = {},
-        _b[styles.expandedContent] = isExpanded,
-        _b));
-    var labelClassName = isExpanded ? styles.expandedLabel : '';
-    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
+    var handleTransitionEnd = React.useCallback(function () {
+        if (onTransitionEnd)
+            onTransitionEnd(expanded);
+    }, [expanded, onTransitionEnd]);
     var handleExpandedChange = React.useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
@@ -55,10 +49,35 @@ var Collapse = React.forwardRef(function (_a, ref) {
         if (onExpandedChange)
             onExpandedChange();
     }, [isExpanded, onExpandedChange, uncontrolled]);
+    React.useEffect(function () {
+        var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [recalculate]);
+    React.useEffect(function () {
+        var observer = new resizeObserver.ResizeObserver(recalculate);
+        if (contentCaseRef.current) {
+            observer.observe(contentCaseRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [recalculate]);
+    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = React.useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
+    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { ref: contentRef, className: contentClassName },
+        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, (_b = {},
+                _b[styles.expandedContent] = isExpanded,
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),
-        (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: labelClassName, pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
+        (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: cn__default['default']((_c = {}, _c[styles.expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });
 
 exports.Collapse = Collapse;

package/collapse/cssm/Component.d.ts

@@ -32,6 +32,10 @@ type CollapseProps = {
      * Обработчик смены состояний `expanded/collapsed`
      */
     onExpandedChange?: (expanded?: boolean) => void;
+    /**
+     * Обработчик события завершения анимации
+     */
+    onTransitionEnd?: (expanded?: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/cssm/Component.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var resizeObserver = require('resize-observer');
 var ArrowDownMBlackIcon = require('@alfalab/icons-classic/ArrowDownMBlackIcon');
 var ArrowUpMBlackIcon = require('@alfalab/icons-classic/ArrowUpMBlackIcon');
 var coreComponentsLink = require('../../link/cssm');
@@ -16,12 +17,12 @@ var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Collapse = React.forwardRef(function (_a, ref) {
-    var _b;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = React.useRef(null);
     var contentCaseRef = React.useRef(null);
-    var _c = React.useState(expanded), expandedState = _c[0], setExpandedState = _c[1];
+    var _d = React.useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = React.useCallback(function () {
         var contentHeight;
@@ -36,17 +37,10 @@ var Collapse = React.forwardRef(function (_a, ref) {
         }
         contentRef.current.style.height = contentHeight + "px";
     }, [isExpanded]);
-    React.useEffect(function () {
-        var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [recalculate]);
-    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
-    var contentClassName = cn__default['default'](styles__default['default'].content, (_b = {},
-        _b[styles__default['default'].expandedContent] = isExpanded,
-        _b));
-    var labelClassName = isExpanded ? styles__default['default'].expandedLabel : '';
-    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
+    var handleTransitionEnd = React.useCallback(function () {
+        if (onTransitionEnd)
+            onTransitionEnd(expanded);
+    }, [expanded, onTransitionEnd]);
     var handleExpandedChange = React.useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
@@ -54,10 +48,35 @@ var Collapse = React.forwardRef(function (_a, ref) {
         if (onExpandedChange)
             onExpandedChange();
     }, [isExpanded, onExpandedChange, uncontrolled]);
+    React.useEffect(function () {
+        var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [recalculate]);
+    React.useEffect(function () {
+        var observer = new resizeObserver.ResizeObserver(recalculate);
+        if (contentCaseRef.current) {
+            observer.observe(contentCaseRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [recalculate]);
+    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = React.useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
+    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles__default['default'].collapse), id: id, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { ref: contentRef, className: contentClassName },
+        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_b = {},
+                _b[styles__default['default'].expandedContent] = isExpanded,
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),
-        (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: labelClassName, pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
+        (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: cn__default['default']((_c = {}, _c[styles__default['default'].expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });
 
 exports.Collapse = Collapse;

package/collapse/cssm/index.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
+require('resize-observer');
 require('@alfalab/icons-classic/ArrowDownMBlackIcon');
 require('@alfalab/icons-classic/ArrowUpMBlackIcon');
 require('../../link/cssm');

package/collapse/esm/Component.d.ts

@@ -32,6 +32,10 @@ type CollapseProps = {
      * Обработчик смены состояний `expanded/collapsed`
      */
     onExpandedChange?: (expanded?: boolean) => void;
+    /**
+     * Обработчик события завершения анимации
+     */
+    onTransitionEnd?: (expanded?: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/esm/Component.js

@@ -1,20 +1,21 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { ResizeObserver } from 'resize-observer';
 import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon';
 import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import { Link } from '../../link/esm';
 import debounce from 'lodash.debounce';
 
-var styles = {"collapse":"collapse__collapse_11t4e","content":"collapse__content_11t4e","expandedContent":"collapse__expandedContent_11t4e","expandedLabel":"collapse__expandedLabel_11t4e"};
+var styles = {"collapse":"collapse__collapse_1882u","content":"collapse__content_1882u","expandedContent":"collapse__expandedContent_1882u","expandedLabel":"collapse__expandedLabel_1882u"};
 require('./index.css');
 
 var Collapse = forwardRef(function (_a, ref) {
-    var _b;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = useRef(null);
     var contentCaseRef = useRef(null);
-    var _c = useState(expanded), expandedState = _c[0], setExpandedState = _c[1];
+    var _d = useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = useCallback(function () {
         var contentHeight;
@@ -29,17 +30,10 @@ var Collapse = forwardRef(function (_a, ref) {
         }
         contentRef.current.style.height = contentHeight + "px";
     }, [isExpanded]);
-    useEffect(function () {
-        var handleResize = debounce(function () { return recalculate(); }, 300);
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [recalculate]);
-    useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
-    var contentClassName = cn(styles.content, (_b = {},
-        _b[styles.expandedContent] = isExpanded,
-        _b));
-    var labelClassName = isExpanded ? styles.expandedLabel : '';
-    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
+    var handleTransitionEnd = useCallback(function () {
+        if (onTransitionEnd)
+            onTransitionEnd(expanded);
+    }, [expanded, onTransitionEnd]);
     var handleExpandedChange = useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
@@ -47,10 +41,35 @@ var Collapse = forwardRef(function (_a, ref) {
         if (onExpandedChange)
             onExpandedChange();
     }, [isExpanded, onExpandedChange, uncontrolled]);
+    useEffect(function () {
+        var handleResize = debounce(function () { return recalculate(); }, 300);
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [recalculate]);
+    useEffect(function () {
+        var observer = new ResizeObserver(recalculate);
+        if (contentCaseRef.current) {
+            observer.observe(contentCaseRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [recalculate]);
+    useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
+    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React.createElement("div", { ref: contentRef, className: contentClassName },
+        React.createElement("div", { ref: contentRef, className: cn(styles.content, (_b = {},
+                _b[styles.expandedContent] = isExpanded,
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),
-        (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: labelClassName, pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
+        (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: cn((_c = {}, _c[styles.expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });
 
 export { Collapse };

package/collapse/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 11t4e */
+/* hash: 1882u */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_11t4e {
+.collapse__collapse_1882u {
     font-family: var(--font-family);
 }
-.collapse__collapse_11t4e *,
-.collapse__collapse_11t4e:before,
-.collapse__collapse_11t4e:after {
+.collapse__collapse_1882u *,
+.collapse__collapse_1882u:before,
+.collapse__collapse_1882u:after {
     box-sizing: border-box;
 }
-.collapse__content_11t4e {
+.collapse__content_1882u {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_11t4e {
+.collapse__expandedContent_1882u {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_11t4e {
+.collapse__expandedLabel_1882u {
     margin-top: 15px;
 }

package/collapse/esm/index.js

@@ -1,5 +1,6 @@
 import 'react';
 import 'classnames';
+import 'resize-observer';
 import '@alfalab/icons-classic/ArrowDownMBlackIcon';
 import '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import '../../link/esm';

package/collapse/index.css

@@ -1,4 +1,4 @@
-/* hash: 11t4e */
+/* hash: 1882u */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_11t4e {
+.collapse__collapse_1882u {
     font-family: var(--font-family);
 }
-.collapse__collapse_11t4e *,
-.collapse__collapse_11t4e:before,
-.collapse__collapse_11t4e:after {
+.collapse__collapse_1882u *,
+.collapse__collapse_1882u:before,
+.collapse__collapse_1882u:after {
     box-sizing: border-box;
 }
-.collapse__content_11t4e {
+.collapse__content_1882u {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_11t4e {
+.collapse__expandedContent_1882u {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_11t4e {
+.collapse__expandedLabel_1882u {
     margin-top: 15px;
 }

package/collapse/index.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
+require('resize-observer');
 require('@alfalab/icons-classic/ArrowDownMBlackIcon');
 require('@alfalab/icons-classic/ArrowUpMBlackIcon');
 require('../link');

package/collapse/modern/Component.d.ts

@@ -32,6 +32,10 @@ type CollapseProps = {
      * Обработчик смены состояний `expanded/collapsed`
      */
     onExpandedChange?: (expanded?: boolean) => void;
+    /**
+     * Обработчик события завершения анимации
+     */
+    onTransitionEnd?: (expanded?: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/modern/Component.js

@@ -1,14 +1,15 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { ResizeObserver } from 'resize-observer';
 import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon';
 import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import debounce from 'lodash.debounce';
 import { Link } from '../../link/modern';
 
-var styles = {"collapse":"collapse__collapse_11t4e","content":"collapse__content_11t4e","expandedContent":"collapse__expandedContent_11t4e","expandedLabel":"collapse__expandedLabel_11t4e"};
+var styles = {"collapse":"collapse__collapse_1882u","content":"collapse__content_1882u","expandedContent":"collapse__expandedContent_1882u","expandedLabel":"collapse__expandedLabel_1882u"};
 require('./index.css');
 
-const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, id, onExpandedChange, dataTestId, }, ref) => {
+const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, id, onTransitionEnd, onExpandedChange, dataTestId, }, ref) => {
     const uncontrolled = expanded === undefined;
     const contentRef = useRef(null);
     const contentCaseRef = useRef(null);
@@ -27,17 +28,10 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
         }
         contentRef.current.style.height = `${contentHeight}px`;
     }, [isExpanded]);
-    useEffect(() => {
-        const handleResize = debounce(() => recalculate(), 300);
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [recalculate]);
-    useEffect(() => recalculate(), [isExpanded, recalculate]);
-    const contentClassName = cn(styles.content, {
-        [styles.expandedContent]: isExpanded,
-    });
-    const labelClassName = isExpanded ? styles.expandedLabel : '';
-    const ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
+    const handleTransitionEnd = useCallback(() => {
+        if (onTransitionEnd)
+            onTransitionEnd(expanded);
+    }, [expanded, onTransitionEnd]);
     const handleExpandedChange = useCallback(() => {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
@@ -45,10 +39,34 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
         if (onExpandedChange)
             onExpandedChange();
     }, [isExpanded, onExpandedChange, uncontrolled]);
+    useEffect(() => {
+        const handleResize = debounce(() => recalculate(), 300);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [recalculate]);
+    useEffect(() => {
+        const observer = new ResizeObserver(recalculate);
+        if (contentCaseRef.current) {
+            observer.observe(contentCaseRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [recalculate]);
+    useEffect(() => recalculate(), [isExpanded, recalculate]);
+    const contentStyles = useMemo(() => {
+        const contentHeight = contentRef.current?.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : `${contentHeight}px`,
+        };
+    }, [isExpanded]);
+    const ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React.createElement("div", { ref: contentRef, className: contentClassName },
+        React.createElement("div", { ref: contentRef, className: cn(styles.content, {
+                [styles.expandedContent]: isExpanded,
+            }), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),
-        (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: labelClassName, pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
+        (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: cn({ [styles.expandedLabel]: isExpanded }), pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });
 
 export { Collapse };

package/collapse/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 11t4e */
+/* hash: 1882u */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_11t4e {
+.collapse__collapse_1882u {
     font-family: var(--font-family);
 }
-.collapse__collapse_11t4e *,
-.collapse__collapse_11t4e:before,
-.collapse__collapse_11t4e:after {
+.collapse__collapse_1882u *,
+.collapse__collapse_1882u:before,
+.collapse__collapse_1882u:after {
     box-sizing: border-box;
 }
-.collapse__content_11t4e {
+.collapse__content_1882u {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_11t4e {
+.collapse__expandedContent_1882u {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_11t4e {
+.collapse__expandedLabel_1882u {
     margin-top: 15px;
 }

package/collapse/modern/index.js

@@ -1,5 +1,6 @@
 import 'react';
 import 'classnames';
+import 'resize-observer';
 import '@alfalab/icons-classic/ArrowDownMBlackIcon';
 import '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import 'lodash.debounce';

package/confirmation/component.js

@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"confirmation__component_1tkto","error":"confirmation__error_1tkto","errorHeader":"confirmation__errorHeader_1tkto","errorText":"confirmation__errorText_1tkto","phoneHintWrap":"confirmation__phoneHintWrap_1tkto","phoneHintText":"confirmation__phoneHintText_1tkto","phonesWrap":"confirmation__phonesWrap_1tkto","phoneWrap":"confirmation__phoneWrap_1tkto","phoneDescription":"confirmation__phoneDescription_1tkto","center":"confirmation__center_1tkto"};
+var styles = {"component":"confirmation__component_1v42v","error":"confirmation__error_1v42v","errorHeader":"confirmation__errorHeader_1v42v","errorText":"confirmation__errorText_1v42v","phoneHintWrap":"confirmation__phoneHintWrap_1v42v","phoneHintText":"confirmation__phoneHintText_1v42v","phonesWrap":"confirmation__phonesWrap_1v42v","phoneWrap":"confirmation__phoneWrap_1v42v","phoneDescription":"confirmation__phoneDescription_1v42v","center":"confirmation__center_1v42v"};
 require('./index.css');
 
 var Confirmation = React.forwardRef(function (_a, ref) {

package/confirmation/components/code-input/component.js

@@ -33,7 +33,7 @@ function __spreadArrays() {
     return r;
 }
 
-var styles = {"component":"confirmation__component_16s9a","input":"confirmation__input_16s9a","hasError":"confirmation__hasError_16s9a","center":"confirmation__center_16s9a","disabled":"confirmation__disabled_16s9a","shake":"confirmation__shake_16s9a"};
+var styles = {"component":"confirmation__component_10g1t","input":"confirmation__input_10g1t","hasError":"confirmation__hasError_10g1t","center":"confirmation__center_10g1t","disabled":"confirmation__disabled_10g1t","compact":"confirmation__compact_10g1t","shake":"confirmation__shake_10g1t"};
 require('./index.css');
 
 var Input = function (_a) {
@@ -149,6 +149,7 @@ var CodeInput = React.forwardRef(function (_a, ref) {
     }, [value.length, prevValue.length, slotsCount, focus]);
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
             _b[styles.shake] = Boolean(error),
+            _b[styles.compact] = slotsCount > 6,
             _b)) }, new Array(slotsCount).fill('').map(function (_, index) { return (React__default['default'].createElement(Input, { value: value, index: index, error: error, processing: processing, slotsCount: slotsCount, alignContent: alignContent, handleChange: handleChange, handleInputKeyDown: handleInputKeyDown, setRef: setRef, focus: focus, 
         // eslint-disable-next-line react/no-array-index-key
         key: index })); })));

package/confirmation/components/code-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 16s9a */
+/* hash: 10g1t */
 :root {
     --color-light-bg-negative-muted: #feebea;
     --color-light-bg-secondary: #f3f4f5;
@@ -41,10 +41,10 @@
     --confirmation-input-bg-color: var(--color-light-bg-secondary);
     --confirmation-input-error-bg-color: var(--color-light-bg-negative-muted);
 }
-.confirmation__component_16s9a {
+.confirmation__component_10g1t {
     display: flex;
 }
-.confirmation__input_16s9a {
+.confirmation__input_10g1t {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
@@ -61,19 +61,23 @@
     font-weight: var(--confirmation-input-font-weight);
     font-family: var(--confirmation-input-font-family)
 }
-.confirmation__input_16s9a.confirmation__hasError_16s9a {
+.confirmation__input_10g1t.confirmation__hasError_10g1t {
         color: var(--confirmation-error-color);
         caret-color: var(--confirmation-input-text-color);
         background-color: var(--confirmation-input-error-bg-color);
     }
-.confirmation__input_16s9a.confirmation__center_16s9a {
+.confirmation__input_10g1t.confirmation__center_10g1t {
         margin: 0 var(--gap-2xs);
     }
-.confirmation__input_16s9a.confirmation__disabled_16s9a {
+.confirmation__input_10g1t.confirmation__disabled_10g1t {
         color: var(--color-light-text-tertiary);
         opacity: 1;
     }
-@keyframes confirmation__shake_16s9a {
+.confirmation__compact_10g1t .confirmation__input_10g1t {
+    width: 28px;
+    height: 40px;
+}
+@keyframes confirmation__shake_10g1t {
     0% {
         transform: translateX(0);
     }
@@ -90,6 +94,6 @@
         transform: translateX(0);
     }
 }
-.confirmation__shake_16s9a {
-    animation: confirmation__shake_16s9a 0.15s linear 0s 3;
+.confirmation__shake_10g1t {
+    animation: confirmation__shake_10g1t 0.15s linear 0s 3;
 }

package/confirmation/components/countdown/component.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"confirmation__component_19xr0","hasError":"confirmation__hasError_19xr0","getCodeButton":"confirmation__getCodeButton_19xr0","info":"confirmation__info_19xr0","customContent":"confirmation__customContent_19xr0","loaderWrap":"confirmation__loaderWrap_19xr0","loader":"confirmation__loader_19xr0","center":"confirmation__center_19xr0","timePassed":"confirmation__timePassed_19xr0","noAttemptsLeftMessage":"confirmation__noAttemptsLeftMessage_19xr0"};
+var styles = {"component":"confirmation__component_1g9yh","hasError":"confirmation__hasError_1g9yh","getCodeButton":"confirmation__getCodeButton_1g9yh","info":"confirmation__info_1g9yh","customContent":"confirmation__customContent_1g9yh","loaderWrap":"confirmation__loaderWrap_1g9yh","loader":"confirmation__loader_1g9yh","center":"confirmation__center_1g9yh","timePassed":"confirmation__timePassed_1g9yh","noAttemptsLeftMessage":"confirmation__noAttemptsLeftMessage_1g9yh"};
 require('./index.css');
 
 /**