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

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

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import {
+  EuiBreakpointSize,
+  isWithinBreakpoints
+} from '../../../utils/breakpoint';
+import { modifier } from 'ember-modifier';
+import { tracked } from '@glimmer/tracking';
+
+const isWithinBreakpointsModifier = modifier(function (
+  _element: Element,
+  _pos: unknown[],
+  {
+    sizes,
+    isActive = true,
+    setIsWithinBreakpointsValue
+  }: {
+    sizes: EuiBreakpointSize[];
+    isActive: boolean;
+    setIsWithinBreakpointsValue: (value: boolean) => void;
+  }
+) {
+  function handleResize() {
+    setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
+  }
+
+  if (isActive) {
+    window.removeEventListener('resize', handleResize);
+    window.addEventListener('resize', handleResize);
+    handleResize();
+  }
+
+  return () => window.removeEventListener('resize', handleResize);
+});
+export default class EuiSplitPanelOuterComponent extends Component {
+  isWithinBreakpointsModifier = isWithinBreakpointsModifier;
+  @tracked isResponsive = false;
+}

package/addon/components/eui-step/eui-step-number/index.hbs

@@ -8,14 +8,31 @@
     ...attributes
   >
     {{#if (eq @status "complete")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="check" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="check"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "warning")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="alert" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="alert"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "danger")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="cross" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="cross"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "loading")}}
-      <EuiLoadingSpinner class="euiStepNumber__loader" @size={{if (eq iconSize "s") "l" "xl"}} />
+      <span {{screen-reader-only}}>{{@stepAriaLabel}}</span>
+      <EuiLoadingSpinner
+        class="euiStepNumber__loader"
+        @size={{if (eq iconSize "s") "l" "xl"}}
+      />
     {{else}}
+      <span {{screen-reader-only}}>{{@stepAriaLabel}}</span>
       <span class="euiStepNumber__number" aria-hidden="true">
         {{@number}}
       </span>

package/addon/components/eui-steps/index.hbs

@@ -1,3 +1,9 @@
-<div class="euiSteps" ...attributes>
+<div 
+
+   class={{class-names
+        "euiSteps"
+        status=(arg-or-default @status "incomplete")
+      }}
+ ...attributes>
   {{yield}}
 </div>

package/addon/components/eui-tab/index.hbs

@@ -1,49 +1,63 @@
 {{#let (arg-or-default @id (unique-id)) as |id|}}
-  {{#let
-    (eq @selectedTabId id)
-    (fn @onClick id)
-    (fn (optional @focusFn) id) as |isSelected onClick focusFn|
-  }}
-    {{#if (and @href (not @disabled))}}
-      <a
-        id={{id}}
-        role="tab"
-        aria-selected={{isSelected}}
-        class={{class-names
-          "euiTab"
-          (if isSelected "euiTab-isSelected")
-          (if @disabled "euiTab-isDisabled")
-        }}
-        href={{@href}}
-        disabled={{@disabled}}
-        ...attributes
-        {{on "click" onClick}}
-        {{focus-tab @selectedTabId @disabled focusFn}}
-      >
-        <span class="euiTab__content">
-          {{yield}}
+  {{#if (and @href (not @disabled))}}
+    <a
+      id={{id}}
+      role="tab"
+      aria-selected={{not (not @isSelected)}}
+      class={{class-names
+        "euiTab"
+        (if @isSelected "euiTab-isSelected")
+        (if @disabled "euiTab-isDisabled")
+      }}
+      href={{@href}}
+      disabled={{@disabled}}
+      ...attributes
+    >
+      {{#if (has-block "prepend")}}
+        <span className="euiTab__prepend">
+          {{yield to="prepend"}}
         </span>
-      </a>
-    {{else}}
-      <button
-        id={{id}}
-        role="tab"
-        aria-selected={{isSelected}}
-        type="button"
-        class={{class-names
-          "euiTab"
-          (if isSelected "euiTab-isSelected")
-          (if @disabled "euiTab-isDisabled")
-        }}
-        disabled={{@disabled}}
-        ...attributes
-        {{on "click" onClick}}
-        {{focus-tab @selectedTabId @disabled focusFn}}
-      >
-        <span class="euiTab__content">
-          {{yield}}
+      {{/if}}
+
+      <span class="euiTab__content">
+        {{yield}}
+      </span>
+
+      {{#if (has-block "append")}}
+        <span className="euiTab__append">
+          {{yield to="append"}}
         </span>
-      </button>
-    {{/if}}
-  {{/let}}
-{{/let}}
+      {{/if}}
+    </a>
+  {{else}}
+    <button
+      id={{id}}
+      role="tab"
+      aria-selected={{not (not @isSelected)}}
+      type="button"
+      class={{class-names
+        "euiTab"
+        (if @isSelected "euiTab-isSelected")
+        (if @disabled "euiTab-isDisabled")
+      }}
+      disabled={{@disabled}}
+      ...attributes
+    >
+      {{#if (has-block "prepend")}}
+        <span className="euiTab__prepend">
+          {{yield to="prepend"}}
+        </span>
+      {{/if}}
+
+      <span class="euiTab__content">
+        {{yield}}
+      </span>
+
+      {{#if (has-block "append")}}
+        <span className="euiTab__append">
+          {{yield to="append"}}
+        </span>
+      {{/if}}
+    </button>
+  {{/if}}
+{{/let}}

package/addon/components/eui-tab/index.ts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { scheduleOnce } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
+
+const focusTabModifier = modifier(function focusTab(
+  _element: HTMLElement,
+  [tabId, selectedTabId, isDisabled, focusFn, onFocusFn]: [
+    string | number,
+    Tab,
+    boolean,
+    (...args: unknown[]) => any,
+    (...args: unknown[]) => any
+  ]
+) {
+  if (selectedTabId === undefined && !isDisabled) {
+    scheduleOnce('afterRender', null, focusFn, tabId);
+    scheduleOnce('afterRender', null, onFocusFn, tabId);
+  }
+});
+
+export default class EuiTabComponent extends Component {
+  focusTabModifier = focusTabModifier;
+}

package/addon/components/eui-tabs/index.hbs

@@ -1,8 +1,12 @@
-{{#let (use-state (get-tab-id @selectedTab)) as |selectedTab|}}
+{{#let
+  (if (eq @display "condensed") false (arg-or-default @bottomBorder true))
+  as |bottomBorder|
+}}
   <div
     role="tablist"
     class={{class-names
       (if (arg-or-default @expand false) "euiTabs--expand")
+      (if bottomBorder "euiTabs--bottomBorder")
       @className
       componentName="EuiTabs"
       display=(arg-or-default @display "default")
@@ -10,13 +14,6 @@
     }}
     ...attributes
   >
-    {{yield
-      (component
-        "eui-tab"
-        onClick=selectedTab.setState
-        selectedTabId=selectedTab.value
-        focusFn=selectedTab.setState
-      )
-    }}
+    {{yield}}
   </div>
 {{/let}}

package/addon/components/eui-tool-tip/index.hbs

@@ -7,8 +7,8 @@
     <span
       {{did-insert this.updateAttachTo}}
       {{did-update this.updateAttachTo @attachTo}}
-      {{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
-      {{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
+      {{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
+      {{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
     ></span>
   {{else}}
     <span
@@ -20,12 +20,11 @@
       }}
       {{did-insert this.didInsertAnchor}}
       {{on "mouseover" this.showToolTip}}
-      {{on "keyup" this.onKeyUp}}
-      {{on "focusin" this.showToolTip}}
-      {{on "focusout" this.hideToolTip}}
+      {{on "focusin" this.onFocus}}
+      {{on "focusout" this.onBlur}}
       {{on "mouseout" this.onMouseOut}}
-      {{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
-      {{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
+      {{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
+      {{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
     >
       {{#if hasAnchorBlock}}
         {{yield this.id to="anchor"}}

package/addon/components/eui-tool-tip/index.ts

@@ -22,6 +22,7 @@ interface ToolTipStyles {
   right?: string | 'auto';
   opacity?: string;
   visibility?: 'hidden';
+  display?: 'inlineBlock';
 }
 
 const displayToClassNameMap = {
@@ -39,7 +40,8 @@ const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
   // the tooltip before it is positioned
   opacity: '0',
   // prevent accidental mouse interaction while positioning
-  visibility: 'hidden'
+  visibility: 'hidden',
+  display: 'inlineBlock'
 };
 
 type EuiTooltipArgs = {
@@ -85,6 +87,8 @@ type EuiTooltipArgs = {
    * hidden.
    */
   onMouseOut?: (event: MouseEvent) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 };
 
 export default class EuiToolTip extends Component<EuiTooltipArgs> {
@@ -96,6 +100,7 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
 
   //STATE
   @tracked visible = false;
+  @tracked hasFocus = false;
   @tracked calculatedPosition: ToolTipPositions = this.position;
   @tracked toolTipStyles: ToolTipStyles = DEFAULT_TOOLTIP_STYLES;
   @tracked arrowStyles: undefined | { left: string; top: string };
@@ -123,24 +128,22 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
 
   @action
   setupAttachToHandlers(): void {
-    if (this.attachTo) {
+    if (this._attachTo) {
       this.attachTo?.addEventListener('mousemove', this.showToolTip);
-      this.attachTo?.addEventListener('keyup', this.onKeyUp);
-      this.attachTo?.addEventListener('focusin', this.showToolTip);
+      this.attachTo?.addEventListener('focusin', this.onFocus);
       this.attachTo?.addEventListener('mouseout', this.onMouseOut);
-      this.attachTo?.addEventListener('focusout', this.hideToolTip);
+      this.attachTo?.addEventListener('focusout', this.onBlur);
       this.positionToolTip();
     }
   }
 
   @action
   removeAttachToHandlers(): void {
-    if (this.attachTo) {
+    if (this._attachTo) {
       this.attachTo?.removeEventListener('mousemove', this.showToolTip);
-      this.attachTo?.removeEventListener('keyup', this.onKeyUp);
-      this.attachTo?.removeEventListener('focusin', this.showToolTip);
+      this.attachTo?.removeEventListener('focusin', this.onFocus);
       this.attachTo?.removeEventListener('mouseout', this.onMouseOut);
-      this.attachTo?.removeEventListener('focusout', this.hideToolTip);
+      this.attachTo?.removeEventListener('focusout', this.onBlur);
     }
   }
 
@@ -163,7 +166,6 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
     super.willDestroy();
     this.clearAnimationTimeout();
     this.removeAttachToHandlers();
-    window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
   }
 
   @action
@@ -298,6 +300,18 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
     }
   }
 
+  @action
+  onFocus(): void {
+    this.hasFocus = true;
+    this.showToolTip();
+  }
+
+  @action
+  onBlur(): void {
+    this.hasFocus = false;
+    this.hideToolTip();
+  }
+
   @action
   onMouseOut(event: MouseEvent): void {
     // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
@@ -307,7 +321,9 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
       (this._anchor != null &&
         !this._anchor.contains(event.relatedTarget as Node))
     ) {
-      this.hideToolTip();
+      if (!this.hasFocus) {
+        this.hideToolTip();
+      }
     }
 
     if (this.args.onMouseOut) {

package/addon/helpers/arg-or-default.ts

@@ -8,7 +8,10 @@ import { assert } from '@ember/debug';
  * @property {unknown} 0 - value to be returned if it's defined
  * @property {unknown} 1 - default value to be returned if value is undefined
  */
-export function argOrDefault([value, defaultValue]: [unknown, unknown]): unknown {
+export function argOrDefault([value, defaultValue]: [
+  unknown,
+  unknown
+]): unknown {
   assert('`defaultValue` must be provided', defaultValue !== undefined);
   return value !== undefined ? value : defaultValue;
 }

package/addon/helpers/class-names.ts

@@ -9,8 +9,10 @@ interface IObjectKeys {
 }
 interface Options extends IObjectKeys {
   size: string;
+  side: string;
   paddingSize: string;
   textAlign: string;
+  textStyle: string;
   color: string;
   verticalPosition: string;
   horizontalPosition: string;

package/addon/helpers/eui-palette.ts

@@ -32,6 +32,9 @@ export const PALETTES = {
 
 export type palette_keys = keyof typeof PALETTES;
 
-export default helper(function ([paletteName, steps]: [palette_keys, number]): EuiPalette {
+export default helper(function ([paletteName, steps]: [
+  palette_keys,
+  number
+]): EuiPalette {
   return PALETTES[paletteName](steps);
 });

package/addon/helpers/get-range-tick.ts

@@ -1,19 +1,61 @@
 import { helper } from '@ember/component/helper';
+import { EUI_THUMB_SIZE } from '../utils/range';
 
 export interface EuiRangeTick {
   value: number;
   label: string;
 }
 
-export function getRangeTick([ticks, tickValue, min, max, percentageWidth]: [
-  EuiRangeTick[],
-  number,
-  number,
-  number,
-  number
-]) {
+export function calculateOffset(
+  position: number,
+  value: number,
+  bound: number
+) {
+  const threshold = 30;
+  let offset = value === bound ? 0 : EUI_THUMB_SIZE / 2;
+  if (offset !== 0) {
+    // Estimating offset by eye. Trying to account for range scaling at both ends.
+    offset =
+      position <= threshold ? offset + (1 / position) * threshold : offset;
+    offset =
+      position >= 100 - threshold
+        ? offset - (1 / (100 - position)) * threshold
+        : offset;
+  }
+  return offset;
+}
+
+export function calculateThumbPosition(
+  value: number,
+  min: number,
+  max: number,
+  width: number,
+  thumbSize: number = EUI_THUMB_SIZE
+): number {
+  // Calculate the left position based on value
+  const decimal = (value - min) / (max - min);
+  // Must be between 0-100%
+  let valuePosition = decimal <= 1 ? decimal : 1;
+  valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+  const trackWidth = width ?? 0;
+  const thumbToTrackRatio = thumbSize / trackWidth;
+  const trackPositionScale = (1 - thumbToTrackRatio) * 100;
+
+  return valuePosition * trackPositionScale;
+}
+
+export function getRangeTick([
+  ticks,
+  tickValue,
+  min,
+  max,
+  percentageWidth,
+  trackWidth = 0
+]: [EuiRangeTick[], number, number, number, number, number]) {
   let tickStyle: string = '';
   let customTick;
+
   if (ticks) {
     customTick = ticks.find((o) => o.value === tickValue);
 
@@ -21,7 +63,10 @@ export function getRangeTick([ticks, tickValue, min, max, percentageWidth]: [
       tickStyle = `left: ${((customTick.value - min) / (max - min)) * 100}%;`;
     }
   } else {
-    tickStyle = `width: ${tickStyle} ${percentageWidth}%`;
+    let position = calculateThumbPosition(tickValue, min, max, trackWidth);
+
+    tickStyle = `left: calc(${position}% + ${EUI_THUMB_SIZE / 2}px);`;
+    tickStyle += `width: ${percentageWidth}%;`;
   }
 
   return {

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

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

package/addon/helpers/hex-to-rgb.ts

@@ -25,7 +25,10 @@ import { helper } from '@ember/component/helper';
 export function hexToRgb(hex: string): rgbDef {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, (_m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1);
+  hex = hex.replace(
+    shorthandRegex,
+    (_m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1
+  );
 
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
 

package/addon/helpers/inline-styles.ts

@@ -16,12 +16,16 @@ export function inlineStyles(_: unknown, params: InlineStylesParams) {
   let componentStyles = {};
 
   if (componentName) {
-    assert(`Could not find component ${componentName} in cssMappings.`, cssMappings[componentName]);
+    assert(
+      `Could not find component ${componentName} in cssMappings.`,
+      cssMappings[componentName]
+    );
     assert(
       `Could not find inlineStyles in ${componentName}'s cssMapping.`,
       cssMappings[componentName].inlineStyles
     );
-    componentStyles = cssMappings[componentName].inlineStyles?.(componentArgs) || {};
+    componentStyles =
+      cssMappings[componentName].inlineStyles?.(componentArgs) || {};
   }
 
   let finalProperties: FinalProperties = {
@@ -30,7 +34,10 @@ export function inlineStyles(_: unknown, params: InlineStylesParams) {
   };
 
   for (let property in finalProperties) {
-    if (property === 'background-image' && finalProperties[property] !== 'none') {
+    if (
+      property === 'background-image' &&
+      finalProperties[property] !== 'none'
+    ) {
       finalProperties[property] = `url(${finalProperties[property]})`;
     } else {
       finalProperties[property] = `${finalProperties[property]}`;

package/addon/helpers/is-within-number.ts

@@ -7,7 +7,10 @@ type Comparator = {
   value: number | string;
 };
 
-export function isWithinRange(_: unknown[], { min, max, value }: Comparator): boolean {
+export function isWithinRange(
+  _: unknown[],
+  { min, max, value }: Comparator
+): boolean {
   return isWithin(min, max, value);
 }
 

package/addon/helpers/starts-with.ts

@@ -1,6 +1,8 @@
 import { helper } from '@ember/component/helper';
 
-export function startsWith([needle, word]: [string, string] /*, hash*/): boolean {
+export function startsWith(
+  [needle, word]: [string, string] /*, hash*/
+): boolean {
   return word?.startsWith(needle) || false;
 }
 

package/addon/helpers/unique-id.ts

@@ -13,7 +13,10 @@ interface Identifiable {
  *
  * @param { any } ref
  */
-export function uniqueId(_?: any[], { ref }: { ref?: Identifiable } = {}): string {
+export function uniqueId(
+  _?: any[],
+  { ref }: { ref?: Identifiable } = {}
+): string {
   return isPresent(ref) ? guidFor(ref) : guidFor({});
 }
 

package/addon/initializers/eui-config.ts

@@ -0,0 +1,12 @@
+//@ts-ignore
+import { registerLibrary } from '@ember-eui/core/version';
+// import 'ember-basic-dropdown/vendor/ember-basic-dropdown.css';
+// import '@elastic/eui/dist/eui_theme_amsterdam_light.css';
+
+export function initialize(): void {
+  registerLibrary();
+}
+
+export default {
+  initialize
+};

package/addon/modifiers/mutation-observer.ts

@@ -1,6 +1,9 @@
 import { modifier } from 'ember-modifier';
 
-const hasOwnProperty = function (obj: MutationObserverInit, name: string): boolean {
+const hasOwnProperty = function (
+  obj: MutationObserverInit,
+  name: string
+): boolean {
   return Object.prototype.hasOwnProperty.call(obj, name);
 };
 

package/addon/modifiers/outside-click-detector.ts

@@ -31,7 +31,7 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
       return;
     }
 
-    const event = (e as unknown) as EuiEvent;
+    const event = e as unknown as EuiEvent;
 
     if (
       (event.euiGeneratedBy && event.euiGeneratedBy.includes(this.id)) ||
@@ -78,9 +78,9 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
     // of detector ids that have been encountered;
 
     if (event.hasOwnProperty('euiGeneratedBy')) {
-      ((event as unknown) as EuiEvent).euiGeneratedBy.push(this.id);
+      (event as unknown as EuiEvent).euiGeneratedBy.push(this.id);
     } else {
-      ((event as unknown) as EuiEvent).euiGeneratedBy = [this.id];
+      (event as unknown as EuiEvent).euiGeneratedBy = [this.id];
     }
     if (cb) cb(event);
   }
@@ -88,7 +88,7 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
   @action
   onChildMouseDown(event: MouseEvent): void {
     this.onChildClick(event, (e) => {
-      const nativeEvent = (e as unknown) as EuiEvent;
+      const nativeEvent = e as unknown as EuiEvent;
       this.capturedDownIds = nativeEvent.euiGeneratedBy;
       if (this.args.named.onMouseDown) this.args.named.onMouseDown(e);
       if (this.args.named.onTouchStart) this.args.named.onTouchStart(e);