@elastic/eui 63.0.3 → 65.0.0

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

@@ -7,6 +7,7 @@
  */
 import { useEuiTheme } from '../../services/theme';
 import { transparentize } from '../../services/color';
+import { logicalCSS, logicalCSSWithFallback } from '../functions';
 /**
  * Set scroll bar appearance on Chrome (and firefox).
  * All parameters are optional and default to specific global settings.
@@ -34,7 +35,7 @@ export var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat(logicalCSS('width', scrollBarSize), "\n      ").concat(logicalCSS('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 export var useEuiScrollBar = function useEuiScrollBar(options) {
   var euiTheme = useEuiTheme();
@@ -82,12 +83,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
   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");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSS('height', height || '100%'), "\n  ").concat(logicalCSSWithFallback('overflow-y', 'auto'), "\n  ").concat(logicalCSSWithFallback('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] : {},
@@ -118,7 +118,7 @@ export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
   });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiXScroll = function useEuiXScroll() {
   var euiTheme = useEuiTheme();
@@ -158,4 +158,17 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     direction: direction,
     mask: mask
   });
-};
+};
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+export var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat(logicalCSS('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
+};
+/**
+ * A constant storing the support for the `:has()` selector through a
+ * media query that will only apply the content it is supported.
+ */
+
+export var euiSupportsHas = '@supports(selector(:has(p)))';

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

@@ -5,39 +5,43 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { sortMapBySmallToLargeValues } from '../../services/breakpoint/_sorting';
 import { useEuiTheme } from '../../services/theme/hooks';
