@elastic/eui 62.0.3 → 63.0.0

package/optimize/es/components/toast/toast.js

@@ -11,19 +11,15 @@ var _excluded = ["title", "color", "iconType", "onClose", "children", "className
  */
 import React from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
+import { euiToastStyles, euiToastBodyStyles, euiToastHeaderStyles } from './toast.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var colorToClassNameMap = {
-  primary: 'euiToast--primary',
-  success: 'euiToast--success',
-  warning: 'euiToast--warning',
-  danger: 'euiToast--danger'
-};
-export var COLORS = keysOf(colorToClassNameMap);
+export var COLORS = ['primary', 'success', 'warning', 'danger'];
 export var EuiToast = function EuiToast(_ref) {
   var title = _ref.title,
       color = _ref.color,
@@ -33,15 +29,18 @@ export var EuiToast = function EuiToast(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiToast', color ? colorToClassNameMap[color] : null, className);
-  var headerClasses = classNames('euiToastHeader', {
-    'euiToastHeader--withBody': children
-  });
+  var euiTheme = useEuiTheme();
+  var baseStyles = euiToastStyles(euiTheme);
+  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var bodyStyles = euiToastBodyStyles();
+  var headerStyles = euiToastHeaderStyles(euiTheme);
+  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
+  var classes = classNames('euiToast', className);
   var headerIcon;
 
   if (iconType) {
     headerIcon = ___EmotionJSX(EuiIcon, {
-      className: "euiToastHeader__icon",
+      css: headerStyles.euiToastHeader__icon,
       type: iconType,
       size: "m",
       "aria-hidden": "true"
@@ -55,17 +54,15 @@ export var EuiToast = function EuiToast(_ref) {
       token: "euiToast.dismissToast",
       default: "Dismiss toast"
     }, function (dismissToast) {
-      return ___EmotionJSX("button", {
-        type: "button",
-        className: "euiToast__closeButton",
+      return ___EmotionJSX(EuiButtonIcon, {
+        css: baseStyles.euiToast__closeButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
         "aria-label": dismissToast,
         onClick: onClose,
         "data-test-subj": "toastCloseButton"
-      }, ___EmotionJSX(EuiIcon, {
-        type: "cross",
-        size: "m",
-        "aria-hidden": "true"
-      }));
+      });
     });
   }
 
@@ -73,12 +70,14 @@ export var EuiToast = function EuiToast(_ref) {
 
   if (children) {
     optionalBody = ___EmotionJSX(EuiText, {
+      css: bodyStyles.euiToastBody,
       size: "s",
-      className: "euiToastBody"
+      "data-test-subj": "euiToastBody"
     }, children);
   }
 
   return ___EmotionJSX("div", _extends({
+    css: baseCss,
     className: classes
   }, rest), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
     token: "euiToast.newNotification",
@@ -88,11 +87,12 @@ export var EuiToast = function EuiToast(_ref) {
     default: "Notification"
   }, function (notification) {
     return ___EmotionJSX("div", {
-      className: headerClasses,
+      css: headerCss,
       "aria-label": notification,
       "data-test-subj": "euiToastHeader"
     }, headerIcon, ___EmotionJSX("span", {
-      className: "euiToastHeader__title"
+      css: headerStyles.euiToastHeader__title,
+      "data-test-subj": "euiToastHeader__title"
     }, title));
   }), closeButton, optionalBody);
 };

package/optimize/es/components/toast/toast.styles.js

@@ -0,0 +1,55 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiShadowLarge } from '../../themes/amsterdam';
+import { euiTitle } from '../title/title.styles';
+export var euiToastStyles = function euiToastStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), ";position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    // Elements
+    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), ";", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
+    // Variants
+    primary: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.primary, ";;label:primary;"),
+    success: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.success, ";;label:success;"),
+    warning: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.warning, ";;label:warning;"),
+    danger: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.danger, ";;label:danger;")
+  };
+};
+export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToastHeader: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    // Elements
+    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    // Variants
+    withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1xv63y1-euiToastBody",
+  styles: "word-wrap:break-word;label:euiToastBody;"
+} : {
+  name: "1xv63y1-euiToastBody",
+  styles: "word-wrap:break-word;label:euiToastBody;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiToastBodyStyles = function euiToastBodyStyles() {
+  return {
+    // Base
+    euiToastBody: _ref
+  };
+};

package/optimize/es/components/token/index.js

@@ -5,4 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export { EuiToken, SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS } from './token';
+export { SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS } from './token_types';
+export { EuiToken } from './token';

