superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.12

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 = 529);
+/******/ 	return __webpack_require__(__webpack_require__.s = 528);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 529:
+/***/ 528:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,11 +28256,11 @@ __webpack_require__(33);
 
 __webpack_require__(41);
 
-__webpack_require__(530);
+__webpack_require__(529);
 
-__webpack_require__(532);
+__webpack_require__(531);
 
-__webpack_require__(534);
+__webpack_require__(533);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 530:
+/***/ 529:
 /***/ (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__(41), __webpack_require__(531) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(530) ], __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;
 
 /***/ }),
 
-/***/ 531:
+/***/ 530:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 532:
+/***/ 531:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(533);
+__webpack_require__(532);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 533:
+/***/ 532:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 534:
+/***/ 533:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(535);
+__webpack_require__(534);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 535:
+/***/ 534:
 /***/ (function(module, exports) {
 
 /**

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

@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
             active={this.state.mainMenuOpen}
             ariaControls='main-menu'
             menuId='main-menu'
+            editorFullWidth={true}
             slideInMenu={(
                 <Layout.MainMenu
                 headerTitle='Main Menu'

package/examples/pages/react/TableList.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
+import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
 import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
 
 interface IState {
@@ -23,10 +23,14 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     </>,
                     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} />,
-                    onClick: () => {
-                        return false;
-                    }
+                    action: <Dropdown append={true} items={[
+                        { 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 },
+                    ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
+                    onClick: () => console.log('single'),
+                    onDoubleClick: () => console.log('double'),
+                    hexColor: '#ccff00'
                 },
                 {
                     start: <>
@@ -75,111 +79,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Basic:</p>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-
-                        <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} />
-                                } />
-                            <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' />
-                                } />
-                            <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} />
-                                } />
-                        </TableList>
-
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <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} />
-                            } />
-                            <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' />
-                            } />
-                            <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} />
-                            } />
-                        </TableList>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
                 <p className="docs-page__paragraph">With drag and drop functionality:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
@@ -187,13 +86,13 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                         <TableList
                             dragAndDrop
                             addItem
+                            onAddItem={(index, item) => console.log(index, item)}
                             array={this.state.array}
                             itemsDropdown={[
-                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                { 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)}
                         />
 
@@ -223,24 +122,21 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <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='showDragHandle' isRequired={false} type='string' default='always' description='' />
                     <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' />
+                    <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index 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.' />
-                </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='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
                 </PropsList>
+                
 
             </section>
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.11",
+  "version": "3.0.1-beta.12",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Dropdown.d.ts

@@ -24,6 +24,7 @@ interface IMenu {
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -25,7 +25,7 @@ var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -181,7 +181,7 @@ var Dropdown = function (_a) {
             return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
         }
         else {
-            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
+            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
     return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -223,9 +223,14 @@ var Dropdown = function (_a) {
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
+    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
     return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
+        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+                onSelect();
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };

package/react/components/DurationInput.js

@@ -330,6 +330,14 @@ function getDurationString(seconds) {
     var hour = zeroPad(Math.floor(seconds / 3600));
     var minute = zeroPad(Math.floor((seconds % 3600) / 60));
     var second = zeroPad(Math.floor(seconds % 60));
-    return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    if (Number(hour) === 0 && Number(minute) > 0) {
+        return "".concat(minute, "m ").concat(second, "s");
+    }
+    else if (Number(hour) === 0 && Number(minute) === 0) {
+        return "".concat(second, "s");
+    }
+    else {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
 }
 exports.getDurationString = getDurationString;

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

@@ -12,6 +12,7 @@ interface IProps {
     menuId?: string;
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
+    editorFullWidth?: 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, null, this.props.children),
+            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, 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

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

package/react/components/Layouts/CoreLayoutMain.js

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

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

@@ -2,13 +2,15 @@ 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;
+    readOnly?: boolean;
+    showDragHandle?: 'always' | 'onHover' | 'none';
     onDrag?(start: number, end: number): void;
+    onAddItem?(index: number, item?: IPropsArrayItem): void;
 }
 export interface IPropsArrayItem {
     start?: React.ReactNode;
@@ -16,15 +18,19 @@ export interface IPropsArrayItem {
     end?: React.ReactNode;
     action?: React.ReactNode;
     onClick?(): void;
+    onDoubleClick?(): void;
+    hexColor?: string;
 }
-declare class TableList extends React.PureComponent<IProps, {
+interface IState {
     items: Array<IPropsArrayItem>;
-}> {
-    constructor(props: Readonly<IProps>);
+}
+declare class TableList extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    componentDidUpdate(prevProps: IProps): void;
     onDragEnd(result: DropResult): void | null;
-    render(): false | "" | 0 | JSX.Element | null | undefined;
+    dropDown(): JSX.Element;
+    render(): JSX.Element | null;
 }
 export interface IPropsItem {
     start?: React.ReactNode;
@@ -35,8 +41,18 @@ export interface IPropsItem {
     itemsDropdown?: any;
     dragAndDrop?: boolean;
     onClick?(): void;
+    onDoubleClick?(): void;
+    onSelect?(): void;
+    onAddItem?(e: number): void;
+    hexColor?: string;
+    showDragHandle?: 'always' | 'onHover' | 'none';
 }
 declare class TableListItem extends React.PureComponent<IPropsItem> {
+    private timer;
+    private delay;
+    private prevent;
+    onSingleClick: () => void;
+    onDoubleClick: () => void;
     render(): JSX.Element;
 }
 export { TableList, TableListItem };

package/react/components/Lists/TableList.js

@@ -69,16 +69,21 @@ var TableList = /** @class */ (function (_super) {
             items: [],
         };
         _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.dropDown = _this.dropDown.bind(_this);
         return _this;
     }
     TableList.prototype.componentDidMount = function () {
-        this.setState({ items: this.props.array });
+        if (this.props.array) {
+            this.setState({ items: this.props.array });
+        }
     };
     TableList.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.array !== this.props.array) {
-            this.setState({
-                items: this.props.array,
-            });
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     };
     TableList.prototype.onDragEnd = function (result) {
@@ -92,24 +97,47 @@ var TableList = /** @class */ (function (_super) {
         return this.props.onDrag ?
             this.props.onDrag(result.source.index, result.destination.index) : null;
     };
+    TableList.prototype.dropDown = function () {
+        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+            React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
+    };
     TableList.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = (0, classnames_1.default)((_a = {
-                'table-list': !this.props.addItem
+        var classes = (0, classnames_1.default)('', (_a = {
+                'table-list': !this.props.addItem,
+                'table-list--read-only': this.props.readOnly
             },
             _a["".concat(this.props.className)] = this.props.className,
             _a));
-        return (this.props.array ?
-            this.props.dragAndDrop ?
-                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+        return (this.state.items.length > 0
+            ? this.props.dragAndDrop
+                ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
                     React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
                         _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
-                        provided.placeholder)); }))
-                : React.createElement("ul", { className: classes }, this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
-            : this.props.children &&
-                React.createElement("ul", { className: classes }, this.props.children));
+                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                                    ? item.onDoubleClick
+                                    : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                                    && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
+                        provided.placeholder,
+                        (_this.props.addItem && !_this.props.readOnly) &&
+                            React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
+                : React.createElement("ul", { className: classes },
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                            ? item.onDoubleClick
+                            : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            && _this.props.onAddItem(index, item); } })); }),
+                    (this.props.addItem && !this.props.readOnly) &&
+                        React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+            : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
+                React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                    React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+                : null);
     };
     return TableList;
 }(React.PureComponent));
