superdesk-ui-framework 3.1.23 → 3.1.25

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/Layouts/AuthoringInnerHeader.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from '../Icon';
+import {Icon} from '../Icon';
 
 interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
+    headerStyles?: string;
 }
 interface IState {
     collapsed: boolean;
@@ -21,17 +21,21 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        let classes = classNames('sd-editor-content__authoring-header', {
-            'authoring-header--collapsed': this.state.collapsed,
-            [`authoring-header--padding-${this.props.headerPadding}`]: this.props.headerPadding,
-        });
+        const classes = classNames(
+            'sd-editor-content__authoring-header',
+            {
+                'authoring-header--collapsed': this.state.collapsed,
+                [`${this.props.headerStyles}`]: this.props.headerStyles,
+            },
+        );
+
         return (
             <header className={classes}>
                 <div className="authoring-header__holder">
                     {this.props.children}
                 </div>
                 <button className="authoring-header__toggle"
-                    onClick={() => this.setState({ collapsed: !this.state.collapsed })}>
+                    onClick={() => this.setState({collapsed: !this.state.collapsed})}>
                     <Icon name="chevron-up-thin" />
                 </button>
             </header>

package/app-typescript/components/Layouts/AuthoringMain.tsx

@@ -14,9 +14,9 @@ interface IProps {
     toolBar?: React.ReactNode;
     authoringMain?: React.ReactNode;
     authoringHeader?: React.ReactNode;
+    headerStyles?: string;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;
 }
@@ -33,10 +33,11 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                 <AuthoringMainContent>
                     {this.props.authoringHeader && (
                         <AuthoringInnerHeader
-                        headerPadding={this.props.headerPadding}
-                        collapsed={this.props.headerCollapsed}>
+                            headerStyles={this.props.headerStyles}
+                            collapsed={this.props.headerCollapsed}
+                        >
                             {this.props.authoringHeader}
-                    </AuthoringInnerHeader>
+                        </AuthoringInnerHeader>
                     )}
                     {this.props.authoringBookmarks && (
                         <AuthorinInnerSideBar>

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));
@@ -150169,7 +150205,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerStyles: this.props.headerStyles, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };
@@ -150432,7 +150468,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
                 'authoring-header--collapsed': this.state.collapsed
             },
-            _a["authoring-header--padding-".concat(this.props.headerPadding)] = this.props.headerPadding,
+            _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
             _a));
         return (React.createElement("header", { className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
@@ -158547,7 +158583,7 @@ var RundownEditor = /** @class */ (function (_super) {
                             React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
                                 React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })))))),
             React.createElement(Layout.MainPanel, { padding: 'none' },
-                React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolBar: (React.createElement(React.Fragment, null,
+                React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
                         React.createElement("div", { className: "sd-editor-toolbar__content" },
                             React.createElement("dl", null,
                                 React.createElement("dt", null, "Created"),
@@ -158602,7 +158638,7 @@ var RundownEditor = /** @class */ (function (_super) {
             React.createElement(Layout.RightPanel, { open: this.props.rightPanel },
                 React.createElement(Layout.Panel, { size: 'x-large', side: 'right' },
                     React.createElement(Layout.PanelContent, null,
-                        React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
+                        React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
                                     React.createElement(index_1.SubNav, { className: 'sd-shadow--z0' },
                                         React.createElement(index_1.SlidingToolbar, null,
                                             React.createElement(index_1.ButtonGroup, { align: 'start' },
@@ -179193,7 +179229,7 @@ var EditorTest = /** @class */ (function (_super) {
                     _this.setState({
                         activeTab: val,
                     });
-                } })), main: (React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolBar: (React.createElement(React.Fragment, null,
+                } })), main: (React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "sd-editor-toolbar__content" },
                         React.createElement("dl", null,
                             React.createElement("dt", null, "Created"),
@@ -179472,7 +179508,7 @@ var Editor = /** @class */ (function (_super) {
                             React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
                                 React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })),
                             React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
-                                React.createElement(index_1.NavButton, { type: 'darker', icon: this.state.sideBarOpen ? 'forward-thin' : 'backward-thin', text: 'More actions', onClick: function () { return _this.setState({ sideBarOpen: !_this.state.sideBarOpen }); } })))))), main: (React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolBar: (React.createElement(React.Fragment, null,
+                                React.createElement(index_1.NavButton, { type: 'darker', icon: this.state.sideBarOpen ? 'forward-thin' : 'backward-thin', text: 'More actions', onClick: function () { return _this.setState({ sideBarOpen: !_this.state.sideBarOpen }); } })))))), main: (React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
                         React.createElement("div", { className: "sd-editor-toolbar__content" },
                             React.createElement("dl", null,
                                 React.createElement("dt", null, "Created"),
@@ -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.25","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/playgrounds/react-playgrounds/EditorTest.tsx

@@ -122,7 +122,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

package/dist/playgrounds/react-playgrounds/Multiedit.tsx

@@ -134,7 +134,7 @@ export class Editor extends React.Component<{}, IEditor> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

package/dist/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -147,7 +147,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>
                     <SubNav>
                         <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
-                            <button 
+                            <button
                                 className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
                                 onClick={this.toggleExpand}
                             >
@@ -175,7 +175,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
 
                 <Layout.MainPanel padding='none'>
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">
@@ -341,7 +341,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <Layout.AuthoringFrame
                                 main={
                                     <Layout.AuthoringMain
-                                        headerPadding='medium'
+                                        headerStyles='authoring-header--padding-medium'
                                         toolbarCustom={true}
                                         headerCollapsed={true}
                                         toolBar={(

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));
@@ -149290,7 +149326,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerStyles: this.props.headerStyles, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };
@@ -149553,7 +149589,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
                 'authoring-header--collapsed': this.state.collapsed
             },
-            _a["authoring-header--padding-".concat(this.props.headerPadding)] = this.props.headerPadding,
+            _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
             _a));
         return (React.createElement("header", { className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),

package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx

@@ -122,7 +122,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -134,7 +134,7 @@ export class Editor extends React.Component<{}, IEditor> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -147,7 +147,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>
                     <SubNav>
                         <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
-                            <button 
+                            <button
                                 className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
                                 onClick={this.toggleExpand}
                             >
@@ -175,7 +175,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
 
                 <Layout.MainPanel padding='none'>
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">
@@ -341,7 +341,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <Layout.AuthoringFrame
                                 main={
                                     <Layout.AuthoringMain
-                                        headerPadding='medium'
+                                        headerStyles='authoring-header--padding-medium'
                                         toolbarCustom={true}
                                         headerCollapsed={true}
                                         toolBar={(

package/package.json

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

package/react/components/Layouts/AuthoringInnerHeader.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
+    headerStyles?: string;
 }
 interface IState {
     collapsed: boolean;

package/react/components/Layouts/AuthoringInnerHeader.js

@@ -60,7 +60,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
                 'authoring-header--collapsed': this.state.collapsed
             },
-            _a["authoring-header--padding-".concat(this.props.headerPadding)] = this.props.headerPadding,
+            _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
             _a));
         return (React.createElement("header", { className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),

package/react/components/Layouts/AuthoringMain.d.ts

@@ -3,9 +3,9 @@ interface IProps {
     toolBar?: React.ReactNode;
     authoringMain?: React.ReactNode;
     authoringHeader?: React.ReactNode;
+    headerStyles?: string;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;
 }

package/react/components/Layouts/AuthoringMain.js

@@ -50,7 +50,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerStyles: this.props.headerStyles, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };

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));