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

package/dist/superdesk-ui.bundle.js

@@ -38910,7 +38910,7 @@ var DurationInput = /** @class */ (function (_super) {
     return DurationInput;
 }(React.PureComponent));
 exports.DurationInput = DurationInput;
-function getDurationString(seconds) {
+function getDurationString(seconds, zero) {
     function zeroPad(value) {
         if (value.toString().length === 1 || value === 0) {
             return "0".concat(value);
@@ -38922,9 +38922,19 @@ function getDurationString(seconds) {
             return value;
         }
     }
-    var hour = zeroPad(Math.floor(seconds / 3600));
-    var minute = zeroPad(Math.floor((seconds % 3600) / 60));
-    var second = zeroPad(Math.floor(seconds % 60));
+    var hour;
+    var minute;
+    var second;
+    if (zero) {
+        hour = zeroPad(Math.floor(seconds / 3600));
+        minute = zeroPad(Math.floor((seconds % 3600) / 60));
+        second = zeroPad(Math.floor(seconds % 60));
+    }
+    else {
+        hour = Math.floor(seconds / 3600);
+        minute = Math.floor((seconds % 3600) / 60);
+        second = Math.floor(seconds % 60);
+    }
     if (Number(hour) === 0 && Number(minute) > 0) {
         return "".concat(minute, "m ").concat(second, "s");
     }
@@ -40768,7 +40778,7 @@ var TableList = /** @class */ (function (_super) {
             this.props.onDrag(result.source.index, result.destination.index) : null;
     };
     TableList.prototype.dropDown = function () {
-        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
             React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
     };
     TableList.prototype.render = function () {
@@ -40787,7 +40797,9 @@ var TableList = /** @class */ (function (_super) {
                         _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
                             React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
                                     ? item.onDoubleClick
-                                    : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                                    : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
+                                    ? _this.props.itemsDropdown(index)
+                                    : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
                                     && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
                         provided.placeholder,
                         (_this.props.addItem && !_this.props.readOnly) &&
@@ -40797,7 +40809,7 @@ var TableList = /** @class */ (function (_super) {
                 : React.createElement("ul", { className: classes },
                     this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
-                            : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
                             && _this.props.onAddItem(index, item); } })); }),
                     (this.props.addItem && !this.props.readOnly) &&
                         React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
@@ -40859,7 +40871,7 @@ var TableListItem = /** @class */ (function (_super) {
                 React.createElement("div", { className: 'table-list__add-bar-container' },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-bar' },
-                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
             : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
                 React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
@@ -57028,12 +57040,12 @@ var React = __importStar(__webpack_require__(0));
 var ReactDOM = __importStar(__webpack_require__(9));
 var core_1 = __webpack_require__(61);
 var react_id_generator_1 = __webpack_require__(8);
+var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
     var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
-    var DROPDOWN_ID = "react-placeholder";
     var ref = React.useRef(null);
     var buttonRef = React.useRef(null);
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
@@ -57046,11 +57058,10 @@ var Dropdown = function (_a) {
         return each(el, index);
     });
     React.useEffect(function () {
-        var existingElement = document.getElementById(DROPDOWN_ID);
+        var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
             var el = document.createElement("div");
-            el.id = DROPDOWN_ID;
-            // style placeholder
+            el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
             el.style.left = '0';
@@ -57065,7 +57076,6 @@ var Dropdown = function (_a) {
         }
         setChange(true);
     }, [open]);
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -57087,7 +57097,6 @@ var Dropdown = function (_a) {
             return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
         }
     }
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
             var menuRef_1;
@@ -57136,15 +57145,14 @@ var Dropdown = function (_a) {
         }
     }
     function addInPlaceholder() {
-        var placeholder = document.getElementById(DROPDOWN_ID);
+        var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
         var menu = createAppendMenu();
         if (open) {
             return ReactDOM.render(menu, placeholder);
         }
         else {
-            var menuDOM = document.getElementById(menuID);
-            if (menuDOM) {
-                menuDOM.style.display = 'none';
+            if (placeholder) {
+                ReactDOM.unmountComponentAtNode(placeholder);
             }
         }
     }
@@ -57154,7 +57162,7 @@ var Dropdown = function (_a) {
             item['items'].forEach(function (el, key) {
                 submenuItems_1.push(each(el, key));
             });
-            return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
         }
         else if (item['type'] === 'group') {
             var groupItems_1 = [];
@@ -57224,19 +57232,20 @@ var DropdownItem = function (_a) {
             label)));
 };
 var DropdownItemWithSubmenu = function (_a) {
-    var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
+    var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
     var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
     var refButtonSubMenu = React.useRef(null);
     var refSubMenu = React.useRef(null);
+    var placeholder = document.getElementById(menuID);
     React.useEffect(function () {
         var subMenuRef = refSubMenu.current;
         var subToggleRef = refButtonSubMenu.current;
         if (open === true) {
-            document.body.appendChild(subMenuRef);
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
             subMenuRef.style.display = 'block';
         }
         else if (open === false) {
-            document.body.removeChild(subMenuRef);
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
             subMenuRef.style.display = 'none';
         }
         if (subMenuRef && subToggleRef) {
@@ -57247,7 +57256,14 @@ var DropdownItemWithSubmenu = function (_a) {
     }, [open]);
     return (React.createElement("li", { key: index, ref: refButtonSubMenu },
         React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
-            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
+            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
+                    if (item.onSelect) {
+                        item.onSelect();
+                    }
+                    if (onChange) {
+                        onChange();
+                    }
+                }, onMouseOver: function () { return setOpen(true); } },
                 item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
                 item['label']),
             React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
@@ -59375,28 +59391,49 @@ var classnames_1 = __importDefault(__webpack_require__(2));
 var ContentListItem = /** @class */ (function (_super) {
     __extends(ContentListItem, _super);
     function ContentListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.delay = 200;
+        _this.prevent = false;
+        _this.onSingleClick = function () {
+            _this.timer = setTimeout(function () {
+                if (!_this.prevent) {
+                    if (_this.props.onClick) {
+                        _this.props.onClick();
+                    }
+                }
+            }, _this.delay);
+        };
+        _this.onDoubleClick = function () {
+            clearTimeout(_this.timer);
+            _this.prevent = true;
+            if (_this.props.onDoubleClick) {
+                _this.props.onDoubleClick();
+            }
+            setTimeout(function () {
+                _this.prevent = false;
+            }, _this.delay);
+        };
+        return _this;
     }
     ContentListItem.prototype.render = function () {
-        var classes = (0, classnames_1.default)('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+        var classes = (0, classnames_1.default)('sd-list-item sd-shadow--z1', {
             'sd-list-item--activated': this.props.activated,
             'sd-list-item--selected': this.props.selected,
             'fetched': this.props.archived,
             'actioning': this.props.loading,
         });
-        return (React.createElement("div", { className: classes, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick },
-            React.createElement("div", { className: "sd-list-item sd-shadow--z1" },
-                this.props.locked
-                    ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
-                    : React.createElement("div", { className: "sd-list-item__border" }),
-                this.props.itemColum.map(function (item, index) {
-                    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) {
-                        return (item.itemRow.length <= 1
-                            ? React.createElement(React.Fragment, { key: i }, e.content)
-                            : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
-                    }));
-                }),
-                React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
+        return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
+            this.props.locked
+                ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
+                : React.createElement("div", { className: "sd-list-item__border" }),
+            this.props.itemColum.map(function (item, index) {
+                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) {
+                    return (item.itemRow.length <= 1
+                        ? React.createElement(React.Fragment, { key: i }, e.content)
+                        : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
+                }));
+            }),
+            React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
     };
     return ContentListItem;
 }(React.PureComponent));
@@ -97433,7 +97470,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TieredMenu = void 0;
+exports.TieredMenu = exports.LocationRetrieved = void 0;
 
 var _react = _interopRequireWildcard(__webpack_require__(0));
 
@@ -97459,6 +97496,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 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); } }
@@ -97479,27 +97518,97 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-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; }
+// interface IProps {
+//     children(args: {direction: 'left' | 'right'}): JSX.Element;
+// }
+// interface IState {
+//     direction: 'left' | 'right' | null;
+// }
+
+/**
+ * Checks whether there is more space on the left or right,
+ * in order to choose which direction submenus open to.
+ */
+var LocationRetrieved = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(LocationRetrieved, _React$PureComponent);
+
+  var _super = _createSuper(LocationRetrieved);
+
+  // <IProps, IState>
+  function LocationRetrieved(props) {
+    var _this;
+
+    _classCallCheck(this, LocationRetrieved);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      direction: null
+    };
+    _this.recompute = _this.recompute.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(LocationRetrieved, [{
+    key: "recompute",
+    value: function recompute(callback) {
+      // public, used in TieredMenu#show
+      this.setState({
+        direction: null
+      });
+      setTimeout(callback, 0);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      if (this.state.direction == null) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          ref: function ref(el) {
+            if (el != null) {
+              var rect = el.getBoundingClientRect();
+              var left = rect.left;
+              var availableSpaceH = document.body.offsetWidth;
+              var direction = left < availableSpaceH / 2 ? 'right' : 'left';
+
+              _this2.setState({
+                direction: direction
+              });
+            }
+          }
+        });
+      } else {
+        return this.props.children({
+          direction: this.state.direction
+        });
+      }
+    }
+  }]);
+
+  return LocationRetrieved;
+}(_react.default.PureComponent);
+
+exports.LocationRetrieved = LocationRetrieved;
 
 var TieredMenu = /*#__PURE__*/function (_Component) {
   _inherits(TieredMenu, _Component);
 
-  var _super = _createSuper(TieredMenu);
+  var _super2 = _createSuper(TieredMenu);
 
   function TieredMenu(props) {
-    var _this;
+    var _this3;
 
     _classCallCheck(this, TieredMenu);
 
-    _this = _super.call(this, props);
-    _this.state = {
+    _this3 = _super2.call(this, props);
+    _this3.state = {
       visible: !props.popup
     };
-    _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
-    _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
-    _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
-    _this.id = _this.props.id || (0, _UniqueComponentId.default)();
-    return _this;
+    _this3.onEnter = _this3.onEnter.bind(_assertThisInitialized(_this3));
+    _this3.onEntered = _this3.onEntered.bind(_assertThisInitialized(_this3));
+    _this3.onExit = _this3.onExit.bind(_assertThisInitialized(_this3));
+    _this3.id = _this3.props.id || (0, _UniqueComponentId.default)();
+    return _this3;
   }
 
   _createClass(TieredMenu, [{
@@ -97512,29 +97621,31 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "show",
     value: function show(event) {
-      var _this2 = this;
+      var _this4 = this;
 
       this.target = event.currentTarget;
       var currentEvent = event;
-      this.setState({
-        visible: true
-      }, function () {
-        if (_this2.props.onShow) {
-          _this2.props.onShow(currentEvent);
-        }
+      this.locator.recompute(function () {
+        _this4.setState({
+          visible: true
+        }, function () {
+          if (_this4.props.onShow) {
+            _this4.props.onShow(currentEvent);
+          }
+        });
       });
     }
   }, {
     key: "hide",
     value: function hide(event) {
-      var _this3 = this;
+      var _this5 = this;
 
       var currentEvent = event;
       this.setState({
         visible: false
       }, function () {
-        if (_this3.props.onHide) {
-          _this3.props.onHide(currentEvent);
+        if (_this5.props.onHide) {
+          _this5.props.onHide(currentEvent);
         }
       });
     }
@@ -97575,12 +97686,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentClickListener",
     value: function bindDocumentClickListener() {
-      var _this4 = this;
+      var _this6 = this;
 
       if (!this.documentClickListener) {
         this.documentClickListener = function (event) {
-          if (_this4.props.popup && _this4.state.visible && !_this4.container.contains(event.target)) {
-            _this4.hide(event);
+          if (_this6.props.popup && _this6.state.visible && !_this6.container.contains(event.target)) {
+            _this6.hide(event);
           }
         };
 
@@ -97598,12 +97709,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentResizeListener",
     value: function bindDocumentResizeListener() {
-      var _this5 = this;
+      var _this7 = this;
 
       if (!this.documentResizeListener) {
         this.documentResizeListener = function (event) {
-          if (_this5.state.visible) {
-            _this5.hide(event);
+          if (_this7.state.visible) {
+            _this7.hide(event);
           }
         };
 
@@ -97621,12 +97732,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindScrollListener",
     value: function bindScrollListener() {
-      var _this6 = this;
+      var _this8 = this;
 
       if (!this.scrollHandler) {
         this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
-          if (_this6.state.visible) {
-            _this6.hide(event);
+          if (_this8.state.visible) {
+            _this8.hide(event);
           }
         });
       }
@@ -97652,8 +97763,8 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderElement",
-    value: function renderElement() {
-      var _this7 = this;
+    value: function renderElement(direction) {
+      var _this9 = this;
 
       var className = (0, _ClassNames.classNames)('p-tieredmenu p-component', {
         'p-tieredmenu-overlay': this.props.popup
@@ -97671,7 +97782,7 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
         onExit: this.onExit
       }, /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(el) {
-          return _this7.container = el;
+          return _this9.container = el;
         },
         id: this.id,
         className: className,
@@ -97680,14 +97791,28 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_TieredMenuSub.TieredMenuSub, {
         model: this.props.model,
         root: true,
-        popup: this.props.popup
+        popup: this.props.popup,
+        direction: direction
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      var element = this.renderElement();
-      if (this.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, this.props.appendTo);else return element;
+      var _this10 = this;
+
+      return /*#__PURE__*/_react.default.createElement(LocationRetrieved, {
+        ref: function ref(instance) {
+          if (instance != null) {
+            _this10.locator = instance;
+          }
+        }
+      }, function (_ref) {
+        var direction = _ref.direction;
+
+        var element = _this10.renderElement(direction);
+
+        if (_this10.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, _this10.props.appendTo);else return element;
+      });
     }
   }]);
 
@@ -97851,6 +97976,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onItemClick",
     value: function onItemClick(event, item) {
+      var _item$items$length, _item$items;
+
       if (item.disabled) {
         event.preventDefault();
         return;
@@ -97867,21 +97994,27 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         });
       }
 
-      if (this.props.root) {
-        if (item.items) {
-          if (this.state.activeItem && item === this.state.activeItem) {
-            this.setState({
-              activeItem: null
-            });
-          } else {
-            this.setState({
-              activeItem: item
-            });
-          }
+      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) {
+        if (this.state.activeItem && item === this.state.activeItem) {
+          this.setState({
+            activeItem: null
+          });
+        } else {
+          this.setState({
+            activeItem: item
+          });
         }
       }
 
-      if (!item.items) {
+      var target = event.target;
+      var isKeyboardEvent = event.clientX === 0 && event.clientY === 0;
+
+      if (isKeyboardEvent) {
+        setTimeout(function () {
+          var el = target.parentElement.querySelectorAll('.p-submenu-list > .p-menuitem')[0].querySelector('button');
+          el.focus();
+        }, 0);
+      } else if (!item.items) {
         this.onLeafClick();
       }
     }
@@ -97938,8 +98071,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onChildItemKeyDown",
     value: function onChildItemKeyDown(event, childListItem) {
-      //left
-      if (event.which === 37) {
+      var leftArrow = event.which === 37;
+      var escape = event.which === 27;
+
+      if (leftArrow || escape) {
         this.setState({
           activeItem: null
         });
@@ -98011,7 +98146,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           onLeafClick: this.onLeafClick,
           popup: this.props.popup,
           onKeyDown: this.onChildItemKeyDown,
-          parentActive: item === this.state.activeItem
+          parentActive: item === this.state.activeItem,
+          direction: this.props.direction
         });
       }
 
@@ -98039,10 +98175,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           return _this3.onItemMouseEnter(event, item);
         },
         role: "none"
-      }, /*#__PURE__*/_react.default.createElement("a", {
-        href: item.url || '#',
+      }, /*#__PURE__*/_react.default.createElement("button", {
         className: linkClassName,
-        target: item.target,
         role: "menuitem",
         "aria-haspopup": item.items != null,
         onClick: function onClick(event) {
@@ -98088,7 +98222,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         },
         className: className,
         role: this.props.root ? 'menubar' : 'menu',
-        "aria-orientation": "horizontal"
+        "aria-orientation": "horizontal",
+        style: {
+          left: this.props.direction === 'left' ? '-100%' : '100%'
+        }
       }, submenu);
     }
   }]);
@@ -98115,7 +98252,8 @@ _defineProperty(TieredMenuSub, "propTypes", {
   popup: _propTypes.default.bool,
   onLeafClick: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
-  parentActive: _propTypes.default.bool
+  parentActive: _propTypes.default.bool,
+  direction: _propTypes.default.string
 });
 
 /***/ }),

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

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
 interface IProps {
@@ -115,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                     onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
                 },
             ]
-            
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -319,19 +315,17 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
                                 <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
-
                             <TableList
                                 className='sd-margin-y--4'
                                 dragAndDrop
                                 addItem
                                 array={this.state.array}
-                                itemsDropdown={[
+                                itemsDropdown={() => [
                                     { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
                                     { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
                                     { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
                                 ]}
-                                onClick={() => false}
-                            />   
+                            />
 
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>