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

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/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/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/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/styles/ember-eui.css

@@ -18,14 +18,6 @@
   font-weight: 500;
 }
 
-.euiMarkdownEditor--fullHeight {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-}
-
-.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
-  display: none;
+.ember-basic-dropdown-content {
+  z-index: 99999
 }

package/addon/utils/breakpoint.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { keysOf } from '../components/common';
+
+export type EuiBreakpointSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export type EuiBreakpoints = {
+  /**
+   * Set the minimum window width at which to start to the breakpoint
+   */
+  [key in EuiBreakpointSize]: number;
+};
+
+export const BREAKPOINTS: EuiBreakpoints = {
+  xl: 1200,
+  l: 992,
+  m: 768,
+  s: 575,
+  xs: 0
+};
+
+export const BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
+
+/**
+ * Given the current `width` and an object of `EuiBreakpoints`,
+ * this function returns the string that is the name of the breakpoint key
+ * that is less than or equal to the width
+ *
+ * @param {number} width Can either be the full window width or any width
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+ * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
+ */
+export function getBreakpoint(
+  width: number,
+  breakpoints: EuiBreakpoints = BREAKPOINTS
+): EuiBreakpointSize | undefined {
+  // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+  return keysOf(BREAKPOINTS).find((key) => breakpoints[key] <= width);
+}
+
+/**
+ * Given the current `width` and a max breakpoint key,
+ * this function returns true or false if the `width` falls within the max
+ * breakpoint or any breakpoints below
+ *
+ * @param {number} width Can either be the full window width or any width
+ * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+export function isWithinMaxBreakpoint(
+  width: number,
+  max: EuiBreakpointSize | number,
+  breakpoints: EuiBreakpoints = BREAKPOINTS
+): boolean {
+  if (typeof max === 'number') {
+    return width <= max;
+  } else {
+    const currentBreakpoint = getBreakpoint(width, breakpoints);
+    return currentBreakpoint
+      ? breakpoints[currentBreakpoint] <= breakpoints[max]
+      : false;
+  }
+}
+
+/**
+ * Given the current `width` and a min breakpoint key,
+ * this function returns true or false if the `width` falls within the min
+ * breakpoint or any breakpoints above
+ *
+ * @param {number} width Can either be the full window width or any width
+ * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+export function isWithinMinBreakpoint(
+  width: number,
+  min: EuiBreakpointSize | number,
+  breakpoints: EuiBreakpoints = BREAKPOINTS
+): boolean {
+  if (typeof min === 'number') {
+    return width >= min;
+  } else {
+    const currentBreakpoint = getBreakpoint(width, breakpoints);
+    return currentBreakpoint
+      ? breakpoints[currentBreakpoint] >= breakpoints[min]
+      : false;
+  }
+}
+
+/**
+ * Given the current `width` and an array of breakpoint keys,
+ * this function returns true or false if the `width` falls within
+ * any of the named breakpoints
+ *
+ * @param {number} width Can either be the full window width or any width
+ * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+export function isWithinBreakpoints(
+  width: number,
+  sizes: EuiBreakpointSize[],
+  breakpoints: EuiBreakpoints = BREAKPOINTS
+): boolean {
+  const currentBreakpoint = getBreakpoint(width, breakpoints);
+  return currentBreakpoint ? sizes.includes(currentBreakpoint) : false;
+}

package/addon/utils/code/utils.ts

@@ -0,0 +1,304 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { listLanguages, highlight, AST, RefractorNode } from 'refractor';
+import { CommonArgs } from '../../components/common';
+
+/**
+ * Utils shared between EuiCode and EuiCodeBlock
+ */
+
+export type EuiCodeSharedProps = CommonArgs & {
+  /**
+   * Sets the syntax highlighting for a specific language
+   * @see [https://prismjs.com/#supported-languages](https://prismjs.com/#supported-languages) for options
+   */
+  language?: string;
+  transparentBackground?: boolean;
+};
+
+export const SUPPORTED_LANGUAGES = listLanguages();
+export const DEFAULT_LANGUAGE = 'text';
+
+export const checkSupportedLanguage = (language: string): string => {
+  return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
+};
+
+const createDocument = () => {
+  return document;
+};
+
+const attributes = [
+  'src',
+  'alt',
+  'href',
+  'target',
+  'title',
+  'data-line-number',
+  'aria-hidden',
+  'style'
+];
+export interface DynamicComponent {}
+
+export const getHtmlContent = (nodes: RefractorNode[]) => {
+  const document = createDocument();
+  let components: DynamicComponent[] = [];
+
+  const toElements = (parent: HTMLElement, nodes: RefractorNode[] = []) => {
+    nodes?.forEach((node) => {
+      let el = toElement(node);
+      if (el) {
+        parent.appendChild(el);
+      }
+    });
+    return parent;
+  };
+
+  const createElement = (
+    name: string,
+    node: RefractorNode,
+    className?: string
+  ) => {
+    let element = document.createElement(name);
+    if (isAstElement(node)) {
+      let properties = node.properties;
+      let classNames = [];
+      if (properties) {
+        if (properties.className) {
+          classNames.push(...(properties.className as string[]));
+        }
+        for (let key in properties) {
+          if (attributes.includes(key)) {
+            let value = properties[key];
+            if (key === 'style') {
+              Object.keys(value).forEach((k: string) => {
+                //@ts-ignore
+                element.style[k] = `${value[k]}`;
+              });
+            } else {
+              element.setAttribute(key, value as string);
+            }
+          } else {
+            // temporary
+            if (key !== 'className') {
+              console.warn('Unmapped node property', key);
+            }
+          }
+        }
+      }
+      if (className) {
+        classNames.push(className);
+      }
+      if (classNames.length) {
+        element.setAttribute('class', classNames.join(' '));
+      }
+    }
+    return element;
+  };
+
+  const toElement = (node: RefractorNode) => {
+    if (isAstElement(node)) {
+      let { type } = node;
+      if (type === 'element') {
+        let element = createElement(node.tagName, node);
+        return toElements(element, node.children);
+      } else if (type === 'text') {
+        //@ts-ignore
+        return document.createTextNode(node.value);
+      } else if (type === 'component') {
+        let { inline } = node.properties;
+        let element = createElement(inline ? 'span' : 'div', node, 'component');
+        let { _children, ...properties } = node.properties;
+        let content = toElements(document.createElement('span'), node.children);
+        components.push({
+          element,
+          content,
+          ...properties
+        });
+        return element;
+      }
+    }
+    return;
+  };
+
+  const element = toElements(document.createElement('div'), nodes);
+
+  return {
+    element: element,
+    components
+  };
+};
+
+export const isAstElement = (node: RefractorNode): node is AST.Element =>
+  node.hasOwnProperty('type') &&
+  (node.type === 'element' || node.type === 'text');
+
+/**
+ * Line utils specific to EuiCodeBlock
+ */
+
+type ExtendedRefractorNode = RefractorNode & {
+  lineStart?: number;
+  lineEnd?: number;
+};
+
+interface LineNumbersConfig {
+  start: number;
+  show: boolean;
+  highlight?: string;
+}
+
+// Approximate width of a single digit/character
+const CHAR_SIZE = 8;
+const $euiSizeS = 8;
+
+// Creates an array of numbers from comma-separeated
+// string of numbers or number ranges using `-`
+// (e.g., "1, 3-10, 15")
+export const parseLineRanges = (ranges: string) => {
+  const highlights: number[] = [];
+  ranges
+    .replace(/\s/g, '')
+    .split(',')
+    .forEach((line: string) => {
+      if (line.includes('-')) {
+        const range = line.split('-').map(Number);
+        for (let i = range[0]; i <= range[1]; i++) {
+          highlights.push(i);
+        }
+      } else {
+        highlights.push(Number(line));
+      }
+    });
+  return highlights;
+};
+
+const addLineData = (
+  nodes: ExtendedRefractorNode[],
+  data: { lineNumber: number }
+): ExtendedRefractorNode[] => {
+  return nodes.reduce<ExtendedRefractorNode[]>((result, node) => {
+    const lineStart = data.lineNumber;
+    if (node.type === 'text') {
+      if (!node.value.match(/\r\n?|\n/)) {
+        node.lineStart = lineStart;
+        node.lineEnd = lineStart;
+        result.push(node);
+      } else {
+        const lines = node.value.split(/\r\n?|\n/);
+        lines.forEach((line, i) => {
+          const num = i === 0 ? data.lineNumber : ++data.lineNumber;
+          result.push({
+            type: 'text',
+            value: i === lines.length - 1 ? line : `${line}\n`,
+            lineStart: num,
+            lineEnd: num
+          });
+        });
+      }
+      return result;
+    }
+
+    if (node.children && node.children.length) {
+      const children = addLineData(node.children, data);
+      const first = children[0];
+      const last = children[children.length - 1];
+      const start = first.lineStart ?? lineStart;
+      const end = last.lineEnd ?? lineStart;
+      if (start !== end) {
+        children.forEach((node) => {
+          result.push(node);
+        });
+      } else {
+        node.lineStart = start;
+        node.lineEnd = end;
+        node.children = children;
+        result.push(node);
+      }
+      return result;
+    }
+
+    result.push(node);
+    return result;
+  }, []);
+};
+
+function wrapLines(
+  nodes: ExtendedRefractorNode[],
+  options: { showLineNumbers: boolean; highlight?: string }
+) {
+  const highlights = options.highlight
+    ? parseLineRanges(options.highlight)
+    : [];
+  const grouped: ExtendedRefractorNode[][] = [];
+  nodes.forEach((node) => {
+    const lineStart = node.lineStart! - 1;
+    if (grouped[lineStart]) {
+      grouped[lineStart].push(node);
+    } else {
+      grouped[lineStart] = [node];
+    }
+  });
+  const wrapped: RefractorNode[] = [];
+  const digits = grouped.length.toString().length;
+  const width = digits * CHAR_SIZE;
+  grouped.forEach((node, i) => {
+    const lineNumber = i + 1;
+    const classes = ['euiCodeBlock__line'];
+    if (highlights.includes(lineNumber)) {
+      classes.push('euiCodeBlock__line--isHighlighted');
+    }
+    const children: RefractorNode[] = options.showLineNumbers
+      ? [
+          {
+            type: 'element',
+            tagName: 'span',
+            properties: {
+              style: { width: `${width}px` },
+              ['data-line-number']: lineNumber,
+              ['aria-hidden']: true,
+              className: ['euiCodeBlock__lineNumber']
+            },
+            children: []
+          },
+          {
+            type: 'element',
+            tagName: 'span',
+            properties: {
+              style: {
+                marginLeft: `${width + $euiSizeS}px`,
+                width: `calc(100% - ${width}px)`
+              },
+              className: ['euiCodeBlock__lineText']
+            },
+            children: node
+          }
+        ]
+      : node;
+    wrapped.push({
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: [classes.join(' ')]
+      },
+      children
+    });
+  });
+  return wrapped;
+}
+
+export const highlightByLine = (
+  children: string,
+  language: string,
+  data: LineNumbersConfig
+) => {
+  return wrapLines(
+    addLineData(highlight(children, language), { lineNumber: data.start }),
+    { showLineNumbers: data.show, highlight: data.highlight }
+  );
+};