superdesk-ui-framework 3.0.35 → 3.0.38

package/examples/pages/react/TreeSelect.tsx

@@ -20,53 +20,52 @@ let options = [
             {
                 value: {name: 'Sub-category1'},
                 children: [
-                    {value: {name: 'Item31'}},
-                    // {value: {name: 'Item32'}},
-                    // {value: {name: 'Item33'}},
-                    // {value: {name: 'Item34'}},
+                    {value: {name: 'Item5'}},
+                    {value: {name: 'Item6'}},
+                    {value: {name: 'Item7'}},
+                    {value: {name: 'Item8'}},
 
                 ]
             },
             {
                 value: {name: 'Sub-category2'},
                 children: [
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item9'}},
+                    {value: {name: 'Item10'}},
+                    {value: {name: 'Item11'}},
+                    {value: {name: 'Item12'}},
                 ]
             },
             {
                 value: {name: 'Sub-category3'},
                 children: [
-                    {value: {name: 'Item50'}},
-                    {value: {name: 'Item51'}},
-                    {value: {name: 'Item53'}}
+                    {value: {name: 'Item13'}},
+                    {value: {name: 'Item14'}},
                 ]
             },
             {
                 value: {name: 'Sub-category4'},
                 children: [
-                    {value: {name: 'Item23'}},
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item15'}},
+                    {value: {name: 'Item16'}},
                 ]
             },
             {
                 value: {name: 'Sub-category5'},
                 children: [
-                    {value: {name: 'Item24'}},
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item17'}},
+                    {value: {name: 'Item18'}},
+                    {value: {name: 'Item19'}},
+                    {value: {name: 'Item20'}},
                 ]
             },
             {
                 value: {name: 'Sub-category6'},
                 children: [
-                    {value: {name: 'Item50'}},
-                    {value: {name: 'Item51'}},
-                    {value: {name: 'Item52'}}
+                    {value: {name: 'Item21'}},
+                    {value: {name: 'Item22'}},
+                    {value: {name: 'Item23'}},
+                    {value: {name: 'Item24'}},
                 ]
             }
         ]
@@ -75,21 +74,21 @@ let options = [
         value: {name: 'Category2'},
         children: [
             {
-                value: {name: 'Item8'}
+                value: {name: 'Item1'}
             },
-            // {
-            //     value: {name: 'Item9'}
-            // }
+            {
+                value: {name: 'Item2'}
+            }
         ]
     },
     {
         value: {name: 'Category3', bgColor: 'red'},
         children: [
             {
-                value: {name: 'Item10'}
+                value: {name: 'Item3'}
             },
             {
-                value: {name: 'Item11'}
+                value: {name: 'Item4'}
             }
         ]
     },
