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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_table-list.scss +100 -11
  3. package/app/styles/grids/_grid-layout.scss +3 -0
  4. package/app-typescript/components/Dropdown.tsx +78 -37
  5. package/app-typescript/components/DurationInput.tsx +7 -1
  6. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  7. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  8. package/app-typescript/components/Lists/TableList.tsx +138 -25
  9. package/app-typescript/components/SearchBar.tsx +11 -3
  10. package/app-typescript/components/TimePicker.tsx +2 -13
  11. package/dist/examples.bundle.js +361 -123
  12. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  13. package/dist/react/Dropdowns.tsx +227 -47
  14. package/dist/react/TableList.tsx +15 -119
  15. package/dist/superdesk-ui.bundle.css +84 -16
  16. package/dist/superdesk-ui.bundle.js +153 -56
  17. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  18. package/examples/pages/react/Dropdowns.tsx +227 -47
  19. package/examples/pages/react/TableList.tsx +15 -119
  20. package/package.json +1 -1
  21. package/react/components/Dropdown.d.ts +2 -1
  22. package/react/components/Dropdown.js +39 -20
  23. package/react/components/DurationInput.js +9 -1
  24. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  25. package/react/components/Layouts/CoreLayout.js +1 -1
  26. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  27. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  28. package/react/components/Lists/TableList.d.ts +22 -6
  29. package/react/components/Lists/TableList.js +78 -19
  30. package/react/components/SearchBar.d.ts +1 -1
  31. package/react/components/SearchBar.js +15 -7
  32. package/react/components/TimePicker.d.ts +1 -5
  33. package/react/components/TimePicker.js +3 -7
  34. package/.vscode/settings.json +0 -5
  35. package/app-typescript/dist/components/Alert.d.ts +0 -16
  36. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  37. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  38. package/app-typescript/dist/components/Badge.d.ts +0 -13
  39. package/app-typescript/dist/components/Button.d.ts +0 -23
  40. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  41. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  42. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  43. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  44. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  45. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  46. package/app-typescript/dist/components/Divider.d.ts +0 -9
  47. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  48. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  49. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  50. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  51. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  52. package/app-typescript/dist/components/Genie.d.ts +0 -13
  53. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  54. package/app-typescript/dist/components/GridList.d.ts +0 -14
  55. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  56. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  57. package/app-typescript/dist/components/Icon.d.ts +0 -12
  58. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  59. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  60. package/app-typescript/dist/components/Input.d.ts +0 -24
  61. package/app-typescript/dist/components/Label.d.ts +0 -15
  62. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  63. package/app-typescript/dist/components/Loader.d.ts +0 -8
  64. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  65. package/app-typescript/dist/components/Popover.d.ts +0 -13
  66. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  67. package/app-typescript/dist/components/Radio.d.ts +0 -19
  68. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  69. package/app-typescript/dist/components/Select.d.ts +0 -29
  70. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  71. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  72. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  73. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  74. package/app-typescript/dist/components/Switch.d.ts +0 -12
  75. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  76. package/app-typescript/dist/components/TabList.d.ts +0 -22
  77. package/app-typescript/dist/components/Tag.d.ts +0 -9
  78. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  79. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  80. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  81. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  82. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  83. package/app-typescript/dist/index.d.ts +0 -56
  84. package/yarn-error.log +0 -111
@@ -39281,7 +39281,15 @@ function getDurationString(seconds) {
39281
39281
  var hour = zeroPad(Math.floor(seconds / 3600));
39282
39282
  var minute = zeroPad(Math.floor((seconds % 3600) / 60));
39283
39283
  var second = zeroPad(Math.floor(seconds % 60));
39284
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
39284
+ if (Number(hour) === 0 && Number(minute) > 0) {
39285
+ return "".concat(minute, "m ").concat(second, "s");
39286
+ }
39287
+ else if (Number(hour) === 0 && Number(minute) === 0) {
39288
+ return "".concat(second, "s");
39289
+ }
39290
+ else {
39291
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
39292
+ }
39285
39293
  }
39286
39294
  exports.getDurationString = getDurationString;
39287
39295
 
@@ -41087,16 +41095,21 @@ var TableList = /** @class */ (function (_super) {
41087
41095
  items: [],
41088
41096
  };
41089
41097
  _this.onDragEnd = _this.onDragEnd.bind(_this);
41098
+ _this.dropDown = _this.dropDown.bind(_this);
41090
41099
  return _this;
41091
41100
  }
