superdesk-ui-framework 4.0.47 → 4.0.49

package/dist/components/CreateButton.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop } from '../../../app-typescript';
+import {SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop} from '../../../app-typescript';
 
 export default class CreateButtonDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Navigation button</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Navigation button</h2>
                 <p></p>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <NavButton type='default' icon='home' onClick={()=> false} />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -18,22 +19,29 @@ export default class CreateButtonDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav>
-                            <ButtonGroup align='start' spaces='no-space'>
-                                <Tooltip text='Filters' flow='right'>
-                                    <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
+                            <ButtonGroup align="start" spaces="no-space">
+                                <Tooltip text="Filters" flow="right">
+                                    <NavButton
+                                        icon="filter-large"
+                                        type="darker"
+                                        state="active"
+                                        text="Filter"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
-                                <NavButton icon='search' text="Search" onClick={() => false} />
+                                <NavButton icon="search" text="Search" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
-                                <Tooltip text='More actions' flow='down'>
-                                    <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
+                            <ButtonGroup align="end" spaces="no-space">
+                                <NavButton icon="list-plus" text="Add to list" onClick={() => false} />
+                                <Tooltip text="More actions" flow="down">
+                                    <NavButton icon="dots-vertical" text="More actions" onClick={() => false} />
                                 </Tooltip>
-                                <CreateButton ariaValue='Create' onClick={() => false} />
+                                <CreateButton ariaValue="Create" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
@@ -57,13 +65,55 @@ export default class CreateButtonDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
-                    <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
-                    <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
-                    <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
-                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
-                    <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
+                    <Prop
+                        name="icon"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Icon class name without the icon- part."
+                    />
+                    <Prop
+                        name="text"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Defines the value for aria-label, for screen-readers accessibility."
+                    />
+                    <Prop
+                        name="iconSize"
+                        isRequired={false}
+                        type="small | big"
+                        default="small"
+                        description="Specifies a small or big button"
+                    />
+                    <Prop
+                        name="type"
+                        isRequired={false}
+                        type="default | primary | success | warning | alert | highlight | sd-green"
+                        default="default"
+                        description="Default + semantic colour variations (e.g. primary, success etc.)."
+                    />
+                    <Prop
+                        name="state"
+                        isRequired={false}
+                        type="normal | active"
+                        default="normal"
+                        description="Defines the optional state of the button (e.g. active)"
+                    />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light | dark"
+                        default="light"
+                        description="Styles nav button for diffrent background."
+                    />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="button | submit | reset"
+                        default="button"
+                        description="Specifies a value of nav button"
+                    />
                 </PropsList>
             </section>
         );

package/dist/components/DatePicker.tsx

@@ -19,8 +19,8 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
                 onChange={(date) => {
                     this.setState({date});
                 }}
-                label='This is Label'
-                info='This is info'
+                label="This is Label"
+                info="This is info"
             />
         );
     }
@@ -29,7 +29,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
 interface IState {
     today: string;
     date: Date | null;
-} 
+}
 
 export default class DatePickerDoc extends React.Component<{}, IState> {
     constructor(props) {
@@ -56,20 +56,20 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                 `}</Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <DatePickerExample />
                         </div>
 
                         <p className="docs-page__paragraph">// DatePickerISO</p>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <DatePickerISO
                                 value={'2019-01-01'}
                                 dateFormat="YYYY-MM-DD"
                                 onChange={(date) => {
                                     this.setState({today: date});
                                 }}
-                                label='This is Label'
-                                info='This is info'
+                                label="This is Label"
+                                info="This is info"
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -116,16 +116,20 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                 <p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <DatePicker
                                 value={this.state.date}
                                 dateFormat="YYYY-MM-DD"
                                 onChange={(date) => {
                                     this.setState({date});
                                 }}
-                                label='This is Label'
-                                info='This is info'
-                                headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                                label="This is Label"
+                                info="This is info"
+                                headerButtonBar={[
+                                    {days: 0, label: 'today'},
+                                    {days: 1, label: 'tomorow'},
+                                    {days: 2, label: 'in 2 days'},
+                                ]}
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -143,25 +147,97 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className='docs-page__h3'>Props</h3>
+                <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='Date' default='/' description='Value of the component.' />
-                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
-                    <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='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
-                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="Date"
+                        default="/"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="dateFormat"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description='Date format to use, i.e. "MM/DD/YYYY".'
+                    />
+                    <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="onChange"
+                        isRequired={true}
+                        type="Function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
+                    <Prop
+                        name="inlineLabel"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Position labels as inline."
+                    />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
+                    <Prop
+                        name="info"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Info message of component."
+                    />
+                    <Prop
+                        name="error"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Error message of component."
+                    />
+                    <Prop
+                        name="required"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as required."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as disabled."
+                    />
                 </PropsList>
 
-                <h3 className='docs-page__h3'>Events</h3>
+                <h3 className="docs-page__h3">Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="function"
+                        default="/"
+                        description="Returns value of date input"
+                    />
                 </PropsList>
             </section>
         );

package/dist/components/DateTimePicker.tsx

@@ -7,7 +7,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
         super(props);
 
         this.state = {
-            dateTime: new Date(),
+            dateTime: null,
         };
     }
 
@@ -17,6 +17,8 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
                 label="Planning date"
                 labelHidden
                 inlineLabel
+                fullWidth
+                valueType="date"
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
                 fullWidth
@@ -64,7 +66,7 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                 `}</Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <DateTimePickerExample />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -83,19 +85,55 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className='docs-page__h3'>Props</h3>
+                <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='Date' default='null' description='Value of the component.' />
-                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
-                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="Date"
+                        default="null"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="dateFormat"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description='Date format to use, i.e. "MM/DD/YYYY".'
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="Function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
+                    <Prop
+                        name="required"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as required."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as disabled."
+                    />
                 </PropsList>
 
-                <h3 className='docs-page__h3'>Events</h3>
+                <h3 className="docs-page__h3">Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="function"
+                        default="/"
+                        description="Returns value of date input"
+                    />
                 </PropsList>
             </section>
         );

