@elastic/eui 70.2.4 → 70.3.0

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

@@ -0,0 +1,86 @@
+"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 _popover = require("./popover");
+
+var _button = require("../button");
+
+var _text = require("../text");
+
+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 Popover = function Popover() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPopoverOpen = _useState2[0],
+      setIsPopoverOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsPopoverOpen(function (isPopoverOpen) {
+      return !isPopoverOpen;
+    });
+  };
+
+  var closePopover = function closePopover() {
+    return setIsPopoverOpen(false);
+  };
+
+  var button = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    iconType: "documentation",
+    iconSide: "right",
+    onClick: onButtonClick
+  }, "How it works");
+  var popoverProps = {
+    button: button,
+    isOpen: isPopoverOpen,
+    closePopover: closePopover
+  };
+  return (0, _react2.jsx)(_popover.EuiPopover, popoverProps, (0, _react2.jsx)(_text.EuiText, {
+    style: {
+      width: 300
+    }
+  }, (0, _react2.jsx)("p", null, "Popover content that\u2019s wider than the default width")));
+};
+
+beforeEach(function () {
+  cy.mount((0, _react2.jsx)(Popover, null));
+  cy.get('div.euiPopover__panel').should('not.exist');
+});
+describe('EuiPopover', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/components/search_bar/query/default_syntax.js

@@ -3506,7 +3506,8 @@ var printValue = function printValue(value, options) {
     return value.toString();
   }
 
-  if (value.length === 0 || value.match(/\s/) || value.toLowerCase() === 'or') {
+  if (value.length === 0 || value.match(/[^\w\-_*:()"/\\]/) || // Escape spaces and special characters not used as syntax identifiers
+  value.toLowerCase() === 'or') {
     return "\"".concat(escapePhraseValue(value), "\"");
   }
 

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tabbed_content = require("./tabbed_content");
+
+var _spacer = require("../spacer");
+
+var _text = require("../text");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var tabs = [{
+  id: 'cobalt--id',
+  name: 'Cobalt',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth\u2019s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.")))
+}, {
+  id: 'dextrose--id',
+  name: 'Dextrose',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.")))
+}, {
+  id: 'hydrogen--id',
+  name: 'Hydrogen',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table")))
+}, {
+  id: 'monosodium_glutammate--id',
+  name: 'Monosodium Glutamate',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.")))
+}];
+var defaultTabProps = {
+  tabs: tabs,
+  initialSelectedTab: tabs[0],
+  autoFocus: 'selected',
+  onTabClick: function onTabClick() {}
+};
+describe('EuiTabs', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations with default props', function () {
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, defaultTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with second tab open on render', function () {
+      var secondSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[1]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, secondSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with third tab open on render', function () {
+      var thirdSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[2]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, thirdSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with last tab open on render', function () {
+      var lastSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[3]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, lastSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with all tabs disabled except first', function () {
+      var disabledTabs = tabs.map(function (tab, i) {
+        if (i === 0) {
+          return tab;
+        }
+
+        return _objectSpread(_objectSpread({}, tab), {}, {
+          disabled: true
+        });
+      });
+
+      var disabledTabProps = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        tabs: disabledTabs
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, disabledTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tree_view = require("./tree_view");
+
+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 TreeView = function TreeView() {
+  var items = [{
+    label: 'Item One',
+    id: 'item_one',
+    isExpanded: true,
+    children: [{
+      label: 'Item A',
+      id: 'item_a'
+    }, {
+      label: 'Item B',
+      id: 'item_b',
+      children: [{
+        label: 'A Cloud',
+        id: 'item_cloud'
+      }, {
+        label: "I'm a Bug",
+        id: 'item_bug',
+        className: 'classForBug'
+      }]
+    }, {
+      label: 'Item C',
+      id: 'item_c',
+      children: [{
+        label: 'Another Cloud',
+        id: 'item_cloud2'
+      }, {
+        label: 'Another Bug',
+        id: 'item_bug2'
+      }]
+    }]
+  }, {
+    label: 'Item Two',
+    id: 'item_two'
+  }];
+  var defaultTreeViewProps = {
+    items: items,
+    'aria-label': 'Sample folder tree'
+  };
+  return (0, _react2.jsx)("div", {
+    style: {
+      width: '20rem'
+    }
+  }, (0, _react2.jsx)(_tree_view.EuiTreeView, defaultTreeViewProps));
+};
+
+describe('EuiTreeView', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with a nested child expanded', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.get('button#item_b').realClick();
+      cy.get('button#item_b').should('have.attr', 'aria-expanded', 'true');
+      cy.get('li.euiTreeView__node').contains('A Cloud').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/global_styling/utility/animations.js

@@ -5,13 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.euiAnimFadeIn = euiAnimFadeIn;
+exports.euiAnimFadeIn = euiAnimFadeIn;
+
+var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
+  return (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
+};
+
+exports.euiAnimSlideInUp = euiAnimSlideInUp;

package/src/components/modal/_index.scss

@@ -1 +0,0 @@
-@import 'modal';

package/src/components/modal/_modal.scss

@@ -1,156 +0,0 @@
-.euiModal {
-  border: $euiBorderThin;
-  // This mixin overwrites some of the border above
-  @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
-  display: flex;
-  flex-direction: column;
-  max-height: 75vh; // We overflow the modal body based off this
-
-  // TODO: Consider restoring this once https://bugs.chromium.org/p/chromium/issues/detail?id=1229700 is resolved
-  // overflow: hidden; Ensure long, non-breaking text doesn't expand beyond the modal bounds
-
-  position: relative;
-  background-color: $euiColorEmptyShade;
-  border-radius: $euiBorderRadius;
-  z-index: $euiZModal;
-  min-width: $euiFormMaxWidth;
-  animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
-  max-width: calc(100vw - #{$euiSize});
-
-  // Remove the outline from the focusable container
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiModal--maxWidth-default {
-  // Sass and CSS's versions of `min` collide here, so we use all uppercase to ensure the CSS version is used
-  // https://css-tricks.com/when-sass-and-new-css-features-collide/#the-solution
-  // sass-lint:disable-block function-name-format
-  max-width: MIN(#{map-get($euiBreakpoints, 'm')}, calc(100vw - #{$euiSize}));
-}
-
-.euiModal--confirmation {
-  min-width: $euiFormMaxWidth;
-}
-
-.euiModalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.euiModalHeader__title {
-  @include euiTitle('m');
-}
-
-.euiModalBody {
-  flex-grow: 1;
-  overflow: hidden;
-  // The below fixes scroll on Chrome and Safari
-  display: flex;
-  flex-direction: column;
-
-  .euiModalBody__overflow {
-    @include euiYScrollWithShadows;
-    padding: $euiSizeS $euiSizeL;
-  }
-}
-
-.euiModalFooter {
-  display: flex;
-  justify-content: flex-end;
-  padding: $euiSize $euiSizeL $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
-
-  > * + * {
-    margin-left: $euiSize;
-  }
-}
-
-// If a body doesn't exist, remove some extra padding from footer
-.euiModalHeader + .euiModalFooter {
-  padding-top: $euiSizeS;
-}
-
-// If a footer doesn't exist (body is the last element) add padding to the bottom
-.euiModalBody:last-of-type .euiModalBody__overflow {
-  padding-bottom: $euiSizeL;
-}
-
-
-// The actual size of the X button in pixels is a bit fuzzy because of all the
-// button padding so there is some pixel pushing here.
-.euiModal__closeIcon {
-  background-color: transparentize($euiColorEmptyShade, .1);
-  position: absolute;
-  right: $euiSizeXS;
-  top: $euiSizeXS;
-  z-index: 3;
-}
-
-@keyframes euiModal {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSizeXL);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// On mobile we fix modals as a takeover.
-@include euiBreakpoint('xs', 's') {
-  .euiModal {
-    // sass-lint:disable-block no-important
-    position: fixed;
-    width: 100vw !important;
-    max-width: none !important;
-    min-width: 0 !important;
-    max-height: 100vh;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    border-radius: 0;
-    border: none;
-
-    &.euiModal--confirmation {
-      @include euiBottomShadowLarge($reverse: true);
-      top: auto;
-    }
-  }
-
-  .euiModalHeader {
-    width: 100%;
-  }
-
-  .euiModalFooter {
-    width: 100%;
-    background: $euiColorLightestShade;
-    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
-    justify-content: stretch;
-
-    > * {
-      flex: 1;
-
-      + * {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .euiModalBody {
-    width: 100%;
-
-    .euiModalBody__overflow {
-      padding-bottom: $euiSizeL;
-    }
-  }
-}

package/src/themes/amsterdam/overrides/_modal.scss

@@ -1,3 +0,0 @@
-.euiModal {
-  border: none;
-}