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

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/accesibility/cascading-menu-keys.ts

@@ -28,7 +28,14 @@
  * TAB: Normal tabbing navigation is still supported.
  */
 
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ESCAPE, TAB } from '../keys';
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  ESCAPE,
+  TAB
+} from '../keys';
 
 export const cascadingMenuKeys = {
   ARROW_DOWN,

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);
+        }
+        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 }
+  );
+};

package/addon/utils/color/color_palette.ts

@@ -102,7 +102,7 @@ export function colorPalette(
   const stepsLeft = createSteps(hexStart, numColorsLeft);
   const stepsRight = createSteps(hexEnd, numColorsRight);
 
-  return (even && diverging ? stepsLeft.slice(0, stepsLeft.length - 1) : stepsLeft).concat(
-    stepsRight.slice(1)
-  );
+  return (
+    even && diverging ? stepsLeft.slice(0, stepsLeft.length - 1) : stepsLeft
+  ).concat(stepsRight.slice(1));
 }

package/addon/utils/color/eui_palettes.ts

@@ -96,7 +96,8 @@ export const euiPaletteColorBlind = ({
     // Sort the colors based on the color wheel, but shifting the values based on sortShift
     base = [...base].sort(function (a, b) {
       return (
-        chroma(a).set('hsl.h', sortShift).hsl()[0] - chroma(b).set('hsl.h', sortShift).hsl()[0]
+        chroma(a).set('hsl.h', sortShift).hsl()[0] -
+        chroma(b).set('hsl.h', sortShift).hsl()[0]
       );
     });
   }
@@ -134,9 +135,13 @@ export const euiPaletteColorBlind = ({
   return colors;
 };
 
-export const euiPaletteColorBlindBehindText = (paletteProps: EuiPaletteColorBlindProps = {}) => {
+export const euiPaletteColorBlindBehindText = (
+  paletteProps: EuiPaletteColorBlindProps = {}
+) => {
   const originalPalette = euiPaletteColorBlind(paletteProps);
-  const newPalette = originalPalette.map((color) => chroma(color).brighten(0.5).hex());
+  const newPalette = originalPalette.map((color) =>
+    chroma(color).brighten(0.5).hex()
+  );
   return newPalette;
 };
 
@@ -160,7 +165,11 @@ export const euiPaletteForStatus = function (steps: number): EuiPalette {
   }
   if (steps <= 3) {
     return euiPalette(
-      [euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightNegativeColor],
+      [
+        euiPaletteColorBlind()[0],
+        euiPaletteColorBlind()[5],
+        lightNegativeColor
+      ],
       steps,
       true
     );
@@ -196,7 +205,11 @@ export const euiPaletteComplimentary = function (steps: number): EuiPalette {
     return [euiPaletteColorBlind()[1]];
   }
 
-  return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
+  return euiPalette(
+    [euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]],
+    steps,
+    true
+  );
 };
 
 export const euiPaletteNegative = function (steps: number): EuiPalette {
@@ -236,5 +249,9 @@ export const euiPaletteGray = function (steps: number): EuiPalette {
     return ['#98a2b3'];
   }
 
-  return euiPalette(['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'], steps, false);
+  return euiPalette(
+    ['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'],
+    steps,
+    false
+  );
 };

package/addon/utils/css-mappings/eui-avatar.ts

@@ -1,6 +1,8 @@
 import { isColorDark } from '../../helpers/is-color-dark';
 import { hexToRgb } from '../../helpers/hex-to-rgb';
 import { euiPaletteColorBlindBehindText } from '../../utils/color/eui_palettes';
+import { isValidHex } from '../../helpers/is-valid-hex';
+import { assert, warn } from '@ember/debug';
 
 export const baseClass = 'euiAvatar';
 export const VIS_COLORS = euiPaletteColorBlindBehindText();
@@ -19,30 +21,70 @@ export const typeMapping = {
 
 export function inlineStyles({
   name,
-  color
+  color,
+  imageUrl,
+  initials
 }: {
   name: string;
   color: string;
   iconColor: string;
+  imageUrl?: string;
+  initials?: string;
 }): Styling {
   let assignedColor = color;
+  // let iconCustomColor = iconColor;
+  let avatarStyle: {
+    backgroundColor?: string;
+    color?: string;
+    backgroundImage?: string;
+  } = {};
+
+  checkValidInitials(initials);
 
   const isNamedColor = color === 'plain' || color === null;
 
+  if (imageUrl) {
+    avatarStyle.backgroundImage = `url(${imageUrl})`;
+  }
+
   if (!isNamedColor) {
-    if (name && !assignedColor) {
-      assignedColor = VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
-    }
+    checkValidColor(color);
+
+    assignedColor =
+      color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
+
     const textColor = isColorDark(...hexToRgb(assignedColor || 'base'))
       ? '#FFFFFF'
       : '#000000';
-    return {
-      'background-color': assignedColor,
-      color: textColor
-    };
+
+    avatarStyle.backgroundColor = assignedColor;
+    avatarStyle.color = textColor;
+    return avatarStyle;
   }
 
-  return {};
+  return avatarStyle;
+}
+
+export const checkValidColor = (color: string | 'plain' | null) => {
+  const validHex = (color && isValidHex(color)) || color === 'plain';
+  if (color && !validHex) {
+    assert(
+      'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value',
+      true
+    );
+  }
+};
+
+function checkValidInitials(initials?: string) {
+  // Must be a string of 1 or 2 characters
+  if (initials && initials.length > 2) {
+    warn(
+      'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.',
+      {
+        id: 'EuiAvatar-initials-excedeed'
+      }
+    );
+  }
 }
 
 const mapping: ComponentMapping = {

package/addon/utils/css-mappings/eui-badge.ts

@@ -8,7 +8,7 @@ export const VIS_COLORS = euiPaletteColorBlindBehindText();
 export const colorToHexMap = {
   default: '#d3dae6',
   primary: VIS_COLORS[1],
-  secondary: VIS_COLORS[0],
+  success: VIS_COLORS[0],
   accent: VIS_COLORS[2],
   warning: VIS_COLORS[5],
   danger: VIS_COLORS[9]
@@ -22,7 +22,11 @@ export type ColorType = EuiBadgeColorType | string;
 
 export const baseClass = 'euiBadge';
 
-export function inlineStyles({ badgeColor }: { badgeColor: ColorType }): Styling {
+export function inlineStyles({
+  badgeColor
+}: {
+  badgeColor: ColorType;
+}): Styling {
   let textColor = null;
   let colorHex = 'default';
 

package/addon/utils/css-mappings/eui-beta-badge.ts

@@ -0,0 +1,22 @@
+export const baseClass = 'euiBetaBadge';
+
+export const colorMapping = {
+  accent: `${baseClass}--accent`,
+  subdued: `${baseClass}--subdued`,
+  hollow: `${baseClass}--hollow`
+};
+
+export const sizeMapping = {
+  s: `${baseClass}--small`,
+  m: ''
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    color: colorMapping,
+    size: sizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-bottom-bar.ts

@@ -7,10 +7,17 @@ const paddingSizeMapping = {
   l: `${baseClass}--paddingLarge`
 };
 
+const positionTypeMapping = {
+  fixed: `${baseClass}--fixed`,
+  sticky: `${baseClass}--sticky`,
+  static: `${baseClass}--static`
+};
+
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    paddingSize: paddingSizeMapping
+    paddingSize: paddingSizeMapping,
+    positionType: positionTypeMapping
   }
 };
 

package/addon/utils/css-mappings/eui-button-empty.ts

@@ -1,18 +1,18 @@
 export const baseClass = 'euiButtonEmpty';
 
 const colorMapping = {
-  text: `${baseClass}--text`,
+  primary: `${baseClass}--primary`,
   danger: `${baseClass}--danger`,
-  warning: `${baseClass}--warning`,
+  text: `${baseClass}--text`,
   ghost: `${baseClass}--ghost`,
-  primary: `${baseClass}--primary`,
+  warning: `${baseClass}--warning`,
   success: `${baseClass}--success`
 };
 
 const sizeMapping = {
   xs: `${baseClass}--xSmall`,
   s: `${baseClass}--small`,
-  l: `${baseClass}--large`
+  m: ''
 };
 
 const flushMapping = {