41092
41101
  TableList.prototype.componentDidMount = function () {
41093
- this.setState({ items: this.props.array });
41102
+ if (this.props.array) {
41103
+ this.setState({ items: this.props.array });
41104
+ }
41094
41105
  };
41095
41106
  TableList.prototype.componentDidUpdate = function (prevProps) {
41096
- if (prevProps.array !== this.props.array) {
41097
- this.setState({
41098
- items: this.props.array,
41099
- });
41107
+ if (this.props.array) {
41108
+ if (prevProps.array !== this.props.array) {
41109
+ this.setState({
41110
+ items: this.props.array,
41111
+ });
41112
+ }
41100
41113
  }
41101
41114
  };
41102
41115
  TableList.prototype.onDragEnd = function (result) {
@@ -41110,24 +41123,47 @@ var TableList = /** @class */ (function (_super) {
41110
41123
  return this.props.onDrag ?
41111
41124
  this.props.onDrag(result.source.index, result.destination.index) : null;
41112
41125
  };
41126
+ TableList.prototype.dropDown = function () {
41127
+ return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
41128
+ React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
41129
+ };
41113
41130
  TableList.prototype.render = function () {
41114
41131
  var _a;
41115
41132
  var _this = this;
41116
- var classes = (0, classnames_1.default)((_a = {
41117
- 'table-list': !this.props.addItem
41133
+ var classes = (0, classnames_1.default)('', (_a = {
41134
+ 'table-list': !this.props.addItem,
41135
+ 'table-list--read-only': this.props.readOnly
41118
41136
  },
41119
41137
  _a["".concat(this.props.className)] = this.props.className,
41120
41138
  _a));
41121
- return (this.props.array ?
41122
- this.props.dragAndDrop ?
41123
- React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
41139
+ return (this.state.items.length > 0
41140
+ ? this.props.dragAndDrop
41141
+ ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
41124
41142
  React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
41125
41143
  _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),
41126
- 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 }))); })); }),
41127
- provided.placeholder)); }))
41128
- : 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 })); }))
41129
- : this.props.children &&
41130
- React.createElement("ul", { className: classes }, this.props.children));
41144
+ 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
41145
+ ? item.onDoubleClick
41146
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41147
+ && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
41148
+ provided.placeholder,
41149
+ (_this.props.addItem && !_this.props.readOnly) &&
41150
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41151
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41152
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
41153
+ : React.createElement("ul", { className: classes },
41154
+ 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
41155
+ ? item.onDoubleClick
41156
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41157
+ && _this.props.onAddItem(index, item); } })); }),
41158
+ (this.props.addItem && !this.props.readOnly) &&
41159
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41160
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41161
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
41162
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
41163
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
41164
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41165
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
41166
+ : null);
41131
41167
  };
41132
41168
  return TableList;
41133
41169
  }(React.PureComponent));
