fix(ui5-shellbar): do not duplicate popover menu items

[vladitasev]

The _menuPopoverItems metadata property had a wrong type and a wrong default value. When the default value is an object, in this case [], whenever there is a type mismatch, the default value is returned: return propDefaultValue; in UI5Element.js. However, if the default value is an object, it's passed by reference and when the components work with it (f.e. push items as is here), the defaultValue is updated every time. Thus items are duplicated again and again.

In addition, to prevent this from happening in the future, some more metadata checks are added:

• type can no longer be Array
• properties of type equal to Object, or with multiple: true, cannot have a default value at all. The default value can only be {} or [] respectively, and provided by the framework.

In addition, the check for Boolean properties was wrong, a leftover from the time when Boolean was denoted by a string "boolean".

[MarcusNotheis]

Looks good to me, I was not able to reproduce the issue.

[MarcusNotheis]

While looking on the code again I would have another question on the following lines from the ShellBar constructor: Is there any specific reason why you copy the text content fo the menuItems into the private aggregation? Wouldn't it be easier to just use menuItems slot as popover content?

this._header = {
  press: (event) => {
    if (this.menuItems.length) {
      this._menuPopoverItems = [];
      this.menuItems.forEach((item) => {
        this._menuPopoverItems.push(item.textContent);
      });
      this.updateStaticAreaItemContentDensity();
      this.menuPopover.openBy(this.shadowRoot.querySelector('.ui5-shellbar-menu-button'));
    }
  },
};

[vladitasev]

@MarcusNotheis The reason is that since RC.6 all popups, opened by other components, are in a ui5-static-area-item component on top body level. Before that, they were parts of the higher-order components, hence it was possible to transitively slot children to them: shellbar slots menu items to the popover. However, ever since the popovers were detached from components and moved to the static area, naturally children, slotted to say shellbar, cannot be transitively slotted to something outside of its DOM. Therefore the only option is to go for workarounds. We are currently improving the "cloning" logic so that it's completely transparent for applications.

The reason to move all popups to a static area is a specific HTML/CSS behavior that many developers find unintiutive, but nonetheless is by the specifications and this is how all browsers currently behave. It is that elements, positioned with position: fixed are shifted if some HTML element in DOM tree above them, has transform. Therefore the only reliable way in HTML to position an element to an arbitrary element, without risks of overflow: hidden cuts or shifting due to transform somewhere in the DOM tree above, remains to have a top-level (body) static area and render popups there.