BUG: When Style Manager is in another div, the message "Select an element before using Style Manager" is not showing

I used this code to solve it:

const showStylesSector = editor => {
  const stylesButton = editor.Panels.getButton('panel-sidebar-header', 'show-styles');
  const layersButton = editor.Panels.getButton('panel-sidebar-header', 'show-layers');

  // Disable this feature if the layers manager is active.
  if (!layersButton.attributes.active) {
    stylesButton.set('active', 1);
  }
};

editor.on('component:selected', () => {
  showStylesSector(editor);
});

This is not what I want, my issue is before any element is selected so before the event "component:selected" is trigerred. I temporarily fixed it by selecting an element on editor load but it is not what I really want

editor.on('load', () => {
    editor.select(editor.getWrapper().find('#entry-point')[0])
});

If you're using the StyleManager in a custom element you have to handle that state on your own.

<div class="sm-wrapper">
  <div id="styles"></div><!-- here is where you append the style manager -->
  <div class="sm-empty-state">
     Select an element
  </div>
</div>

// use `component:toggled` as `component:selected` is not triggered if the selection is empty
editor.on('component:toggled', () => {
 if (editor.getSelected()) {
  // show style manager, hide empty state
 } else {
 // show empty state, hide style manager
 }
});