@elastic/eui 72.0.0 → 72.1.0

package/lib/components/form/range/range_track.js

@@ -11,6 +11,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");
@@ -23,7 +25,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,6 +65,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       value = _ref.value,
       compressed = _ref.compressed,
       showRange = _ref.showRange,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   (0, _react.useEffect)(function () {
@@ -122,8 +125,9 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       trackWidth = _useState2[0],
       setTrackWidth = _useState2[1];
 
+  var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", _extends({
-    className: "euiRangeTrack",
+    className: classes,
     css: cssStyles
   }, rest, {
     ref: function ref(node) {

package/lib/components/image/image.a11y.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _image = require("./image");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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/lib/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,163 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 = _slicedToArray(_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/lib/components/popover/popover.js

@@ -535,13 +535,13 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = (0, _react.jsx)(_portal.EuiPortal, {
           insert: insert
         }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, _extends({
-          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, _extends({}, panelProps, {

package/lib/components/table/table_footer_cell.js

@@ -58,6 +58,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/lib/components/table/table_header_cell.js

@@ -151,7 +151,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/lib/components/table/table_row_cell.js

@@ -211,7 +211,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_
@@ -233,7 +233,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_

package/lib/services/color/manipulation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = exports.brighten = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -134,5 +134,17 @@ exports.lightness = lightness;
 var darken = function darken(color, amount) {
   return (0, _chromaJs.default)(color).darken(amount).hex();
 };
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.darken = darken;
+
+var brighten = function brighten(color, amount) {
+  return (0, _chromaJs.default)(color).brighten(amount).hex();
+};
 
-exports.darken = darken;
+exports.brighten = brighten;

package/lib/services/index.js

@@ -12,83 +12,84 @@ var _exportNames = {
   comboBoxKeys: true,
   htmlIdGenerator: true,
   useGeneratedHtmlId: true,
+  CENTER_ALIGNMENT: true,
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
-  CENTER_ALIGNMENT: true,
-  useIsWithinBreakpoints: true,
-  useIsWithinMaxBreakpoint: true,
-  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
-  isColorDark: true,
-  isValidHex: true,
+  useIsWithinBreakpoints: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
+  brighten: true,
   calculateContrast: true,
   calculateLuminance: true,
-  hexToHsv: true,
-  hexToRgb: true,
-  hsvToHex: true,
-  hsvToRgb: true,
-  rgbToHex: true,
-  rgbToHsv: true,
-  VISUALIZATION_COLORS: true,
-  DEFAULT_VISUALIZATION_COLOR: true,
   colorPalette: true,
-  euiPaletteForLightBackground: true,
-  euiPaletteForDarkBackground: true,
+  darken: true,
+  DEFAULT_VISUALIZATION_COLOR: true,
+  desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
+  euiPaletteComplimentary: true,
+  euiPaletteCool: true,
+  euiPaletteForDarkBackground: true,
+  euiPaletteForLightBackground: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
+  euiPaletteGray: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
-  euiPaletteCool: true,
   euiPaletteWarm: true,
-  euiPaletteGray: true,
   getSteppedGradient: true,
-  transparentize: true,
-  tint: true,
-  shade: true,
-  tintOrShade: true,
-  shadeOrTint: true,
-  saturate: true,
-  desaturate: true,
+  hexToHsv: true,
+  hexToRgb: true,
+  hsvToHex: true,
+  hsvToRgb: true,
+  isColorDark: true,
+  isValidHex: true,
   lightness: true,
-  darken: true,
-  makeHighContrastColor: true,
   makeDisabledContrastColor: true,
+  makeHighContrastColor: true,
+  rgbToHex: true,
+  rgbToHsv: true,
+  saturate: true,
+  shade: true,
+  shadeOrTint: true,
+  tint: true,
+  tintOrShade: true,
+  transparentize: true,
+  VISUALIZATION_COLORS: true,
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
   copyToClipboard: true,
+  dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
   formatDate: true,
   formatNumber: true,
   formatText: true,
-  dateFormatAliases: true,
   isEvenlyDivisibleBy: true,
   isWithinRange: true,
   Pager: true,
+  calculatePopoverPosition: true,
+  findPopoverPosition: true,
   Random: true,
   getSecureRelForTarget: true,
-  toSentenceCase: true,
-  toInitials: true,
-  slugify: true,
+  Comparators: true,
   PropertySortType: true,
-  SortDirectionType: true,
-  SortDirection: true,
   SortableProperties: true,
-  Comparators: true,
-  calculatePopoverPosition: true,
-  findPopoverPosition: true,
+  SortDirection: true,
+  SortDirectionType: true,
+  slugify: true,
+  toInitials: true,
+  toSentenceCase: true,
+  throttle: true,
   getDurationAndPerformOnFrame: true,
   getTransitionTimings: true,
   getWaitDuration: true,
   performOnFrame: true,
-  EuiWindowEvent: true,
-  throttle: true
+  EuiWindowEvent: true
 };
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "accessibleClickKeys", {
     return _accessibility.accessibleClickKeys;
   }
 });
+Object.defineProperty(exports, "brighten", {
+  enumerable: true,
+  get: function get() {
+    return _color.brighten;
+  }
+});
 Object.defineProperty(exports, "calculateContrast", {
   enumerable: true,
   get: function get() {
@@ -630,24 +637,6 @@ Object.keys(_findElement).forEach(function (key) {
 
 var _format = require("./format");
 
-var _number = require("./number");
-
-var _paging = require("./paging");
-
-var _random = require("./random");
-
-var _security = require("./security");
-
-var _string = require("./string");
-
-var _sort = require("./sort");
-
-var _popover = require("./popover");
-
-var _transition = require("./transition");
-
-var _window_event = require("./window_event");
-
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {
@@ -662,7 +651,19 @@ Object.keys(_hooks).forEach(function (key) {
   });
 });
 
-var _throttle = require("./throttle");
+var _number = require("./number");
+
+var _paging = require("./paging");
+
+var _popover = require("./popover");
+
+var _random = require("./random");
+
+var _security = require("./security");
+
+var _sort = require("./sort");
+
+var _string = require("./string");
 
 var _theme = require("./theme");
 
@@ -678,6 +679,12 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
+var _throttle = require("./throttle");
+
+var _transition = require("./transition");
+
+var _window_event = require("./window_event");
+
 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; }

package/optimize/es/components/basic_table/table.a11y.js

@@ -0,0 +1,128 @@
+/*
+ * 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"/>
+import React from 'react';
+import { EuiInMemoryTable } from './in_memory_table';
+import { EuiHealth } from '../health';
+import { EuiLink } from '../link';
+import { formatDate } from '../../services';
+import { createDataStore } from '../../../src-docs/src/views/tables/data_store';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var store = createDataStore();
+
+var InMemoryTable = function InMemoryTable() {
+  var columns = [{
+    field: 'firstName',
+    name: 'First Name',
+    sortable: true,
+    truncateText: true
+  }, {
+    field: 'lastName',
+    name: 'Last Name',
+    truncateText: true
+  }, {
+    field: 'github',
+    name: 'Github',
+    render: function render(username) {
+      return ___EmotionJSX(EuiLink, {
+        href: "https://github.com/".concat(username),
+        target: "_blank"
+      }, username);
+    }
+  }, {
+    field: 'dateOfBirth',
+    name: 'Date of Birth',
+    dataType: 'date',
+    render: function render(date) {
+      return formatDate(date, 'dobLong');
+    },
+    sortable: true
+  }, {
+    field: 'nationality',
+    name: 'Nationality',
+    render: function render(countryCode) {
+      var country = store.getCountry(countryCode);
+      return "".concat(country.flag, " ").concat(country.name);
+    }
+  }, {
+    field: 'online',
+    name: 'Online',
+    dataType: 'boolean',
+    render: function render(online) {
+      var color = online ? 'success' : 'danger';
+      var label = online ? 'Online' : 'Offline';
+      return ___EmotionJSX(EuiHealth, {
+        color: color
+      }, label);
+    },
+    sortable: true
+  }];
+  var sorting = {
+    sort: {
+      field: 'dateOfBirth',
+      direction: 'desc'
+    }
+  };
+  return ___EmotionJSX(EuiInMemoryTable, {
+    "data-test-subj": "cy-in-memory-table",
+    tableCaption: "Demo of EuiInMemoryTable",
+    items: store.users,
+    columns: columns,
+    pagination: true,
+    sorting: sorting
+  });
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(InMemoryTable, null));
+  cy.get('div[data-test-subj="cy-in-memory-table"]').should('exist');
+});
+describe('EuiInMemoryTable', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on pagination click', function () {
+      cy.get('a[data-test-subj="pagination-button-1"]').realClick();
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+    it('has zero violations after number of rows is increased', function () {
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').realClick();
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realClick();
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations after sorting on a column', function () {
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
+      cy.realPress('Enter');
+      cy.get('tbody tr.euiTableRow span.euiTableCellContent__text').first().contains('Another very long first name which will wrap or be truncated');
+    });
+    it('has zero violations when number of rows is increased by keyboard', function () {
+      cy.repeatRealPress('Tab', 14);
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('div[data-popover-open="true"]').should('have.focus');
+      cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
+
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations when pagination is pressed', function () {
+      cy.repeatRealPress('Tab', 15);
+      cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+  });
+});