superdesk-ui-framework 3.1.23 → 3.1.24

package/app/styles/_toggle-box.scss

@@ -24,10 +24,9 @@
             transition: all ease-out .5s;
         }
     }
-    &.open {
-        .toggle-box__content {
-            animation: fadeIn 0.3s ease-in 0s 1;
-        }
+
+    .toggle-box__content--animation {
+        animation: fadeIn 0.3s ease-in 0s 1;
     }
 
     // Stylings

package/app/styles/components/_sd-collapse-box.scss

@@ -179,7 +179,6 @@
         grid-template-rows: auto 1fr auto;
         .new-collapse-box__content {
             > .new-collapse-box__content-inner {
-                animation: fadeIn 0.3s ease-in 0s 1;
                 overflow-y: auto;
                 .new-collapse-box { // Nested -- collapse-box inside a parent collapse-box
                     &.new-collapse-box--open {

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -5,14 +5,18 @@ import {IPropsCustomHeader} from "../ToggleBox/index";
 
 interface IState {
     isOpen: boolean;
+    isAnimating: boolean;
 }
 
 export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
     htmlId = nextId('togglebox-');
+    contentRef = React.createRef<HTMLDivElement>();
+
     constructor(props: IPropsCustomHeader) {
         super(props);
         this.state = {
             isOpen: this.props.initiallyOpen ?? false,
+            isAnimating: false,
         };
     }
 
@@ -22,8 +26,26 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
         });
     }
 
+    componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    }
+
+    handleAnimationEnd = () => {
+        this.setState({ isAnimating: false });
+
+        if (this.contentRef.current) {
+            this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
+        }
+    }
+
     render() {
-        let classes = classNames('sd-shadow--z1 new-collapse-box', {
+        const classes = classNames('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
         });
         const { isOpen } = this.state;
@@ -51,7 +73,13 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                 </div>
 
                 <div className='new-collapse-box__content'>
-                    <div id={this.htmlId} aria-hidden={!isOpen} className='new-collapse-box__content-inner p-2 pt-0-5'>
+                    <div
+                        id={this.htmlId}
+                        aria-hidden={!isOpen}
+                        className={classNames('new-collapse-box__content-inner p-2 pt-0-5', {
+                            'toggle-box__content--animation': this.state.isAnimating,
+                        })}
+                    >
                         {this.props.children}
                     </div>
                 </div>

package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx

@@ -5,6 +5,7 @@ import {IPropsSimple} from "../ToggleBox/index";
 
 interface IState {
     isOpen: boolean;
+    isAnimating: boolean;
 }
 
 /**
@@ -15,10 +16,13 @@ interface IState {
 
 export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     htmlId = nextId('togglebox-');
+    contentRef = React.createRef<HTMLDivElement>();
+
     constructor(props: IPropsSimple) {
         super(props);
         this.state = {
             isOpen: this.props.initiallyOpen ?? false,
+            isAnimating: false,
         };
     }
 
@@ -42,8 +46,26 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
         });
     }
 
+    componentDidUpdate(_prevProps: IPropsSimple, prevState: IState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    }
+
+    handleAnimationEnd = () => {
+        this.setState({ isAnimating: false });
+
+        if (this.contentRef.current) {
+            this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
+        }
+    }
+
     render() {
-        let classes = classNames('toggle-box', {
+        const classes = classNames('toggle-box', {
             'toggle-box--margin-normal': this.props.margin === undefined,
             'toggle-box--large-title': this.props.largeTitle,
             'toggle-box--circle': this.props.circledChevron,
@@ -51,6 +73,7 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
             'hidden': !this.state.isOpen,
             'open': this.state.isOpen,
         }, this.props.className);
+
         const { title, children, badge } = this.props;
         const { isOpen } = this.state;
 
@@ -79,7 +102,14 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
                     {badge ? badge : null}
                 </a>
                 <div className="toggle-box__content-wraper">
-                    <div id={this.htmlId} className="toggle-box__content" aria-hidden={!isOpen}>
+                    <div
+                        id={this.htmlId}
+                        className={classNames('toggle-box__content', {
+                            'toggle-box__content--animation': this.state.isAnimating,
+                        })}
+                        aria-hidden={!isOpen}
+                        ref={this.contentRef}
+                    >
                         {children}
                     </div>
                 </div>

package/dist/examples.bundle.js

@@ -147289,6 +147289,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.handleKeyDown = function (event) {
             if (event.key === "ArrowRight" && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
@@ -147310,11 +147311,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 }
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     SimpleToggleBox.prototype.render = function () {
         var _a;
         var classes = (0, classnames_1.default)('toggle-box', (_a = {
@@ -147336,7 +147352,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 React.createElement("div", { className: "toggle-box__line" }),
                 badge ? badge : null),
             React.createElement("div", { className: "toggle-box__content-wraper" },
-                React.createElement("div", { id: this.htmlId, className: "toggle-box__content", "aria-hidden": !isOpen }, children))));
+                React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
     };
     return SimpleToggleBox;
 }(React.PureComponent));
@@ -147402,17 +147420,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;
                 (_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     CustomHeaderToggleBox.prototype.render = function () {
         var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
@@ -147424,7 +147458,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
                     React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
             React.createElement("div", { className: 'new-collapse-box__content' },
-                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5' }, this.props.children))));
+                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }) }, this.props.children))));
     };
     return CustomHeaderToggleBox;
 }(React.PureComponent));
@@ -185499,7 +185535,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 935 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.1.23","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"},"peerDependencies":{"moment":"*"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.1.24","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"},"peerDependencies":{"moment":"*"}}
 
 /***/ }),
 /* 936 */

package/dist/superdesk-ui.bundle.css

@@ -36185,7 +36185,7 @@ a.label {
         color: var(--color-text-light); }
     .toggle-box.hidden .toggle-box__content-wraper {
       transition: all ease-out .5s; }
-  .toggle-box.open .toggle-box__content {
+  .toggle-box .toggle-box__content--animation {
     animation: fadeIn 0.3s ease-in 0s 1; }
   .toggle-box.toggle-box--circle .toggle-box__chevron {
     background-color: var(--sd-colour-btn-bg-neutral); }
@@ -44682,7 +44682,6 @@ a.text-link {
 .new-collapse-box.new-collapse-box--open {
   grid-template-rows: auto 1fr auto; }
   .new-collapse-box.new-collapse-box--open .new-collapse-box__content > .new-collapse-box__content-inner {
-    animation: fadeIn 0.3s ease-in 0s 1;
     overflow-y: auto; }
     .new-collapse-box.new-collapse-box--open .new-collapse-box__content > .new-collapse-box__content-inner .new-collapse-box.new-collapse-box--open .new-collapse-box__content .new-collapse-box__content-inner {
       animation: fadeIn2 0.3s ease-in 0s 1; }

package/dist/superdesk-ui.bundle.js

@@ -146410,6 +146410,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.handleKeyDown = function (event) {
             if (event.key === "ArrowRight" && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
@@ -146431,11 +146432,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 }
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     SimpleToggleBox.prototype.render = function () {
         var _a;
         var classes = (0, classnames_1.default)('toggle-box', (_a = {
@@ -146457,7 +146473,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 React.createElement("div", { className: "toggle-box__line" }),
                 badge ? badge : null),
             React.createElement("div", { className: "toggle-box__content-wraper" },
-                React.createElement("div", { id: this.htmlId, className: "toggle-box__content", "aria-hidden": !isOpen }, children))));
+                React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
     };
     return SimpleToggleBox;
 }(React.PureComponent));
@@ -146523,17 +146541,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;
                 (_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     CustomHeaderToggleBox.prototype.render = function () {
         var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
@@ -146545,7 +146579,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
                     React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
             React.createElement("div", { className: 'new-collapse-box__content' },
-                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5' }, this.props.children))));
+                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }) }, this.props.children))));
     };
     return CustomHeaderToggleBox;
 }(React.PureComponent));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.23",
