@elastic/eui 68.0.0 → 70.0.0

package/lib/components/provider/provider.js

@@ -7,7 +7,7 @@ exports.EuiProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _cache = _interopRequireDefault(require("@emotion/cache"));
+var _css = require("@emotion/css");
 
 var _global_styles = require("../../global_styling/reset/global_styles");
 
@@ -17,7 +17,7 @@ var _services = require("../../services");
 
 var _themes = require("../../themes");
 
-var _cache2 = require("./cache");
+var _cache = require("./cache");
 
 var _react2 = require("@emotion/react");
 
@@ -34,16 +34,11 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
-var fallbackCache = (0, _cache.default)({
-  key: 'css'
-});
-fallbackCache.compat = true;
-
 var EuiProvider = function EuiProvider(_ref) {
   var _defaultCache;
 
   var _ref$cache = _ref.cache,
-      cache = _ref$cache === void 0 ? fallbackCache : _ref$cache,
+      cache = _ref$cache === void 0 ? _css.cache : _ref$cache,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? _themes.EuiThemeAmsterdam : _ref$theme,
       _ref$globalStyles = _ref.globalStyles,
@@ -82,16 +77,16 @@ var EuiProvider = function EuiProvider(_ref) {
     }
   }
 
-  return (0, _react2.jsx)(_cache2.EuiCacheProvider, {
-    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
+  return (0, _react2.jsx)(_cache.EuiCacheProvider, {
+    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : _css.cache
   }, (0, _react2.jsx)(_services.EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
     colorMode: colorMode,
     modify: modify
-  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache2.EuiCacheProvider, {
+  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: globalCache,
     children: Globals && (0, _react2.jsx)(Globals, null)
-  }), (0, _react2.jsx)(_cache2.EuiCacheProvider, {
+  }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)));

package/lib/components/resizable_container/helpers.js

@@ -51,7 +51,7 @@ exports.sizesOnly = sizesOnly;
 
 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);
@@ -86,7 +86,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/lib/components/resizable_container/resizable_container.js

@@ -25,9 +25,11 @@ var _resizable_panel = require("./resizable_panel");
 
 var _helpers = require("./helpers");
 