-import { EuiThemeBreakpoints } from '../variables';
+
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
-
 export var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys(sortMapBySmallToLargeValues(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return EuiThemeBreakpoints.indexOf(a) - EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 export var useEuiBreakpoint = function useEuiBreakpoint(sizes) {

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

@@ -15,7 +15,8 @@ import { useEuiTheme } from '../../services';
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-export var euiFocusRing = function euiFocusRing(euiTheme) {
+export var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -40,9 +41,7 @@ export var euiFocusRing = function euiFocusRing(euiTheme) {
   return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
 };
 export var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = useEuiTheme(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = useEuiTheme();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

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

@@ -7,6 +7,7 @@
  */
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
 import { useEuiTheme } from '../../services/theme/hooks';
+import { logicalCSS } from '../functions';
 
 /**
  * Returns font-size and line-height
@@ -36,7 +37,8 @@ export var euiTextBreakWord = function euiTextBreakWord() {
 
 export var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat(logicalCSS('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

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

@@ -10,6 +10,7 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import { euiFocusRing, euiScrollBarStyles } from '../mixins';
+import { logicalCSS } from '../functions';
 import { shade, tint, transparentize } from '../../services/color';
 import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
@@ -42,7 +43,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;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('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(euiThemeContext), ";}::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/global_styling/utility/utility.js

@@ -7,11 +7,19 @@
  */
 import React from 'react';
 import { Global, css } from '@emotion/react';
+import { useEuiTheme } from '../../services/theme/hooks';
 import { euiScreenReaderOnly } from '../../components/accessibility/screen_reader_only/screen_reader_only.styles';
+import { euiFullHeight, euiTextBreakWord, euiTextTruncate, euiNumberFormat, euiScrollBarStyles, euiYScroll, euiXScroll, euiYScrollWithShadows, euiXScrollWithShadows, euiBreakpoint } from '../mixins';
+import { logicalCSS } from '../functions';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var globalStyles = /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";};label:globalStyles;");
+export var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", logicalCSS('width', '100% !important'), ";}.eui-fullHeight{", euiFullHeight(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", euiTextBreakWord(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", euiTextTruncate(), ";}.eui-textNumber{", euiNumberFormat(euiThemeContext), ";}.eui-scrollBar{", euiScrollBarStyles(euiThemeContext), ";}.eui-yScroll{", euiYScroll(euiThemeContext), ";}.eui-xScroll{", euiXScroll(euiThemeContext), ";}.eui-yScrollWithShadows{", euiYScrollWithShadows(euiThemeContext), ";}.eui-xScrollWithShadows{", euiXScrollWithShadows(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
 export var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = useEuiTheme();
   return ___EmotionJSX(Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };

package/optimize/es/global_styling/variables/breakpoint.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 var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs

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

@@ -0,0 +1,31 @@
+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.
+ */
+export var sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+export var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = _slicedToArray(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = _slicedToArray(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};

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

@@ -7,10 +7,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { keysOf } from '../../components/common';
 import { useEuiTheme } from '../theme';
 import { throttle } from '../throttle';
-import { getBreakpoint } from './breakpoint';
+import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 /**
@@ -21,23 +22,35 @@ export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
 
+  // Obtain the breakpoints map from the EUI theme
   var _useEuiTheme = useEuiTheme(),
-      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+      breakpoints = _useEuiTheme.euiTheme.breakpoint; // Ensure the breakpoints map is sorted from largest value to smallest
 
-  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
+
+  var sortedBreakpoints = useMemo(function () {
+    return sortMapByLargeToSmallValues(breakpoints);
+  }, [breakpoints]); // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+
+  var getBreakpoint = useCallback(function (width) {
+    return keysOf(sortedBreakpoints).find(function (key) {
+      return sortedBreakpoints[key] <= width;
+    });
+  }, [sortedBreakpoints]);
+
+  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
       currentBreakpoint = _useState2[0],
       setCurrentBreakpoint = _useState2[1];
 
   useEffect(function () {
     var onWindowResize = throttle(function () {
-      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
     window.addEventListener('resize', onWindowResize);
     return function () {
       return window.removeEventListener('resize', onWindowResize);
     };
-  }, [breakpoints]);
+  }, [getBreakpoint]);
   return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
     value: currentBreakpoint
   }, children);

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

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export * from './breakpoint';
 export * from './current_breakpoint';
 export * from './current_breakpoint_hook';
-export * from './useIsWithinBreakpoints';
+export * from './is_within_hooks';
+export {};

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

@@ -0,0 +1,67 @@
+/*
+ * 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 { useEuiTheme } from '../theme';
+import { useCurrentEuiBreakpoint } from './current_breakpoint_hook';
+/**
+ * Given an array of breakpoint keys, this hook returns true or false
+ * if the breakpoint size of the current window width falls within
+ * any of the named breakpoints.
+ *
+ * @param {EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+
+export var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};
+/**
+ * Given a max breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the max breakpoint or any below,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+
+export function useIsWithinMaxBreakpoint(max) {
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[max] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] <= breakpoints[max];
+}
+/**
+ * Given a min breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the min breakpoint or any above,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+
+export function useIsWithinMinBreakpoint(min) {
+  var _useEuiTheme2 = useEuiTheme(),
+      breakpoints = _useEuiTheme2.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[min] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] >= breakpoints[min];
+}

package/optimize/es/services/index.js

@@ -10,7 +10,7 @@ import * as keys from './keys';
 export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
+export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
 export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';

package/optimize/es/themes/amsterdam/global_styling/mixins/button.js

@@ -1,3 +1,5 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,36 +8,173 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { shade, tint, transparentize, useEuiTheme } from '../../../../services';
-export var BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger', 'disabled'];
-export var euiButtonColor = function euiButtonColor(color, _ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
+import { euiBackgroundColor, euiCanAnimate } from '../../../../global_styling';
+import { hexToRgb, isColorDark, makeHighContrastColor, shade, tint, transparentize, useEuiTheme } from '../../../../services';
+export var BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger'];
+
+/**
+ * Creates the `base` version of button styles with proper text contrast.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }`
+ */
+export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
 
   function tintOrShade(color) {
     return colorMode === 'DARK' ? shade(color, 0.7) : tint(color, 0.8);
   }
 
+  var foreground;
+  var background;
+
+  switch (color) {
+    case 'disabled':
+      return {
+        color: euiTheme.colors.disabledText,
+        backgroundColor: transparentize(euiTheme.colors.lightShade, 0.15)
+      };
+
+    case 'text':
+      foreground = euiTheme.colors[color];
+      background = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.2) : tint(euiTheme.colors.lightShade, 0.5);
+      break;
+
+    default:
+      foreground = euiTheme.colors["".concat(color, "Text")];
+      background = tintOrShade(euiTheme.colors[color]);
+      break;
+  }
+
+  return {
+    color: makeHighContrastColor(foreground)(background),
+    backgroundColor: background
+  };
+};
+/**
+ * Creates the `fill` version of buttons styles with proper text contrast.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }`
+ */
+
+export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var background;
+  var foreground;
+
+  switch (color) {
+    case 'disabled':
+      background = euiButtonColor(euiThemeContext, color).backgroundColor;
+      foreground = euiButtonColor(euiThemeContext, color).color;
+      break;
+
+    case 'text':
+      background = colorMode === 'DARK' ? euiTheme.colors.text : euiTheme.colors.darkShade;
+      foreground = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(background))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+      break;
+
+    default:
+      background = euiTheme.colors[color];
+      foreground = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(euiTheme.colors[color]))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+      break;
+  }
+
+  return {
+    color: foreground,
+    backgroundColor: background
+  };
+};
+/**
+ * Creates the `empty` version of button styles using the text-variant and adding interactive styles.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }` where `background` is typically used for interactive states
+ */
+
+export var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, color) {
+  var foreground;
+  var background;
+
   switch (color) {
     case 'disabled':
-      return transparentize(euiTheme.colors.lightShade, 0.15);
+      foreground = euiButtonColor(euiThemeContext, color).color;
+      background = 'transparent';
+      break;
 
     case 'text':
-      return colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.2) : tint(euiTheme.colors.lightShade, 0.5);
+      foreground = euiButtonColor(euiThemeContext, color).color;
+      background = euiBackgroundColor(euiThemeContext, 'subdued', {
+        method: 'transparent'
+      });
+      break;
 
     default:
-      return tintOrShade(euiTheme.colors[color]);
+      foreground = euiButtonColor(euiThemeContext, color).color;
+      background = euiBackgroundColor(euiThemeContext, color, {
+        method: 'transparent'
+      });
+      break;
   }
