@elastic/eui 62.2.1 → 64.0.0

package/lib/services/index.js

@@ -15,13 +15,9 @@ var _exportNames = {
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
   CENTER_ALIGNMENT: true,
-  BREAKPOINTS: true,
-  BREAKPOINT_KEYS: true,
-  getBreakpoint: true,
-  isWithinBreakpoints: true,
   useIsWithinBreakpoints: true,
-  isWithinMaxBreakpoint: true,
-  isWithinMinBreakpoint: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
@@ -92,18 +88,6 @@ var _exportNames = {
   EuiWindowEvent: true,
   throttle: true
 };
-Object.defineProperty(exports, "BREAKPOINTS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINTS;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINT_KEYS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINT_KEYS;
-  }
-});
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
   get: function get() {
@@ -362,12 +346,6 @@ Object.defineProperty(exports, "formatText", {
     return _format.formatText;
   }
 });
-Object.defineProperty(exports, "getBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.getBreakpoint;
-  }
-});
 Object.defineProperty(exports, "getDurationAndPerformOnFrame", {
   enumerable: true,
   get: function get() {
@@ -446,24 +424,6 @@ Object.defineProperty(exports, "isValidHex", {
     return _color.isValidHex;
   }
 });
-Object.defineProperty(exports, "isWithinBreakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinBreakpoints;
-  }
-});
-Object.defineProperty(exports, "isWithinMaxBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMaxBreakpoint;
-  }
-});
-Object.defineProperty(exports, "isWithinMinBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMinBreakpoint;
-  }
-});
 Object.defineProperty(exports, "isWithinRange", {
   enumerable: true,
   get: function get() {
@@ -597,6 +557,18 @@ Object.defineProperty(exports, "useIsWithinBreakpoints", {
     return _breakpoint.useIsWithinBreakpoints;
   }
 });
+Object.defineProperty(exports, "useIsWithinMaxBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMaxBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useIsWithinMinBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMinBreakpoint;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/optimize/es/components/accessibility/screen_reader_live/screen_reader_live.js

@@ -57,12 +57,12 @@ export var EuiScreenReaderLive = function EuiScreenReaderLive(_ref) {
       // double announcements from VO when `focusRegionOnTextChange` is true
       ,
       "aria-hidden": toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": !toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && toggle ? children : ''), ___EmotionJSX("div", {
       role: role,
       "aria-atomic": "true",
       "aria-hidden": !toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && !toggle ? children : '')))
   );
 };

package/optimize/es/components/accordion/accordion.js

@@ -7,7 +7,7 @@ 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", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "buttonProps", "buttonElement", "arrowProps", "theme"];
+var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
 
 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); }; }
 
@@ -141,6 +141,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           forceState = _this$props.forceState,
           isLoading = _this$props.isLoading,
           isLoadingMessage = _this$props.isLoadingMessage,
+          isDisabled = _this$props.isDisabled,
           buttonProps = _this$props.buttonProps,
           _this$props$buttonEle = _this$props.buttonElement,
           _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
@@ -170,7 +171,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className); // Emotion styles
 
       var buttonStyles = euiAccordionButtonStyles(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
       var childrenStyles = euiAccordionChildrenStyles(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = euiAccordionChildWrapperStyles(theme);
@@ -197,7 +198,8 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           "aria-controls": id,
           "aria-expanded": isOpen,
           "aria-labelledby": buttonId,
-          tabIndex: buttonElementIsFocusable ? -1 : 0
+          tabIndex: buttonElementIsFocusable ? -1 : 0,
+          isDisabled: isDisabled
         }));
       }
 
@@ -232,8 +234,9 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
-        onClick: this.onToggle,
-        type: ButtonElement === 'button' ? 'button' : undefined
+        onClick: isDisabled ? undefined : this.onToggle,
+        type: ButtonElement === 'button' ? 'button' : undefined,
+        disabled: ButtonElement === 'button' ? isDisabled : undefined
       }), ___EmotionJSX("span", {
         className: buttonContentClasses
       }, buttonContent));
@@ -275,6 +278,7 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
+  isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
   buttonElement: 'button'

package/optimize/es/components/accordion/accordion.styles.js

@@ -12,7 +12,10 @@ import { euiFontSize } from '../../global_styling/mixins';
 export var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;")
