@elastic/eui 94.3.0 → 94.4.1

package/i18ntokens.json

@@ -611,6 +611,24 @@
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx"
   },
+  {
+    "token": "euiCollapsedNavButton.ariaLabelButtonIcon",
+    "defString": "{title}, quick navigation menu",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 67,
+        "column": 30,
+        "index": 2043
+      },
+      "end": {
+        "line": 71,
+        "column": 3,
+        "index": 2159
+      }
+    },
+    "filepath": "src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx"
+  },
   {
     "token": "euiColorPickerSwatch.ariaLabel",
     "defString": "Select {color} as the color",
@@ -2700,19 +2718,19 @@
     "filepath": "src/components/date_picker/auto_refresh/refresh_interval.tsx"
   },
   {
-    "token": "euiAbsoluteTab.dateFormatHint",
-    "defString": "Press the Enter key to parse as a date.",
+    "token": "euiAbsoluteTab.dateFormatButtonLabel",
+    "defString": "Parse date",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 168,
+        "line": 169,
         "column": 8,
-        "index": 4826
+        "index": 4887
       },
       "end": {
-        "line": 178,
+        "line": 179,
         "column": 9,
-        "index": 5210
+        "index": 5249
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx"
@@ -2723,14 +2741,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 168,
+        "line": 169,
         "column": 8,
-        "index": 4826
+        "index": 4887
       },
       "end": {
-        "line": 178,
+        "line": 179,
         "column": 9,
-        "index": 5210
+        "index": 5249
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx"
@@ -5225,14 +5243,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 84,
+        "line": 89,
         "column": 20,
-        "index": 2378
+        "index": 2586
       },
       "end": {
-        "line": 87,
+        "line": 92,
         "column": 5,
-        "index": 2473
+        "index": 2681
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5243,14 +5261,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 88,
+        "line": 93,
         "column": 21,
-        "index": 2496
+        "index": 2704
       },
       "end": {
-        "line": 91,
+        "line": 96,
         "column": 5,
-        "index": 2594
+        "index": 2802
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5261,14 +5279,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 92,
+        "line": 97,
         "column": 25,
-        "index": 2621
+        "index": 2829
       },
       "end": {
-        "line": 95,
+        "line": 100,
         "column": 5,
-        "index": 2723
+        "index": 2931
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5279,14 +5297,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 96,
+        "line": 101,
         "column": 24,
-        "index": 2749
+        "index": 2957
       },
       "end": {
-        "line": 100,
+        "line": 105,
         "column": 5,
-        "index": 2894
+        "index": 3102
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5297,14 +5315,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 101,
+        "line": 106,
         "column": 22,
-        "index": 2918
+        "index": 3126
       },
       "end": {
-        "line": 104,
+        "line": 109,
         "column": 5,
-        "index": 3005
+        "index": 3213
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5315,14 +5333,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 105,
+        "line": 110,
         "column": 22,
-        "index": 3029
+        "index": 3237
       },
       "end": {
-        "line": 108,
+        "line": 113,
         "column": 5,
-        "index": 3123
+        "index": 3331
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5333,14 +5351,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 116,
         "column": 22,
-        "index": 3153
+        "index": 3361
       },
       "end": {
-        "line": 114,
+        "line": 119,
         "column": 3,
-        "index": 3229
+        "index": 3437
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5351,14 +5369,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 180,
+        "line": 189,
         "column": 12,
-        "index": 5040
+        "index": 5383
       },
       "end": {
-        "line": 183,
+        "line": 192,
         "column": 14,
-        "index": 5152
+        "index": 5495
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5369,14 +5387,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 203,
+        "line": 212,
         "column": 6,
-        "index": 5698
+        "index": 6041
       },
       "end": {
-        "line": 206,
+        "line": 215,
         "column": 8,
-        "index": 5811
+        "index": 6154
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5387,14 +5405,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 236,
+        "line": 246,
         "column": 16,
-        "index": 6645
+        "index": 7049
       },
       "end": {
-        "line": 245,
+        "line": 255,
         "column": 17,
-        "index": 7073
+        "index": 7477
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5405,14 +5423,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 236,
+        "line": 246,
         "column": 16,
-        "index": 6645
+        "index": 7049
       },
       "end": {
-        "line": 245,
+        "line": 255,
         "column": 17,
-        "index": 7073
+        "index": 7477
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5423,14 +5441,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 274,
+        "line": 284,
         "column": 16,
-        "index": 8133
+        "index": 8537
       },
       "end": {
-        "line": 277,
+        "line": 287,
         "column": 18,
-        "index": 8256
+        "index": 8660
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5441,14 +5459,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 303,
+        "line": 314,
         "column": 8,
-        "index": 8962
+        "index": 9427
       },
       "end": {
-        "line": 306,
+        "line": 317,
         "column": 9,
-        "index": 9094
+        "index": 9559
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_footer.tsx"
@@ -5459,14 +5477,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 232,
+        "line": 251,
         "column": 12,
-        "index": 6571
+        "index": 7162
       },
       "end": {
-        "line": 232,
+        "line": 251,
         "column": 80,
-        "index": 6639
+        "index": 7230
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_toolbar.tsx"
@@ -5477,14 +5495,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 243,
+        "line": 262,
         "column": 12,
-        "index": 6936
+        "index": 7527
       },
       "end": {
-        "line": 246,
+        "line": 265,
         "column": 14,
-        "index": 7054
+        "index": 7645
       }
     },
     "filepath": "src/components/markdown_editor/markdown_editor_toolbar.tsx"
