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

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 488);
+/******/ 	return __webpack_require__(__webpack_require__.s = 513);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -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__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(39), __webpack_require__(47)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(40), __webpack_require__(49)(module)))
 
 /***/ }),
 
-/***/ 39:
+/***/ 40:
 /***/ (function(module, exports) {
 
 var g;
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 40:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,7 +28217,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 47:
+/***/ 49:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -28246,21 +28246,21 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 488:
+/***/ 513:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(33);
+__webpack_require__(34);
 
-__webpack_require__(40);
+__webpack_require__(41);
 
-__webpack_require__(489);
+__webpack_require__(514);
 
-__webpack_require__(491);
+__webpack_require__(516);
 
-__webpack_require__(493);
+__webpack_require__(518);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 489:
+/***/ 514:
 /***/ (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__(40), __webpack_require__(490) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(515) ], __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;
 
 /***/ }),
 
-/***/ 490:
+/***/ 515:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,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__(40) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41) ], __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__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 491:
+/***/ 516:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(492);
+__webpack_require__(517);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 492:
+/***/ 517:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(40)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(41)))
 
 /***/ }),
 
-/***/ 493:
+/***/ 518:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(494);
+__webpack_require__(519);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 494:
+/***/ 519:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/react/MultiSelect.tsx

@@ -184,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
                     <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
                     <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
-                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
+                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
                     <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
                     <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
                     <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>

package/examples/pages/react/TableList.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.6",
+  "version": "3.0.1-beta.7",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "@types/classnames": "^2.2.9",
     "@types/lodash": "^4.14.161",
     "@types/react": "16.8.23",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "16.8.0",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-scrollspy": "^3.3.5",

package/react/components/DurationInput.d.ts

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

package/react/components/DurationInput.js

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

package/react/components/Lists/TableList.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DropResult } from "react-beautiful-dnd";
+import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+export interface IProps {
+    children?: React.ReactNode;
+    array: Array<IPropsArrayItem>;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    className?: string;
+    onDrag?(start: number, end: number): void;
+}
+export interface IPropsArrayItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    onClick?(): void;
+}
+declare class TableList extends React.PureComponent<IProps, {
+    items: Array<IPropsArrayItem>;
+}> {
+    constructor(props: Readonly<IProps>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    onDragEnd(result: DropResult): void | null;
+    render(): false | "" | 0 | JSX.Element | null | undefined;
+}
+export interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    itemsDropdown?: any;
+    dragAndDrop?: boolean;
+    onClick?(): void;
+}
+declare class TableListItem extends React.PureComponent<IPropsItem> {
+    render(): JSX.Element;
+}
+export { TableList, TableListItem };