superdesk-ui-framework 3.0.0-rc12 → 3.0.0

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

@@ -7,6 +7,9 @@ import { TableList } from '../../../../app-typescript/components/Lists/TableList
 
 interface IProps {
     children?: React.ReactNode;
+    rightPanel?: boolean;
+    openPanel(): any;
+    closePanel(): void;
 }
 
 interface IState {
@@ -41,7 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             value2: false,
             value3: false,
             leftPanelOpen: false,
-            rightPanelOpen: false,
+            rightPanelOpen: this.props.rightPanel ? this.props.rightPanel : false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
             inputValue: 'string',
@@ -57,7 +60,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -70,7 +73,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                         <IconLabel style='translucent' innerLabel='Duration:' text='00:11' type='warning' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -83,7 +86,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -96,7 +99,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:15' type='alert' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -109,7 +112,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
             ]
         }
@@ -330,7 +333,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>
 
-                <Layout.RightPanel open={this.state.rightPanelOpen}>
+                <Layout.RightPanel open={this.props.rightPanel}>
                     <Layout.Panel size='x-large' side='right'>
                         <Layout.PanelContent>
                             <Layout.AuthoringFrame
@@ -344,10 +347,10 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             <SubNav className='sd-shadow--z0'>
                                                 <SlidingToolbar>
                                                     <ButtonGroup align='start'>
-                                                        <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})} />
+                                                        <IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
                                                     </ButtonGroup>
                                                     <ButtonGroup align='end'>
-                                                        <Button text="Save Changes" style='hollow' onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})} type="primary" />
+                                                        <Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
                                                     </ButtonGroup>
                                                 </SlidingToolbar>
                                             </SubNav>

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

@@ -132,10 +132,6 @@ export class Rundowns extends React.Component<IProps, IState> {
         })
     }
 
-    componentDidUpdate() {
-        console.log(this.state);
-    }
-
     changeStatus(item: any, status: string) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -163,13 +159,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                 <Nav.SideBarMenu
                     items={[
                         { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big' },
+                        { icon: 'view', size: 'big', editor: this.state.openEditor },
                         { icon: 'marked-star', size: 'big' },
                         { icon: 'spike', size: 'big' },
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
                         { icon: 'picture', size: 'big' },
-                        { icon: 'rundown', size: 'big', active: true }]} />
+                        { icon: 'rundown', size: 'big', }]} />
 
                 <Layout.LayoutContainer>
                     <Layout.HeaderPanel>
