@elastic/eui 72.0.0 → 72.1.0

package/test-env/components/color_picker/color_stops/color_stop_thumb.js

@@ -47,6 +47,8 @@ var _spacer = require("../../spacer");
 
 var _range_thumb = require("../../form/range/range_thumb");
 
+var _color_stop_thumb = require("./color_stop_thumb.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "stop", "color", "onChange", "onFocus", "onRemove", "globalMin", "globalMax", "localMin", "localMax", "min", "max", "isRangeMin", "isRangeMax", "parentRef", "colorPickerMode", "colorPickerShowAlpha", "colorPickerSwatches", "disabled", "readOnly", "isPopoverOpen", "openPopover", "closePopover", "data-index", "aria-valuetext", "style", "valueInputProps"];
@@ -264,13 +266,20 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     }
   };
 
-  var classes = (0, _classnames.default)('euiColorStopPopover', {
-    'euiColorStopPopover-hasFocus': hasFocus || isPopoverOpen
-  }, className);
-  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({}, rest, {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var popoverStyles = (0, _color_stop_thumb.euiColorStopThumbPopoverStyles)(euiTheme);
+  var cssPopoverStyles = [popoverStyles.euiColorStopThumbPopover, (hasFocus || isPopoverOpen) && popoverStyles.hasFocus];
+  var thumbStyles = (0, _color_stop_thumb.euiColorStopThumbStyles)(euiTheme);
+  var cssThumbStyles = [thumbStyles.euiColorStopThumb, isPopoverOpen && thumbStyles.isPopoverOpen];
+  var colorStopStyles = (0, _color_stop_thumb.euiColorStopStyles)(euiTheme);
+  var cssColorStopStyles = colorStopStyles.euiColorStop;
+  var classes = (0, _classnames.default)('euiColorStopPopover', className);
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    css: cssPopoverStyles
+  }, rest, {
     ref: popoverRef,
     className: classes,
-    anchorClassName: "euiColorStopPopover__anchor",
+    anchorClassName: "euiColorStopThumbPopover__anchor",
     panelPaddingSize: "s",
     isOpen: isPopoverOpen,
     closePopover: closePopover,
@@ -278,7 +287,9 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     focusTrapProps: {
       clickOutsideDisables: false
     },
-    panelClassName: numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel',
+    panelProps: {
+      css: numberInputRef ? undefined : popoverStyles.isLoadingPanel
+    },
     style: _objectSpread(_objectSpread({}, style), {}, {
       left: "".concat(getPositionFromStopFn(stop), "%")
     }),
@@ -310,6 +321,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
         "aria-label": ariaLabel,
         title: title,
         className: "euiColorStopThumb",
+        css: cssThumbStyles,
         tabIndex: -1,
         style: {
           background: background
@@ -319,6 +331,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     })
   }), (0, _react2.jsx)("div", {
     className: "euiColorStop",
+    css: cssColorStopStyles,
     "data-test-subj": "euiColorStopPopover"
   }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     "aria-live": "polite"

package/test-env/components/color_picker/color_stops/color_stop_thumb.styles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorStopThumbStyles = exports.euiColorStopThumbPopoverStyles = exports.euiColorStopStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("../../form/range/range.styles");
+
+var _color_picker = require("../color_picker.styles");
+
+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)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;"
+} : {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbStyles = function euiColorStopThumbStyles(euiThemeContext) {
+  return {
+    // Base
+    euiColorStopThumb: _ref2,
+    isPopoverOpen: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbFocus)(euiThemeContext), ";;label:isPopoverOpen;")
+  };
+};
+
+exports.euiColorStopThumbStyles = euiColorStopThumbStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;"
+} : {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbPopoverStyles = function euiColorStopThumbPopoverStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiColorStopThumbPopover: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;inline-size:", range.thumbWidth, ";block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";.euiColorStopThumbPopover__anchor{position:absolute;inline-size:100%;block-size:100%;&::before{content:'';display:block;position:absolute;inset-inline-start:0;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbWidth, ";border-radius:", range.thumbHeight, ";background:", euiTheme.colors.emptyShade, ";}};label:euiColorStopThumbPopover;"),
+    isLoadingPanel: _ref,
+    hasFocus: /*#__PURE__*/(0, _react.css)("z-index:", range.thumbZIndex, ";;label:hasFocus;")
+  };
+};
+
+exports.euiColorStopThumbPopoverStyles = euiColorStopThumbPopoverStyles;
+
+var euiColorStopStyles = function euiColorStopStyles(euiThemeContext) {
+  var colorPicker = (0, _color_picker.euiColorPickerVariables)(euiThemeContext);
+  return {
+    // Base
+    euiColorStop: /*#__PURE__*/(0, _react.css)("inline-size:", colorPicker.width, ";;label:euiColorStop;")
+  };
+};
+
+exports.euiColorStopStyles = euiColorStopStyles;

