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

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 (79) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/styles/_table-list.scss +1 -0
  3. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  4. package/app-typescript/components/Dropdown.tsx +65 -65
  5. package/app-typescript/components/DurationInput.tsx +14 -4
  6. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  7. package/app-typescript/components/Lists/TableList.tsx +11 -9
  8. package/app-typescript/dist/components/Alert.d.ts +16 -0
  9. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  10. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  11. package/app-typescript/dist/components/Badge.d.ts +13 -0
  12. package/app-typescript/dist/components/Button.d.ts +23 -0
  13. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  14. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  15. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  16. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  17. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  18. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  19. package/app-typescript/dist/components/Divider.d.ts +9 -0
  20. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  21. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  22. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  23. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  24. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  25. package/app-typescript/dist/components/Genie.d.ts +13 -0
  26. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  27. package/app-typescript/dist/components/GridList.d.ts +14 -0
  28. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  29. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  30. package/app-typescript/dist/components/Icon.d.ts +12 -0
  31. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  32. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  33. package/app-typescript/dist/components/Input.d.ts +24 -0
  34. package/app-typescript/dist/components/Label.d.ts +15 -0
  35. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  36. package/app-typescript/dist/components/Loader.d.ts +8 -0
  37. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  38. package/app-typescript/dist/components/Popover.d.ts +13 -0
  39. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  40. package/app-typescript/dist/components/Radio.d.ts +19 -0
  41. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  42. package/app-typescript/dist/components/Select.d.ts +29 -0
  43. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  44. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  45. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  46. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  47. package/app-typescript/dist/components/Switch.d.ts +12 -0
  48. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  49. package/app-typescript/dist/components/TabList.d.ts +22 -0
  50. package/app-typescript/dist/components/Tag.d.ts +9 -0
  51. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  52. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  53. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  54. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  55. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  56. package/app-typescript/dist/index.d.ts +56 -0
  57. package/dist/examples.bundle.js +538 -122
  58. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  59. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  60. package/dist/react/ContentList.tsx +2 -10
  61. package/dist/react/Dropdowns.tsx +357 -5
  62. package/dist/react/TableList.tsx +28 -30
  63. package/dist/superdesk-ui.bundle.css +8 -3
  64. package/dist/superdesk-ui.bundle.js +232 -94
  65. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  66. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  67. package/examples/pages/react/ContentList.tsx +2 -10
  68. package/examples/pages/react/Dropdowns.tsx +357 -5
  69. package/examples/pages/react/TableList.tsx +28 -30
  70. package/package.json +1 -1
  71. package/react/components/Dropdown.d.ts +4 -4
  72. package/react/components/Dropdown.js +19 -15
  73. package/react/components/DurationInput.d.ts +1 -1
  74. package/react/components/DurationInput.js +14 -4
  75. package/react/components/Lists/ContentList.d.ts +5 -0
  76. package/react/components/Lists/ContentList.js +36 -15
  77. package/react/components/Lists/TableList.d.ts +5 -5
  78. package/react/components/Lists/TableList.js +6 -4
  79. package/yarn-error.log +111 -0
@@ -39266,7 +39266,7 @@ var DurationInput = /** @class */ (function (_super) {
39266
39266
  return DurationInput;
39267
39267
  }(React.PureComponent));
39268
39268
  exports.DurationInput = DurationInput;