@@ -540,12 +536,15 @@ export class Rundowns extends React.Component<IProps, IState> {
                     <Layout.OverlayPanel />
                     {/* OVERLAY PANEL (Send To) */}
                 </Layout.LayoutContainer>
+
                 <Layout.ContentSplitter visible={this.state.openEditor} />
+
                 {/* RUNDOWN EDITOR */}
                 <Layout.AuthoringContainer open={this.state.openEditor}>
                     <RundownEditor />
                 </Layout.AuthoringContainer>
                 {/* END RUNDOWN EDITOR */}
+                
             </Layout.Layout >
 
             {/* Manage Templates Modal */}
@@ -802,6 +801,7 @@ export class Rundowns extends React.Component<IProps, IState> {
 
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
+            maximizable
                 visible={this.state.modalManageShow}
                 zIndex={1000}
                 contentBg='medium'

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

@@ -64,7 +64,35 @@ export class TestGround extends React.Component<IProps, IState> {
                 <Components.LayoutContainer>
                     <Components.MainPanel>
 
-                        
+                        <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
+                        <hr />
+                        <div className='sd-pagination'>
+                            <button className='sd-pagination__item sd-pagination__item--start' disabled>
+                                <Icon name='backward-thin' />
+                            </button>
+                            <button className='sd-pagination__item sd-pagination__item--back' disabled>
+                                <Icon name='chevron-left-thin' />
+                            </button>
+
+                            <button className='sd-pagination__item'>1</button>
+                            <button className='sd-pagination__item sd-pagination__item--active'>2</button>
+                            <button className='sd-pagination__item'>3</button>
+                            <button className='sd-pagination__item'>4</button>
+
+                            <span className='sd-pagination__item sd-pagination__item--more'>...</span>
+
+                            <button className='sd-pagination__item'>12</button>
+
+                            <button className='sd-pagination__item sd-pagination__item--forward'>
+                                <Icon name='chevron-right-thin' />
+                            </button>
+                            <button className='sd-pagination__item sd-pagination__item--end'>
+                                <Icon name='forward-thin' />
+                            </button>
+
+                        </div>
+                        <hr />
+
                         <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
                         <hr />
                         <div className="input-wrap">

package/examples/pages/react/DatePicker.tsx

@@ -30,6 +30,13 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
 }
 
 export default class DatePickerDoc extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            today: new Date(),
+        };
+    }
     render() {
         return (
             <section className="docs-page__container">
@@ -120,14 +127,55 @@ export default class DatePickerDoc extends React.Component {
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                        <DatePicker
+                            value={this.state.today}
+                            dateFormat="YYYY-MM-DD"
+                            onChange={(today) => {
+                                this.setState({today});
+                            }}
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
+                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                        />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DatePicker
+                            value={this.state.date}
+                            dateFormat="YYYY-MM-DD"
+                            onChange={(date) => {
+                                this.setState({date});
+                            }}
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
+                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                     <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
-                    <Prop name='shortcuts' isRequired={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
                     <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
+                    <Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}]' />
+                    <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>
 
                 <h3 className='docs-page__h3'>Events</h3>

package/examples/pages/react/Modal.tsx

@@ -9,6 +9,11 @@ interface IState {
     modalLarge: boolean;
     modalXLarge: boolean;
     modalFull: boolean;
+    maximizableModal: boolean;
+    top: boolean;
+    bottom: boolean;
+    left: boolean;
+    right: boolean;
 }
 
 export default class ModalDoc extends React.Component<{}, IState> {
@@ -21,7 +26,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
             modalMedium: false,
             modalLarge: false,
             modalXLarge: false,
-            modalFull: false
+            modalFull: false,
+            maximizableModal: false,
+            top: false,
+            bottom: false,
+            left: false,
+            right: false,
         }
     }
 
@@ -69,21 +79,23 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         </ButtonGroup>
 
                         <Modal headerTemplate="Basic modal"
-                               visible={this.state.modalBasic}
-                               onHide={() => {this.setState({modalBasic: false})}}>
+                            zIndex={10000}
+                            maximizable
+                            visible={this.state.modalBasic}
+                            onHide={() => {this.setState({modalBasic: false})}}>
                             <p>This modal has no fixed size. It will adapt its size based on the content inside.</p>
                         </Modal>
 
                         <Modal headerTemplate="Small modal header"
-                               visible={this.state.modalSmall}
-                               size='small' onHide={() => {this.setState({modalSmall: false})}}>
+                            visible={this.state.modalSmall}
+                            size='small' onHide={() => {this.setState({modalSmall: false})}}>
                             <p>Small modal content. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
                             ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
                         </Modal>
                         
                         <Modal headerTemplate="Medium modal header"
-                               visible={this.state.modalMedium}
-                               size='medium' onHide={() => {this.setState({modalMedium: false})}}>
+                            visible={this.state.modalMedium}
+                            size='medium' onHide={() => {this.setState({modalMedium: false})}}>
                             <p>Medium modal content. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
                             Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non
                             commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis
@@ -91,9 +103,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         </Modal>
                         
                         <Modal headerTemplate="Large modal header"
-                               visible={this.state.modalLarge}
-                               footerTemplate={modalLargeFooter}
-                               size='large' onHide={() => {this.setState({modalLarge: false})}}>
+                            visible={this.state.modalLarge}
+                            footerTemplate={modalLargeFooter}
+                            size='large' onHide={() => {this.setState({modalLarge: false})}}>
                             <p>Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                             Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
                             purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit
@@ -104,9 +116,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         </Modal>
 
                         <Modal headerTemplate="Extra large modal"
-                               visible={this.state.modalXLarge}
-                               footerTemplate={modalXLargeFooter}
-                               size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
+                            visible={this.state.modalXLarge}
+                            footerTemplate={modalXLargeFooter}
+                            size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
                             <p className="sd-margin-b--3">Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
                             ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
                             Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
@@ -183,12 +195,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Markup.ReactMarkupPreview>
                         <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
                         <Modal headerTemplate="Another modal header"
-                               footerTemplate={modalFullFooter}
-                               visible={this.state.modalFull} 
-                               theme='dark'
-                               maximized={true}
-                               className='testClass'
-                               onHide={() => {this.setState({modalFull: false})}}>
+                            footerTemplate={modalFullFooter}
+                            visible={this.state.modalFull} 
+                            theme='dark'
+                            maximized={true}
+                            className='testClass'
+                            onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
                             Vestibulum id ligula porta felis euismod semper.</p>
@@ -222,18 +234,138 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Maximizable modal</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                    <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
+                        <Modal headerTemplate="Maximizable modal"
+                            zIndex={1000}
+                            maximizable
+                            visible={this.state.maximizableModal}
+                            size="small"
+                            onHide={() => {this.setState({maximizableModal: false})}}>
+                            <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
+                            nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            Vestibulum id ligula porta felis euismod semper.</p>
+
+                            <p className="sd-margin-b--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
+                            eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</p>
+
+                            <p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
+                            ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
+                        </Modal>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
+                        <Modal
+                            headerTemplate="Maximizable modal"
+                            zIndex={1000}
+                            maximizable
+                            visible={this.state.maximizableModal}
+                            size="small"
+                            onHide={() => {this.setState({maximizableModal: false})}}>
+                            {children}
+                        </Modal>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Optional positioning of modal</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <ButtonGroup align="end">
+                            <Button text="top" onClick={() => this.setState({top: true})} />
+                            <Button text="bottom" onClick={() => this.setState({bottom: true})} />
+                            <Button text="left" onClick={() => this.setState({left: true})} />
+                            <Button text="right" onClick={() => this.setState({right: true})} />
+                        </ButtonGroup>
+
+                        <Modal headerTemplate="Modal with position top"
+                            position="top"
+                            zIndex={10000}
+                            visible={this.state.top}
+                            onHide={() => {this.setState({top: false})}}>
+                            <p>This modal has position top.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position bottom"
+                            position="bottom"
+                            zIndex={10000}
+                            visible={this.state.bottom}
+                            onHide={() => {this.setState({bottom: false})}}>
+                            <p>This modal has position bottom.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position left"
+                            position="left"
+                            zIndex={10000}
+                            visible={this.state.left}
+                            onHide={() => {this.setState({left: false})}}>
+                            <p>This modal has position left.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position right"
+                            position="right"
+                            zIndex={10000}
+                            visible={this.state.right}
+                            onHide={() => {this.setState({right: false})}}>
+                            <p>This modal has position right.</p>
+                        </Modal>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Modal headerTemplate="Modal with position top"
+                            position="top"
+                            zIndex={10000}
+                            visible={this.state.top}
+                            onHide={() => {this.setState({top: false})}}>
+                            <p>This modal has position top.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position bottom"
+                            position="bottom"
+                            zIndex={10000}
+                            visible={this.state.bottom}
+                            onHide={() => {this.setState({bottom: false})}}>
+                            <p>This modal has position bottom.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position left"
+                            position="left"
+                            zIndex={10000}
+                            visible={this.state.left}
+                            onHide={() => {this.setState({left: false})}}>
+                            <p>This modal has position left.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Modal with position right"
+                            position="right"
+                            zIndex={10000}
+                            visible={this.state.right}
+                            onHide={() => {this.setState({right: false})}}>
+                            <p>This modal has position right.</p>
+                        </Modal>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
                     <Prop name='id' isRequired={false} type='string' default='null' description='Unique identifier of the element' />
-                    <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                    <Prop name='className' isRequired={false} type='string' default='null' description='To add class to the content of component' />
                     <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
                     <Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
+                    <Prop name='position' isRequired={false} type="center | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right" default='center' description='Position of the dialog.' />
                     <Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
+                    <Prop name='zIndex' isRequired={true} type='number' default='false' description='zIndex of modal' />
+                    <Prop name='contentPadding' isRequired={true} type="'none' | 'small' | 'medium' | 'large'" default='false' description='Padding of content' />
+                    <Prop name='contentBg' isRequired={true} type="'default' | 'medium' | 'dark'" default='false' description='Background of content' />
                     <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
-                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately.' />
+                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately' />
                     <Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
-                    <Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen mofal id set to true.' />
+                    <Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen modal id set to true.' />
+                    <Prop name='maximizable' isRequired={false} type='boolean' default='null' description='By clicking on button set full-screen modal and return on defoult size.' />
                     <Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
                     <Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
                 </PropsList>

package/package.json

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

package/react/components/DatePicker.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
 export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 interface IDatePickerBase {
-    disabled?: boolean;
     dateFormat: string;
-    shortcuts?: Array<{
+    headerButtonBar?: Array<{
         days: number;
         label: string;
     }>;
     locale?: DatePickerLocaleSettings;
+    disabled?: boolean;
     inlineLabel?: boolean;
     required?: boolean;
     fullWidth?: boolean;

package/react/components/DatePicker.js

@@ -139,9 +139,9 @@ var DatePicker = /** @class */ (function (_super) {
                         // updating internal state so a user can continue typing and enter a valid value
                         _this.setState({ value: event.value, valid: false });
                     }
-                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.shortcuts == null ? null : (React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10 } }, _this.props.shortcuts.map(function (_a, i) {
+                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
                     var label = _a.label, days = _a.days;
-                    return (React.createElement("button", { key: i, className: "btn btn--hollow btn--small", onClick: function () {
+                    return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
                             _this.props.onChange((0, addDays_1.default)(new Date(), days));
                             if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
                                 _this.instance.hideOverlay();
@@ -176,7 +176,7 @@ var DatePickerISO = /** @class */ (function (_super) {
                 else {
                     _this.props.onChange((0, format_1.default)(value, 'yyyy-MM-dd'));
                 }
-            }, disabled: this.props.disabled, shortcuts: this.props.shortcuts, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
+            }, disabled: this.props.disabled, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
     };
     return DatePickerISO;
 }(React.PureComponent));

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

@@ -13,6 +13,7 @@ interface IProps {
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
     editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 export declare class CoreLayout extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/CoreLayout.js

@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
         return (React.createElement(_1.CoreLayoutContainer, null,
             this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
             this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
-            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
+            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth, openPanel: this.props.openPanel }, this.props.children),
             this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
             this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
     };

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

@@ -3,6 +3,7 @@ interface IProps {
     children?: React.ReactNode;
     id?: string;
     editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 export declare class CoreLayoutMain extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/CoreLayoutMain.js

@@ -49,7 +49,7 @@ var CoreLayoutMain = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
             'sd-content-wrapper--editor-full': this.props.editorFullWidth,
         });
-        return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
+        return (React.createElement("section", { id: this.props.id, className: classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '') }, this.props.children));
     };
     return CoreLayoutMain;
 }(React.PureComponent));

package/react/components/Lists/ContentList.js

@@ -47,9 +47,10 @@ var ContentListItem = /** @class */ (function (_super) {
         _this.delay = 200;
         _this.prevent = false;
         _this.onSingleClick = function () {
+            var selection = window.getSelection();
             _this.timer = setTimeout(function () {
-                if (!_this.prevent) {
-                    if (_this.props.onClick) {
+                if (!_this.prevent && _this.props.onClick && selection) {
+                    if (selection.toString().length < 1) {
                         _this.props.onClick();
                     }
                 }