@elastic/eui 95.9.0 → 95.10.0

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _excluded = ["children", "title", "arrow"];
 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)."; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -10,6 +10,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,13 +25,13 @@ import classnames from 'classnames';
 import PropTypes from "prop-types";
 import React, { useContext, useState, useRef, useCallback, useMemo, memo } from 'react';
 import { tabbable } from 'tabbable';
-import { keys } from '../../../../services';
+import { keys, useEuiMemoizedStyles } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
-import { EuiScreenReaderOnly } from '../../../accessibility';
-import { EuiI18n } from '../../../i18n';
+import { EuiI18n, useEuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
+import { _emptyHoverStyles } from '../../../button/button_icon/button_icon.styles';
 import { DataGridFocusContext } from '../../utils/focus';
 import { getColumnActions } from './column_actions';
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
@@ -37,11 +40,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var CellContent = function CellContent(_ref) {
   var children = _ref.children,
     title = _ref.title,
-    arrow = _ref.arrow;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    arrow = _ref.arrow,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, rest, {
     title: title,
     className: "euiDataGridHeaderCell__content"
-  }, children), arrow);
+  }), children), arrow);
 };
 CellContent.propTypes = {
   title: PropTypes.string.isRequired,
@@ -71,15 +75,29 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref2) {
     display = column.display,
     displayAsText = column.displayAsText,
     displayHeaderCellProps = column.displayHeaderCellProps;
+  var title = displayAsText || id;
+  var children = display || displayAsText || id;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+
+  /*
+   * Column actions
+   */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
+  var togglePopover = useCallback(function () {
+    setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = useCallback(function () {
+    return setIsPopoverOpen(false);
+  }, []);
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = useMemo(function () {
     return getColumnActions({
@@ -98,14 +116,22 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref2) {
   }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, index]);
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = useRef(null);
-  var focusActionsButton = useCallback(function () {
+  var clickActionsButton = useCallback(function () {
     var _actionsButtonRef$cur;
-    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.focus();
+    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.click();
   }, []);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isActionsButtonFocused = _useState4[0],
     setIsActionsButtonFocused = _useState4[1];
+  var actionsButtonAriaLabel = useEuiI18n('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
+    title: title
+  });
+  var actionsEnterKeyInstructions = useEuiI18n('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
+
+  /*
+   * Column sorting
+   */
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -118,13 +144,12 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref2) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
-  var actionsAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'actions'
-  });
+
+  /*
+   * Rendering
+   */
   var classes = classnames(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
-  var title = displayAsText || id;
-  var children = display || displayAsText || id;
+  var emptyHoverStyles = useEuiMemoizedStyles(_emptyHoverStyles);
   return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -132,75 +157,58 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref2) {
     width: width,
     "aria-sort": ariaSort,
     hasActionsPopover: showColumnActions,
-    isActionsButtonFocused: isActionsButtonFocused,
-    focusActionsButton: focusActionsButton
-  }), column.isResizable !== false && width != null ? ___EmotionJSX(EuiDataGridColumnResizer, {
-    columnId: id,
-    columnWidth: width,
-    setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CellContent, {
-    title: title,
-    arrow: sortingArrow
-  }, children), sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
-    className: "euiDataGridHeaderCell__button",
-    onClick: function onClick() {
-      return setIsPopoverOpen(function (isPopoverOpen) {
-        return !isPopoverOpen;
-      });
-    },
-    onFocus: function onFocus() {
-      return setIsActionsButtonFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsActionsButtonFocused(false);
-    },
-    "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
-    ref: actionsButtonRef,
-    "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, ___EmotionJSX(CellContent, {
-    title: title,
-    arrow: sortingArrow
-  }, children), ___EmotionJSX(EuiPopover, _extends({
-    display: "block",
-    panelPaddingSize: "none",
-    offset: 7,
-    anchorPosition: "downRight",
-    css: _ref3 // Align to right
+    openActionsPopover: clickActionsButton,
+    "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
     ,
-    focusTrapProps: {
-      // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
-      onClickOutside: function onClickOutside(event) {
-        var _actionsButtonRef$cur2;
-        if (((_actionsButtonRef$cur2 = actionsButtonRef.current) === null || _actionsButtonRef$cur2 === void 0 ? void 0 : _actionsButtonRef$cur2.contains(event.target)) === false) {
-          setIsPopoverOpen(false);
-        }
-      }
-    },
-    button: ___EmotionJSX("div", {
-      className: "euiDataGridHeaderCell__icon"
-    }, ___EmotionJSX(EuiIcon, {
-      type: "boxesVertical",
-      size: "s",
-      color: "text"
-    })),
-    isOpen: isPopoverOpen,
-    closePopover: function closePopover() {
-      return setIsPopoverOpen(false);
-    }
-  }, popoverArrowNavigationProps), ___EmotionJSX(EuiListGroup, {
-    listItems: columnActions,
-    gutterSize: "none",
-    "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))), ___EmotionJSX("p", {
-    id: sortingAriaId,
-    hidden: true
-  }, sortingScreenReaderText), ___EmotionJSX("p", {
-    id: actionsAriaId,
-    hidden: true
-  }, ___EmotionJSX(EuiI18n, {
-    token: "euiDataGridHeaderCell.headerActions",
-    default: "Click to view column header actions"
-  }))));
+    "aria-describedby": sortingAriaId
+  }), function (hasFocusTrap) {
+    return ___EmotionJSX(React.Fragment, null, column.isResizable !== false && width != null ? ___EmotionJSX(EuiDataGridColumnResizer, {
+      columnId: id,
+      columnWidth: width,
+      setColumnWidth: setColumnWidth
+    }) : null, ___EmotionJSX(CellContent, {
+      title: title,
+      arrow: sortingArrow
+    }, children), sortingScreenReaderText && ___EmotionJSX("p", {
+      id: sortingAriaId,
+      hidden: true
+    }, sortingScreenReaderText), showColumnActions && ___EmotionJSX(EuiPopover, _extends({
+      display: "block",
+      panelPaddingSize: "none",
+      offset: 7,
+      anchorPosition: "downRight",
+      css: _ref3 // Align to right
+      ,
+      button: ___EmotionJSX("button", {
+        ref: actionsButtonRef,
+        className: "euiDataGridHeaderCell__button",
+        css: emptyHoverStyles.text,
+        onClick: togglePopover,
+        onFocus: function onFocus() {
+          return setIsActionsButtonFocused(true);
+        },
+        onBlur: function onBlur() {
+          return setIsActionsButtonFocused(false);
+        },
+        "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
+        : undefined,
+        "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+        "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
+      }, ___EmotionJSX("div", {
+        className: "euiDataGridHeaderCell__icon"
+      }, ___EmotionJSX(EuiIcon, {
+        type: "boxesVertical",
+        size: "s",
+        color: "text"
+      }))),
+      isOpen: isPopoverOpen,
+      closePopover: closePopover
+    }, popoverArrowNavigationProps), ___EmotionJSX(EuiListGroup, {
+      listItems: columnActions,
+      gutterSize: "none",
+      "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
+    })));
+  });
 });
 EuiDataGridHeaderCell.propTypes = {
   column: PropTypes.shape({
@@ -217,6 +225,7 @@ EuiDataGridHeaderCell.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: PropTypes.string,
     /**

package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "isActionsButtonFocused", "focusActionsButton"];
+var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,9 +16,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import classnames from 'classnames';
-import PropTypes from "prop-types";
 import React, { useContext, useEffect, useState, useCallback } from 'react';
+import PropTypes from "prop-types";
+import classnames from 'classnames';
+import { keys } from '../../../../services';
 import { DataGridFocusContext } from '../../utils/focus';
 import { HandleInteractiveChildren } from '../cell/focus_utils';
 
@@ -35,8 +36,8 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     className = _ref.className,
     children = _ref.children,
     hasActionsPopover = _ref.hasActionsPopover,
-    isActionsButtonFocused = _ref.isActionsButtonFocused,
-    focusActionsButton = _ref.focusActionsButton,
+    openActionsPopover = _ref.openActionsPopover,
+    ariaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
 
@@ -45,16 +46,28 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     _useState2 = _slicedToArray(_useState, 2),
     headerEl = _useState2[0],
     setHeaderEl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderFocusTrap = _useState4[0],
+    setRenderFocusTrap = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    interactiveChildren = _useState6[0],
+    setInteractiveChildren = _useState6[1];
+  useEffect(function () {
+    // We're checking for interactive children outside of the default actions button
+    setRenderFocusTrap(interactiveChildren.length > (hasActionsPopover ? 1 : 0));
+  }, [hasActionsPopover, interactiveChildren]);
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     onFocusUpdate = _useContext.onFocusUpdate;
   var updateCellFocusContext = useCallback(function () {
     setFocusedCell([index, -1]);
   }, [index, setFocusedCell]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFocused = _useState4[0],
-    setIsFocused = _useState4[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocused = _useState8[0],
+    setIsFocused = _useState8[1];
   useEffect(function () {
     onFocusUpdate([index, -1], function (isFocused) {
       setIsFocused(isFocused);
@@ -67,18 +80,17 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     });
   }, [index, onFocusUpdate, headerEl]);
 
-  // For cell headers with actions, auto-focus into the button instead of the cell wrapper div
-  // The button text is significantly more useful to screen readers (e.g. contains sort order & hints)
-  var onFocus = useCallback(function (e) {
-    if (hasActionsPopover && e.target === headerEl) {
-      focusActionsButton === null || focusActionsButton === void 0 || focusActionsButton();
+  // For cell headers with only actions, auto-open the actions popover on enter keypress
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === keys.ENTER && hasActionsPopover && !renderFocusTrap && e.target === headerEl) {
+      openActionsPopover === null || openActionsPopover === void 0 || openActionsPopover();
     }
-  }, [hasActionsPopover, focusActionsButton, headerEl]);
+  }, [hasActionsPopover, openActionsPopover, renderFocusTrap, headerEl]);
   return ___EmotionJSX("div", _extends({
     role: "columnheader",
     ref: setHeaderEl,
-    tabIndex: isFocused && !isActionsButtonFocused ? 0 : -1,
-    onFocus: onFocus,
+    tabIndex: isFocused ? 0 : -1,
+    onKeyDown: onKeyDown,
     className: classes,
     "data-test-subj": "dataGridHeaderCell-".concat(id),
     "data-gridcell-column-id": id,
@@ -87,19 +99,22 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     "data-gridcell-visible-row-index": "-1",
     style: width != null ? {
       width: "".concat(width, "px")
-    } : {}
+    } : {},
+    "aria-label": renderFocusTrap ? ariaLabel : undefined
   }, rest), ___EmotionJSX(HandleInteractiveChildren, {
     cellEl: headerEl,
     updateCellFocusContext: updateCellFocusContext,
-    renderFocusTrap: !hasActionsPopover
-  }, children));
+    renderFocusTrap: renderFocusTrap,
+    onInteractiveChildrenFound: setInteractiveChildren
+  }, typeof children === 'function' ? children(renderFocusTrap) : children));
 };
 EuiDataGridHeaderCellWrapper.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]).isRequired,
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   className: PropTypes.string,
+  "aria-label": PropTypes.any,
   hasActionsPopover: PropTypes.bool,
-  isActionsButtonFocused: PropTypes.bool,
-  focusActionsButton: PropTypes.func
+  openActionsPopover: PropTypes.func
 };

package/es/components/datagrid/controls/column_sorting.js

@@ -274,6 +274,7 @@ DataGridSortingControl.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: PropTypes.string,
     /**

package/es/components/datagrid/data_grid.a11y.js

@@ -212,6 +212,7 @@ describe('EuiDataGrid', function () {
       cy.checkAxe();
     });
     it('has zero violations when the column actions menu is open', function () {
+      cy.get('.euiDataGridHeaderCell').first().realHover();
       cy.get('button.euiDataGridHeaderCell__button').first().realClick();
       cy.checkAxe();
     });
@@ -221,6 +222,7 @@ describe('EuiDataGrid', function () {
       cy.checkAxe();
     });
     it('has zero violations on sort and when the columns sorting menu is open', function () {
+      cy.get('.euiDataGridHeaderCell').last().realHover();
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
       cy.get('div[data-test-subj="dataGridColumnSortingPopover"] button').realClick();

package/es/components/datagrid/utils/in_memory.js

@@ -206,6 +206,7 @@ EuiDataGridInMemoryRenderer.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: PropTypes.string,
     /**

package/es/components/date_picker/date_picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "append", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "prepend", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -64,6 +64,7 @@ var unsupportedProps = [
 export var EuiDatePicker = function EuiDatePicker(_ref) {
   var _ref$adjustDateOnChan = _ref.adjustDateOnChange,
     adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
+    append = _ref.append,
     calendarClassName = _ref.calendarClassName,
     className = _ref.className,
     compressed = _ref.compressed,
@@ -95,6 +96,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     popperClassName = _ref.popperClassName,
     _ref$popoverPlacement = _ref.popoverPlacement,
     popoverPlacement = _ref$popoverPlacement === void 0 ? 'downLeft' : _ref$popoverPlacement,
+    prepend = _ref.prepend,
     readOnly = _ref.readOnly,
     selected = _ref.selected,
     _ref$shadow = _ref.shadow,
@@ -196,21 +198,25 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
   return ___EmotionJSX("span", {
     css: cssStyles,
     className: classes
-  }, ___EmotionJSX(EuiFormControlLayout, {
+  }, ___EmotionJSX(EuiFormControlLayout, _extends({
     icon: optionalIcon,
-    fullWidth: !inline && fullWidth,
-    compressed: !inline && compressed,
     clear: selected && onClear ? {
       onClick: onClear
     } : undefined,
     isLoading: isLoading,
     isInvalid: isInvalid,
     isDisabled: disabled,
-    readOnly: readOnly,
-    isDelimited: inline // Styling shortcut for inline calendars
-    ,
-    iconsPosition: inline ? 'static' : undefined
-  }, control));
+    readOnly: readOnly
+  }, inline ? {
+    isDelimited: true,
+    iconsPosition: 'static'
+  } : {
+    fullWidth: fullWidth,
+    compressed: compressed,
+    append: append,
+    prepend: prepend,
+    css: (append || prepend) && styles.inGroup
+  }), control));
 };
 EuiDatePicker.propTypes = {
   className: PropTypes.string,
@@ -281,9 +287,25 @@ EuiDatePicker.propTypes = {
      * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
      */
   popoverPlacement: PropTypes.any,
+  /**
+     * Creates an input group with element(s) coming before the input.
+     * `string` | `ReactElement` or an array of these
+     *
+     * Ignored if `inline` or `controlOnly` are true.
+     */
+  append: PropTypes.any,
+  /**
+     * Creates an input group with element(s) coming before the input.
+     * `string` | `ReactElement` or an array of these
+     *
+     * Ignored if `inline` or `controlOnly` are true.
+     */
+  prepend: PropTypes.any,
   /**
      * Completely removes form control layout wrapper and ignores
-     * iconType. Best used inside EuiFormControlLayoutDelimited.
+     * `iconType`, `prepend`, and `append`.
+     *
+     * Best used inside EuiFormControlLayoutDelimited.
      */
   controlOnly: PropTypes.bool
 };

package/es/components/date_picker/date_picker.styles.js

@@ -24,7 +24,7 @@ export var euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   return {
     euiDatePicker: _ref,
     inline: {
-      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " box-shadow:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " border:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
       // Skip css`` to avoid generating an Emotion className
       noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
       shadow: /*#__PURE__*/css(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", euiShadowMedium(euiThemeContext), ";};label:shadow;"),
@@ -35,6 +35,7 @@ export var euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
       // Should come after shadow CSS to override their background-colors
       disabled: /*#__PURE__*/css(".euiFormControlLayout{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
       readOnly: /*#__PURE__*/css(".euiFormControlLayout{", euiFormControlReadOnlyStyles(euiThemeContext), ";};label:readOnly;")
-    }
+    },
+    inGroup: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{.euiPopover,.react-datepicker__input-container{", logicalCSS('height', '100%'), ";}};label:inGroup;")
   };
 };

package/es/components/date_picker/date_picker_range.styles.js

@@ -32,7 +32,7 @@ export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineSty
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext), ";};label:shadow;"),

