@elastic/eui 94.3.0 → 94.4.1

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

@@ -1,16 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap"],
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap", "toolTipContent", "toolTipProps", "aria-describedby"],
   _excluded2 = ["children", "className"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,12 +13,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  */
 
 import classNames from 'classnames';
-import React, { Component } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { keysOf } from '../../common';
 import { EuiI18n } from '../../i18n';
 import { EuiIcon } from '../../icon';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBadge } from '../../badge';
+import { EuiToolTip } from '../../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 function resolveIconAndColor(checked) {
   switch (checked) {
@@ -56,194 +50,219 @@ var paddingSizeToClassNameMap = {
   s: 'euiSelectableListItem--paddingSmall'
 };
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
-  _inherits(EuiSelectableListItem, _Component);
-  var _super = _createSuper(EuiSelectableListItem);
-  function EuiSelectableListItem(props) {
-    var _this;
-    _classCallCheck(this, EuiSelectableListItem);
-    _this = _super.call(this, props);
-    // aria-checked is intended to be used with role="checkbox" but
-    // the MDN documentation lists it as a possibility for role="option".
-    // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
-    // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
-    _defineProperty(_assertThisInitialized(_this), "isChecked", function (role, checked) {
-      var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
-      var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
-      if (!rolesThatCanBeChecked.includes(role)) return undefined;
-      switch (checked) {
-        case 'on':
-        case 'off':
-          return true;
-        case 'mixed':
-          if (rolesThatCanBeMixed.includes(role)) {
-            return 'mixed';
-          } else {
-            return false;
-          }
-        default:
-          return false;
-      }
-    });
-    return _this;
-  }
-  _createClass(EuiSelectableListItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        disabled = _this$props.disabled,
-        checked = _this$props.checked,
-        isFocused = _this$props.isFocused,
-        showIcons = _this$props.showIcons,
-        prepend = _this$props.prepend,
-        append = _this$props.append,
-        allowExclusions = _this$props.allowExclusions,
-        onFocusBadge = _this$props.onFocusBadge,
-        _this$props$paddingSi = _this$props.paddingSize,
-        paddingSize = _this$props$paddingSi === void 0 ? 's' : _this$props$paddingSi,
-        _this$props$role = _this$props.role,
-        role = _this$props$role === void 0 ? 'option' : _this$props$role,
-        searchable = _this$props.searchable,
-        textWrap = _this$props.textWrap,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames('euiSelectableListItem', {
-        'euiSelectableListItem-isFocused': isFocused
-      }, paddingSizeToClassNameMap[paddingSize], className);
-      var textClasses = classNames('euiSelectableListItem__text', _defineProperty({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
-      var optionIcon;
-      if (showIcons) {
-        var _resolveIconAndColor = resolveIconAndColor(checked),
-          icon = _resolveIconAndColor.icon,
-          color = _resolveIconAndColor.color;
-        optionIcon = ___EmotionJSX(EuiIcon, {
-          className: "euiSelectableListItem__icon",
-          color: color,
-          type: icon
-        });
-      }
-      var state;
-      var instructions;
-      var screenReaderStrings = {
-        checked: {
-          state: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.checkedOption",
-            default: "Checked option."
-          }),
-          instructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.checkOptionInstructions",
-            default: "To check this option, press Enter."
-          })
-        },
-        unchecked: {
-          instructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.uncheckOptionInstructions",
-            default: "To uncheck this option, press Enter."
-          })
-        },
-        excluded: {
-          state: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.excludedOption",
-            default: "Excluded option."
-          }),
-          instructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.excludeOptionInstructions",
-            default: "To exclude this option, press Enter."
-          })
-        },
-        mixed: {
-          state: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.mixedOption",
-            default: "Mixed (indeterminate) option."
-          }),
-          instructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.mixedOptionInstructions",
-            default: "To check this option for all, press Enter once."
-          }),
-          uncheckInstructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.mixedOptionUncheckInstructions",
-            default: "To uncheck this option for all, press Enter twice."
-          }),
-          excludeInstructions: ___EmotionJSX(EuiI18n, {
-            token: "euiSelectableListItem.mixedOptionExcludeInstructions",
-            default: "To exclude this option for all, press Enter twice."
-          })
-        }
-      };
-      switch (checked) {
-        case 'on':
-          state = screenReaderStrings.checked.state;
-          instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
-          break;
-        case 'off':
-          state = screenReaderStrings.excluded.state;
-          instructions = screenReaderStrings.unchecked.instructions;
-          break;
-        case 'mixed':
-          state = screenReaderStrings.mixed.state;
-          instructions = ___EmotionJSX(React.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
-          break;
-        case undefined:
-        default:
-          instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
-          break;
-      }
-      var prependNode;
-      if (prepend) {
-        prependNode = ___EmotionJSX("span", {
-          className: "euiSelectableListItem__prepend"
-        }, prepend);
+export var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    checked = _ref.checked,
+    isFocused = _ref.isFocused,
+    _ref$showIcons = _ref.showIcons,
+    showIcons = _ref$showIcons === void 0 ? true : _ref$showIcons,
+    prepend = _ref.prepend,
+    append = _ref.append,
+    allowExclusions = _ref.allowExclusions,
+    _ref$onFocusBadge = _ref.onFocusBadge,
+    onFocusBadge = _ref$onFocusBadge === void 0 ? true : _ref$onFocusBadge,
+    _ref$paddingSize = _ref.paddingSize,
+    paddingSize = _ref$paddingSize === void 0 ? 's' : _ref$paddingSize,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'option' : _ref$role,
+    searchable = _ref.searchable,
+    _ref$textWrap = _ref.textWrap,
+    textWrap = _ref$textWrap === void 0 ? 'truncate' : _ref$textWrap,
+    toolTipContent = _ref.toolTipContent,
+    toolTipProps = _ref.toolTipProps,
+    _ariaDescribedBy = _ref['aria-describedby'],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiSelectableListItem', {
+    'euiSelectableListItem-isFocused': isFocused
+  }, paddingSizeToClassNameMap[paddingSize], className);
+  var textClasses = classNames('euiSelectableListItem__text', _defineProperty({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
+  var optionIcon = useMemo(function () {
+    if (showIcons) {
+      var _resolveIconAndColor = resolveIconAndColor(checked),
+        icon = _resolveIconAndColor.icon,
+        color = _resolveIconAndColor.color;
+      return ___EmotionJSX(EuiIcon, {
+        className: "euiSelectableListItem__icon",
+        color: color,
+        type: icon
+      });
+    }
+  }, [showIcons, checked]);
+  var prependNode = useMemo(function () {
+    if (prepend) {
+      return ___EmotionJSX("span", {
+        className: "euiSelectableListItem__prepend"
+      }, prepend);
+    }
+  }, [prepend]);
+  var onFocusBadgeNode = useMemo(function () {
+    var defaultOnFocusBadgeProps = {
+      'aria-hidden': true,
+      iconType: 'returnKey',
+      iconSide: 'left',
+      color: 'hollow'
+    };
+    if (onFocusBadge === true) {
+      return ___EmotionJSX(EuiBadge, _extends({
+        className: "euiSelectableListItem__onFocusBadge"
+      }, defaultOnFocusBadgeProps));
+    } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
+      var _children = onFocusBadge.children,
+        _className = onFocusBadge.className,
+        restBadgeProps = _objectWithoutProperties(onFocusBadge, _excluded2);
+      return ___EmotionJSX(EuiBadge, _extends({
+        className: classNames('euiSelectableListItem__onFocusBadge', _className)
+      }, defaultOnFocusBadgeProps, restBadgeProps), _children);
+    }
+  }, [onFocusBadge]);
+  var showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
+  var appendNode = useMemo(function () {
+    if (append || showOnFocusBadge) {
+      return ___EmotionJSX("span", {
+        className: "euiSelectableListItem__append"
+      }, append, " ", showOnFocusBadge ? onFocusBadgeNode : null);
+    }
+  }, [append, showOnFocusBadge, onFocusBadgeNode]);
+  var screenReaderText = useMemo(function () {
+    var state;
+    var instructions;
+    var screenReaderStrings = {
+      checked: {
+        state: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.checkedOption",
+          default: "Checked option."
+        }),
+        instructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.checkOptionInstructions",
+          default: "To check this option, press Enter."
+        })
+      },
+      unchecked: {
+        instructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.uncheckOptionInstructions",
+          default: "To uncheck this option, press Enter."
+        })
+      },
+      excluded: {
+        state: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.excludedOption",
+          default: "Excluded option."
+        }),
+        instructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.excludeOptionInstructions",
+          default: "To exclude this option, press Enter."
+        })
+      },
+      mixed: {
+        state: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.mixedOption",
+          default: "Mixed (indeterminate) option."
+        }),
+        instructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.mixedOptionInstructions",
+          default: "To check this option for all, press Enter once."
+        }),
+        uncheckInstructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.mixedOptionUncheckInstructions",
+          default: "To uncheck this option for all, press Enter twice."
+        }),
+        excludeInstructions: ___EmotionJSX(EuiI18n, {
+          token: "euiSelectableListItem.mixedOptionExcludeInstructions",
+          default: "To exclude this option for all, press Enter twice."
+        })
       }