+  "version": "3.1.24",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts

@@ -2,11 +2,15 @@ import * as React from 'react';
 import { IPropsCustomHeader } from "../ToggleBox/index";
 interface IState {
     isOpen: boolean;
+    isAnimating: boolean;
 }
 export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
     htmlId: string;
+    contentRef: React.RefObject<HTMLDivElement>;
     constructor(props: IPropsCustomHeader);
     toggle: () => void;
+    componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState): void;
+    handleAnimationEnd: () => void;
     render(): JSX.Element;
 }
 export {};

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -52,17 +52,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;
                 (_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     CustomHeaderToggleBox.prototype.render = function () {
         var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
@@ -74,7 +90,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
                     React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
             React.createElement("div", { className: 'new-collapse-box__content' },
-                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5' }, this.props.children))));
+                React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }) }, this.props.children))));
     };
     return CustomHeaderToggleBox;
 }(React.PureComponent));

package/react/components/ToggleBox/SimpleToggleBox.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IPropsSimple } from "../ToggleBox/index";
 interface IState {
     isOpen: boolean;
+    isAnimating: boolean;
 }
 /**
  * @ngdoc react
@@ -10,9 +11,12 @@ interface IState {
  */
 export declare class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     htmlId: string;
+    contentRef: React.RefObject<HTMLDivElement>;
     constructor(props: IPropsSimple);
     handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
     toggle: () => void;
+    componentDidUpdate(_prevProps: IPropsSimple, prevState: IState): void;
+    handleAnimationEnd: () => void;
     render(): JSX.Element;
 }
 export {};

package/react/components/ToggleBox/SimpleToggleBox.js

@@ -57,6 +57,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
+        _this.contentRef = React.createRef();
         _this.handleKeyDown = function (event) {
             if (event.key === "ArrowRight" && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
@@ -78,11 +79,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 }
             });
         };
+        _this.handleAnimationEnd = function () {
+            _this.setState({ isAnimating: false });
+            if (_this.contentRef.current) {
+                _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
+            }
+        };
         _this.state = {
             isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
+            isAnimating: false,
         };
         return _this;
     }
+    SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.isOpen !== this.state.isOpen) {
+            this.setState({ isAnimating: true });
+            if (this.contentRef.current) {
+                this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
+            }
+        }
+    };
     SimpleToggleBox.prototype.render = function () {
         var _a;
         var classes = (0, classnames_1.default)('toggle-box', (_a = {
@@ -104,7 +120,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 React.createElement("div", { className: "toggle-box__line" }),
                 badge ? badge : null),
             React.createElement("div", { className: "toggle-box__content-wraper" },
-                React.createElement("div", { id: this.htmlId, className: "toggle-box__content", "aria-hidden": !isOpen }, children))));
+                React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
+                        'toggle-box__content--animation': this.state.isAnimating,
+                    }), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
     };
     return SimpleToggleBox;
 }(React.PureComponent));