@elastic/eui 94.3.0 → 94.4.1

package/es/components/markdown_editor/markdown_format.styles.js

@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../services';
 import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 
 /**
@@ -15,10 +16,7 @@ import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 // Internal utility for text scales/sizes
 var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, options) {
   var _euiFontSize = 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 = mathWithUnits(fontSize, function (x) {
@@ -27,7 +25,14 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = 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(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__codeblockWrapper {\n      ".concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(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(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(logicalCSS('width', '100%'), "\n      overflow: auto;\n      border-spacing: 0;\n      border-collapse: collapse;\n      ").concat(logicalCSS('border-left', border), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('border-vertical', border), "\n\n      &:last-child {\n        ").concat(logicalCSS('border-right', border), "\n      }\n    }\n\n    .euiMarkdownFormat__table tr {\n      ").concat(logicalCSS('border-top', border), "\n    }\n  ");
 };
 
 /**
@@ -35,20 +40,30 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
  */
 export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
   return {
-    // TODO: Remaining _markdown_format.scss styles
     euiMarkdownFormat: /*#__PURE__*/css(";label:euiMarkdownFormat;"),
     // Text sizes
     m: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'm'
-    }), ";;label:m;"),
+    }), ";label:m;"),
     s: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 's'
-    }), ";;label:s;"),
+    }), ";label:s;"),
     xs: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'xs'
-    }), ";;label:xs;"),
+    }), ";label:xs;"),
     relative: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       unit: 'em'
-    }), ";;label:relative;")
+    }), ";label:relative;"),
+    colors: {
+      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, transparentize(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
+      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      success: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
+      warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+    }
   };
 };

package/es/components/markdown_editor/plugins/markdown_checkbox/renderer.js

@@ -8,6 +8,8 @@
 
 import React, { useContext } from 'react';
 import PropTypes from "prop-types";
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../../global_styling';
 import { EuiCheckbox } from '../../../form/checkbox';
 import { EuiMarkdownContext } from '../../markdown_context';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
@@ -19,14 +21,17 @@ export var CheckboxMarkdownRenderer = function CheckboxMarkdownRenderer(_ref) {
     isChecked = _ref.isChecked,
     children = _ref.children;
   var _useContext = useContext(EuiMarkdownContext),
-    replaceNode = _useContext.replaceNode;
+    replaceNode = _useContext.replaceNode,
+    readOnly = _useContext.readOnly;
   return ___EmotionJSX(EuiCheckbox, {
     id: useGeneratedHtmlId(),
     checked: isChecked,
     label: children,
     onChange: function onChange() {
       replaceNode(position, "".concat(lead, "[").concat(isChecked ? ' ' : 'x', "]").concat(label));
-    }
+    },
+    css: markdownCheckboxStyles,
+    readOnly: readOnly
   });
 };
 CheckboxMarkdownRenderer.propTypes = {
@@ -46,4 +51,5 @@ CheckboxMarkdownRenderer.propTypes = {
       offset: PropTypes.number.isRequired
     }).isRequired
   }).isRequired
-};
+};
+var markdownCheckboxStyles = /*#__PURE__*/css("&&{.euiCheckbox__input~.euiCheckbox__label{font-size:inherit;line-height:inherit;", logicalCSS('padding-left', '1.5em'), ";}&:has(+ :not(.euiCheckbox)){", logicalCSS('margin-bottom', '1em'), ";}.euiCheckbox__input+.euiCheckbox__square{", logicalCSS('top', '50%'), " transform:translateY(-50%);}};label:markdownCheckboxStyles;");

package/es/components/markdown_editor/plugins/markdown_tooltip/renderer.js

@@ -1,3 +1,4 @@
+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
@@ -11,14 +12,24 @@ import PropTypes from "prop-types";
 import { EuiToolTip } from '../../../tool_tip';
 import { EuiIcon } from '../../../icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+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__