package/dist/components/DragHandleDocs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DragHandle, Prop, PropsList } from '../../../app-typescript';
+import {DragHandle, Prop, PropsList} from '../../../app-typescript';
 import * as Markup from '../../js/react';
 
 export default class DragHandleDocs extends React.Component {
@@ -7,7 +7,8 @@ export default class DragHandleDocs extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Drag handle</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <DragHandle />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -19,37 +20,36 @@ export default class DragHandleDocs extends React.Component {
                         </div>
                         <p className="mt-2 docs-page__paragraph">// Some size examples</p>
                         <p className="docs-page__paragraph--small">
-                            The number of dotted rows and dots in each row can be adjusted independently,
-                            offering a wide range of size options.
+                            The number of dotted rows and dots in each row can be adjusted independently, offering a
+                            wide range of size options.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='d-flex items-start sd-gap--medium'>
-                                <DragHandle dotsInRow='2' dotRows='5' />
-                                <DragHandle dotsInRow='2' dotRows='8' />
-                                <DragHandle dotsInRow='3' dotRows='6' />
-                                <DragHandle dotsInRow='3' dotRows='8' />
-                                <DragHandle dotsInRow='3' dotRows='10' />
-                                <DragHandle dotsInRow='5' dotRows='4' />
+                            <div className="d-flex items-start sd-gap--medium">
+                                <DragHandle dotsInRow="2" dotRows="5" />
+                                <DragHandle dotsInRow="2" dotRows="8" />
+                                <DragHandle dotsInRow="3" dotRows="6" />
+                                <DragHandle dotsInRow="3" dotRows="8" />
+                                <DragHandle dotsInRow="3" dotRows="10" />
+                                <DragHandle dotsInRow="5" dotRows="4" />
                             </div>
-
                         </div>
                         <p className="docs-page__paragraph">// Blank</p>
                         <p className="docs-page__paragraph--small">
-                            This option will remove all default styles from the components container, like padding and background color.
-                            To be used within list items, draggable labels, and similar contexts.
+                            This option will remove all default styles from the components container, like padding and
+                            background color. To be used within list items, draggable labels, and similar contexts.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='d-flex items-start sd-gap--medium'>
+                            <div className="d-flex items-start sd-gap--medium">
                                 <DragHandle blank={true} />
-                                <DragHandle dotsInRow='2' dotRows='10' blank={true} />
-                                <DragHandle dotsInRow='4' dotRows='10' blank={true} />
-                                <DragHandle dotsInRow='5' dotRows='4' blank={true} />
-                                <DragHandle dotsInRow='3' dotRows='4' blank={true} />
-                                
+                                <DragHandle dotsInRow="2" dotRows="10" blank={true} />
+                                <DragHandle dotsInRow="4" dotRows="10" blank={true} />
+                                <DragHandle dotsInRow="5" dotRows="4" blank={true} />
+                                <DragHandle dotsInRow="3" dotRows="4" blank={true} />
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                     // Default
                     <DragHandle />
 
@@ -80,11 +80,41 @@ export default class DragHandleDocs extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='blank' isRequired={false} type='boolean' default='false' description='Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts.'/>
-                    <Prop name='dotRows' isRequired={false} type='4 | 5 | 6 | 7 | 8 | 10' default='4' description='Set the number of dotted rows and, as a result, the height of the drag handle.'/>
-                    <Prop name='dotsInRow' isRequired={false} type='2 | 3 | 4 | 5' default='2' description='Set the number of dots in the row. This will also affect the overall wdth of the component.'/>
-                    <Prop name='dotColor' isRequired={false} type='light | dark' default='currentColor' description='The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this.'/>
-                    <Prop name='className' isRequired={false} type='string' default='/' description='Add custom classes to modify or override the default styles of the component.'/>
+                    <Prop
+                        name="blank"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts."
+                    />
+                    <Prop
+                        name="dotRows"
+                        isRequired={false}
+                        type="4 | 5 | 6 | 7 | 8 | 10"
+                        default="4"
+                        description="Set the number of dotted rows and, as a result, the height of the drag handle."
+                    />
+                    <Prop
+                        name="dotsInRow"
+                        isRequired={false}
+                        type="2 | 3 | 4 | 5"
+                        default="2"
+                        description="Set the number of dots in the row. This will also affect the overall wdth of the component."
+                    />
+                    <Prop
+                        name="dotColor"
+                        isRequired={false}
+                        type="light | dark"
+                        default="currentColor"
+                        description="The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this."
+                    />
+                    <Prop
+                        name="className"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Add custom classes to modify or override the default styles of the component."
+                    />
                 </PropsList>
             </section>
         );