superdesk-ui-framework 3.0.1 → 3.0.4

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_7__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_8__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 536);
+/******/ 	return __webpack_require__(__webpack_require__.s = 534);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28246,29 +28246,29 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 536:
+/***/ 534:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(33);
+__webpack_require__(34);
 
 __webpack_require__(42);
 
+__webpack_require__(535);
+
 __webpack_require__(537);
 
 __webpack_require__(539);
 
-__webpack_require__(541);
-
 __webpack_require__(0);
 
-__webpack_require__(7);
+__webpack_require__(8);
 
 /***/ }),
 
-/***/ 537:
+/***/ 535:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(538) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(536) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 538:
+/***/ 536:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 539:
+/***/ 537:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(540);
+__webpack_require__(538);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 540:
+/***/ 538:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 541:
+/***/ 539:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(542);
+__webpack_require__(540);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 542:
+/***/ 540:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 7:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
 
 /***/ })
 

package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx

@@ -44,7 +44,7 @@ export class EditorTest extends React.Component<IProps, IState> {
             rightPanelOpen: false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
-            
+
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -161,7 +161,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                                     required={false}
                                     disabled={false}
                                     invalid={false}
-                                    onChange={(value) => {}} /> 
+                                    onChange={(value) => {}} />
                             </Form.FormItem>
                         </Form.FormGroup>
                         <Form.FormGroup inlineLabel={true}>
@@ -176,7 +176,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                                     required={false}
                                     disabled={false}
                                     invalid={false}
-                                    onChange={(value) => {}} /> 
+                                    onChange={(value) => {}} />
                             </Form.FormItem>
                         </Form.FormGroup>
                         <Form.FormGroup marginBottom='0' inlineLabel={true}>
@@ -191,7 +191,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                                     required={true}
                                     disabled={false}
                                     invalid={false}
-                                    onChange={(value) => {}} /> 
+                                    onChange={(value) => {}} />
                             </Form.FormItem>
                             <Form.FormItem autoWidth={true}>
                                 <Form.FormText>Just testing:</Form.FormText>
@@ -304,7 +304,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Layout.Container>
                                 </div>
-                                
+
                                 <div id='section4'>
                                 <Heading type='h1' className='sd-padding--5'>Section 4</Heading>
                                     <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
@@ -328,9 +328,9 @@ export class EditorTest extends React.Component<IProps, IState> {
                                                 <Button text="Submit" onClick={()=> false} type="primary" />
                                             </ButtonGroup>
                                         </Layout.Container>
-                                </div>  
+                                </div>
                             </div>
-                            
+
                 </Layout.AuthoringMain>
             )}
             sidePanelPinned={this.state.rightPanelOpen}
@@ -341,7 +341,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                     <Layout.PanelContent>
                         <Layout.PanelContentBlock>
                             <BoxedList density='comfortable'>