+};
 export var tooltipMarkdownRenderer = function tooltipMarkdownRenderer(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return ___EmotionJSX("span", null, ___EmotionJSX(EuiToolTip, {
     content: content
   }, ___EmotionJSX("span", null, ___EmotionJSX("strong", null, children), ___EmotionJSX(EuiIcon, {
-    type: "questionInCircle",
-    className: "euiMarkdownTooltip__icon"
+    type: "questionInCircle"
+    // This is to offset the tooltip icon, which isn't perfectly centered
+    ,
+    css: _ref2
   }))));
 };
 tooltipMarkdownRenderer.propTypes = {

package/es/components/selectable/selectable.js

@@ -634,7 +634,7 @@ EuiSelectable.propTypes = {
        * 'on' to indicate inclusion, 'off' to indicate exclusion,
        * or 'mixed' to indicate inclusion for some.
        */
-    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
+    checked: PropTypes.any,
     disabled: PropTypes.bool,
     /**
        * Node to add between the selection icon and the label
@@ -664,7 +664,15 @@ EuiSelectable.propTypes = {
        * Note: when searching, custom truncation props are ignored. The highlighted search
        * text will always take precedence.
        */
-    truncationProps: PropTypes.any
+    truncationProps: PropTypes.any,
+    /**
+       * Optional custom tooltip content for the button
+       */
+    toolTipContent: PropTypes.node,
+    /**
+       * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
+       */
+    toolTipProps: PropTypes.any
   }).isRequired).isRequired,
   /**
        * Passes back the altered `options` array with selected options having `checked: 'on'`.

package/es/components/selectable/selectable_list/selectable_list.js

@@ -47,6 +47,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiSelectableList);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "animationFrameId", void 0);
+    // counter for tracking list renders and ensuring rerenders
+    _defineProperty(_assertThisInitialized(_this), "listRowRerender", 0);
     _defineProperty(_assertThisInitialized(_this), "listRef", null);
     _defineProperty(_assertThisInitialized(_this), "listBoxRef", null);
     _defineProperty(_assertThisInitialized(_this), "setListRef", function (ref) {
@@ -171,7 +174,6 @@ export 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 @@ export 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 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(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 @@ export 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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = classNames('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
@@ -514,7 +557,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         ref: this.setListBoxRef
       }, this.state.optionArray.map(function (_, index) {
         return /*#__PURE__*/React.createElement(_this2.ListRow, {
-          key: index,
+          key: "".concat(index, "-").concat(_this2.listRowRerender),
           data: _this2.state.optionArray,
           index: index
         }, null);
@@ -664,7 +707,7 @@ EuiSelectableList.propTypes = {
        * 'on' to indicate inclusion, 'off' to indicate exclusion,
        * or 'mixed' to indicate inclusion for some.
        */
-    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
+    checked: PropTypes.any,
     disabled: PropTypes.bool,
     /**
        * Node to add between the selection icon and the label
@@ -694,7 +737,15 @@ EuiSelectableList.propTypes = {
        * Note: when searching, custom truncation props are ignored. The highlighted search
        * text will always take precedence.
        */
-    truncationProps: PropTypes.any
+    truncationProps: PropTypes.any,
+    /**
+       * Optional custom tooltip content for the button
+       */
+    toolTipContent: PropTypes.node,
+    /**
+       * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
+       */
+    toolTipProps: PropTypes.any
   }).isRequired).isRequired,
   /**
      * Filtered options list (if applicable)
@@ -708,14 +759,16 @@ EuiSelectableList.propTypes = {
     label: PropTypes.string,
     searchableLabel: PropTypes.string,
     key: PropTypes.string,
-    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
+    checked: PropTypes.any,
     disabled: PropTypes.bool,
     prepend: PropTypes.node,
     append: PropTypes.node,
     ref: PropTypes.func,
     data: PropTypes.shape({}),
     textWrap: PropTypes.oneOf(["truncate", "wrap"]),
-    truncationProps: PropTypes.any
+    truncationProps: PropTypes.any,
+    toolTipContent: PropTypes.node,
+    toolTipProps: PropTypes.any
   }).isRequired),
   /**
      * Search value to highlight on the option render