superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8

package/examples/pages/react/TableList.tsx

@@ -14,40 +14,40 @@ interface IProps {
 export default class TableListDoc extends React.Component<IProps, IState> {
     constructor(props: IState) {
         super(props);
-        this.state={
+        this.state = {
             array: [
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 1</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 2</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 3</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
@@ -61,7 +61,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>TableList</h2>
-                
+
                 <Markup.ReactMarkupCodePreview>{`
                     <TableList
                     dragAndDrop
@@ -82,50 +82,50 @@ export default class TableListDoc extends React.Component<IProps, IState> {
 
                         <TableList>
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='translucent' text='aacc' />
+                                        <Label style='translucent' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                }
+                                action={
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
+                                } />
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='hollow' text='aacc' />
-                                    <Label style='filled' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='hollow' text='aacc' />
+                                        <Label style='filled' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                } />
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='translucent' text='aacc' />
+                                        <Label style='translucent' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                }
+                                action={
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
+                                } />
                         </TableList>
 
                     </Markup.ReactMarkupPreview>
@@ -183,17 +183,18 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 <p className="docs-page__paragraph">With drag and drop functionality:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        
+
                         <TableList
-                        dragAndDrop
-                        addItem
-                        array={this.state.array}
-                        itemsDropdown={[
-                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                        ]}
-                        onClick={() => false}
+                            dragAndDrop
+                            addItem
+                            array={this.state.array}
+                            itemsDropdown={[
+                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            onClick={() => false}
+                            onDrag={(start, end) => console.log(start, end)}
                         />
 
                     </Markup.ReactMarkupPreview>
@@ -216,28 +217,29 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">TableList</p>
                 <PropsList>
-                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.'/>
-                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.'/>
-                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.'/>
-                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.'/>
-                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.'/>
-                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
+                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
+                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
+                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
+                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
+                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
+                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                    <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
                 </PropsList>
                 <p className="docs-page__paragraph">array:</p>
                 <PropsList>
-                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
                 </PropsList>
                 <p className="docs-page__paragraph">TableListItem</p>
                 <PropsList>
-                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
                 </PropsList>
 
             </section>

package/examples/pages/react/TimePicker.tsx

@@ -24,6 +24,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
             label={'This is Label'}
             info={'This is info'}
             error={'This is error'}
+            allowSeconds
             />
         );
     }
@@ -75,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
-                    <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='value' isRequired={true} type='string' default='/' description='Item value.' />
+                    <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
+                    <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>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
                 </PropsList>
             </section>
         );

package/examples/pages/react/TreeSelect.tsx

@@ -183,7 +183,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     error={'Error Message'}
                                     required
                                     label={'TreeSelect Label'}
-                                    singleLevelSearch
+
                                 />
                             </div>
                         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.6",
+  "version": "3.0.1-beta.8",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "@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",

package/react/components/DurationInput.d.ts

@@ -19,6 +19,7 @@ interface IState {
     hours?: any;
     minutes?: any;
     seconds?: any;
+    blink?: string;
 }
 export declare class DurationInput extends React.PureComponent<IProps, IState> {
     hourRef: React.RefObject<HTMLInputElement>;
@@ -27,7 +28,7 @@ export declare class DurationInput extends React.PureComponent<IProps, IState> {
     private htmlId;
     constructor(props: IProps);
     stateUpdate(state: string, parametar1?: number, parametar2?: number, parametar3?: number): string | number;
-    componentDidUpdate(_: any, prevState: IState): void;
+    componentDidUpdate(prevProps: any, prevState: IState): void;
     valueUpdate(): void;
     handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
     handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;

package/react/components/DurationInput.js

@@ -52,6 +52,7 @@ var DurationInput = /** @class */ (function (_super) {
             hours: _this.stateUpdate('hours', _this.props.hours, _this.props.minutes, _this.props.seconds),
             minutes: _this.stateUpdate('minutes', _this.props.minutes, _this.props.seconds),
             seconds: _this.stateUpdate('seconds', _this.props.seconds),
+            blink: '',
         };
         _this.hourRef = React.createRef();
         _this.minuteRef = React.createRef();
@@ -82,7 +83,8 @@ var DurationInput = /** @class */ (function (_super) {
         }
         return this.zeroPad(value);
     };
-    DurationInput.prototype.componentDidUpdate = function (_, prevState) {
+    DurationInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
         if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
             return;
         }
@@ -99,6 +101,10 @@ var DurationInput = /** @class */ (function (_super) {
                     hours: this.zeroPad(Number(this.state.hours) + 1),
                     minutes: this.zeroPad(this.state.minutes % 60),
                 });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
@@ -107,6 +113,10 @@ var DurationInput = /** @class */ (function (_super) {
                         : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,
                 });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
             }
         }
         if (this.state.seconds !== prevState.seconds) {
@@ -115,14 +125,31 @@ var DurationInput = /** @class */ (function (_super) {
                     minutes: this.zeroPad(Number(this.state.minutes) + 1),
                     seconds: this.zeroPad(this.state.seconds % 60),
                 });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
             }
             if (Number(this.secondRef.current.value) < 0) {
                 this.setState({
                     minutes: this.zeroPad(Number(this.state.minutes) - 1),
                     seconds: 59,
                 });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
             }
         }
+        if ((this.props.hours !== prevProps.hours)
+            || (this.props.minutes !== prevProps.minutes)
+            || (this.props.seconds !== prevProps.seconds)) {
+            this.setState({
+                hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
+                minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
+                seconds: this.stateUpdate('seconds', this.props.seconds),
+            });
+        }
     };
     DurationInput.prototype.valueUpdate = function () {
         if (this.props.onChange) {
@@ -226,7 +253,12 @@ var DurationInput = /** @class */ (function (_super) {
     DurationInput.prototype.handleChange = function (event, state) {
         var stateClone = {};
         if (event.target.value.length >= 2) {
-            stateClone[state] = event.target.value.slice(0, 2);
+            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
+                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+            }
+            else {
+                stateClone[state] = event.target.value.slice(0, 2);
+            }
         }
         else {
             stateClone[state] = event.target.value;
@@ -261,13 +293,13 @@ var DurationInput = /** @class */ (function (_super) {
         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 },
-                React.createElement("input", { className: 'duration-input', type: 'text', id: 'hours', 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) {
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', 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();
                         }
                     } }),
                 React.createElement("span", { className: 'sd-input__suffix' }, "h"),
-                React.createElement("input", { className: 'duration-input', type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }

package/react/components/EmptyState.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     size?: 'small' | 'large';
     title: string;
     description?: string;
+    absolutePositioned?: boolean;
 }
 export declare class EmptyState extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/EmptyState.js

@@ -53,7 +53,7 @@ var EmptyState = /** @class */ (function (_super) {
             _a["content-state__image--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
             _a));
         var image = require("../../app/img/empty_states/empty-state--".concat(this.props.size ? this.props.size : 'small', "-").concat(this.props.illustration ? this.props.illustration : '1', ".svg"));
-        return (React.createElement("div", { className: 'content-state--empty-container' },
+        return (React.createElement("div", { className: 'content-state--empty-container' + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
             React.createElement("div", { className: 'content-state__empty-info' },
                 React.createElement("figure", { className: classes },
                     React.createElement("img", { src: image, alt: this.props.illustration })),

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    children: React.ReactNode;
+    spaces?: 'default' | 'condensed' | 'relaxed';
+    marginBottom?: '0' | '1' | '2' | '3' | '4';
+    inlineLabels?: boolean;
+    rowLabel?: string;
+}
+export declare class FormRowNew extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Form/FormRowNew.js

@@ -0,0 +1,67 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRowNew = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var FormRowNew = /** @class */ (function (_super) {
+    __extends(FormRowNew, _super);
+    function FormRowNew() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FormRowNew.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('form__group-new', (_a = {},
+            _a["form__group-new--".concat(this.props.spaces)] = this.props.spaces,
+            _a["form__group-new--mb-".concat(this.props.marginBottom)] = this.props.marginBottom,
+            _a['form__group-new--inline-labels'] = this.props.inlineLabels,
+            _a['form__group-new--has_row-label'] = this.props.rowLabel,
+            _a));
+        if (this.props.rowLabel) {
+            return (React.createElement("div", { className: 'form__group-new__wrapper' },
+                React.createElement("label", { className: 'form__group-new__label', htmlFor: "form__group-new__label" }, this.props.rowLabel),
+                React.createElement("div", { className: classes }, this.props.children)));
+        }
+        else {
+            return (React.createElement("div", { className: classes }, this.props.children));
+        }
+    };
+    return FormRowNew;
+}(React.PureComponent));
+exports.FormRowNew = FormRowNew;

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

@@ -6,3 +6,4 @@ export { FormLabel } from './FormLabel';
 export { InputWrapper } from './InputWrapper';
 export { InputBase } from './InputBase';
 export { InputNew } from './InputNew';
+export { FormRowNew } from './FormRowNew';

package/react/components/Form/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
+exports.FormRowNew = exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
 var FormRow_1 = require("./FormRow");
 Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
 var FormGroup_1 = require("./FormGroup");
@@ -17,3 +17,5 @@ var InputBase_1 = require("./InputBase");
 Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
 var InputNew_1 = require("./InputNew");
 Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
+var FormRowNew_1 = require("./FormRowNew");
+Object.defineProperty(exports, "FormRowNew", { enumerable: true, get: function () { return FormRowNew_1.FormRowNew; } });

package/react/components/Layouts/AuthoringContainer.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     side?: 'left' | 'right';
     background?: 'transparent' | 'light' | 'grey' | 'dark';
     open?: boolean;
+    large?: boolean;
 }
 export declare class AuthoringContainer extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/AuthoringContainer.js

@@ -53,7 +53,7 @@ var AuthoringContainer = /** @class */ (function (_super) {
             _a['open-editor'] = this.props.open,
             _a));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: 'sd-editor__container' }, this.props.children)));
+            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
     };
     return AuthoringContainer;
 }(React.PureComponent));

package/react/components/LeftMenu.d.ts

@@ -13,7 +13,8 @@ interface IMenuGroup {
 interface IMenu {
     className?: string;
     groups: Array<IMenuGroup>;
-    activeItemId: string;
+    activeItemId?: string;
+    scrollTo?: string;
     ariaLabel?: string;
     scrollSpy?: string;
     offset?: number;
@@ -28,6 +29,7 @@ interface IState {
 export declare class LeftMenu extends React.PureComponent<IMenu, IState> {
     constructor(props: IMenu);
     handleClick(item: IMenuItem, event?: React.MouseEvent): void;
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/LeftMenu.js

@@ -55,7 +55,7 @@ var LeftMenu = /** @class */ (function (_super) {
     function LeftMenu(props) {
         var _this = _super.call(this, props) || this;
         _this.state = {
-            active: "",
+            active: _this.props.activeItemId ? _this.props.activeItemId : '',
         };
         return _this;
     }
@@ -74,6 +74,13 @@ var LeftMenu = /** @class */ (function (_super) {
         }
         this.props.onSelect(item.id, item.route ? item.route : "");
     };
+    LeftMenu.prototype.componentDidMount = function () {
+        var _a;
+        if (this.props.scrollTo) {
+            return (_a = document
+                .getElementById(this.props.scrollTo)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    };
     LeftMenu.prototype.render = function () {
         var _a;
         var _this = this;