@elastic/eui 94.2.1 → 94.4.0

package/optimize/lib/components/markdown_editor/markdown_editor_text_area.styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorTextAreaStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _form = require("../form/form.styles");
+var _markdown_editor = require("./markdown_editor.styles");
+/*
+ * 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 euiMarkdownEditorTextAreaStyles = function euiMarkdownEditorTextAreaStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight;
+  return {
+    euiMarkdownEditorTextArea: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.logicalCSS)('min-height', minHeight), " ", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), " resize:vertical;margin:0;padding:", euiTheme.size.m, ";", (0, _form.euiFormControlText)(euiThemeContext), " line-height:", euiTheme.font.lineHeightMultiplier, ";border:", euiTheme.border.thin, ";", (0, _global_styling.logicalCSS)('border-bottom', 'none'), ";;label:euiMarkdownEditorTextArea;"),
+    readOnly: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";cursor:default;&:focus{outline:none;};label:readOnly;"),
+    editable: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;&:focus,.euiMarkdownEditor:focus-within &{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:editable;")
+  };
+};
+exports.euiMarkdownEditorTextAreaStyles = euiMarkdownEditorTextAreaStyles;

package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -8,11 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiMarkdownEditorToolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
 var _button = require("../button");
 var _i18n = require("../i18n");
 var _tool_tip = require("../tool_tip");
 var _markdown_modes = require("./markdown_modes");
 var _markdown_context = require("./markdown_context");
+var _markdown_editor_toolbar = require("./markdown_editor_toolbar.styles");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -108,11 +110,14 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
   };
   var isPreviewing = viewMode === _markdown_modes.MODE_VIEWING;
   var isEditable = !isPreviewing && !readOnly;
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_toolbar.euiMarkdownEditorToolbarStyles);
   return (0, _react2.jsx)("div", {
     ref: ref,
-    "data-test-subj": "euiMarkdownEditorToolbar",
-    className: "euiMarkdownEditorToolbar"
+    css: styles.euiMarkdownEditorToolbar,
+    className: "euiMarkdownEditorToolbar",
+    "data-test-subj": "euiMarkdownEditorToolbar"
   }, (0, _react2.jsx)("div", {
+    css: styles.euiMarkdownEditorToolbar__buttons,
     className: "euiMarkdownEditorToolbar__buttons"
   }, boldItalicButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -129,6 +134,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), listButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -145,6 +151,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), quoteCodeLinkButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -161,6 +168,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), uiPlugins.length > 0 ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), uiPlugins.map(function (_ref3) {
     var name = _ref3.name,

package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorToolbarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _markdown_editor = require("./markdown_editor.styles");
+/*
+ * 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 euiMarkdownEditorToolbarStyles = function euiMarkdownEditorToolbarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    barsBackgroundColor = _euiMarkdownEditorVar.barsBackgroundColor;
+  return {
+    euiMarkdownEditorToolbar: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;padding:", euiTheme.size.xs, ";background-color:", barsBackgroundColor, ";border:", euiTheme.border.thin, ";", (0, _global_styling.logicalCSS)('border-bottom', 'none'), ";;label:euiMarkdownEditorToolbar;"),
+    euiMarkdownEditorToolbar__buttons: /*#__PURE__*/(0, _react.css)("flex:1;display:flex;flex-wrap:wrap;align-items:center;column-gap:", euiTheme.size.xs, ";;label:euiMarkdownEditorToolbar__buttons;"),
+    euiMarkdownEditorToolbar__divider: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('border-left', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color)), ";;label:euiMarkdownEditorToolbar__divider;")
+  };
+};
+exports.euiMarkdownEditorToolbarStyles = euiMarkdownEditorToolbarStyles;

package/optimize/lib/components/markdown_editor/markdown_format.js