-      var appendNode;
-      if (append || !!onFocusBadge) {
-        var onFocusBadgeNode;
-        var defaultOnFocusBadgeProps = {
-          'aria-hidden': true,
-          iconType: 'returnKey',
-          iconSide: 'left',
-          color: 'hollow'
-        };
-        if (onFocusBadge === true) {
-          onFocusBadgeNode = ___EmotionJSX(EuiBadge, _extends({
-            className: "euiSelectableListItem__onFocusBadge"
-          }, defaultOnFocusBadgeProps));
-        } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
-          var _children = onFocusBadge.children,
-            _className = onFocusBadge.className,
-            restBadgeProps = _objectWithoutProperties(onFocusBadge, _excluded2);
-          onFocusBadgeNode = ___EmotionJSX(EuiBadge, _extends({
-            className: classNames('euiSelectableListItem__onFocusBadge', _className)
-          }, defaultOnFocusBadgeProps, restBadgeProps), _children);
-        }
+    };
+    switch (checked) {
+      case 'on':
+        state = screenReaderStrings.checked.state;
+        instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
+        break;
+      case 'off':
+        state = screenReaderStrings.excluded.state;
+        instructions = screenReaderStrings.unchecked.instructions;
+        break;
+      case 'mixed':
+        state = screenReaderStrings.mixed.state;
+        instructions = ___EmotionJSX(React.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
+        break;
+      case undefined:
+      default:
+        instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
+        break;
+    }
+    return state || instructions ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions)) : null;
+  }, [checked, searchable, allowExclusions]);
 
