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

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

@@ -0,0 +1,109 @@
+---
+order: 3
+---
+
+# Bottom border
+
+<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="/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 {{on 'click' this.openFlyout}}>
+  Show tabs flyout header
+</EuiButton>
+{{#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
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked selectedTab;
+
+  @tracked flyoutOpen = false;
+
+  @action
+  openFlyout() {
+    this.flyoutOpen = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyoutOpen = false;
+  }
+
+  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];
+  }
+}
+```

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

@@ -0,0 +1,81 @@
+---
+order: 4
+---
+
+# Tabbed content
+
+<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>
+</EuiText>
+
+```hbs template
+<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
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked tabsIndex2 = 0;
+
+  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.'
+      }
+    ];
+  }
+
+  sayMyName(tab) {
+    alert(`I am ${tab.name || tab.id}`);
+  }
+
+  @action
+  cycleTabs() {
+    this.tabsIndex2++;
+
+    if (this.tabsIndex2 >= this.tabsItems2.length) {
+      this.tabsIndex2 = 0;
+    }
+  }
+}
+```

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/docs/navigation/tabs.md

@@ -1 +1 @@
-# Tabs
+<EuiPageHeader @pageTitle="Tabs"/>

package/docs/utilities/auto-sizer-demo/demo1.md

@@ -0,0 +1,34 @@
+---
+order: 1
+---
+
+# Auto sizer
+
+<EuiText>
+	<p>
+	<strong>EuiAutoSizer</strong> helps components that use virtualized rendering and/or require explicit dimensions to fill all available space in the parent container. See the <EuiLink @href="https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md">react-virtualized</EuiLink> documentation as <strong>EuiAutoSizer</strong> is a port from component for <strong>AutoSizer</strong>.
+  </p>
+</EuiText>
+
+```hbs template
+<div style='height:200px; width: 100%;'>
+  <EuiAutoSizer as |dimensions|>
+    <EuiPanel
+      style='position: absolute; display: flex; align-items:center; justify-content:center; height: {{dimensions.height}}; width: {{dimensions.width}}'
+    >
+      <EuiCode>height:
+        {{dimensions.height}}, width:
+        {{dimensions.width}}</EuiCode>
+    </EuiPanel>
+  </EuiAutoSizer>
+</div>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked copyText = 'I am the text that will be copied';
+}
+```

package/docs/utilities/auto-sizer.md

@@ -0,0 +1 @@
+<EuiPageHeader @pageTitle="Auto sizer"/>

package/docs/utilities/copy-demo/demo1.md

@@ -0,0 +1,37 @@
+---
+order: 1
+---
+
+# Copy
+
+<EuiText>
+	<p>
+	The <strong>EuiCopy</strong> component is a utility for copying text to clipboard. Wrap a function that returns a component. The first argument will be a <EuiCode>copy</EuiCode> function
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFormRow @label='Enter text that will be copied to clipboard'>
+    <EuiFieldText
+      @value={{this.copyText}}
+      {{on 'input' (pick 'target.value' (set this 'copyText'))}}
+    />
+  </EuiFormRow>
+
+  <EuiSpacer @size='m' />
+
+  <EuiCopy @textToCopy={{this.copyText}} as |copy|>
+    <EuiButton {{on 'click' copy}}>Click to copy input text</EuiButton>
+  </EuiCopy>
+</div>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked copyText = 'I am the text that will be copied';
+}
+```

package/docs/utilities/copy-demo/demo2.md

