@elastic/eui 106.0.0 → 106.1.0

package/lib/components/collapsible_nav/collapsible_nav.js

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

package/lib/components/flyout/flyout.js

@@ -20,8 +20,9 @@ var _flyout_close_button = require("./_flyout_close_button");
 var _flyout = require("./flyout.styles");
 var _flyout_child = require("./flyout_child");
 var _flyout_child_manager = require("./flyout_child_manager");
+var _component_defaults = require("../provider/component_defaults");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -62,40 +63,44 @@ function isEuiFlyoutSizeNamed(value) {
 }
 var PADDING_SIZES = exports.PADDING_SIZES = ['none', 's', 'm', 'l'];
 var defaultElement = 'div';
-var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.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);
+var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _usePropsWithComponen = (0, _component_defaults.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 = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
 
@@ -154,12 +159,17 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
      */
     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)
@@ -176,11 +186,11 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
    * ESC key closes flyout (always?)
    */
   var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (!isPushed && event.key === _services.keys.ESCAPE) {
+    if (!isPushed && event.key === _services.keys.ESCAPE && !isChildFlyoutOpen) {
       event.preventDefault();
       onClose(event);
     }
-  }, [onClose, isPushed]);
+  }, [onClose, isPushed, isChildFlyoutOpen]);
 
   /**
    * Set inline styles
@@ -209,32 +219,44 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
   var flyoutToggle = (0, _react.useRef)(document.activeElement);
   var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    fixedHeaders = _useState8[0],
-    setFixedHeaders = _useState8[1];
-  (0, _react.useEffect)(function () {
+    focusTrapShards = _useState8[0],
+    setFocusTrapShards = _useState8[1];
+  var focusTrapSelectors = (0, _react.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]);
+  (0, _react.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 = (0, _react.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
@@ -251,11 +273,11 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     }) : (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiFlyout.screenReaderNonModalDialog",
       default: "You are in a non-modal dialog. To close the dialog, press Escape."
-    }), ' ', fixedHeaders.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiFlyout.screenReaderFixedHeaders",
-      default: "You can still continue tabbing through the page headers in addition to the dialog."
+    }), ' ', focusTrapShards.length > 0 && (0, _react2.jsx)(_i18n.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
@@ -313,14 +335,7 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     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), (0, _react2.jsx)(Element, _extends({
     className: classes,
     css: cssStyles,
@@ -347,11 +362,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 (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, _extends({
       headerZindexLocation: "below"

package/lib/components/flyout/flyout_child.js

@@ -54,7 +54,8 @@ var EuiFlyoutChild = exports.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;
   (0, _react.useEffect)(function () {
     setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(true);
@@ -133,6 +134,13 @@ var EuiFlyoutChild = exports.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 = (0, _react.useCallback)(function (event) {
+    if (isChildFlyoutOpen && event.key === _services.keys.ESCAPE) {
+      event.preventDefault();
+      setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
+      onClose(event.nativeEvent);
+    }
+  }, [isChildFlyoutOpen, onClose, setIsChildFlyoutOpen]);
   return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -153,7 +161,8 @@ var EuiFlyoutChild = exports.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 && (0, _react2.jsx)("h2", {
     id: titleIdGenerated,
     className: "euiScreenReaderOnly"

package/lib/components/flyout/flyout_child_manager.js

@@ -61,8 +61,10 @@ var EuiFlyoutChildProvider = exports.EuiFlyoutChildProvider = function EuiFlyout
     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/lib/components/flyout/sessions/flyout_provider.js

@@ -60,7 +60,7 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
   var activeFlyoutGroup = state.activeFlyoutGroup;
   var handleClose = function handleClose() {
     dispatch({
-      type: 'CLEAR_HISTORY'
+      type: 'CLOSE_SESSION'
     });
   };
   var handleCloseChild = function handleCloseChild() {
@@ -93,10 +93,10 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.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 && (0, _react2.jsx)(_index.EuiFlyoutChild, _extends({
     onClose: handleCloseChild,
-    size: activeFlyoutGroup.config.childSize
+    size: config === null || config === void 0 ? void 0 : config.childSize
   }, flyoutPropsChild), childFlyoutContentNode)));
 };

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

@@ -69,10 +69,10 @@ 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);
@@ -82,11 +82,9 @@ 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),
@@ -101,14 +99,15 @@ 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,
@@ -120,7 +119,7 @@ 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);
@@ -136,7 +135,7 @@ function flyoutReducer(state, action) {
             mainFlyoutProps: main.flyoutProps,
             childFlyoutProps: child.flyoutProps
           },
-          meta: meta
+          meta: _meta2
         };
         return {
           activeFlyoutGroup: applySizeConstraints(_newActiveGroup),
@@ -191,8 +190,8 @@ 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/lib/components/flyout/sessions/use_eui_flyout.js

@@ -14,18 +14,6 @@ var _flyout_provider = require("./flyout_provider");
  * Side Public License, v 1.
  */
 
-/**
- * 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
@@ -65,17 +53,7 @@ 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() {
@@ -88,9 +66,9 @@ 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);
@@ -102,7 +80,7 @@ function useEuiFlyoutSession() {
     openFlyoutGroup: openFlyoutGroup,
     closeChildFlyout: closeChildFlyout,
     goBack: goBack,
-    clearHistory: clearHistory,
+    closeSession: closeSession,
     isFlyoutOpen: isFlyoutOpen,
     isChildFlyoutOpen: isChildFlyoutOpen,
     canGoBack: canGoBack

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiRangeInputStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,9 +14,10 @@ var _react = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-var euiRangeInputStyles = exports.euiRangeInputStyles = function euiRangeInputStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiRangeInputStyles = exports.euiRangeInputStyles = function euiRangeInputStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   return {
-    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * (isRefreshVariant ? 3.5 : 4), "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/lib/components/provider/component_defaults/component_defaults.js

@@ -68,7 +68,12 @@ EuiComponentDefaultsProvider.propTypes = {
        *
        * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
        */
-    EuiTable: _propTypes.default.any
+    EuiTable: _propTypes.default.any,
+    /**
+       * Provide a global configuration for `EuiFlyout`s.
+       * Defaults will be inherited by all `EuiFlyout`s.
+       */
+    EuiFlyout: _propTypes.default.any
   })
 };
 var useComponentDefaults = exports.useComponentDefaults = function useComponentDefaults() {
@@ -118,5 +123,10 @@ EuiProviderComponentDefaultsProps.propTypes = {
      *
      * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
      */
-  EuiTable: _propTypes.default.any
+  EuiTable: _propTypes.default.any,
+  /**
+     * Provide a global configuration for `EuiFlyout`s.
+     * Defaults will be inherited by all `EuiFlyout`s.
+     */
+  EuiFlyout: _propTypes.default.any
 };

package/lib/components/tree_view/tree_view.js

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

package/lib/services/theme/provider.js

@@ -190,7 +190,13 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     _setThemeCSSVariables = _useState10[1];
   var setThemeCSSVariables = (0, _react2.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 = (0, _react2.useMemo)(function () {