package/test-env/components/color_picker/color_stops/color_stops.js

@@ -43,6 +43,8 @@ var _range_track = require("../../form/range/range_track");
 
 var _range_wrapper = require("../../form/range/range_wrapper");
 
+var _color_stops = require("./color_stops.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["addColor", "max", "min", "mode", "colorStops", "onChange", "disabled", "readOnly", "compressed", "fullWidth", "className", "label", "stopType", "stepNumber", "swatches", "showAlpha", "valueInputProps"];
@@ -191,11 +193,16 @@ var EuiColorStops = function EuiColorStops(_ref) {
       setFocusStopOnUpdate = _useState14[1];
 
   var isNotInteractive = disabled || readOnly;
-  var classes = (0, _classnames.default)('euiColorStops', {
-    'euiColorStops-isDragging': isHoverDisabled,
-    'euiColorStops-isDisabled': disabled,
-    'euiColorStops-isReadOnly': readOnly
-  }, className);
+  var isDragging = isHoverDisabled && !isNotInteractive;
+  var addContainerIsDisabled = isHoverDisabled || isNotInteractive;
+  var classes = (0, _classnames.default)('euiColorStops', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _color_stops.euiColorStopsStyles)(euiTheme);
+  var cssPopoverStyles = [styles.euiColorStops, !disabled ? styles.isEnabled : styles.isDisabled, readOnly && styles.isReadOnly, isDragging && styles.isDragging];
+  var cssTrackStyles = [styles.euiColorStops__track];
+  var cssAddTargetStyles = [styles.euiColorStops__addTarget];
+  var addContainerStyles = (0, _color_stops.euiColorStopsAddContainerStyles)(euiTheme);
+  var cssAddContainerStyles = [addContainerStyles.euiColorStopsAddContainer, !addContainerIsDisabled ? addContainerStyles.isEnabled : addContainerStyles.isDisabled];
 
   var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
     // Guard against `null` ref in usage
@@ -395,7 +402,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         disabled: disabled,
         readOnly: readOnly,
         "aria-valuetext": "Stop: ".concat(colorStop.stop, ", Color: ").concat(colorStop.color, " (").concat(index + 1, " of ").concat(colorStops.length, ")"),
-        isPopoverOpen: colorStop.id === openedStopId,
+        isPopoverOpen: !isDragging && colorStop.id === openedStopId,
         openPopover: function openPopover() {
           setOpenedStopId(colorStop.id);
         },
@@ -405,7 +412,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         valueInputProps: valueInputProps
       });
     });