@@ -0,0 +1,70 @@
+---
+	order: 2
+---
+
+# Copy to clipboard function
+
+<EuiText>
+	<p>
+	The function <EuiCode>copyToClipboard</EuiCode> allows you to copy text to the clipboard. It receives an argument of type <EuiCode>string</EuiCode>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiComment>
+  <:username>
+    Gusteau
+  </:username>
+  <:event>
+    added a comment
+  </:event>
+  <:timestamp>
+    on tuesday
+  </:timestamp>
+  <:actions>
+    <EuiToolTip @content={{this.tooltipText}}>
+      <:anchor>
+        <EuiButtonIcon
+          {{did-insert (set this 'buttonRef')}}
+          aria-label='Copy text to clipboard'
+          @color='text'
+          @iconType='copy'
+          @onClick={{onClick}}
+          {{on 'click' this.onClick}}
+          {{on 'blur' (set this 'isTextCopied' false)}}
+        />
+      </:anchor>
+    </EuiToolTip>
+  </:actions>
+  <:body>
+    <EuiText @size='s'>
+      <p>{{this.text}}</p>
+    </EuiText>
+  </:body>
+</EuiComment>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { copyToClipboard } from '@ember-eui/core/utils/copy-to-clipboard';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked isTextCopied = false;
+  buttonRef = null;
+
+  text =
+    'You must be imaginative, strong-hearted. You must try things that may not work, and you must not let anyone define your limits because of where you come from. Your only limit is your soul. What I say is true—anyone can cook… but only the fearless can be great.';
+
+  get tooltipText() {
+    return this.isTextCopied ? 'Text copied to clipboard' : 'Copy Text';
+  }
+
+  onClick = () => {
+    this.buttonRef?.focus?.();
+    copyToClipboard(this.text);
+    this.isTextCopied = true;
+  };
+}
+```

package/docs/utilities/copy.md

@@ -0,0 +1 @@
+<EuiPageHeader @pageTitle="Copy"/>

package/docs/utilities/mutation-observer.md

@@ -1 +1 @@
-# Mutation observer
+<EuiPageHeader @pageTitle="Mutation observer"/>

package/docs/utilities/outside-click-detector.md

@@ -1 +1 @@
-# Outside click detector
+<EuiPageHeader @pageTitle="Outside click detector"/>

package/docs/utilities/overlay-mask.md

@@ -1 +1 @@
-# Overlay mask
+<EuiPageHeader @pageTitle="Overlay mask"/>

package/docs/utilities/portal.md

@@ -1 +1 @@
-# Portal
+<EuiPageHeader @pageTitle="Portal"/>

package/docs/utilities/resize-observer.md

@@ -1 +1 @@
-# Resize observer
+<EuiPageHeader @pageTitle="Resize observer"/>

package/docs/utilities/responsive-demo/demo1.md

@@ -0,0 +1,108 @@
+# EuiShowFor and EuiHideFor
+
+<EuiText>
+	<p>
+		These components will either render or not render their children based on the current window width. Pass an array of named breakpoints to the <EuiCode>sizes</EuiCode> arg to either show or hide their children respectively.
+	</p>
+	<p>
+		The sizing options correlate with the keys in the <EuiCode>EuiBreakpoints</EuiCode> type. The named breakpoint starts at the pixel value provided and ends before the next one.
+	</p>
+	<EuiCodeBlock>
+'xl': 1200px +
+'l': 992px (to 1199px)
+'m': 768px (to 991px)
+'s': 575px (to 767px)
+'xs': 0px (to 574px)
+	</EuiCodeBlock>
+</EuiText>
+
+```hbs template
+<EuiText>
+  <EuiHideFor @sizes='none'>
+    <p>
+      Hiding from
+      <EuiCode>"none"</EuiCode>
+      of the screen sizes
+    </p>
+  </EuiHideFor>
+  <EuiHideFor @sizes={{array 'xs'}}>
+    <p>
+      Hiding from
+      <EuiCode>xs</EuiCode>
+      screens only
+    </p>
+  </EuiHideFor>
+  <EuiHideFor @sizes={{array 'xs' 's'}}>
+    <p>
+      Hiding from
+      <EuiCode>xs, s</EuiCode>
+      screens
+    </p>
+  </EuiHideFor>
+  <EuiHideFor @sizes={{array 'xs' 's' 'm' 'l'}}>
+    <p>
+      Hiding from
+      <EuiCode>xs, s, m, l</EuiCode>
+      screens
+    </p>
+  </EuiHideFor>
+  <EuiHideFor @sizes={{array 'xl'}}>
+    <p>
+      Hiding from
+      <EuiCode>xl</EuiCode>
+      screens only
+    </p>
+  </EuiHideFor>
+
+  <EuiSpacer @size='xxl' />
+
+  <EuiShowFor @sizes="all">
+    <p>
+      Showing for
+      <EuiCode>"all"</EuiCode>
+      of the screen sizes
+    </p>
+  </EuiShowFor>
+  <EuiShowFor @sizes={{array 'xs'}}>
+    <p>
+      Showing for
+      <EuiCode>xs</EuiCode>
+      screens only
+    </p>
+  </EuiShowFor>
+  <EuiShowFor @sizes={{array 'xs' 's'}}>
+    <p>
+      Showing for
+      <EuiCode>xs, s</EuiCode>
+      screens
+    </p>
+  </EuiShowFor>
+  <EuiShowFor @sizes={{array 'xs' 's' 'm' 'l'}}>
+    <p>
+      Showing for
+      <EuiCode>xs, s, m, l</EuiCode>
+      screens
+    </p>
+  </EuiShowFor>
+  <EuiShowFor @sizes={{array 'xl'}}>
+    <p>
+      Showing for
+      <EuiCode>xl</EuiCode>
+      screen only
+    </p>
+  </EuiShowFor>
+  <EuiShowFor @sizes={{array 'm' 'l' 'xl'}}>
+    <p>
+      Showing for
+      <EuiCode>m, l, xl</EuiCode>
+      screen only
+    </p>
+  </EuiShowFor>
+</EuiText>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+
+export default class extends GlimmerComponent {}
+```

package/docs/utilities/responsive.md

@@ -0,0 +1 @@
+<EuiPageHeader @pageTitle="Responsive"/>

package/index.js

@@ -45,14 +45,19 @@ module.exports = {
 
     this.emberEuiOptions.theme = this.emberEuiOptions.theme
       ? this.emberEuiOptions.theme
-      : 'light';
+      : 'amsterdam_light';
 
-    if (this.emberEuiOptions.theme) {
+    if (
+      this.emberEuiOptions.theme &&
+      this.emberEuiOptions.includeCss !== false
+    ) {
       app.import(
         `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
       );
     } else {
-      app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
+      app.import(
+        'node_modules/@elastic/eui/dist/eui_theme_amsterdam_light.min.css'
+      );
     }
 
     this._super.included.apply(this, arguments);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "4.4.0",
