@elastic/eui 69.0.0 → 70.0.0

package/lib/components/code/code_syntax.styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCodeSyntaxTokens = exports.euiCodeSyntaxColors = void 0;
+
+var _services = require("../../services");
+
+/*
+ * 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 visColors = (0, _services.euiPaletteColorBlind)();
+
+var euiCodeSyntaxColors = function euiCodeSyntaxColors(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
+  return {
+    backgroundColor: backgroundColor,
+    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
+    tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
+    sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    deletionColor: (0, _services.makeHighContrastColor)(euiTheme.colors.danger)(backgroundColor),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit'
+  };
+};
+
+exports.euiCodeSyntaxColors = euiCodeSyntaxColors;
+
+var euiCodeSyntaxTokens = function euiCodeSyntaxTokens(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiCodeBlock = euiCodeSyntaxColors(euiThemeContext);
+  return "\n    .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n      opacity: .7;\n    }\n  \n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata,\n    .token.coord,\n    .token.blockquote {\n      color: ".concat(euiCodeBlock.commentColor, ";\n      font-style: italic;\n    }\n  \n    .token.selector {\n      color: ").concat(euiCodeBlock.selectorTagColor, ";\n    }\n  \n    .token.string,\n    .token.interpolation,\n    .token.interpolation-punctuation,\n    .token.doc-comment .token.keyword,\n    .token.attr-value,\n    .token.url .token.content {\n      color: ").concat(euiCodeBlock.stringColor, ";\n    }\n  \n    .token.number,\n    .token.boolean,\n    .token.keyword.nil,\n    .token.regex,\n    .token.variable,\n    .token.unit,\n    .token.hexcode,\n    .token.attr-name,\n    .token.attr-equals {\n      color: ").concat(euiCodeBlock.numberColor, ";\n    }\n  \n    .token.atrule .token.rule,\n    .token.keyword {\n      color: ").concat(euiCodeBlock.keywordColor, ";\n    }\n  \n    .token.function {\n      color: ").concat(euiCodeBlock.functionTitleColor, ";\n    }\n  \n    .token.tag {\n      color: ").concat(euiCodeBlock.tagColor, ";\n    }\n  \n    .token.class-name {\n      color: ").concat(euiCodeBlock.typeColor, ";\n    }\n  \n    .token.property {\n      color: ").concat(euiCodeBlock.attributeColor, ";\n    }\n  \n    .token.console,\n    .token.list-punctuation,\n    .token.url-reference,\n    .token.url .token.url {\n      color: ").concat(euiCodeBlock.symbolColor, ";\n    }\n  \n    .token.paramater {\n      color: ").concat(euiCodeBlock.paramsColor, ";\n    }\n  \n    .token.meta,\n    .token.important {\n      color: ").concat(euiCodeBlock.metaColor, ";\n    }\n  \n    .token.title {\n      color: ").concat(euiCodeBlock.titleColor, ";\n    }\n  \n    .token.section {\n      color: ").concat(euiCodeBlock.sectionColor, ";\n    }\n  \n    .token.prefix.inserted,\n    .token.prefix.deleted {\n      padding-inline-start: -").concat(euiTheme.size.xs, ";\n      margin-inline-start:  -").concat(euiTheme.size.xs, ";\n    }\n  \n    .token.prefix.inserted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.additionColor, ";\n      color: ").concat(euiCodeBlock.additionColor, ";\n    }\n  \n    .token.prefix.deleted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.deletionColor, ";\n      color: ").concat(euiCodeBlock.deletionColor, ";\n    }\n  \n    .token.selector .token.class {\n      color: ").concat(euiCodeBlock.selectorClassColor, ";\n    }\n  \n    .token.selector .token.id {\n      color: ").concat(euiCodeBlock.selectorIdColor, ";\n    }\n  \n    .token.italic {\n      font-style: italic;\n    }\n  \n    .token.important,\n    .token.bold {\n      font-weight: $euiCodeFontWeightBold;\n    }\n  \n    .token.url-reference,\n    .token.url .token.url {\n      text-decoration: underline;\n    }\n  \n    .token.entity {\n      cursor: help;\n    }\n  ");
+};
+
+exports.euiCodeSyntaxTokens = euiCodeSyntaxTokens;

package/lib/components/code/utils.js

@@ -11,11 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _refractor = require("refractor");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _css = require("@emotion/css");
 
-var _react2 = require("@emotion/react");
+var _code_block_line = require("./code_block_line.styles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,7 +64,7 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
         children = node.children;
     return /*#__PURE__*/(0, _react.createElement)(tagName, _objectSpread(_objectSpread({}, properties), {}, {
       key: key,
-      className: (0, _classnames.default)(properties.className)
+      className: (0, _css.cx)(properties.className)
     }), children && children.map(function (el, i) {
       return nodeToHtml(el, i, nodes, depth + 1);
     }));
