@elastic/eui 68.0.0 → 70.0.0

package/optimize/es/components/icon/assets/infinity.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconInfinity = function EuiIconInfinity(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M5.37 9.457A1.994 1.994 0 013.993 10a2 2 0 111.403-3.433l.601.679 1.336-1.508-.462-.522a4 4 0 10-.041 5.613l.021-.022 3.777-4.265.002.001a2 2 0 11-.024 2.89l-.601-.679-1.336 1.508.462.522a4 4 0 100-5.569l-3.74 4.223a1.991 1.991 0 01-.02.02z"
+  }));
+};
+
+export var icon = EuiIconInfinity;

package/optimize/es/components/icon/assets/sortAscending.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconSortAscending = function EuiIconSortAscending(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M3.854 3.146a.5.5 0 00-.708 0l-2 2a.5.5 0 10.708.708L3 4.707V11.5a.5.5 0 001 0V4.707l1.146 1.147a.5.5 0 10.708-.708l-2-2zM8 4.5a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5zM8.5 7a.5.5 0 000 1h4a.5.5 0 000-1h-4zM8 10.5a.5.5 0 01.5-.5h2a.5.5 0 010 1h-2a.5.5 0 01-.5-.5z"
+  }));
+};
+
+export var icon = EuiIconSortAscending;

package/optimize/es/components/icon/assets/sortDescending.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconSortDescending = function EuiIconSortDescending(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M4 10.293V3.5a.5.5 0 00-1 0v6.793L1.854 9.146a.5.5 0 10-.708.708l2 2a.5.5 0 00.708 0l2-2a.5.5 0 10-.708-.708L4 10.293zM8 4.5a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5zM8.5 7a.5.5 0 000 1h4a.5.5 0 000-1h-4zM8 10.5a.5.5 0 01.5-.5h2a.5.5 0 010 1h-2a.5.5 0 01-.5-.5z"
+  }));
+};
+
+export var icon = EuiIconSortDescending;

package/optimize/es/components/icon/icon_map.js

@@ -134,6 +134,9 @@ export var typeToPathMap = {
   faceSad: 'face_sad',
   filebeatApp: 'app_filebeat',
   filter: 'filter',
+  filterExclude: 'filterExclude',
+  filterIgnore: 'filterIgnore',
+  filterInclude: 'filterInclude',
   flag: 'flag',
   fleetApp: 'app_agent',
   fold: 'fold',
@@ -173,6 +176,8 @@ export var typeToPathMap = {
   indexRollupApp: 'app_index_rollup',
   indexRuntime: 'index_runtime',
   indexSettings: 'index_settings',
+  indexTemporary: 'indexTemporary',
+  infinity: 'infinity',
   inputOutput: 'inputOutput',
   inspect: 'inspect',
   invert: 'invert',
@@ -333,6 +338,8 @@ export var typeToPathMap = {
   shard: 'shard',
   share: 'share',
   snowflake: 'snowflake',
+  sortAscending: 'sortAscending',
+  sortDescending: 'sortDescending',
   sortDown: 'sort_down',
   sortLeft: 'sortLeft',
   sortRight: 'sortRight',

package/optimize/es/components/image/image_fullscreen_wrapper.js

@@ -58,10 +58,10 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
   }, ___EmotionJSX(EuiFocusTrap, {
     onClickOutside: closeFullScreen
   }, ___EmotionJSX(React.Fragment, null, ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssStyles
+  }, wrapperProps, {
+    className: classes
   }), ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/optimize/es/components/overlay_mask/overlay_mask.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "css"];
+var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,12 +15,13 @@ var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "cs
  * into portals.
  */
 import React, { useEffect, useState } from 'react';
-import classNames from 'classnames';
+import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { keysOf } from '../common';
 import { useCombinedRefs, useEuiTheme } from '../../services';
 import { EuiPortal } from '../portal';
-import { euiOverlayMaskStyles, euiOverlayMaskBodyStyles } from './overlay_mask.styles';
+import { euiOverlayMaskStyles } from './overlay_mask.styles';
+import { euiOverlayMaskBodyStyles } from './overlay_mask_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiOverlayMask = function EuiOverlayMask(_ref) {
   var className = _ref.className,
@@ -28,7 +29,6 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
-      css = _ref.css,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(null),
@@ -39,7 +39,7 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
   var combinedMaskRef = useCombinedRefs([setOverlayMaskNode, maskRef]);
   var euiTheme = useEuiTheme();
   var styles = euiOverlayMaskStyles(euiTheme);
-  var cssStyles = [styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]];
+  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
   useEffect(function () {
     if (!overlayMaskNode) return;
     keysOf(rest).forEach(function (key) {
@@ -55,13 +55,12 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
 
   useEffect(function () {
     if (!overlayMaskNode) return;
-    overlayMaskNode.className = classNames('euiOverlayMask', className);
-  }, [overlayMaskNode, className]);
+    overlayMaskNode.className = cx('euiOverlayMask', cssStyles, className);
+    overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
+  }, [overlayMaskNode, className, cssStyles, headerZindexLocation]);
   return ___EmotionJSX(EuiPortal, {
     portalRef: combinedMaskRef
   }, ___EmotionJSX(Global, {
     styles: euiOverlayMaskBodyStyles
-  }), ___EmotionJSX(Global, {
-    styles: cssStyles
   }), children);
 };

package/optimize/es/components/overlay_mask/overlay_mask.styles.js

@@ -1,5 +1,3 @@
-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)."; }
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,22 +5,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { css } from '@emotion/react';
+import { css } from '@emotion/css';
 import { logicalCSS, euiAnimFadeIn } from '../../global_styling';
 import { transparentize } from '../../services';
 export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiOverlayMask: /*#__PURE__*/css(".euiOverlayMask{position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), ";animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", transparentize(euiTheme.colors.ink, 0.5), ";};label:euiOverlayMask;"),