@@ -5909,14 +5927,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 184,
+        "line": 213,
         "column": 10,
-        "index": 5641
+        "index": 6354
       },
       "end": {
-        "line": 187,
+        "line": 216,
         "column": 12,
-        "index": 5756
+        "index": 6469
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -5927,14 +5945,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 190,
+        "line": 219,
         "column": 10,
-        "index": 5802
+        "index": 6515
       },
       "end": {
-        "line": 193,
+        "line": 222,
         "column": 12,
-        "index": 5946
+        "index": 6659
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -5945,14 +5963,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 198,
+        "line": 227,
         "column": 10,
-        "index": 6020
+        "index": 6733
       },
       "end": {
-        "line": 201,
+        "line": 230,
         "column": 12,
-        "index": 6168
+        "index": 6881
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -5963,14 +5981,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 206,
+        "line": 235,
         "column": 10,
-        "index": 6234
+        "index": 6947
       },
       "end": {
-        "line": 209,
+        "line": 238,
         "column": 12,
-        "index": 6351
+        "index": 7064
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -5981,14 +5999,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 212,
+        "line": 241,
         "column": 10,
-        "index": 6397
+        "index": 7110
       },
       "end": {
-        "line": 215,
+        "line": 244,
         "column": 12,
-        "index": 6545
+        "index": 7258
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -5999,14 +6017,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 249,
         "column": 10,
-        "index": 6608
+        "index": 7321
       },
       "end": {
-        "line": 223,
+        "line": 252,
         "column": 12,
-        "index": 6735
+        "index": 7448
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6017,14 +6035,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 226,
+        "line": 255,
         "column": 10,
-        "index": 6781
+        "index": 7494
       },
       "end": {
-        "line": 229,
+        "line": 258,
         "column": 12,
-        "index": 6938
+        "index": 7651
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6035,14 +6053,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 232,
+        "line": 261,
         "column": 10,
-        "index": 6991
+        "index": 7704
       },
       "end": {
-        "line": 235,
+        "line": 264,
         "column": 12,
-        "index": 7158
+        "index": 7871
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6053,14 +6071,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 238,
+        "line": 267,
         "column": 10,
-        "index": 7211
+        "index": 7924
       },
       "end": {
-        "line": 241,
+        "line": 270,
         "column": 12,
-        "index": 7378
+        "index": 8091
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"

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

@@ -13,6 +13,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"];
 /*
@@ -46,6 +47,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,
@@ -58,7 +62,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/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -8,8 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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");
@@ -162,20 +163,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 = _slicedToArray(_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,
@@ -184,13 +194,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/lib/components/form/form.styles.js

@@ -3,7 +3,7 @@
 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 _services = require("../../services");
 var _global_styling = require("../../global_styling");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -72,7 +72,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) {
@@ -108,6 +110,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");
+};