superdesk-ui-framework 4.0.90 → 4.0.92

package/app/styles/_time.scss

@@ -25,7 +25,7 @@
         justify-content: center;
         z-index: 1;
         pointer-events: none;
-        
+
         .clear-time-picker {
             position: absolute;
             inset-block-start: 0;
@@ -35,7 +35,7 @@
             opacity: 0;
         }
     }
-    &:has(.sd-input__input--has-value) {
+    &:has(.sd-input__input--can-clear) {
         .icon-time {
             opacity: 1;
             transition: opacity 0.2s ease;

package/app-typescript/components/Modal.tsx

@@ -63,6 +63,7 @@ export class Modal extends React.Component<IProps, {}> {
                     position={this.props.position}
                     closable={this.props.onHide != null ? true : false}
                     data-test-id={this.props['data-test-id']}
+                    appendTo={document.body}
                 >
                     {this.props.children}
                 </PrimeDialog>

package/app-typescript/components/TimePicker.tsx

@@ -14,6 +14,7 @@ interface IProps extends IInputWrapper {
     allowSeconds?: boolean;
     headerTemplate?: React.ReactNode;
     footerTemplate?: React.ReactNode;
+    canClear?: boolean; // defaults to true
     'data-test-id'?: string;
 }
 
@@ -43,6 +44,8 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
             );
         }
 
+        const canClear = this.props.canClear ?? true;
+
         return (
             <InputWrapper
                 label={this.props.label}
@@ -113,7 +116,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
                             }
                         }}
                         className={classNames('sd-input__input', {
-                            'sd-input__input--has-value': this.props.value != null,
+                            'sd-input__input--can-clear': this.props.value != null && canClear,
                         })}
                         id={this.htmlId}
                         aria-labelledby={this.htmlId + 'label'}

package/dist/examples.bundle.js