-                                <BoxedListItem 
+                                <BoxedListItem
                                     type="success"
                                     clickable={true}
                                     media={(
@@ -355,10 +355,10 @@ export class EditorTest extends React.Component<IProps, IState> {
                                         Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
                                     </BoxedListContentRow>
                                     <BoxedListContentRow>
-                                        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                                     </BoxedListContentRow>
                                 </BoxedListItem>
-                                <BoxedListItem 
+                                <BoxedListItem
                                     type="warning"
                                     media={(
                                         <AvatarWrapper
@@ -381,7 +381,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                                         Maecenas sed diam eget risus varius blandit sit amet magna.
                                     </BoxedListContentRow>
                                 </BoxedListItem>
-                                <BoxedListItem 
+                                <BoxedListItem
                                     selected={true}
                                     actions={(
                                         <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
@@ -442,13 +442,16 @@ export class EditorTest extends React.Component<IProps, IState> {
             sideBar={(
                 <Nav.SideBarTabs
                 items={[
-                    { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
+                    { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '1' },
+                    { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '2' },
+                    { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '3' },
+                    { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '4' },
+                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '5' },
+                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '6' },
+                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '7' }
+                ]}
+                active={'3'}
+                />
             )}
             overlayPanel={(
                 <div></div>

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -47,8 +47,8 @@ export class Multiedit extends React.Component<IProps, IState> {
             rightPanelPinned: false,
             sideOverlayOpen: false,
             sideBarOpen: false,
-            arr: [<Editor />, <Editor />]
-            
+            arr: [<Editor />, <Editor />],
+
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -68,7 +68,7 @@ export class Multiedit extends React.Component<IProps, IState> {
     }
 
     render() {
-        return (    
+        return (
             <Modal
             className='p-dialog-flex'
             onHide={() => false}
@@ -89,21 +89,23 @@ export class Multiedit extends React.Component<IProps, IState> {
                         <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                     </Dropdown>
                 </div>
-            </Modal> 
+            </Modal>
         );
     }
 }
 
 interface IEditor {
     sideBarOpen?: boolean;
+    activeTab: string | null;
 }
 
-export class Editor extends React.Component<IEditor, IEditor> {
+export class Editor extends React.Component<{}, IEditor> {
     constructor(props: IEditor) {
         super(props);
         this.state = {
             sideBarOpen: false,
-            
+            activeTab: '1',
+
         }
     }
 
@@ -178,7 +180,7 @@ export class Editor extends React.Component<IEditor, IEditor> {
                                 required={false}
                                 disabled={false}
                                 invalid={false}
-                                onChange={(value) => {}} /> 
+                                onChange={(value) => {}} />
                         </Form.FormItem>
                     </Form.FormGroup>
                     <Form.FormGroup inlineLabel={true}>
@@ -193,7 +195,7 @@ export class Editor extends React.Component<IEditor, IEditor> {
                                 required={false}
                                 disabled={false}
                                 invalid={false}
-                                onChange={(value) => {}} /> 
+                                onChange={(value) => {}} />
                         </Form.FormItem>
                     </Form.FormGroup>
                     <Form.FormGroup marginBottom='0' inlineLabel={true}>
@@ -208,7 +210,7 @@ export class Editor extends React.Component<IEditor, IEditor> {
                                 required={true}
                                 disabled={false}
                                 invalid={false}
-                                onChange={(value) => {}} /> 
+                                onChange={(value) => {}} />
                         </Form.FormItem>
                         <Form.FormItem autoWidth={true}>
                             <Form.FormText>Just testing:</Form.FormText>
@@ -247,7 +249,7 @@ export class Editor extends React.Component<IEditor, IEditor> {
                 <Layout.PanelContent>
                     <Layout.PanelContentBlock>
                         <BoxedList density='comfortable'>
-                            <BoxedListItem 
+                            <BoxedListItem
                                 type="success"
                                 clickable={true}
                                 media={(
@@ -261,10 +263,10 @@ export class Editor extends React.Component<IEditor, IEditor> {
                                     Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
                                 </BoxedListContentRow>
                                 <BoxedListContentRow>
-                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                                 </BoxedListContentRow>
                             </BoxedListItem>
-                            <BoxedListItem 
+                            <BoxedListItem
                                 type="warning"
                                 media={(
                                     <AvatarWrapper
@@ -287,7 +289,7 @@ export class Editor extends React.Component<IEditor, IEditor> {
                                     Maecenas sed diam eget risus varius blandit sit amet magna.
                                 </BoxedListContentRow>
                             </BoxedListItem>
-                            <BoxedListItem 
+                            <BoxedListItem
                                 selected={true}
                                 actions={(
                                     <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
@@ -302,18 +304,24 @@ export class Editor extends React.Component<IEditor, IEditor> {
                 </Layout.PanelContent>
             </Layout.Panel>
         )}
-        
+
         sideBarClosed={this.state.sideBarOpen}
         sideBar={(
             <Nav.SideBarTabs
             items={[
-                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false },
-                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false },
-                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false },
-                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false },
-                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false },
-                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false },
-                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false }]} />
+                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false, id: '1' },
+                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false, id: '2' },
+                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false, id: '3' },
+                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false, id: '4' },
+                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false, id: '5'},
+                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false, id: '6' },
+                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false, id: '7' }
+            ]}
+            activeTab={this.state.activeTab}
+            onActiveTabChange={(e) => this.setState({
+                activeTab: e,
+            })}
+            />
         )}
     />
     </div>

package/examples/pages/react/Index.tsx

@@ -33,7 +33,6 @@ import IconFontDoc from './IconFont';
 import BigIconFontDoc from './BigIconFont';
 import SubNavDoc from './SubNav';
 import DropdownDoc from './Dropdowns';
-import TagInputDoc from './TagInputs';
 import ToastsDoc from './Toasts';
 import TagDoc from './Tags';
 import EmptyStateDoc from './EmptyStates';
@@ -56,6 +55,7 @@ import TextDoc from "./Text";
 import ContainerDoc from './Container';
 import DropZoneDoc from './DropZone';
 import CreateButtonDoc from './CreateButton';
+import TagInputDocs from './TagInputDocs'
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
@@ -212,7 +212,7 @@ const pages = {
                 name: 'Autocomplete',
             },
             'tag-input': {
-                name: 'Tag Inputs',
+                name: 'Tag Input',
             },
             'select': {
                 name: 'Select',
@@ -357,7 +357,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/sub-navigation" component={SubNavDoc} />
                         <Route path="/react/dropdowns" component={DropdownDoc} />
                         <Route path="/react/toast" component={ToastsDoc} />
-                        <Route path="/react/tag-input" component={TagInputDoc} />
+                        <Route path="/react/tag-input" component={TagInputDocs} />
                         <Route path="/react/empty-states" component={EmptyStateDoc} />
                         <Route path="/react/grid-list" component={GridListDoc} />
                         <Route path="/react/grid-item" component={GridItemDoc} />

package/examples/pages/react/MultiSelect.tsx

@@ -64,9 +64,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                 <MultiSelect
                                     value={this.state.value}
                                     options={ItemArr}
-                                    onChange={(e: any) => this.setState({value: e.value})}
+                                    onChange={(e: any) => this.setState({value: e})}
                                     filter
                                     showSelectAll
+                                    zIndex={2000}
                                     placeholder='Select a color'
                                     optionLabel='name'
                                     required
@@ -105,7 +106,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                 <MultiSelect
                                     value={this.state.value2}
                                     options={ItemArr}
-                                    onChange={(e: any) => this.setState({value2: e.value})}
+                                    onChange={(e: any) => this.setState({value2: e})}
                                     filter
                                     showSelectAll
                                     optionLabel='name'
@@ -198,4 +199,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
             </section>
         )
     }
-}
+}

package/examples/pages/react/TagInputDocs.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {Prop, PropsList} from '../../../app-typescript';
+import {TagInput} from '../../../app-typescript/components/TagInput';
+import * as Markup from '../../js/react';
+
+export default class TagInputDocs extends React.Component<{}, {value: Array<string>}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: ['Item'],
+        }
+    }
+
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Tag Input</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <TagInput
+                        onChange={(value) => {
+                            this.setState({
+                                value: value,
+                            });
+                        }}
+                        value={this.state.value}
+                        placeholder="Type Here"
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TagInput
+                                required
+                                info={'Info Message'}
+                                error={'Error Message'}
+                                label={'Tag-input Label'}
+                                onChange={(value) => {
+                                    this.setState({
+                                        value: value,
+                                    });
+                                }}
+                                value={this.state.value}
+                                placeholder="Type Here"
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TagInput
+                            required
+                            info={'Info Message'}
+                            error={'Error Message'}
+                            label={'TreeSelect Label'}
+                            onChange={(value) => {
+                                this.setState({
+                                    value: value,
+                                });
+                            }}
+                            value={this.state.value}
+                            placeholder="Type Here"
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Input placeholder.'/>
+                    <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.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1",
+  "version": "3.0.4",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
-    "@superdesk/primereact": "^5.0.2-6",
+    "@superdesk/primereact": "^5.0.2-8",
     "@types/node": "^14.10.2",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
+    noPadding?: boolean;
 }
 export declare class AuthoringInnerBody extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/AuthoringInnerBody.js

@@ -33,16 +33,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringInnerBody = void 0;
 var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var AuthoringInnerBody = /** @class */ (function (_super) {
     __extends(AuthoringInnerBody, _super);
     function AuthoringInnerBody() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringInnerBody.prototype.render = function () {
-        return (React.createElement("article", { className: "sd-editor-content__authoring-body" }, 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 === false }) }, this.props.children));
     };
     return AuthoringInnerBody;
 }(React.PureComponent));

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

