superdesk-ui-framework 4.0.33 → 4.0.35

package/examples/pages/components/DateTimePicker.tsx

@@ -14,10 +14,12 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label={{text: "Planning date"}}
+                label="Planning date"
+                labelHidden
+                inlineLabel
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
-                width="100%"
+                fullWidth
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 
@@ -49,11 +51,14 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                 <h2 className="docs-page__h2">Date picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <DateTimePicker
-                        label="Planning datetime"
-                        value={this.state.date}
+                        label="Planning date"
+                        value={this.state.dateTime}
                         dateFormat="YYYY-MM-DD"
-                        onChange={(date) => {
-                            this.setState({date});
+                        fullWidth
+                        onChange={(val) => {
+                            const parsedVal = val != null ? new Date(val) : null;
+
+                            this.setState({dateTime: parsedVal});
                         }}
                     />
                 `}</Markup.ReactMarkupCodePreview>
@@ -65,11 +70,15 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DateTimePicker
-                            value={this.state.date}
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
+                            label="Planning date"
+                            value={this.state.dateTime}
                             dateFormat="YYYY-MM-DD"
+                            fullWidth
+                            onChange={(val) => {
+                                const parsedVal = val != null ? new Date(val) : null;
+
+                                this.setState({dateTime: parsedVal});
+                            }}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.33",
+  "version": "4.0.35",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -97,7 +97,7 @@
   "dependencies": {
     "@popperjs/core": "^2.4.0",
     "@superdesk/common": "0.0.28",
-    "@superdesk/primereact": "^5.0.2-12",
+    "@superdesk/primereact": "^5.0.2-13",
     "@superdesk/react-resizable-panels": "0.0.39",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",

package/react/components/CheckGroup.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     orientation?: 'horizontal' | 'vertical';
     children: React.ReactNode;
     groupLabelledBy?: string;
+    'data-test-id'?: string;
 }
 export declare class CheckGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/CheckGroup.js

@@ -54,7 +54,7 @@ var CheckGroup = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-check__group-new', (_a = {},
             _a["sd-check__group-new--vertical"] = this.props.orientation === 'vertical',
             _a));
-        return (React.createElement("div", { className: classes, "aria-labelledby": this.props.groupLabelledBy }, this.props.children));
+        return (React.createElement("div", { className: classes, "aria-labelledby": this.props.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return CheckGroup;
 }(React.PureComponent));

package/react/components/DateTimePicker.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-interface IProps {
+import * as React from "react";
+import { InputWrapper } from "./Form";
+import { IInputWrapper } from "./Form/InputWrapper";
+interface IProps extends IInputWrapper {
     value: Date | null;
-    label: {
-        text: string;
-        hidden?: boolean;
-    };
     dateFormat: string;
     onChange: (value: Date | null) => void;
     preview?: boolean;
     fullWidth?: boolean;
     allowSeconds?: boolean;
     required?: boolean;
-    width?: React.CSSProperties['width'];
     disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
 }
 export declare class DateTimePicker extends React.PureComponent<IProps> {
+    private htmlId;
     handleTimeChange: (time: string) => void;
     handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;

package/react/components/DateTimePicker.js

@@ -37,6 +37,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateTimePicker = void 0;
 var React = __importStar(require("react"));
@@ -45,13 +48,17 @@ var common_1 = require("@superdesk/common");
 var lodash_1 = require("lodash");
 var TimePicker_1 = require("./TimePicker");
 var IconButton_1 = require("./IconButton");
-var MIN_WIDTH = 348;
+var Form_1 = require("./Form");
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var DateTimePicker = /** @class */ (function (_super) {
     __extends(DateTimePicker, _super);
     function DateTimePicker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleTimeChange = function (time) {
-            var _a = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
+            var _a = time
+                .split(":")
+                .map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
             var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
             origDate.setHours(hours, minutes);
             _this.props.onChange(origDate);
@@ -70,27 +77,26 @@ var DateTimePicker = /** @class */ (function (_super) {
         return _this;
     }
     DateTimePicker.prototype.prepareFormat = function (unitOfTime) {
-        return unitOfTime.toString().padStart(2, '0');
+        return unitOfTime.toString().padStart(2, "0");
     };
     DateTimePicker.prototype.render = function () {
         var _this = this;
-        var _a, _b;
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-            : '';
-        return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
-            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end', noWrap: 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, fullWidth: this.props.fullWidth, "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: this.props.value, onChange: function (val) {
                             _this.handleDateChange(val);
-                        }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth })),
+                        }, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
                 React.createElement("div", { style: { flexGrow: 1 } },
                     React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
                             _this.handleTimeChange(val);
                         }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
-                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
+                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: function () {
                         _this.props.onChange(null);
-                    }, ariaValue: 'Clear' })))));
+                    }, ariaValue: "Clear" })))));
     };
     return DateTimePicker;
 }(React.PureComponent));

package/react/components/Label.d.ts

@@ -9,6 +9,7 @@ interface IProps {
     noTransform?: boolean;
     hexColor?: string;
     style?: 'filled' | 'hollow' | 'translucent';
+    'data-test-id'?: string;
 }
 export declare class Label extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Label.js

@@ -62,26 +62,26 @@ var Label = /** @class */ (function (_super) {
             _a));
         if (this.props.link || this.props.onClick) {
             if (this.props.style === 'hollow') {
-                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, borderColor: this.props.hexColor } }, this.props.text));
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, borderColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
             else if (this.props.style === 'translucent') {
-                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") }, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
             else {
-                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { backgroundColor: this.props.hexColor } }, this.props.text));
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { backgroundColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
         }
         else {
             if (this.props.style === 'hollow') {
-                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, borderColor: this.props.hexColor } }, this.props.text));
+                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, borderColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
             else if (this.props.style === 'translucent') {
-                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
+                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") }, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
             else {
                 return (React.createElement("span", { className: classes, style: this.props.hexColor
                         ? { backgroundColor: this.props.hexColor, color: (0, helpers_1.getTextColor)(this.props.hexColor) }
-                        : undefined }, this.props.text));
+                        : undefined, "data-test-id": this.props['data-test-id'] }, this.props.text));
             }
         }
     };

package/react/components/Modal.d.ts

@@ -13,7 +13,7 @@ interface IProps {
     maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
-    ['data-test-id']?: string;
+    'data-test-id'?: string;
     onShow?(): void;
     onHide?(): void;
 }

package/react/components/Modal.js

@@ -64,8 +64,8 @@ var Modal = /** @class */ (function (_super) {
             _a['p-dialog-content--padding-small'] = this.props.contentPadding === undefined,
             _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', "data-test-id": this.props['data-test-id'] },
-            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 }, this.props.children)));
+        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)));
     };
     return Modal;
 }(React.Component));

package/react/components/RadioButtonGroup.js

@@ -80,7 +80,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
             !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
                 React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
                     React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: _this.props.disabled || item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
-                    React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
+                    React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item", "data-test-value": item.label },
                         item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
                         !item.labelHidden || !item.icon ?
                             React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))

package/react/components/TreeSelect/TreeSelectItem.js

@@ -88,7 +88,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
                     ? this.props.optionTemplate(this.props.option.value)
                     : this.props.getLabel(this.props.option.value)),
                 this.props.option.children
-                    && React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true" },
+                    && React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true", "data-test-id": "children-indicator" },
                         React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
     };
     return TreeSelectItem;