@@ -62194,11 +62194,12 @@ var TimePicker = /** @class */ (function (_super) {
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         if (this.props.preview) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
+        var canClear = (_a = this.props.canClear) !== null && _a !== void 0 ? _a : true;
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             this.state.popupOpen && (React.createElement(ShowPopup_1.PopupPositioner, { getReferenceElement: function () { return _this.timeInputRef.current; }, placement: "bottom-start", onClose: function () {
                     _this.setState({
@@ -62213,7 +62214,7 @@ var TimePicker = /** @class */ (function (_super) {
             React.createElement("div", { className: "time-picker__input" },
                 React.createElement("input", { style: {
                         cursor: 'pointer',
-                    }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
+                    }, ref: this.timeInputRef, value: (_b = this.props.value) !== null && _b !== void 0 ? _b : '', type: "time", onClick: function (e) {
                         // don't show default popup
                         e.preventDefault();
                         _this.setState({
@@ -62233,7 +62234,7 @@ var TimePicker = /** @class */ (function (_super) {
                             });
                         }
                     }, className: (0, classnames_1.default)('sd-input__input', {
-                        'sd-input__input--has-value': this.props.value != null,
+                        'sd-input__input--can-clear': this.props.value != null && canClear,
                     }), id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                         _this.props.onChange(event.target.value);
                     }, "data-test-id": this.props['data-test-id'] }),
@@ -152716,7 +152717,7 @@ var Modal = /** @class */ (function (_super) {
             _a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
             _a), this.props.className);
         return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
-            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'] }, this.props.children)));
+            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'], appendTo: document.body }, this.props.children)));
     };
     return Modal;
 }(React.Component));
@@ -195583,7 +195584,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 1051 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.90","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":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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","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","prettier":"3.5.3","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":"^5.8.3","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","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.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","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.92","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":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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","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","prettier":"3.5.3","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":"^5.8.3","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","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.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","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 1052 */

package/dist/superdesk-ui.bundle.css

@@ -55757,18 +55757,18 @@ i.sd-sidetab-menu__helper-icon {
       transition: opacity 0.2s ease;
       z-index: 2;
       opacity: 0; }
-  .time-picker__input:has(.sd-input__input--has-value) .icon-time {
+  .time-picker__input:has(.sd-input__input--can-clear) .icon-time {
     opacity: 1;
     transition: opacity 0.2s ease; }
-  .time-picker__input:has(.sd-input__input--has-value) .time-picker__icon-wrapper {
+  .time-picker__input:has(.sd-input__input--can-clear) .time-picker__icon-wrapper {
     pointer-events: all; }
-  .time-picker__input:has(.sd-input__input--has-value):hover .icon-time {
+  .time-picker__input:has(.sd-input__input--can-clear):hover .icon-time {
     opacity: 0; }
-  .time-picker__input:has(.sd-input__input--has-value):hover .clear-time-picker {
+  .time-picker__input:has(.sd-input__input--can-clear):hover .clear-time-picker {
     opacity: 1; }
-  .time-picker__input:has(.sd-input__input--has-value):focus-within .icon-time {
+  .time-picker__input:has(.sd-input__input--can-clear):focus-within .icon-time {
     opacity: 0; }
-  .time-picker__input:has(.sd-input__input--has-value):focus-within .clear-time-picker {
+  .time-picker__input:has(.sd-input__input--can-clear):focus-within .clear-time-picker {
     opacity: 1; }
 
 .time-picker--date-time .time-picker__input .time-picker__icon-wrapper,

package/dist/superdesk-ui.bundle.js

@@ -61924,11 +61924,12 @@ var TimePicker = /** @class */ (function (_super) {
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         if (this.props.preview) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
+        var canClear = (_a = this.props.canClear) !== null && _a !== void 0 ? _a : true;
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             this.state.popupOpen && (React.createElement(ShowPopup_1.PopupPositioner, { getReferenceElement: function () { return _this.timeInputRef.current; }, placement: "bottom-start", onClose: function () {
                     _this.setState({
@@ -61943,7 +61944,7 @@ var TimePicker = /** @class */ (function (_super) {
             React.createElement("div", { className: "time-picker__input" },
                 React.createElement("input", { style: {
                         cursor: 'pointer',
-                    }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
+                    }, ref: this.timeInputRef, value: (_b = this.props.value) !== null && _b !== void 0 ? _b : '', type: "time", onClick: function (e) {
                         // don't show default popup
                         e.preventDefault();
                         _this.setState({
@@ -61963,7 +61964,7 @@ var TimePicker = /** @class */ (function (_super) {
                             });
                         }
                     }, className: (0, classnames_1.default)('sd-input__input', {
-                        'sd-input__input--has-value': this.props.value != null,
+                        'sd-input__input--can-clear': this.props.value != null && canClear,
                     }), id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                         _this.props.onChange(event.target.value);
                     }, "data-test-id": this.props['data-test-id'] }),
@@ -152063,7 +152064,7 @@ var Modal = /** @class */ (function (_super) {
             _a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
             _a), this.props.className);
         return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
-            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'] }, this.props.children)));
+            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'], appendTo: document.body }, this.props.children)));
     };
     return Modal;
 }(React.Component));

package/package.json

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

package/react/components/Modal.js

@@ -75,7 +75,7 @@ var Modal = /** @class */ (function (_super) {
             _a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
             _a), this.props.className);
         return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
-            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'] }, this.props.children)));
+            React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false, "data-test-id": this.props['data-test-id'], appendTo: document.body }, this.props.children)));
     };
     return Modal;
 }(React.Component));

package/react/components/TimePicker.d.ts

@@ -6,6 +6,7 @@ interface IProps extends IInputWrapper {
     allowSeconds?: boolean;
     headerTemplate?: React.ReactNode;
     footerTemplate?: React.ReactNode;
+    canClear?: boolean;
     'data-test-id'?: string;
 }
 interface IState {

package/react/components/TimePicker.js

@@ -73,11 +73,12 @@ var TimePicker = /** @class */ (function (_super) {
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         if (this.props.preview) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
+        var canClear = (_a = this.props.canClear) !== null && _a !== void 0 ? _a : true;
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             this.state.popupOpen && (React.createElement(ShowPopup_1.PopupPositioner, { getReferenceElement: function () { return _this.timeInputRef.current; }, placement: "bottom-start", onClose: function () {
                     _this.setState({
@@ -92,7 +93,7 @@ var TimePicker = /** @class */ (function (_super) {
             React.createElement("div", { className: "time-picker__input" },
                 React.createElement("input", { style: {
                         cursor: 'pointer',
-                    }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
+                    }, ref: this.timeInputRef, value: (_b = this.props.value) !== null && _b !== void 0 ? _b : '', type: "time", onClick: function (e) {
                         // don't show default popup
                         e.preventDefault();
                         _this.setState({
@@ -112,7 +113,7 @@ var TimePicker = /** @class */ (function (_super) {
                             });
                         }
                     }, className: (0, classnames_1.default)('sd-input__input', {
-                        'sd-input__input--has-value': this.props.value != null,
+                        'sd-input__input--can-clear': this.props.value != null && canClear,
                     }), id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                         _this.props.onChange(event.target.value);
                     }, "data-test-id": this.props['data-test-id'] }),

package/.github/CODEOWNERS

@@ -1 +0,0 @@
-/app-typescript/ @tomaskikutis