-    aboveHeader: /*#__PURE__*/css(".euiOverlayMask{z-index:", euiTheme.levels.mask, ";};label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/css(".euiOverlayMask{z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', "".concat(euiTheme.base * 3, "px")), ";};label:belowHeader;")
+    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), ";animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", transparentize(euiTheme.colors.ink, 0.5), ";;label:euiOverlayMask;"),
+    aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
+    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', "".concat(euiTheme.base * 3, "px")), ";;label:belowHeader;")
   };
-};
-export var euiOverlayMaskBodyStyles = process.env.NODE_ENV === "production" ? {
-  name: "131160-euiOverlayMaskBodyStyles",
-  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;"
-} : {
-  name: "131160-euiOverlayMaskBodyStyles",
-  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };

package/optimize/es/components/overlay_mask/overlay_mask_body.styles.js

@@ -0,0 +1,18 @@
+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)."; }
+
+/*
+ * 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 { css } from '@emotion/react';
+export var euiOverlayMaskBodyStyles = process.env.NODE_ENV === "production" ? {
+  name: "131160-euiOverlayMaskBodyStyles",
+  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;"
+} : {
+  name: "131160-euiOverlayMaskBodyStyles",
+  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};

package/optimize/es/components/page/page_section/page_section.js

@@ -42,11 +42,12 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var colors = useEuiBackgroundColorCSS();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
   return ___EmotionJSX(Component, _extends({
     css: cssStyles
-  }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
-    css: cssContentStyles,
+  }, rest), ___EmotionJSX("div", _extends({
+    css: cssContentStyles
+  }, contentProps, {
     style: widthStyles
   }), children));
 };

package/optimize/es/components/pagination/pagination.js

@@ -209,10 +209,10 @@ export var EuiPagination = function EuiPagination(_ref) {
         'aria-labelledby': rest['aria-labelledby']
       });
 
-      centerPageCount = ___EmotionJSX("ul", _extends({}, accessibleName, {
-        css: paginationStyles.euiPagination__list,
-        className: "euiPagination__list"
-      }), firstPageButtons, selectablePages, lastPageButtons);
+      centerPageCount = ___EmotionJSX("ul", _extends({
+        className: "euiPagination__list",
+        css: paginationStyles.euiPagination__list
+      }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
     }
   } // All the i18n strings used to build the whole SR-only text
 

package/optimize/es/components/provider/provider.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import createCache from '@emotion/cache';
+import { cache as fallbackCache } from '@emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
@@ -18,10 +18,6 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
-var fallbackCache = createCache({
-  key: 'css'
-});
-fallbackCache.compat = true;
 export var EuiProvider = function EuiProvider(_ref) {
   var _defaultCache;
 

package/optimize/es/components/resizable_container/helpers.js

@@ -33,7 +33,7 @@ export var sizesOnly = function sizesOnly(panelObject) {
 
 var _getPanelMinSize = function _getPanelMinSize(panelMinSize, containerSize) {
   var panelMinSizePercent = 0;
-  var panelMinSizeInt = parseInt(panelMinSize);
+  var panelMinSizeInt = parseFloat(panelMinSize);
 
   if (panelMinSize.indexOf('px') > -1) {
     panelMinSizePercent = pxToPercent(panelMinSizeInt, containerSize);
@@ -63,7 +63,7 @@ var getSiblingPanel = function getSiblingPanel(element, adjacency) {
   var sibling = element[method];
 
   while (sibling) {
-    if (sibling.matches('.euiResizablePanel:not(.euiResizablePanel-isCollapsed)')) {
+    if (sibling.matches('.euiResizablePanel:not([data-collapsed])')) {
       return sibling;
     }
 

package/optimize/es/components/resizable_container/resizable_container.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed"];
+var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed", "onResizeStart", "onResizeEnd"];
 
 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; }
 
@@ -23,11 +23,8 @@ import { EuiResizableContainerContextProvider } from './context';
 import { euiResizableButtonWithControls } from './resizable_button';
 import { euiResizablePanelWithControls, getModeType } from './resizable_panel';
 import { useContainerCallbacks, getPosition } from './helpers';
+import { euiResizableContainerStyles } from './resizable_container.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var containerDirections = {
-  vertical: 'vertical',
-  horizontal: 'horizontal'
-};
 var initialState = {
   isDragging: false,
   currentResizerPos: -1,
@@ -44,14 +41,15 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       className = _ref.className,
       onPanelWidthChange = _ref.onPanelWidthChange,
       onToggleCollapsed = _ref.onToggleCollapsed,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = useRef(null);
-  var isHorizontal = direction === containerDirections.horizontal;
-  var classes = classNames('euiResizableContainer', {
-    'euiResizableContainer--vertical': !isHorizontal,
-    'euiResizableContainer--horizontal': isHorizontal
-  }, className);
+  var isHorizontal = direction === 'horizontal';
+  var classes = classNames('euiResizableContainer', className);
+  var styles = euiResizableContainerStyles();
+  var cssStyles = [styles.euiResizableContainer, styles[direction]];
 
   var _useContainerCallback = useContainerCallbacks({
     initialState: _objectSpread(_objectSpread({}, initialState), {}, {
@@ -73,6 +71,26 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       initialize();
     }
   }, [initialize, containerSize]);
+  var resizeContext = useRef({});
+  var resizeEnd = useCallback(function () {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    resizeContext.current = {};
+  }, [onResizeEnd]);
+  var resizeStart = useCallback(function (trigger, keyMoveDirection) {
+    // If another resize starts while the previous one is still in progress
+    // (e.g. user presses opposite arrow to change direction while the first
+    // is still held down, or user presses an arrow while dragging with the
+    // mouse), we want to signal the end of the previous resize first.
+    if (resizeContext.current.trigger) {
+      resizeEnd();
+    }
+
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(trigger);
+    resizeContext.current = {
+      trigger: trigger,
+      keyMoveDirection: keyMoveDirection
+    };
+  }, [onResizeStart, resizeEnd]);
   var onMouseDown = useCallback(function (event) {
     var currentTarget = event.currentTarget;
     var prevPanel = currentTarget.previousElementSibling;
@@ -81,12 +99,13 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
     var prevPanelId = prevPanel.id;
     var nextPanelId = nextPanel.id;
     var position = getPosition(event, isHorizontal);
+    resizeStart('pointer');
     actions.dragStart({
       position: position,
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal]);
+  }, [actions, isHorizontal, resizeStart]);
   var onMouseMove = useCallback(function (event) {
     if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
     var position = getPosition(event, isHorizontal);
@@ -96,24 +115,29 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       nextPanelId: reducerState.nextPanelId
     });
   }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+  var getKeyMoveDirection = useCallback(function (key) {
+    var direction = null;
+
+    if (isHorizontal && key === keys.ARROW_LEFT || !isHorizontal && key === keys.ARROW_UP) {
+      direction = 'backward';
+    } else if (isHorizontal && key === keys.ARROW_RIGHT || !isHorizontal && key === keys.ARROW_DOWN) {
+      direction = 'forward';
+    }
+
+    return direction;
+  }, [isHorizontal]);
   var onKeyDown = useCallback(function (event) {
     var key = event.key,
         currentTarget = event.currentTarget;
-    var shouldResizeHorizontalPanel = isHorizontal && (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT);
-    var shouldResizeVerticalPanel = !isHorizontal && (key === keys.ARROW_UP || key === keys.ARROW_DOWN);
+    var direction = getKeyMoveDirection(key);
     var prevPanelId = currentTarget.previousElementSibling.id;
     var nextPanelId = currentTarget.nextElementSibling.id;
-    var direction;
 
-    if (key === keys.ARROW_DOWN || key === keys.ARROW_RIGHT) {
-      direction = 'forward';
-    }
+    if (direction && prevPanelId && nextPanelId) {
+      if (!event.repeat) {
+        resizeStart('key', direction);
+      }
 
-    if (key === keys.ARROW_UP || key === keys.ARROW_LEFT) {
-      direction = 'backward';
-    }
-
-    if (direction === 'forward' || direction === 'backward' && (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) && prevPanelId && nextPanelId) {
       event.preventDefault();
       actions.keyMove({
         direction: direction,
@@ -121,17 +145,40 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
         nextPanelId: nextPanelId
       });
     }
-  }, [actions, isHorizontal]);
+  }, [actions, getKeyMoveDirection, resizeStart]);
+  var onKeyUp = useCallback(function (_ref2) {
+    var key = _ref2.key;
+
+    // We only want to signal the end of a resize if the key that was released
+    // is the same as the one that started the resize. This prevents the end
+    // of a resize if the user presses one arrow key, then presses the opposite
+    // arrow key to change direction, then releases the first arrow key.
+    if (resizeContext.current.trigger === 'key' && resizeContext.current.keyMoveDirection === getKeyMoveDirection(key)) {
+      resizeEnd();
+    }
+  }, [getKeyMoveDirection, resizeEnd]);
   var onMouseUp = useCallback(function () {
+    if (resizeContext.current.trigger === 'pointer') {
+      resizeEnd();
+    }
+
     actions.reset();
-  }, [actions]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, resizeEnd]);
+  var onBlur = useCallback(function () {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+
+    actions.resizerBlur();
+  }, [actions, resizeEnd]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var EuiResizableButton = useCallback(euiResizableButtonWithControls({
     onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onFocus: actions.resizerFocus,
-    onBlur: actions.resizerBlur,
+    onBlur: onBlur,
     isHorizontal: isHorizontal,
     registration: {
       register: actions.registerResizer,
@@ -175,6 +222,7 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       resizers: reducerState.resizers
     }
   }, ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes,
     ref: containerRef,
     onMouseMove: reducerState.isDragging ? onMouseMove : undefined,

package/optimize/es/components/resizable_container/resizable_container.styles.js

@@ -0,0 +1,28 @@
+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)."; }
+
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "omnk2l-vertical",
+  styles: "flex-direction:column;label:vertical;"
+} : {
+  name: "omnk2l-vertical",
+  styles: "flex-direction:column;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiResizableContainerStyles = function euiResizableContainerStyles() {
+  return {
+    euiResizableContainer: /*#__PURE__*/css("display:flex;", logicalCSS('width', '100%'), ";;label:euiResizableContainer;"),
+    horizontal: /*#__PURE__*/css(";label:horizontal;"),
+    vertical: _ref
+  };
+};