@@ -12,11 +12,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _unified = _interopRequireDefault(require("unified"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _text = require("../text/text");
+var _text_color = require("../text/text_color");
 var _services = require("../../services");
 var _markdown_format = require("./markdown_format.styles");
 var _markdown_default_plugins = require("./plugins/markdown_default_plugins");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "parsingPluginList", "processingPluginList", "textSize"];
+var _excluded = ["children", "className", "parsingPluginList", "processingPluginList", "textSize", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,6 +36,8 @@ var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
     processingPluginList = _ref$processingPlugin === void 0 ? _markdown_default_plugins.defaultProcessingPlugins : _ref$processingPlugin,
     _ref$textSize = _ref.textSize,
     textSize = _ref$textSize === void 0 ? 'm' : _ref$textSize,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var processor = (0, _react.useMemo)(function () {
     return (0, _unified.default)().use(parsingPluginList).use(processingPluginList);
@@ -50,14 +53,14 @@ var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
       return children;
     }
   }, [children, processor]);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _markdown_format.euiMarkdownFormatStyles)(euiTheme);
-  var cssStyles = [styles.euiMarkdownFormat, styles[textSize]];
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_format.euiMarkdownFormatStyles);
+  var cssStyles = [styles.euiMarkdownFormat, styles[textSize], (0, _text_color._isNamedColor)(color) ? styles.colors[color] : styles.colors.custom];
   var classes = (0, _classnames.default)('euiMarkdownFormat', className);
   return (0, _react2.jsx)(_text.EuiText, (0, _extends2.default)({
     size: textSize,
     css: cssStyles,
-    className: classes
+    className: classes,
+    color: color
   }, rest), result);
 };
 exports.EuiMarkdownFormat = EuiMarkdownFormat;

package/optimize/lib/components/markdown_editor/markdown_format.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkdownFormatStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,10 +20,7 @@ var _global_styling = require("../../global_styling");
  */ // Internal utility for text scales/sizes
 var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, options) {
   var _euiFontSize = (0, _global_styling.euiFontSize)(euiTheme, 'm', options),
-    fontSize = _euiFontSize.fontSize,
-    lineHeight = _euiFontSize.lineHeight;
-  var unit = options.unit;
-  var lineHeightSize = unit === 'em' ? "".concat(lineHeight, "em") : lineHeight;
+    fontSize = _euiFontSize.fontSize;
 
   // Custom scales
   var tablePaddingVertical = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
@@ -31,7 +29,14 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ".concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__codeblockWrapper {\n      ".concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+};
+
+// Internal utility for generating border colors based on EuiText colors
+var euiMarkdownAdjustBorderColors = function euiMarkdownAdjustBorderColors(_ref, color) {
+  var euiTheme = _ref.euiTheme;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(color);
+  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat((0, _global_styling.logicalCSS)('border-left-color', color), "\n    }\n\n    .euiHorizontalRule {\n      background-color: ").concat(color, ";\n      color: ").concat(color, "; /* ensure that firefox gets the currentColor */\n    }\n\n    /* Tables */\n\n    .euiMarkdownFormat__table {\n      display: block;\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n      overflow: auto;\n      border-spacing: 0;\n      border-collapse: collapse;\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('border-vertical', border), "\n\n      &:last-child {\n        ").concat((0, _global_styling.logicalCSS)('border-right', border), "\n      }\n    }\n\n    .euiMarkdownFormat__table tr {\n      ").concat((0, _global_styling.logicalCSS)('border-top', border), "\n    }\n  ");
 };
 
 /**
@@ -39,21 +44,31 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
  */
 var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
   return {
-    // TODO: Remaining _markdown_format.scss styles
     euiMarkdownFormat: /*#__PURE__*/(0, _react.css)(";label:euiMarkdownFormat;"),
     // Text sizes
     m: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'm'
-    }), ";;label:m;"),
+    }), ";label:m;"),
     s: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 's'
-    }), ";;label:s;"),
+    }), ";label:s;"),
     xs: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'xs'
-    }), ";;label:xs;"),
+    }), ";label:xs;"),
     relative: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       unit: 'em'