+
+  return {
+    color: foreground,
+    backgroundColor: background
+  };
 };
+/**
+ * Given the button display type, returns the Emotion based color keys.
+ * @param options Button display type
+ * @returns An object of `_EuiButtonColor` keys including `disabled`
+ */
+
 export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
-  var euiTheme = useEuiTheme();
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var euiThemeContext = useEuiTheme();
+
+  function stylesByDisplay(color) {
+    return {
+      base: /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), ";;label:base;"),
+      fill: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:fill;"),
+      empty: /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:empty;")
+    };
+  }
+
+  return {
+    text: /*#__PURE__*/css(stylesByDisplay('text')[options.display || 'base'], ";label:text;"),
+    accent: /*#__PURE__*/css(stylesByDisplay('accent')[options.display || 'base'], ";label:accent;"),
+    primary: /*#__PURE__*/css(stylesByDisplay('primary')[options.display || 'base'], ";label:primary;"),
+    success: /*#__PURE__*/css(stylesByDisplay('success')[options.display || 'base'], ";label:success;"),
+    warning: /*#__PURE__*/css(stylesByDisplay('warning')[options.display || 'base'], ";label:warning;"),
+    danger: /*#__PURE__*/css(stylesByDisplay('danger')[options.display || 'base'], ";label:danger;"),
+    disabled: /*#__PURE__*/css(stylesByDisplay('disabled')[options.display || 'base'], ";label:disabled;")
+  };
+};
+/**
+ * Based on the button size, creates the style properties.
+ * @returns An object of button size keys with Emption styles for `border-radius`
+ */
+
+export var useEuiButtonRadiusCSS = function useEuiButtonRadiusCSS() {
+  var _useEuiTheme = useEuiTheme(),
+      euiTheme = _useEuiTheme.euiTheme;
+
   return {
-    text: /*#__PURE__*/css("background-color:", euiButtonColor('text', euiTheme), ";;label:text;"),
-    accent: /*#__PURE__*/css("background-color:", euiButtonColor('accent', euiTheme), ";;label:accent;"),
-    primary: /*#__PURE__*/css("background-color:", euiButtonColor('primary', euiTheme), ";;label:primary;"),
-    success: /*#__PURE__*/css("background-color:", euiButtonColor('success', euiTheme), ";;label:success;"),
-    warning: /*#__PURE__*/css("background-color:", euiButtonColor('warning', euiTheme), ";;label:warning;"),
-    danger: /*#__PURE__*/css("background-color:", euiButtonColor('danger', euiTheme), ";;label:danger;"),
-    disabled: /*#__PURE__*/css("background-color:", euiButtonColor('disabled', euiTheme), ";;label:disabled;")
+    xs: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
+    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
   };
+};
+/**
+ * Creates the translate animation when button is in focus.
+ * @returns string
+ */
+
+export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
+  var _useEuiTheme2 = useEuiTheme(),
+      euiTheme = _useEuiTheme2.euiTheme;
+
+  return "\n    ".concat(euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
 };

package/optimize/lib/components/accessibility/screen_reader_live/screen_reader_live.js

@@ -75,12 +75,12 @@ var EuiScreenReaderLive = function EuiScreenReaderLive(_ref) {
       // double announcements from VO when `focusRegionOnTextChange` is true
       ,
       "aria-hidden": toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": !toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && toggle ? children : ''), (0, _react2.jsx)("div", {
       role: role,
       "aria-atomic": "true",
       "aria-hidden": !toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && !toggle ? children : '')))
   );
 };

package/optimize/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -7,6 +7,8 @@ exports.euiScreenReaderOnlyStyles = exports.euiScreenReaderOnly = void 0;
 
 var _react = require("@emotion/react");
 
+var _global_styling = require("../../../global_styling");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,7 +22,7 @@ var _react = require("@emotion/react");
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 var euiScreenReaderOnly = function euiScreenReaderOnly() {
-  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  top: auto;\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  left: -10000px;\n  // The element must have a size (for some screen readers)\n  width: 1px;\n  height: 1px;\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n";
+  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  ".concat((0, _global_styling.logicalCSS)('top', 'auto'), "\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  ").concat((0, _global_styling.logicalCSS)('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat((0, _global_styling.logicalSizeCSS)('1px', '1px'), "\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n");
 };
 /*
  * Styles