@@ -7,6 +7,7 @@ interface IProps {
     headerCollapsed?: boolean;
     headerPadding?: 'small' | 'medium' | 'large';
     toolbarCustom?: boolean;
+    noPaddingForContent?: boolean;
 }
 export declare class AuthoringMain extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/AuthoringMain.js

@@ -48,7 +48,7 @@ var AuthoringMain = /** @class */ (function (_super) {
             React.createElement(_1.AuthoringMainContent, null,
                 this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
-                React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
+                React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };
     return AuthoringMain;
 }(React.PureComponent));

package/react/components/MultiSelect.d.ts

@@ -13,9 +13,10 @@ interface IProps<T> {
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
+    zIndex?: number;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
-    onChange(newValue: T): void;
+    onChange(newValue: Array<T>): void;
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;

package/react/components/MultiSelect.js

@@ -63,7 +63,10 @@ var MultiSelect = /** @class */ (function (_super) {
             'showFilter': this.props.filter,
         });
         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(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (e) { return _this.props.onChange(e); }, display: "chip", filter: this.props.filter, filterBy: this.props.optionLabel, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: this.props.optionLabel, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
+            React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
+                    var value = _a.value;
+                    return _this.props.onChange(value);
+                }, display: "chip", zIndex: this.props.zIndex, filter: this.props.filter, filterBy: this.props.optionLabel, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: this.props.optionLabel, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
     };
     return MultiSelect;
 }(React.Component));