package/optimize/es/components/token/token.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "className", "title", "aria-label", "aria-labelledby", "aria-describedby"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,46 +16,18 @@ var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "classNa
  * Side Public License, v 1.
  */
 import React from 'react';
-import defaults from 'lodash/defaults';
 import classNames from 'classnames';
-import { keysOf } from '../common';
-import { isColorDark, hexToRgb } from '../../services';
+import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
 import { EuiIcon } from '../icon';
 import { TOKEN_MAP } from './token_map';
+import { COLORS } from './token_types';
+import { euiTokenStyles } from './token.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sizeToClassMap = {
-  xs: 'euiToken--xsmall',
-  s: 'euiToken--small',
-  m: 'euiToken--medium',
-  l: 'euiToken--large'
-};
-export var SIZES = keysOf(sizeToClassMap);
-var shapeToClassMap = {
-  circle: 'euiToken--circle',
-  square: 'euiToken--square',
-  rectangle: 'euiToken--rectangle'
-};
-export var SHAPES = keysOf(shapeToClassMap);
-var fillToClassMap = {
-  none: null,
-  light: 'euiToken--light',
-  dark: 'euiToken--dark'
-};
-export var FILLS = keysOf(fillToClassMap);
-var colorToClassMap = {
-  euiColorVis0: 'euiToken--euiColorVis0',
-  euiColorVis1: 'euiToken--euiColorVis1',
-  euiColorVis2: 'euiToken--euiColorVis2',
-  euiColorVis3: 'euiToken--euiColorVis3',
-  euiColorVis4: 'euiToken--euiColorVis4',
-  euiColorVis5: 'euiToken--euiColorVis5',
-  euiColorVis6: 'euiToken--euiColorVis6',
-  euiColorVis7: 'euiToken--euiColorVis7',
-  euiColorVis8: 'euiToken--euiColorVis8',
-  euiColorVis9: 'euiToken--euiColorVis9',
-  gray: 'euiToken--gray'
+
+var isTokenColor = function isTokenColor(color) {
+  return COLORS.includes(color);
 };
-export var COLORS = keysOf(colorToClassMap);
+
 export var EuiToken = function EuiToken(_ref) {
   var iconType = _ref.iconType,
       color = _ref.color,
@@ -74,48 +51,48 @@ export var EuiToken = function EuiToken(_ref) {
 
   if (typeof iconType === 'string' && iconType.indexOf('token') === 0 && size === 's') {
     finalSize = 'm';
-  }
-
-  var currentDisplay = {
-    color: color,
-    fill: fill,
-    shape: shape
-  };
-  var finalDisplay; // If the iconType passed is one of the prefab token types,
+  } // If the iconType passed is one of the prefab token types,
   // grab its properties
 
-  if (typeof iconType === 'string' && iconType in TOKEN_MAP) {
-    var tokenDisplay = TOKEN_MAP[iconType];
-    finalDisplay = defaults(currentDisplay, tokenDisplay);
-  } else {
-    finalDisplay = currentDisplay;
-  }
-
-  var finalColor = finalDisplay.color || 'gray';
-  var finalShape = finalDisplay.shape || 'circle';
-  var finalFill = finalDisplay.fill || 'light'; // Color can be a named space via euiColorVis
 
-  var colorClass;
+  var tokenDefaults = typeof iconType === 'string' && iconType in TOKEN_MAP ? TOKEN_MAP[iconType] : {};
+  var finalColor = color || tokenDefaults.color || 'gray';
+  var finalShape = shape || tokenDefaults.shape || 'circle';
+  var finalFill = fill || 'light';
+  var euiTheme = useEuiTheme();
+  var styles = euiTokenStyles(euiTheme, finalFill);
+  var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
+  var finalStyle = style;
 
-  if (finalColor in colorToClassMap) {
-    colorClass = colorToClassMap[finalColor];
-  } // Or it can be a string which adds inline styles for the
-  else {
-    // text color if fill='none' or
-    if (finalFill === 'none') {
-      style.color = finalColor;
-    } // full background color if fill='dark' and overrides fill='light' with dark
-    else {
-      finalFill = 'dark';
-      style.backgroundColor = finalColor;
-      style.color = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(finalColor))) ? '#FFFFFF' : '#000000';
-    }
+  if (isTokenColor(finalColor)) {
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles[finalColor]]);
+  } else if (finalFill === 'none') {
+    // When a custom HEX color is passed and the token doesn't have any fill (no background),
+    // the icon gets that passed color
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles.customColor]);
+    finalStyle = _objectSpread({
+      color: finalColor
+    }, style);
+  } else {
+    // When a custom HEX color is passed and the token has a fill (light or dark),
+    // the background gets the custom color and the icon gets white or black based on the passed color
+    // The fill='light' (lightened background) will always be overridden by fill='dark' (opaque background)
+    // to better handle custom colors
+    var isFinalColorDark = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(finalColor)));
+    var lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000';
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles.customColor]);
+    finalFill = 'dark';
+    finalStyle = _objectSpread({
+      color: lightOrDarkColor,
+      backgroundColor: finalColor
+    }, style);
   }
 
