@ember-eui/core 5.0.0-alpha.3 → 5.0.0-alpha.4

package/addon/components/eui-tabbed-content/index.hbs

@@ -1,45 +1,32 @@
-{{#let
-  (unique-id)
-  (optional @onTabClick)
-  (arg-or-default @autoFocus 'initial')
-  (use-state
-    (get-tab-id
-      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
-    )
-  )
-  as |id onTabClick autoFocus selectedTab|
-}}
+{{#let (unique-id) as |rootId|}}
   <div class={{@className}} ...attributes>
     <EuiTabs
-      @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
       @size={{@size}}
-      as |EuiTab|
+      {{on "focus" this.initializeFocus}}
+      {{did-insert this.setTabsRef}}
     >
       {{#each @tabs as |tab|}}
         <EuiTab
           @id={{tab.id}}
-          aria-controls={{id}}
-          @selectedTabId={{selectedTab.value}}
-          @onClick={{pipe selectedTab.setState (fn onTabClick tab)}}
-          @focusFn={{selectedTab.setState}}
+          aria-controls={{rootId}}
+          @isSelected={{eq tab.id this.selectedTab.id}}
           @disabled={{tab.disabled}}
+          {{on "click" (fn this.onTabClick tab)}}
         >
           {{tab.name}}
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      {{#if currentTab}}
-        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-          {{#if (has-block "selectedTabContent")}}
-            {{yield currentTab to="selectedTabContent"}}
-          {{else}}
-            {{currentTab.content}}
-          {{/if}}
-        </div>
-      {{/if}}
+    {{#let (find-by "id" this.selectedTab.id @tabs) as |currentTab|}}
+      <div role="tabpanel" id={{rootId}} aria-labelledby={{currentTab.id}}>
+        {{#if (has-block "selectedTabContent")}}
+          {{yield currentTab to="selectedTabContent"}}
+        {{else}}
+          {{currentTab.content}}
+        {{/if}}
+      </div>
     {{/let}}
   </div>
 {{/let}}

package/addon/components/eui-tabbed-content/index.ts

@@ -0,0 +1,134 @@
+import { scheduleOnce } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { CommonArgs } from '../common';
+
+export interface EuiTabbedContentTab {
+  id: string;
+  name: string;
+  content: Component;
+}
+
+export type EuiTabbedContentArgs = CommonArgs & {
+  /**
+   * When tabbing into the tabs, set the focus on `initial` for the first tab,
+   * or `selected` for the currently selected tab. Best use case is for inside of
+   * overlay content like popovers or flyouts.
+   */
+  autoFocus?: 'initial' | 'selected';
+  /**
+   * Choose `default` or alternative `condensed` display styles
+   */
+  display?: string;
+  /**
+   * Evenly stretches each tab to fill the horizontal space
+   */
+  expand?: boolean;
+  /**
+   * Use this prop to set the initially selected tab while letting the tabbed content component
+   * control selection state internally
+   */
+  initialSelectedTab?: EuiTabbedContentTab;
+  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;
+  /**
+   * Use this prop if you want to control selection state within the owner component
+   */
+  selectedTab?: EuiTabbedContentTab;
+  size?: string;
+  /**
+   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
+   * The name property (a node) is also required to display to the user.
+   */
+  tabs: EuiTabbedContentTab[];
+};
+
+export default class EuiTabbedContentComponent extends Component<EuiTabbedContentArgs> {
+  @tracked selectedTabId;
+  @tracked inFocus: boolean = false;
+  tabsRef?: Element;
+
+  get autoFocus() {
+    return this.args.autoFocus || 'initial';
+  }
+
+  constructor(owner: unknown, args: EuiTabbedContentArgs) {
+    super(owner, args);
+
+    const { initialSelectedTab, selectedTab, tabs } = this.args;
+
+    // Only track selection state if it's not controlled externally.
+    if (!selectedTab) {
+      this.selectedTabId =
+        (initialSelectedTab && initialSelectedTab.id) || tabs[0].id;
+    }
+  }
+
+  get selectedTab() {
+    const { selectedTab: externalSelectedTab, tabs } = this.args;
+    return (
+      externalSelectedTab ||
+      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)
+    );
+  }
+
+  setTabsRef = (element: Element) => {
+    this.tabsRef = element;
+    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
+    this.tabsRef.addEventListener('focusout' as 'blur', this.removeFocus);
+  };
+
+  willDestroy(): void {
+    super.willDestroy();
+    if (this.tabsRef) {
+      this.tabsRef.removeEventListener('focusout' as 'blur', this.removeFocus);
+    }
+  }
+
+  removeFocus = (blurEvent: FocusEvent) => {
+    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
+    const currentTarget = blurEvent.currentTarget! as HTMLElement;
+    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;
+    if (currentTarget.contains(relatedTarget) === false) {
+      this.inFocus = true;
+    }
+  };
+
+  onTabClick = (selectedTab: EuiTabbedContentTab) => {
+    const { onTabClick, selectedTab: externalSelectedTab } = this.args;
+
+    if (onTabClick) {
+      onTabClick(selectedTab);
+    }
+
+    // Only track selection state if it's not controlled externally.
+    if (!externalSelectedTab) {
+      this.selectedTabId = selectedTab.id;
+      const focusTab = () => {
+        this.focusTab();
+      };
+      scheduleOnce('afterRender', this, focusTab);
+    }
+  };
+
+  focusTab = () => {
+    if (this.tabsRef) {
+      const targetTab: HTMLDivElement | null = this.tabsRef.querySelector(
+        `#${this.selectedTabId}`
+      );
+      targetTab!.focus();
+    }
+  };
+
+  initializeFocus = () => {
+    if (!this.inFocus && this.autoFocus === 'selected') {
+      // Must wait for setState to finish before calling `.focus()`
+      // as the focus call triggers a blur on the first tab
+      this.inFocus = true;
+
+      const focusTab = () => {
+        this.focusTab();
+      };
+      scheduleOnce('afterRender', this, focusTab);
+    }
+  };
+}

package/docs/navigation/tabs-demo/demo1.md

@@ -1,36 +1,27 @@
 ---
-order: 4
+order: 1
 ---
 
-# Tab sizes
 
 <EuiText>
-<p><strong>EuiTabs</strong> allow a <EuiCode>size</EuiCode> prop. In general you should always use the default (medium) size. The small size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of <a href="#/layout/page-header"><strong>EuiPageHeader</strong></a>.</p>
-<p>You can also use the <EuiCode>expand</EuiCode> prop to evenly stretch each tab horizontally.</p>
+<p><strong>EuiTabs</strong> is a wrapping component that requires <strong>EuiTab</strong> components as direct children. You control the displayed contents and current state through props on EuiTab like <EuiCode>isSelected</EuiCode> and <EuiCode>onClick</EuiCode>.</p><p>Use the <EuiCode>prepend</EuiCode> and <EuiCode>append</EuiCode> tab props to add content before and after the tab label respectively.</p>
 </EuiText>
 
 ```hbs template
-<div>
-  <EuiPopover
-    @ownFocus={{true}}
-    @isOpen={{this.popover}}
-    @anchorPosition='downLeft'
-    @closePopover={{set this 'popover' false}}
-  >
-    <:button>
-      <EuiButton
-        @iconType='arrowDown'
-        @iconSide='right'
-        {{on 'click' (set this 'popover' true)}}
-      >
-        Show Popover
-      </EuiButton>
-    </:button>
-    <:content>
-      <EuiTabbedContent @tabs={{this.tabsItems1}} />
-    </:content>
-  </EuiPopover>
-</div>
+<EuiTabs>
+  {{#each this.tabs as |tab|}}
+    <EuiTab
+      @isSelected={{eq tab.id this.selectedTab.id}}
+      {{on 'click' (set this 'selectedTab' tab)}}
+    >
+      {{tab.name}}
+    </EuiTab>
+  {{/each}}
+</EuiTabs>
+<EuiSpacer />
+<EuiText>
+  {{this.selectedTab.content}}
+</EuiText>
 ```
 
 ```js component
@@ -39,54 +30,38 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DemoTabsComponent extends Component {
-  @tracked tabsIndex2 = 0;
-
+  @tracked selectedTab = 0;
+  @tracked tabs = [
+    {
+      id: 'cobalt--id',
+      name: 'Cobalt',
+      content:
+        ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+    },
+    {
+      id: 'dextrose--id',
+      name: 'Dextrose',
+      content:
+        'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+    },
+    {
+      id: 'hydrogen--id',
+      name: 'Hydrogen',
+      prepend: 'heatmap',
+      disabled: true,
+      content:
+        'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+    },
+    {
+      id: 'monosodium_glutammate--id',
+      name: 'Monosodium Glutamate',
+      content:
+        ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+    }
+  ];
   constructor() {
     super(...arguments);
-
-    this.tabsItems1 = [
-      {
-        id: 'example1',
-        name: 'Example 1',
-        content: 'Example 1 content.'
-      },
-      {
-        id: 'example2',
-        name: 'Example 2',
-        content: 'Example 2 content.'
-      }
-    ];
-
-    this.tabsItems2 = [
-      {
-        id: 'one',
-        name: 'Click me 1!',
-        content: "Same ol' 1 content."
-      },
-      {
-        id: 'two',
-        name: 'Click me 2!',
-        content: "Same ol' 2 content."
-      },
-      {
-        id: 'three',
-        name: 'Click me 3!',
-        content: "Same ol' 3 content."
-      }
-    ];
-  }
-
-  sayMyName(tab) {
-    alert(`I am ${tab.name || tab.id}`);
-  }
-
-  @action
-  cycleTabs() {
-    this.tabsIndex2++;
-
-    if (this.tabsIndex2 >= this.tabsItems2.length) {
-      this.tabsIndex2 = 0;
-    }
+    this.selectedTab = this.tabs[0];
   }
 }
 ```

package/docs/navigation/tabs-demo/demo2.md

@@ -1,15 +1,46 @@
 ---
-order: 1
+order: 2
 ---
 
-# Tabbed Content
+# Tab sizes
 
 <EuiText>
-<p><strong>EuiTabbedContent</strong> makes it easier to associate tabs with content based on the selected tab. Use the <EuiCode>initialSelectedTab</EuiCode> prop to specify which tab to initially select.</p>
+<p><strong>EuiTabs</strong> allow a <EuiCode>size</EuiCode> prop. In general you should always use the default (medium) size. The small size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of <a href="#/layout/page-header"><strong>EuiPageHeader</strong></a>.</p><p>You can also use the <EuiCode>expand</EuiCode> prop to evenly stretch each tab horizontally.</p>
 </EuiText>
 
 ```hbs template
-<EuiTabbedContent @tabs={{this.tabsItems1}} />
+<div>
+  <EuiPopover
+    @ownFocus={{true}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        {{on 'click' (set this 'popover' true)}}
+      >
+        Show Popover
+      </EuiButton>
+    </:button>
+    <:content>
+      <EuiTabs>
+        {{#each this.tabs as |tab|}}
+          <EuiTab
+            @isSelected={{eq this.selectedTab.id tab.id}}
+            {{on 'click' (set this 'selectedTab' tab)}}
+          >
+            {{tab.name}}
+          </EuiTab>
+        {{/each}}
+      </EuiTabs>
+      <EuiSpacer />
+      {{this.selectedTab.content}}
+    </:content>
+  </EuiPopover>
+</div>
 ```
 
 ```js component
@@ -18,39 +49,25 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DemoTabsComponent extends Component {
-  @tracked tabsIndex2 = 0;
+  @tracked selectedTab;
 
   constructor() {
     super(...arguments);
 
-    this.tabsItems1 = [
+    this.tabs = [
       {
-        id: 'cobalt--id',
-        name: 'Cobalt',
-        content:
-          ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+        id: 'example1',
+        name: 'Example 1',
+        content: 'Example 1 content.'
       },
       {
-        id: 'dextrose--id',
-        name: 'Dextrose',
-        content:
-          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
-      },
-      {
-        id: 'hydrogen--id',
-        name: 'Hydrogen',
-        prepend: 'heatmap',
-        disabled: true,
-        content:
-          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
-      },
-      {
-        id: 'monosodium_glutammate--id',
-        name: 'Monosodium Glutamate',
-        content:
-          ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+        id: 'example2',
+        name: 'Example 2',
+        content: 'Example 2 content.'
       }
     ];
+
+    this.selectedTab = this.tabs[0];
   }
 }
 ```

package/docs/navigation/tabs-demo/demo3.md

@@ -1,25 +1,54 @@
 ---
-order: 2
+order: 3
 ---
 
-# Controlled tabbed content
+# Bottom border
 
 <EuiText>
-<p>You can also use the <code class="euiCode" data-code-language="text">selectedTab</code> and <code class="euiCode" data-code-language="text">onTabClick</code> props to take complete control over tab selection. This can be useful if you want to change tabs based on user interaction with another part of the UI.</p>
+<p>The <EuiCode>bottomBorder</EuiCode> helps to separate the tab group from the content below and is on by default. However, some components like <a href="/docs/core/docs/layout/flyout">flyouts</a> already provide borders which can act as the divider. In this case you can turn the border off with <EuiCode>bottomBorder<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></EuiCode>.</p>
 </EuiText>
 
 ```hbs template
-<EuiButton @color='primary' {{on 'click' this.cycleTabs}}>
-  Next tab
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show tabs flyout header
 </EuiButton>
-Outer selected tab:
-{{get (object-at this.tabsIndex2 this.tabsItems1) 'name'}}
-<EuiTabbedContent
-  @tabs={{this.tabsItems1}}
-  @selectedTab={{object-at this.tabsIndex2 this.tabsItems1}}
-/>
-
-<EuiSpacer />
+{{#if this.flyoutOpen}}
+  <EuiFlyout @onClose={{this.closeFlyout}}>
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='m'>
+        <h2>Flyout header</h2>
+      </EuiTitle>
+      <EuiSpacer @size='s' />
+      <EuiText @color='subdued'>
+        Put navigation items in the header, and cross tab actions in a footer.
+      </EuiText>
+      <EuiSpacer @size='s' />
+      <EuiTabs @bottomBorder={{false}} style='margin-bottom: -24px;'>
+        {{#each this.tabs as |tab|}}
+          <EuiTab
+            {{on 'click' (set this 'selectedTab' tab)}}
+            @isSelected={{eq this.selectedTab.id tab.id}}
+          >
+            {{tab.name}}
+          </EuiTab>
+        {{/each}}
+      </EuiTabs>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+      {{this.selectedTab.content}}
+    </EuiFlyoutBody>
+    <EuiFlyoutFooter>
+      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
+        <EuiButton {{on 'click' this.closeFlyout}}>
+          Cancel
+        </EuiButton>
+        <EuiButton @fill={{true}} {{on 'click' this.closeFlyout}}>
+          Send
+        </EuiButton>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  </EuiFlyout>
+{{/if}}
 ```
 
 ```js component
@@ -28,12 +57,24 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DemoTabsComponent extends Component {
-  @tracked tabsIndex2 = 0;
+  @tracked selectedTab;
+
+  @tracked flyoutOpen = false;
+
+  @action
+  openFlyout() {
+    this.flyoutOpen = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyoutOpen = false;
+  }
 
   constructor() {
     super(...arguments);
 
-    this.tabsItems1 = [
+    this.tabs = [
       {
         id: 'cobalt--id',
         name: 'Cobalt',
@@ -61,19 +102,8 @@ export default class DemoTabsComponent extends Component {
           ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
       }
     ];
-  }
-
-  sayMyName(tab) {
-    alert(`I am ${tab.name || tab.id}`);
-  }
-
-  @action
-  cycleTabs() {
-    this.tabsIndex2++;
 
-    if (this.tabsIndex2 >= this.tabsItems2.length) {
-      this.tabsIndex2 = 0;
-    }
+    this.selectedTab = this.tabs[0];
   }
 }
 ```

package/docs/navigation/tabs-demo/demo4.md

@@ -1,36 +1,27 @@
 ---
-order: 3
+order: 4
 ---
 
-# Bottom border
+# Tabbed content
 
 <EuiText>
-<p>The <EuiCode>bottomBorder</EuiCode> helps to separate the tab group from the content below and is on by default. However, some components like <a href="#/layout/flyout">flyouts</a> already provide borders which can act as the divider. In this case you can turn the border off with <EuiCode>bottomBorder<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></EuiCode>.</p>
+<p><strong>EuiTabbedContent</strong> makes it easier to associate tabs with content based on the selected tab. Use the <EuiCode>initialSelectedTab</EuiCode> prop to specify which tab to initially select.</p>
 </EuiText>
 
 ```hbs template
-<EuiButton {{on 'click' this.openFlyout}}>
-  Show tabs flyout header
-</EuiButton>
-{{#if this.flyoutOpen}}
-  <EuiFlyout @onClose={{this.closeFlyout}}>
-    <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size='l'>Flyout header</EuiTitle>
-      <EuiTabbedContent @tabs={{this.tabsItems1}} />
-    </EuiFlyoutHeader>
-    <EuiFlyoutBody />
-    <EuiFlyoutFooter>
-      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
-        <EuiButton {{on 'click' this.closeFlyout}}>
-          Cancel
-        </EuiButton>
-        <EuiButton @fill={{true}} {{on 'click' this.closeFlyout}}>
-          Send
-        </EuiButton>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
-  </EuiFlyout>
-{{/if}}
+<EuiTabbedContent
+  @tabs={{this.tabs}}
+  @initialSelectedTab={{object-at this.tabs 1}}
+  @autoFocus='selected'
+  @onTabClick={{fn this.sayMyName}}
+>
+  <:selectedTabContent as |selected|>
+    <EuiSpacer />
+    <EuiText>
+      {{selected.content}}
+    </EuiText>
+  </:selectedTabContent>
+</EuiTabbedContent>
 ```
 
 ```js component
@@ -41,22 +32,10 @@ import { tracked } from '@glimmer/tracking';
 export default class DemoTabsComponent extends Component {
   @tracked tabsIndex2 = 0;
 
-  @tracked flyoutOpen = false;
-
-  @action
-  openFlyout() {
-    this.flyoutOpen = true;
-  }
-
-  @action
-  closeFlyout(flyout) {
-    this.flyoutOpen = false;
-  }
-
   constructor() {
     super(...arguments);
 
-    this.tabsItems1 = [
+    this.tabs = [
       {
         id: 'cobalt--id',
         name: 'Cobalt',

package/docs/navigation/tabs-demo/demo5.md

@@ -0,0 +1,86 @@
+---
+order: 5
+---
+
+# Controlled tabbed content
+
+<EuiText>
+<p>You can also use the <code class="euiCode" data-code-language="text">selectedTab</code> and <code class="euiCode" data-code-language="text">onTabClick</code> props to take complete control over tab selection. This can be useful if you want to change tabs based on user interaction with another part of the UI.</p>
+</EuiText>
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' this.cycleTabs}}
+  @iconType='arrowRight'
+  @iconSide='right'
+>
+  Cycle through tabs
+</EuiButton>
+Outer selected tab:
+{{this.selectedTab.name}}
+<EuiTabbedContent @tabs={{this.tabs}} @selectedTab={{this.selectedTab}}>
+  <:selectedTabContent as |selected|>
+    <EuiSpacer />
+    <EuiText>
+      {{selected.content}}
+    </EuiText>
+  </:selectedTabContent>
+</EuiTabbedContent>
+
+<EuiSpacer />
+```
+
+```js component
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked selectedTab;
+
+  constructor() {
+    super(...arguments);
+
+    this.tabs = [
+      {
+        id: 'cobalt--id',
+        name: 'Cobalt',
+        content:
+          ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+      },
+      {
+        id: 'dextrose--id',
+        name: 'Dextrose',
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'hydrogen--id',
+        name: 'Hydrogen',
+        prepend: 'heatmap',
+
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'monosodium_glutammate--id',
+        name: 'Monosodium Glutamate',
+        content:
+          ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+      }
+    ];
+
+    this.selectedTab = this.tabs[0];
+  }
+
+  @action
+  cycleTabs() {
+    const tabs = this.tabs;
+    const selectedTabIndex = tabs.indexOf(this.selectedTab);
+    const nextTabIndex =
+      selectedTabIndex < tabs.length - 1 ? selectedTabIndex + 1 : 0;
+    this.selectedTab = tabs[nextTabIndex];
+  }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.4",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "7cef4c765d72e1182023a9df43570d99007504f9"
+  "gitHead": "1b88258ed3a11388d0e4f8557f5744b91ede144e"
 }

package/addon/helpers/get-tab-id.ts

@@ -1,23 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-
-export function getTabId([tabOrId]: [Tab | string | number]):
-  | string
-  | number
-  | undefined {
-  if (tabOrId === undefined) {
-    return;
-  }
-
-  if (typeof tabOrId === 'string' || typeof tabOrId === 'number') {
-    return tabOrId;
-  }
-
-  assert(
-    'The passed `tab` object needs to have the `id` property',
-    tabOrId.id !== undefined
-  );
-  return tabOrId.id;
-}
-
-export default helper(getTabId);

package/app/helpers/get-tab-id.js

@@ -1 +0,0 @@
-export { default, getTabId } from '@ember-eui/core/helpers/get-tab-id';