superdesk-ui-framework 3.0.8 → 3.0.10

package/app-typescript/components/Layouts/AuthoringInnerBody.tsx

@@ -12,7 +12,9 @@ export class AuthoringInnerBody extends React.PureComponent<IProps> {
             <article
                 className={classNames(
                     'sd-editor-content__authoring-body',
-                    {'sd-editor-content__authoring-body-padding': this.props.noPadding === false},
+                    {
+                        'sd-editor-content__authoring-body-padding': !this.props.noPadding,
+                    },
                 )}
             >
                 {this.props.children}

package/app-typescript/components/Select.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 
@@ -16,14 +15,9 @@ interface ISelect {
     tabindex?: number;
     fullWidth?: boolean;
     onChange(newValue: string): void;
-    boxedStyle?: boolean;
-    boxedLable?: boolean;
-    placeholder?: string;
-    size?: 'medium' | 'large' | 'x-large';
 }
 
 interface IState {
-    value: string;
     invalid: boolean;
 }
 
@@ -33,7 +27,6 @@ class Select extends React.Component<ISelect, IState> {
         super(props);
 
         this.state = {
-            value: this.props.value ?? '',
             invalid: this.props.invalid ?? false,
         };
 
@@ -41,32 +34,34 @@ class Select extends React.Component<ISelect, IState> {
     }
 
     handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
-        this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     }
 
     render() {
         return (
             <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}>
-                <select className='sd-input__select'
-                id={this.htmlId}
-                value={this.state.value}
-                aria-describedby={this.htmlId}
-                tabIndex={this.props.tabindex}
-                onChange={this.handleChange}
-                disabled={this.props.disabled}>
-                {this.props.children}
+                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}
+            >
+                <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.children}
                 </select>
             </InputWrapper>
         );

package/dist/examples.bundle.js

@@ -66440,29 +66440,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(__webpack_require__(0));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(7));
 var Form_1 = __webpack_require__(12);
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
-            invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
+            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
         };
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
     Select.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
         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 },
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
+            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.children)));
     };
     return Select;
 }(React.Component));
@@ -102315,7 +102312,9 @@ var AuthoringInnerBody = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringInnerBody.prototype.render = function () {
-        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', { 'sd-editor-content__authoring-body-padding': this.props.noPadding === false }) }, this.props.children));
+        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', {
+                'sd-editor-content__authoring-body-padding': !this.props.noPadding,
+            }) }, this.props.children));
     };
     return AuthoringInnerBody;
 }(React.PureComponent));
@@ -127342,7 +127341,9 @@ var InputsDoc = /** @class */ (function (_super) {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            value: '',
+            value2: '',
         };
         return _this;
     }
@@ -127350,7 +127351,7 @@ var InputsDoc = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement("section", { className: 'docs-page__container' },
             React.createElement("h2", { className: 'docs-page__h2' }, "Select"),
-            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <Select value={value} required={true}>\n                        <Option>Option 1</Option>\n                        <Option>Option 2</Option>\n                    </Select>\n                "),
+            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <Select\n                        value={this.state.value}\n                        onChange={(value) => {\n                            this.setState({\n                                value: value,\n                            })\n                        }}\n                    >\n                        <Option>Option 1</Option>\n                        <Option>Option 2</Option>\n                    </Select>\n                "),
             React.createElement("p", { className: 'docs-page__paragraph' }),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
@@ -127362,34 +127363,35 @@ var InputsDoc = /** @class */ (function (_super) {
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
+                            React.createElement(app_typescript_1.Select, { value: this.state.value, label: 'Select label', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) {
+                                    _this.setState({
+                                        value: value,
+                                    });
+                                } },
                                 React.createElement(app_typescript_1.Option, null, "Option 1"),
                                 React.createElement(app_typescript_1.Option, null, "Option 2"))),
                         React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with hidden label"),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
-                                React.createElement(app_typescript_1.Option, null, "Option 1"),
-                                React.createElement(app_typescript_1.Option, null, "Option 2"))),
-                        React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
-                                React.createElement(app_typescript_1.Option, null, "Option 1"),
-                                React.createElement(app_typescript_1.Option, null, "Option 2"))),
-                        React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'x-large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
+                            React.createElement(app_typescript_1.Select, { value: this.state.value2, label: 'Select label', labelHidden: true, error: 'This is error message', info: 'This is some hint message', tabindex: 0, onChange: function (value) {
+                                    _this.setState({
+                                        value2: value,
+                                    });
+                                } },
                                 React.createElement(app_typescript_1.Option, null, "Option 1"),
                                 React.createElement(app_typescript_1.Option, null, "Option 2"))))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Select label='Select label'\n                            value='Option 2'\n                            error='This is error message'\n                            info='This is some hint message'\n                            inlineLabel={false}\n                            required={true}\n                            disabled={false}\n                            invalid={false}\n                            onChange={(value) => {}}>\n                            <Option value=\"option-1\">Option 1</option>\n                            <Option value=\"option-2\">Option 2</option>\n                        </Select>\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Select\n                            value={this.state.value}\n                            label='Select label'\n                            error='This is error message'\n                            info='This is some hint message'\n                            inlineLabel={this.state.inlineLabel}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {\n                                this.setState({\n                                    value: value,\n                                })\n                            }}\n                        >\n                            <Option>Option 1</Option>\n                            <Option>Option 2</Option>\n                        </Select>\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'string', default: '/', description: 'Item value' }),