39269
- function getDurationString(seconds) {
39269
+ function getDurationString(seconds, zero) {
39270
39270
  function zeroPad(value) {
39271
39271
  if (value.toString().length === 1 || value === 0) {
39272
39272
  return "0".concat(value);
@@ -39278,9 +39278,19 @@ function getDurationString(seconds) {
39278
39278
  return value;
39279
39279
  }
39280
39280
  }
39281
- var hour = zeroPad(Math.floor(seconds / 3600));
39282
- var minute = zeroPad(Math.floor((seconds % 3600) / 60));
39283
- var second = zeroPad(Math.floor(seconds % 60));
39281
+ var hour;
39282
+ var minute;
39283
+ var second;
39284
+ if (zero) {
39285
+ hour = zeroPad(Math.floor(seconds / 3600));
39286
+ minute = zeroPad(Math.floor((seconds % 3600) / 60));
39287
+ second = zeroPad(Math.floor(seconds % 60));
39288
+ }
39289
+ else {
39290
+ hour = Math.floor(seconds / 3600);
39291
+ minute = Math.floor((seconds % 3600) / 60);
39292
+ second = Math.floor(seconds % 60);
39293
+ }
39284
39294
  if (Number(hour) === 0 && Number(minute) > 0) {
39285
39295
  return "".concat(minute, "m ").concat(second, "s");
39286
39296
  }
@@ -41124,7 +41134,7 @@ var TableList = /** @class */ (function (_super) {
41124
41134
  this.props.onDrag(result.source.index, result.destination.index) : null;
41125
41135
  };
41126
41136
  TableList.prototype.dropDown = function () {
41127
- return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
41137
+ return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
41128
41138
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
41129
41139
  };
41130
41140
  TableList.prototype.render = function () {
@@ -41143,7 +41153,9 @@ var TableList = /** @class */ (function (_super) {
41143
41153
  _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),
41144
41154
  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
41155
  ? item.onDoubleClick
41146
- : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41156
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
41157
+ ? _this.props.itemsDropdown(index)
41158
+ : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41147
41159
  && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
41148
41160
  provided.placeholder,
41149
41161
  (_this.props.addItem && !_this.props.readOnly) &&
@@ -41153,7 +41165,7 @@ var TableList = /** @class */ (function (_super) {
41153
41165
  : React.createElement("ul", { className: classes },
41154
41166
  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
41167
  ? item.onDoubleClick
41156
- : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41168
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
41157
41169
  && _this.props.onAddItem(index, item); } })); }),
41158
41170
  (this.props.addItem && !this.props.readOnly) &&
41159
41171
  React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
@@ -41215,7 +41227,7 @@ var TableListItem = /** @class */ (function (_super) {
41215
41227
  React.createElement("div", { className: 'table-list__add-bar-container' },
41216
41228
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41217
41229
  React.createElement("div", { className: 'table-list__add-bar' },
41218
- React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
41230
+ React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
41219
41231
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
41220
41232
  : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
41221
41233
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
@@ -57384,12 +57396,12 @@ var React = __importStar(__webpack_require__(0));
57384
57396
  var ReactDOM = __importStar(__webpack_require__(9));
57385
57397
  var core_1 = __webpack_require__(61);
57386
57398
  var react_id_generator_1 = __webpack_require__(8);
57399
+ var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
57387
57400
  var Dropdown = function (_a) {
57388
57401
  var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
57389
57402
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
57390
57403
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
57391
57404
  var menuID = (0, react_id_generator_1.useId)()[0];
57392
- var DROPDOWN_ID = "react-placeholder";
57393
57405
  var ref = React.useRef(null);
57394
57406
  var buttonRef = React.useRef(null);
57395
57407
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
@@ -57402,11 +57414,10 @@ var Dropdown = function (_a) {
57402
57414
  return each(el, index);
57403
57415
  });
57404
57416
  React.useEffect(function () {
57405
- var existingElement = document.getElementById(DROPDOWN_ID);
57417
+ var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
57406
57418
  if (!existingElement) {
57407
57419
  var el = document.createElement("div");
57408
- el.id = DROPDOWN_ID;
57409
- // style placeholder
57420
+ el.id = DROPDOWN_ID_CONTAINER;
57410
57421
  el.style.position = 'absolute';
57411
57422
  el.style.top = '0';
57412
57423
  el.style.left = '0';
@@ -57421,7 +57432,6 @@ var Dropdown = function (_a) {
57421
57432
  }
57422
57433
  setChange(true);
57423
57434
  }, [open]);
57424
- // structure for append menu
57425
57435
  function createAppendMenu() {
57426
57436
  if (header && footer) {
57427
57437
  return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -57443,7 +57453,6 @@ var Dropdown = function (_a) {
57443
57453
  return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
57444
57454
  }
57445
57455
  }
57446
- // toggle menu
57447
57456
  function toggleDisplay() {
57448
57457
  if (!open) {
57449
57458
  var menuRef_1;
@@ -57492,15 +57501,14 @@ var Dropdown = function (_a) {
57492
57501
  }
57493
57502
  }
57494
57503
  function addInPlaceholder() {
57495
- var placeholder = document.getElementById(DROPDOWN_ID);
57504
+ var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
57496
57505
  var menu = createAppendMenu();
57497
57506
  if (open) {
57498
57507
  return ReactDOM.render(menu, placeholder);
57499
57508
  }
57500
57509
  else {
57501
- var menuDOM = document.getElementById(menuID);
57502
- if (menuDOM) {
57503
- menuDOM.style.display = 'none';
57510
+ if (placeholder) {
57511
+ ReactDOM.unmountComponentAtNode(placeholder);
57504
57512
  }
57505
57513
  }
57506
57514
  }
@@ -57510,7 +57518,7 @@ var Dropdown = function (_a) {
57510
57518
  item['items'].forEach(function (el, key) {
57511
57519
  submenuItems_1.push(each(el, key));
57512
57520
  });
57513
- return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
57521
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
57514
57522
  }
57515
57523
  else if (item['type'] === 'group') {
57516
57524
  var groupItems_1 = [];
@@ -57580,19 +57588,20 @@ var DropdownItem = function (_a) {
57580
57588
  label)));
57581
57589
  };
57582
57590
  var DropdownItemWithSubmenu = function (_a) {
57583
- var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
57591
+ var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
57584
57592
  var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
57585
57593
  var refButtonSubMenu = React.useRef(null);
57586
57594
  var refSubMenu = React.useRef(null);
57595
+ var placeholder = document.getElementById(menuID);
57587
57596
  React.useEffect(function () {
57588
57597
  var subMenuRef = refSubMenu.current;
57589
57598
  var subToggleRef = refButtonSubMenu.current;
57590
57599
  if (open === true) {
57591
- document.body.appendChild(subMenuRef);
57600
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
57592
57601
  subMenuRef.style.display = 'block';
57593
57602
  }
57594
57603
  else if (open === false) {
57595
- document.body.removeChild(subMenuRef);
57604
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
57596
57605
  subMenuRef.style.display = 'none';
57597
57606
  }
57598
57607
  if (subMenuRef && subToggleRef) {
@@ -57603,7 +57612,14 @@ var DropdownItemWithSubmenu = function (_a) {
57603
57612
  }, [open]);
57604
57613
  return (React.createElement("li", { key: index, ref: refButtonSubMenu },
57605
57614
  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'] },
57615
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
57616
+ if (item.onSelect) {
57617
+ item.onSelect();
57618
+ }
57619
+ if (onChange) {
57620
+ onChange();
57621
+ }
57622
+ }, onMouseOver: function () { return setOpen(true); } },
57607
57623
  item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57608
57624
  item['label']),
57609
57625
  React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
@@ -59731,28 +59747,49 @@ var classnames_1 = __importDefault(__webpack_require__(2));
59731
59747
  var ContentListItem = /** @class */ (function (_super) {
59732
59748
  __extends(ContentListItem, _super);
59733
59749
  function ContentListItem() {
59734
- return _super !== null && _super.apply(this, arguments) || this;
59750
+ var _this = _super !== null && _super.apply(this, arguments) || this;
59751
+ _this.delay = 200;
59752
+ _this.prevent = false;
59753
+ _this.onSingleClick = function () {
59754
+ _this.timer = setTimeout(function () {
59755
+ if (!_this.prevent) {
59756
+ if (_this.props.onClick) {
59757
+ _this.props.onClick();
59758
+ }
59759
+ }
59760
+ }, _this.delay);
59761
+ };
59762
+ _this.onDoubleClick = function () {
59763
+ clearTimeout(_this.timer);
59764
+ _this.prevent = true;
59765
+ if (_this.props.onDoubleClick) {
59766
+ _this.props.onDoubleClick();
59767
+ }
59768
+ setTimeout(function () {
59769
+ _this.prevent = false;
59770
+ }, _this.delay);
59771
+ };
59772
+ return _this;
59735
59773
  }
59736
59774
  ContentListItem.prototype.render = function () {
59737
- var classes = (0, classnames_1.default)('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
59775
+ var classes = (0, classnames_1.default)('sd-list-item sd-shadow--z1', {
59738
59776
  'sd-list-item--activated': this.props.activated,
59739
59777
  'sd-list-item--selected': this.props.selected,
59740
59778
  'fetched': this.props.archived,
59741
59779
  'actioning': this.props.loading,
59742
59780
  });
59743
- return (React.createElement("div", { className: classes, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick },
59744
- React.createElement("div", { className: "sd-list-item sd-shadow--z1" },
59745
- this.props.locked
59746
- ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59747
- : React.createElement("div", { className: "sd-list-item__border" }),
59748
- this.props.itemColum.map(function (item, index) {
59749
- return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
59750
- return (item.itemRow.length <= 1
59751
- ? React.createElement(React.Fragment, { key: i }, e.content)
59752
- : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
59753
- }));
59754
- }),
59755
- React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
59781
+ return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59782
+ this.props.locked
59783
+ ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59784
+ : React.createElement("div", { className: "sd-list-item__border" }),
59785
+ this.props.itemColum.map(function (item, index) {
59786
+ return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
59787
+ return (item.itemRow.length <= 1
59788
+ ? React.createElement(React.Fragment, { key: i }, e.content)
59789
+ : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
59790
+ }));
59791
+ }),
59792
+ React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
59756
59793
  };
59757
59794
  return ContentListItem;
59758
59795
  }(React.PureComponent));
@@ -98172,7 +98209,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
98172
98209
  Object.defineProperty(exports, "__esModule", {
98173
98210
  value: true
98174
98211
  });
98175
- exports.TieredMenu = void 0;
98212
+ exports.TieredMenu = exports.LocationRetrieved = void 0;
98176
98213
 
98177
98214
  var _react = _interopRequireWildcard(__webpack_require__(0));
98178
98215
 
@@ -98198,6 +98235,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
98198
98235
 
98199
98236
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
98200
98237
 
98238
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
98239
+
98201
98240
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
98202
98241
 
98203
98242
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -98218,27 +98257,97 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
98218
98257
 
98219
98258
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
98220
98259
 
98221
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
98260
+ // interface IProps {
98261
+ // children(args: {direction: 'left' | 'right'}): JSX.Element;
98262
+ // }
98263
+ // interface IState {
98264
+ // direction: 'left' | 'right' | null;
98265
+ // }
98266
+
98267
+ /**
98268
+ * Checks whether there is more space on the left or right,
98269
+ * in order to choose which direction submenus open to.
98270
+ */
98271
+ var LocationRetrieved = /*#__PURE__*/function (_React$PureComponent) {
98272
+ _inherits(LocationRetrieved, _React$PureComponent);
98273
+
98274
+ var _super = _createSuper(LocationRetrieved);
98275
+
98276
+ // <IProps, IState>
98277
+ function LocationRetrieved(props) {
98278
+ var _this;
98279
+
98280
+ _classCallCheck(this, LocationRetrieved);
98281
+
98282
+ _this = _super.call(this, props);
98283
+ _this.state = {
98284
+ direction: null
98285
+ };
98286
+ _this.recompute = _this.recompute.bind(_assertThisInitialized(_this));
98287
+ return _this;
98288
+ }
98289
+
98290
+ _createClass(LocationRetrieved, [{
98291
+ key: "recompute",
98292
+ value: function recompute(callback) {
98293
+ // public, used in TieredMenu#show
98294
+ this.setState({
98295
+ direction: null
98296
+ });
98297
+ setTimeout(callback, 0);
98298
+ }
98299
+ }, {
98300
+ key: "render",
98301
+ value: function render() {
98302
+ var _this2 = this;
98303
+
98304
+ if (this.state.direction == null) {
98305
+ return /*#__PURE__*/_react.default.createElement("span", {
98306
+ ref: function ref(el) {
98307
+ if (el != null) {
98308
+ var rect = el.getBoundingClientRect();
98309
+ var left = rect.left;
98310
+ var availableSpaceH = document.body.offsetWidth;
98311
+ var direction = left < availableSpaceH / 2 ? 'right' : 'left';
98312
+
98313
+ _this2.setState({
98314
+ direction: direction
98315
+ });
98316
+ }
98317
+ }
98318
+ });
98319
+ } else {
98320
+ return this.props.children({
98321
+ direction: this.state.direction
98322
+ });
98323
+ }
98324
+ }
98325
+ }]);
98326
+
98327
+ return LocationRetrieved;
98328
+ }(_react.default.PureComponent);
98329
+
98330
+ exports.LocationRetrieved = LocationRetrieved;
98222
98331
 
98223
98332
  var TieredMenu = /*#__PURE__*/function (_Component) {
98224
98333
  _inherits(TieredMenu, _Component);
98225
98334
 
98226
- var _super = _createSuper(TieredMenu);
98335
+ var _super2 = _createSuper(TieredMenu);
98227
98336
 
98228
98337
  function TieredMenu(props) {
98229
- var _this;
98338
+ var _this3;
98230
98339
 
98231
98340
  _classCallCheck(this, TieredMenu);
98232
98341
 
98233
- _this = _super.call(this, props);
98234
- _this.state = {
98342
+ _this3 = _super2.call(this, props);
98343
+ _this3.state = {
98235
98344
  visible: !props.popup
98236
98345
  };
98237
- _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
98238
- _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
98239
- _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
98240
- _this.id = _this.props.id || (0, _UniqueComponentId.default)();
98241
- return _this;
98346
+ _this3.onEnter = _this3.onEnter.bind(_assertThisInitialized(_this3));
98347
+ _this3.onEntered = _this3.onEntered.bind(_assertThisInitialized(_this3));
98348
+ _this3.onExit = _this3.onExit.bind(_assertThisInitialized(_this3));
98349
+ _this3.id = _this3.props.id || (0, _UniqueComponentId.default)();
98350
+ return _this3;
98242
98351
  }
98243
98352
 
98244
98353
  _createClass(TieredMenu, [{
@@ -98251,29 +98360,31 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98251
98360
  }, {
98252
98361
  key: "show",
98253
98362
  value: function show(event) {
98254
- var _this2 = this;
98363
+ var _this4 = this;
98255
98364
 
98256
98365
  this.target = event.currentTarget;
98257
98366
  var currentEvent = event;
98258
- this.setState({
98259
- visible: true
98260
- }, function () {
98261
- if (_this2.props.onShow) {
98262
- _this2.props.onShow(currentEvent);
98263
- }
98367
+ this.locator.recompute(function () {
98368
+ _this4.setState({
98369
+ visible: true
98370
+ }, function () {
98371
+ if (_this4.props.onShow) {
98372
+ _this4.props.onShow(currentEvent);
98373
+ }
98374
+ });
98264
98375
  });
98265
98376
  }
98266
98377
  }, {
98267
98378
  key: "hide",
98268
98379
  value: function hide(event) {
98269
- var _this3 = this;
98380
+ var _this5 = this;
98270
98381
 
98271
98382
  var currentEvent = event;
98272
98383
  this.setState({
98273
98384
  visible: false
98274
98385
  }, function () {
98275
- if (_this3.props.onHide) {
98276
- _this3.props.onHide(currentEvent);
98386
+ if (_this5.props.onHide) {
98387
+ _this5.props.onHide(currentEvent);
98277
98388
  }
98278
98389
  });
98279
98390
  }
@@ -98314,12 +98425,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98314
98425
  }, {
98315
98426
  key: "bindDocumentClickListener",
98316
98427
  value: function bindDocumentClickListener() {
98317
- var _this4 = this;
98428
+ var _this6 = this;
98318
98429
 
98319
98430
  if (!this.documentClickListener) {
98320
98431
  this.documentClickListener = function (event) {
98321
- if (_this4.props.popup && _this4.state.visible && !_this4.container.contains(event.target)) {
98322
- _this4.hide(event);
98432
+ if (_this6.props.popup && _this6.state.visible && !_this6.container.contains(event.target)) {
98433
+ _this6.hide(event);
98323
98434
  }
98324
98435
  };
98325
98436
 
@@ -98337,12 +98448,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98337
98448
  }, {
98338
98449
  key: "bindDocumentResizeListener",
98339
98450
  value: function bindDocumentResizeListener() {
98340
- var _this5 = this;
98451
+ var _this7 = this;
98341
98452
 
98342
98453
  if (!this.documentResizeListener) {
98343
98454
  this.documentResizeListener = function (event) {
98344
- if (_this5.state.visible) {
98345
- _this5.hide(event);
98455
+ if (_this7.state.visible) {
98456
+ _this7.hide(event);
98346
98457
  }
98347
98458
  };
98348
98459
 
@@ -98360,12 +98471,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98360
98471
  }, {
98361
98472
  key: "bindScrollListener",
98362
98473
  value: function bindScrollListener() {
98363
- var _this6 = this;
98474
+ var _this8 = this;
98364
98475
 
98365
98476
  if (!this.scrollHandler) {
98366
98477
  this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
98367
- if (_this6.state.visible) {
98368
- _this6.hide(event);
98478
+ if (_this8.state.visible) {
98479
+ _this8.hide(event);
98369
98480
  }
98370
98481
  });
98371
98482
  }
@@ -98391,8 +98502,8 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98391
98502
  }
98392
98503
  }, {
98393
98504
  key: "renderElement",
98394
- value: function renderElement() {
98395
- var _this7 = this;
98505
+ value: function renderElement(direction) {
98506
+ var _this9 = this;
98396
98507
 
98397
98508
  var className = (0, _ClassNames.classNames)('p-tieredmenu p-component', {
98398
98509
  'p-tieredmenu-overlay': this.props.popup
@@ -98410,7 +98521,7 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98410
98521
  onExit: this.onExit
98411
98522
  }, /*#__PURE__*/_react.default.createElement("div", {
98412
98523
  ref: function ref(el) {
98413
- return _this7.container = el;
98524
+ return _this9.container = el;
98414
98525
  },
98415
98526
  id: this.id,
98416
98527
  className: className,
@@ -98419,14 +98530,28 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
98419
98530
  }, /*#__PURE__*/_react.default.createElement(_TieredMenuSub.TieredMenuSub, {
98420
98531
  model: this.props.model,
98421
98532
  root: true,
98422
- popup: this.props.popup
98533
+ popup: this.props.popup,
98534
+ direction: direction
98423
98535
  })));
98424
98536
  }
98425
98537
  }, {
98426
98538
  key: "render",
98427
98539
  value: function render() {
98428
- var element = this.renderElement();
98429
- if (this.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, this.props.appendTo);else return element;
98540
+ var _this10 = this;
98541
+
98542
+ return /*#__PURE__*/_react.default.createElement(LocationRetrieved, {
98543
+ ref: function ref(instance) {
98544
+ if (instance != null) {
98545
+ _this10.locator = instance;
98546
+ }
98547
+ }
98548
+ }, function (_ref) {
98549
+ var direction = _ref.direction;
98550
+
98551
+ var element = _this10.renderElement(direction);
98552
+
98553
+ if (_this10.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, _this10.props.appendTo);else return element;
98554
+ });
98430
98555
  }
98431
98556
  }]);
98432
98557
 
@@ -98590,6 +98715,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98590
98715
  }, {
98591
98716
  key: "onItemClick",
98592
98717
  value: function onItemClick(event, item) {
98718
+ var _item$items$length, _item$items;
98719
+
98593
98720
  if (item.disabled) {
98594
98721
  event.preventDefault();
98595
98722
  return;
@@ -98606,21 +98733,27 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98606
98733
  });
98607
98734
  }
98608
98735
 
98609
- if (this.props.root) {
98610
- if (item.items) {
98611
- if (this.state.activeItem && item === this.state.activeItem) {
98612
- this.setState({
98613
- activeItem: null
98614
- });
98615
- } else {
98616
- this.setState({
98617
- activeItem: item
98618
- });
98619
- }
98736
+ if (((_item$items$length = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) !== null && _item$items$length !== void 0 ? _item$items$length : 0) > 0) {
98737
+ if (this.state.activeItem && item === this.state.activeItem) {
98738
+ this.setState({
98739
+ activeItem: null
98740
+ });
98741
+ } else {
98742
+ this.setState({
98743
+ activeItem: item
98744
+ });
98620
98745
  }
98621
98746
  }
98622
98747
 
98623
- if (!item.items) {
98748
+ var target = event.target;
98749
+ var isKeyboardEvent = event.clientX === 0 && event.clientY === 0;
98750
+
98751
+ if (isKeyboardEvent) {
98752
+ setTimeout(function () {
98753
+ var el = target.parentElement.querySelectorAll('.p-submenu-list > .p-menuitem')[0].querySelector('button');
98754
+ el.focus();
98755
+ }, 0);
98756
+ } else if (!item.items) {
98624
98757
  this.onLeafClick();
98625
98758
  }
98626
98759
  }
@@ -98677,8 +98810,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98677
98810
  }, {
98678
98811
  key: "onChildItemKeyDown",
98679
98812
  value: function onChildItemKeyDown(event, childListItem) {
98680
- //left
98681
- if (event.which === 37) {
98813
+ var leftArrow = event.which === 37;
98814
+ var escape = event.which === 27;
98815
+
98816
+ if (leftArrow || escape) {
98682
98817
  this.setState({
98683
98818
  activeItem: null
98684
98819
  });
@@ -98750,7 +98885,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98750
98885
  onLeafClick: this.onLeafClick,
98751
98886
  popup: this.props.popup,
98752
98887
  onKeyDown: this.onChildItemKeyDown,
98753
- parentActive: item === this.state.activeItem
98888
+ parentActive: item === this.state.activeItem,
98889
+ direction: this.props.direction
98754
98890
  });
98755
98891
  }
98756
98892
 
@@ -98778,10 +98914,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98778
98914
  return _this3.onItemMouseEnter(event, item);
98779
98915
  },
98780
98916
  role: "none"
98781
- }, /*#__PURE__*/_react.default.createElement("a", {
98782
- href: item.url || '#',
98917
+ }, /*#__PURE__*/_react.default.createElement("button", {
98783
98918
  className: linkClassName,
98784
- target: item.target,
98785
98919
  role: "menuitem",
98786
98920
  "aria-haspopup": item.items != null,
98787
98921
  onClick: function onClick(event) {
@@ -98827,7 +98961,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98827
98961
  },
98828
98962
  className: className,
98829
98963
  role: this.props.root ? 'menubar' : 'menu',
98830
- "aria-orientation": "horizontal"
98964
+ "aria-orientation": "horizontal",
98965
+ style: {
98966
+ left: this.props.direction === 'left' ? '-100%' : '100%'
98967
+ }
98831
98968
  }, submenu);
98832
98969
  }
98833
98970
  }]);
@@ -98854,7 +98991,8 @@ _defineProperty(TieredMenuSub, "propTypes", {
98854
98991
  popup: _propTypes.default.bool,
98855
98992
  onLeafClick: _propTypes.default.func,
98856
98993
  onKeyDown: _propTypes.default.func,
98857
- parentActive: _propTypes.default.bool
98994
+ parentActive: _propTypes.default.bool,
98995
+ direction: _propTypes.default.string
98858
98996
  });
98859
98997
 
98860
98998
  /***/ }),
@@ -116573,11 +116711,11 @@ var RundownEditor = /** @class */ (function (_super) {
116573
116711
  React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'large', type: 'warning' }),
116574
116712
  React.createElement(index_1.Text, { color: 'light', size: 'medium', className: 'sd-margin--0' }, "OF"),
116575
116713
  React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:45', size: 'large' })),
116576
- React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: [
116714
+ React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: function () { return [
116577
116715
  { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
116578
116716
  { label: React.createElement(index_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
116579
116717
  { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
116580
- ], onClick: function () { return false; } }))),
116718
+ ]; } }))),
116581
116719
  React.createElement(Layout.RightPanel, { open: this.state.rightPanelOpen },
116582
116720
  React.createElement(Layout.Panel, { size: 'full', side: 'right' },
116583
116721
  React.createElement(Layout.PanelContent, null,
@@ -129291,7 +129429,7 @@ var DropdownDoc = /** @class */ (function (_super) {
129291
129429
  " 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."),
129292
129430
  React.createElement(Markup.ReactMarkup, null,
129293
129431
  React.createElement(Markup.ReactMarkupPreview, null,
129294
- React.createElement(app_typescript_1.Dropdown, { header: [
129432
+ React.createElement(app_typescript_1.Dropdown, { append: true, header: [
129295
129433
  {
129296
129434
  type: 'group',
129297
129435
  label: 'Create new',
@@ -129305,7 +129443,14 @@ var DropdownDoc = /** @class */ (function (_super) {
129305
129443
  type: 'submenu',
129306
129444
  label: 'Show 1',
129307
129445
  icon: 'plus-sign',
129308
- items: [],
129446
+ items: [
129447
+ {
129448
+ type: 'submenu',
129449
+ label: 'Show 1',
129450
+ icon: 'plus-sign',
129451
+ items: []
129452
+ }
129453
+ ],
129309
129454
  },
129310
129455
  {
129311
129456
  type: 'submenu',
@@ -129341,6 +129486,272 @@ var DropdownDoc = /** @class */ (function (_super) {
129341
129486
  },
129342
129487
  ],
129343
129488
  },
129489
+ {
129490
+ type: 'submenu',
129491
+ label: 'Rundown',
129492
+ icon: 'plus-sign',
129493
+ items: [
129494
+ {
129495
+ type: 'submenu',
129496
+ label: 'Show 1',
129497
+ icon: 'plus-sign',
129498
+ items: [],
129499
+ },
129500
+ {
129501
+ type: 'submenu',
129502
+ label: 'Show 2',
129503
+ icon: 'plus-sign',
129504
+ items: [],
129505
+ },
129506
+ ],
129507
+ },
129508
+ {
129509
+ type: 'submenu',
129510
+ label: 'Rundown',
129511
+ icon: 'plus-sign',
129512
+ items: [
129513
+ {
129514
+ type: 'submenu',
129515
+ label: 'Show 1',
129516
+ icon: 'plus-sign',
129517
+ items: [],
129518
+ },
129519
+ {
129520
+ type: 'submenu',
129521
+ label: 'Show 2',
129522
+ icon: 'plus-sign',
129523
+ items: [],
129524
+ },
129525
+ ],
129526
+ },
129527
+ {
129528
+ type: 'submenu',
129529
+ label: 'Rundown',
129530
+ icon: 'plus-sign',
129531
+ items: [
129532
+ {
129533
+ type: 'submenu',
129534
+ label: 'Show 1',
129535
+ icon: 'plus-sign',
129536
+ items: [],
129537
+ },
129538
+ {
129539
+ type: 'submenu',
129540
+ label: 'Show 2',
129541
+ icon: 'plus-sign',
129542
+ items: [],
129543
+ },
129544
+ ],
129545
+ },
129546
+ {
129547
+ type: 'submenu',
129548
+ label: 'Rundown',
129549
+ icon: 'plus-sign',
129550
+ items: [
129551
+ {
129552
+ type: 'submenu',
129553
+ label: 'Show 1',
129554
+ icon: 'plus-sign',
129555
+ items: [],
129556
+ },
129557
+ {
129558
+ type: 'submenu',
129559
+ label: 'Show 2',
129560
+ icon: 'plus-sign',
129561
+ items: [],
129562
+ },
129563
+ ],
129564
+ },
129565
+ {
129566
+ type: 'submenu',
129567
+ label: 'Rundown',
129568
+ icon: 'plus-sign',
129569
+ items: [
129570
+ {
129571
+ type: 'submenu',
129572
+ label: 'Show 1',
129573
+ icon: 'plus-sign',
129574
+ items: [],
129575
+ },
129576
+ {
129577
+ type: 'submenu',
129578
+ label: 'Show 2',
129579
+ icon: 'plus-sign',
129580
+ items: [],
129581
+ },
129582
+ ],
129583
+ },
129584
+ {
129585
+ type: 'submenu',
129586
+ label: 'Rundown',
129587
+ icon: 'plus-sign',
129588
+ items: [
129589
+ {
129590
+ type: 'submenu',
129591
+ label: 'Show 1',
129592
+ icon: 'plus-sign',
129593
+ items: [],
129594
+ },
129595
+ {
129596
+ type: 'submenu',
129597
+ label: 'Show 2',
129598
+ icon: 'plus-sign',
129599
+ items: [],
129600
+ },
129601
+ ],
129602
+ },
129603
+ {
129604
+ type: 'submenu',
129605
+ label: 'Rundown',
129606
+ icon: 'plus-sign',
129607
+ items: [
129608
+ {
129609
+ type: 'submenu',
129610
+ label: 'Show 1',
129611
+ icon: 'plus-sign',
129612
+ items: [],
129613
+ },
129614
+ {
129615
+ type: 'submenu',
129616
+ label: 'Show 2',
129617
+ icon: 'plus-sign',
129618
+ items: [],
129619
+ },
129620
+ ],
129621
+ },
129622
+ {
129623
+ type: 'submenu',
129624
+ label: 'Rundown',
129625
+ icon: 'plus-sign',
129626
+ items: [
129627
+ {
129628
+ type: 'submenu',
129629
+ label: 'Show 1',
129630
+ icon: 'plus-sign',
129631
+ items: [],
129632
+ },
129633
+ {
129634
+ type: 'submenu',
129635
+ label: 'Show 2',
129636
+ icon: 'plus-sign',
129637
+ items: [],
129638
+ },
129639
+ ],
129640
+ },
129641
+ {
129642
+ type: 'submenu',
129643
+ label: 'Rundown',
129644
+ icon: 'plus-sign',
129645
+ items: [
129646
+ {
129647
+ type: 'submenu',
129648
+ label: 'Show 1',
129649
+ icon: 'plus-sign',
129650
+ items: [],
129651
+ },
129652
+ {
129653
+ type: 'submenu',
129654
+ label: 'Show 2',
129655
+ icon: 'plus-sign',
129656
+ items: [],
129657
+ },
129658
+ ],
129659
+ },
129660
+ {
129661
+ type: 'submenu',
129662
+ label: 'Rundown',
129663
+ icon: 'plus-sign',
129664
+ items: [
129665
+ {
129666
+ type: 'submenu',
129667
+ label: 'Show 1',
129668
+ icon: 'plus-sign',
129669
+ items: [],
129670
+ },
129671
+ {
129672
+ type: 'submenu',
129673
+ label: 'Show 2',
129674
+ icon: 'plus-sign',
129675
+ items: [],
129676
+ },
129677
+ ],
129678
+ },
129679
+ {
129680
+ type: 'submenu',
129681
+ label: 'Rundown',
129682
+ icon: 'plus-sign',
129683
+ items: [
129684
+ {
129685
+ type: 'submenu',
129686
+ label: 'Show 1',
129687
+ icon: 'plus-sign',
129688
+ items: [],
129689
+ },
129690
+ {
129691
+ type: 'submenu',
129692
+ label: 'Show 2',
129693
+ icon: 'plus-sign',
129694
+ items: [],
129695
+ },
129696
+ ],
129697
+ },
129698
+ {
129699
+ type: 'submenu',
129700
+ label: 'Rundown',
129701
+ icon: 'plus-sign',
129702
+ items: [
129703
+ {
129704
+ type: 'submenu',
129705
+ label: 'Show 1',
129706
+ icon: 'plus-sign',
129707
+ items: [],
129708
+ },
129709
+ {
129710
+ type: 'submenu',
129711
+ label: 'Show 2',
129712
+ icon: 'plus-sign',
129713
+ items: [],
129714
+ },
129715
+ ],
129716
+ },
129717
+ {
129718
+ type: 'submenu',
129719
+ label: 'Rundown',
129720
+ icon: 'plus-sign',
129721
+ items: [
129722
+ {
129723
+ type: 'submenu',
129724
+ label: 'Show 1',
129725
+ icon: 'plus-sign',
129726
+ items: [],
129727
+ },
129728
+ {
129729
+ type: 'submenu',
129730
+ label: 'Show 2',
129731
+ icon: 'plus-sign',
129732
+ items: [],
129733
+ },
129734
+ ],
129735
+ },
129736
+ {
129737
+ type: 'submenu',
129738
+ label: 'Rundown',
129739
+ icon: 'plus-sign',
129740
+ items: [
129741
+ {
129742
+ type: 'submenu',
129743
+ label: 'Show 1',
129744
+ icon: 'plus-sign',
129745
+ items: [],
129746
+ },
129747
+ {
129748
+ type: 'submenu',
129749
+ label: 'Show 2',
129750
+ icon: 'plus-sign',
129751
+ items: [],
129752
+ },
129753
+ ],
129754
+ },
129344
129755
  ],
129345
129756
  },
129346
129757
  ], footer: [
@@ -129350,7 +129761,7 @@ var DropdownDoc = /** @class */ (function (_super) {
129350
129761
  {
129351
129762
  icon: 'rundown',
129352
129763
  label: 'Create new Show',
129353
- onSelect: function () { return false; },
129764
+ onSelect: function () { return console.log('aaa'); },
129354
129765
  },
129355
129766
  ],
129356
129767
  },
@@ -129508,7 +129919,13 @@ var DropdownDoc = /** @class */ (function (_super) {
129508
129919
  type: 'submenu',
129509
129920
  label: 'Show 1',
129510
129921
  icon: 'plus-sign',
129511
- items: [],
129922
+ items: [
129923
+ {
129924
+ type: 'submenu',
129925
+ label: 'Show 1',
129926
+ items: []
129927
+ }
129928
+ ],
129512
129929
  },
129513
129930
  {
129514
129931
  type: 'submenu',
@@ -131546,9 +131963,8 @@ var TableListDoc = /** @class */ (function (_super) {
131546
131963
  center: React.createElement("span", null, "Item 2"),
131547
131964
  end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }),
131548
131965
  action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
131549
- onClick: function () {
131550
- return false;
131551
- }
131966
+ onClick: function () { return console.log('single'); },
131967
+ onDoubleClick: function () { return console.log('double'); },
131552
131968
  },
131553
131969
  {
131554
131970
  start: React.createElement(React.Fragment, null,
@@ -131557,9 +131973,9 @@ var TableListDoc = /** @class */ (function (_super) {
131557
131973
  center: React.createElement("span", null, "Item 3"),
131558
131974
  end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }),
131559
131975
  action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
131560
- onClick: function () {
131561
- return false;
131562
- }
131976
+ onClick: function () { return console.log('single'); },
131977
+ onDoubleClick: function () { return console.log('double'); },
131978
+ hexColor: '#ff9808'
131563
131979
  },
131564
131980
  ]
131565
131981
  };
@@ -131568,35 +131984,35 @@ var TableListDoc = /** @class */ (function (_super) {
131568
131984
  TableListDoc.prototype.render = function () {
131569
131985
  return (React.createElement("section", { className: 'docs-page__container' },
131570
131986
  React.createElement("h2", { className: 'docs-page__h2' }, "TableList"),
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 "),
131987
+ React.createElement(Markup.ReactMarkupCodePreview, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={(index) => [\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },\n { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },\n { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },\n ]} />\n "),
131572
131988
  React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
131573
131989
  React.createElement(Markup.ReactMarkup, null,
131574
131990
  React.createElement(Markup.ReactMarkupPreview, null,
131575
- React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, onAddItem: function (index, item) { return console.log(index, item); }, array: this.state.array, itemsDropdown: [
131576
- { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
131577
- { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
131578
- { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
131579
- ], onDrag: function (start, end) { return console.log(start, end); } })),
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 ")),
131991
+ React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: function (index) { return [
131992
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return console.log(index); } },
131993
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return console.log(index); } },
131994
+ { label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return console.log(index); } },
131995
+ ]; }, onDrag: function (start, end) { return console.log(start, end); } })),
131996
+ React.createElement(Markup.ReactMarkupCode, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={(index) => [\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },\n { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },\n { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },\n ]\n }\n onDrag={(start, end) => console.log(start, end)}\n />\n ")),
131581
131997
  React.createElement("h3", { className: "docs-page__h3" }, "Props"),
131582
131998
  React.createElement("p", { className: "docs-page__paragraph" }, "TableList"),
131583
131999
  React.createElement(app_typescript_1.PropsList, null,
131584
- React.createElement(app_typescript_1.Prop, { name: 'array', isRequired: false, type: 'Array', default: 'false', description: 'Array of object.' }),
131585
- React.createElement(app_typescript_1.Prop, { name: 'children', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Children of component.' }),
132000
+ React.createElement(app_typescript_1.Prop, { name: 'array', isRequired: true, type: 'Array', default: 'false', description: 'Array of object.' }),
131586
132001
  React.createElement(app_typescript_1.Prop, { name: 'addItem', isRequired: false, type: 'boolean', default: 'false', description: 'Functionality to add items to the list.' }),
131587
132002
  React.createElement(app_typescript_1.Prop, { name: 'dragAndDrop', isRequired: false, type: 'boolean', default: 'false', description: 'Drag&Drop functionality.' }),
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.' }),
131589
132003
  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: '' }),
131591
- React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
132004
+ React.createElement(app_typescript_1.Prop, { name: 'showDragHandle', isRequired: false, type: 'string', default: 'always', description: '"always" | "onHover" | "none".' }),
132005
+ React.createElement(app_typescript_1.Prop, { name: 'readOnly', isRequired: false, type: 'boolean', default: 'false', description: 'When specified, component changes are not enabled.' }),
131592
132006
  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.' })),
132007
+ React.createElement(app_typescript_1.Prop, { name: 'onAddItem', isRequired: false, type: 'function', default: 'false', description: 'Returns index of draggable item.' }),
132008
+ React.createElement(app_typescript_1.Prop, { name: 'itemsDropdown', isRequired: false, type: 'function', default: 'false', description: 'Dropdown for adding items in the list. Returns index of draggable item.' })),
131594
132009
  React.createElement("p", { className: "docs-page__paragraph" }, "array:"),
131595
132010
  React.createElement(app_typescript_1.PropsList, null,
131596
132011
  React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131597
132012
  React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131598
132013
  React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
131599
132014
  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.' }),
132015
+ React.createElement(app_typescript_1.Prop, { name: 'hexColor', isRequired: false, type: 'string', default: 'false', description: '' }),
131600
132016
  React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
131601
132017
  React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: 'false', description: 'onDoubleClick functionality.' }))));
131602
132018
  };
@@ -134425,11 +134841,11 @@ var Rundowns = /** @class */ (function (_super) {
134425
134841
  React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:56', type: 'warning' }),
134426
134842
  React.createElement(index_1.Text, { color: 'light', size: 'small', className: 'sd-margin--0' }, "OF"),
134427
134843
  React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '01:00' })),
134428
- React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', array: this.state.array, itemsDropdown: [
134844
+ React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', array: this.state.array, itemsDropdown: function () { return [
134429
134845
  { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
134430
134846
  { label: React.createElement(index_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
134431
134847
  { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
134432
- ], onClick: function () { return false; } }))))),
134848
+ ]; } }))))),
134433
134849
  React.createElement(Layout.OverlayPanel, null)),
134434
134850
  React.createElement(Layout.ContentSplitter, { visible: this.state.openEditor }),
134435
134851
  React.createElement(Layout.AuthoringContainer, { open: this.state.openEditor },
@@ -137331,7 +137747,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
137331
137747
  /* 649 */
137332
137748
  /***/ (function(module, exports) {
137333
137749
 
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"}}
137750
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.14","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"}}
137335
137751
 
137336
137752
  /***/ }),
137337
137753
  /* 650 */