Save progress on a spike for a lower-level API

addon/components/basic-select/content.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class BasicSelectContent extends Component {
+}

addon/components/basic-select/trigger.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class BasicSelectTrigger extends Component {
+}

addon/components/power-select.js

@@ -496,7 +496,7 @@ export default class PowerSelect extends Component {
     if (match !== undefined) {
       if (this.storedAPI.isOpen) {
         this.storedAPI.actions.highlight(match, e);
-        this.storedAPI.actions.scrollTo(match, e);
+        this.storedAPI.actions.scrollTo(match, this.storedAPI, e);
       } else {
         this.storedAPI.actions.select(match, e);
       }

addon/components/power-select/options.js

@@ -80,7 +80,7 @@ export default class Options extends Component {
       });
     }
     if (role !== 'group') {
-      this.args.select.actions.scrollTo(this.args.select.highlighted);
+      this.args.select.actions.scrollTo(this.args.select.highlighted, this.args.select);
     }
   }
 

addon/templates/components/basic-select.hbs

@@ -0,0 +1,50 @@
+<BasicDropdown
+  @horizontalPosition={{@horizontalPosition}}
+  @destination={{@destination}}
+  @initiallyOpened={{@initiallyOpened}}
+  @matchTriggerWidth={{this.matchTriggerWidth}}
+  @preventScroll={{or @preventScroll false}}
+  @onClose={{this.handleClose}}
+  @onOpen={{this.handleOpen}}
+  @renderInPlace={{@renderInPlace}}
+  @verticalPosition={{@verticalPosition}}
+  @disabled={{@disabled}}
+  @calculatePosition={{@calculatePosition}}
+  ...attributes as |dropdown|>
+  {{#let (assign dropdown (hash
+    selected=this.selected
+    highlighted=this.highlighted
+    options=this.options
+    results=this.results
+    resultsCount=this.resultsCount
+    loading=this.loading
+    isActive=this.isActive
+    searchText=this.searchText
+    lastSearchedText=this.lastSearchedText
+    actions=(assign dropdown.actions this._publicAPIActions)
+  )) (concat "ember-power-select-options-" dropdown.uniqueId) as |select listboxId|}}
+    {{#let (assign select (
+      hash
+      Trigger=(
+        component
+        "basic-select/trigger"
+        select=select
+        Trigger=(component "power-select/trigger" select=select)
+      )
+      Content=(
+        component
+        "basic-select/content"
+        select=select
+      )
+      Options=(
+        component
+        "power-select/options"
+        select=select
+        options=select.results
+        groupIndex=""
+      )
+    )) as |publicAPI|}}
+      {{yield publicAPI}}
+    {{/let}}
+  {{/let}}
+</BasicDropdown>

addon/templates/components/basic-select/content.hbs

@@ -0,0 +1,3 @@
+<@select.Content>
+  {{yield}}
+</@select.Content>

addon/templates/components/basic-select/trigger.hbs

@@ -0,0 +1,30 @@
+<@select.Trigger class="ember-power-select-trigger"
+  {{!-- @eventType={{or @eventType "mousedown"}}
+  {{did-insert this._updateOptions @options}}
+  {{did-update this._updateOptions @options}}
+  {{did-insert this._updateSelected @selected}}
+  {{did-update this._updateSelected @selected}}
+  {{did-update this._registerAPI publicAPI}}
+  {{did-update this._performSearch this.searchText}}
+  {{on "keydown" this.handleTriggerKeydown}}
+  {{on "focus" this.handleFocus}}
+  {{on "blur" this.handleBlur}}
+  class="ember-power-select-trigger {{@triggerClass}}{{if publicAPI.isActive " ember-power-select-trigger--active"}}"
+  aria-describedby={{@ariaDescribedBy}}
+  aria-invalid={{@ariaInvalid}}
+  aria-label={{@ariaLabel}}
+  aria-labelledby={{@ariaLabelledBy}}
+  aria-required={{@required}}
+  role={{or @triggerRole "button"}}
+  title={{@title}}
+  id={{@triggerId}}
+  tabindex={{and (not @disabled) (or @tabindex "0")}} --}}
+  >
+  <@Trigger as |opt term|>
+    {{#if (has-block)}}
+      {{yield opt term}}
+    {{else}}
+      {{opt}}
+    {{/if}}
+  </@Trigger>
+</@select.Trigger>

app/components/basic-select.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/components/basic-select';

app/components/basic-select/content.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/components/basic-select/content';

app/components/basic-select/trigger.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/components/basic-select/trigger';

app/templates/components/basic-select.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/templates/components/basic-select';

app/templates/components/basic-select/content.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/templates/components/basic-select/content';

app/templates/components/basic-select/trigger.js

@@ -0,0 +1 @@
+export { default } from 'ember-power-select/templates/components/basic-select/trigger';

tests/dummy/app/templates/playground.hbs

@@ -9,3 +9,17 @@
   {{city}}
 </PowerSelect>
 
+<h3>Example of basic-select</h3>
+<BasicSelect
+  @options={{this.cities}}
+  @selected={{this.destination}}
+  @onChange={{fn (mut this.destination)}} as |select|>
+  <select.Trigger as |opt|>
+    {{opt}}
+  </select.Trigger>
+  <select.Content>
+    <select.Options as |option select|>
+      {{option}}
+    </select.Options>
+  </select.Content>
+</BasicSelect>

tests/integration/components/basic-select-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | basic-select', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<BasicSelect />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <BasicSelect>
+        template block text
+      </BasicSelect>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/basic-select/content-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | basic-select/content', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<BasicSelect::Content />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <BasicSelect::Content>
+        template block text
+      </BasicSelect::Content>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/basic-select/trigger-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | basic-select/trigger', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<BasicSelect::Trigger />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <BasicSelect::Trigger>
+        template block text
+      </BasicSelect::Trigger>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/power-select/public-actions-test.js

@@ -665,7 +665,7 @@ module('Integration | Component | Ember Power Select (Public actions)', function
       </PowerSelect>
     `);
 
-    run(() => this.selectAPI.actions.scrollTo('three'));
+    run(() => this.selectAPI.actions.scrollTo('three', this.selectAPI));
   });
 
   test('The given `scrollTo` function is invoked when a multiple select wants to scroll to an element', async function(assert) {
@@ -684,7 +684,7 @@ module('Integration | Component | Ember Power Select (Public actions)', function
       </PowerSelectMultiple>
     `);
 
-    run(() => this.selectAPI.actions.scrollTo('three'));
+    run(() => this.selectAPI.actions.scrollTo('three', this.selectAPI));
   });
 });