@@ -41135,12 +41171,42 @@ exports.TableList = TableList;
41135
41171
  var TableListItem = /** @class */ (function (_super) {
41136
41172
  __extends(TableListItem, _super);
41137
41173
  function TableListItem() {
41138
- return _super !== null && _super.apply(this, arguments) || this;
41174
+ var _this = _super !== null && _super.apply(this, arguments) || this;
41175
+ _this.delay = 200;
41176
+ _this.prevent = false;
41177
+ _this.onSingleClick = function () {
41178
+ _this.timer = setTimeout(function () {
41179
+ if (!_this.prevent) {
41180
+ if (_this.props.onClick) {
41181
+ _this.props.onClick();
41182
+ }
41183
+ }
41184
+ }, _this.delay);
41185
+ };
41186
+ _this.onDoubleClick = function () {
41187
+ clearTimeout(_this.timer);
41188
+ _this.prevent = true;
41189
+ if (_this.props.onDoubleClick) {
41190
+ _this.props.onDoubleClick();
41191
+ }
41192
+ setTimeout(function () {
41193
+ _this.prevent = false;
41194
+ }, _this.delay);
41195
+ };
41196
+ return _this;
41139
41197
  }
41140
41198
  TableListItem.prototype.render = function () {
41199
+ var _this = this;
41200
+ var classes = (0, classnames_1.default)('table-list__item', {
41201
+ 'table-list__item--clickable': this.props.onClick,
41202
+ 'table-list__item--draggable': this.props.dragAndDrop,
41203
+ 'table-list__item--drag-handles-always': !this.props.showDragHandle,
41204
+ 'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
41205
+ });
41141
41206
  return (this.props.addItem ?
41142
41207
  React.createElement("li", { className: 'table-list__item-container' },
41143
- 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') },
41208
+ React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
41209
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
41144
41210
  React.createElement("div", { className: 'table-list__item-content' },
41145
41211
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
41146
41212
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -41149,9 +41215,10 @@ var TableListItem = /** @class */ (function (_super) {
41149
41215
  React.createElement("div", { className: 'table-list__add-bar-container' },
41150
41216
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41151
41217
  React.createElement("div", { className: 'table-list__add-bar' },
41152
- React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
41218
+ React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
41153
41219
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
41154
- : 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 },
41220
+ : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
41221
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
41155
41222
  React.createElement("div", { className: 'table-list__item-content' },
41156
41223
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
41157
41224
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -57318,15 +57385,13 @@ var ReactDOM = __importStar(__webpack_require__(9));
57318
57385
  var core_1 = __webpack_require__(61);
57319
57386
  var react_id_generator_1 = __webpack_require__(8);
57320
57387
  var Dropdown = function (_a) {
57321
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
57388
+ var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
57322
57389
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
57323
57390
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
57324
57391
  var menuID = (0, react_id_generator_1.useId)()[0];
57325
57392
  var DROPDOWN_ID = "react-placeholder";
57326
57393
  var ref = React.useRef(null);
57327
- var refSubMenu = React.useRef(null);
57328
57394
  var buttonRef = React.useRef(null);
57329
- var refButtonSubMenu = React.useRef(null);
57330
57395
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
57331
57396
  return each(el, index);
57332
57397
  });
@@ -57445,20 +57510,7 @@ var Dropdown = function (_a) {
57445
57510
  item['items'].forEach(function (el, key) {
57446
57511
  submenuItems_1.push(each(el, key));
57447
57512
  });
57448
- return (React.createElement("li", { key: index },
57449
- React.createElement("div", { className: 'dropdown' },
57450
- React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
57451
- var subMenuRef = refSubMenu.current;
57452
- var subToggleRef = refButtonSubMenu.current;
57453
- if (subMenuRef && subToggleRef) {
57454
- (0, core_1.createPopper)(subToggleRef, subMenuRef, {
57455
- placement: 'right-start',
57456
- });
57457
- }
57458
- }, onClick: item['onSelect'] },
57459
- item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57460
- item['label']),
57461
- React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
57513
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
57462
57514
  }
57463
57515
  else if (item['type'] === 'group') {
57464
57516
  var groupItems_1 = [];
@@ -57474,7 +57526,7 @@ var Dropdown = function (_a) {
57474
57526
  return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
57475
57527
  }
57476
57528
  else {
57477
- return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
57529
+ return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
57478
57530
  }
57479
57531
  }
57480
57532
  return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -57516,12 +57568,46 @@ var Dropdown = function (_a) {
57516
57568
  };
57517
57569
  exports.Dropdown = Dropdown;
57518
57570
  var DropdownItem = function (_a) {
57519
- var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
57571
+ var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
57520
57572
  return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
57521
- React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
57573
+ React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
57574
+ onSelect();
57575
+ if (onChange) {
57576
+ onChange();
57577
+ }
57578
+ } },
57522
57579
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
57523
57580
  label)));
57524
57581
  };
57582
+ var DropdownItemWithSubmenu = function (_a) {
57583
+ var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
57584
+ var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
57585
+ var refButtonSubMenu = React.useRef(null);
57586
+ var refSubMenu = React.useRef(null);
57587
+ React.useEffect(function () {
57588
+ var subMenuRef = refSubMenu.current;
57589
+ var subToggleRef = refButtonSubMenu.current;
57590
+ if (open === true) {
57591
+ document.body.appendChild(subMenuRef);
57592
+ subMenuRef.style.display = 'block';
57593
+ }
57594
+ else if (open === false) {
57595
+ document.body.removeChild(subMenuRef);
57596
+ subMenuRef.style.display = 'none';
57597
+ }
57598
+ if (subMenuRef && subToggleRef) {
57599
+ (0, core_1.createPopper)(subToggleRef, subMenuRef, {
57600
+ placement: 'right-start',
57601
+ });
57602
+ }
57603
+ }, [open]);
57604
+ return (React.createElement("li", { key: index, ref: refButtonSubMenu },
57605
+ React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
57606
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
57607
+ item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57608
+ item['label']),
57609
+ React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
57610
+ };
57525
57611
 
57526
57612
 
57527
57613
  /***/ }),
@@ -62851,22 +62937,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
62851
62937
  Object.defineProperty(exports, "__esModule", { value: true });
62852
62938
  exports.TimePicker = void 0;
62853
62939
  var React = __importStar(__webpack_require__(0));
62854
- // import classNames from 'classnames';
62855
62940
  var react_id_generator_1 = __importDefault(__webpack_require__(8));
62856
62941
  var Form_1 = __webpack_require__(14);
62857
62942
  var TimePicker = /** @class */ (function (_super) {
62858
62943
  __extends(TimePicker, _super);
62859
- function TimePicker(props) {
62860
- var _this = _super.call(this, props) || this;
62944
+ function TimePicker() {
62945
+ var _this = _super !== null && _super.apply(this, arguments) || this;
62861
62946
  _this.htmlId = (0, react_id_generator_1.default)();
62862
- _this.state = {
62863
- invalid: _this.props.invalid ? _this.props.invalid : false,
62864
- };
62865
62947
  return _this;
62866
62948
  }
62867
62949
  TimePicker.prototype.render = function () {
62868
62950
  var _this = this;
62869
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
62951
+ 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 },
62870
62952
  React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
62871
62953
  _this.props.onChange(event.target.value);
62872
62954
  } })));
@@ -99957,14 +100039,22 @@ var SearchBar = /** @class */ (function (_super) {
99957
100039
  }
99958
100040
  }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
99959
100041
  this.state.inputValue &&
99960
- React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
100042
+ React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
100043
+ _this.setState({ inputValue: '' });
100044
+ setTimeout(function () {
100045
+ if (_this.props.onSubmit) {
100046
+ _this.props.onSubmit(_this.state.inputValue);
100047
+ }
100048
+ });
100049
+ } },
99961
100050
  React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