+var _resizable_container = require("./resizable_container.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed"];
+var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed", "onResizeStart", "onResizeEnd"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,10 +61,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var containerDirections = {
-  vertical: 'vertical',
-  horizontal: 'horizontal'
-};
 var initialState = {
   isDragging: false,
   currentResizerPos: -1,
@@ -80,14 +78,15 @@ 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 = (0, _react.useRef)(null);
-  var isHorizontal = direction === containerDirections.horizontal;
-  var classes = (0, _classnames.default)('euiResizableContainer', {
-    'euiResizableContainer--vertical': !isHorizontal,
-    'euiResizableContainer--horizontal': isHorizontal
-  }, className);
+  var isHorizontal = direction === 'horizontal';
+  var classes = (0, _classnames.default)('euiResizableContainer', className);
+  var styles = (0, _resizable_container.euiResizableContainerStyles)();
+  var cssStyles = [styles.euiResizableContainer, styles[direction]];
 
   var _useContainerCallback = (0, _helpers.useContainerCallbacks)({
     initialState: _objectSpread(_objectSpread({}, initialState), {}, {
@@ -109,6 +108,26 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       initialize();
     }
   }, [initialize, containerSize]);
+  var resizeContext = (0, _react.useRef)({});
+  var resizeEnd = (0, _react.useCallback)(function () {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    resizeContext.current = {};
+  }, [onResizeEnd]);
+  var resizeStart = (0, _react.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 = (0, _react.useCallback)(function (event) {
     var currentTarget = event.currentTarget;
     var prevPanel = currentTarget.previousElementSibling;
@@ -117,12 +136,13 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
     var prevPanelId = prevPanel.id;
     var nextPanelId = nextPanel.id;
     var position = (0, _helpers.getPosition)(event, isHorizontal);
+    resizeStart('pointer');
     actions.dragStart({
       position: position,
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal]);
+  }, [actions, isHorizontal, resizeStart]);
   var onMouseMove = (0, _react.useCallback)(function (event) {
     if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
     var position = (0, _helpers.getPosition)(event, isHorizontal);
@@ -132,24 +152,29 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       nextPanelId: reducerState.nextPanelId
     });
   }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+  var getKeyMoveDirection = (0, _react.useCallback)(function (key) {
+    var direction = null;
+
+    if (isHorizontal && key === _services.keys.ARROW_LEFT || !isHorizontal && key === _services.keys.ARROW_UP) {
+      direction = 'backward';
+    } else if (isHorizontal && key === _services.keys.ARROW_RIGHT || !isHorizontal && key === _services.keys.ARROW_DOWN) {
+      direction = 'forward';
+    }
+
+    return direction;
+  }, [isHorizontal]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     var key = event.key,
         currentTarget = event.currentTarget;
-    var shouldResizeHorizontalPanel = isHorizontal && (key === _services.keys.ARROW_LEFT || key === _services.keys.ARROW_RIGHT);
-    var shouldResizeVerticalPanel = !isHorizontal && (key === _services.keys.ARROW_UP || key === _services.keys.ARROW_DOWN);
+    var direction = getKeyMoveDirection(key);
     var prevPanelId = currentTarget.previousElementSibling.id;
     var nextPanelId = currentTarget.nextElementSibling.id;
-    var direction;
 
-    if (key === _services.keys.ARROW_DOWN || key === _services.keys.ARROW_RIGHT) {
-      direction = 'forward';
-    }
+    if (direction && prevPanelId && nextPanelId) {
+      if (!event.repeat) {
+        resizeStart('key', direction);
+      }
 
-    if (key === _services.keys.ARROW_UP || key === _services.keys.ARROW_LEFT) {
-      direction = 'backward';
-    }
-
-    if (direction === 'forward' || direction === 'backward' && (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) && prevPanelId && nextPanelId) {
       event.preventDefault();
       actions.keyMove({
         direction: direction,
@@ -157,17 +182,40 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
         nextPanelId: nextPanelId
       });
     }
-  }, [actions, isHorizontal]);
+  }, [actions, getKeyMoveDirection, resizeStart]);
+  var onKeyUp = (0, _react.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 = (0, _react.useCallback)(function () {
+    if (resizeContext.current.trigger === 'pointer') {
+      resizeEnd();
+    }
+
     actions.reset();
-  }, [actions]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, resizeEnd]);
+  var onBlur = (0, _react.useCallback)(function () {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+
+    actions.resizerBlur();
+  }, [actions, resizeEnd]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var EuiResizableButton = (0, _react.useCallback)((0, _resizable_button.euiResizableButtonWithControls)({
     onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onFocus: actions.resizerFocus,
-    onBlur: actions.resizerBlur,
+    onBlur: onBlur,
     isHorizontal: isHorizontal,
     registration: {
       register: actions.registerResizer,
@@ -211,6 +259,7 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       resizers: reducerState.resizers
     }
   }, (0, _react2.jsx)("div", _extends({
+    css: cssStyles,
     className: classes,
     ref: containerRef,
     onMouseMove: reducerState.isDragging ? onMouseMove : undefined,
@@ -240,6 +289,16 @@ EuiResizableContainer.propTypes = {
      */
   onPanelWidthChange: _propTypes.default.func,
   onToggleCollapsed: _propTypes.default.func,
+
+  /**
+     * Called when resizing starts
+     */
+  onResizeStart: _propTypes.default.func,
+
+  /**
+     * Called when resizing ends
+     */
+  onResizeEnd: _propTypes.default.func,
   style: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,

package/lib/components/resizable_container/resizable_container.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiResizableContainerStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+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 _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__
+};
+
+var euiResizableContainerStyles = function euiResizableContainerStyles() {
+  return {
+    euiResizableContainer: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiResizableContainer;"),
+    horizontal: /*#__PURE__*/(0, _react.css)(";label:horizontal;"),
+    vertical: _ref
+  };
+};
+
+exports.euiResizableContainerStyles = euiResizableContainerStyles;

package/lib/components/resizable_container/resizable_panel.js

@@ -13,16 +13,20 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _context = require("./context");
-
 var _services = require("../../services");
 
+var _global_styling = require("../../global_styling");
+
+var _context = require("./context");
+
 var _panel = require("../panel");
 
 var _i18n = require("../i18n");
 
 var _resizable_collapse_button = require("./resizable_collapse_button");
 
+var _resizable_panel = require("./resizable_panel.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
@@ -47,14 +51,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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 panelPaddingValues = {
-  none: 0,
-  xs: 4,
-  s: 8,
-  m: 16,
-  l: 24,
-  xl: 32
-};
 var defaultToggleOptions = {
   className: null,
   'data-test-subj': undefined,
@@ -72,12 +68,6 @@ var getToggleOptions = function getToggleOptions(mode) {
 };
 
 exports.getToggleOptions = getToggleOptions;
-var paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiResizablePanel--paddingSmall',
-  m: 'euiResizablePanel--paddingMedium',
-  l: 'euiResizablePanel--paddingLarge'
-};
 
 var getPosition = function getPosition(ref) {
   var position = 'middle';
@@ -184,34 +174,18 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
 
     return direction;
   }, [isCollapsed, isCollapsible, position, panels, panelId]);
-  var padding = (0, _react.useMemo)(function () {
-    return "".concat(panelPaddingValues[paddingSize] * 2, "px");
-  }, [paddingSize]);
-  var classes = (0, _classnames.default)('euiResizablePanel', // @ts-expect-error EuiPanel increased its available sizes
-  // When we convert this component to Emotion, we should also increase sizes to match EuiPanel and remove this comment.
-  paddingSizeToClassNameMap[wrapperPadding], {
-    'euiResizablePanel--collapsible': isCollapsible,
-    'euiResizablePanel-isCollapsed': isCollapsed
-  }, "euiResizablePanel--".concat(position), wrapperProps && wrapperProps.className);
-  var panelClasses = (0, _classnames.default)('euiResizablePanel__content', {
-    'euiResizablePanel__content--scrollable': scrollable
-  }, className);
-  var dimensions;
-
-  if (size) {
-    dimensions = {
-      width: isHorizontal ? "".concat(size, "%") : '100%',
-      height: isHorizontal ? 'auto' : "".concat(size, "%")
-    };
-  } else {
-    dimensions = {
-      width: isHorizontal ? "".concat(innerSize, "%") : '100%',
-      height: isHorizontal ? 'auto' : "".concat(innerSize, "%")
-    };
-  }
-
-  var styles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), dimensions);
-
+  var axis = isHorizontal ? 'horizontal' : 'vertical';
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _resizable_panel.euiResizablePanelStyles)(euiTheme);
+  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, styles.paddingSizes[wrapperPadding]];
+  var contentStyles = (0, _resizable_panel.euiResizablePanelContentStyles)(euiTheme);
+  var contentCssStyles = [contentStyles.euiResizablePanel__content, scrollable && contentStyles.scrollable, isCollapsed && contentStyles.collapsedChildren, isCollapsed && !isCollapsible && contentStyles[axis].collapsed, isCollapsible && contentStyles[axis].hasCollapsibleButton];
+  var classes = (0, _classnames.default)('euiResizablePanel', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
+  var panelClasses = (0, _classnames.default)('euiResizablePanel__content', className);
+
+  var inlineStyles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), isHorizontal ? (0, _global_styling.logicalSizeStyle)("".concat(size || innerSize, "%"), 'auto') : (0, _global_styling.logicalSizeStyle)('100%', "".concat(size || innerSize, "%")));
+
+  var padding = (0, _global_styling.euiPaddingSize)(euiTheme, paddingSize) || '0px';
   (0, _react.useEffect)(function () {
     if (!registration) return;
     var initSize = size !== null && size !== void 0 ? size : initialSize || 0;
@@ -263,7 +237,7 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     theResizer = resizers[resizerIds.current[0]];
     theToggle = (0, _react2.jsx)(_resizable_collapse_button.EuiResizableCollapseButton, {
       externalPosition: "before",
-      direction: isHorizontal ? 'horizontal' : 'vertical',
+      direction: axis,
       isVisible: theResizer && (theResizer.isFocused || theResizer.isDisabled),
       isCollapsed: theResizer && theResizer.isDisabled,
       internalPosition: toggleOpts.position,
@@ -275,7 +249,7 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     theResizer = resizers[resizerIds.current[1]];
     theToggle = (0, _react2.jsx)(_resizable_collapse_button.EuiResizableCollapseButton, {
       externalPosition: "after",
-      direction: isHorizontal ? 'horizontal' : 'vertical',
+      direction: axis,
       isVisible: theResizer && (theResizer.isFocused || theResizer.isDisabled),
       isCollapsed: theResizer && theResizer.isDisabled,
       internalPosition: toggleOpts.position,
@@ -285,12 +259,17 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     });
   }
 
-  return (0, _react2.jsx)("div", _extends({}, wrapperProps, {
+  return (0, _react2.jsx)("div", _extends({
+    css: cssStyles
+  }, wrapperProps, {
     id: panelId,
     ref: divRef,
-    style: styles,
-    className: classes
+    style: inlineStyles,
+    className: classes,
+    "data-collapsed": isCollapsed || undefined,
+    "data-position": position
   }), hasVisibleToggle && hasLeftToggle && theToggle, (0, _react2.jsx)(_panel.EuiPanel, _extends({
+    css: contentCssStyles,
     className: panelClasses,
     hasShadow: hasShadow,
     borderRadius: borderRadius,

package/lib/components/resizable_container/resizable_panel.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiResizablePanelStyles = exports.euiResizablePanelContentStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+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) { _defineProperty(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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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: "11qmbh3-collapsed",
+  styles: "overflow:hidden;label:collapsed;"
+} : {
+  name: "11qmbh3-collapsed",
+  styles: "overflow:hidden;label:collapsed;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "15ifdgc-euiResizablePanel",
+  styles: "position:relative;label:euiResizablePanel;"
+} : {
+  name: "15ifdgc-euiResizablePanel",
+  styles: "position:relative;label:euiResizablePanel;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiResizablePanelStyles = function euiResizablePanelStyles(euiThemeContext) {
+  return {
+    euiResizablePanel: _ref3,
+    collapsed: _ref2,
+    paddingSizes: _objectSpread({}, (0, _global_styling.euiPaddingSizeCSS)(euiThemeContext))
+  };
+};
+
+exports.euiResizablePanelStyles = euiResizablePanelStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "597kt8-collapsedChildren",
+  styles: "*{display:none;};label:collapsedChildren;"
+} : {
+  name: "597kt8-collapsedChildren",
+  styles: "*{display:none;};label:collapsedChildren;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiResizablePanelContentStyles = function euiResizablePanelContentStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiResizablePanel__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiResizablePanel__content;"),
+    scrollable: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";;label:scrollable;"),
+    collapsedChildren: _ref,
+    horizontal: {
+      collapsed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', '0 !important'), ";;label:collapsed;"),
+      hasCollapsibleButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.size.l, " !important")), ";;label:hasCollapsibleButton;")
+    },
+    vertical: {
+      collapsed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', '0 !important'), ";;label:collapsed;"),
+      hasCollapsibleButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', "".concat(euiTheme.size.l, " !important")), ";;label:hasCollapsibleButton;")
+    }
+  };
+};
+
+exports.euiResizablePanelContentStyles = euiResizablePanelContentStyles;

package/lib/components/search_bar/query/ast.js

@@ -287,6 +287,10 @@ var arrayIncludesValue = function arrayIncludesValue(array, value) {
     return valuesEqual(item, value);
   });
 };
+
+var mustToMatch = function mustToMatch(must) {
+  return must === true ? Match.MUST : Match.MUST_NOT;
+};
 /**
  * The AST structure is an array of clauses. There are 3 types of clauses that are supported:
  *
@@ -411,9 +415,16 @@ var _AST = /*#__PURE__*/function () {
     }
   }, {
     key: "getOrFieldClause",
-    value: function getOrFieldClause(field, value) {
+    value: function getOrFieldClause(field, value, must, operator) {
       return this.getFieldClause(field, function (clause) {
-        return (0, _predicate.isArray)(clause.value) && ((0, _predicate.isNil)(value) || arrayIncludesValue(clause.value, value));
+        if (!(0, _predicate.isArray)(clause.value)) {
+          return false;
+        }
+
+        var matchValue = (0, _predicate.isNil)(value) || arrayIncludesValue(clause.value, value);
+        var matchMust = (0, _predicate.isNil)(must) || mustToMatch(must) === clause.match;
+        var matchOperator = (0, _predicate.isNil)(operator) || operator === clause.operator;
+        return matchValue && matchMust && matchOperator;
       });
     }
   }, {
@@ -421,7 +432,7 @@ var _AST = /*#__PURE__*/function () {
     value: function addOrFieldValue(field, value) {
       var must = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var operator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Operator.EQ;
-      var existingClause = this.getOrFieldClause(field);
+      var existingClause = this.getOrFieldClause(field, undefined, must, operator);
 
       if (!existingClause) {
         var newClause = must ? Field.must[operator](field, [value]) : Field.mustNot[operator](field, [value]);

package/lib/components/search_bar/search_bar.js

@@ -306,6 +306,12 @@ EuiSearchBar.propTypes = {
     placeholder: _propTypes.default.string,
     value: _propTypes.default.string,
     isInvalid: _propTypes.default.bool,
+
+    /**
+       * Expand to fill 100% of the parent.
+       * Defaults to `fullWidth` prop of `<EuiForm>`.
+       * @default false
+       */
     fullWidth: _propTypes.default.bool,
     isLoading: _propTypes.default.bool,
 

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -449,7 +449,7 @@ EuiSelectableList.propTypes = {
     /**
        * Accepts any string from our icon library
        */
-    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
 
     /**
        * The side of the badge the icon should sit