+  "version": "5.0.0-alpha.4",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -18,7 +18,8 @@
     "Mario Trujillo",
     "Victor Aguilar",
     "Diego Zubieta",
-    "Gustavo Rodriguez"
+    "Gustavo Rodriguez",
+    "Gerardo Pérez"
   ],
   "directories": {
     "doc": "doc",
@@ -51,10 +52,11 @@
     ]
   },
   "dependencies": {
-    "@elastic/eui": "31.0.0",
+    "@elastic/eui": "41.4.0",
     "@ember/render-modifiers": "^2.0.4",
     "@html-next/vertical-collection": "3.0.0-1",
     "@types/lodash-es": "^4.17.4",
+    "@types/refractor": "^3.0.0",
     "chroma-js": "^2.1.0",
     "ember-auto-import": "^2.4.0",
     "ember-cached-decorator-polyfill": "^0.1.4",
@@ -62,7 +64,9 @@
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.6.0",
+    "ember-element-helper": "^0.5.5",
+    "ember-event-helpers": "^0.1.1",
+    "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^7.0.1",
     "ember-math-helpers": "^2.15.0",
     "ember-modifier": "^3.1.0",
@@ -73,19 +77,19 @@
     "ember-style-modifier": "^0.7.0",
     "ember-svg-jar": "^2.3.4",
     "ember-truth-helpers": "^3.0.0",
-    "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
+    "refractor": "^3.5.0",
     "rehype-raw": "^5.0.0",
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^3.0.2",
     "remark-emoji": "^2.1.0",
-    "remark-highlight.js": "^6.0.0",
     "remark-parse": "^8.0.3",
     "remark-rehype": "^8.0.0",
     "resolve": "^1.13.1",
     "tabbable": "^5.1.5",
     "unified": "^9.2.0",
+    "unist-util-visit": "^2.0.3",
     "vfile": "^4.2.0"
   },
   "peerDependencies": {
@@ -124,6 +128,7 @@
     "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
+    "ember": "^1.0.3",
     "ember-cli": "~4.1.1",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -150,6 +155,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.2.0",
+    "install": "^0.13.0",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -176,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "37fb2ed8242e7f7243bbf6e5a17aa9361e82e7ae"
+  "gitHead": "1b88258ed3a11388d0e4f8557f5744b91ede144e"
 }