@elastic/eui 106.0.0 → 106.1.0

package/es/components/collapsible_nav/collapsible_nav.js

@@ -218,6 +218,10 @@ EuiCollapsibleNav.propTypes = {
      * Set this to `false` if you need to disable this behavior for a specific reason.
      */
   includeFixedHeadersInFocusTrap: PropTypes.bool,
+  /**
+     * Specify additional css selectors to include in the focus trap.
+     */
+  includeSelectorInFocusTrap: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired).isRequired, PropTypes.string.isRequired]),
   /**
      * ReactNode to render as this component's content
      */

package/es/components/flyout/flyout.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "aria-describedby"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby"];
 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); }
 import PropTypes from "prop-types";
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -41,6 +41,7 @@ import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutStyles } from './flyout.styles';
 import { EuiFlyoutChild } from './flyout_child';
 import { EuiFlyoutChildProvider } from './flyout_child_manager';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TYPES = ['push', 'overlay'];
 export var SIDES = ['left', 'right'];
@@ -54,40 +55,44 @@ function isEuiFlyoutSizeNamed(value) {
 }
 export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 var defaultElement = 'div';
-export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    as = _ref.as,
-    _ref$hideCloseButton = _ref.hideCloseButton,
-    hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
-    closeButtonProps = _ref.closeButtonProps,
-    _ref$closeButtonPosit = _ref.closeButtonPosition,
-    _closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
-    onClose = _ref.onClose,
-    _ref$ownFocus = _ref.ownFocus,
-    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'right' : _ref$side,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
-    _ref$paddingSize = _ref.paddingSize,
-    paddingSize = _ref$paddingSize === void 0 ? 'l' : _ref$paddingSize,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? false : _ref$maxWidth,
-    style = _ref.style,
-    maskProps = _ref.maskProps,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
-    outsideClickCloses = _ref.outsideClickCloses,
-    _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
-    pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-    _ref$pushAnimation = _ref.pushAnimation,
-    pushAnimation = _ref$pushAnimation === void 0 ? false : _ref$pushAnimation,
-    _focusTrapProps = _ref.focusTrapProps,
-    _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
-    includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
-    _ariaDescribedBy = _ref['aria-describedby'],
-    rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
+    className = _usePropsWithComponen.className,
+    children = _usePropsWithComponen.children,
+    as = _usePropsWithComponen.as,
+    _usePropsWithComponen2 = _usePropsWithComponen.hideCloseButton,
+    hideCloseButton = _usePropsWithComponen2 === void 0 ? false : _usePropsWithComponen2,
+    closeButtonProps = _usePropsWithComponen.closeButtonProps,
+    _usePropsWithComponen3 = _usePropsWithComponen.closeButtonPosition,
+    _closeButtonPosition = _usePropsWithComponen3 === void 0 ? 'inside' : _usePropsWithComponen3,
+    onClose = _usePropsWithComponen.onClose,
+    _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
+    ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
+    _usePropsWithComponen5 = _usePropsWithComponen.side,
+    side = _usePropsWithComponen5 === void 0 ? 'right' : _usePropsWithComponen5,
+    _usePropsWithComponen6 = _usePropsWithComponen.size,
+    size = _usePropsWithComponen6 === void 0 ? 'm' : _usePropsWithComponen6,
+    _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
+    paddingSize = _usePropsWithComponen7 === void 0 ? 'l' : _usePropsWithComponen7,
+    _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
+    maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
+    style = _usePropsWithComponen.style,
+    maskProps = _usePropsWithComponen.maskProps,
+    _usePropsWithComponen9 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen9 === void 0 ? 'overlay' : _usePropsWithComponen9,
+    outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
+    _usePropsWithComponen10 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen10 === void 0 ? 'l' : _usePropsWithComponen10,
+    _usePropsWithComponen11 = _usePropsWithComponen.pushAnimation,
+    pushAnimation = _usePropsWithComponen11 === void 0 ? false : _usePropsWithComponen11,
+    _focusTrapProps = _usePropsWithComponen.focusTrapProps,
+    _usePropsWithComponen12 = _usePropsWithComponen.includeFixedHeadersInFocusTrap,
+    includeFixedHeadersInFocusTrap = _usePropsWithComponen12 === void 0 ? true : _usePropsWithComponen12,
+    includeSelectorInFocusTrap = _usePropsWithComponen.includeSelectorInFocusTrap,
+    _ariaDescribedBy = _usePropsWithComponen['aria-describedby'],
+    rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = useRef(null);
 
