superdesk-ui-framework 4.0.49 → 4.0.51

package/app/styles/form-elements/_checkbox.scss

@@ -61,7 +61,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
             background-color: var(--sd-colour-interactive--hover);
         }
     }
-    
+
 }
 
 // Modifier for .sd-checkbox to create a radio button
@@ -295,7 +295,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
 .sd-check-new--disabled, .sd-check-new[disabled="disabled"] {
     opacity: 0.40;
     cursor: not-allowed !important;
-    
+
     &:hover {
         color: $checkButtonTextColor;
         border-color: $checkButtonBorderColor;
@@ -675,8 +675,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
         & ~ label {
             opacity: 1;
             color: $white;
-            background-color: var(--sd-colour-interactive--active);
-            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
             border-top-color: var(--sd-colour-interactive--darken-20);
             box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2);
         }
@@ -748,7 +748,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
         border-top-color: var(--sd-colour-interactive--darken-20);
         box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         color: $white;
-        
+
         &:hover {
             color: $white;
             border-color: var(--sd-colour-interactive--active);

package/app-typescript/components/DateTimePicker.tsx

@@ -160,6 +160,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                             inlineLabel
                             labelHidden
                             fullWidth={this.props.fullWidth}
+                            data-test-id="date-input"
                         />
                     </div>
                     <div style={{flexGrow: 1}}>
@@ -175,6 +176,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                             required={this.props.required}
                             headerTemplate={this.props.timeHeaderTemplate}
                             footerTemplate={this.props.timeFooterTemplate}
+                            data-test-id="time-input"
                         />
                     </div>
                     {this.props.preview !== true && (

package/app-typescript/components/TimePicker.tsx

@@ -83,7 +83,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
                         cursor: 'pointer',
                     }}
                     ref={this.timeInputRef}
-                    value={this.props.value ?? undefined}
+                    value={this.props.value ?? ''}
                     type="time"
                     onClick={(e) => {
                         // don't show default popup

package/dist/examples.bundle.js

@@ -61877,7 +61877,7 @@ var TimePicker = /** @class */ (function (_super) {
                     }, allowSeconds: this.props.allowSeconds, headerTemplate: this.props.headerTemplate, footerTemplate: this.props.footerTemplate }))),
             React.createElement("input", { style: {
                     cursor: 'pointer',
-                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : undefined, type: "time", onClick: function (e) {
+                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
                     // don't show default popup
                     e.preventDefault();
                     _this.setState({
@@ -127760,9 +127760,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props['data-test-id'], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth, "data-test-id": "date-input" })),
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate })),
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate, "data-test-id": "time-input" })),
                 this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;
@@ -191060,7 +191060,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 959 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.49","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","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","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.63","@superdesk/primereact":"^5.0.2-13","@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","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.51","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","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","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.63","@superdesk/primereact":"^5.0.2-13","@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","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 960 */

package/dist/superdesk-ui.bundle.css

@@ -41236,8 +41236,8 @@ textarea.sd-media-carousel__media-title {
 .sd-check-button .sd-check-button__input:checked ~ label {
   opacity: 1;
   color: white;
-  background-color: var(--sd-colour-interactive--active);
-  border-color: var(--sd-colour-interactive--active);
+  background-color: var(--sd-colour-interactive);
+  border-color: var(--sd-colour-interactive);
   border-top-color: var(--sd-colour-interactive--darken-20);
   box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2); }
 
@@ -54329,8 +54329,8 @@ i.sd-sidetab-menu__helper-icon {
 .sd-check-button .sd-check-button__input:checked ~ label {
   opacity: 1;
   color: white;
-  background-color: var(--sd-colour-interactive--active);
-  border-color: var(--sd-colour-interactive--active);
+  background-color: var(--sd-colour-interactive);
+  border-color: var(--sd-colour-interactive);
   border-top-color: var(--sd-colour-interactive--darken-20);
   box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2); }
 

package/dist/superdesk-ui.bundle.js

@@ -61356,7 +61356,7 @@ var TimePicker = /** @class */ (function (_super) {
                     }, allowSeconds: this.props.allowSeconds, headerTemplate: this.props.headerTemplate, footerTemplate: this.props.footerTemplate }))),
             React.createElement("input", { style: {
                     cursor: 'pointer',
-                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : undefined, type: "time", onClick: function (e) {
+                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
                     // don't show default popup
                     e.preventDefault();
                     _this.setState({
@@ -126856,9 +126856,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props['data-test-id'], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth, "data-test-id": "date-input" })),
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate })),
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate, "data-test-id": "time-input" })),
                 this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;

package/package.json

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

package/react/components/DateTimePicker.js

@@ -158,9 +158,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props['data-test-id'], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth, "data-test-id": "date-input" })),
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate })),
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate, "data-test-id": "time-input" })),
                 this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;

package/react/components/TimePicker.js

@@ -88,7 +88,7 @@ var TimePicker = /** @class */ (function (_super) {
                     }, allowSeconds: this.props.allowSeconds, headerTemplate: this.props.headerTemplate, footerTemplate: this.props.footerTemplate }))),
             React.createElement("input", { style: {
                     cursor: 'pointer',
-                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : undefined, type: "time", onClick: function (e) {
+                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
                     // don't show default popup
                     e.preventDefault();
                     _this.setState({