superdesk-ui-framework 3.1.7 → 3.1.9

package/app/styles/grids/_grid-layout.scss

@@ -700,7 +700,6 @@ $planningEditor-width: 53rem;
     grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
     grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
     overflow: auto;
-    height: 100%;
 }
 
 .sd-main-content-grid__header {

package/app/styles/layout/_editor.scss

@@ -382,17 +382,23 @@
     }
 }
 
-.sd-editor__container {
+.sd-editor__container-wrapper {
     grid-column: 1 / 2;
     display: grid;
     grid-template-rows: 1fr;
     grid-auto-columns: auto;
-    overflow-y: auto;
     width: 0;
     min-width: 0;
+    max-width: 0;
+    transition: all ease-in-out 0.2s;
+}
+
+.sd-editor__container {
+    overflow-y: auto;
     overflow: hidden;
     opacity: 0;
-    transition: all ease-in-out 0.1s;
+    transition: all ease-in-out 0.2s;
+    transition-delay: 0.2s;
 
     .sd-content-wrapper__main-content-area.sd-main-content-grid {
         grid-column: 1 / 2 !important;
@@ -400,12 +406,15 @@
 }
 
 .open-editor {
-    .sd-editor__container {
-        opacity: 1;
-        overflow-y: auto;
+    .sd-editor__container-wrapper {
         width: auto;
         min-width: 45vw;
         max-width: 45vw;
+    }
+
+    .sd-editor__container {
+        opacity: 1;
+        overflow-y: auto;
 
         &.sd-editor__container--large {
             min-width: 52vw;
@@ -413,7 +422,7 @@
     }
 }
 
-.sd-content-wrapper--editor-full .open-editor .sd-editor__container {
+.sd-content-wrapper--editor-full .open-editor .sd-editor__container-wrapper {
     min-width: auto;
     max-width: none;
 }

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

@@ -17,10 +17,17 @@ export class AuthoringContainer extends React.PureComponent<IProps> {
             this.props.background !== 'light' && this.props.background !== undefined,
             'open-editor': this.props.open,
         });
+
+        let classesContainerInner = classNames('sd-editor__container', {
+            [`sd-editor__container--large`]: this.props.large,
+        });
+
         return (
             <div className={classes}>
-                <div className={`sd-editor__container ${this.props.large ? 'sd-editor__container--large' : ''}`}>
-                    {this.props.children}
+                <div className='sd-editor__container-wrapper'>
+                    <div className={classesContainerInner}>
+                        {this.props.children}
+                    </div>
                 </div>
             </div>
         );

package/dist/examples.bundle.js

@@ -148908,14 +148908,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));
@@ -183060,7 +183064,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 921 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.1.7","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/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","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","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","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.1.9","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/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","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","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","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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"}}
 
 /***/ }),
 /* 922 */

package/dist/superdesk-ui.bundle.css

@@ -41601,8 +41601,7 @@ input.sd-inset-search__input {
   display: grid;
   grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
   grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
-  overflow: auto;
-  height: 100%; }
+  overflow: auto; }
 
 .sd-main-content-grid__header {
   grid-column: 1/4;
@@ -42489,30 +42488,37 @@ a.text-link {
     background: var(--sd-colour__webkit-scrollbar-thumb--hover);
     cursor: pointer; }
 
-.sd-editor__container {
+.sd-editor__container-wrapper {
   grid-column: 1 / 2;
   display: grid;
   grid-template-rows: 1fr;
   grid-auto-columns: auto;
-  overflow-y: auto;
   width: 0;
   min-width: 0;
+  max-width: 0;
+  transition: all ease-in-out 0.2s; }
+
+.sd-editor__container {
+  overflow-y: auto;
   overflow: hidden;
   opacity: 0;
-  transition: all ease-in-out 0.1s; }
+  transition: all ease-in-out 0.2s;
+  transition-delay: 0.2s; }
   .sd-editor__container .sd-content-wrapper__main-content-area.sd-main-content-grid {
     grid-column: 1 / 2 !important; }
 
-.open-editor .sd-editor__container {
-  opacity: 1;
-  overflow-y: auto;
+.open-editor .sd-editor__container-wrapper {
   width: auto;
   min-width: 45vw;
   max-width: 45vw; }
+
+.open-editor .sd-editor__container {
+  opacity: 1;
+  overflow-y: auto; }
   .open-editor .sd-editor__container.sd-editor__container--large {
     min-width: 52vw; }
 
-.sd-content-wrapper--editor-full .open-editor .sd-editor__container {
+.sd-content-wrapper--editor-full .open-editor .sd-editor__container-wrapper {
   min-width: auto;
   max-width: none; }
 

package/dist/superdesk-ui.bundle.js

@@ -148029,14 +148029,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));

package/package.json

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

package/react/components/Layouts/AuthoringContainer.js

@@ -50,14 +50,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));