@@ -146,12 +151,17 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
      */
     if (isPushed) {
       var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+      var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
       document.body.style[paddingSide] = "".concat(width, "px");
+
+      // EUI doesn't use this css variable, but it is useful for consumers
+      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
       return function () {
         document.body.style[paddingSide] = '';
+        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
       };
     }
-  }, [isPushed, side, width]);
+  }, [isPushed, setGlobalCSSVariables, side, width]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -168,11 +178,11 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * ESC key closes flyout (always?)
    */
   var onKeyDown = useCallback(function (event) {
-    if (!isPushed && event.key === keys.ESCAPE) {
+    if (!isPushed && event.key === keys.ESCAPE && !isChildFlyoutOpen) {
       event.preventDefault();
       onClose(event);
     }
-  }, [onClose, isPushed]);
+  }, [onClose, isPushed, isChildFlyoutOpen]);
 
   /**
    * Set inline styles
@@ -201,32 +211,44 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var flyoutToggle = useRef(document.activeElement);
   var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    fixedHeaders = _useState8[0],
-    setFixedHeaders = _useState8[1];
-  useEffect(function () {
+    focusTrapShards = _useState8[0],
+    setFocusTrapShards = _useState8[1];
+  var focusTrapSelectors = useMemo(function () {
+    var selectors = [];
+    if (includeSelectorInFocusTrap) {
+      selectors = Array.isArray(includeSelectorInFocusTrap) ? includeSelectorInFocusTrap : [includeSelectorInFocusTrap];
+    }
     if (includeFixedHeadersInFocusTrap) {
-      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
-      setFixedHeaders(Array.from(fixedHeaderEls));
+      selectors.push('.euiHeader[data-fixed-header]');
+    }
+    return selectors;
+  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
+  useEffect(function () {
+    if (focusTrapSelectors.length > 0) {
+      var shardsEls = focusTrapSelectors.flatMap(function (selector) {
+        return Array.from(document.querySelectorAll(selector));
+      });
+      setFocusTrapShards(Array.from(shardsEls));
 
-      // Flyouts that are toggled from fixed headers do not have working
+      // Flyouts that are toggled from shards do not have working
       // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
-      fixedHeaderEls.forEach(function (header) {
-        if (header.contains(flyoutToggle.current)) {
+      shardsEls.forEach(function (shard) {
+        if (shard.contains(flyoutToggle.current)) {
           resizeRef === null || resizeRef === void 0 || resizeRef.focus();
         }
       });
     } else {
-      // Clear existing headers if necessary, e.g. switching to `false`
-      setFixedHeaders(function (headers) {
-        return headers.length ? [] : headers;
+      // Clear existing shards if necessary, e.g. switching to `false`
+      setFocusTrapShards(function (shards) {
+        return shards.length ? [] : shards;
       });
     }
-  }, [includeFixedHeadersInFocusTrap, resizeRef]);
+  }, [focusTrapSelectors, resizeRef]);
   var focusTrapProps = useMemo(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-      shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+      shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
     });
-  }, [_focusTrapProps, fixedHeaders]);
+  }, [_focusTrapProps, focusTrapShards]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -243,11 +265,11 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }) : ___EmotionJSX(EuiI18n, {
       token: "euiFlyout.screenReaderNonModalDialog",
       default: "You are in a non-modal dialog. To close the dialog, press Escape."
-    }), ' ', fixedHeaders.length > 0 && ___EmotionJSX(EuiI18n, {
-      token: "euiFlyout.screenReaderFixedHeaders",
-      default: "You can still continue tabbing through the page headers in addition to the dialog."
+    }), ' ', focusTrapShards.length > 0 && ___EmotionJSX(EuiI18n, {
+      token: "euiFlyout.screenReaderFocusTrapShards",
+      default: "You can still continue tabbing through other global page landmarks."
     })));
-  }, [hasOverlayMask, descriptionId, fixedHeaders.length]);
+  }, [hasOverlayMask, descriptionId, focusTrapShards.length]);
 
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
@@ -305,14 +327,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: isPushed || ownFocus && isChildFlyoutOpen,
     scrollLock: hasOverlayMask,
     clickOutsideDisables: !ownFocus,
-    onClickOutside: onClickOutside,
-    returnFocus: function returnFocus() {
-      if (!isChildFlyoutOpen && flyoutToggle.current) {
-        flyoutToggle.current.focus();
-        return false; // We've handled focus
-      }
-      return true;
-    }
+    onClickOutside: onClickOutside
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
     className: classes,
     css: cssStyles,
@@ -339,11 +354,11 @@ EuiFlyout.displayName = 'EuiFlyout';
  *  - Otherwise still wrap within an EuiPortal so it appends to the bottom of the window.
  * Push flyouts have no overlay OR portal behavior.
  */