package/es/components/form/super_select/super_select.styles.js

@@ -40,6 +40,6 @@ export var euiSuperSelectControlStyles = function euiSuperSelectControlStyles(eu
     // Layout modifiers
     inGroup: /*#__PURE__*/css(formStyles.inGroup, ";label:inGroup;"),
     // Children
-    euiSuperSelect__placeholder: /*#__PURE__*/css("color:", formVariables.controlDisabledColor, ";;label:euiSuperSelect__placeholder;")
+    euiSuperSelect__placeholder: /*#__PURE__*/css("color:", formVariables.controlPlaceholderText, ";;label:euiSuperSelect__placeholder;")
   };
 };

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

@@ -1,9 +1,12 @@
+var _excluded = ["exclude"];
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 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; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,29 +26,33 @@ import breaks from 'remark-breaks';
 import highlight from '../remark/remark_prismjs';
 import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
-import { euiMarkdownLinkValidator } from '../markdown_link_validator';
+import { euiMarkdownLinkValidator, DEFAULT_OPTIONS as LINK_VALIDATOR_DEFAULTS } from '../markdown_link_validator';
 var DEFAULT_PARSING_PLUGINS = {
   emoji: [emoji, {
     emoticon: false
   }],
   lineBreaks: [breaks, {}],
-  linkValidator: [euiMarkdownLinkValidator, {
-    allowRelative: true,
-    allowProtocols: ['https:', 'http:', 'mailto:']
-  }],
+  linkValidator: [euiMarkdownLinkValidator, LINK_VALIDATOR_DEFAULTS],
   checkbox: [MarkdownCheckbox.parser, {}],
   tooltip: [MarkdownTooltip.parser, {}]
 };
 export var getDefaultEuiMarkdownParsingPlugins = function getDefaultEuiMarkdownParsingPlugins() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    exclude = _ref.exclude;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var exclude = _ref.exclude,