99962
- React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
99963
- if (_this.props.onSubmit) {
99964
- _this.props.onSubmit(_this.state.inputValue);
99965
- }
99966
- } },
99967
- React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
100051
+ this.state.inputValue &&
100052
+ React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
100053
+ if (_this.props.onSubmit) {
100054
+ _this.props.onSubmit(_this.state.inputValue);
100055
+ }
100056
+ } },
100057
+ React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
99968
100058
  };
99969
100059
  return SearchBar;
99970
100060
  }(React.PureComponent));
@@ -101651,7 +101741,7 @@ var CoreLayout = /** @class */ (function (_super) {
101651
101741
  return (React.createElement(_1.CoreLayoutContainer, null,
101652
101742
  this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
101653
101743
  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)),
101654
- React.createElement(_1.CoreLayoutMain, null, this.props.children),
101744
+ React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
101655
101745
  this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
101656
101746
  this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
101657
101747
  };
@@ -101817,16 +101907,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
101817
101907
  __setModuleDefault(result, mod);
101818
101908
  return result;
101819
101909
  };
101910
+ var __importDefault = (this && this.__importDefault) || function (mod) {
101911
+ return (mod && mod.__esModule) ? mod : { "default": mod };
101912
+ };
101820
101913
  Object.defineProperty(exports, "__esModule", { value: true });
101821
101914
  exports.CoreLayoutMain = void 0;
101822
101915
  var React = __importStar(__webpack_require__(0));
101916
+ var classnames_1 = __importDefault(__webpack_require__(2));
101823
101917
  var CoreLayoutMain = /** @class */ (function (_super) {
101824
101918
  __extends(CoreLayoutMain, _super);
101825
101919
  function CoreLayoutMain() {
101826
101920
  return _super !== null && _super.apply(this, arguments) || this;
101827
101921
  }
101828
101922
  CoreLayoutMain.prototype.render = function () {
101829
- return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
101923
+ var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
101924
+ 'sd-content-wrapper--editor-full': this.props.editorFullWidth,
101925
+ });
101926
+ return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
101830
101927
  };