-var EuiFlyoutWrapper = function EuiFlyoutWrapper(_ref2) {
-  var children = _ref2.children,
-    hasOverlayMask = _ref2.hasOverlayMask,
-    maskProps = _ref2.maskProps,
-    isPortalled = _ref2.isPortalled;
+var EuiFlyoutWrapper = function EuiFlyoutWrapper(_ref) {
+  var children = _ref.children,
+    hasOverlayMask = _ref.hasOverlayMask,
+    maskProps = _ref.maskProps,
+    isPortalled = _ref.isPortalled;
   if (hasOverlayMask) {
     return ___EmotionJSX(EuiOverlayMask, _extends({
       headerZindexLocation: "below"

package/es/components/flyout/flyout_child.js

@@ -10,10 +10,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useContext, Children, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, Children, useEffect, useMemo, useRef, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { keys, useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { euiFlyoutChildStyles } from './flyout_child.styles';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { EuiFlyoutContext } from './flyout_context';
@@ -46,7 +46,8 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   if (!flyoutContext) {
     throw new Error('EuiFlyoutChild must be used as a child of EuiFlyout.');
   }
-  var setIsChildFlyoutOpen = flyoutContext.setIsChildFlyoutOpen,
+  var isChildFlyoutOpen = flyoutContext.isChildFlyoutOpen,
+    setIsChildFlyoutOpen = flyoutContext.setIsChildFlyoutOpen,
     parentSize = flyoutContext.parentSize;
   useEffect(function () {
     setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(true);
@@ -125,6 +126,13 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var childLayoutMode = flyoutContext.childLayoutMode,
     parentFlyoutRef = flyoutContext.parentFlyoutRef;
   var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
+  var onKeyDown = useCallback(function (event) {
+    if (isChildFlyoutOpen && event.key === keys.ESCAPE) {
+      event.preventDefault();
+      setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
+      onClose(event.nativeEvent);
+    }
+  }, [isChildFlyoutOpen, onClose, setIsChildFlyoutOpen]);
   return ___EmotionJSX(EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -145,7 +153,8 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: -1
+    tabIndex: -1,
+    onKeyDown: onKeyDown // used as generic container event handler
   }, rest), flyoutTitleText && !ariaLabelledBy && ___EmotionJSX("h2", {
     id: titleIdGenerated,
     className: "euiScreenReaderOnly"

package/es/components/flyout/flyout_child_manager.js

@@ -53,8 +53,10 @@ export var EuiFlyoutChildProvider = function EuiFlyoutChildProvider(_ref) {
     window.addEventListener('resize', handleResize);
     handleResize();
     return function () {
-      return window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', handleResize);
+      reportIsChildOpen === null || reportIsChildOpen === void 0 || reportIsChildOpen(false);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Calculate stacking breakpoint value for child flyout.

package/es/components/flyout/sessions/flyout_provider.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { createContext, useContext, useReducer } from 'react';
 import { EuiFlyout, EuiFlyoutChild } from '../index';
-import { initialFlyoutState, flyoutReducer } from './flyout_reducer';
+import { flyoutReducer, initialFlyoutState } from './flyout_reducer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiFlyoutSessionContext = /*#__PURE__*/createContext(null);
 
@@ -53,7 +53,7 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var activeFlyoutGroup = state.activeFlyoutGroup;
   var handleClose = function handleClose() {
     dispatch({
-      type: 'CLEAR_HISTORY'
+      type: 'CLOSE_SESSION'
     });
   };
   var handleCloseChild = function handleCloseChild() {
@@ -86,10 +86,10 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && ___EmotionJSX(EuiFlyout, _extends({
     onClose: handleClose,
-    size: activeFlyoutGroup.config.mainSize,
+    size: config === null || config === void 0 ? void 0 : config.mainSize,
     ownFocus: !activeFlyoutGroup.isChildOpen
   }, flyoutPropsMain), mainFlyoutContentNode, activeFlyoutGroup.isChildOpen && childFlyoutContentNode && ___EmotionJSX(EuiFlyoutChild, _extends({
     onClose: handleCloseChild,
-    size: activeFlyoutGroup.config.childSize
+    size: config === null || config === void 0 ? void 0 : config.childSize
   }, flyoutPropsChild), childFlyoutContentNode)));
 };

package/es/components/flyout/sessions/flyout_reducer.js

@@ -62,10 +62,10 @@ export function flyoutReducer(state, action) {
   switch (action.type) {
     case 'OPEN_MAIN_FLYOUT':
       {
-        var _state$activeFlyoutGr, _state$activeFlyoutGr2;
         var _action$payload = action.payload,
           size = _action$payload.size,
-          flyoutProps = _action$payload.flyoutProps;
+          flyoutProps = _action$payload.flyoutProps,
+          meta = _action$payload.meta;
         var newHistory = _toConsumableArray(state.history);
         if (state.activeFlyoutGroup) {
           newHistory.push(state.activeFlyoutGroup);
@@ -75,11 +75,9 @@ export function flyoutReducer(state, action) {
           isChildOpen: false,
           config: {
             mainSize: size,
-            childSize: 's',
-            mainFlyoutProps: flyoutProps,
-            childFlyoutProps: {}
+            mainFlyoutProps: flyoutProps
           },
-          meta: action.payload.meta !== undefined ? ((_state$activeFlyoutGr = state.activeFlyoutGroup) === null || _state$activeFlyoutGr === void 0 ? void 0 : _state$activeFlyoutGr.meta) !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : (_state$activeFlyoutGr2 = state.activeFlyoutGroup) === null || _state$activeFlyoutGr2 === void 0 ? void 0 : _state$activeFlyoutGr2.meta
+          meta: meta
         };
         return {
           activeFlyoutGroup: applySizeConstraints(newActiveGroup),
@@ -94,14 +92,15 @@ export function flyoutReducer(state, action) {
         }
         var _action$payload2 = action.payload,
           _size = _action$payload2.size,
-          _flyoutProps = _action$payload2.flyoutProps;
+          _flyoutProps = _action$payload2.flyoutProps,
+          _meta = _action$payload2.meta;
         var updatedActiveGroup = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
           isChildOpen: true,
           config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), {}, {
             childSize: _size,
             childFlyoutProps: _flyoutProps
           }),
-          meta: action.payload.meta !== undefined ? state.activeFlyoutGroup.meta !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : state.activeFlyoutGroup.meta
+          meta: _meta
         });
         return {
           history: state.history,
@@ -113,7 +112,7 @@ export function flyoutReducer(state, action) {
         var _action$payload3 = action.payload,
           main = _action$payload3.main,
           child = _action$payload3.child,
-          meta = _action$payload3.meta;
+          _meta2 = _action$payload3.meta;
         var _newHistory = _toConsumableArray(state.history);
         if (state.activeFlyoutGroup) {
           _newHistory.push(state.activeFlyoutGroup);
@@ -129,7 +128,7 @@ export function flyoutReducer(state, action) {
             mainFlyoutProps: main.flyoutProps,
             childFlyoutProps: child.flyoutProps
           },
-          meta: meta
+          meta: _meta2
         };
         return {
           activeFlyoutGroup: applySizeConstraints(_newActiveGroup),
@@ -184,8 +183,8 @@ export function flyoutReducer(state, action) {
           activeFlyoutGroup: finalUpdatedActiveGroup
         });
       }
-    case 'CLEAR_HISTORY':
-      // Clear the history and remove the active group
+    case 'CLOSE_SESSION':
+      // Remove the active group and close the session
       return {
         activeFlyoutGroup: null,
         history: []

package/es/components/flyout/sessions/use_eui_flyout.js

@@ -8,19 +8,6 @@
 
 import { useEffect, useRef } from 'react';
 import { useEuiFlyoutSessionContext } from './flyout_provider';
-
-/**
- * Options that control a main flyout in a session
- */
-
-/**
- * Options that control a child flyout in a session
- */
-
-/**
- * Options for opening both a main flyout and child flyout simultaneously
- */
-
 /**
  * Hook for accessing the flyout API
  * @public
@@ -60,17 +47,7 @@ export function useEuiFlyoutSession() {
   var openFlyoutGroup = function openFlyoutGroup(options) {
     dispatch({
       type: 'OPEN_FLYOUT_GROUP',
-      payload: {
-        main: {
-          size: options.main.size,
-          flyoutProps: options.main.flyoutProps
-        },
-        child: {
-          size: options.child.size,
-          flyoutProps: options.child.flyoutProps
-        },
-        meta: options.meta
-      }
+      payload: options
     });
   };
   var closeChildFlyout = function closeChildFlyout() {
@@ -83,9 +60,9 @@ export function useEuiFlyoutSession() {
       type: 'GO_BACK'
     });
   };
-  var clearHistory = function clearHistory() {
+  var closeSession = function closeSession() {
     dispatch({
-      type: 'CLEAR_HISTORY'
+      type: 'CLOSE_SESSION'
     });
   };
   var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
@@ -97,7 +74,7 @@ export function useEuiFlyoutSession() {
     openFlyoutGroup: openFlyoutGroup,
     closeChildFlyout: closeChildFlyout,
     goBack: goBack,
-    clearHistory: clearHistory,
+    closeSession: closeSession,
     isFlyoutOpen: isFlyoutOpen,
     isChildFlyoutOpen: isChildFlyoutOpen,
     canGoBack: canGoBack

package/es/components/form/range/range_input.styles.js

@@ -7,9 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-export var euiRangeInputStyles = function euiRangeInputStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+import { isEuiThemeRefreshVariant } from '../../../services';
+export var euiRangeInputStyles = function euiRangeInputStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
-    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * (isRefreshVariant ? 3.5 : 4), "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/es/components/provider/component_defaults/component_defaults.js

@@ -61,7 +61,12 @@ EuiComponentDefaultsProvider.propTypes = {
        *
        * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
        */
-    EuiTable: PropTypes.any
+    EuiTable: PropTypes.any,
+    /**
+       * Provide a global configuration for `EuiFlyout`s.
+       * Defaults will be inherited by all `EuiFlyout`s.
+       */
+    EuiFlyout: PropTypes.any
   })
 };
 export var useComponentDefaults = function useComponentDefaults() {
@@ -111,5 +116,10 @@ EuiProviderComponentDefaultsProps.propTypes = {
      *
      * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
      */
-  EuiTable: PropTypes.any
+  EuiTable: PropTypes.any,
+  /**
+     * Provide a global configuration for `EuiFlyout`s.
+     * Defaults will be inherited by all `EuiFlyout`s.
+     */
+  EuiFlyout: PropTypes.any
 };

package/es/components/tree_view/tree_view.js

@@ -233,6 +233,7 @@ export var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
           key: buttonId + index,
           id: buttonId,
           className: node.className,
+          css: node.css,
           buttonRef: function buttonRef(ref) {
             return _this2.setButtonRef(ref, index);
           },
@@ -300,6 +301,9 @@ EuiTreeViewClass.propTypes = {
     /** Optional class to throw on the node
        */
     className: PropTypes.string,
+    /** Optional styles
+       */
+    css: PropTypes.any,
     /** Function to call when the item is clicked.
        The open state of the item will always be toggled.
        */

package/es/services/theme/provider.js

@@ -185,7 +185,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     _setThemeCSSVariables = _useState10[1];
   var setThemeCSSVariables = useCallback(function (variables) {
     return _setThemeCSSVariables(function (previous) {
-      return _objectSpread(_objectSpread({}, previous), variables);
+      var merged = _objectSpread(_objectSpread({}, previous), variables);
+      Object.keys(merged).forEach(function (key) {
+        if (merged[key] === null) {
+          delete merged[key];
+        }
+      });
+      return merged;
     });
   }, []);
   var nestedThemeContext = useMemo(function () {