-  var classes = classNames('euiToken', colorClass, shapeToClassMap[finalShape], fillToClassMap[finalFill], sizeToClassMap[size], className);
+  var classes = classNames('euiToken', className);
   return ___EmotionJSX("span", _extends({
     className: classes,
-    style: style
+    css: cssStyles,
+    style: finalStyle
   }, rest), ___EmotionJSX(EuiIcon, {
     type: iconType,
     size: finalSize,

package/optimize/es/components/token/token.styles.js

@@ -0,0 +1,83 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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 { css } from '@emotion/react';
+import chroma from 'chroma-js';
+import { logicalCSS, logicalSizeCSS } from '../../global_styling';
+import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
+var visColors = euiPaletteColorBlind();
+var visColorsBehindText = euiPaletteColorBlindBehindText();
+
+var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
+  var isVizColor = typeof color === 'number';
+  var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
+  var isDarkMode = colorMode === 'DARK';
+  var backgroundDarkColor = isVizColor ? visColorsBehindText[color] : euiTheme.colors.darkShade;
+  var backgroundLightColor = isDarkMode ? shade(iconColor, 0.7) : tint(iconColor, 0.9);
+  var lightColor = makeHighContrastColor(iconColor)(backgroundLightColor);
+  var boxShadowColor = isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.7);
+  var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+
+  switch (fill) {
+    case 'none':
+      return "\n        // Without a background, the fill color should be the graphic color\n        color: ".concat(iconColor, ";\n      ");
+
+    case 'light':
+      return "\n        color: ".concat(lightColor, ";\n        background-color: ").concat(backgroundLightColor, ";\n        box-shadow: inset 0 0 0 1px ").concat(boxShadowColor, ";\n      ");
+
+    case 'dark':
+      return "\n        color: ".concat(darkColor, ";\n        background-color: ").concat(backgroundDarkColor, ";\n      ");
+  }
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ab5xb2-circle",
+  styles: "border-radius:50%;label:circle;"
+} : {
+  name: "1ab5xb2-circle",
+  styles: "border-radius:50%;label:circle;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
+  var euiTheme = _ref2.euiTheme,
+      colorMode = _ref2.colorMode;
+  return {
+    // Base
+    euiToken: /*#__PURE__*/css("display:inline-flex;align-items:center;justify-content:center;svg{", logicalCSS('height', '100%'), " margin:auto;};label:euiToken;"),
+    // Shapes
+    circle: _ref,
+    square: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
+    rectangle: /*#__PURE__*/css("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
+    // Sizes
+    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square']{border-radius:calc(", euiTheme.border.radius.small, " / 2);}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), ";", logicalCSS('padding-horizontal', euiTheme.size.xs), ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:xs;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    // Colors
+    euiColorVis0: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
+    euiColorVis1: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),
+    euiColorVis2: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 2), ";label:euiColorVis2;"),
+    euiColorVis3: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 3), ";label:euiColorVis3;"),
+    euiColorVis4: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 4), ";label:euiColorVis4;"),
+    euiColorVis5: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 5), ";label:euiColorVis5;"),
+    euiColorVis6: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 6), ";label:euiColorVis6;"),
+    euiColorVis7: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 7), ";label:euiColorVis7;"),
+    euiColorVis8: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 8), ";label:euiColorVis8;"),
+    euiColorVis9: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 9), ";label:euiColorVis9;"),
+    gray: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 'gray'), ";label:gray;"),
+    customColor: /*#__PURE__*/css(";label:customColor;"),
+    // Fills
+    light: /*#__PURE__*/css(";label:light;"),
+    dark: /*#__PURE__*/css(";label:dark;"),
+    none: /*#__PURE__*/css(";label:none;")
+  };
+};

package/optimize/es/components/token/token_map.js