+    parsingConfig = _objectWithoutProperties(_ref, _excluded);
   var parsingPlugins = [[markdown, {}], [highlight, {}]];
   Object.entries(DEFAULT_PARSING_PLUGINS).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       pluginName = _ref3[0],
       plugin = _ref3[1];
+    // Check for plugin exclusions
     if (!(exclude !== null && exclude !== void 0 && exclude.includes(pluginName))) {
-      parsingPlugins.push(plugin);
+      // Check for plugin configuration overrides
+      if (pluginName in parsingConfig) {
+        parsingPlugins.push([plugin[0], parsingConfig[pluginName]]);
+      } else {
+        parsingPlugins.push(plugin);
+      }
     }
   });
   return parsingPlugins;

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

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,10 +15,21 @@
 import { getDefaultEuiMarkdownUiPlugins } from './ui_plugins';
 import { getDefaultEuiMarkdownParsingPlugins } from './parsing_plugins';
 import { getDefaultEuiMarkdownProcessingPlugins } from './processing_plugins';
-export var getDefaultEuiMarkdownPlugins = function getDefaultEuiMarkdownPlugins(config) {
+export var getDefaultEuiMarkdownPlugins = function getDefaultEuiMarkdownPlugins() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var exclude = config.exclude,
+    processingConfig = config.processingConfig,
+    parsingConfig = config.parsingConfig,
+    uiConfig = config.uiConfig;
   return {
-    parsingPlugins: getDefaultEuiMarkdownParsingPlugins(config),
-    processingPlugins: getDefaultEuiMarkdownProcessingPlugins(config),
-    uiPlugins: getDefaultEuiMarkdownUiPlugins(config)
+    parsingPlugins: getDefaultEuiMarkdownParsingPlugins(_objectSpread({
+      exclude: exclude
+    }, parsingConfig)),
+    processingPlugins: getDefaultEuiMarkdownProcessingPlugins(_objectSpread({
+      exclude: exclude
+    }, processingConfig)),
+    uiPlugins: getDefaultEuiMarkdownUiPlugins(_objectSpread({
+      exclude: exclude
+    }, uiConfig))
   };
 };