101831
101928
  return CoreLayoutMain;
101832
101929
  }(React.PureComponent));
@@ -129194,23 +129291,95 @@ var DropdownDoc = /** @class */ (function (_super) {
129194
129291
  " to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden."),
129195
129292
  React.createElement(Markup.ReactMarkup, null,
129196
129293
  React.createElement(Markup.ReactMarkupPreview, null,
129197
- React.createElement(app_typescript_1.Dropdown, { append: true, items: [
129294
+ React.createElement(app_typescript_1.Dropdown, { header: [
129198
129295
  {
129199
- type: 'group', label: 'actions', items: [
129200
- 'divider',
129201
- { label: 'Edit', icon: 'pencil', onSelect: function () { return 1; } },
129202
- { label: 'Copy', icon: 'copy', onSelect: function () { return 1; } },
129203
- { label: 'Delete', icon: 'trash', onSelect: function () { return 1; } },
129204
- 'divider',
129205
- ]
129296
+ type: 'group',
129297
+ label: 'Create new',
129298
+ items: [
129299
+ {
129300
+ type: 'submenu',
129301
+ label: 'Rundown',
129302
+ icon: 'plus-sign',
129303
+ items: [
129304
+ {
129305
+ type: 'submenu',
129306
+ label: 'Show 1',
129307
+ icon: 'plus-sign',
129308
+ items: [],
129309
+ },
129310
+ {
129311
+ type: 'submenu',
129312
+ label: 'Show 2',
129313
+ icon: 'plus-sign',
129314
+ items: [],
129315
+ },
129316
+ ],
129317
+ },
129318
+ ],
129206
129319
  },
129320
+ ], items: [
129207
129321
  {
129208
- type: 'group', label: 'actions 2', items: [
129209
- { label: 'Download', icon: 'download', onSelect: function () { return 1; } },
129210
- { label: 'Print', icon: 'print', onSelect: function () { return 1; } },
129211
- ]
129212
- }
129213
- ] }, "Drop append to body")),
129322
+ type: 'group',
129323
+ label: 'Create new',
129324
+ items: [
129325
+ {
129326
+ type: 'submenu',
129327
+ label: 'Rundown',
129328
+ icon: 'plus-sign',
129329
+ items: [
129330
+ {
129331
+ type: 'submenu',
129332
+ label: 'Show 1',
129333
+ icon: 'plus-sign',
129334
+ items: [],
129335
+ },
129336
+ {
129337
+ type: 'submenu',
129338
+ label: 'Show 2',
129339
+ icon: 'plus-sign',
129340
+ items: [],
129341
+ },
129342
+ ],
129343
+ },
129344
+ ],
129345
+ },
129346
+ ], footer: [
129347
+ {
129348
+ type: 'group',
129349
+ items: [
129350
+ {
129351
+ icon: 'rundown',
129352
+ label: 'Create new Show',
129353
+ onSelect: function () { return false; },
129354
+ },
129355
+ ],
129356
+ },
129357
+ {
129358
+ type: 'group',
129359
+ label: 'Create new',
129360
+ items: [
129361
+ {
129362
+ type: 'submenu',
129363
+ label: 'Rundown',
129364
+ icon: 'plus-sign',
129365
+ items: [
129366
+ {
129367
+ type: 'submenu',
129368
+ label: 'Show 1',
129369
+ icon: 'plus-sign',
129370
+ items: [],
129371
+ },
129372
+ {
129373
+ type: 'submenu',
129374
+ label: 'Show 2',
129375
+ icon: 'plus-sign',
129376
+ items: [],
129377
+ },
129378
+ ],
129379
+ },
129380
+ ],
129381
+ },
129382
+ ] })),
129214
129383
  React.createElement(Markup.ReactMarkupCode, null, "\n <Dropdown\n items={[\n { label: 'Action 1', onSelect: () => 1 },\n { label: 'Action 2', onSelect: () => 1 },\n { label: 'Action 3', onSelect: () => 1 },\n { label: 'Action 4', onSelect: () => 1 },\n { label: 'Action 5', onSelect: () => 1 },\n { label: 'Action 6', onSelect: () => 1 },\n ]}>\n Drop append to body\n </Dropdown>\n ")),