@@ -81,8 +81,7 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
 
 exports.nodeToHtml = nodeToHtml;
 // Approximate width of a single digit/character
-var CHAR_SIZE = 8;
-var $euiSizeS = 8; // Creates an array of numbers from comma-separeated
+var CHAR_SIZE = 8; // Creates an array of numbers from comma-separeated
 // string of numbers or number ranges using `-`
 // (e.g., "1, 3-10, 15")
 
@@ -157,8 +156,7 @@ var addLineData = function addLineData(nodes, data) {
   }, []);
 };
 
-function wrapLines(nodes, options) {
-  var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
+function wrapLines(nodes, options, euiTheme) {
   var grouped = [];
   nodes.forEach(function (node) {
     var lineStart = node.lineStart - 1;
@@ -170,41 +168,44 @@ function wrapLines(nodes, options) {
     }
   });
   var wrapped = [];
-  var digits = grouped.length.toString().length;
-  var width = digits * CHAR_SIZE;
   grouped.forEach(function (node, i) {
-    var _properties;
-
-    var lineNumber = i + 1;
-    var classes = (0, _classnames.default)('euiCodeBlock__line', {
-      'euiCodeBlock__line--isHighlighted': highlights.includes(lineNumber)
-    });
-    var children = options.showLineNumbers ? [{
-      type: 'element',
-      tagName: 'span',
-      properties: (_properties = {
-        style: {
-          width: width
-        }
-      }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber']), _properties),
-      children: []
-    }, {
-      type: 'element',
-      tagName: 'span',
-      properties: {
-        style: {
-          marginLeft: width + $euiSizeS,
-          width: "calc(100% - ".concat(width, "px)")
+    var children = node;
+    var styles = (0, _code_block_line.euiCodeBlockLineStyles)(euiTheme);
+    var lineStyles = (0, _css.cx)([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
+
+    if (options.showLineNumbers) {
+      var _properties;
+
+      var lineNumber = i + 1;
+      var digits = grouped.length.toString().length;
+      var width = digits * CHAR_SIZE;
+      var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
+      var lineTextStyles = (0, _css.cx)([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
+      var lineNumberStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumber);
+      children = [{
+        type: 'element',
+        tagName: 'span',
+        properties: (_properties = {
+          style: {
+            inlineSize: width
+          }
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        children: []
+      }, {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['euiCodeBlock__lineText', lineTextStyles]
         },
-        className: ['euiCodeBlock__lineText']
-      },
-      children: node
-    }] : node;
+        children: node
+      }];
+    }
+
     wrapped.push({
       type: 'element',
       tagName: 'span',
       properties: {
-        className: [classes]
+        className: ['euiCodeBlock__line', lineStyles]
       },
       children: children
     });
@@ -212,13 +213,13 @@ function wrapLines(nodes, options) {
   return wrapped;
 }
 
-var highlightByLine = function highlightByLine(children, language, data) {
+var highlightByLine = function highlightByLine(children, language, data, euiTheme) {
   return wrapLines(addLineData((0, _refractor.highlight)(children, language), {
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
     highlight: data.highlight
-  });
+  }, euiTheme);
 };
 
 exports.highlightByLine = highlightByLine;

package/lib/components/collapsible_nav/collapsible_nav.js

@@ -200,11 +200,6 @@ EuiCollapsibleNav.propTypes = {
      * Adjustments to the EuiOverlayMask that is added when `ownFocus = true`
      */
   maskProps: _propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any,
-
     /**
        * ReactNode to render as this component's content
        */

package/lib/components/overlay_mask/overlay_mask.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _css = require("@emotion/css");
 
 var _react2 = require("@emotion/react");
 
@@ -23,7 +23,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -53,7 +55,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 = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(null),
@@ -64,7 +65,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) {
@@ -80,24 +81,18 @@ 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);
 };
 
 exports.EuiOverlayMask = EuiOverlayMask;
 EuiOverlayMask.propTypes = {
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
-
   /**
      * ReactNode to render as this component's content
      */

package/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/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/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,6 +25,8 @@ 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", "onResizeStart", "onResizeEnd"];
@@ -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,
@@ -85,11 +83,10 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       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), {}, {
@@ -262,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,

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,