@elastic/eui 113.2.1 → 114.0.0

package/optimize/es/components/form/file_picker/file_picker.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
+var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display", "files"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -39,36 +39,41 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
+    _defineProperty(_this, "fileInput", null);
+    _defineProperty(_this, "generatedId", htmlIdGenerator()());
+    _defineProperty(_this, "getPromptTextFromFileList", function (files) {
+      if (!files || files.length === 0) {
+        return null;
+      }
+      if (files.length > 1) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiFilePicker.filesSelected",
+          default: "{fileCount} files selected",
+          values: {
+            fileCount: files.length
+          }
+        });
+      }
+      return files[0].name;
+    });
     _defineProperty(_this, "state", {
-      promptText: null,
+      promptText: _this.props.files ? _this.getPromptTextFromFileList(_this.props.files) : null,
       isHoveringDrop: false
     });
-    _defineProperty(_this, "fileInput", null);
-    _defineProperty(_this, "generatedId", htmlIdGenerator()());
     _defineProperty(_this, "handleChange", function () {
       if (!_this.fileInput) return;
-      if (_this.fileInput.files && _this.fileInput.files.length > 1) {
-        _this.setState({
-          promptText: ___EmotionJSX(EuiI18n, {
-            token: "euiFilePicker.filesSelected",
-            default: "{fileCount} files selected",
-            values: {
-              fileCount: _this.fileInput.files.length
-            }
-          })
-        });
-      } else if (_this.fileInput.files && _this.fileInput.files.length === 0) {
+      if (_this.fileInput.files && _this.fileInput.files.length === 1) {
         _this.setState({
-          promptText: null
+          promptText: _this.fileInput.value.split('\\').pop()
         });
       } else {
         _this.setState({
-          promptText: _this.fileInput.value.split('\\').pop()
+          promptText: _this.getPromptTextFromFileList(_this.fileInput.files ? Array.from(_this.fileInput.files) : null)
         });
       }
       var onChange = _this.props.onChange;
       if (onChange) {
-        onChange(_this.fileInput.files);
+        onChange(_this.fileInput.files && _this.fileInput.files.length > 0 ? _this.fileInput.files : null);
       }
     });
     _defineProperty(_this, "removeFiles", function (e) {
@@ -96,6 +101,17 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
   }
   _inherits(EuiFilePickerClass, _Component);
   return _createClass(EuiFilePickerClass, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Update prompt text when files prop changes
+      if (this.props.files !== prevProps.files) {
+        var _this$props$files;
+        this.setState({
+          promptText: this.getPromptTextFromFileList((_this$props$files = this.props.files) !== null && _this$props$files !== void 0 ? _this$props$files : null)
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -119,6 +135,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
           isLoading = _this2$props.isLoading,
           display = _this2$props.display,
+          files = _this2$props.files,
           rest = _objectWithoutProperties(_this2$props, _excluded);
         var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
         var isOverridingInitialPrompt = _this2.state.promptText != null;

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js

@@ -18,6 +18,7 @@ import markdown from 'remark-parse-no-trim';
 import emoji from 'remark-emoji';
 import breaks from 'remark-breaks';
 import highlight from '../remark/remark_prismjs';
+import intrawordUnderscore from '../remark/remark_intraword_underscore';
 import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
 import { euiMarkdownLinkValidator, DEFAULT_OPTIONS as LINK_VALIDATOR_DEFAULTS } from '../markdown_link_validator';
@@ -34,7 +35,7 @@ export var getDefaultEuiMarkdownParsingPlugins = function getDefaultEuiMarkdownP
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var exclude = _ref.exclude,
     parsingConfig = _objectWithoutProperties(_ref, _excluded);
-  var parsingPlugins = [[markdown, {}], [highlight, {}]];
+  var parsingPlugins = [[markdown, {}], [highlight, {}], [intrawordUnderscore, {}]];
   Object.entries(DEFAULT_PARSING_PLUGINS).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       pluginName = _ref3[0],

package/optimize/es/components/markdown_editor/plugins/remark/remark_intraword_underscore.js

@@ -0,0 +1,172 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/*
+ * 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.
+ */
+
+// Temporary workaround for https://github.com/elastic/eui/issues/9404
+// remark-parse v8 doesn't implement the CommonMark rule that underscore
+// emphasis delimiters flanked by alphanumerics on both sides (intraword)
+// cannot open or close emphasis. This causes identifiers like
+// `ABCD__PineappleCherry__e` to render with bold formatting.
+// This plugin walks the parsed AST and reverses incorrectly applied
+// emphasis/strong nodes when both sides are alphanumeric characters.
+
+// eslint-disable-next-line import/no-unresolved
+
+var isTextNode = function isTextNode(node) {
+  return node.type === 'text';
+};
+var isEmphasisOrStrong = function isEmphasisOrStrong(node) {
+  return node.type === 'emphasis' || node.type === 'strong';
+};
+var isAlphanumeric = function isAlphanumeric(ch) {
+  return /[a-zA-Z0-9]/.test(ch);
+};
+
+/**
+ * Recursively converts an emphasis/strong node back into plain text
+ * with underscore delimiters restored.
+ */
+function flattenToText(node) {
+  var delimiter = node.type === 'emphasis' ? '_' : '__';
+  var inner = '';
+  var _iterator = _createForOfIteratorHelper(node.children),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      if (isTextNode(child)) {
+        inner += child.value;
+      } else if (isEmphasisOrStrong(child)) {
+        inner += flattenToText(child);
+      } else {
+        // Contains non-text children (links, images, etc.) — leave emphasis intact
+        return delimiter + collectText(node) + delimiter;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return delimiter + inner + delimiter;
+}
+function collectText(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    return node.children.map(collectText).join('');
+  }
+  return '';
+}
+function processParent(parent, source) {
+  var modified = false;
+  var i = 0;
+  while (i < parent.children.length) {
+    var child = parent.children[i];
+    if (isEmphasisOrStrong(child) && isIntraword(parent, i, source)) {
+      var textValue = flattenToText(child);
+      var replacement = {
+        type: 'text',
+        value: textValue
+      };
+      parent.children.splice(i, 1, replacement);
+      modified = true;
+      // Don't advance — the replaced node may need to merge with neighbors
+    } else {
+      if ('children' in child) {
+        processParent(child, source);
+      }
+      i++;
+    }
+    if (modified) {
+      mergeAdjacentText(parent);
+      modified = false;
+      // After merging, restart scan since indices shifted
+      i = 0;
+    }
+  }
+}
+function getInnerText(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    var children = node.children;
+    if (children.length > 0) return getInnerText(children[0]);
+  }
+  return '';
+}
+function getInnerTextEnd(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    var children = node.children;
+    if (children.length > 0) return getInnerTextEnd(children[children.length - 1]);
+  }
+  return '';
+}
+
+/**
+ * Checks whether the emphasis/strong node at `index` within `parent`
+ * is an intraword usage of underscore delimiters.
+ *
+ * A node is intraword when at least one side has an alphanumeric text
+ * neighbor AND the inner content on the corresponding delimiter side
+ * also touches word characters — proving the underscores are embedded
+ * in a word rather than used as formatting.
+ */
+function isIntraword(parent, index, source) {
+  var _node$position;
+  var node = parent.children[index];
+
+  // Verify the delimiter is `_` (not `*`) by inspecting the source
+  if (((_node$position = node.position) === null || _node$position === void 0 || (_node$position = _node$position.start) === null || _node$position === void 0 ? void 0 : _node$position.offset) != null) {
+    var ch = source[node.position.start.offset];
+    if (ch !== '_') return false;
+  }
+  var prev = index > 0 ? parent.children[index - 1] : null;
+  var next = index < parent.children.length - 1 ? parent.children[index + 1] : null;
+  var prevChar = prev != null && isTextNode(prev) && prev.value.length > 0 ? prev.value[prev.value.length - 1] : null;
+  var nextChar = next != null && isTextNode(next) && next.value.length > 0 ? next.value[0] : null;
+  var prevIsAlpha = prevChar != null && isAlphanumeric(prevChar);
+  var nextIsAlpha = nextChar != null && isAlphanumeric(nextChar);
+
+  // Both sides flanked by alphanumeric — classic intraword (e.g. `foo__bar__baz`)
+  if (prevIsAlpha && nextIsAlpha) return true;
+
+  // One-sided: prev is alpha or underscore, no alpha next — check inner text
+  // starts with alpha (e.g. `Lorem__ipsum__` or `Lorem__ipsum_`)
+  if (prevIsAlpha || prevChar === '_') {
+    var inner = getInnerText(node);
+    if (inner.length > 0 && isAlphanumeric(inner[0])) return true;
+  }
+
+  // One-sided: next is alpha or underscore, no alpha prev — check inner text
+  // ends with alpha (e.g. `__Lorem__ipsum` or `_Lorem__ipsum`)
+  if (nextIsAlpha || nextChar === '_') {
+    var _inner = getInnerTextEnd(node);
+    if (_inner.length > 0 && isAlphanumeric(_inner[_inner.length - 1])) return true;
+  }
+  return false;
+}
+function mergeAdjacentText(parent) {
+  var i = 0;
+  while (i < parent.children.length - 1) {
+    if (isTextNode(parent.children[i]) && isTextNode(parent.children[i + 1])) {
+      parent.children[i].value += parent.children[i + 1].value;
+      parent.children.splice(i + 1, 1);
+    } else {
+      i++;
+    }
+  }
+}
+var attacher = function remarkIntrawordUnderscore() {
+  return function (tree, file) {
+    var source = String(file);
+    processParent(tree, source);
+  };
+};
+export default attacher;

package/optimize/es/components/overlay_mask/overlay_mask.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
+var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "hasAnimation"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,8 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     _ref$headerZindexLoca = _ref.headerZindexLocation,
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
+    _ref$hasAnimation = _ref.hasAnimation,
+    hasAnimation = _ref$hasAnimation === void 0 ? true : _ref$hasAnimation,
     rest = _objectWithoutProperties(_ref, _excluded);
   var hasRendered = useRef(false);
   var _useState = useState(null),
@@ -36,7 +38,7 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     hasRendered.current = true;
   }, []);
   var styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
-  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
+  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], (hasRendered.current || !hasAnimation) && styles.noAnimation]);
   useEffect(function () {
     if (!overlayMaskNode) return;
     keysOf(rest).forEach(function (key) {

package/optimize/es/components/tree_view/tree_view_item.styles.js

@@ -26,7 +26,7 @@ export var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContex
       euiTreeView__node: _ref,
       default: /*#__PURE__*/css(logicalCSS('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
       compressed: /*#__PURE__*/css(logicalCSS('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
-      expanded: /*#__PURE__*/css(logicalCSS('max-height', '100vh'), ";;label:expanded;")
+      expanded: /*#__PURE__*/css(logicalCSS('max-height', 'none'), ";;label:expanded;")
     },
     button: {
       euiTreeView__nodeInner: /*#__PURE__*/css(logicalCSS('width', '100%'), " ", logicalCSS('padding-left', euiTheme.size.s), " ", logicalCSS('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", euiTheme.components.treeViewItemBackgroundHover, ";};label:euiTreeView__nodeInner;"),

package/optimize/es/services/hooks/index.js

@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-export * from './useDependentState';
-export * from './useCombinedRefs';
-export * from './useForceRender';
-export * from './useLatest';
-export * from './useDeepEqual';
-export * from './useMouseMove';
-export * from './useIsPointerDown';
-export * from './useUpdateEffect';
+export { useDependentState } from './useDependentState';
+export { useCombinedRefs, setMultipleRefs } from './useCombinedRefs';
+export { useForceRender } from './useForceRender';
+export { useLatest } from './useLatest';
+export { useDeepEqual } from './useDeepEqual';
+export { isMouseEvent, useMouseMove } from './useMouseMove';
+export { useIsPointerDown } from './useIsPointerDown';
+export { useUpdateEffect } from './useUpdateEffect';
 export { useEuiDisabledElement } from './useEuiDisabledElement';

package/optimize/es/services/hooks/useIsPointerDown.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,30 +6,27 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import { useState, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 /**
  * A hook that tracks whether the pointer is currently down/pressed.
  * Useful for detecting text selection in progress.
  */
 export function useIsPointerDown(container) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPointerDown = _useState2[0],
-    setIsPointerDown = _useState2[1];
+  var isPointerDownRef = useRef(false);
   useEffect(function () {
     var handlePointerDown = function handlePointerDown(event) {
       if (container !== null && container !== void 0 && container.current && !container.current.contains(event.target)) {
         return;
       }
-      setIsPointerDown(true);
+      isPointerDownRef.current = true;
     };
     var handlePointerUpOrCancel = function handlePointerUpOrCancel() {
-      setIsPointerDown(false);
+      isPointerDownRef.current = false;
     };
     var handleVisibilityChange = function handleVisibilityChange() {
       if (document.visibilityState === 'hidden') {
-        setIsPointerDown(false);
+        isPointerDownRef.current = false;
       }
     };
     var controller = new AbortController();
@@ -48,5 +44,5 @@ export function useIsPointerDown(container) {
       controller.abort();
     };
   }, [container]);
-  return isPointerDown;
+  return isPointerDownRef;
 }

package/optimize/es/services/index.js

@@ -22,7 +22,7 @@ export * from './emotion';
 export * from './findElement';
 export { focusTrapPubSub } from './focus_trap';
 export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
-export * from './hooks';
+export { useDependentState, useCombinedRefs, setMultipleRefs, useForceRender, useLatest, useDeepEqual, isMouseEvent, useMouseMove, useUpdateEffect, useEuiDisabledElement } from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
 export { calculatePopoverPosition, findPopoverPosition } from './popover';

package/optimize/lib/components/basic_table/collapsed_item_actions.js

@@ -69,6 +69,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
         var toolTipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);
         var href = (0, _action_types.callWithItemIfFunction)(item)(action.href);
         var dataTestSubj = (0, _action_types.callWithItemIfFunction)(item)(action['data-test-subj']);
+        var color = action.color ? (0, _action_types.callWithItemIfFunction)(item)(action.color) : undefined;
         var _onClick = action.onClick,
           target = action.target;
         controls.push((0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
@@ -78,6 +79,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
           href: href,
           target: target,
           icon: icon,
+          color: color,
           "data-test-subj": dataTestSubj,
           onClick: function onClick(event) {
             event.persist();

package/optimize/lib/components/color_picker/color_picker.js

@@ -95,9 +95,12 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     _ref$isClearable = _ref.isClearable,
     isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
     placeholder = _ref.placeholder,
-    dataTestSubj = _ref['data-test-subj'];
-  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.selectedColorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel'], ['Color selection dialog', 'Color value', 'Selected color', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options']),
-    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 8),
+    dataTestSubj = _ref['data-test-subj'],
+    _ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
+    ariaDescribedby = _ref['aria-describedby'];
+  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.selectedColorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel', 'euiColorPicker.ariaLabel'], ['Color selection dialog', 'Color value', 'Selected color', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options', 'Select a color']),
+    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 9),
     popoverLabel = _useEuiI18n2[0],
     colorLabel = _useEuiI18n2[1],
     selectedColorLabel = _useEuiI18n2[2],
@@ -105,7 +108,16 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     transparent = _useEuiI18n2[4],
     alphaLabel = _useEuiI18n2[5],
     openLabel = _useEuiI18n2[6],
-    closeLabel = _useEuiI18n2[7];
+    closeLabel = _useEuiI18n2[7],
+    ariaLabel = _useEuiI18n2[8];
+  var openLabelId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'colorPicker',
+    suffix: 'openLabel'
+  });
+  var closeLabelId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'colorPicker',
+    suffix: 'closeLabel'
+  });
   var defaultSwatches = (0, _services.useEuiPaletteColorBlind)();
   var swatches = _swatches !== null && _swatches !== void 0 ? _swatches : defaultSwatches;
   var preferredFormat = (0, _react.useMemo)(function () {
@@ -434,10 +446,21 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
       readOnly: readOnly,
       fullWidth: fullWidth,
       autoComplete: "off",
-      "data-test-subj": testSubjAnchor,
-      "aria-label": isColorSelectorShown ? openLabel : closeLabel,
+      "data-test-subj": testSubjAnchor
+      // if an id is provided it might be used in combination with `htmlFor` on a label,
+      // so we don't want to override it with a fallback `aria-label`
+      ,
+      "aria-label": _ariaLabel ? _ariaLabel : id || ariaLabelledby ? undefined : ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": (0, _classnames.default)(isColorSelectorShown ? openLabelId : closeLabelId, ariaDescribedby),
       controlOnly: true // Don't need two EuiFormControlwrappers
-    }));
+    }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+      id: openLabelId,
+      "aria-hidden": !isColorSelectorShown
+    }, openLabel), (0, _react2.jsx)("span", {
+      id: closeLabelId,
+      "aria-hidden": isColorSelectorShown
+    }, closeLabel))));
   }
   return display === 'inline' ? (0, _react2.jsx)("div", {
     css: styles.euiColorPicker,

package/optimize/lib/components/context_menu/context_menu_item.js

@@ -16,7 +16,7 @@ var _icon = require("../icon");
 var _tool_tip = require("../tool_tip");
 var _context_menu_item = require("./context_menu_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -47,12 +47,13 @@ var EuiContextMenuItem = exports.EuiContextMenuItem = function EuiContextMenuIte
     rel = _ref.rel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    color = _ref.color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid;
   var classes = (0, _classnames.default)('euiContextMenuItem', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_context_menu_item.euiContextMenuItemStyles);
-  var cssStyles = [styles.euiContextMenuItem, styles.sizes[size], styles.layoutAlign[layoutAlign], disabled && styles.disabled];
+  var cssStyles = [styles.euiContextMenuItem, styles.sizes[size], styles.layoutAlign[layoutAlign], disabled && styles.disabled, !disabled && color && styles.colors[color]];
   var iconInstance = icon && (typeof icon === 'string' ? (0, _react2.jsx)(_icon.EuiIcon, {
     type: icon,
     size: "m",

package/optimize/lib/components/context_menu/context_menu_item.styles.js

@@ -81,6 +81,10 @@ var euiContextMenuItemStyles = exports.euiContextMenuItemStyles = function euiCo
       euiContextMenuItem__text: _ref2,
       s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:s;")
     },
-    euiContextMenuItem__arrow: _ref
+    euiContextMenuItem__arrow: _ref,
+    // Colors - maps button color names to text color overrides
+    colors: Object.fromEntries(_global_styling.EXTENDED_BUTTON_COLORS.map(function (color) {
+      return [color, /*#__PURE__*/(0, _react.css)("color:", (0, _global_styling.euiButtonEmptyColor)(euiThemeContext, color).color, ";;label:colors;")];
+    }))
   };
 };

package/optimize/lib/components/datagrid/utils/scrolling.js

@@ -10,6 +10,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../services");
+var _hooks = require("../../../services/hooks");
 var _global_styling = require("../../../global_styling");
 var _cell = require("../body/cell");
 var _focus = require("./focus");
@@ -37,20 +38,48 @@ var useScroll = exports.useScroll = function useScroll(args) {
     scrollCellIntoView = _useScrollCellIntoVie.scrollCellIntoView;
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     focusedCell = _useContext.focusedCell;
-  var isPointerDown = (0, _services.useIsPointerDown)(args.outerGridRef);
+  var isPointerDownRef = (0, _hooks.useIsPointerDown)(args.outerGridRef);
+
+  /**
+   * Set when `focusedCell` changes while the pointer is held down (e.g. clicking a cell).
+   * Allows the `pointerup` listener below to scroll on release without
+   * causing snap-back when the user scrolls the grid without changing focus.
+   */
+  var pendingScrollRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!focusedCell) return;
+    if (isPointerDownRef.current) {
+      // Pointer is down - defer scroll decision to the pointerup listener
+      pendingScrollRef.current = true;
+      return;
+    }
+    scrollCellIntoView({
+      rowIndex: focusedCell[1],
+      colIndex: focusedCell[0]
+    });
+  }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   (0, _react.useEffect)(function () {
-    if (focusedCell) {
+    var handlePointerUp = function handlePointerUp() {
       var _window;
-      // do not scroll if text is being selected
-      if (isPointerDown || ((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') {
-        return;
-      }
+      if (!pendingScrollRef.current || !focusedCell) return;
+      pendingScrollRef.current = false;
+
+      // Skip if the interaction resulted in text being selected
+      if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({
         rowIndex: focusedCell[1],
         colIndex: focusedCell[0]
       });
-    }
-  }, [focusedCell, isPointerDown, scrollCellIntoView]);
+    };
+    document.addEventListener('pointerup', handlePointerUp, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener('pointerup', handlePointerUp, {
+        capture: true
+      });
+    };
+  }, [focusedCell, scrollCellIntoView]);
   var _useContext2 = (0, _react.useContext)(_cell.DataGridCellPopoverContext),
     popoverIsOpen = _useContext2.popoverIsOpen,
     cellLocation = _useContext2.cellLocation;

package/optimize/lib/components/date_picker/super_date_picker/time_window_buttons.js

@@ -160,11 +160,20 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
 function useEuiTimeWindow(start, end, apply, options) {
   var _options$zoomFactor;
   var min = _datemath.default.parse(start);
+
+  /* `roundUp: true` will result in an "inclusive" time (e.g. 23:59:59.999 for 'now/d').
+  It only changes the value for relative expressions (e.g. 'now/d') but not absolute ISO strings. */
   var max = _datemath.default.parse(end, {
     roundUp: true
   });
   var isInvalid = !min || !min.isValid() || !max || !max.isValid();
-  var windowDuration = isInvalid ? -1 : max.diff(min);
+  /* An end at .999ms is always considered an inclusive boundary (either as result of `roundUp: true`
+  or entered manually). 
+  To avoid a 1ms drift on every time window or zoom step, windowDuration has to be increased by 1ms.
+  This ensures the window is always at a clean boundary (e.g. 00:00:00.000 - 23:59:59.999). */
+  var isInclusiveBoundary = !isInvalid && max.milliseconds() === 999;
+  var endBoundary = !isInvalid ? isInclusiveBoundary ? (0, _moment.default)(max).add(1, 'ms') : (0, _moment.default)(max) : null;
+  var windowDuration = isInvalid || !endBoundary ? -1 : endBoundary.diff(min);
   var isWindowDurationZero = windowDuration === 0;
   var zoomFactor = getPercentageMultiplier((_options$zoomFactor = options === null || options === void 0 ? void 0 : options.zoomFactor) !== null && _options$zoomFactor !== void 0 ? _options$zoomFactor : ZOOM_FACTOR_DEFAULT);
   var zoomDelta = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
@@ -185,7 +194,10 @@ function useEuiTimeWindow(start, end, apply, options) {
   function stepForward() {
     if (isInvalid || isWindowDurationZero) return;
     apply({
-      start: (0, _moment.default)(max).toISOString(),
+      /* Prevent 1ms drifts for inclusive boundaries by using the exclusive max (+ 1ms)
+      as the start of the next window (e.g. 00:00:00.000 instead of 23:59:59.999) */
+      start: (isInclusiveBoundary ? endBoundary // `!` is safe here because we early return on `isInvalid`
+      : (0, _moment.default)(max)).toISOString(),
       end: (0, _moment.default)(max).add(windowDuration, 'ms').toISOString()
     });
   }
@@ -193,7 +205,9 @@ function useEuiTimeWindow(start, end, apply, options) {
     if (isInvalid || isWindowDurationZero) return;
     apply({
       start: (0, _moment.default)(min).subtract(windowDuration, 'ms').toISOString(),
-      end: (0, _moment.default)(min).toISOString()
+      /* Prevent 1ms drifts for inclusive boundaries by using the exclusive min (- 1ms)
+      as the end of the previous window (e.g. 23:59:59.999 instead of 00:00:00.000) */
+      end: (isInclusiveBoundary ? (0, _moment.default)(min).subtract(1, 'ms') : (0, _moment.default)(min)).toISOString()
     });
   }
   function expandWindow() {