+    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
+    // Hover pseudo selector for specificity
+    disabled: /*#__PURE__*/css("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 

package/optimize/es/components/aspect_ratio/aspect_ratio.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "height", "width", "maxWidth"];
+var _excluded = ["children", "className", "height", "width", "maxWidth", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,37 +15,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React from 'react';
 import classNames from 'classnames';
-import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAspectRatio = function EuiAspectRatio(_ref) {
   var children = _ref.children,
       className = _ref.className,
       height = _ref.height,
       width = _ref.width,
       maxWidth = _ref.maxWidth,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiAspectRatio', className);
-  var euiAspectRatioStyle = {
+
+  var euiAspectRatioStyle = _objectSpread({
     aspectRatio: "".concat(width, " / ").concat(height),
-    height: '100%',
-    width: '100%'
-  };
+    height: 'auto',
+    width: '100%',
+    maxWidth: maxWidth
+  }, style);
 
   var props = _objectSpread({
     className: classes,
     style: euiAspectRatioStyle
   }, rest);
 
-  var content = /*#__PURE__*/React.cloneElement(children, props);
-  var contentwithoptionalwrap = content;
-
-  if (maxWidth) {
-    contentwithoptionalwrap = ___EmotionJSX("div", {
-      style: {
-        maxWidth: maxWidth
-      }
-    }, content);
-  }
-
-  return contentwithoptionalwrap;
+  return /*#__PURE__*/React.cloneElement(children, props);
 };

package/optimize/es/components/bottom_bar/bottom_bar.js

@@ -129,7 +129,7 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     default: "There is a new region landmark with page level controls at the end of the document."
   }))));
 
-  return usePortal ? ___EmotionJSX(EuiPortal, null, bar) : bar;
+  return usePortal ? ___EmotionJSX(EuiPortal, typeof usePortal !== 'boolean' ? usePortal : undefined, bar) : bar;
 });
 
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {

package/optimize/es/components/collapsible_nav/collapsible_nav.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -16,9 +15,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { cloneElement, useEffect, useRef, useState } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import classNames from 'classnames';
-import { useGeneratedHtmlId, isWithinMinBreakpoint, throttle, useCombinedRefs } from '../../services';
+import { useGeneratedHtmlId, useIsWithinMinBreakpoint, useCombinedRefs } from '../../services';
 import { EuiFlyout } from '../flyout'; // Extend all the flyout props except `onClose` because we handle this internally
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -65,43 +64,9 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
     shards: [buttonRef].concat(_toConsumableArray(_focusTrapProps.shards || []))
   });
-  /**
-   * Setting the initial state of pushed based on the `type` prop
-   * and if the current window size is large enough (larger than `pushBreakpoint`)
-   */
-
-
-  var _useState = useState(isWithinMinBreakpoint(typeof window === 'undefined' ? 0 : window.innerWidth, dockedBreakpoint)),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
 
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(dockedBreakpoint);
   var navIsDocked = isDocked && windowIsLargeEnoughToPush;
-  /**
-   * Watcher added to the window to maintain `isPushed` state depending on
-   * the window size compared to the `pushBreakpoint`
-   */
-
-  var functionToCallOnWindowResize = throttle(function () {
-    if (isWithinMinBreakpoint(window.innerWidth, dockedBreakpoint)) {
-      setWindowIsLargeEnoughToPush(true);
-    } else {
-      setWindowIsLargeEnoughToPush(false);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50);
-  useEffect(function () {
-    if (isDocked) {
-      // Only add the event listener if we'll need to accommodate with padding
-      window.addEventListener('resize', functionToCallOnWindowResize);
-    }
-
-    return function () {
-      if (isDocked) {
-        window.removeEventListener('resize', functionToCallOnWindowResize);
-      }
-    };
-  }, [isDocked, functionToCallOnWindowResize]);
   var classes = classNames('euiCollapsibleNav', className); // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -25,6 +25,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly = _ref.readOnly,
       isInvalid = _ref.isInvalid,
       disabled = _ref.disabled,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiDatePickerRange', {
@@ -44,7 +46,19 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
       isInvalid: isInvalid || startDateControl.props.isInvalid,
-      className: classNames('euiDatePickerRange__start', startDateControl.props.className)
+      className: classNames('euiDatePickerRange__start', startDateControl.props.className),
+      onBlur: function onBlur(event) {
+        var _startDateControl$pro, _startDateControl$pro2;
+
+        (_startDateControl$pro = startDateControl.props) === null || _startDateControl$pro === void 0 ? void 0 : (_startDateControl$pro2 = _startDateControl$pro.onBlur) === null || _startDateControl$pro2 === void 0 ? void 0 : _startDateControl$pro2.call(_startDateControl$pro, event);
+        _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+      },
+      onFocus: function onFocus(event) {
+        var _startDateControl$pro3, _startDateControl$pro4;
+
+        (_startDateControl$pro3 = startDateControl.props) === null || _startDateControl$pro3 === void 0 ? void 0 : (_startDateControl$pro4 = _startDateControl$pro3.onFocus) === null || _startDateControl$pro4 === void 0 ? void 0 : _startDateControl$pro4.call(_startDateControl$pro3, event);
+        _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      }
     });
     endControl = /*#__PURE__*/cloneElement(endDateControl, {
       showIcon: false,
@@ -53,7 +67,19 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       disabled: disabled || endDateControl.props.disabled,
       isInvalid: isInvalid || endDateControl.props.isInvalid,
       popoverPlacement: 'downRight',
-      className: classNames('euiDatePickerRange__end', endDateControl.props.className)
+      className: classNames('euiDatePickerRange__end', endDateControl.props.className),
+      onBlur: function onBlur(event) {
+        var _endDateControl$props, _endDateControl$props2;
+
+        (_endDateControl$props = endDateControl.props) === null || _endDateControl$props === void 0 ? void 0 : (_endDateControl$props2 = _endDateControl$props.onBlur) === null || _endDateControl$props2 === void 0 ? void 0 : _endDateControl$props2.call(_endDateControl$props, event);
+        _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+      },
+      onFocus: function onFocus(event) {
+        var _endDateControl$props3, _endDateControl$props4;
+
+        (_endDateControl$props3 = endDateControl.props) === null || _endDateControl$props3 === void 0 ? void 0 : (_endDateControl$props4 = _endDateControl$props3.onFocus) === null || _endDateControl$props4 === void 0 ? void 0 : _endDateControl$props4.call(_endDateControl$props3, event);
+        _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      }
     });
   }
 