-                React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Input label' }),
-                React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
-                React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
+                React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Label of component' }),
+                React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Info message of component' }),
+                React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error message of component' }),
                 React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
                 React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
                 React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
                 React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }),
-                React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }))));
+                React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'onChange', isRequired: true, type: 'Function', default: '/', description: 'Callback to invoke when value changes.' }))));
     };
     return InputsDoc;
 }(React.Component));
@@ -139316,7 +139318,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 653 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.8","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.10","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 654 */

package/dist/react/Selects.tsx

@@ -9,6 +9,8 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    value: string;
+    value2: string;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            value: '',
+            value2: '',
         }
     }
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                 <h2 className='docs-page__h2'>Select</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    <Select value={value} required={true}>
+                    <Select
+                        value={this.state.value}
+                        onChange={(value) => {
+                            this.setState({
+                                value: value,
+                            })
+                        }}
+                    >
                         <Option>Option 1</Option>
                         <Option>Option 2</Option>
                     </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
 
                             <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
+                                <Select
+                                    value={this.state.value}
+                                    label='Select label'
                                     error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
+                                    onChange={(value) => {
+                                        this.setState({
+                                            value: value,
+                                        })
+                                    }}
+                                >
                                     <Option>Option 1</Option>
                                     <Option>Option 2</Option>
                                 </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <p className="docs-page__paragraph">// Boxed with hidden label</p>
                             <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
+                                <Select
+                                    value={this.state.value2}
+                                    label='Select label'
                                     labelHidden
                                     error='This is error message'
                                     info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
+                                    onChange={(value) => {
+                                        this.setState({
+                                            value2: value,
+                                        })
+                                    }}
+                                >
+                                        <Option>Option 1</Option>
+                                        <Option>Option 2</Option>
                                 </Select>
-                            </div>
-                            <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
-                                    labelHidden
-                                    size='large'
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                                </Select>
-                            </div>
-                            <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
-                                    labelHidden
-                                    size='x-large'
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                                </Select>
-                            </div>
+                            </div>  
                         </div>
 
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Select label='Select label'
-                            value='Option 2'
+                        <Select
+                            value={this.state.value}
+                            label='Select label'
                             error='This is error message'
                             info='This is some hint message'
-                            inlineLabel={false}
-                            required={true}
-                            disabled={false}
-                            invalid={false}
-                            onChange={(value) => {}}>
-                            <Option value="option-1">Option 1</option>
-                            <Option value="option-2">Option 2</option>
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {
+                                this.setState({
+                                    value: value,
+                                })
+                            }}
+                        >
+                            <Option>Option 1</Option>
+                            <Option>Option 2</Option>
                         </Select>
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
-                    <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='label' isRequired={false} type='string' default='/' description='Label of component' />
+                    <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='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='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
+                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                 </PropsList>
             </section>
         )

package/dist/superdesk-ui.bundle.js

@@ -65701,29 +65701,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(__webpack_require__(0));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(7));
 var Form_1 = __webpack_require__(12);
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
-            invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
+            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
         };
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
     Select.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
         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 },
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
+            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.children)));
     };
     return Select;
 }(React.Component));
@@ -101576,7 +101573,9 @@ var AuthoringInnerBody = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringInnerBody.prototype.render = function () {
-        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', { 'sd-editor-content__authoring-body-padding': this.props.noPadding === false }) }, this.props.children));
+        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', {
+                'sd-editor-content__authoring-body-padding': !this.props.noPadding,
+            }) }, this.props.children));
     };
     return AuthoringInnerBody;
 }(React.PureComponent));