@@ -102,41 +101,47 @@ let options2 = [
             {
                 value: {name: 'Sub-category1'},
                 children: [
-                    {value: {name: 'Item20'}}
+                    {value: {name: 'Item5'}},
+                    {value: {name: 'Item6'}},
                 ]
             },
             {
                 value: {name: 'Sub-category2'},
                 children: [
-                    {value: {name: 'Item21'}}
+                    {value: {name: 'Item7'}},
+                    {value: {name: 'Item8'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category3'},
                 children: [
-                    {value: {name: 'Item22'}}
+                    {value: {name: 'Item9'}},
+                    {value: {name: 'Item10'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category4'},
                 children: [
-                    {value: {name: 'Item23'}}
+                    {value: {name: 'Item11'}},
+                    {value: {name: 'Item12'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category5'},
                 children: [
-                    {value: {name: 'Item24'}}
+                    {value: {name: 'Item13'}},
+                    {value: {name: 'Item14'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category6'},
                 children: [
-                    {value: {name: 'Item25'}}
+                    {value: {name: 'Item15'}},
+                    {value: {name: 'Item16'}},
                 ]
             }
         ]
@@ -145,10 +150,10 @@ let options2 = [
         value: {name: 'Category2', border: 'green'},
         children: [
             {
-                value: {name: 'Item8'}
+                value: {name: 'Item1'}
             },
             {
-                value: {name: 'Item9'}
+                value: {name: 'Item2'}
             }
         ]
     },
@@ -156,10 +161,10 @@ let options2 = [
         value: {name: 'Category3', border: 'yellow'},
         children: [
             {
-                value: {name: 'Item10'}
+                value: {name: 'Item3'}
             },
             {
-                value: {name: 'Item11'}
+                value: {name: 'Item4'}
             }
         ]
     },
@@ -223,10 +228,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                 <Markup.ReactMarkupCodePreview>{`
                     <TreeSelect
-                        options={this.state.options2}
-                        getLabel={'label'}
-                        getMultilevelArray={'items'}
-                        selectBranchWithChildren={true}
+                        kind={'synchronous' | 'asynchronous'}
+                        value={this.state.value}
+                        getOptions={() => this.state.options}
+                        getLabel={(item) => item.label}
+                        getId={(item) => item.id}
+                        allowMultiple
+                        selectBranchWithChildren
                         onChange={() => false}
                     />
                 `}
@@ -237,22 +245,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
-                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    kind='synchronous'
+                                    value={[{name: 'Category1'}]}
                                     getOptions={() => options}
-                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item: any) => item.bgColor}
-                                    selectBranchWithChildren={true}
+                                    selectBranchWithChildren
                                     allowMultiple
-                                    fullWidth
-                                    //singleLevelSearch
-                                    required
-                                    info={'Info Message'}
-                                    error={'Error Message'}
-                                    label={'TreeSelect Label'}
                                     searchPlaceholder='Search...'
-                                    onChange={(e) => false}
+                                    info='Info Message'
+                                    error='Error Message'
+                                    label='TreeSelect Label'
+                                    getBackgroundColor={(item: any) => item.bgColor} 
                                     valueTemplate={(item, Wrapper) => {
                                         return (
                                             <Wrapper backgroundColor={item.bgColor}>
@@ -260,6 +264,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                             </Wrapper>
                                         );
                                     }}
+                                    onChange={(e) => false}
                                 />
                             </div>
                         </div>
@@ -267,22 +272,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
-                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            kind='synchronous'
+                            value={[{name: 'Item 1'}, {name: 'Item 2'}]}
                             getOptions={() => options}
-                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getBackgroundColor={(item: any) => item.bgColor}
-                            selectBranchWithChildren={true}
+                            selectBranchWithChildren
                             allowMultiple
-                            fullWidth
-                            singleLevelSearch
-                            required
+                            searchPlaceholder='Search...'
                             info={'Info Message'}
                             error={'Error Message'}
                             label={'TreeSelect Label'}
-                            searchPlaceholder='Search...'
-                            onChange={(e) => false}
+                            getBackgroundColor={(item: any) => item.bgColor} 
                             valueTemplate={(item, Wrapper) => {
                                 return (
                                     <Wrapper backgroundColor={item.bgColor}>
@@ -290,6 +291,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     </Wrapper>
                                 );
                             }}
+                            onChange={(e) => false}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -302,16 +304,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             <div className='form__row'>
                             <TreeSelect
                                 kind="asynchronous"
-                                searchOptions={searchOptions}
                                 value={this.state.value}
+                                getLabel={({display_name}) => display_name}
+                                getId={({display_name}) => display_name}
+                                selectBranchWithChildren
+                                allowMultiple
+                                searchOptions={searchOptions}
+                                info='Info Message'
+                                error='Error Message'
+                                label='TreeSelect Label'
                                 onChange={(val) => {
                                     this.setState({value: val});
                                 }}
-                                getLabel={({display_name}) => display_name
-                                }
-                                getId={({qcode}) => qcode.display_name}
-                                selectBranchWithChildren={false}
-                                allowMultiple={true}
                             />
                             </div>
                         </div>
@@ -320,36 +324,37 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind="asynchronous"
-                            searchOptions={searchOptions}
                             value={this.state.value}
+                            getLabel={({display_name}) => display_name}
+                            getId={({qcode}) => qcode.display_name}
+                            selectBranchWithChildren
+                            allowMultiple
+                            searchOptions={searchOptions}
                             onChange={(val) => {
                                 this.setState({value: val});
                             }}
-                            getLabel={({name}) => name}
-                            getId={({qcode}) => qcode}
-                            selectBranchWithChildren={false}
-                            optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
-                            allowMultiple={true}
                         />
                     `}</Markup.ReactMarkupCode>
 
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <p className='docs-page__paragraph'>SingleSelect mode with custom template.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    kind='synchronous'
+                                    value={[]}
                                     getOptions={() => options2}
-                                    kind={'synchronous'}
-                                    getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item) => item.bgColor}
+                                    getId={(item) => item.name}
                                     getBorderColor={(item) => item.border}
+                                    selectBranchWithChildren
                                     placeholder='Select one'
-                                    selectBranchWithChildren={true}
-                                    onChange={(e) => false}
+                                    info='Info Message'
+                                    error='Error Message'
+                                    label='TreeSelect Label'
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
@@ -358,6 +363,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                             <span>{item.name}</span>
                                         </Wrapper>
                                     }}
+                                    onChange={(e) => false}
                                 />
                             </div>
                         </div>
@@ -365,15 +371,15 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            kind='synchronous'
+                            value={[{name: 'Item 1'}]}
                             getOptions={() => options2}
-                            kind={'synchronous'}
-                            getId={(item) => item.name}
                             getLabel={(item) => item.name}
+                            getId={(item) => item.name}
                             getBackgroundColor={(item) => item.bgColor}
                             getBorderColor={(item) => item.border}
+                            selectBranchWithChildren
                             placeholder='Select one'
-                            selectBranchWithChildren={true}
-                            onChange={(e) => false}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
@@ -382,6 +388,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     <span>{item.name}</span>
                                 </Wrapper>
                             }}
+                            onChange={(e) => false}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -408,13 +415,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
                     <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
-                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
                 </PropsList>
 
                 <p className='docs-page__paragraph'>synchronous:</p>

package/package.json

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

package/react/components/DatePicker.d.ts

@@ -1,23 +1,14 @@
 import * as React from 'react';
 import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
+import { IInputWrapper } from './Form/InputWrapper';
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
-interface IDatePickerBase {
+interface IDatePickerBase extends IInputWrapper {
     dateFormat: string;
     headerButtonBar?: Array<{
         days: number;
         label: string;
     }>;
     locale?: DatePickerLocaleSettings;
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
@@ -26,7 +17,6 @@ interface IDatePicker extends IDatePickerBase {
 interface IState {
     value: CalendarProps['value'];
     valid: boolean;
-    invalid: boolean;
 }
 export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
     private instance;

package/react/components/DatePicker.js

@@ -56,9 +56,9 @@ exports.DatePickerISO = exports.DatePicker = void 0;
 var React = __importStar(require("react"));
 var addDays_1 = __importDefault(require("date-fns/addDays"));
 var format_1 = __importDefault(require("date-fns/format"));
+var moment_1 = __importDefault(require("moment"));
 var calendar_1 = require("@superdesk/primereact/calendar");
 var lodash_1 = require("lodash");
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var internalPrimereactClassnames = {
@@ -86,14 +86,11 @@ function parseToPrimeReactCalendarFormat(value) {
 var DatePicker = /** @class */ (function (_super) {
     __extends(DatePicker, _super);
     function DatePicker(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             value: parseToPrimeReactCalendarFormat(_this.props.value),
             valid: true,
-            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
         };
         _this.hidePopupOnScroll = (0, lodash_1.throttle)(function () {
             if (_this.instance != null
@@ -131,7 +128,15 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.props.locale != null) {
             locale = __assign(__assign({}, this.props.locale), { today: 'today', clear: 'clear' });
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        if (this.props.preview) {
+            return (
+            // We have to do type assertion here because we wrap primereact's component using
+            // a narrower interface i.e. primereact supports an array of dates or a single date,
+            // and our wrapped component will only ever use a single date.
+            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 },
             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) {
@@ -148,7 +153,8 @@ var DatePicker = /** @class */ (function (_super) {
                     var label = _a.label, days = _a.days;
                     return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
                             _this.props.onChange((0, addDays_1.default)(new Date(), days));
-                            if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
+                            if (_this.instance != null
+                                && typeof _this.instance.hideOverlay === 'function') {
                                 _this.instance.hideOverlay();
                             }
                         } }, label));
@@ -181,7 +187,7 @@ var DatePickerISO = /** @class */ (function (_super) {
                 else {
                     _this.props.onChange((0, format_1.default)(value, 'yyyy-MM-dd'));
                 }
-            }, disabled: this.props.disabled, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
+            }, disabled: this.props.disabled, preview: this.props.preview, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
     };
     return DatePickerISO;
 }(React.PureComponent));

package/react/components/DurationInput.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
-interface IProps {
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps extends IInputWrapper {
     hours?: number;
     minutes?: number;
     seconds?: number;
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
     onChange(e: number): void;
 }
 interface IState {

package/react/components/DurationInput.js

@@ -43,7 +43,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDurationString = exports.DurationInput = void 0;
 var React = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
 var moment_1 = __importDefault(require("moment"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
@@ -301,9 +300,20 @@ var DurationInput = /** @class */ (function (_super) {
     };
     DurationInput.prototype.render = function () {
         var _this = this;
-        var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, 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("div", { className: InputClasses },
+        if (this.props.preview) {
+            return (React.createElement("div", { className: 'sd-input__duration-input-preview' },
+                React.createElement("div", null,
+                    React.createElement("span", { className: 'duration-input-preview' }, this.state.hours),
+                    React.createElement("span", { className: 'sd-input__suffix' }, "h")),
+                React.createElement("div", null,
+                    React.createElement("span", { className: 'duration-input-preview' }, this.state.minutes),
+                    React.createElement("span", { className: 'sd-input__suffix' }, "m")),
+                React.createElement("div", null,
+                    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 },
+            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)) {
                             event.preventDefault();

package/react/components/Form/InputNew.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface IPropsBase {
-    label?: string;
+    label: string;
     maxLength?: number;
     info?: string;
     inlineLabel?: boolean;

package/react/components/Form/InputWrapper.d.ts

@@ -1,19 +1,25 @@
 import * as React from 'react';
-interface IPropsBase {
-    label?: string;
-    children: React.ReactNode;
-    maxLength?: number;
+export interface IInputCommon {
+    label: string;
     info?: string;
     error?: string;
     required?: boolean;
     disabled?: boolean;
-    invalid?: boolean;
+    readonly?: boolean;
+    preview?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
     fullWidth?: boolean;
     boxedStyle?: boolean;
     boxedLable?: boolean;
+}
+export interface IInputWrapper extends IInputCommon {
+    invalid?: boolean;
+}
+interface IPropsBase extends IInputWrapper {
+    children: React.ReactNode;
+    maxLength?: number;
     value?: string | number;
     htmlId?: string;
     size?: 'medium' | 'large' | 'x-large';

package/react/components/Form/InputWrapper.js

@@ -78,18 +78,15 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                ? React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
                     _b.toString().length,
                     " / ",
-                    this.props.maxLength)
-                : null,
+                    this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.props.invalid
-                    ? React.createElement("div", { className: 'sd-input__hint' }, this.props.info)
-                    : null,
-                this.props.invalid || this.props.invalid
-                    ? React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                this.props.info && !this.props.invalid
+                    && React.createElement("div", { className: 'sd-input__hint' }, this.props.info),
+                this.props.invalid
+                    && React.createElement("div", { className: 'sd-input__message' }, this.props.error))));
     };
     return InputWrapper;
 }(React.Component));