@elastic/eui 63.0.1 → 64.0.0

package/optimize/es/global_styling/mixins/_responsive.js

@@ -5,39 +5,43 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { sortMapBySmallToLargeValues } from '../../services/breakpoint/_sorting';
 import { useEuiTheme } from '../../services/theme/hooks';
-import { EuiThemeBreakpoints } from '../variables';
+
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
-
 export var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys(sortMapBySmallToLargeValues(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return EuiThemeBreakpoints.indexOf(a) - EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 export var useEuiBreakpoint = function useEuiBreakpoint(sizes) {

package/optimize/es/global_styling/variables/breakpoint.js

@@ -5,4 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs

package/optimize/es/services/breakpoint/_sorting.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export var sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+export var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = _slicedToArray(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = _slicedToArray(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};

package/optimize/es/services/breakpoint/current_breakpoint.js

@@ -7,10 +7,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { keysOf } from '../../components/common';
 import { useEuiTheme } from '../theme';
 import { throttle } from '../throttle';
-import { getBreakpoint } from './breakpoint';
+import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 /**
@@ -21,23 +22,35 @@ export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
 
+  // Obtain the breakpoints map from the EUI theme
   var _useEuiTheme = useEuiTheme(),
-      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+      breakpoints = _useEuiTheme.euiTheme.breakpoint; // Ensure the breakpoints map is sorted from largest value to smallest
 
-  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
+
+  var sortedBreakpoints = useMemo(function () {
+    return sortMapByLargeToSmallValues(breakpoints);
+  }, [breakpoints]); // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+
+  var getBreakpoint = useCallback(function (width) {
+    return keysOf(sortedBreakpoints).find(function (key) {
+      return sortedBreakpoints[key] <= width;
+    });
+  }, [sortedBreakpoints]);
+
+  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
       currentBreakpoint = _useState2[0],
       setCurrentBreakpoint = _useState2[1];
 
   useEffect(function () {
     var onWindowResize = throttle(function () {
-      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
     window.addEventListener('resize', onWindowResize);
     return function () {
       return window.removeEventListener('resize', onWindowResize);
     };
-  }, [breakpoints]);
+  }, [getBreakpoint]);
   return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
     value: currentBreakpoint
   }, children);

package/optimize/es/services/breakpoint/index.js

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export * from './breakpoint';
 export * from './current_breakpoint';
 export * from './current_breakpoint_hook';
-export * from './useIsWithinBreakpoints';
+export * from './is_within_hooks';
+export {};

package/optimize/es/services/breakpoint/is_within_hooks.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useEuiTheme } from '../theme';
+import { useCurrentEuiBreakpoint } from './current_breakpoint_hook';
+/**
+ * Given an array of breakpoint keys, this hook returns true or false
+ * if the breakpoint size of the current window width falls within
+ * any of the named breakpoints.
+ *
+ * @param {EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+
+export var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};
+/**
+ * Given a max breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the max breakpoint or any below,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+
+export function useIsWithinMaxBreakpoint(max) {
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[max] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] <= breakpoints[max];
+}
+/**
+ * Given a min breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the min breakpoint or any above,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+
+export function useIsWithinMinBreakpoint(min) {
+  var _useEuiTheme2 = useEuiTheme(),
+      breakpoints = _useEuiTheme2.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[min] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] >= breakpoints[min];
+}

package/optimize/es/services/index.js

@@ -10,7 +10,7 @@ import * as keys from './keys';
 export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
+export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
 export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';

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

@@ -75,12 +75,12 @@ 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 : ''), (0, _react2.jsx)("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/lib/components/accordion/accordion.js

@@ -49,7 +49,7 @@ var _accordion = require("./accordion.styles");
 
 var _react2 = require("@emotion/react");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -161,6 +161,7 @@ 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,
@@ -190,7 +191,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className); // Emotion styles
 
       var buttonStyles = (0, _accordion.euiAccordionButtonStyles)(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
@@ -217,7 +218,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           "aria-controls": id,
           "aria-expanded": isOpen,
           "aria-labelledby": buttonId,
-          tabIndex: buttonElementIsFocusable ? -1 : 0
+          tabIndex: buttonElementIsFocusable ? -1 : 0,
+          isDisabled: isDisabled
         }));
       }
 
@@ -252,8 +254,9 @@ 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
       }), (0, _react2.jsx)("span", {
         className: buttonContentClasses
       }, buttonContent));
@@ -294,6 +297,7 @@ exports.EuiAccordionClass = EuiAccordionClass;
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
+  isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
   buttonElement: 'button'

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

@@ -14,7 +14,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.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__*/(0, _react.css)((0, _mixins.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__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 

package/optimize/lib/components/aspect_ratio/aspect_ratio.js

@@ -15,9 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react2 = require("@emotion/react");
-
-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; }
 
@@ -29,32 +27,23 @@ var EuiAspectRatio = function EuiAspectRatio(_ref) {
       height = _ref.height,
       width = _ref.width,
       maxWidth = _ref.maxWidth,
+      style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('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.default.cloneElement(children, props);
-
-  var contentwithoptionalwrap = content;
-
-  if (maxWidth) {
-    contentwithoptionalwrap = (0, _react2.jsx)("div", {
-      style: {
-        maxWidth: maxWidth
-      }
-    }, content);
-  }
-
-  return contentwithoptionalwrap;
+  return /*#__PURE__*/_react.default.cloneElement(children, props);
 };
 
 exports.EuiAspectRatio = EuiAspectRatio;

package/optimize/lib/components/collapsible_nav/collapsible_nav.js

@@ -11,8 +11,6 @@ exports.EuiCollapsibleNav = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -82,43 +80,9 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
     shards: [buttonRef].concat((0, _toConsumableArray2.default)(_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 = (0, _react.useState)((0, _services.isWithinMinBreakpoint)(typeof window === 'undefined' ? 0 : window.innerWidth, dockedBreakpoint)),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
 
+  var windowIsLargeEnoughToPush = (0, _services.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 = (0, _services.throttle)(function () {
-    if ((0, _services.isWithinMinBreakpoint)(window.innerWidth, dockedBreakpoint)) {
-      setWindowIsLargeEnoughToPush(true);
-    } else {
-      setWindowIsLargeEnoughToPush(false);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50);
-  (0, _react.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 = (0, _classnames.default)('euiCollapsibleNav', className); // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false
 

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

@@ -21,7 +21,7 @@ var _icon = require("../icon");
 
 var _react2 = require("@emotion/react");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -39,6 +39,8 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly = _ref.readOnly,
       isInvalid = _ref.isInvalid,
       disabled = _ref.disabled,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDatePickerRange', {
     'euiDatePickerRange--fullWidth': fullWidth,
@@ -57,7 +59,19 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
       isInvalid: isInvalid || startDateControl.props.isInvalid,
-      className: (0, _classnames.default)('euiDatePickerRange__start', startDateControl.props.className)
+      className: (0, _classnames.default)('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__*/(0, _react.cloneElement)(endDateControl, {
       showIcon: false,
@@ -66,7 +80,19 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       disabled: disabled || endDateControl.props.disabled,
       isInvalid: isInvalid || endDateControl.props.isInvalid,
       popoverPlacement: 'downRight',
-      className: (0, _classnames.default)('euiDatePickerRange__end', endDateControl.props.className)
+      className: (0, _classnames.default)('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/lib/components/flyout/flyout.js

@@ -120,39 +120,17 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = (0, _react.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 = (0, _react.useState)((0, _services.isWithinMinBreakpoint)(typeof window === 'undefined' ? 0 : window.innerWidth, pushMinBreakpoint)),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
-
+  var windowIsLargeEnoughToPush = (0, _services.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 = (0, _services.throttle)(function () {
-    if ((0, _services.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 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      resizeRef = _useState4[0],
-      setResizeRef = _useState4[1];
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      resizeRef = _useState2[0],
+      setResizeRef = _useState2[1];
 
   var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref]); // TODO: Allow this hook to be conditional
 
@@ -165,9 +143,6 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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");
@@ -181,8 +156,6 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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') {
@@ -190,7 +163,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }
     };
-  }, [type, side, dimensions, isPushed, functionToCallOnWindowResize]);
+  }, [type, side, dimensions, isPushed]);
   /**
    * ESC key closes flyout (always?)
    */

package/optimize/lib/components/header/header.js

@@ -56,13 +56,13 @@ var EuiHeader = function EuiHeader(_ref) {
       // Increment fixed header counter for each fixed header
       euiHeaderFixedCounter++;
       document.body.classList.add('euiBody--headerIsFixed');
-      document.body.setAttribute('data-fixed-headers', String(euiHeaderFixedCounter));
+      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');
-          document.body.removeAttribute('data-fixed-headers');
+          delete document.body.dataset.fixedHeaders;
         }
       };
     }

package/optimize/lib/components/overlay_mask/overlay_mask.js

@@ -25,7 +25,7 @@ var _services = require("../../services");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef"];
+var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef", "css"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -38,6 +38,7 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
+      css = _ref.css,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var overlayMaskNode = (0, _react.useRef)();
   var combinedMaskRef = (0, _services.useCombinedRefs)([overlayMaskNode, maskRef]);

package/optimize/lib/components/page/page_sidebar/page_sidebar.js

@@ -64,7 +64,9 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
 
   (0, _react.useEffect)(function () {
     if (sticky) {
-      var euiHeaderFixedCounter = Number(document.body.dataset.fixedHeaders);
+      var _document$body$datase;
+
+      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = (0, _typeof2.default)(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
       setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
     }

package/optimize/lib/components/page_template/page_template.js

@@ -95,7 +95,9 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   (0, _react.useEffect)(function () {
     if (_offset === undefined) {
-      var euiHeaderFixedCounter = Number(document.body.dataset.fixedHeaders);
+      var _document$body$datase;
+
+      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
     }
   }, [_offset, euiTheme.base]); // Sections include page header