package/optimize/es/components/description_list/description_list_description.js

@@ -14,7 +14,8 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { euiDescriptionListDescriptionStyles } from './description_list_description.styles';
-import { EuiDescriptionListContext } from './description_list_context';
+import { EuiDescriptionListContext } from './description_list_context'; // Export required for correct inference by HOCs
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref) {
   var children = _ref.children,

package/optimize/es/components/description_list/description_list_title.js

@@ -14,7 +14,8 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { euiDescriptionListTitleStyles } from './description_list_title.styles';
-import { EuiDescriptionListContext } from './description_list_context';
+import { EuiDescriptionListContext } from './description_list_context'; // Export required for correct inference by HOCs
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
   var children = _ref.children,

package/optimize/es/components/flyout/flyout.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, isWithinMinBreakpoint, throttle } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint } from '../../services';
 import { keysOf } from '../common';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -94,39 +94,17 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var Element = as || defaultElement;
   var maskRef = useRef(null);
-  /**
-   * Setting the initial state of pushed based on the `type` prop
-   * and if the current window size is large enough (larger than `pushMinBreakpoint`)
-   */
-
-  var _useState = useState(isWithinMinBreakpoint(typeof window === 'undefined' ? 0 : window.innerWidth, pushMinBreakpoint)),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
-
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
   var isPushed = type === 'push' && windowIsLargeEnoughToPush;
-  /**
-   * Watcher added to the window to maintain `isPushed` state depending on
-   * the window size compared to the `pushBreakpoint`
-   */
-
-  var functionToCallOnWindowResize = throttle(function () {
-    if (isWithinMinBreakpoint(window.innerWidth, pushMinBreakpoint)) {
-      setWindowIsLargeEnoughToPush(true);
-    } else {
-      setWindowIsLargeEnoughToPush(false);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50);
   /**
    * Setting up the refs on the actual flyout element in order to
    * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
    */
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      resizeRef = _useState4[0],
-      setResizeRef = _useState4[1];
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      resizeRef = _useState2[0],
+      setResizeRef = _useState2[1];
 
   var setRef = useCombinedRefs([setResizeRef, ref]); // TODO: Allow this hook to be conditional
 
@@ -139,9 +117,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
      */
 
     if (type === 'push') {
-      // Only add the event listener if we'll need to accommodate with padding
-      window.addEventListener('resize', functionToCallOnWindowResize);
-
       if (isPushed) {
         if (side === 'right') {
           document.body.style.paddingRight = "".concat(dimensions.width, "px");
@@ -155,8 +130,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       document.body.classList.remove('euiBody--hasFlyout');
 
       if (type === 'push') {
-        window.removeEventListener('resize', functionToCallOnWindowResize);
-
         if (side === 'right') {
           document.body.style.paddingRight = '';
         } else if (side === 'left') {
@@ -164,7 +137,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }
     };
-  }, [type, side, dimensions, isPushed, functionToCallOnWindowResize]);
+  }, [type, side, dimensions, isPushed]);
   /**
    * ESC key closes flyout (always?)
    */

package/optimize/es/components/header/header.js

@@ -42,11 +42,13 @@ export var EuiHeader = function EuiHeader(_ref) {
       // Increment fixed header counter for each fixed header
       euiHeaderFixedCounter++;
       document.body.classList.add('euiBody--headerIsFixed');
+      document.body.dataset.fixedHeaders = String(euiHeaderFixedCounter);
       return function () {
         // Both decrement the fixed counter AND then check if there are none
         if (--euiHeaderFixedCounter === 0) {
           // If there are none, THEN remove class
           document.body.classList.remove('euiBody--headerIsFixed');
+          delete document.body.dataset.fixedHeaders;
         }
       };
     }

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

@@ -97,7 +97,8 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,
-      panelPaddingSize: "none"
+      panelPaddingSize: "none",
+      repositionOnScroll: true
     }, popoverProps), ___EmotionJSX("div", {
       className: classNames('euiHeaderLinks__mobileList', ["euiHeaderLinks__mobileList".concat(gutterSizeToClassNameMap[gutterSize])])
     }, children))));

