@elastic/eui 98.0.0 → 98.1.0

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

@@ -39,10 +39,26 @@ var EuiTabs = exports.EuiTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_r
   var classes = (0, _classnames.default)('euiTabs', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_tabs.euiTabsStyles);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
+  var handleKeyDown = function handleKeyDown(event) {
+    var tablist = event.currentTarget;
+    var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role="tab"]:not(:disabled, [inert])');
+    if (!(tabs !== null && tabs !== void 0 && tabs.length)) return;
+    var currentIndex = Array.from(tabs).findIndex(function (tab) {
+      return tab.matches(':focus');
+    });
+    if (event.key === _services.keys.ARROW_LEFT) {
+      var previousIndex = (currentIndex === 0 ? tabs.length : currentIndex) - 1;
+      tabs[previousIndex].focus();
+    } else if (event.key === _services.keys.ARROW_RIGHT) {
+      var nextIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;
+      tabs[nextIndex].focus();
+    }
+  };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    onKeyDown: handleKeyDown
   }, children && {
     role: 'tablist'
   }, rest), (0, _react2.jsx)(_tabs_context.EuiTabsContext.Provider, {

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

@@ -46,8 +46,7 @@ var useEuiTextDiff = exports.useEuiTextDiff = function useEuiTextDiff(_ref) {
     return diff.main(beforeText, afterText);
   }, [beforeText, afterText, timeout]); // produces diff array
 
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _text_diff.euiTextDiffStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_text_diff.euiTextDiffStyles);
   var classes = (0, _classnames.default)('euiTextDiff', className);
   var rendereredHtml = (0, _react.useMemo)(function () {
     var html = [];

package/test-env/components/toast/global_toast_list_item.js

@@ -22,11 +22,8 @@ var EuiGlobalToastListItem = exports.EuiGlobalToastListItem = function EuiGlobal
   var children = _ref.children,
     className = _ref.className,
     isDismissed = _ref.isDismissed;
-  var euiTheme = (0, _services.useEuiTheme)();
-  if (!children) {
-    return null;
-  }
-  var styles = (0, _global_toast_list.euiGlobalToastListItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_global_toast_list.euiGlobalToastListItemStyles);
+  if (!children) return null;
   var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
   var classes = (0, _classnames.default)('euiGlobalToastListItem', children.props.className, className);
   return (0, _services.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, children.props), {

package/test-env/components/tour/_tour_footer.js

@@ -32,8 +32,7 @@ var EuiTourFooter = exports.EuiTourFooter = /*#__PURE__*/(0, _react.memo)(functi
     step = _ref.step,
     stepsTotal = _ref.stepsTotal,
     onFinish = _ref.onFinish;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var footerStyles = (0, _tour_footer.euiTourFooterStyles)(euiTheme);
+  var footerStyles = (0, _services.useEuiMemoizedStyles)(_tour_footer.euiTourFooterStyles);
   var customFooterAction = (0, _react.useMemo)(function () {
     if (!footerAction) return null;
     return Array.isArray(footerAction) ? (0, _react2.jsx)(_flex.EuiFlexGroup, {

package/test-env/components/tour/_tour_header.js

@@ -27,8 +27,7 @@ var EuiTourHeader = exports.EuiTourHeader = /*#__PURE__*/(0, _react.memo)(functi
   var id = _ref.id,
     title = _ref.title,
     subtitle = _ref.subtitle;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var headerStyles = (0, _tour_header.euiTourHeaderStyles)(euiTheme);
+  var headerStyles = (0, _services.useEuiMemoizedStyles)(_tour_header.euiTourHeaderStyles);
   return (0, _react2.jsx)(_popover.EuiPopoverTitle, {
     css: headerStyles.euiTourHeader,
     className: "euiTourHeader",

package/test-env/components/tour/tour_step.js

@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
-var _beacon = require("../beacon");
 var _popover = require("../popover");
-var _services = require("../../services");
+var _beacon = require("../beacon");
 var _tour_header = require("./_tour_header");
 var _tour_footer = require("./_tour_footer");
 var _tour = require("./tour.styles");
@@ -94,9 +94,8 @@ var EuiTourStep = exports.EuiTourStep = function EuiTourStep(_ref) {
   }, [anchor]);
   var anchorClasses = (0, _classnames.default)('euiTourAnchor', className);
   var popoverClasses = (0, _classnames.default)('euiTour', panelClassName);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var tourStyles = (0, _tour.euiTourStyles)(euiTheme);
-  var beaconStyles = (0, _tour.euiTourBeaconStyles)(euiTheme);
+  var tourStyles = (0, _services.useEuiMemoizedStyles)(_tour.euiTourStyles);
+  var beaconStyles = (0, _services.useEuiMemoizedStyles)(_tour.euiTourBeaconStyles);
   var beaconCss = [beaconStyles.euiTourBeacon, isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition]];
   var hasBeacon = decoration === 'beacon';
   var widthStyles = (0, _react.useMemo)(function () {

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

@@ -39,8 +39,7 @@ var EuiTreeViewItem = exports.EuiTreeViewItem = /*#__PURE__*/(0, _react.memo)(fu
     buttonRef = _ref.buttonRef,
     wrapperProps = _ref.wrapperProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _tree_view_item.euiTreeViewItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_tree_view_item.euiTreeViewItemStyles);
   var wrapperClasses = (0, _classnames.default)('euiTreeView__node', {
     'euiTreeView__node--expanded': isExpanded
   }, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);

package/test-env/global_styling/mixins/_helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiSupportsHas = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 var _theme = require("../../services/theme");
 var _color = require("../../services/color");
 var _functions = require("../functions");
@@ -171,10 +171,4 @@ var useEuiOverflowScroll = exports.useEuiOverflowScroll = function useEuiOverflo
  */
 var euiFullHeight = exports.euiFullHeight = function euiFullHeight() {
   return "\n  ".concat((0, _functions.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.
- */
-var euiSupportsHas = exports.euiSupportsHas = '@supports(selector(:has(p)))';
+};