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

package/addon/utils/css-mappings/eui-page-body.ts

@@ -0,0 +1,25 @@
+export const baseClass = 'euiPageBody';
+
+export const paddingSizeMapping = {
+  none: '',
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+export const borderRadiusMapping = {
+  none: `${baseClass}--borderRadiusNone`,
+  s: `${baseClass}--borderRadiusSmall`,
+  m: `${baseClass}--borderRadiusMedium`,
+  l: `${baseClass}--borderRadiusLarge`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    borderRadiusSize: borderRadiusMapping,
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-page-content-body.ts

@@ -0,0 +1,17 @@
+export const baseClass = 'euiPageContentBody';
+
+export const paddingSizeMapping = {
+  none: '',
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-page-content.ts

@@ -8,11 +8,17 @@ export const horizontalMapping = {
   center: `${baseClass}--horizontalCenter`
 };
 
+const borderRadiusMapping = {
+  none: `${baseClass}--borderRadiusNone`,
+  m: `${baseClass}--borderRadiusMedium`
+};
+
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
     verticalPosition: verticalMapping,
-    horizontalPosition: horizontalMapping
+    horizontalPosition: horizontalMapping,
+    borderRadius: borderRadiusMapping
   }
 };
 

package/addon/utils/css-mappings/eui-page-header.ts

@@ -0,0 +1,17 @@
+export const baseClass = 'euiPageHeader';
+
+export const paddingSizeMapping = {
+  none: '',
+  s: 'euiPageHeader--paddingSmall',
+  m: 'euiPageHeader--paddingMedium',
+  l: 'euiPageHeader--paddingLarge'
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-page-side-bar.ts

@@ -0,0 +1,17 @@
+export const baseClass = 'euiPageSideBar';
+
+export const paddingSizeMapping = {
+  none: '',
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

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

@@ -1,6 +1,7 @@
 export const baseClass = 'euiPanel';
 
 export const paddingSizeMapping = {
+  none: '',
   s: `${baseClass}--paddingSmall`,
   m: `${baseClass}--paddingMedium`,
   l: `${baseClass}--paddingLarge`

package/addon/utils/css-mappings/eui-progress-data.ts

@@ -2,7 +2,6 @@ const baseClass = 'euiProgress__data';
 
 const dataColorToClassMap = {
   primary: `${baseClass}--primary`,
-  secondary: `${baseClass}--secondary`,
   success: `${baseClass}--success`,
   warning: `${baseClass}--warning`,
   danger: `${baseClass}--danger`,

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

@@ -9,7 +9,6 @@ const sizeToClassMapping = {
 
 const colorToClassMap = {
   primary: `${baseClass}--primary`,
-  secondary: `${baseClass}--secondary`,
   success: `${baseClass}--success`,
   warning: `${baseClass}--warning`,
   danger: `${baseClass}--danger`,
@@ -29,7 +28,6 @@ const colorToClassMap = {
 
 const dataColorToClassMap = {
   primary: `${baseClass}__data--primary`,
-  secondary: `${baseClass}__data--secondary`,
   success: `${baseClass}__data--success`,
   warning: `${baseClass}__data--warning`,
   danger: `${baseClass}__data--danger`,

package/addon/utils/css-mappings/eui-range-levels.ts

@@ -1,17 +1,35 @@
+import {
+  calculateThumbPosition,
+  calculateOffset
+} from '../../helpers/get-range-tick';
+
 export const baseClass = 'euiRangeLevels';
 
 export function inlineStyles({
   min,
   max,
-  level
+  level,
+  trackWidth
 }: {
   min: number;
   max: number;
   level: { min: number; max: number };
+  trackWidth: number;
 }): Record<string, unknown> {
-  const range = level.max - level.min;
-  const width = (range / (max - min)) * 100;
-  return { width: `${width}%` };
+  const left =
+    level.min === min
+      ? 0
+      : calculateThumbPosition(level.min, min, max, trackWidth);
+  const right =
+    level.max === max
+      ? 100
+      : calculateThumbPosition(level.max, min, max, trackWidth);
+  const leftOffset = calculateOffset(left, level.min, min);
+  const rightOffset = calculateOffset(right, level.max, max);
+  return {
+    left: `calc(${left}% + ${leftOffset}px)`,
+    right: `calc(${100 - right}% - ${rightOffset}px)`
+  };
 }
 
 const mapping: ComponentMapping = {

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

@@ -7,7 +7,9 @@ export const displayMapping = {
 
 export const sizeMapping = {
   s: `${baseClass}--small`,
-  m: ''
+  m: '',
+  l: `${baseClass}--large`,
+  xl: `${baseClass}--xLarge`
 };
 
 const mapping: ComponentMapping = {

package/addon/utils/css-mappings/eui-text-color.ts

@@ -3,11 +3,12 @@ export const baseClass = 'euiTextColor';
 export const colorMapping = {
   default: `${baseClass}--default`,
   subdued: `${baseClass}--subdued`,
-  secondary: `${baseClass}--secondary`,
+  success: `${baseClass}--success`,
   accent: `${baseClass}--accent`,
   danger: `${baseClass}--danger`,
   warning: `${baseClass}--warning`,
-  ghost: `${baseClass}--ghost`
+  ghost: `${baseClass}--ghost`,
+  primary: `${baseClass}--primary`
 };
 
 const mapping: ComponentMapping = {

package/addon/utils/css-mappings/index.ts

@@ -25,6 +25,7 @@ import EuiCardSelect from './eui-card-select';
 import EuiHeaderSection from './eui-header-section';
 import EuiHeaderSectionItem from './eui-header-section-item';
 import EuiHeader from './eui-header';
+import EuiHealth from './eui-health';
 import EuiButtonIcon from './eui-button-icon';
 import EuiButton from './eui-button';
 import EuiHorizontalRule from './eui-horizontal-rule';
@@ -52,12 +53,24 @@ import EuiRangeLevels from './eui-range-levels';
 import EuiToolTip from './eui-tool-tip';
 import EuiToast from './eui-toast';
 import EuiGlobalToastList from './eui-global-toast-list';
-import EuiCodeBlockImpl from './eui-code-block-impl';
+import EuiCodeBlock from './eui-code-block';
 import EuiStat from './eui-stat';
+import EuiHeaderLinks from './eui-header-links';
+import EuiLink from './eui-link';
+import EuiBetaBadge from './eui-beta-badge';
+import EuiDescriptionList from './eui-description-list';
+import EuiPageSideBar from './eui-page-side-bar';
+import EuiPageBody from './eui-page-body';
+import EuiPageHeader from './eui-page-header';
+import EuiPageContentBody from './eui-page-content-body';
+import EuiEmptyPrompt from './eui-empty-prompt';
 
 const mapping: Mapping = {
+  EuiDescriptionList,
+  EuiBetaBadge,
+  EuiLink,
   EuiStat,
-  EuiCodeBlockImpl,
+  EuiCodeBlock,
   EuiAccordion,
   EuiIcon,
   EuiModal,
@@ -85,6 +98,7 @@ const mapping: Mapping = {
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeader,
+  EuiHealth,
   EuiButton,
   EuiButtonIcon,
   EuiHorizontalRule,
@@ -111,7 +125,13 @@ const mapping: Mapping = {
   EuiRangeLevels,
   EuiToolTip,
   EuiToast,
-  EuiGlobalToastList
+  EuiGlobalToastList,
+  EuiHeaderLinks,
+  EuiPageSideBar,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContentBody,
+  EuiEmptyPrompt
 };
 
 export default mapping;

package/addon/utils/detect-element-resize.js

@@ -0,0 +1,248 @@
+/**
+ * Detect Element Resize.
+ * https://github.com/sdecima/javascript-detect-element-resize
+ * Sebastian Decima
+ *
+ * Forked from version 0.5.3; includes the following modifications:
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
+ * 5) Added support for injecting custom window object
+ **/
+
+export default function createDetectElementResize(nonce, hostWindow) {
+  // Check `document` and `window` in case of server-side rendering
+  var _window;
+  if (typeof hostWindow !== 'undefined') {
+    _window = hostWindow;
+  } else if (typeof window !== 'undefined') {
+    _window = window;
+  } else if (typeof self !== 'undefined') {
+    _window = self;
+  } else {
+    //eslint-disable-next-line
+    _window = global;
+  }
+
+  var attachEvent =
+    typeof _window.document !== 'undefined' && _window.document.attachEvent;
+
+  if (!attachEvent) {
+    var requestFrame = (function () {
+      var raf =
+        _window.requestAnimationFrame ||
+        _window.mozRequestAnimationFrame ||
+        _window.webkitRequestAnimationFrame ||
+        function (fn) {
+          return _window.setTimeout(fn, 20);
+        };
+      return function (fn) {
+        return raf(fn);
+      };
+    })();
+
+    var cancelFrame = (function () {
+      var cancel =
+        _window.cancelAnimationFrame ||
+        _window.mozCancelAnimationFrame ||
+        _window.webkitCancelAnimationFrame ||
+        _window.clearTimeout;
+      return function (id) {
+        return cancel(id);
+      };
+    })();
+
+    var resetTriggers = function (element) {
+      var triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + 'px';
+      expandChild.style.height = expand.offsetHeight + 1 + 'px';
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+
+    var checkTriggers = function (element) {
+      return (
+        element.offsetWidth != element.__resizeLast__.width ||
+        element.offsetHeight != element.__resizeLast__.height
+      );
+    };
+
+    var scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (
+        e.target.className &&
+        typeof e.target.className.indexOf === 'function' &&
+        e.target.className.indexOf('contract-trigger') < 0 &&
+        e.target.className.indexOf('expand-trigger') < 0
+      ) {
+        return;
+      }
+
+      var element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function () {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function (fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    var animation = false,
+      keyframeprefix = '',
+      animationstartevent = 'animationstart',
+      domPrefixes = 'Webkit Moz O ms'.split(' '),
+      startEvents =
+        'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(
+          ' '
+        ),
+      pfx = '';
+    {
+      var elm = _window.document.createElement('fakeelement');
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+
+      if (animation === false) {
+        for (var i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = '-' + pfx.toLowerCase() + '-';
+            animationstartevent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+
+    var animationName = 'resizeanim';
+    var animationKeyframes =
+      '@' +
+      keyframeprefix +
+      'keyframes ' +
+      animationName +
+      ' { from { opacity: 0; } to { opacity: 0; } } ';
+    var animationStyle =
+      keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+  }
+
+  var createStyles = function (doc) {
+    if (!doc.getElementById('detectElementResize')) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      var css =
+          (animationKeyframes ? animationKeyframes : '') +
+          '.resize-triggers { ' +
+          (animationStyle ? animationStyle : '') +
+          'visibility: hidden; opacity: 0; } ' +
+          '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName('head')[0],
+        style = doc.createElement('style');
+
+      style.id = 'detectElementResize';
+      style.type = 'text/css';
+
+      if (nonce != null) {
+        style.setAttribute('nonce', nonce);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+
+      head.appendChild(style);
+    }
+  };
+
+  var addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent('onresize', fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        var doc = element.ownerDocument;
+        var elementStyle = _window.getComputedStyle(element);
+        if (elementStyle && elementStyle.position == 'static') {
+          element.style.position = 'relative';
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement('div')).className =
+          'resize-triggers';
+        var expandTrigger = doc.createElement('div');
+        expandTrigger.className = 'expand-trigger';
+        expandTrigger.appendChild(doc.createElement('div'));
+        var contractTrigger = doc.createElement('div');
+        contractTrigger.className = 'contract-trigger';
+        element.__resizeTriggers__.appendChild(expandTrigger);
+        element.__resizeTriggers__.appendChild(contractTrigger);
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener('scroll', scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationstartevent) {
+          element.__resizeTriggers__.__animationListener__ =
+            function animationListener(e) {
+              if (e.animationName == animationName) {
+                resetTriggers(element);
+              }
+            };
+          element.__resizeTriggers__.addEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__
+          );
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+
+  var removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent('onresize', fn);
+    } else {
+      element.__resizeListeners__.splice(
+        element.__resizeListeners__.indexOf(fn),
+        1
+      );
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener('scroll', scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__
+          );
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(
+            element.__resizeTriggers__
+          );
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
+}

package/addon/utils/markdown/markdown-types.ts

@@ -50,17 +50,16 @@ export interface RehypeNode extends EuiMarkdownAstNode {
   value: string;
   type: string;
 }
-interface RemarkRehypeHandlerCallback {
-  (
-    node: UnistPosition,
-    tagName: string,
-    props: Record<string, unknown>,
-    children: RehypeNode[]
-  ): RehypeNode;
-}
-export interface RemarkRehypeHandler {
-  (h: RemarkRehypeHandlerCallback, node: UnistNode): RehypeNode;
-}
+type RemarkRehypeHandlerCallback = (
+  node: UnistPosition,
+  tagName: string,
+  props: Record<string, unknown>,
+  children: RehypeNode[]
+) => RehypeNode;
+export type RemarkRehypeHandler = (
+  h: RemarkRehypeHandlerCallback,
+  node: UnistNode
+) => RehypeNode;
 
 export interface EuiMarkdownEditorUiPluginEditorProps<NodeShape> {
   node: NodeShape | null;

package/addon/utils/markdown/plugins/markdown-add-components/index.ts

@@ -0,0 +1 @@
+export * from './processor';

package/addon/utils/markdown/plugins/{markdown-add-components.ts → markdown-add-components/processor.ts}

@@ -1,6 +1,7 @@
-import { RehypeNode } from '../markdown-types';
-import EuiMarkdownFormatMarkdownCode from '../../../components/eui-markdown-format/markdown-code';
-import EuiMarkdownFormatMarkdownCodeBlock from '../../../components/eui-markdown-format/markdown-code-block';
+import { RehypeNode } from '../../markdown-types';
+import EuiMarkdownFormatMarkdownCode from '../../../../components/eui-markdown-format/markdown-code';
+import EuiMarkdownFormatMarkdownCodeBlock from '../../../../components/eui-markdown-format/markdown-code-block';
+import { FENCED_CLASS } from '../../remark/remark-prismjs';
 
 type Visitor = (node: RehypeNode) => RehypeNode;
 
@@ -21,7 +22,9 @@ export const visit = (node: RehypeNode, visitor: Visitor) => {
   return node;
 };
 
-export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
+export const processor = function MarkdownAddComponents(): (
+  tree: RehypeNode
+) => void {
   return (tree) => {
     visit(tree, (node: RehypeNode) => {
       if (node.tagName === 'component') {
@@ -46,8 +49,12 @@ export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
       }
       if (node.type === 'element' && node.tagName === 'code') {
         node.type = 'component';
-        const hasBreaks = node.children?.find((child: RehypeNode) =>
-          /\r|\n/.exec(child.value)
+        const hasBreaks = node.children?.find(
+          (child: RehypeNode) =>
+            /\r|\n/.exec(child.value) ||
+            ((node.properties.className as string[]) &&
+              (node.properties.className as string[]).indexOf(FENCED_CLASS) >
+                -1)
         );
         if (hasBreaks) {
           node.properties.componentName = EuiMarkdownFormatMarkdownCodeBlock;
@@ -61,4 +68,4 @@ export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
       return node;
     });
   };
-}
+};

package/addon/utils/markdown/plugins/markdown-checkbox/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { CheckboxParser as parser } from './parser';

package/addon/utils/markdown/plugins/{markdown-checkbox.ts → markdown-checkbox/parser.ts}

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { RemarkTokenizer } from '../markdown-types';
+import { RemarkTokenizer } from '../../markdown-types';
 import { Plugin } from 'unified';
-import EuiMarkdownFormatMarkdownCheckbox from '../../../components/eui-markdown-format/markdown-checkbox';
+import EuiMarkdownFormatMarkdownCheckbox from '../../../../components/eui-markdown-format/markdown-checkbox';
 
 interface CheckboxNodeDetails {
   type: 'component';
@@ -29,7 +29,7 @@ interface CheckboxNodeDetails {
   isChecked: boolean;
 }
 
-const CheckboxParser: Plugin = function CheckboxParser() {
+export const CheckboxParser: Plugin = function CheckboxParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.blockTokenizers;
   const methods = Parser.prototype.blockMethods;
@@ -77,5 +77,3 @@ const CheckboxParser: Plugin = function CheckboxParser() {
   tokenizers.checkbox = tokenizeCheckbox;
   methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
 };
-
-export { CheckboxParser as parser };

package/addon/utils/markdown/plugins/markdown-default-plugins/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export * from './ui-plugins';
+export * from './parsing-plugins';
+export * from './processing-plugins';
+export * from './plugins';