@@ -117,12 +145,42 @@ exports.TableList = TableList;
 var TableListItem = /** @class */ (function (_super) {
     __extends(TableListItem, _super);
     function TableListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.delay = 200;
+        _this.prevent = false;
+        _this.onSingleClick = function () {
+            _this.timer = setTimeout(function () {
+                if (!_this.prevent) {
+                    if (_this.props.onClick) {
+                        _this.props.onClick();
+                    }
+                }
+            }, _this.delay);
+        };
+        _this.onDoubleClick = function () {
+            clearTimeout(_this.timer);
+            _this.prevent = true;
+            if (_this.props.onDoubleClick) {
+                _this.props.onDoubleClick();
+            }
+            setTimeout(function () {
+                _this.prevent = false;
+            }, _this.delay);
+        };
+        return _this;
     }
     TableListItem.prototype.render = function () {
+        var _this = this;
+        var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
         return (this.props.addItem ?
             React.createElement("li", { className: 'table-list__item-container' },
-                React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
+                React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
+                    React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                     React.createElement("div", { className: 'table-list__item-content' },
                         React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                         React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -131,9 +189,10 @@ var TableListItem = /** @class */ (function (_super) {
                 React.createElement("div", { className: 'table-list__add-bar-container' },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-bar' },
-                            React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
+                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
-            : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
+            : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
+                React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                 React.createElement("div", { className: 'table-list__item-content' },
                     React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                     React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),

package/react/components/SearchBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;