-        // Only display the append wrapper if append exists or isFocused
-        if (append || isFocused && !disabled) {
-          appendNode = ___EmotionJSX("span", {
-            className: "euiSelectableListItem__append"
-          }, append, " ", isFocused && !disabled ? onFocusBadgeNode : null);
+  // aria-checked is intended to be used with role="checkbox" but
+  // the MDN documentation lists it as a possibility for role="option".
+  // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+  // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+  var ariaChecked = useMemo(function () {
+    var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
+    var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
+    if (!rolesThatCanBeChecked.includes(role)) return undefined;
+    switch (checked) {
+      case 'on':
+      case 'off':
+        return true;
+      case 'mixed':
+        if (rolesThatCanBeMixed.includes(role)) {
+          return 'mixed';
+        } else {
+          return false;
         }
-      }
-      var screenReaderText = (state || instructions) && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions));
-      return ___EmotionJSX("li", _extends({
-        role: role,
-        "aria-disabled": disabled,
-        "aria-checked": this.isChecked(role, checked) // Whether the item is "checked"
-        ,
-        "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
-        ,
-        className: classes
-      }, rest), ___EmotionJSX("span", {
-        className: "euiSelectableListItem__content"
-      }, optionIcon, prependNode, ___EmotionJSX("span", {
-        className: textClasses
-      }, children, screenReaderText), appendNode));
+      default:
+        return false;
+    }
+  }, [role, checked]);
+  var hasToolTip = !!toolTipContent && !disabled;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipRef = _useState2[0],
+    setTooltipRef = _useState2[1]; // Needs to be state and not a ref to trigger useEffect
+  var _useState3 = useState(_ariaDescribedBy),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ariaDescribedBy = _useState4[0],
+    setAriaDescribedBy = _useState4[1];
+
+  // Manually trigger the tooltip on keyboard focus
+  useEffect(function () {
+    if (!tooltipRef) return;
+    if (isFocused) {
+      tooltipRef.showToolTip();
+    } else {
+      tooltipRef.hideToolTip();
+    }
+  }, [isFocused, tooltipRef]);
+
+  // Manually set the `aria-describedby` id on the <li> wrapper
+  useEffect(function () {
+    if (tooltipRef) {
+      var tooltipId = tooltipRef.state.id;
+      setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
     }
-  }]);
-  return EuiSelectableListItem;
-}(Component);
-_defineProperty(EuiSelectableListItem, "defaultProps", {
-  showIcons: true,
-  onFocusBadge: true,
-  textWrap: 'truncate'
-});
+  }, [tooltipRef, _ariaDescribedBy]);
+  var content = ___EmotionJSX("span", {
+    className: "euiSelectableListItem__content"
+  }, optionIcon, prependNode, ___EmotionJSX("span", {
+    className: textClasses
+  }, children, screenReaderText), appendNode);
+  return ___EmotionJSX("li", _extends({
+    role: role,
+    "aria-disabled": disabled,
+    "aria-checked": ariaChecked // Whether the item is "checked"
+    ,
+    "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
+    ,
+    className: classes
+  }, rest, {
+    "aria-describedby": ariaDescribedBy
+  }), hasToolTip ? ___EmotionJSX(EuiToolTip, _extends({
+    ref: setTooltipRef,
+    content: toolTipContent,
+    anchorClassName: "euiSelectableListItem__tooltipAnchor",
+    position: "left"
+  }, toolTipProps), content) : content);
+};

