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

package/addon/components/eui-range-levels/index.ts

@@ -4,7 +4,12 @@ import { assert } from '@ember/debug';
 
 export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
 
-export const LEVEL_COLORS: EuiRangeLevelColor[] = ['primary', 'success', 'warning', 'danger'];
+export const LEVEL_COLORS: EuiRangeLevelColor[] = [
+  'primary',
+  'success',
+  'warning',
+  'danger'
+];
 
 export interface EuiRangeLevel {
   min: number;
@@ -26,10 +31,16 @@ export default class EuiRangeLevelsComponent extends Component<EuiRangeLevelsArg
     const { min, max } = this.args;
     this.args.levels?.forEach?.((level) => {
       if (level.min < min) {
-        assert(`The level min of ${level.min} is lower than the min value of ${min}.`, true);
+        assert(
+          `The level min of ${level.min} is lower than the min value of ${min}.`,
+          true
+        );
       }
       if (level.max > max) {
-        assert(`The level max of ${level.max} is higher than the max value of ${max}.`, true);
+        assert(
+          `The level max of ${level.max} is higher than the max value of ${max}.`,
+          true
+        );
       }
     });
   }

package/addon/components/eui-range-ticks/index.hbs

@@ -5,7 +5,7 @@
 >
   {{#each @tickSequence key="value" as |tickValue|}}
     {{#let
-      (get-range-tick @ticks tickValue @min @max this.percentageWidth) as |derivedState|
+      (get-range-tick @ticks tickValue @min @max this.percentageWidth @trackWidth) as |derivedState|
     }}
       <button
         type="button"
@@ -24,4 +24,4 @@
       </button>
     {{/let}}
   {{/each}}
-</div>
+</div>

package/addon/components/eui-range-track/index.hbs

@@ -1,8 +1,14 @@
 <div
-  class="euiRangeTrack {{if @disabled "euiRangeTrack--disabled"}}"
+  class={{class-names
+    "euiRangeTrack"
+    (if @disabled "euiRangeTrack--disabled")
+    (if @showTicks "euiRangeTrack--hasTicks")
+    (if (and @levels (gt @levels.length 0)) "euiRangeTrack--hasLevels")
+  }}
   style={{if this.derivedState.styles this.derivedState.styles}}
   ...attributes
   {{did-insert (fn this.validateValueIsInStep @max)}}
+  {{did-insert this.registerTrack}}
   {{did-update (fn this.validateValueIsInStep @max) @max}}
   {{did-update (fn this.validateValueIsInStep @max) @min}}
   {{did-update (fn this.validateValueIsInStep @max) @step}}
@@ -14,6 +20,7 @@
       @max={{@max}}
       @min={{@min}}
       @showTicks={{@showTicks}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{#if this.derivedState.tickSequence}}
@@ -27,7 +34,8 @@
       @max={{@max}}
       @interval={{or @tickInterval @step}}
       @onChange={{@onChange}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{yield}}
-</div>
+</div>

package/addon/components/eui-range-track/index.ts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { EuiRangeLevel, LEVEL_COLORS } from '../eui-range-levels';
 import { assert } from '@ember/debug';
 import { isEvenlyDivisibleBy } from '../../utils/number';
@@ -35,14 +36,28 @@ type Styling = {
 };
 
 export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs> {
+  @tracked
+  trackEl: HTMLElement | undefined;
+
+  @action
+  registerTrack(el: HTMLElement) {
+    this.trackEl = el;
+  }
+
   @action
   validateValueIsInStep(value: number): number {
     const { min, max, step } = this.args;
     if (value < min) {
-      assert(`The value of ${value} is lower than the min value of ${min}.`, false);
+      assert(
+        `The value of ${value} is lower than the min value of ${min}.`,
+        false
+      );
     }
     if (value > max) {
-      assert(`The value of ${value} is higher than the max value of ${max}.`, false);
+      assert(
+        `The value of ${value} is higher than the max value of ${max}.`,
+        false
+      );
     }
     // Error out if the value doesn't line up with the sequence of steps
     if (!isEvenlyDivisibleBy(value - min, step !== undefined ? step : 1)) {
@@ -95,7 +110,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
     // Error out if there are too many ticks to render
     if (ticks.length > 20) {
       assert(
-        `The number of ticks to render is too high (${ticks.length}), reduce the interval.`,
+        `The number of ticks to render is too high (${ticks.length}), increase the interval.`,
         true
       );
     }
@@ -105,7 +120,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
   get derivedState(): Styling {
     let tickSequence;
-    let styles;
+    let styles = '';
     const { showTicks, min, max, step, tickInterval, ticks } = this.args;
 
     if (showTicks) {
@@ -114,7 +129,9 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
       // Calculate if any extra margin should be added to the inputWrapper
       // because of longer tick labels on the ends
       const lengthOfMinLabel = String(tickSequence[0]).length;
-      const lenghtOfMaxLabel = String(tickSequence[tickSequence.length - 1]).length;
+      const lenghtOfMaxLabel = String(
+        tickSequence[tickSequence.length - 1]
+      ).length;
       const isLastTickTheMax = tickSequence[tickSequence.length - 1] === max;
       if (lengthOfMinLabel > 2) {
         styles = `margin-left: ${lengthOfMinLabel / 5}em`;
@@ -126,7 +143,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
     return {
       tickSequence,
-      styles: htmlSafe(styles as string)
+      styles: htmlSafe(styles)
     };
   }
 }

package/addon/components/eui-show-for/index.hbs

@@ -0,0 +1,3 @@
+{{#if this.shouldShow}}
+  {{yield}}
+{{/if}}

package/addon/components/eui-show-for/index.ts

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { throttle } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+import { EuiBreakpointSize, getBreakpoint } from '../../utils/breakpoint';
+//@ts-ignore
+import { invokeHelper } from '@ember/helper';
+//@ts-ignore
+import { getValue } from '@glimmer/tracking/primitives/cache';
+import Helper from '@ember/component/helper';
+
+export class CurrentBreakPointHelper extends Helper {
+  @tracked currentBreakpoint: string | undefined;
+  functionToCallOnWindowResize: undefined | (() => void);
+
+  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {
+    this.currentBreakpoint = getBreakpoint(
+      typeof window === 'undefined' ? -Infinity : window.innerWidth
+    );
+
+    this.setupListeners();
+
+    return (
+      sizes === 'all' ||
+      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)
+    );
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.teardown();
+  }
+
+  setupListeners() {
+    this.functionToCallOnWindowResize = () => {
+      const fn = () => {
+        const newBreakpoint = getBreakpoint(window.innerWidth);
+        if (newBreakpoint !== this.currentBreakpoint) {
+          this.currentBreakpoint = newBreakpoint;
+        }
+      };
+      throttle(this, fn, 50);
+    };
+
+    window.addEventListener('resize', this.functionToCallOnWindowResize);
+  }
+
+  teardown() {
+    if (typeof this.functionToCallOnWindowResize === 'function') {
+      window.removeEventListener('resize', this.functionToCallOnWindowResize);
+      this.functionToCallOnWindowResize = undefined;
+    }
+  }
+}
+
+export type EuiHideForBreakpoints = EuiBreakpointSize;
+
+export interface EuiShowForArgs {
+  /**
+   * Required otherwise nothing ever gets returned
+   */
+  children: Component;
+  /**
+   * List of all the responsive sizes to hide the children for.
+   * Array of #EuiBreakpointSize
+   */
+  sizes: EuiHideForBreakpoints[] | 'all' | 'none';
+}
+
+export default class EuiShowForComponent extends Component<EuiShowForArgs> {
+  currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
+    return {
+      positional: [this.args.sizes]
+    };
+  });
+
+  get shouldShow() {
+    return getValue(this.currentBreakpointHelper);
+  }
+}

package/addon/components/eui-side-nav/index.hbs

@@ -1,36 +1,161 @@
-<nav class={{class-names "euiSideNav" (if @isOpenMobile "euiSideNav-isOpenMobile")}} ...attributes>
-  <button
-    type="button"
-    class="euiSideNav__mobileToggle euiLink"
-    {{on "click" (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))}}
-  >
-    <span class="euiSideNav__mobileWrap">
-      <span class="euiSideNav__mobileTitle">
-        {{@mobileTitle}}
-      </span>
-      <EuiIcon @iconClasses="euiSideNav__mobileIcon" @type="apps" @size="m" aria-hidden="true" />
-    </span>
-  </button>
-  <div class="euiSideNav__content">
-    {{#each @items as |item|}}
-      <EuiSideNavItem
-        @selectedItem={{@selectedItem}}
-        @isOpen={{is-item-open item @selectedItem}}
-        @isSelected={{eq item.id item.isSelected}}
-        @isParent={{not (not item.items)}}
-        @icon={{item.icon}}
-        @onClick={{item.onClick}}
-        @href={{item.href}}
-        @className={{item.className}}
-        @rel={{item.rel}}
-        @target={{item.target}}
-        @items={{item.items}}
-        @key={{item.id}}
-        @depth={{0}}
-        @renderItem={{item.renderItem}}
-      >
-        {{item.name}}
-      </EuiSideNavItem>
-    {{/each}}
-  </div>
-</nav>
+{{#let
+  (class-names "euiSideNav" (if @isOpenMobile "euiSideNav-isOpenMobile"))
+  (element (arg-or-default @headingProps.element "h2"))
+  (arg-or-default @headingProps.id (unique-id))
+  (unique-id)
+  (or (has-block "heading") (not (not @heading)))
+  as |classes HeadingElement headingId sideNavContentId hasHeader|
+}}
+  {{#if this.hasMobileVersion}}
+    <EuiShowFor @sizes={{this.mobileBreakpoints}}>
+      <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>
+        <HeadingElement id={{headingId}} class={{@headingProps.className}}>
+          <EuiButtonEmpty
+            type="button"
+            class="euiSideNav__mobileToggle"
+            @contentClasses="euiSideNav__mobileToggleContent"
+            @textClasses="euiSideNav__mobileToggleText"
+            {{on
+              "click"
+              (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))
+            }}
+            @iconType="apps"
+            @iconSide="right"
+            aria-controls={{sideNavContentId}}
+            aria-expanded={{@isOpenMobile}}
+          >
+            {{#if @mobileTitle}}
+              {{@mobileTitle}}
+            {{else if (has-block "heading")}}
+              {{yield to="heading"}}
+            {{else}}
+              {{@heading}}
+            {{/if}}
+          </EuiButtonEmpty>
+        </HeadingElement>
+        <div id={{sideNavContentId}} class={{this.contentClasses}}>
+          {{#each @items as |item|}}
+            {{#let
+              (and (not item.onClick) (not item.href) (not (not item.items)))
+              as |childrenOnly|
+            }}
+              <EuiSideNavItem
+                @selectedItem={{@selectedItem}}
+                @isOpen={{is-item-open item @selectedItem}}
+                @isSelected={{and
+                  (not childrenOnly)
+                  (eq item.id item.isSelected)
+                }}
+                @isParent={{not (not item.items)}}
+                @icon={{item.icon}}
+                @onClick={{item.onClick}}
+                @href={{item.href}}
+                @className={{item.className}}
+                @rel={{item.rel}}
+                @target={{item.target}}
+                @items={{item.items}}
+                @key={{item.id}}
+                @depth={{0}}
+                @renderItem={{item.renderItem}}
+                @disabled={{item.disabled}}
+                @truncate={{item.truncate}}
+                @emphasize={{item.emphasize}}
+                @buttonClassName={{item.buttonClassName}}
+                @childrenOnly={{childrenOnly}}
+              >
+                {{item.name}}
+              </EuiSideNavItem>
+            {{/let}}
+          {{/each}}
+        </div>
+      </nav>
+    </EuiShowFor>
+  {{/if}}
+
+  <EuiHideFor @sizes={{this.mobileBreakpoints}}>
+    <nav
+      aria-labelledby={{if hasHeader headingId}}
+      class={{classes}}
+      ...attributes
+    >
+      {{#if hasHeader}}
+        {{#let
+          (arg-or-default @headingProps.screenReaderOnly false)
+          as |screenReaderOnly|
+        }}
+          {{#if (has-block "heading")}}
+            {{#if screenReaderOnly}}
+              <HeadingElement {{screen-reader-only}}>
+                {{yield to="heading"}}
+              </HeadingElement>
+            {{else}}
+              <EuiTitle
+                class={{class-names
+                  "euiSideNav__heading"
+                  @headingProps.className
+                }}
+                @size="xs"
+              >
+                <HeadingElement>
+                  {{yield to="heading"}}
+                </HeadingElement>
+              </EuiTitle>
+            {{/if}}
+          {{else}}
+            {{#if screenReaderOnly}}
+              <HeadingElement {{screen-reader-only}}>
+                {{@heading}}
+              </HeadingElement>
+            {{else}}
+              <EuiTitle
+                class={{class-names
+                  "euiSideNav__heading"
+                  @headingProps.className
+                }}
+                @size="xs"
+              >
+                {{@heading}}
+              </EuiTitle>
+            {{/if}}
+          {{/if}}
+        {{/let}}
+      {{/if}}
+      <div id={{sideNavContentId}} class={{this.contentClasses}}>
+        {{#each @items as |item|}}
+          {{#let
+            (and (not item.onClick) (not item.href) (not (not item.items)))
+            as |childrenOnly|
+          }}
+            <EuiSideNavItem
+              @selectedItem={{@selectedItem}}
+              @isOpen={{is-item-open item @selectedItem}}
+              @isSelected={{and
+                (not childrenOnly)
+                (eq item.id item.isSelected)
+              }}
+              @isParent={{not (not item.items)}}
+              @icon={{item.icon}}
+              @onClick={{item.onClick}}
+              @href={{item.href}}
+              @className={{item.className}}
+              @rel={{item.rel}}
+              @target={{item.target}}
+              @items={{item.items}}
+              @key={{item.id}}
+              @depth={{0}}
+              @renderItem={{item.renderItem}}
+              @disabled={{item.disabled}}
+              @truncate={{item.truncate}}
+              @emphasize={{item.emphasize}}
+              @buttonClassName={{item.buttonClassName}}
+              @childrenOnly={{childrenOnly}}
+            >
+              {{item.name}}
+            </EuiSideNavItem>
+          {{/let}}
+        {{/each}}
+      </div>
+    </nav>
+  </EuiHideFor>
+
+{{/let}}

package/addon/components/eui-side-nav/index.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+
+export interface EuiSideNavArgs {
+  /**
+   * Required otherwise nothing ever gets returned
+   */
+  children: Component;
+
+  mobileBreakpoints?: string[];
+}
+
+export default class EuiSideNavComponent extends Component<EuiSideNavArgs> {
+  get mobileBreakpoints() {
+    return this.args.mobileBreakpoints || ['xs', 's'];
+  }
+
+  get contentClasses() {
+    return `euiSideNav__content ${this.mobileBreakpoints
+      .map?.((breakpointName) => {
+        return `euiSideNav__contentMobile-${breakpointName}`;
+      })
+      .join(' ')}`;
+  }
+
+  get hasMobileVersion() {
+    return this.mobileBreakpoints?.length > 0;
+  }
+}

package/addon/components/eui-side-nav-item/button/index.hbs

@@ -1,15 +1,27 @@
-<span class="euiSideNavItemButton__content">
-  {{#if @icon}}
-    <EuiIcon
-      @type={{@icon}}
-      @size="m"
-      @iconClasses={{class-names "euiSideNavItemButton__icon" @buttonIconClasses}}
-    />
-  {{/if}}
-  <span class="euiSideNavItemButton__label">
-    {{yield}}
+{{#let (arg-or-default @truncate true) as |truncate|}}
+  <span class="euiSideNavItemButton__content">
+    {{#if @icon}}
+      <EuiIcon
+        @type={{@icon}}
+        @size="m"
+        class={{class-names "euiSideNavItemButton__icon" @buttonIconClasses}}
+      />
+    {{/if}}
+
+    <EuiInnerText as |setRef innerText|>
+      <span
+        class={{class-names
+          "euiSideNavItemButton__label"
+          (if truncate "euiSideNavItemButton__label--truncated")
+        }}
+        {{did-insert setRef}}
+        title={{if truncate innerText}}
+      >
+        {{yield}}
+      </span>
+    </EuiInnerText>
+    {{#if @caret}}
+      <EuiIcon @type="arrowDown" @color="subdued" @size="s" />
+    {{/if}}
   </span>
-  {{#if @caret}}
-    <EuiIcon @type="arrowDown" @color="subdued" @size="s" />
-  {{/if}}
-</span>
+{{/let}}

package/addon/components/eui-side-nav-item/index.hbs

@@ -6,19 +6,24 @@
     (if (and (eq @depth 0) @icon) "euiSideNavItem--rootIcon")
     (if (gt @depth 1) "euiSideNavItem--branch")
     (if @items.length "euiSideNavItem--hasChildItems")
+    (if @emphasize "euiSideNavItem--emphasized")
   }}
 >
   {{#let
     (class-names
       "euiSideNavItemButton"
       (if (or @onClick @href) "euiSideNavItemButton--isClickable")
-      (if (and (gt @depth 0) @isOpen (not @isSelected)) "euiSideNavItemButton-isOpen")
+      (if
+        (and (gt @depth 0) @isOpen (not @isSelected))
+        "euiSideNavItemButton-isOpen"
+      )
       (if @isSelected "euiSideNavItemButton-isSelected")
-      @className
+      @buttonClassName
     )
-    (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected)) as |className caret|
+    (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))
+    as |className caret|
   }}
-    {{#if @href}}
+    {{#if (and @href (not @disabled))}}
       <a
         class={{className}}
         href={{@href}}
@@ -34,10 +39,16 @@
           {{yield}}
         </EuiSideNavItem::Button>
       </a>
-    {{else if @onClick}}
-      <button type="button" class={{className}} {{on "click" @onClick}}>
+    {{else if (or @onClick @disabled)}}
+      <button
+        type="button"
+        class={{className}}
+        disabled={{@disabled}}
+        {{on "click" @onClick}}
+      >
         <EuiSideNavItem::Button
           @icon={{@icon}}
+          @truncate={{@truncate}}
           @buttonIconClasses={{@buttonIconClasses}}
           @caret={{caret}}
         >
@@ -48,6 +59,7 @@
       <div class={{className}}>
         <EuiSideNavItem::Button
           @icon={{@icon}}
+          @truncate={{@truncate}}
           @buttonIconClasses={{@buttonIconClasses}}
           @caret={{caret}}
         >
@@ -59,25 +71,40 @@
   {{#if (or (eq @depth 0) (and @items.length @isOpen))}}
     <div class="euiSideNavItem__items">
       {{#each @items as |item|}}
-        <EuiSideNavItem
-          @selectedItem={{@selectedItem}}
-          @isOpen={{is-item-open item @selectedItem}}
-          @isSelected={{eq item.id @selectedItem}}
-          @isParent={{not (not item.items)}}
-          @icon={{item.icon}}
-          @onClick={{item.onClick}}
-          @href={{item.href}}
-          @className={{item.className}}
-          @rel={{item.rel}}
-          @target={{item.target}}
-          @items={{item.items}}
-          @key={{item.id}}
-          @depth={{add @depth 1}}
-          @name={{item.name}}
-          @renderItem={{item.renderItem}}
-        >
-          {{item.name}}
-        </EuiSideNavItem>
+        {{#let
+          (and
+            (gt @depth 0)
+            (not item.onClick)
+            (not item.href)
+            (not (not item.items))
+          )
+          as |childrenOnly|
+        }}
+          <EuiSideNavItem
+            @selectedItem={{@selectedItem}}
+            @isOpen={{is-item-open item @selectedItem}}
+            @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}}
+            @isParent={{not (not item.items)}}
+            @icon={{item.icon}}
+            @onClick={{item.onClick}}
+            @href={{item.href}}
+            @className={{item.className}}
+            @rel={{item.rel}}
+            @target={{item.target}}
+            @items={{item.items}}
+            @key={{item.id}}
+            @depth={{add @depth 1}}
+            @name={{item.name}}
+            @renderItem={{item.renderItem}}
+            @disabled={{item.disabled}}
+            @truncate={{item.truncate}}
+            @emphasize={{item.emphasize}}
+            @buttonClassName={{item.buttonClassName}}
+            @childrenOnly={{childrenOnly}}
+          >
+            {{item.name}}
+          </EuiSideNavItem>
+        {{/let}}
       {{/each}}
     </div>
   {{/if}}

package/addon/components/eui-split-panel/inner/index.hbs

@@ -0,0 +1,11 @@
+<EuiPanel
+  class="euiSplitPanel__inner"
+  @hasShadow={{arg-or-default @hasShadow false}}
+  @color={{arg-or-default @color "transparent"}}
+  @borderRadius={{arg-or-default @borderRadius "none"}}
+  @hasBorder={{arg-or-default @hasBorder false}}
+  @paddingSize={{@paddingSize}}
+  ...attributes
+>
+  {{yield}}
+</EuiPanel>

package/addon/components/eui-split-panel/outer/index.hbs

@@ -0,0 +1,27 @@
+{{#let
+  (arg-or-default @direction "column")
+  (arg-or-default @responsive (array "xs" "s"))
+  as |direction responsive|
+}}
+  <EuiPanel
+    class={{class-names
+      "euiSplitPanel"
+      (if (eq direction "row") "euiSplitPanel--row")
+      (if this.isResponsive "euiSplitPanel-isResponsive")
+    }}
+    @grow={{arg-or-default @grow false}}
+    @paddingSize={{arg-or-default @paddingSize "none"}}
+    @hasShadow={{@hasShadow}}
+    @color={{@color}}
+    @borderRadius={{@borderRadius}}
+    @hasBorder={{@hasBorder}}
+    {{this.isWithinBreakpointsModifier
+      sizes=responsive
+      isActive=(not (not responsive))
+      setIsWithinBreakpointsValue=(set this "isResponsive")
+    }}
+    ...attributes
+  >
+    {{yield}}
+  </EuiPanel>
+{{/let}}