EPS submenu

components.power-select-custom-group.js

import Ember from 'ember';

export default Ember.Component.extend({
  disabled: Ember.computed.reads('group.disabled'),
  groupName: Ember.computed.reads('group.groupName'),
  cancelClose: false,
  calculatePosition(trigger, content) {
    let { top, left, width, height } = trigger.getBoundingClientRect();
    let { width: contentWidth,height: contentHeight } = content.getBoundingClientRect();
    let style = {
      left: left - contentWidth,
      top: top +  window.pageYOffset + (height / 2) - (contentHeight / 2) + 25
    };
    return { style };
  },
  actions: {

    onTriggerMouseEnter(trigger) {
      this.set('cancelClose', false);
      trigger.actions.open();
    },
    onContentMouseEnter(trigger) {
      this.set('cancelClose', true);
    },
    onContentMouseLeave(trigger) {
      trigger.actions.close();
    },
    onTriggerMouseLeave(trigger) {
      Ember.run.later((id) => {
        if(this.get('_state') !== "destroying") {
          if(!this.get('cancelClose')) {
            trigger.actions.close();
          }
          this.set('cancelClose', false);
        }
      },trigger, 100);
    },
    onClose(trigger) {

    },
    onOpen(trigger) {
      // Highlight first submenu item
      this.get('select').actions.highlight(this.get('group.options.firstObject'));
    }
  }
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  options: [
    'Item One',
    'Item Two',
    {groupName: 'Group One', options: [
    		'G1 - Sub Item One',
    		'G1 - Sub Item Two',
    	  'G1 - Sub Item Three',
  		]
		},
    {groupName: 'Group Two', options: [
    		'G2 - Sub Item One',
    		'G2 - Sub Item Two',
    	  'G2 - Sub Item Three',
  		]
		},
    'Item Three',
    'Item Four',
    'Item Five',
     {groupName: 'Group Three', options: [
    		'G3 - Sub Item One',
    		'G3 - Sub Item Two',
    	  'G3 - Sub Item Three',
  		]
		},
                                       
  ]
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.power-wrapper {
 	width: 15em;
  display: block;
  float: right;
}

.ember-power-select-group {
 	background-color: #e8f0ff; 
}
.content-bootstrap-feel {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  padding: 5px;
  margin: 2px 0 0;
}

.arrow-right-content {
  margin-left: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.arrow-right-content:after, .arrow-right-content:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow-right-content:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}
.arrow-right-content:before {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0.15);
  border-width: 11px;
  margin-top: -11px;
}

templates.application.hbs

<h1>Ember Power Select sub-menus</h1>
<br>
<br>
<div class='power-wrapper'>
  {{#power-select
    options=options
    groupComponent="power-select-custom-group"
    selected=selectedItem
    onchange=(action (mut selectedItem))
    as |opt|
  }}
    {{opt}}
  {{/power-select}}
</div>
<br>
<br>
<div id="ember-basic-dropdown-wormhole"></div>

templates.components.power-select-custom-group.hbs

<li class="ember-power-select-group" aria-disabled={{ember-power-select-true-string-if-present disabled}} role="option">

{{#basic-dropdown
  onClose=(action "onClose")
  onOpen=(action "onOpen")
  renderInPlace=false
  matchTriggerWidth=false
  calculatePosition=calculatePosition as |dd|}}
  {{#dd.trigger
    onMouseEnter=(action "onTriggerMouseEnter")
    onMouseLeave=(action "onTriggerMouseLeave")
    }}
    <span class="ember-power-select-group-name">
      {{groupName}}
    </span>
  {{/dd.trigger}}

  {{#dd.content
    class="content-bootstrap-feel arrow-right-content"
    onMouseEnter=(action "onContentMouseEnter")
    onMouseLeave=(action "onContentMouseLeave")
    }}
      {{#component 'power-select/options'
      select=(readonly select)
      options=(readonly group.options)
      class="ember-power-select-options"
      as |opt|
    	}}
    	{{opt}}
    {{/component}}
  {{/dd.content}}
{{/basic-dropdown}}

</li>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-power-select": "1.7.2"
  }
}