package/optimize/es/components/index.js

@@ -61,6 +61,7 @@ export * from './notification';
 export * from './outside_click_detector';
 export * from './overlay_mask';
 export * from './page';
+export * from './page_template';
 export * from './pagination';
 export * from './panel';
 export * from './popover';

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef"];
+var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef", "css"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,6 +27,7 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
+      css = _ref.css,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var overlayMaskNode = useRef();

package/optimize/es/components/page/_bottom_border.js

@@ -0,0 +1 @@
+export {};

package/optimize/es/components/page/_restrict_width.js

@@ -17,26 +17,53 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * This is file contains the type specific to that prop and a helper
  * function for creating the corresponding classNames and style tags
  * based on the consumer's configuration
+ */
+// TODO: Decide how to make this a global value but still isolated to the page component
+export var PAGE_MAX_WIDTH = '1200px';
+
+/**
+ * **DEPRECATED**
+ * This function calculates the correct class name and combined styles
+ * based on the `restrictWidth` value passed in
  *
- * @param {restrictWidth} boolean | number | string The prop value
- * @param {style} CSSProperties An object of style attributes if provided
- * @returns {{widthClassName: string, newStyle: CSSProperties}} Returns an object with keys for the class name to append to the component's class and the updated style props
+ * @param restrictWidth `boolean | number | string` The prop value
+ * @param style `CSSProperties` An object of style attributes if provided
+ * @returns An object with keys for the `widthClassName` to append to the component's class and the updated `newStyle` props
  */
 export function setPropsForRestrictedPageWidth(restrictWidth, style) {
   var widthClassName;
-  var newStyle;
+
+  var newStyle = _objectSpread({}, style);
 
   if (restrictWidth === true) {
     widthClassName = 'restrictWidth-default';
   } else if (restrictWidth !== false) {
     widthClassName = 'restrictWidth-custom';
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      maxWidth: restrictWidth
-    });
+    newStyle.maxWidth = restrictWidth;
   }
 
   return {
     widthClassName: widthClassName,
     newStyle: newStyle
   };
+}
+/**
+ * This function calculates the correct just the combined styles
+ * based on the `restrictWidth` value passed in
+ *
+ * @param restrictWidth `boolean | number | string` The prop value
+ * @param style `CSSProperties` An object of style attributes if provided
+ * @returns An object of the updated `style` props
+ */
+
+export function setStyleForRestrictedPageWidth(restrictWidth, style) {
+  var newStyle = _objectSpread({}, style);
+
+  if (restrictWidth === true) {
+    newStyle.maxWidth = PAGE_MAX_WIDTH;
+  } else if (restrictWidth !== false) {
+    newStyle.maxWidth = restrictWidth;
+  }
+
+  return newStyle;
 }

package/optimize/es/components/page/index.js

@@ -7,7 +7,9 @@
  */
 export { EuiPage } from './page';
 export { EuiPageBody } from './page_body';
-export { EuiPageContent, EuiPageContentBody, EuiPageContentHeader, EuiPageContentHeaderSection } from './page_content';
+export { EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated } from './page_content';
 export { EuiPageHeader, EuiPageHeaderContent, EuiPageHeaderSection } from './page_header';
-export { EuiPageSideBar } from './page_side_bar';
-export { EuiPageTemplate } from './page_template';
+export { EuiPageSection } from './page_section';
+export { EuiPageSideBar_Deprecated } from './page_side_bar';
+export { EuiPageSidebar } from './page_sidebar';
+export { EuiPageTemplate_Deprecated } from './page_template';