-    }), ";;label:relative;")
+    }), ";label:relative;"),
+    colors: {
+      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, (0, _services.transparentize)(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
+      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      success: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
+      warning: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+    }
   };
 };
 exports.euiMarkdownFormatStyles = euiMarkdownFormatStyles;

package/optimize/lib/components/markdown_editor/plugins/markdown_checkbox/renderer.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CheckboxMarkdownRenderer = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
 var _checkbox = require("../../../form/checkbox");
 var _markdown_context = require("../../markdown_context");
 var _accessibility = require("../../../../services/accessibility");
-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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
@@ -27,14 +28,18 @@ var CheckboxMarkdownRenderer = function CheckboxMarkdownRenderer(_ref) {
     isChecked = _ref.isChecked,
     children = _ref.children;
   var _useContext = (0, _react.useContext)(_markdown_context.EuiMarkdownContext),
-    replaceNode = _useContext.replaceNode;
+    replaceNode = _useContext.replaceNode,
+    readOnly = _useContext.readOnly;
   return (0, _react2.jsx)(_checkbox.EuiCheckbox, {
     id: (0, _accessibility.useGeneratedHtmlId)(),
     checked: isChecked,
     label: children,
     onChange: function onChange() {
       replaceNode(position, "".concat(lead, "[").concat(isChecked ? ' ' : 'x', "]").concat(label));
-    }
+    },
+    css: markdownCheckboxStyles,
+    readOnly: readOnly
   });
 };
-exports.CheckboxMarkdownRenderer = CheckboxMarkdownRenderer;
+exports.CheckboxMarkdownRenderer = CheckboxMarkdownRenderer;
+var markdownCheckboxStyles = /*#__PURE__*/(0, _react2.css)("&&{.euiCheckbox__input~.euiCheckbox__label{font-size:inherit;line-height:inherit;", (0, _global_styling.logicalCSS)('padding-left', '1.5em'), ";}&:has(+ :not(.euiCheckbox)){", (0, _global_styling.logicalCSS)('margin-bottom', '1em'), ";}.euiCheckbox__input+.euiCheckbox__square{", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translateY(-50%);}};label:markdownCheckboxStyles;");

package/optimize/lib/components/markdown_editor/plugins/markdown_tooltip/renderer.js

@@ -9,22 +9,31 @@ var _react = _interopRequireDefault(require("react"));
 var _tool_tip = require("../../../tool_tip");
 var _icon = require("../../../icon");
 var _react2 = require("@emotion/react");
-/*
- * 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.
- */
-
+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 _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;"
+} : {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var tooltipMarkdownRenderer = function tooltipMarkdownRenderer(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return (0, _react2.jsx)("span", null, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: content
   }, (0, _react2.jsx)("span", null, (0, _react2.jsx)("strong", null, children), (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "questionInCircle",
-    className: "euiMarkdownTooltip__icon"
+    type: "questionInCircle"
+    // This is to offset the tooltip icon, which isn't perfectly centered
+    ,
+    css: _ref2
   }))));
 };
 exports.tooltipMarkdownRenderer = tooltipMarkdownRenderer;

package/optimize/lib/components/popover/input_popover.js