@@ -77,9 +77,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenFile: {
-    shape: 'rectangle',
-    color: 'gray',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis2'
   },
   tokenFlattened: {
     shape: 'square',
@@ -186,9 +185,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis3'
   },
   tokenRepo: {
-    shape: 'rectangle',
-    color: 'euiColorVis1',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis1'
   },
   tokenSearchType: {
     shape: 'square',
@@ -207,9 +205,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenSymbol: {
-    shape: 'rectangle',
-    color: 'euiColorVis0',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis0'
   },
   tokenTag: {
     shape: 'square',

package/optimize/es/components/token/token_types.js

@@ -0,0 +1,11 @@
+/*
+ * 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 var SIZES = ['xs', 's', 'm', 'l'];
+export var SHAPES = ['circle', 'square', 'rectangle'];
+export var FILLS = ['light', 'dark', 'none'];
+export var COLORS = ['euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'];

package/optimize/es/global_styling/functions/logicals.js

@@ -119,7 +119,7 @@ export var logicalStyle = function logicalStyle(property, value) {
   var camelCasedProperty = logicals[property].replace(/-\w/g, function (str) {
     return str.charAt(1).toUpperCase();
   });
-  return _defineProperty({}, camelCasedProperty, "".concat(value));
+  return _defineProperty({}, camelCasedProperty, value);
 };
 /**
  *

package/optimize/es/global_styling/mixins/_helpers.js

@@ -80,24 +80,42 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
  *    Others like Safari, won't show anything at all.
  */
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 
 
+// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref5.height;
+
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
+  var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref6.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScroll(euiTheme);
+  return euiYScroll(euiTheme, {
+    height: height
+  });
 };
 export var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
-  return "\n  ".concat(euiYScroll(euiTheme), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
+  var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref7.height;
+
+  return "\n  ".concat(euiYScroll(euiTheme, {
+    height: height
+  }), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
     direction: 'y'
   }), "\n");
 };
 export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
+  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref8.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScrollWithShadows(euiTheme);
+  return euiYScrollWithShadows(euiTheme, {
+    height: height
+  });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
   return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
@@ -116,10 +134,10 @@ export var useEuiXScrollWithShadows = function useEuiXScrollWithShadows() {
   return euiXScrollWithShadows(euiTheme);
 };
 export var euiOverflowScroll = function euiOverflowScroll(euiTheme) {
-  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      direction = _ref5.direction,
-      _ref5$mask = _ref5.mask,
-      mask = _ref5$mask === void 0 ? false : _ref5$mask;
+  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      direction = _ref9.direction,
+      _ref9$mask = _ref9.mask,
+      mask = _ref9$mask === void 0 ? false : _ref9$mask;
 
   switch (direction) {
     case 'y':

package/optimize/es/global_styling/reset/global_styles.js

@@ -42,7 +42,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/optimize/es/services/{breakpoint.js → breakpoint/breakpoint.js}

@@ -5,14 +5,9 @@
  * 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 var BREAKPOINTS = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+import { keysOf } from '../../components/common';
+import { breakpoint } from '../../themes/amsterdam/global_styling/variables/_breakpoint';
+export var BREAKPOINTS = breakpoint;
 export var BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
 /**
  * Given the current `width` and an object of `EuiBreakpoints`,
@@ -27,7 +22,7 @@ export var BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
 export function getBreakpoint(width) {
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
   // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
-  return keysOf(BREAKPOINTS).find(function (key) {
+  return BREAKPOINT_KEYS.find(function (key) {
     return breakpoints[key] <= width;
   });
 }

package/optimize/es/services/breakpoint/currentEuiBreakpoint.js

@@ -0,0 +1,53 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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 React, { createContext, useContext, useState, useEffect } from 'react';
+import { useEuiTheme } from '../theme';
+import { throttle } from '../throttle';
+import { getBreakpoint } from './breakpoint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Top level provider (nested within EuiProvider) which provides a single
+ * resize listener that returns the current breakpoint based on window width
+ */
+
+export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
+  var children = _ref.children;
+
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var _useState = useState((typeof window === "undefined" ? "undefined" : _typeof(window)) !== undefined ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentBreakpoint = _useState2[0],
+      setCurrentBreakpoint = _useState2[1];
+
+  useEffect(function () {
+    var onWindowResize = throttle(function () {
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+    }, 50);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [breakpoints]);
+  return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
+    value: currentBreakpoint
+  }, children);
+};
+/**
+ * Hook util / syntactical sugar
+ */
+
+export var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = useContext(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};

package/optimize/es/services/breakpoint/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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 './breakpoint';
+export * from './currentEuiBreakpoint';
+export * from './useIsWithinBreakpoints';