package/optimize/es/components/selectable/selectable_option.js

@@ -1 +1,9 @@
-export {};
+/*
+ * 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.
+ */
+
+export var OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined];

package/optimize/es/components/text/text_color.js

@@ -16,6 +16,9 @@ import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
+export var _isNamedColor = function _isNamedColor(color) {
+  return COLORS.includes(color);
+};
 export var EuiTextColor = function EuiTextColor(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
@@ -26,7 +29,7 @@ export var EuiTextColor = function EuiTextColor(_ref) {
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isNamedColor = COLORS.includes(color);
+  var isNamedColor = _isNamedColor(color);
   var styles = useEuiMemoizedStyles(euiTextColorStyles);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
 

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -15,6 +15,7 @@ var _button_icon = require("../../../button/button_icon");
 var _tool_tip = require("../../../tool_tip");
 var _context = require("../../context");
 var _collapsed_nav_button = require("./collapsed_nav_button.styles");
+var _i18n = require("../../../i18n");
 var _react2 = require("@emotion/react");
 var _excluded = ["href", "title", "icon", "iconProps", "isSelected", "onClick", "hideToolTip", "linkProps", "titleElement"];
 /*
@@ -44,6 +45,9 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
   var buttonClassName = (0, _classnames.default)('euiCollapsedNavButton', linkProps === null || linkProps === void 0 ? void 0 : linkProps.className);
   var tooltipStyles = (0, _services.useEuiMemoizedStyles)(_collapsed_nav_button.euiCollapsedNavItemTooltipStyles);
   var tooltipCssStyles = [tooltipStyles.euiCollapsedNavItemTooltip, tooltipStyles[side], hideToolTip && tooltipStyles.hidden];
+  var buttonIconAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedNavButton.ariaLabelButtonIcon', '{title}, quick navigation menu', {
+    title: title
+  });
   return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: title,
     css: tooltipCssStyles,
@@ -56,7 +60,7 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     color: "text",
     href: href,
     onClick: onClick,
-    "aria-label": title
+    "aria-label": buttonIconAriaLabel
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,

package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -17,8 +17,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
-var _services = require("../../../../services");
 var _form = require("../../../form");
+var _flex = require("../../../flex");
+var _button = require("../../../button");
 var _code = require("../../../code");
 var _i18n = require("../../../i18n");
 var _date_picker = require("../../date_picker");
@@ -152,20 +153,29 @@ var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), (0, _react2.jsx)(_i18n.EuiI18n, {
-        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
-        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
+        tokens: ['euiAbsoluteTab.dateFormatButtonLabel', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Parse date', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
           dateFormat: (0, _react2.jsx)(_code.EuiCode, null, dateFormat)
         }
       }, function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-          dateFormatHint = _ref2[0],
+          dateFormatButtonLabel = _ref2[0],
           dateFormatError = _ref2[1];
-        return (0, _react2.jsx)(_form.EuiFormRow, {
+        return (0, _react2.jsx)(_flex.EuiFlexGroup, {
+          component: "form",
+          onSubmit: function onSubmit(e) {
+            e.preventDefault(); // Prevents a page refresh/reload
+            _this2.parseUserDateInput(textInputValue);
+          },
+          className: "euiSuperDatePicker__absoluteDateForm",
+          gutterSize: "s",
+          responsive: false
+        }, (0, _react2.jsx)(_form.EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
           error: isTextInvalid ? dateFormatError : undefined,
-          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
+          helpText: hasUnparsedText && !isTextInvalid ? dateFormatError : undefined
         }, (0, _react2.jsx)(_form.EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
@@ -174,13 +184,17 @@ var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
           onPaste: function onPaste(event) {
             _this2.parseUserDateInput(event.clipboardData.getData('text'));
           },
-          onKeyDown: function onKeyDown(event) {
-            if (event.key === _services.keys.ENTER) {
-              _this2.parseUserDateInput(textInputValue);
-            }
-          },
           "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: (0, _react2.jsx)(_form.EuiFormLabel, null, labelPrefix)
+        })), hasUnparsedText && (0, _react2.jsx)(_button.EuiButtonIcon, {
+          type: "submit",
+          className: "euiSuperDatePicker__absoluteDateFormSubmit",
+          size: "s",
+          display: "base",
+          iconType: "check",
+          "aria-label": dateFormatButtonLabel,
+          title: dateFormatButtonLabel,
+          "data-test-subj": "parseAbsoluteDateFormat"
         }));
       }));
     }

package/optimize/lib/components/form/form.styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormControlSize = exports.euiCustomControl = void 0;
+exports.euiFormVariables = exports.euiFormControlText = exports.euiFormControlSize = exports.euiFormControlFocusStyles = exports.euiFormControlDefaultShadow = exports.euiCustomControl = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -70,7 +70,9 @@ var euiFormVariables = function euiFormVariables(euiThemeContext) {
       xxl: euiTheme.size.xxl
     }
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout), {}, {
+    animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
+  });
 };
 exports.euiFormVariables = euiFormVariables;
 var euiFormControlSize = function euiFormControlSize(euiThemeContext) {
@@ -106,6 +108,30 @@ var euiCustomControl = function euiCustomControl(euiThemeContext) {
   } else if (type === 'square') {
     borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
   }
-  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition: background-color ").concat(euiTheme.animation.fast, " ease-in,\n              border-color ").concat(euiTheme.animation.fast, " ease-in;\n    }\n  ");
+  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
 };
-exports.euiCustomControl = euiCustomControl;
+exports.euiCustomControl = euiCustomControl;
+var euiFormControlText = function euiFormControlText(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
+    fontSize = _euiFontSize.fontSize;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
+  return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(euiTheme.colors.text, ";\n\n    ").concat(euiPlaceholderPerBrowser("color: ".concat(controlPlaceholderText)), "\n  ");
+};
+exports.euiFormControlText = euiFormControlText;
+var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  return "\n    box-shadow: inset 0 0 0 1px ".concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormStateColor),\n      var(--euiFormStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
+};
+exports.euiFormControlDefaultShadow = euiFormControlDefaultShadow;
+var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
+  return "\n  --euiFormStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
+};
+exports.euiFormControlFocusStyles = euiFormControlFocusStyles;
+var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
+  return "\n  &::-webkit-input-placeholder { ".concat(content, "; opacity: 1; }\n  &::-moz-placeholder { ").concat(content, "; opacity: 1; }\n  &:-ms-input-placeholder { ").concat(content, "; opacity: 1; }\n  &:-moz-placeholder { ").concat(content, "; opacity: 1; }\n  &::placeholder { ").concat(content, "; opacity: 1; }\n");
+};