superdesk-ui-framework 3.0.45 → 3.0.46

package/dist/react/TreeSelect.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
-import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
-import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect/TreeSelect';
+import { TreeSelect } from '../../../app-typescript/components/TreeSelect/TreeSelect';
 
 interface IState {
     value: any;
@@ -171,8 +170,7 @@ let options2 = [
 ]
 
 let fetchedArr = [];
-fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
-);
+fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
 
 type ICancelFn = () => void;
 
@@ -206,7 +204,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
             arr: []
         }
 
-
         this.handleChange = this.handleChange.bind(this);
     }
 
@@ -252,10 +249,9 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     getLabel={(item) => item.name}
                                     selectBranchWithChildren
                                     allowMultiple
-                                    searchPlaceholder='Search...'
-                                    info='Info Message'
-                                    error='Error Message'
                                     label='TreeSelect Label'
+                                    info='Info Message'
+                                    searchPlaceholder='Search...'
                                     getBackgroundColor={(item: any) => item.bgColor} 
                                     valueTemplate={(item, Wrapper) => {
                                         return (
@@ -273,16 +269,15 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind='synchronous'
-                            value={[{name: 'Item 1'}, {name: 'Item 2'}]}
+                            value={[{name: 'Category1'}]}
                             getOptions={() => options}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
                             selectBranchWithChildren
                             allowMultiple
+                            label='TreeSelect Label'
+                            info='Info Message'
                             searchPlaceholder='Search...'
-                            info={'Info Message'}
-                            error={'Error Message'}
-                            label={'TreeSelect Label'}
                             getBackgroundColor={(item: any) => item.bgColor} 
                             valueTemplate={(item, Wrapper) => {
                                 return (
@@ -310,9 +305,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 selectBranchWithChildren
                                 allowMultiple
                                 searchOptions={searchOptions}
-                                info='Info Message'
-                                error='Error Message'
                                 label='TreeSelect Label'
+                                info='Info Message'
                                 onChange={(val) => {
                                     this.setState({value: val});
                                 }}
@@ -326,10 +320,12 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             kind="asynchronous"
                             value={this.state.value}
                             getLabel={({display_name}) => display_name}
-                            getId={({qcode}) => qcode.display_name}
+                            getId={({display_name}) => display_name}
                             selectBranchWithChildren
                             allowMultiple
                             searchOptions={searchOptions}
+                            label='TreeSelect Label'
+                            info='Info Message'
                             onChange={(val) => {
                                 this.setState({value: val});
                             }}
@@ -351,10 +347,9 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     getId={(item) => item.name}
                                     getBorderColor={(item) => item.border}
                                     selectBranchWithChildren
-                                    placeholder='Select one'
-                                    info='Info Message'
-                                    error='Error Message'
                                     label='TreeSelect Label'
+                                    info='Info Message'
+                                    placeholder='Select one'
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
@@ -372,13 +367,14 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind='synchronous'
-                            value={[{name: 'Item 1'}]}
+                            value={[]}
                             getOptions={() => options2}
                             getLabel={(item) => item.name}
                             getId={(item) => item.name}
-                            getBackgroundColor={(item) => item.bgColor}
                             getBorderColor={(item) => item.border}
                             selectBranchWithChildren
+                            label='TreeSelect Label'
+                            info='Info Message'
                             placeholder='Select one'
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>

package/dist/superdesk-ui.bundle.css

@@ -49687,33 +49687,32 @@ textarea.sd-media-carousel__media-title {
       inset-block-start: -2px;
       inset-inline-end: 4px; }
 
-.sd-input--invalid input.sd-input__input,
-.sd-input--invalid textarea.sd-input__input {
+.sd-input--invalid .sd-input__input,
+.sd-input--invalid .sd-input__select,
+.sd-input--invalid .sd-input__duration-input,
+.sd-input--invalid .p-multiselect,
+.sd-input--invalid .p-calendar {
   background-color: rgba(228, 27, 37, 0.075);
   border-color: #e41b21; }
-  .sd-input--invalid input.sd-input__input:hover,
-  .sd-input--invalid textarea.sd-input__input:hover {
+  .sd-input--invalid .sd-input__input:hover,
+  .sd-input--invalid .sd-input__select:hover,
+  .sd-input--invalid .sd-input__duration-input:hover,
+  .sd-input--invalid .p-multiselect:hover,
+  .sd-input--invalid .p-calendar:hover {
     background-color: rgba(228, 27, 37, 0.12);
     border-color: #e41b21; }
-  .sd-input--invalid input.sd-input__input:focus,
-  .sd-input--invalid textarea.sd-input__input:focus {
-    background-color: rgba(228, 27, 37, 0.16);
-    border-color: #e41b21;
-    box-shadow: 0 1px 0 0 #e41b21; }
-
-.sd-input--invalid select.sd-input__select {
-  background-color: rgba(228, 27, 37, 0.075);
-  border-color: #e41b21; }
-  .sd-input--invalid select.sd-input__select:hover {
-    background-color: rgba(228, 27, 37, 0.12);
-    border-color: #e41b21; }
-  .sd-input--invalid select.sd-input__select:focus {
+  .sd-input--invalid .sd-input__input:focus,
+  .sd-input--invalid .sd-input__select:focus,
+  .sd-input--invalid .sd-input__duration-input:focus,
+  .sd-input--invalid .p-multiselect:focus,
+  .sd-input--invalid .p-calendar:focus {
     background-color: rgba(228, 27, 37, 0.16);
     border-color: #e41b21;
     box-shadow: 0 1px 0 0 #e41b21; }
 
 .sd-input--invalid .sd-input__label,
-.sd-input--invalid .sd-input__message {
+.sd-input--invalid .sd-input__message,
+.sd-input--invalid .sd-input__message-box {
   color: #e41b21; }
 
 .sd-input--required .sd-input__label::after {

package/dist/superdesk-ui.bundle.js

@@ -39701,7 +39701,7 @@ var DatePicker = /** @class */ (function (_super) {
             React.createElement("div", null,
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
@@ -41259,7 +41259,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
@@ -63717,7 +63717,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", 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);
                 } })));
@@ -63793,7 +63793,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;
@@ -64514,7 +64514,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         getBorderColor: this.props.getBorderColor,
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
@@ -65948,7 +65948,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, invalid: this.props.error != null ? true : false, error: this.props.error, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
     };
     return Input;
@@ -66024,7 +66024,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
     };
     return Select;
@@ -116560,7 +116560,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);

package/examples/pages/react/DatePicker.tsx

@@ -10,6 +10,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
             date: new Date(),
         };
     }
+
     render() {
         return (
             <DatePicker
@@ -18,9 +19,8 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
                 onChange={(date) => {
                     this.setState({date});
                 }}
-                label={'This is Label'}
-                info={'This is info'}
-                error={'This is error'}
+                label='This is Label'
+                info='This is info'
             />
         );
     }
@@ -40,6 +40,7 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
             date: new Date(),
         };
     }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -67,9 +68,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                                 onChange={(date) => {
                                     this.setState({today: date});
                                 }}
-                                label={'This is Label'}
-                                info={'This is info'}
-                                error={'This is error'}
+                                label='This is Label'
+                                info='This is info'
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -123,9 +123,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                                 onChange={(date) => {
                                     this.setState({date});
                                 }}
-                                label={'This is Label'}
-                                info={'This is info'}
-                                error={'This is error'}
+                                label='This is Label'
+                                info='This is info'
                                 headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
                             />
                         </div>
@@ -137,9 +136,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                             onChange={(date) => {
                                 this.setState({date});
                             }}
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
+                            label='This is Label'
+                            info='This is info'
                             headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
                         />
                     `}</Markup.ReactMarkupCode>

package/examples/pages/react/DurationInput.tsx

@@ -70,8 +70,8 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                             disabled={this.state.disabled}
                             required={this.state.required}
                             inlineLabel={this.state.inlineLabel}
-                            onChange={(e) => {
-                                this.setState({value: e})
+                            onChange={(value) => {
+                                this.setState({value})
                             }}
                         />
                     `}</Markup.ReactMarkupCode>

package/examples/pages/react/MultiSelect.tsx

@@ -63,7 +63,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <MultiSelect
-                                preview
                                     value={this.state.value}
                                     options={ItemArr}
                                     optionLabel={(option) => option.name}

package/examples/pages/react/Selects.tsx

@@ -55,7 +55,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                 <Select
                                     value={this.state.value}
                                     label='Select label'
-                                    error='This is error message'
                                     info='This is some hint message'
                                     required={this.state.required}
                                     disabled={this.state.disabled}
@@ -77,7 +76,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
                         <Select
                             value={this.state.value}
                             label='Select label'
-                            error='This is error message'
                             info='This is some hint message'
                             required={this.state.required}
                             disabled={this.state.disabled}

package/examples/pages/react/TagInputDocs.tsx

@@ -30,9 +30,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                             <TagInput
                                 value={this.state.value}
                                 placeholder="Type Here"
-                                label={'Tag-input Label'}
-                                info={'Info Message'}
-                                error={'Error Message'}
+                                label='Tag-input Label'
+                                info='Info Message'
                                 onChange={(value) => {
                                     this.setState({
                                         value: value,
@@ -45,9 +44,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                         <TagInput
                             value={this.state.value}
                             placeholder="Type Here"
-                            label={'Tag-input Label'}
-                            info={'Info Message'}
-                            error={'Error Message'}
+                            label='Tag-input Label'
+                            info='Info Message'
                             onChange={(value) => {
                                 this.setState({
                                     value: value,

package/examples/pages/react/TimePicker.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
@@ -12,6 +11,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
             time: '',
         };
     }
+
     render() {
         return (
             <TimePicker
@@ -20,9 +20,8 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
                     this.setState({time});
                 }}
                 allowSeconds
-                label={'This is Label'}
-                info={'This is info'}
-                error={'This is error'}
+                label='This is Label'
+                info='This is info'
             />
         );
     }
@@ -54,9 +53,8 @@ export default class TimePickerDoc extends React.Component {
                                 this.setState({time});
                             }}
                             allowSeconds
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
+                            label='This is Label'
+                            info='This is info'
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>

package/examples/pages/react/TreeSelect.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
-import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
-import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect/TreeSelect';
+import { TreeSelect } from '../../../app-typescript/components/TreeSelect/TreeSelect';
 
 interface IState {
     value: any;
@@ -171,8 +170,7 @@ let options2 = [
 ]
 
 let fetchedArr = [];
-fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
-);
+fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
 
 type ICancelFn = () => void;
 
@@ -206,7 +204,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
             arr: []
         }
 
-
         this.handleChange = this.handleChange.bind(this);
     }
 
@@ -252,10 +249,9 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     getLabel={(item) => item.name}
                                     selectBranchWithChildren
                                     allowMultiple
-                                    searchPlaceholder='Search...'
-                                    info='Info Message'
-                                    error='Error Message'
                                     label='TreeSelect Label'
+                                    info='Info Message'
+                                    searchPlaceholder='Search...'
                                     getBackgroundColor={(item: any) => item.bgColor} 
                                     valueTemplate={(item, Wrapper) => {
                                         return (
@@ -273,16 +269,15 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind='synchronous'
-                            value={[{name: 'Item 1'}, {name: 'Item 2'}]}
+                            value={[{name: 'Category1'}]}
                             getOptions={() => options}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
                             selectBranchWithChildren
                             allowMultiple
+                            label='TreeSelect Label'
+                            info='Info Message'
                             searchPlaceholder='Search...'
-                            info={'Info Message'}
-                            error={'Error Message'}
-                            label={'TreeSelect Label'}
                             getBackgroundColor={(item: any) => item.bgColor} 
                             valueTemplate={(item, Wrapper) => {
                                 return (
@@ -310,9 +305,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 selectBranchWithChildren
                                 allowMultiple
                                 searchOptions={searchOptions}
-                                info='Info Message'
-                                error='Error Message'
                                 label='TreeSelect Label'
+                                info='Info Message'
                                 onChange={(val) => {
                                     this.setState({value: val});
                                 }}
@@ -326,10 +320,12 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             kind="asynchronous"
                             value={this.state.value}
                             getLabel={({display_name}) => display_name}
-                            getId={({qcode}) => qcode.display_name}
+                            getId={({display_name}) => display_name}
                             selectBranchWithChildren
                             allowMultiple
                             searchOptions={searchOptions}
+                            label='TreeSelect Label'
+                            info='Info Message'
                             onChange={(val) => {
                                 this.setState({value: val});
                             }}
@@ -351,10 +347,9 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     getId={(item) => item.name}
                                     getBorderColor={(item) => item.border}
                                     selectBranchWithChildren
-                                    placeholder='Select one'
-                                    info='Info Message'
-                                    error='Error Message'
                                     label='TreeSelect Label'
+                                    info='Info Message'
+                                    placeholder='Select one'
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
@@ -372,13 +367,14 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind='synchronous'
-                            value={[{name: 'Item 1'}]}
+                            value={[]}
                             getOptions={() => options2}
                             getLabel={(item) => item.name}
                             getId={(item) => item.name}
-                            getBackgroundColor={(item) => item.bgColor}
                             getBorderColor={(item) => item.border}
                             selectBranchWithChildren
+                            label='TreeSelect Label'
+                            info='Info Message'
                             placeholder='Select one'
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>

package/package.json

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

package/react/components/DatePicker.js

@@ -136,7 +136,7 @@ var DatePicker = /** @class */ (function (_super) {
             React.createElement("div", null,
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {

package/react/components/DurationInput.js

@@ -312,7 +312,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {

package/react/components/Input.js

@@ -67,7 +67,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, invalid: this.props.error != null ? true : false, error: this.props.error, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
     };
     return Input;

package/react/components/MultiSelect.js

@@ -70,7 +70,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);

package/react/components/Select.js

@@ -61,7 +61,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
     };
     return Select;

package/react/components/TagInput.js

@@ -59,7 +59,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;

package/react/components/TimePicker.js

@@ -58,7 +58,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", 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);
                 } })));

package/react/components/TreeSelect/TreeSelect.js

@@ -494,7 +494,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         getBorderColor: this.props.getBorderColor,
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
+        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 },
             React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },