@elastic/eui 97.0.0 → 97.2.0

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

@@ -63,7 +63,8 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
     headerRowHeight = _ref.headerRowHeight,
     footerRowHeight = _ref.footerRowHeight,
     visibleRowCount = _ref.visibleRowCount,
-    hasStickyFooter = _ref.hasStickyFooter;
+    hasStickyFooter = _ref.hasStickyFooter,
+    canDragAndDropColumns = _ref.canDragAndDropColumns;
   var scrollCellIntoView = useCallback(
   /*#__PURE__*/
   // Note: in order for this UX to work correctly with react-window's APIs,
@@ -72,7 +73,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
   function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
       var _adjustedScrollLeft;
-      var rowIndex, colIndex, getCell, cell, cellIsInView, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellRightPos, rightScrollBound, rightWidthOutOfView, cellLeftPos, leftScrollBound, leftWidthOutOfView, isStickyHeader, isStickyFooter, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
+      var rowIndex, colIndex, getCell, cell, cellIsInView, isStickyHeader, isStickyFooter, isDraggableHeader, isDraggableHeaderCell, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellLeftPos, cellRightPos, rightScrollBound, rightWidthOutOfView, leftScrollBound, leftWidthOutOfView, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -119,7 +120,10 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             return _context.abrupt("return");
           case 15:
             // If for some reason we can't find a valid cell, short-circuit
-            // We now manually adjust scroll positioning around the cell to ensure it's
+            isStickyHeader = rowIndex === -1;
+            isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
+            isDraggableHeader = canDragAndDropColumns && isStickyHeader;
+            isDraggableHeaderCell = isDraggableHeader && cell.offsetLeft === 0 && colIndex !== 0; // We now manually adjust scroll positioning around the cell to ensure it's
             // fully in view on all sides. A couple of notes on this:
             // 1. We're avoiding relying on react-window's scrollToItem for this because it also
             //    does not account for sticky items (see https://github.com/bvaughn/react-window/issues/586)
@@ -128,8 +132,10 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             //    halfway there, but doesn't guarantee the *full* cell in view, or account for
             //    sticky positioned rows or OS scrollbars, hence these workarounds
             _outerGridRef$current = outerGridRef.current, scrollTop = _outerGridRef$current.scrollTop, scrollLeft = _outerGridRef$current.scrollLeft;
-            // Check if the cell's right side is outside the current scrolling bounds
-            cellRightPos = cell.offsetLeft + cell.offsetWidth;
+            // Draggable header columns are nested within EuiDraggables,
+            // and their offsetLeft needs to go up a wrapper as a result
+            cellLeftPos = isDraggableHeaderCell ? cell.offsetParent.offsetLeft : cell.offsetLeft; // Check if the cell's right side is outside the current scrolling bounds
+            cellRightPos = cellLeftPos + cell.offsetWidth;
             rightScrollBound = scrollLeft + outerGridRef.current.clientWidth; // Note: We specifically want clientWidth and not offsetWidth here to account for scrollbars
             rightWidthOutOfView = cellRightPos - rightScrollBound;
             if (rightWidthOutOfView > 0) {
@@ -137,7 +143,6 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             }
 
             // Check if the cell's left side is outside the current scrolling bounds
-            cellLeftPos = cell.offsetLeft;
             leftScrollBound = (_adjustedScrollLeft = adjustedScrollLeft) !== null && _adjustedScrollLeft !== void 0 ? _adjustedScrollLeft : scrollLeft;
             leftWidthOutOfView = leftScrollBound - cellLeftPos;
             if (leftWidthOutOfView > 0) {
@@ -148,8 +153,6 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
 
             // Skip top/bottom scroll adjustments for sticky headers & footers
             // since they should always be in view vertically
-            isStickyHeader = rowIndex === -1;
-            isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
             if (!isStickyHeader && !isStickyFooter) {
               parentRow = cell.parentNode; // Check if the cell's bottom side is outside the current scrolling bounds
               cellBottomPos = parentRow.offsetTop + cell.offsetHeight;
@@ -179,7 +182,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
                 scrollTop: (_adjustedScrollTop2 = adjustedScrollTop) !== null && _adjustedScrollTop2 !== void 0 ? _adjustedScrollTop2 : scrollTop
               });
             }
-          case 28:
+          case 30:
           case "end":
             return _context.stop();
         }
@@ -188,7 +191,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
     return function (_x) {
       return _ref3.apply(this, arguments);
     };
-  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter]);
+  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, canDragAndDropColumns]);
   return {
     scrollCellIntoView: scrollCellIntoView
   };

package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -38,6 +38,8 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     locale = _ref.locale,
     roundUp = _ref.roundUp,
     utcOffset = _ref.utcOffset,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     labelPrefix = _ref.labelPrefix;
   var styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
   var _useState = useState(function () {
@@ -131,7 +133,9 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     dateFormat: dateFormat,
     timeFormat: timeFormat,
     locale: locale,
-    utcOffset: utcOffset
+    utcOffset: utcOffset,
+    minDate: minDate,
+    maxDate: maxDate
   }), ___EmotionJSX(EuiFlexGroup, {
     component: "form",
     onSubmit: function onSubmit(e) {
@@ -176,5 +180,7 @@ EuiAbsoluteTab.propTypes = {
   onChange: PropTypes.func.isRequired,
   roundUp: PropTypes.bool.isRequired,
   labelPrefix: PropTypes.string.isRequired,
-  utcOffset: PropTypes.number
+  utcOffset: PropTypes.number,
+  minDate: PropTypes.any,
+  maxDate: PropTypes.any
 };

package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 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; }
@@ -35,6 +35,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale = props.locale,
     dateFormat = props.dateFormat,
     utcOffset = props.utcOffset,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
     timeFormat = props.timeFormat,
     isOpen = props.isOpen,
     onPopoverToggle = props.onPopoverToggle,
@@ -95,7 +97,9 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale: locale,
     position: position,
     utcOffset: utcOffset,
-    timeOptions: timeOptions
+    timeOptions: timeOptions,
+    minDate: minDate,
+    maxDate: maxDate
   }));
 };
 EuiDatePopoverButton.propTypes = {
@@ -121,6 +125,8 @@ EuiDatePopoverButton.propTypes = {
   timeFormat: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   utcOffset: PropTypes.number,
+  minDate: PropTypes.any,
+  maxDate: PropTypes.any,
   compressed: PropTypes.bool,
   timeOptions: PropTypes.shape({
     timeTenseOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,

package/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -31,7 +31,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     locale = _ref.locale,
     position = _ref.position,
     utcOffset = _ref.utcOffset,
-    timeOptions = _ref.timeOptions;
+    timeOptions = _ref.timeOptions,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate;
   var styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -60,7 +62,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      utcOffset: utcOffset
+      utcOffset: utcOffset,
+      minDate: minDate,
+      maxDate: maxDate
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)
@@ -130,6 +134,8 @@ EuiDatePopoverContent.propTypes = {
   locale: PropTypes.any,
   position: PropTypes.oneOf(["start", "end"]).isRequired,
   utcOffset: PropTypes.number,
+  minDate: PropTypes.any,
+  maxDate: PropTypes.any,
   timeOptions: PropTypes.shape({
     timeTenseOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
     timeUnitsOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -45,7 +45,7 @@ import { EuiDatePopoverButton } from './date_popover/date_popover_button';
 import { EuiAutoRefresh, EuiAutoRefreshButton } from '../auto_refresh/auto_refresh';
 import { euiSuperDatePickerStyles } from './super_date_picker.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-function isRangeInvalid(start, end) {
+function isRangeInvalid(start, end, minDate, maxDate) {
   if (start === 'now' && end === 'now') {
     return true;
   }
@@ -53,7 +53,7 @@ function isRangeInvalid(start, end) {
   var endMoment = dateMath.parse(end, {
     roundUp: true
   });
-  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment);
+  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment) || endMoment.isBefore(startMoment) || minDate != null && startMoment.isBefore(minDate) || maxDate != null && endMoment.isAfter(maxDate);
   return isInvalid;
 }
 export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
@@ -72,7 +72,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       },
       start: _this.props.start,
       end: _this.props.end,
-      isInvalid: isRangeInvalid(_this.props.start, _this.props.end),
+      isInvalid: isRangeInvalid(_this.props.start, _this.props.end, _this.props.minDate, _this.props.maxDate),
       hasChanged: false,
       showPrettyDuration: showPrettyDuration(_this.props.start, _this.props.end, _this.props.commonlyUsedRanges),
       isStartDatePopoverOpen: false,
@@ -81,7 +81,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "setTime", function (_ref) {
       var end = _ref.end,
         start = _ref.start;
-      var isInvalid = isRangeInvalid(start, end);
+      var isInvalid = isRangeInvalid(start, end, _this.props.minDate, _this.props.maxDate);
       _this.setState({
         start: start,
         end: end,
@@ -270,6 +270,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         locale = _this$props3.locale,
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
+        minDate = _this$props3.minDate,
+        maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
         styles = _this$props3.memoizedStyles;
@@ -344,6 +346,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
@@ -366,6 +370,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
@@ -471,7 +477,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           },
           start: nextProps.start,
           end: nextProps.end,
-          isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
+          isInvalid: isRangeInvalid(nextProps.start, nextProps.end, nextProps.minDate, nextProps.maxDate),
           hasChanged: false,
           showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges)
         };
@@ -604,6 +610,14 @@ EuiSuperDatePickerInternal.propTypes = {
   refreshIntervalUnits: PropTypes.any,
   start: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
   end: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
+  /**
+     * Defines min. date accepted as a selection (in moment format)
+     */
+  minDate: PropTypes.any,
+  /**
+     * Defines max. date accepted as a selection (in moment format)
+     */
+  maxDate: PropTypes.any,
   /**
      * Specifies the formatted used when displaying times
      * @default 'HH:mm'
@@ -787,6 +801,14 @@ EuiSuperDatePicker.propTypes = {
      */
   start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]),
   end: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]),
+  /**
+     * Defines min. date accepted as a selection (in moment format)
+     */
+  minDate: PropTypes.any,
+  /**
+     * Defines max. date accepted as a selection (in moment format)
+     */
+  maxDate: PropTypes.any,
   /**
      * Specifies the formatted used when displaying times
      * @default 'HH:mm'

package/es/components/drag_and_drop/draggable.js

@@ -50,6 +50,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
     cloneItems = _useContext.cloneItems;
   var euiTheme = useEuiTheme();
   var styles = euiDraggableStyles(euiTheme);
+  var hasCustomDragHandle = customDragHandle !== false;
   return ___EmotionJSX(Draggable, _extends({
     draggableId: draggableId,
     index: index,
@@ -57,13 +58,14 @@ export var EuiDraggable = function EuiDraggable(_ref) {
   }, rest), function (provided, snapshot, rubric) {
     var _provided$dragHandleP, _provided$dragHandleP2;
     var isDragging = snapshot.isDragging;
+    var isFullyCustomDragHandle = customDragHandle === 'custom';
     var cssStyles = [styles.euiDraggable, cloneItems && !isDragging && styles.hasClone, isDragging && styles.isDragging, isRemovable && styles.isRemovable, styles.spacing[spacing]];
     var classes = classNames('euiDraggable', className);
     var childClasses = classNames('euiDraggable__item', {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !hasCustomDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -73,11 +75,14 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       // interactive element. Screen readers will cue users that this is a container
       // and has one or more elements inside that are part of a related group.
       ,
-      role: hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+      role: isFullyCustomDragHandle ? undefined // prevent wrapper role from removing semantics of the children
+      : hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
       // If the container includes an interactive element, we remove the tabindex=0
       // because [role="group"] does not permit or warrant a tab stop
+      // additionally we remove the tabindex when the child is a fully custom handle
+      // that has its own tabindex and handle props
       ,
-      tabIndex: hasInteractiveChildren ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
+      tabIndex: hasInteractiveChildren || isFullyCustomDragHandle ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
     }), cloneElementWithCss(DraggableElement, {
       className: classNames(DraggableElement.props.className, childClasses),
       css: [euiDraggableItemStyles.euiDraggable__item, isDragDisabled && euiDraggableItemStyles.disabled]
@@ -95,9 +100,12 @@ EuiDraggable.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element.isRequired, PropTypes.any.isRequired]).isRequired,
   className: PropTypes.string,
   /**
-     * Whether the `children` will provide and set up its own drag handle
+     * Whether the `children` will provide and set up its own drag handle.
+     * The `custom` value additionally removes the `role` from the draggable container.
+     * Use this if the `children` element is focusable and should keep its
+     * semantic role for accessibility purposes.
      */
-  customDragHandle: PropTypes.bool,
+  customDragHandle: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["custom"])]),
   /**
      * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
      * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.

package/es/components/header/header.styles.js

@@ -19,23 +19,18 @@ export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   };
 };
 export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
-
-  // Curated border color to fade into the shadow without looking too much like a border
-  // It adds separation between the header and flyout
-  var borderColor = colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.35) : shade(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", euiTheme.levels.header, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), ";;label:fixed;"),
     // Theme
-    default: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
-    dark: /*#__PURE__*/css(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
+    default: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:default;"),
+    dark: /*#__PURE__*/css(euiHeaderDarkStyles(euiThemeContext), ";label:dark;")
   };
 };
 
@@ -49,12 +44,11 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
  * by Kibana in the near future, at which point we can remove this
  */
 import { euiFormVariables } from '../form/form.styles';
-var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
+var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
-  var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/es/components/header/header_links/header_links.js

@@ -28,7 +28,7 @@ import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+export var GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/es/components/header/header_links/header_links.styles.js

@@ -31,6 +31,7 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

package/es/components/page_template/inner/page_inner.styles.js

@@ -9,15 +9,14 @@
 import { css } from '@emotion/react';
 import { euiShadow } from '../../../themes/amsterdam/global_styling/mixins';
 import { euiBackgroundColor, logicalCSS } from '../../../global_styling';
-import { transparentize } from '../../../services';
 export var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
-  var borderColor = transparentize(euiThemeContext.euiTheme.colors.lightShade, 0.7);
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", logicalCSS('max-width', '100%'), " ", logicalCSS('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'plain'), ";", euiShadow(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
-      left: /*#__PURE__*/css(logicalCSS('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
+      top: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), ";;label:top;"),
+      left: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:left;")
     }
   };
 };

package/es/components/tabs/tab.js

@@ -67,7 +67,7 @@ export var EuiTab = function EuiTab(_ref) {
       target: target,
       rel: secureRel
     }, rest), prependNode, ___EmotionJSX("span", {
-      className: "euiTab__content",
+      className: "euiTab__content eui-textTruncate",
       css: cssTabContentStyles
     }, children), appendNode);
   }