-  }, [colorStops, disabled, handleOnChange, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
+  }, [colorStops, disabled, handleOnChange, isDragging, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
   var positions = wrapperRef ? sortedStops.map(function (_ref3) {
     var stop = _ref3.stop;
     return getPositionFromStopFn(stop);
@@ -413,10 +420,10 @@ var EuiColorStops = function EuiColorStops(_ref) {
 
   var gradientStop = function gradientStop(colorStop, index) {
     var color = (0, _utils2.getChromaColor)(colorStop.color, showAlpha);
-    var rgba = color ? color.css() : 'currentColor';
+    var rgba = color ? color.css() : 'transparent';
 
     if (index === 0) {
-      return "currentColor, currentColor ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
+      return "transparent, transparent ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
     }
 
     return "".concat(rgba, " ").concat(positions[index], "%");
@@ -444,13 +451,15 @@ var EuiColorStops = function EuiColorStops(_ref) {
       percentageSteps = percentageSteps + percentage;
     });
     steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = "linear-gradient(to right, currentColor ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
+    gradient = "linear-gradient(to right, transparent ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
   } else {
     var linearGradient = sortedStops.map(stopType === 'gradient' ? gradientStop : fixedStop);
     gradient = "linear-gradient(to right,".concat(linearGradient, ")");
   }
 
-  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, (0, _extends2.default)({
+    css: cssPopoverStyles
+  }, rest, {
     "data-test-subj": (0, _classnames.default)('euiColorStops', rest['data-test-subj']),
     ref: setWrapperRef,
     className: classes,
@@ -473,6 +482,8 @@ var EuiColorStops = function EuiColorStops(_ref) {
     token: "euiColorStops.screenReaderAnnouncement",
     default: "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
   }))), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+    className: "euiColorStops__track",
+    css: cssTrackStyles,
     min: min || rangeMin,
     max: max || rangeMax,
     compressed: compressed,
@@ -489,13 +500,13 @@ var EuiColorStops = function EuiColorStops(_ref) {
       trackWidth: trackWidth
     }), (0, _react2.jsx)("div", {
       "data-test-subj": "euiColorStopsAdd",
-      className: (0, _classnames.default)('euiColorStops__addContainer', {
-        'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
-      }),
+      className: "euiColorStops__addContainer",
+      css: cssAddContainerStyles,
       onClick: handleAddClick,
       onMouseMove: handleAddHover
     }, (0, _react2.jsx)("div", {
       className: "euiColorStops__addTarget",
+      css: cssAddTargetStyles,
       style: {
         left: "".concat(addTargetPosition, "%")
       }

package/test-env/components/color_picker/color_stops/color_stops.styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorStopsStyles = exports.euiColorStopsAddContainerStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _form = require("../../form/form.styles");
+
+var _range = require("../../form/range/range.styles");
+
+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)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;"
+} : {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopsStyles = function euiColorStopsStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var isDarkMode = colorMode === 'DARK';
+  var stripeColor = isDarkMode ? (0, _services.brighten)(range.trackColor, 0.5) : (0, _services.darken)(range.trackColor, 0.5);
+  var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(range.trackColor, ",\n    ").concat(range.trackColor, " 25%,\n    ").concat(stripeColor, " 25%,\n    ").concat(stripeColor, " 50%,\n    ").concat(range.trackColor, " 50%\n  )");
+  return {
+    // Base
+    euiColorStops: /*#__PURE__*/(0, _react.css)(";label:euiColorStops;"),
+    isEnabled: /*#__PURE__*/(0, _react.css)("&:focus{outline:none;}&:focus-visible{.euiColorStops__track::after{box-shadow:0 0 0 1px rgba(", (0, _services.hexToRgb)(euiTheme.colors.emptyShade).join(', '), ", 0.8),0 0 0 3px ", range.focusColor, ";}};label:isEnabled;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)(";label:isDisabled;"),
+    isHoverDisabled: /*#__PURE__*/(0, _react.css)(";label:isHoverDisabled;"),
+    isReadOnly: /*#__PURE__*/(0, _react.css)(";label:isReadOnly;"),
+    isDragging: _ref2,
+    euiColorStops__track: /*#__PURE__*/(0, _react.css)("&::after{background:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";};label:euiColorStops__track;"),
+    euiColorStops__addTarget: /*#__PURE__*/(0, _react.css)((0, _form.euiCustomControl)(euiThemeContext, {
+      type: 'round'
+    }), ";", (0, _range.euiRangeThumbStyle)(euiThemeContext), ";position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
+  };
+};
+
+exports.euiColorStopsStyles = euiColorStopsStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;"
+} : {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopsAddContainerStyles = function euiColorStopsAddContainerStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiColorStopsAddContainer: /*#__PURE__*/(0, _react.css)("display:block;position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:50%;block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";z-index:", range.thumbZIndex, ";;label:euiColorStopsAddContainer;"),
+    isEnabled: _ref,
+    isDisabled: /*#__PURE__*/(0, _react.css)(";label:isDisabled;")
+  };
+};
+
+exports.euiColorStopsAddContainerStyles = euiColorStopsAddContainerStyles;

package/test-env/components/form/range/range_highlight.styles.js

@@ -29,7 +29,7 @@ exports.euiRangeHighlightStyles = euiRangeHighlightStyles;
 var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 

package/test-env/components/form/range/range_levels.styles.js

@@ -29,7 +29,7 @@ var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext) {
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat((0, _services.transparentize)(stripeColor, 0.5), ",\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 50%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.s, " ", euiTheme.size.s, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };

package/test-env/components/form/range/range_track.js

@@ -19,6 +19,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _range = _interopRequireDefault(require("lodash/range"));
 
 var _services = require("../../../services");
@@ -31,7 +33,7 @@ var _range_track = require("./range_track.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange"];
+var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -51,6 +53,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       value = _ref.value,
       compressed = _ref.compressed,
       showRange = _ref.showRange,
+      className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   (0, _react.useEffect)(function () {
     validateValueIsInStep(max, {
@@ -109,8 +112,9 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       trackWidth = _useState2[0],
       setTrackWidth = _useState2[1];
 
+  var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: "euiRangeTrack",
+    className: classes,
     css: cssStyles
   }, rest, {
     ref: function ref(node) {

package/test-env/components/image/image.a11y.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _image = require("./image");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+var Image = function Image() {
+  return (0, _react2.jsx)(_image.EuiImage, {
+    size: "m",
+    hasShadow: true,
+    allowFullScreen: true,
+    caption: "Albert Einstein, theoretical physicist",
+    alt: "" // Because this image is sufficiently described by its caption, there is no need to repeat it via alt text
+    ,
+    src: "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg"
+  });
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount((0, _react2.jsx)(Image, null));
+  cy.get('figure[aria-label="Albert Einstein, theoretical physicist"]').should('exist');
+});
+describe('EuiImage', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on fullscreen render', function () {
+      cy.get('button[data-test-subj="activateFullScreenButton"]').realClick();
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
+      cy.checkAxe();
+      cy.get('div[data-test-subj="fullScreenOverlayMask"]').realClick();
+      cy.checkAxe();
+    });
+    it('has zero violations on keyboard interaction', function () {
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('have.focus');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _key_pad_menu = require("./key_pad_menu");
+
+var _key_pad_menu_item = require("./key_pad_menu_item");
+
+var _icon = require("../icon");
+
+var _services = require("../../services");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+var KeyPadMenu = function KeyPadMenu() {
+  var keypadButtonId__1 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'first'
+  });
+  var keypadButtonId__2 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'second'
+  });
+  var keypadButtonId__3 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'third'
+  });
+  var keypadButtonId__4 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'fourth'
+  });
+  var keypadButtonId__5 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'fifth'
+  });
+  var keypadButtonId__6 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'sixth'
+  });
+
+  var _useState = (0, _react.useState)(keypadButtonId__6),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedID = _useState2[0],
+      setSelectedID = _useState2[1];
+
+  return (0, _react2.jsx)("div", {
+    "aria-label": "Menu keypad"
+  }, (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenu, null, (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-1",
+    id: keypadButtonId__1,
+    label: "Button 1",
+    isSelected: selectedID === keypadButtonId__1,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__1);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-2",
+    id: keypadButtonId__2,
+    label: "Button 2",
+    isSelected: selectedID === keypadButtonId__2,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__2);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-3",
+    id: keypadButtonId__3,
+    label: "Button 3",
+    isSelected: selectedID === keypadButtonId__3,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__3);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-1",
+    id: keypadButtonId__4,
+    label: "Link 1",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__4,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__4);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-2",
+    id: keypadButtonId__5,
+    label: "Link 2",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__5,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__5);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-3",
+    id: keypadButtonId__6,
+    label: "Disabled Link 3",
+    isDisabled: true,
+    isSelected: selectedID === keypadButtonId__6
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount((0, _react2.jsx)(KeyPadMenu, null));
+  cy.get('div[aria-label="Menu keypad"]').should('exist');
+});
+describe('EuiKeyPadMenu', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on item click', function () {
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+    it('has zero violations on item keypress', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+      cy.realPress(['Shift', 'Tab']);
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/components/popover/popover.js

@@ -491,13 +491,13 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = (0, _react.jsx)(_portal.EuiPortal, {
           insert: insert
         }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
-          clickOutsideDisables: true
+          clickOutsideDisables: true,
+          onClickOutside: this.onClickOutside
         }, focusTrapProps, {
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
           onDeactivation: onTrapDeactivation,
-          onClickOutside: this.onClickOutside,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
         }), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {

package/test-env/components/table/table_footer_cell.js

@@ -55,6 +55,6 @@ EuiTableFooterCell.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
   width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired])
 };

package/test-env/components/table/table_header_cell.js

@@ -148,7 +148,7 @@ EuiTableHeaderCell.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
   isSortAscending: _propTypes.default.bool,
   isSorted: _propTypes.default.bool,
 

package/test-env/components/table/table_row_cell.js

@@ -208,7 +208,7 @@ EuiTableRowCell.propTypes = {
     /**
        * Horizontal alignment of the text in the cell
        */
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * _Should only be used for action cells_
@@ -230,7 +230,7 @@ EuiTableRowCell.propTypes = {
   /**
      * Horizontal alignment of the text in the cell
      */
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
 
   /**
      * _Should only be used for action cells_