@elastic/eui 68.0.0 → 70.0.0

package/optimize/lib/components/overlay_mask/overlay_mask.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _css = require("@emotion/css");
 
 var _react2 = require("@emotion/react");
 
@@ -27,7 +27,9 @@ var _portal = require("../portal");
 
 var _overlay_mask = require("./overlay_mask.styles");
 
-var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "css"];
+var _overlay_mask_body = require("./overlay_mask_body.styles");
+
+var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
 
 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); }
 
@@ -39,7 +41,6 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
-      css = _ref.css,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(null),
@@ -50,7 +51,7 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
   var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _overlay_mask.euiOverlayMaskStyles)(euiTheme);
-  var cssStyles = [styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]];
+  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;
     (0, _common.keysOf)(rest).forEach(function (key) {
@@ -66,14 +67,13 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
 
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;
-    overlayMaskNode.className = (0, _classnames.default)('euiOverlayMask', className);
-  }, [overlayMaskNode, className]);
+    overlayMaskNode.className = (0, _css.cx)('euiOverlayMask', cssStyles, className);
+    overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
+  }, [overlayMaskNode, className, cssStyles, headerZindexLocation]);
   return (0, _react2.jsx)(_portal.EuiPortal, {
     portalRef: combinedMaskRef
   }, (0, _react2.jsx)(_react2.Global, {
-    styles: _overlay_mask.euiOverlayMaskBodyStyles
-  }), (0, _react2.jsx)(_react2.Global, {
-    styles: cssStyles
+    styles: _overlay_mask_body.euiOverlayMaskBodyStyles
   }), children);
 };
 

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

@@ -3,32 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiOverlayMaskStyles = exports.euiOverlayMaskBodyStyles = void 0;
+exports.euiOverlayMaskStyles = void 0;
 
-var _react = require("@emotion/react");
+var _css = require("@emotion/css");
 
 var _global_styling = require("../../global_styling");
 
 var _services = require("../../services");
 
-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.
+ */
 var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), ";animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", (0, _services.transparentize)(euiTheme.colors.ink, 0.5), ";};label:euiOverlayMask;"),
-    aboveHeader: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{z-index:", euiTheme.levels.mask, ";};label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', "".concat(euiTheme.base * 3, "px")), ";};label:belowHeader;")
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), ";animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", (0, _services.transparentize)(euiTheme.colors.ink, 0.5), ";;label:euiOverlayMask;"),
+    aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
+    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', "".concat(euiTheme.base * 3, "px")), ";;label:belowHeader;")
   };
 };
 
-exports.euiOverlayMaskStyles = euiOverlayMaskStyles;
-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__
-};
-exports.euiOverlayMaskBodyStyles = euiOverlayMaskBodyStyles;
+exports.euiOverlayMaskStyles = euiOverlayMaskStyles;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiOverlayMaskBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+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 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__
+};
+exports.euiOverlayMaskBodyStyles = euiOverlayMaskBodyStyles;

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

@@ -51,11 +51,12 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.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 (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
-  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {
-    css: cssContentStyles,
+  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssContentStyles
+  }, contentProps, {
     style: widthStyles
   }), children));
 };

package/optimize/lib/components/pagination/pagination.js

@@ -220,10 +220,10 @@ var EuiPagination = function EuiPagination(_ref) {
         'aria-labelledby': rest['aria-labelledby']
       });
 
-      centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({}, accessibleName, {
-        css: paginationStyles.euiPagination__list,
-        className: "euiPagination__list"
-      }), firstPageButtons, selectablePages, lastPageButtons);
+      centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({
+        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/lib/components/provider/provider.js

@@ -9,7 +9,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");
 
@@ -19,7 +19,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/optimize/lib/components/resizable_container/helpers.js

@@ -43,7 +43,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);
@@ -78,7 +78,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/lib/components/resizable_container/resizable_container.js

@@ -33,9 +33,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 _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); }
 
@@ -45,10 +47,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 containerDirections = {
-  vertical: 'vertical',
-  horizontal: 'horizontal'
-};
 var initialState = {
   isDragging: false,
   currentResizerPos: -1,
@@ -66,13 +64,14 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       className = _ref.className,
       onPanelWidthChange = _ref.onPanelWidthChange,
       onToggleCollapsed = _ref.onToggleCollapsed,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd,
       rest = (0, _objectWithoutProperties2.default)(_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), {}, {
@@ -94,6 +93,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;
@@ -102,12 +121,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);
@@ -117,24 +137,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,
@@ -142,17 +167,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,
@@ -196,6 +244,7 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       resizers: reducerState.resizers
     }
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     ref: containerRef,
     onMouseMove: reducerState.isDragging ? onMouseMove : undefined,

package/optimize/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/optimize/lib/components/resizable_container/resizable_panel.js

@@ -23,16 +23,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"];
@@ -45,14 +49,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 panelPaddingValues = {
-  none: 0,
-  xs: 4,
-  s: 8,
-  m: 16,
-  l: 24,
-  xl: 32
-};
 var defaultToggleOptions = {
   className: null,
   'data-test-subj': undefined,
@@ -70,12 +66,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';
@@ -182,34 +172,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;
@@ -261,7 +235,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,
@@ -273,7 +247,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,
@@ -283,12 +257,17 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     });
   }
 
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, wrapperProps, {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    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, (0, _extends2.default)({
+    css: contentCssStyles,
     className: panelClasses,
     hasShadow: hasShadow,
     borderRadius: borderRadius,