129215
129384
  React.createElement("h3", { className: "docs-page__h3" }, "Multilevel dropdown"),
129216
129385
  React.createElement("p", { className: 'docs-page__paragraph' },
@@ -129266,7 +129435,11 @@ var DropdownDoc = /** @class */ (function (_super) {
129266
129435
  React.createElement(Markup.ReactMarkupPreview, null,
129267
129436
  React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
129268
129437
  React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
129269
- React.createElement(app_typescript_1.Dropdown, { align: 'right', items: [
129438
+ React.createElement(app_typescript_1.Dropdown
129439
+ //align='right'
129440
+ , {
129441
+ //align='right'
129442
+ header: [
129270
129443
  {
129271
129444
  type: 'group', label: 'actions', items: [
129272
129445
  'divider',
@@ -129284,6 +129457,33 @@ var DropdownDoc = /** @class */ (function (_super) {
129284
129457
  { label: 'Action 4', onSelect: function () { return 1; } },
129285
129458
  ]
129286
129459
  }
129460
+ ], items: [
129461
+ // {
129462
+ // type: 'group', label: 'actions', items: [
129463
+ // 'divider',
129464
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
129465
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
129466
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
129467
+ // 'divider',
129468
+ // ]
129469
+ // },
129470
+ // {
129471
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
129472
+ // { label: 'Action 1', onSelect: () => 1 },
129473
+ // { label: 'Action 2', onSelect: () => 1 },
129474
+ // { label: 'Action 3', onSelect: () => 1 },
129475
+ // { label: 'Action 4', onSelect: () => 1 },
129476
+ // ]
129477
+ // }
129478
+ ], footer: [
129479
+ {
129480
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
129481
+ { label: 'Action 1', onSelect: function () { return 1; } },
129482
+ { label: 'Action 2', onSelect: function () { return 1; } },
129483
+ { label: 'Action 3', onSelect: function () { return 1; } },
129484
+ { label: 'Action 4', onSelect: function () { return 1; } },
129485
+ ]
129486
+ }
129287
129487
  ] },
129288
129488
  React.createElement("button", { className: 'sd-navbtn' },
129289
129489
  React.createElement("i", { className: "icon-dots-vertical" }))))),
@@ -129294,37 +129494,87 @@ var DropdownDoc = /** @class */ (function (_super) {
129294
129494
  React.createElement(Markup.ReactMarkupPreview, null,
129295
129495
  React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
129296
129496
  React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
129297
- React.createElement(app_typescript_1.Dropdown, { align: 'right', header: [
129497
+ React.createElement(app_typescript_1.Dropdown, { append: true, header: [
129298
129498
  {
129299
- type: 'group', label: 'header actions', items: [
129300
- { label: 'Header action one', icon: 'download', onSelect: function () { return 1; } },
129301
- { label: 'Header action two', icon: 'trash', onSelect: function () { return 1; } },
129302
- ]
129499
+ type: 'group',
129500
+ label: 'Create new',
129501
+ items: [
129502
+ {
129503
+ type: 'submenu',
129504
+ label: 'Rundown',
129505
+ icon: 'plus-sign',
129506
+ items: [
129507
+ {
129508
+ type: 'submenu',
129509
+ label: 'Show 1',
129510
+ icon: 'plus-sign',
129511
+ items: [],
129512
+ },
129513
+ {
129514
+ type: 'submenu',
129515
+ label: 'Show 2',
129516
+ icon: 'plus-sign',
129517
+ items: [],
129518
+ },
129519
+ ],
129520
+ },
129521
+ ],
129303
129522
  },
129304
129523
  ], items: [
129305
129524
  {
129306
129525
  type: 'group', label: 'body actions', items: [
129307
- { label: 'Edit', icon: 'pencil', onSelect: function () { return 1; } },
129308
- { label: 'Copy', icon: 'copy', onSelect: function () { return 1; } },
129309
- { label: 'Action 2', icon: 'envelope', onSelect: function () { return 1; } },
129310
- { label: 'Action 3', icon: 'heart', onSelect: function () { return 1; } },
129311
- { label: 'Action 4', icon: 'print', onSelect: function () { return 1; } },
129312
- { label: 'Action 5', icon: 'plus-sign', onSelect: function () { return 1; } },
129313
- { label: 'Action 6', icon: 'minus-sign', onSelect: function () { return 1; } },
129314
- { label: 'Action 7', icon: 'refresh', onSelect: function () { return 1; } },
129315
- { label: 'Action 8', icon: 'pick', onSelect: function () { return 1; } },
129316
- { label: 'Action 9', icon: 'bell', onSelect: function () { return 1; } },
129317
- { label: 'Action 10', icon: 'kill', onSelect: function () { return 1; } },
129318
- { label: 'Action 11', icon: 'settings', onSelect: function () { return 1; } },
129319
- { label: 'Action 12', icon: 'cut', onSelect: function () { return 1; } },
129526
+ {
129527
+ type: 'group',
129528
+ label: 'Create new',
129529
+ items: [
129530
+ {
129531
+ type: 'submenu',
129532
+ label: 'Rundown',
129533
+ icon: 'plus-sign',
129534
+ items: [
129535
+ {
129536
+ type: 'submenu',
129537
+ label: 'Show 1',
129538
+ icon: 'plus-sign',
129539
+ items: [],
129540
+ },
129541
+ {
129542
+ type: 'submenu',
129543
+ label: 'Show 2',
129544
+ icon: 'plus-sign',
129545
+ items: [],
129546
+ },
129547
+ ],
129548
+ },
129549
+ ],
129550
+ },
129320
129551
  ]
129321
129552
  },
129322
129553
  ], footer: [
129323
129554
  {
129324
- type: 'group', label: 'footer actions', items: [
129325
- { label: 'Create gallery', icon: 'slideshow', onSelect: function () { return 1; } },
129326
- { label: 'Create package', icon: 'composite', onSelect: function () { return 1; } },
129327
- ]
129555
+ type: 'group',
129556
+ label: 'Create new',
129557
+ items: [
129558
+ {
129559
+ type: 'submenu',
129560
+ label: 'Rundown',
129561
+ icon: 'plus-sign',
129562
+ items: [
129563
+ {
129564
+ type: 'submenu',
129565
+ label: 'Show 1',
129566
+ icon: 'plus-sign',
129567
+ items: [],
129568
+ },
129569
+ {
129570
+ type: 'submenu',
129571
+ label: 'Show 2',
129572
+ icon: 'plus-sign',
129573
+ items: [],
129574
+ },
129575
+ ],
129576
+ },
129577
+ ],
129328
129578
  },
129329
129579
  ] },
129330
129580
  React.createElement("button", { className: 'sd-navbtn' },
@@ -131279,10 +131529,15 @@ var TableListDoc = /** @class */ (function (_super) {
131279
131529
  React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
131280
131530
  center: React.createElement("span", null, "Item 1"),
131281
131531
  end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }),
131282
- action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
131283
- onClick: function () {
131284
- return false;
131285
- }
131532
+ action: React.createElement(app_typescript_1.Dropdown, { append: true, items: [
131533
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
131534
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
131535
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
131536
+ ] },
131537
+ React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function (e) { return e.stopPropagation(); } })),
131538
+ onClick: function () { return console.log('single'); },
131539
+ onDoubleClick: function () { return console.log('double'); },
131540
+ hexColor: '#ccff00'
131286
131541
  },
131287
131542
  {
131288
131543
  start: React.createElement(React.Fragment, null,
@@ -131314,28 +131569,14 @@ var TableListDoc = /** @class */ (function (_super) {
131314
131569
  return (React.createElement("section", { className: 'docs-page__container' },
131315
131570
  React.createElement("h2", { className: 'docs-page__h2' }, "TableList"),
131316
131571
  React.createElement(Markup.ReactMarkupCodePreview, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={[\n { label: 'Action 1', onSelect: () => 1 },\n { label: 'Action 2', onSelect: () => 1 },\n { label: 'Action 3', onSelect: () => 1 },\n ]} />\n "),
131317
- React.createElement("p", { className: "docs-page__paragraph" }, "Basic:"),
131318
- React.createElement(Markup.ReactMarkup, null,
131319
- React.createElement(Markup.ReactMarkupPreview, null,
131320
- React.createElement(TableList_1.TableList, null,
131321
- React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
131322
- React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
131323
- React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }),
131324
- React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
131325
- React.createElement(app_typescript_1.Label, { style: 'hollow', text: 'aacc' }),
131326
- React.createElement(app_typescript_1.Label, { style: 'filled', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }) }),
131327
- React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
131328
- React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
131329
- React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }))),
131330
- React.createElement(Markup.ReactMarkupCode, null, "\n <TableList>\n <TableListItem\n start={\n <>\n <Label style='translucent' text='aacc' />\n <Label style='translucent' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n }\n action={\n <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n } />\n <TableListItem\n start={\n <>\n <Label style='hollow' text='aacc' />\n <Label style='filled' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n } />\n <TableListItem\n start={\n <>\n <Label style='translucent' text='aacc' />\n <Label style='translucent' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n }\n action={\n <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n } />\n </TableList>\n ")),
131331
131572
  React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
131332
131573
  React.createElement(Markup.ReactMarkup, null,
131333
131574
  React.createElement(Markup.ReactMarkupPreview, null,
131334
- React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: [
131575
+ React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, onAddItem: function (index, item) { return console.log(index, item); }, array: this.state.array, itemsDropdown: [
131335
131576
  { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
131336
131577
  { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
131337
131578
  { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
131338
- ], onClick: function () { return false; }, onDrag: function (start, end) { return console.log(start, end); } })),
131579
+ ], onDrag: function (start, end) { return console.log(start, end); } })),
131339
131580
  React.createElement(Markup.ReactMarkupCode, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={[\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },\n { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },\n { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },\n ]}\n onClick={() => false}\n />\n ")),
131340
131581
  React.createElement("h3", { className: "docs-page__h3" }, "Props"),
131341
131582
  React.createElement("p", { className: "docs-page__paragraph" }, "TableList"),
@@ -131346,21 +131587,18 @@ var TableListDoc = /** @class */ (function (_super) {
131346
131587
  React.createElement(app_typescript_1.Prop, { name: 'dragAndDrop', isRequired: false, type: 'boolean', default: 'false', description: 'Drag&Drop functionality.' }),
131347
131588
  React.createElement(app_typescript_1.Prop, { name: 'itemsDropdown', isRequired: false, type: 'React.ReactNode | any', default: 'false', description: 'Dropdown for functionality to add items to the list.' }),
131348
131589
  React.createElement(app_typescript_1.Prop, { name: 'className', isRequired: false, type: 'string', default: 'false', description: 'Add class on TableList container.' }),
131590
+ React.createElement(app_typescript_1.Prop, { name: 'showDragHandle', isRequired: false, type: 'string', default: 'always', description: '' }),
131349
131591
  React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
131350
- React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' })),
131592
+ React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' }),
131593
+ React.createElement(app_typescript_1.Prop, { name: 'onAddItem', isRequired: false, type: 'function', default: 'false', description: 'Returns index of draggable item.' })),
131351
131594
  React.createElement("p", { className: "docs-page__paragraph" }, "array:"),
131352
- React.createElement(app_typescript_1.PropsList, null,
131353
- React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131354
- React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131355
- React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131356
- React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' })),
131357
- React.createElement("p", { className: "docs-page__paragraph" }, "TableListItem"),
131358
131595
  React.createElement(app_typescript_1.PropsList, null,
131359
131596
  React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131360
131597
  React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131361
131598
  React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131362
131599
  React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' }),
131363
- React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }))));
131600
+ React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
131601
+ React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: 'false', description: 'onDoubleClick functionality.' }))));
131364
131602
  };
131365
131603
  return TableListDoc;
131366
131604
  }(React.Component));
@@ -134429,7 +134667,7 @@ var CoreLayout = /** @class */ (function (_super) {
134429
134667
  });
134430
134668
  };
134431
134669
  CoreLayout.prototype.render = function () {
134432
- return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
134670
+ return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: true, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
134433
134671
  React.createElement(index_1.LeftMenu, { style: 'blanc', reverseItemBorder: true, size: 'large', ariaLabel: 'Left navigation', activeItemId: '1', groups: [
134434
134672
  { label: 'MAIN SECTIONS', items: [
134435
134673
  { id: '1', label: 'Section 1', ref: 'section1' },
@@ -137093,7 +137331,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
137093
137331
  /* 649 */
137094
137332
  /***/ (function(module, exports) {
137095
137333
 
137096
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.11","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@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","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
137334
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.13","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@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","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
137097
137335
 
137098
137336
  /***/ }),
137099
137337
  /* 650 */