@elastic/eui 94.3.0 → 94.4.1

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/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);