@@ -149,29 +149,35 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   (0, _react.useEffect)(function () {
     // When the popover opens, add a scroll listener to the page (& remove it after)
     if (closeOnScroll && panelEl) {
-      // Close the popover, but only if the scroll event occurs outside the input or the popover itself
       var closePopoverOnScroll = function closePopoverOnScroll(event) {
-        if (!panelEl || !inputEl || !event.target) return;
         var scrollTarget = event.target;
-        if (panelEl.contains(scrollTarget) === false && inputEl.contains(scrollTarget) === false) {
-          closePopover();
+
+        // Basic existence check
+        if (!panelEl || !inputEl || !scrollTarget) {
+          return;
+        }
+        // Do not close the popover if the input or popover itself was scrolled
+        if (panelEl.contains(scrollTarget) || inputEl.contains(scrollTarget)) {
+          return;
         }
+        // Firefox will trigger a scroll event in many common situations (e.g. docs side nav)
+        // when the options list div is appended to the DOM. To work around this, we should
+        // check if the element that scrolled actually contains/will affect the input
+        if (!scrollTarget.contains(inputEl)) {
+          return;
+        }
+        closePopover();
       };
+      window.addEventListener('scroll', closePopoverOnScroll, {
+        passive: true,
+        // for better performance as we won't call preventDefault
+        capture: true // scroll events don't bubble, they must be captured instead
+      });
 
-      // Firefox will trigger a scroll event in many common situations when the options list div is appended
-      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
-      var timeoutId = setTimeout(function () {
-        window.addEventListener('scroll', closePopoverOnScroll, {
-          passive: true,
-          // for better performance as we won't call preventDefault
-          capture: true // scroll events don't bubble, they must be captured instead
-        });
-      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
-        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

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

@@ -47,6 +47,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2.default)(this, EuiSelectableList);
     _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "animationFrameId", void 0);
+    // counter for tracking list renders and ensuring rerenders
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRowRerender", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listBoxRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setListRef", function (ref) {
@@ -171,7 +174,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           event.persist(); // NOTE: This is needed for React v16 backwards compatibility
           _this.onAddOrRemoveOption(option, event);
         },
-        ref: ref ? ref.bind(null, index) : undefined,
         isFocused: isFocused,
         title: searchableLabel || label,
         checked: checked,
@@ -272,7 +274,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       _this.focusBadgeOffset = _this.props.onFocusBadge === false ? 0 : 46;
 
       // Wait a tick for the listbox ref to update before proceeding
-      requestAnimationFrame(function () {
+      _this.animationFrameId = requestAnimationFrame(function () {
         var scrollbarOffset = _this.listBoxRef ? containerWidth - _this.listBoxRef.offsetWidth : 0;
         _this.setState({
           defaultOptionWidth: containerWidth - scrollbarOffset - paddingOffset - checkedIconOffset
@@ -424,13 +426,47 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   (0, _createClass2.default)(EuiSelectableList, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // ensure requestAnimationFrame is canceled on unmount as
+      // it could potentially run on a next tick otherwise
+      if (this.animationFrameId !== undefined) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = undefined;
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var _this$props9 = this.props,
+        allowExclusions = _this$props9.allowExclusions,
+        showIcons = _this$props9.showIcons,
+        paddingSize = _this$props9.paddingSize,
+        textWrap = _this$props9.textWrap,
+        onFocusBadge = _this$props9.onFocusBadge,
+        searchable = _this$props9.searchable;
+
+      // using shouldComponentUpdate to determine needed rerender before actual rerender
+      // without needing state updates or lagging behind on updates
+      if (nextProps.allowExclusions !== allowExclusions || nextProps.showIcons !== showIcons || nextProps.paddingSize !== paddingSize || nextProps.textWrap !== textWrap || nextProps.onFocusBadge !== onFocusBadge || nextProps.searchable !== searchable) {
+        this.listRowRerender += 1;
+      }
+      return true;
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props9 = this.props,
-        isVirtualized = _this$props9.isVirtualized,
-        activeOptionIndex = _this$props9.activeOptionIndex,
-        visibleOptions = _this$props9.visibleOptions,
-        options = _this$props9.options;
+      var _this$props10 = this.props,
+        isVirtualized = _this$props10.isVirtualized,
+        activeOptionIndex = _this$props10.activeOptionIndex,
+        visibleOptions = _this$props10.visibleOptions,
+        options = _this$props10.options,
+        allowExclusions = _this$props10.allowExclusions,
+        showIcons = _this$props10.showIcons,
+        paddingSize = _this$props10.paddingSize,
+        textWrap = _this$props10.textWrap,
+        onFocusBadge = _this$props10.onFocusBadge,
+        searchable = _this$props10.searchable;
       if (prevProps.activeOptionIndex !== activeOptionIndex) {
         var makeOptionId = this.props.makeOptionId;
         if (this.listBoxRef && this.props.searchable !== true) {
@@ -462,41 +498,48 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           itemData: _objectSpread({}, optionArray)
         }, this.calculateAriaSetAttrs(optionArray)));
       }
+
+      // ensure that ListRow updates based on item props
+      if (isVirtualized) {
+        if (prevProps.allowExclusions !== allowExclusions || prevProps.showIcons !== showIcons || prevProps.paddingSize !== paddingSize || prevProps.textWrap !== textWrap || prevProps.onFocusBadge !== onFocusBadge || prevProps.searchable !== searchable) {
+          this.forceVirtualizedListRowRerender();
+        }
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props10 = this.props,
-        className = _this$props10.className,
-        options = _this$props10.options,
-        searchValue = _this$props10.searchValue,
-        onOptionClick = _this$props10.onOptionClick,
-        renderOption = _this$props10.renderOption,
-        forcedHeight = _this$props10.height,
-        windowProps = _this$props10.windowProps,
-        rowHeight = _this$props10.rowHeight,
-        activeOptionIndex = _this$props10.activeOptionIndex,
-        makeOptionId = _this$props10.makeOptionId,
-        showIcons = _this$props10.showIcons,
-        singleSelection = _this$props10.singleSelection,
-        visibleOptions = _this$props10.visibleOptions,
-        allowExclusions = _this$props10.allowExclusions,
-        bordered = _this$props10.bordered,
-        paddingSize = _this$props10.paddingSize,
-        searchable = _this$props10.searchable,
-        onFocusBadge = _this$props10.onFocusBadge,
-        listId = _this$props10.listId,
-        setActiveOptionIndex = _this$props10.setActiveOptionIndex,
-        ariaLabel = _this$props10['aria-label'],
-        ariaLabelledby = _this$props10['aria-labelledby'],
-        ariaDescribedby = _this$props10['aria-describedby'],
-        role = _this$props10.role,
-        isPreFiltered = _this$props10.isPreFiltered,
-        isVirtualized = _this$props10.isVirtualized,
-        textWrap = _this$props10.textWrap,
-        truncationProps = _this$props10.truncationProps,
-        rest = (0, _objectWithoutProperties2.default)(_this$props10, _excluded3);
+      var _this$props11 = this.props,
+        className = _this$props11.className,
+        options = _this$props11.options,
+        searchValue = _this$props11.searchValue,
+        onOptionClick = _this$props11.onOptionClick,
+        renderOption = _this$props11.renderOption,
+        forcedHeight = _this$props11.height,
+        windowProps = _this$props11.windowProps,
+        rowHeight = _this$props11.rowHeight,
+        activeOptionIndex = _this$props11.activeOptionIndex,
+        makeOptionId = _this$props11.makeOptionId,
+        showIcons = _this$props11.showIcons,
+        singleSelection = _this$props11.singleSelection,
+        visibleOptions = _this$props11.visibleOptions,
+        allowExclusions = _this$props11.allowExclusions,
+        bordered = _this$props11.bordered,
+        paddingSize = _this$props11.paddingSize,
+        searchable = _this$props11.searchable,
+        onFocusBadge = _this$props11.onFocusBadge,
+        listId = _this$props11.listId,
+        setActiveOptionIndex = _this$props11.setActiveOptionIndex,
+        ariaLabel = _this$props11['aria-label'],
+        ariaLabelledby = _this$props11['aria-labelledby'],
+        ariaDescribedby = _this$props11['aria-describedby'],
+        role = _this$props11.role,
+        isPreFiltered = _this$props11.isPreFiltered,
+        isVirtualized = _this$props11.isVirtualized,
+        textWrap = _this$props11.textWrap,
+        truncationProps = _this$props11.truncationProps,
+        rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = (0, _classnames.default)('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
@@ -514,7 +557,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         ref: this.setListBoxRef
       }, this.state.optionArray.map(function (_, index) {
         return /*#__PURE__*/_react.default.createElement(_this2.ListRow, {
-          key: index,
+          key: "".concat(index, "-").concat(_this2.listRowRerender),
           data: _this2.state.optionArray,
           index: index
         }, null);